29 lines
830 B
Vue
29 lines
830 B
Vue
<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>
|