web/src/components/status/DiskStatus.vue

33 lines
1.0 KiB
Vue

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