Merge pull request #89 from colinrcummings/master

Add the ability to hide selected charts
RafalWilinski · Oct 18, 2017 · b782618 · b782618
2 parents 34a7ff5 + 3853bd7
commit b782618
Show file tree

Hide file tree

Showing 8 changed files with 58 additions and 10 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -104,7 +104,7 @@
         "no-bitwise": "error",
         "no-caller": "error",
         "no-catch-shadow": "error",
-        "no-confusing-arrow": "error",
+        "no-confusing-arrow": "off",
         "no-continue": "error",
         "no-div-regex": "error",
         "no-duplicate-imports": "error",

diff --git a/README.md b/README.md
@@ -53,7 +53,15 @@ spans: [{
 }, {
   interval: 15,           // Every 15 seconds
   retention: 60
-}]
+}],
+chartVisibility: {
+  cpu: true,
+  mem: true,
+  load: true,
+  responseTime: true,
+  rps: true,
+  statusCodes: true
+}
 
 ```
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "express-status-monitor",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Realtime Monitoring for Express-based Node applications",
   "main": "index.js",
   "keywords": [
@@ -20,6 +20,11 @@
       "email": "[email protected]",
       "url": "https://github.com/JulienBreux/"
     },
+    {
+      "name": "Colin Cummings",
+      "email": "[email protected]",
+      "url": "https://github.com/colinrcummings/"
+    },
     {
       "name": "Ferdinand Mütsch",
       "email": "[email protected]",

diff --git a/src/helpers/default-config.js b/src/helpers/default-config.js
@@ -18,4 +18,12 @@ module.exports = {
   port: null,
   websocket: null,
   iframe: false,
+  chartVisibility: {
+    cpu: true,
+    mem: true,
+    load: true,
+    responseTime: true,
+    rps: true,
+    statusCodes: true
+  }
 };
diff --git a/src/helpers/validate.js b/src/helpers/validate.js
@@ -5,12 +5,22 @@ module.exports = config => {
     return defaultConfig;
   }
 
+  const mungeChartVisibility = configChartVisibility => {
+    Object.keys(defaultConfig.chartVisibility).forEach(key => {
+      if (configChartVisibility[key] === false) {
+        defaultConfig.chartVisibility[key] = false;
+      }
+    });
+    return defaultConfig.chartVisibility;
+  };
+
   config.title = (typeof config.title === 'string') ? config.title : defaultConfig.title;
   config.path = (typeof config.path === 'string') ? config.path : defaultConfig.path;
   config.spans = (typeof config.spans === 'object') ? config.spans : defaultConfig.spans;
   config.port = (typeof config.port === 'number') ? config.port : defaultConfig.port;
   config.websocket = (typeof config.websocket === 'object') ? config.websocket : defaultConfig.websocket;
   config.iframe = (typeof config.iframe === 'boolean') ? config.iframe : defaultConfig.iframe;
+  config.chartVisibility = (typeof config.chartVisibility === 'object') ? mungeChartVisibility(config.chartVisibility) : defaultConfig.chartVisibility;
 
   return config;
 };
diff --git a/src/middleware-wrapper.js b/src/middleware-wrapper.js
@@ -8,11 +8,19 @@ const socketIoInit = require('./helpers/socket-io-init');
 const middlewareWrapper = config => {
   const validatedConfig = validate(config);
 
+  const bodyClasses = Object.keys(validatedConfig.chartVisibility).reduce((accumulator, key) => {
+    if (config.chartVisibility[key] === false) {
+      accumulator.push(`hide-${key}`);
+    }
+    return accumulator;
+  }, []).join(' ');
+
   const renderedHtml =
     fs.readFileSync(path.join(__dirname, '/public/index.html'))
       .toString()
       .replace(/{{title}}/g, validatedConfig.title)
       .replace(/{{port}}/g, validatedConfig.port)
+      .replace(/{{bodyClasses}}/g, bodyClasses)
       .replace(/{{script}}/g, fs.readFileSync(path.join(__dirname, '/public/javascripts/app.js')))
       .replace(/{{style}}/g, fs.readFileSync(path.join(__dirname, '/public/stylesheets/style.css')));
 

diff --git a/src/public/index.html b/src/public/index.html
@@ -8,14 +8,14 @@
     {{style}}
   </style>
 </head>
-<body>
+<body class="{{bodyClasses}}">
 <div class="content">
   <div class="header">
     <b>{{title}}</b>
     <div id="span-controls" class="span-controls">
     </div>
   </div>
-  <div class="container">
+  <div class="container cpu">
     <div class="stats-column">
       <h5>CPU Usage</h5>
       <h1 id="cpuStat">- %</h1>
@@ -24,7 +24,7 @@ <h1 id="cpuStat">- %</h1>
       <canvas id="cpuChart" width="400" height="100"></canvas>
     </div>
   </div>
-  <div class="container">
+  <div class="container mem">
     <div class="stats-column">
       <h5>Memory Usage</h5>
       <h1 id="memStat">- %</h1>
@@ -33,7 +33,7 @@ <h1 id="memStat">- %</h1>
       <canvas id="memChart" width="200" height="100"></canvas>
     </div>
   </div>
-  <div class="container">
+  <div class="container load">
     <div class="stats-column">
       <h5>One Minute Load Avg</h5>
       <h1 id="loadStat">-</h1>
@@ -42,7 +42,7 @@ <h1 id="loadStat">-</h1>
       <canvas id="loadChart" width="200" height="100"></canvas>
     </div>
   </div>
-  <div class="container">
+  <div class="container responseTime">
     <div class="stats-column">
       <h5>Response Time</h5>
       <h1 id="responseTimeStat">-</h1>
@@ -51,7 +51,7 @@ <h1 id="responseTimeStat">-</h1>
       <canvas id="responseTimeChart" width="200" height="100"></canvas>
     </div>
   </div>
-  <div class="container">
+  <div class="container rps">
     <div class="stats-column">
       <h5>Requests per Second</h5>
       <h1 id="rpsStat">-</h1>
@@ -60,7 +60,7 @@ <h1 id="rpsStat">-</h1>
       <canvas id="rpsChart" width="200" height="100"></canvas>
     </div>
   </div>
-  <div class="container">
+  <div class="container statusCodes">
     <div class="stats-column">
       <h5>Status Codes</h5>
       <h6 class="status-code status-code-2xx">2xx</h6>

diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css
@@ -2,6 +2,15 @@
   font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
 }
 
+body.hide-cpu .container.cpu,
+body.hide-mem .container.mem,
+body.hide-load .container.load,
+body.hide-responseTime .container.responseTime,
+body.hide-rps .container.rps,
+body.hide-statusCodes .container.statusCodes {
+  display: none;
+}
+
 h1 {
   font-size: 3em;
   color: #222;