Initial commit

src/components/Hello.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="row">
+    <job v-for="(job, index) in jobs" :job="job" :key="job_id"></job>
+  </div>
+</template>
+
+<script>
+import job from '@/components/Job';
+export default {
+  name: 'hello',
+  components: {
+    job: job
+  },
+  data () {
+    return {
+      msg: 'Welcome to Your Vue.js App'
+    }
+  }
+}
+</script>

src/components/Job.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="row">
+    <div class="col-sm">
+      <h3>{{ job.title }} - {{ stageValue }}</h3>
+      <template v-if="job.progress">
+        <span class="text-center">{{ job.progress.name }} ({{ job.progress.percentage }}%)</span>
+        <div class="progress">
+          <div class="progress-bar bg-success" role="progressbar" :style="'width: ' + job.progress.percentage + '%'" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">{{ job.progress.percentage }}%</div>
+        </div>
+        <template v-if="job.progress.totalPercentage">
+          <span class="text-center">Total Progress ({{ job.progress.totalPercentage }}%)</span>
+          <div class="progress" v-if="job.progress.totalPercentage > 0">
+            <div class="progress-bar bg-success" role="progressbar" :style="'width: ' + job.progress.totalPercentage + '%'" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">{{ job.progress.totalPercentage }}%</div>
+          </div>
+        </template>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'job',
+    props: [ 'job' ],
+    computed: {
+      stageValue: function() {
+        if (this.job.stage === 'rip') {
+          return 'Ripping';
+        } else if (this.job.stage === 'transcode') {
+          return 'Transcoding';
+        }
+        return 'Unknown: ' + this.job.stage;
+      }
+    }
+  }
+</script>

src/components/Status.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="row" v-if="sensors.cpu || sensors.memory || sensors.storage">
+    <cpu_status :status="sensors.cpu"></cpu_status>
+    <memory_status :status="sensors.memory"></memory_status>
+    <disk_status :status="sensors.disk"></disk_status>
+  </div>
+</template>
+
+<script>
+  import memory_status from './status/MemoryStatus';
+  import cpu_status from './status/CPUStatus';
+  import disk_status from './status/DiskStatus';
+
+  export default {
+    name: 'status',
+    props: [ 'sensors' ],
+    components: {
+      cpu_status: cpu_status,
+      memory_status: memory_status,
+      disk_status: disk_status
+    },
+  }
+</script>

src/components/TempStatus.vue

@@ -0,0 +1,15 @@
+<template>
+  <div style="padding-top: 10px;">
+    <template v-for="(temp, id) in temperatures">
+      <span class="badge badge-info">{{ temp.name }}: {{ temp.temperature }}C</span>&nbsp;
+    </template>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'temp_status',
+    props: [ 'temperatures' ],
+    components: {},
+  }
+</script>

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>

src/components/status/DiskStatus.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="col">
+    <h4>Disk Space <span :class="'badge badge-' + percentageClass"><formatBytes :bytes="status.used"></formatBytes> of <formatBytes :bytes="status.total"></formatBytes></span></h4>
+    <div class="progress">
+      <div :class="'progress-bar bg-' + percentageClass" role="progressbar" :style="{ width : usedPercentage + '%' }" :aria-valuenow="usedPercentage" aria-valuemin="0" aria-valuemax="100"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'disk_status',
+    props: [ 'status' ],
+    computed: {
+      usedPercentage: function() {
+        if (!this.status) {
+          return 0;
+        }
+        return parseFloat((this.status.used / this.status.total) * 100).toFixed(1).toString();
+      },
+      percentageClass: function() {
+        let usedPercent = (this.status.used / this.status.total) * 100;
+        if (usedPercent >= 90) {
+          return 'danger';
+        } else if (usedPercent >= 75) {
+          return 'warning';
+        }
+        return 'success'
+      },
+    }
+  }
+</script>

src/components/status/MemoryStatus.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="col">
+    <h4>Memory <span :class="'badge badge-' + percentageClass"><formatBytes :bytes="(status.MemUsed + status.Buffers + status.Cached) * 1024" /> / <formatBytes :bytes="status.MemTotal * 1024" /></span></h4>
+    <div class="progress">
+      <div class="progress-bar bg-success" role="progressbar" :style="{ width: memoryPercentage + '%' }" :aria-valuenow="memoryPercentage" aria-valuemin="0" aria-valuemax="100"></div>
+      <div class="progress-bar bg-warning" role="progressbar" :style="{ width: memoryBufCachePercentage + '%' }" :aria-valuenow="memoryBufCachePercentage" aria-valuemin="0" aria-valuemax="100"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'memory_status',
+    props: [ 'status' ],
+    computed: {
+      memoryPercentage: function() {
+        if (!this.status) {
+          return 0;
+        }
+        return parseFloat((this.status.MemUsed / this.status.MemTotal) * 100).toFixed(1).toString();
+      },
+      memoryBufCachePercentage: function() {
+        if (!this.status) {
+          return 0;
+        }
+        return parseFloat(((this.status.Buffers + this.status.Cached) / this.status.MemTotal) * 100).toFixed(1).toString();
+      },
+      percentageClass: function() {
+        let usedPercent = (this.status.MemUsed / this.status.MemTotal) * 100;
+        if (usedPercent >= 90) {
+          return 'danger';
+        } else if (usedPercent >= 80) {
+          return 'warning';
+        }
+        return 'success'
+      },
+    }
+  }
+</script>