32 lines
939 B
Vue
32 lines
939 B
Vue
<template>
|
|
<b-nav-item-dropdown no-caret right>
|
|
<template slot="button-content">
|
|
<font-awesome-icon icon="microchip" /> Memory
|
|
<b-progress :value="this.status.usedPercent" height=".5rem" :variant="percentageClass"></b-progress>
|
|
</template>
|
|
<b-dropdown-header class="text-center">Memory</b-dropdown-header>
|
|
<div class="text-center">
|
|
<span :class="'badge badge-' + percentageClass"><formatBytes :bytes="status.used * 1024" /> / <formatBytes :bytes="status.total * 1024" /></span>
|
|
|
|
</div>
|
|
</b-nav-item-dropdown>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'memory_status',
|
|
props: [ 'status' ],
|
|
computed: {
|
|
percentageClass: function() {
|
|
let usedPercent = this.status.usedPercent;
|
|
if (usedPercent >= 90) {
|
|
return 'danger';
|
|
} else if (usedPercent >= 80) {
|
|
return 'warning';
|
|
}
|
|
return 'success'
|
|
},
|
|
}
|
|
}
|
|
</script>
|