mirror of https://github.com/Lissy93/dashy.git
✨ Adds widgets for monitoring CPU usage
This commit is contained in:
Alicia Sykes
parent
9884087975
commit
7fd1cab362
|
|
@ -1,19 +1,18 @@
|
|||
<template>
|
||||
<div class="glances-cpu-cores-wrapper">
|
||||
<div class="percentage-charts" v-for="(chartData, index) in cpuChartData" :key="index">
|
||||
<PercentageChart :values="chartData" />
|
||||
<PercentageChart :values="chartData" :title="`Core #${index + 1}`" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import WidgetMixin from '@/mixins/WidgetMixin';
|
||||
import ChartingMixin from '@/mixins/ChartingMixin';
|
||||
import { capitalize } from '@/utils/MiscHelpers';
|
||||
import PercentageChart from '@/components/Charts/PercentageChart';
|
||||
|
||||
export default {
|
||||
mixins: [WidgetMixin, ChartingMixin],
|
||||
mixins: [WidgetMixin],
|
||||
components: {
|
||||
PercentageChart,
|
||||
},
|
||||
|
|
@ -31,56 +30,29 @@ export default {
|
|||
return `${this.hostname}/api/3/quicklook`;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
// Enable automatic updates (won't be applied if user has explicitly disabled)
|
||||
this.overrideUpdateInterval = 2;
|
||||
},
|
||||
methods: {
|
||||
fetchData() {
|
||||
this.makeRequest(this.endpoint).then(this.processData);
|
||||
},
|
||||
/* Converts returned data into format for the percentage charts */
|
||||
processData(cpuData) {
|
||||
const results = [];
|
||||
const cpuSections = [];
|
||||
cpuData.percpu.forEach((cpuInfo) => {
|
||||
const cpuSection = [];
|
||||
const ignore = ['total', 'key', 'cpu_number'];
|
||||
const ignore = ['total', 'key', 'cpu_number', 'idle'];
|
||||
cpuSection.push({ label: 'Idle', size: cpuInfo.idle, color: '#20e253' });
|
||||
Object.keys(cpuInfo).forEach((keyName) => {
|
||||
if (!ignore.includes(keyName) && cpuInfo[keyName]) {
|
||||
cpuSection.push({
|
||||
label: capitalize(keyName),
|
||||
size: cpuInfo[keyName],
|
||||
color: keyName === 'idle' ? '#20e253' : null,
|
||||
});
|
||||
cpuSection.push({ label: capitalize(keyName), size: cpuInfo[keyName] });
|
||||
}
|
||||
});
|
||||
results.push(cpuSection.reverse());
|
||||
});
|
||||
this.cpuChartData = results;
|
||||
},
|
||||
generateCpuChart(cpuData) {
|
||||
// [
|
||||
// { size: 15, label: 'Hello' },
|
||||
// { size: 12, label: 'World' },
|
||||
// { size: 10 },
|
||||
// { size: 10 },
|
||||
// { size: 10 },
|
||||
// { size: 10 },
|
||||
// { size: 5 },
|
||||
// { size: 5 },
|
||||
// { size: 5 },
|
||||
// ]
|
||||
const newElement = document.createElement('div');
|
||||
const parentContainer = document.getElementById(this.chartId);
|
||||
parentContainer.appendChild(newElement);
|
||||
const colors = Array(cpuData.labels.length - 1).fill('#f80363');
|
||||
colors.push('#20e253');
|
||||
return new this.Chart(newElement, {
|
||||
title: 'CPU',
|
||||
data: cpuData,
|
||||
type: 'percentage',
|
||||
height: 150,
|
||||
colors,
|
||||
barOptions: {
|
||||
height: 18,
|
||||
depth: 4,
|
||||
},
|
||||
cpuSections.push(cpuSection);
|
||||
});
|
||||
this.cpuChartData = cpuSections;
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
@ -89,5 +61,8 @@ export default {
|
|||
<style scoped lang="scss">
|
||||
.glances-cpu-cores-wrapper {
|
||||
color: var(--widget-text-color);
|
||||
.percentage-charts:not(:last-child) {
|
||||
border-bottom: 1px dashed var(--widget-accent-color);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,24 @@
|
|||
<template>
|
||||
<div class="glances-cpu-gauge-wrapper">
|
||||
<GaugeChart :value="gaugeValue" :baseColor="background">
|
||||
<GaugeChart :value="gaugeValue" :baseColor="background" :gaugeColor="gaugeColor">
|
||||
<p class="percentage">{{ gaugeValue }}%</p>
|
||||
</GaugeChart>
|
||||
<p class="show-more-btn" @click="toggleMoreInfo">
|
||||
{{ showMoreInfo ? $t('widgets.general.show-less') : $t('widgets.general.show-more') }}
|
||||
</p>
|
||||
<div class="more-info" v-if="moreInfo && showMoreInfo">
|
||||
<div class="more-info-row" v-for="(info, key) in moreInfo" :key="key">
|
||||
<p class="label">{{ info.label }}</p>
|
||||
<p class="value">{{ info.value }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import WidgetMixin from '@/mixins/WidgetMixin';
|
||||
import GaugeChart from '@/components/Charts/Gauge';
|
||||
import { getValueFromCss } from '@/utils/MiscHelpers';
|
||||
import { getValueFromCss, capitalize } from '@/utils/MiscHelpers';
|
||||
|
||||
export default {
|
||||
mixins: [WidgetMixin],
|
||||
|
|
@ -19,6 +28,9 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
gaugeValue: 0,
|
||||
gaugeColor: '#272f4d',
|
||||
showMoreInfo: false,
|
||||
moreInfo: null,
|
||||
background: '#fff',
|
||||
};
|
||||
},
|
||||
|
|
@ -37,7 +49,30 @@ export default {
|
|||
},
|
||||
processData(cpuData) {
|
||||
this.gaugeValue = cpuData.total;
|
||||
this.gaugeColor = this.getColor(cpuData.total);
|
||||
const moreInfo = [];
|
||||
const ignore = ['total', 'cpucore', 'time_since_update',
|
||||
'interrupts', 'soft_interrupts', 'ctx_switches', 'syscalls'];
|
||||
Object.keys(cpuData).forEach((key) => {
|
||||
if (!ignore.includes(key) && cpuData[key]) {
|
||||
moreInfo.push({ label: capitalize(key), value: `${cpuData[key].toFixed(1)}%` });
|
||||
}
|
||||
});
|
||||
this.moreInfo = moreInfo;
|
||||
},
|
||||
toggleMoreInfo() {
|
||||
this.showMoreInfo = !this.showMoreInfo;
|
||||
},
|
||||
getColor(cpuPercent) {
|
||||
if (cpuPercent < 50) return '#20e253';
|
||||
if (cpuPercent < 60) return '#f6f000';
|
||||
if (cpuPercent < 80) return '#fca016';
|
||||
if (cpuPercent < 100) return '#f80363';
|
||||
return '#272f4d';
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.overrideUpdateInterval = 2;
|
||||
},
|
||||
mounted() {
|
||||
this.background = getValueFromCss('widget-accent-color');
|
||||
|
|
@ -47,10 +82,8 @@ export default {
|
|||
|
||||
<style scoped lang="scss">
|
||||
.glances-cpu-gauge-wrapper {
|
||||
.gauge-chart {
|
||||
max-width: 18rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
margin: 0.5rem auto;
|
||||
p.percentage {
|
||||
color: var(--widget-text-color);
|
||||
text-align: center;
|
||||
|
|
@ -60,5 +93,45 @@ export default {
|
|||
width: 100%;
|
||||
bottom: 0;
|
||||
}
|
||||
.more-info {
|
||||
background: var(--widget-accent-color);
|
||||
border-radius: var(--curve-factor);
|
||||
padding: 0.25rem 0.5rem;
|
||||
margin: 0.5rem auto;
|
||||
.more-info-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
p.label, p.value {
|
||||
color: var(--widget-text-color);
|
||||
margin: 0.25rem 0;
|
||||
}
|
||||
p.value {
|
||||
font-family: var(--font-monospace);
|
||||
}
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px dashed var(--widget-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
p.show-more-btn {
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
text-align: center;
|
||||
width: fit-content;
|
||||
margin: 0.25rem auto;
|
||||
padding: 0.1rem 0.25rem;
|
||||
border: 1px solid transparent;
|
||||
color: var(--widget-text-color);
|
||||
opacity: var(--dimming-factor);
|
||||
border-radius: var(--curve-factor);
|
||||
&:hover {
|
||||
border: 1px solid var(--widget-text-color);
|
||||
}
|
||||
&:focus, &:active {
|
||||
background: var(--widget-text-color);
|
||||
color: var(--widget-background-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue