Initial commit

src/components/status/CPUStatus.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="col">
+    <h4>CPU <span :class="'badge badge-' + percentageClass">{{ formattedPercentage }}%</span></h4>
+    <div class="progress">
+      <div :class="'progress-bar bg-' + percentageClass" role="progressbar" :style="{ width : status.UserPct + '%' }" :aria-valuenow="status.UserPct" aria-valuemin="0" aria-valuemax="100"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'cpu_status',
+    props: [ 'status' ],
+    computed: {
+      formattedPercentage: function() {
+        return parseFloat(this.status.UserPct).toFixed(2);
+      },
+      percentageClass: function() {
+        if (this.status.UserPct >= 90) {
+          return 'danger';
+        } else if (this.status.UserPct >= 80) {
+          return 'warning';
+        }
+        return 'success'
+      },
+    }
+  }
+</script>