Finish conversion to React

README.md

@@ -59,5 +59,5 @@ These have been heavily modified.
 
 ### TODO
 * [ ] Make file system browser better.  Show size, permissions, etc.  Might be able to do this by faking out an `index.html` as part of the http.FileSystem stuff.
-* [ ] Switch to React with an API to the server?  This mixed template stuff sucks.
+* [x] Switch to React with an API to the server?  This mixed template stuff sucks.
 * [ ] Find a better way to pick unique colors to show version.  Perhaps just have a table based on the fakeversion.

client/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "start": "webpack-dev-server",
     "dev": "webpack -d --watch",
-    "build": "webpack -p"
+    "build": "NODE_ENV=production webpack"
   },
   "author": "",
   "private": true,

client/src/app.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import Details from './details';
+import Env from './env';
+import Probe from './probe';
+
+class App extends React.Component {
+  render () {
+    return (
+      <div>
+        <div className="title">
+          <h1>Kubernetes Up and Running</h1>
+          <div>Demo application version <i>{this.props.page.version}</i></div>
+        </div>
+
+        <div className="warning">WARNING: This server may expose sensitive and secret information. Be careful.</div>
+
+        <Details open={true} title="Request Details">
+          <div><b>Proto:</b> <code>{this.props.page.requestProto}</code></div>
+          <div><b>Client addr:</b> <code>{this.props.page.requestAddr}</code></div>
+          <div><b>Dump:</b></div>
+          <pre>
+            {this.props.page.requestDump}
+          </pre>
+        </Details>
+
+        <Env path="/env" />
+
+        <Probe title="Liveness Check" path="/healthy" />
+
+        <Probe title="Readiness Check" path="/ready" />
+
+
+        <Details title="File System">
+            <a href="/fs/">Browse the root file system for this server.</a>
+        </Details>
+      </div>
+    )
+  }
+}
+
+module.exports = App;

client/src/index.jsx

@@ -1,14 +1,5 @@
 import React from 'react';
 import {render} from 'react-dom';
-import Details from './details';
-import Probe from './probe'
-import Env from './env'
+import App from './app'
 
-render(<Probe title="Liveness Check" path="/healthy" />, document.getElementById("liveness"));
-render(<Probe title="Readiness Check" path="/ready" />, document.getElementById("readiness"));
-render(<Env path="/env" />, document.getElementById("env"));
-
-render(
-  <Details title="File System">
-      <a href="/fs/">Browse the root file system for this server.</a>
-  </Details>, document.getElementById("fs"))
+render(<App page={pageContext}/>, document.getElementById("root"))

client/webpack.config.js

@@ -1,9 +1,50 @@
 var webpack = require('webpack');
 var path = require('path');
 
+var isProd = (process.env.NODE_ENV === 'production');
+
 var BUILD_DIR = path.resolve(__dirname, '../sitedata/built');
 var APP_DIR = path.resolve(__dirname, 'src');
 
+// Conditionally return a list of plugins to use based on the current environment.
+// Repeat this pattern for any other config key (ie: loaders, etc).
+function getPlugins() {
+  var plugins = [];
+
+  // Always expose NODE_ENV to webpack, you can now use `process.env.NODE_ENV`
+  // inside your code for any environment checks; UglifyJS will automatically
+  // drop any unreachable code.
+  plugins.push(new webpack.DefinePlugin({
+    'process.env': {
+      'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
+    }
+  }));
+
+
+  // Conditionally add plugins for Production builds.
+  if (isProd) {
+    // This helps ensure the builds are consistent if source hasn't changed
+    plugins.push(new webpack.optimize.OccurrenceOrderPlugin())
+    // Try to dedupe duplicated modules, if any
+    plugins.push(new webpack.optimize.DedupePlugin())
+    // Minify the code.
+    plugins.push(new webpack.optimize.UglifyJsPlugin({
+      compress: {
+        screw_ie8: true, // React doesn't support IE8
+        warnings: false
+      },
+      mangle: {
+        screw_ie8: true
+      },
+      output: {
+        comments: false,
+        screw_ie8: true
+      }
+    }));
+  }
+  return plugins;
+}
+
 var config = {
   entry: APP_DIR + '/index.jsx',
   output: {
@@ -24,6 +65,7 @@ var config = {
       },
     ]
   },
+  plugins: getPlugins(),
   resolve: {
     extensions: ['', '.js', '.jsx']
   },

cmd/kuard/main.go

