arm/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Tyler
2017-12-03 17:54:36 -05:00
commit 183542178b
31 changed files with 1063 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/status/CPUStatus.vue Normal file
View File

@ -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>

32
src/components/status/DiskStatus.vue Normal file
View File

@ -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>

39
src/components/status/MemoryStatus.vue Normal file
View File

@ -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>