CPU Usage

data/raw/test/cpuusage.raw

@@ -0,0 +1 @@
+1.2%

index.js

@@ -36,3 +36,10 @@ app.route(apiPrefix + '/diskspace').get((req, res) => {
   });
 });
 
+app.route(apiPrefix + '/cpuusage').get((req, res) => {
+  fs.readFile(path.join(__dirname, 'data/json', 'cpuusage.json'), 'utf8', (err, json) => {
+    if (err) { throw new Error(err); }
+    res.json(JSON.parse(json));
+  });
+});
+

mkData.js

@@ -1,7 +1,9 @@
 let dataFromDate = require('./mkDataFromDate.js');
 let dataFromDiskspace = require('./mkDataFromDiskspace.js');
+let dataFromCPUUsage = require('./mkDataFromCPUUsage.js');
 
 let isTestMode = process.argv[2] === '--test';
 
 dataFromDate(isTestMode);
 dataFromDiskspace(isTestMode);
+dataFromCPUUsage(isTestMode);

mkDataFromCPUUsage.js

@@ -0,0 +1,20 @@
+const fs = require('fs');
+const path = require('path');
+
+module.exports = async function(useTestData = false) {
+  fs.readFile(path.join(__dirname, 'data/raw', useTestData ? 'test' : 'real', 'cpuusage.raw'), 'utf8', (err, usage) => {
+    if (err) {
+      console.error(err);
+      process.exit(1);
+    }
+    let jsonString = JSON.stringify({
+      str: usage,
+      num: parseFloat(usage.slice(0, usage.length -1)),
+    });
+
+    fs.writeFile(path.join(__dirname, 'data/json', 'cpuusage.json'), jsonString, err => {
+      if (err) throw err;
+    });
+  });
+}
+

mkRaw.sh

@@ -8,3 +8,7 @@ echo "date.raw updated"
 touch data/raw/real/diskspace.raw
 df | grep /dev/md0 > data/raw/real/diskspace.raw
 echo "diskspace.raw updated"
+
+touch data/raw/real/usage.raw
+top -b -n2 -p 1 | fgrep "Cpu(s)" | tail -1 | awk -F'id,' -v prefix="$prefix" '{ split($1, vs, ","); v=vs[length(vs)]; sub("%", "", v); printf "%s%.1f%%\n", prefix, 100 - v }' > data/raw/real/cpuusage.raw
+echo "usage.raw updated"

src/assets/app.js

@@ -4,14 +4,19 @@ new Vue({
     fetchingLastBuildDate: true,
     lastBuildDate: '',
 
-    fetchingDiskSpace: '',
+    fetchingDiskSpace: true,
     diskSize: '',
     diskUsed: '',
     diskCapacity: '',
+
+    fetchingCPUUsage: true,
+    cpuUsageNum: 0,
+    cpuUsageStr: '',
   },
   created() {
     this.fetchLastBuildDate();
     this.fetchDiskSpace();
+    this.fetchCPUUsage();
   },
   methods: {
     async fetchLastBuildDate() {
@@ -32,5 +37,14 @@ new Vue({
         this.fetchingDiskSpace = false;
       } catch (err) { throw new Error(err); }
     },
+    async fetchCPUUsage() {
+      this.fetchingCPUUsage = true;
+      try {
+        let { data } = await axios.get('/api/cpuusage');
+        this.cpuUsageNum = data.num;
+        this.cpuUsageStr = data.str;
+        this.fetchingCPUUsage = false;
+      } catch (err) { throw new Error(err); }
+    },
   },
 });

src/index.html

@@ -19,12 +19,21 @@
             <div class="autogrid">
               <div class="col-1-3">
                 <div class="load" v-if="fetchingDiskSpace"></div>
-                <h4 v-else>Used: {{diskCapacity}}</h4>
+                <h4 v-else>Disk Used: {{diskCapacity}}</h4>
               </div>
               <div class="col-2-3">
                 <meter min="0" v-bind:max="diskSize" v-bind:value="diskUsed"></meter>
               </div>
             </div>
+            <div class="autogrid">
+              <div class="col-1-3">
+                <div class="load" v-if="fetchingCPUUsage"></div>
+                <h4 v-else>CPU Used: {{cpuUsageStr}}</h4>
+              </div>
+              <div class="col-2-3">
+                <meter min="0" max="100" v-bind:value="cpuUsageNum"></meter>
+              </div>
+            </div>
           </div>
         </section>