@@ -47,11 +47,11 @@ func loggingMiddleware(handler http.Handler) http.Handler {
 }
 
 type pageContext struct {
-	Version      string
-	VersionColor template.CSS
-	RequestDump  string
-	RequestProto string
-	RequestAddr  string
+	Version      string       `json:"version"`
+	VersionColor template.CSS `json:"versionColor"`
+	RequestDump  string       `json:"requestDump"`
+	RequestProto string       `json:"requestProto"`
+	RequestAddr  string       `json:"requestAddr"`
 }
 
 type kuard struct {
@@ -74,32 +74,38 @@ func (k *kuard) rootHandler(w http.ResponseWriter, r *http.Request, _ httprouter
 	k.tg.Render(w, "index.html", k.getPageContext(r))
 }
 
-func NewApp(router *httprouter.Router) *kuard {
-	k := &kuard{
-		tg: &htmlutils.TemplateGroup{},
-	}
-
-	// Add the root handler
-	router.GET("/", k.rootHandler)
-
-	// Add the static files
+func fsHandlerForPrefix(prefix string) http.Handler {
 	var fs http.FileSystem
 	if *config.Debug {
 		fs = &assetfs.AssetFS{
 			Asset:     debugsitedata.Asset,
 			AssetDir:  func(path string) ([]string, error) { return nil, os.ErrNotExist },
 			AssetInfo: debugsitedata.AssetInfo,
-			Prefix:    "static",
+			Prefix:    prefix,
 		}
 	} else {
 		fs = &assetfs.AssetFS{
 			Asset:     sitedata.Asset,
 			AssetDir:  func(path string) ([]string, error) { return nil, os.ErrNotExist },
 			AssetInfo: sitedata.AssetInfo,
-			Prefix:    "static",
+			Prefix:    prefix,
 		}
 	}
-	router.Handler("GET", "/static/*filepath", http.StripPrefix("/static/", http.FileServer(fs)))
+	return http.StripPrefix("/"+prefix+"/", http.FileServer(fs))
+}
+
+func NewApp(router *httprouter.Router) *kuard {
+	k := &kuard{
+		tg: &htmlutils.TemplateGroup{},
+	}
+
+	// Add the root handler
+	router.GET("/", k.rootHandler)
+
+	// Add the static files
+	router.Handler("GET", "/built/*filepath", fsHandlerForPrefix("built"))
+	router.Handler("GET", "/static/*filepath", fsHandlerForPrefix("static"))
+
 	router.Handler("GET", "/fs/*filepath", http.StripPrefix("/fs", http.FileServer(http.Dir("/"))))
 
 	debugprobe.New("/healthy").AddRoutes(router)

pkg/htmlutils/filters.go

@@ -17,6 +17,7 @@ limitations under the License.
 package htmlutils
 
 import (
+	"encoding/json"
 	"html/template"
 	"time"
 
@@ -27,6 +28,7 @@ func FuncMap() template.FuncMap {
 	return template.FuncMap{
 		"friendlytime": FriendlyTime,
 		"reltime":      RelativeTime,
+		"jsonstring":   JSONString,
 	}
 }
 
@@ -37,3 +39,11 @@ func FriendlyTime(t time.Time) string {
 func RelativeTime(t time.Time) string {
 	return humanize.RelTime(t, time.Now(), "ago", "from now")
 }
+
+func JSONString(v interface{}) (template.JS, error) {
+	a, err := json.Marshal(v)
+	if err != nil {
+		return template.JS(""), err
+	}
+	return template.JS(a), nil
+}

sitedata/static/css/styles.css

@@ -1,6 +1,7 @@
 body {
   font-size: 12pt;
   font-family: sans-serif;
+  margin: 0;
 }
 
 .title {

sitedata/templates/index.html

@@ -12,33 +12,13 @@
       color: {{ .VersionColor }};
     }
   </style>
+  <script>
+var pageContext = {{ . | jsonstring }}
+  </script>
 </head>
 
 <body>
-  <div class="title">
-    <h1>Kubernetes Up and Running</h1>
-    <div>Demo application version <i>{{.Version}}</i></div>
-  </div>
-
-  <div class="warning">WARNING: This server may expose sensitive and secret information. Be careful.</div>
-
-  <details open>
-    <summary>Request Details</summary>
-    <div class=content>
-      <div><b>Proto:</b> <code>{{.RequestProto}}</code></div>
-      <div><b>Client addr:</b> <code>{{.RequestAddr}}</code></div>
-      <div><b>Dump:</b></div>
-      <pre>
-        {{- .RequestDump -}}
-      </pre>
-    </div>
-  </details>
-
-  <div id="env"></div>
-  <div id="liveness"></div>
-  <div id="readiness"></div>
-  <div id="fs"></div>
-
+  <div id="root"></div>
   <script src="built/bundle.js" type="text/javascript"></script>
 </body>
 </html>