Merge pull request #3 from peteriman/feat/localised-cdn-files

feat: localised cdn files

.eslintignore

@@ -1,3 +1,4 @@
 coverage
 examples
 test
+src/public/javascripts/libs

.gitattributes

@@ -0,0 +1 @@
+src/public/javascripts/libs/**/*.js binary

README.md

@@ -57,6 +57,7 @@ spans: [{
   interval: 15,           // Every 15 seconds
   retention: 60
 }],
+iframe: false,            // iframe=true will remove X-Frame-Options
 chartVisibility: {
   cpu: true,
   mem: true,
@@ -98,28 +99,46 @@ The HTML page handler is exposed as a `pageRoute` property on the main
 middleware function.  So the middleware is mounted to intercept all requests
 while the HTML page handler will be authenticated.
 
-Example using https://www.npmjs.com/package/connect-ensure-login
+Example using custom middleware  
+(Credits to [@peteriman](https://github.com/peteriman))
+```javascript
+// custom middleware to do own auth
+let alt = false
+const authFn = (req, res, next) => {
+  alt = !alt;            // alternating
+  if (alt) {
+    res.sendStatus(401); // unauthorized
+  } else {
+    next();              // proceed
+  }
+};
+
+const statusMonitor = require('express-status-monitor')({ path: '' }); // avoid serving HTML
+app.use(statusMonitor);
+app.get('/status', authFn, statusMonitor.pageRoute);                   // use pageRoute to serve HTML
+```
+
+Example using https://www.npmjs.com/package/connect-ensure-login  
+(Credits to [@mattiaerre](https://github.com/mattiaerre))
 ```javascript
 const ensureLoggedIn = require('connect-ensure-login').ensureLoggedIn()
 
-const statusMonitor = require('express-status-monitor')();
+const statusMonitor = require('express-status-monitor')({ path: '' }); // avoid serving HTML
 app.use(statusMonitor);
-app.get('/status', ensureLoggedIn, statusMonitor.pageRoute)
+app.get('/status', ensureLoggedIn, statusMonitor.pageRoute);           // use pageRoute to serve HTML
 ```
 
-Credits to [@mattiaerre](https://github.com/mattiaerre)
-
-Example using [http-auth](https://www.npmjs.com/package/http-auth)
+Example using [http-auth](https://www.npmjs.com/package/http-auth)  
+(Credits to [@cristianossd](https://github.com/cristianossd) and )
 ```javascript
 const auth = require('http-auth');
 const basic = auth.basic({realm: 'Monitor Area'}, function(user, pass, callback) {
   callback(user === 'username' && pass === 'password');
 });
 
-// Set '' to config path to avoid middleware serving the html page (path must be a string not equal to the wanted route)
-const statusMonitor = require('express-status-monitor')({ path: '' });
-app.use(statusMonitor.middleware); // use the "middleware only" property to manage websockets
-app.get('/status', basic.check(statusMonitor.pageRoute)); // use the pageRoute property to serve the dashboard html page
+const statusMonitor = require('express-status-monitor')({ path: '' }); // avoid serving HTML
+app.use(statusMonitor);
+app.get('/status', basic.check(statusMonitor.pageRoute));              // use pageRoute to serve HTML
 ```
 
 ## Using module with socket.io in project

package.json

@@ -55,6 +55,11 @@
       "name": "KRAIEM Taha Yassine",
       "email": "[email protected]",
       "url": "https://github.com/tahayk/"
+    },
+    {
+      "name": "Lam Wei Li",
+      "email": "[email protected]",
+      "url": "https://github.com/peteriman/"
     }
   ],
   "repository": {
@@ -68,6 +73,7 @@
     "handlebars": "^4.7.7",
     "on-headers": "1.0.2",
     "pidusage": "2.0.18",
+    "serve-static": "^1.15.0",
     "socket.io": "^4.4.1"
   },
   "optionalDependencies": {

src/middleware-wrapper.js

@@ -2,6 +2,7 @@ const fs = require('fs');
 const path = require('path');
 const onHeaders = require('on-headers');
 const Handlebars = require('handlebars');
+const serveStatic = require('serve-static');
 const validate = require('./helpers/validate');
 const onHeadersListener = require('./helpers/on-headers-listener');
 const socketIoInit = require('./helpers/socket-io-init');
@@ -20,6 +21,7 @@ const middlewareWrapper = config => {
 
   const data = {
     title: validatedConfig.title,
+    path: validatedConfig.path,
     port: validatedConfig.port,
     socketPath: validatedConfig.socketPath,
     namespace: validatedConfig.namespace,
@@ -34,26 +36,41 @@ const middlewareWrapper = config => {
 
   const render = Handlebars.compile(htmlTmpl);
 
+  const renderResults = (req, res) => {
+    healthChecker(validatedConfig.healthChecks).then(results => {
+      data.path = req.originalUrl.replace(/\/$/, '');
+      data.healthCheckResults = results;
+      if (validatedConfig.iframe) {
+        if (res.removeHeader) {
+          res.removeHeader('X-Frame-Options');
+        }
+
+        if (res.remove) {
+          res.remove('X-Frame-Options');
+        }
+      }
+
+      res.send(render(data));
+    });
+  };
+
   const middleware = (req, res, next) => {
     socketIoInit(req.socket.server, validatedConfig);
 
     const startTime = process.hrtime();
 
-    if (req.path === validatedConfig.path) {
-      healthChecker(validatedConfig.healthChecks).then(results => {
-        data.healthCheckResults = results;
-        if (validatedConfig.iframe) {
-          if (res.removeHeader) {
-            res.removeHeader('X-Frame-Options');
-          }
-
-          if (res.remove) {
-            res.remove('X-Frame-Options');
-          }
-        }
+    const serve = serveStatic(path.join(__dirname, 'public/javascripts/libs'), {
+      setHeaders: resp => {
+        resp.setHeader('Cache-Control', 'public, max-age=31536000, s-maxage=31536000, immutable');
+      }
+    });
+    const staticCdnPath = path.join(data.path, 'javascripts/libs');
 
-        res.send(render(data));
-      });
+    if (req.path.replace(/\/$/, '') === validatedConfig.path.replace(/\/$/, '')) {
+      renderResults(req, res);
+    } else if (req.path.startsWith(staticCdnPath)) {
+      req.url = req.url.replace(staticCdnPath, '');
+      serve(req, res, next);
     } else {
       if (!req.path.startsWith(validatedConfig.ignoreStartsWith)) {
         onHeaders(res, () => {
@@ -77,10 +94,7 @@ const middlewareWrapper = config => {
    */
   middleware.middleware = middleware;
   middleware.pageRoute = (req, res) => {
-    healthChecker(validatedConfig.healthChecks).then(results => {
-      data.healthCheckResults = results;
-      res.send(render(data));
-    });
+    renderResults(req, res);
   };
   return middleware;
 };

src/public/index.html

@@ -2,8 +2,8 @@
 <html>
   <head>
     <title>{{title}}</title>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.bundle.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.4.1/socket.io.min.js" integrity="sha512-iqRVtNB+t9O+epcgUTIPF+nklypcR23H1yR1NFM9kffn6/iBhZ9bTB6oKLaGMv8JE9UgjcwfBFg/eHC/VMws+g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="{{path}}/javascripts/libs/Chart.js/2.2.2/Chart.bundle.min.js" integrity="sha512-7lGOl7i+GEwPZDzLAq8XDRoiBUkHoy0pGLS6I3YxFAD7SiwpnTUt0ldz7Cd+t6vaJxd9Qz0xvdsZ3Pv4fWpBHQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="{{path}}/javascripts/libs/socket.io/4.4.1/socket.io.min.js" integrity="sha512-iqRVtNB+t9O+epcgUTIPF+nklypcR23H1yR1NFM9kffn6/iBhZ9bTB6oKLaGMv8JE9UgjcwfBFg/eHC/VMws+g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <style>
       {{{style}}}
     </style>

test/middleware-wrapper.spec.js

@@ -20,6 +20,7 @@ describe('middleware-wrapper', () => {
 
     describe('when invoked', () => {
       beforeEach(() => {
+        req.originalUrl = defaultConfig.path;
         req.path = defaultConfig.path;
         res.send.reset();
       });