40 lines
1.5 KiB
Vue
40 lines
1.5 KiB
Vue
<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>
|