33 lines
1.0 KiB
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>
|