mirror of https://github.com/Lissy93/dashy.git
✨ Adds CPU history widget
This commit is contained in:
Alicia Sykes
parent
7fd1cab362
commit
8349206770
|
|
@ -42,6 +42,10 @@ Dashy has support for displaying dynamic content in the form of widgets. There a
|
|||
- [Pi Hole Queries](#pi-hole-queries)
|
||||
- [Recent Traffic](#recent-traffic)
|
||||
- [Stat Ping Statuses](#stat-ping-statuses)
|
||||
- [System Resource Monitoring](#system-resource-monitoring)
|
||||
- [CPU Usage Current](#current-cpu-usage)
|
||||
- [CPU Usage Per Core](#cpu-usage-per-core)
|
||||
- [CPU Usage History](#cpu-usage-history)
|
||||
- [Dynamic Widgets](#dynamic-widgets)
|
||||
- [Iframe Widget](#iframe-widget)
|
||||
- [HTML Embed Widget](#html-embedded-widget)
|
||||
|
|
@ -1154,6 +1158,88 @@ Displays the current and recent uptime of your running services, via a self-host
|
|||
|
||||
---
|
||||
|
||||
## System Resource Monitoring
|
||||
|
||||
The easiest method for displaying system info and resource usage in Dashy is with [Glances](https://nicolargo.github.io/glances/).
|
||||
|
||||
Glances is a cross-platform monitoring tool developed by [@nicolargo](https://github.com/nicolargo). It's similar to top/htop but with a [Rest API](https://glances.readthedocs.io/en/latest/api.html) and many [data exporters](https://glances.readthedocs.io/en/latest/gw/index.html) available. Under the hood, it uses [psutil](https://github.com/giampaolo/psutil) for retrieving system info.
|
||||
|
||||
If you don't already have it installed, either follow the [Installation Guide](https://github.com/nicolargo/glances/blob/master/README.rst) for your system, or setup [with Docker](https://glances.readthedocs.io/en/latest/docker.html), or use the one-line install script: `curl -L https://bit.ly/glances | /bin/bash`. You'll need to run Glances as a web server, using the `-w` option, see the [command reference docs](https://glances.readthedocs.io/en/latest/cmds.html) for more info.
|
||||
|
||||
|
||||
##### Options
|
||||
|
||||
All Glance's based widgets require a `hostname`
|
||||
|
||||
**Field** | **Type** | **Required** | **Description**
|
||||
--- | --- | --- | ---
|
||||
**`hostname`** | `string` | Required | The URL to your Glances instance, without a trailing slash
|
||||
|
||||
|
||||
##### Info
|
||||
- **CORS**: 🟢 Enabled
|
||||
- **Auth**: 🟢 Not Required
|
||||
- **Price**: 🟢 Free
|
||||
- **Host**: Self-Hosted (see [GitHub - Nicolargo/Glances](https://github.com/nicolargo/glances))
|
||||
- **Privacy**: ⚫ No Policy Available
|
||||
|
||||
---
|
||||
|
||||
### Current CPU Usage
|
||||
|
||||
Live-updating current CPU usage, as a combined average across alll cores
|
||||
|
||||
<p align="center"><img width="400" src="https://i.ibb.co/qkLgxLp/gl-cpu-usage.png" /></p>
|
||||
|
||||
##### Example
|
||||
|
||||
```yaml
|
||||
- type: gl-current-cpu
|
||||
options:
|
||||
hostname: http://192.168.130.2:61208
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### CPU Usage Per Core
|
||||
|
||||
Live-updating CPU usage breakdown per core
|
||||
|
||||
<p align="center"><img width="400" src="https://i.ibb.co/512MYhT/gl-cpu-cores.png" /></p>
|
||||
|
||||
##### Example
|
||||
|
||||
```yaml
|
||||
- type: gl-current-cores
|
||||
options:
|
||||
hostname: http://192.168.130.2:61208
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### CPU Usage History
|
||||
|
||||
Recent CPU usage history, across all cores, and displayed by user and system
|
||||
|
||||
<p align="center"><img width="500" src="https://i.ibb.co/zs8BDzR/gl-cpu-history.png" /></p>
|
||||
|
||||
##### Options
|
||||
|
||||
**Field** | **Type** | **Required** | **Description**
|
||||
--- | --- | --- | ---
|
||||
**`limit`** | `number` | _Optional_ | Limit the number of results returned, rendering more data points will take longer to load. Defaults to `100`
|
||||
|
||||
##### Example
|
||||
|
||||
```yaml
|
||||
- type: gl-cpu-history
|
||||
options:
|
||||
hostname: http://192.168.130.2:61208
|
||||
limit: 60
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Dynamic Widgets
|
||||
|
||||
### Iframe Widget
|
||||
|
|
|
|||
|
|
@ -0,0 +1,90 @@
|
|||
<template>
|
||||
<div class="glances-cpu-history-wrapper">
|
||||
<div class="gl-history-chart" :id="chartId"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import WidgetMixin from '@/mixins/WidgetMixin';
|
||||
import ChartingMixin from '@/mixins/ChartingMixin';
|
||||
import { timestampToTime, getTimeAgo } from '@/utils/MiscHelpers';
|
||||
|
||||
export default {
|
||||
mixins: [WidgetMixin, ChartingMixin],
|
||||
components: {},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
hostname() {
|
||||
if (!this.options.hostname) this.error('You must specify a \'hostname\' for Glaces');
|
||||
return this.options.hostname;
|
||||
},
|
||||
limit() {
|
||||
return this.options.limit || 100;
|
||||
},
|
||||
endpoint() {
|
||||
return `${this.hostname}/api/3/cpu/history/${this.limit}`;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
fetchData() {
|
||||
this.makeRequest(this.endpoint).then(this.processData);
|
||||
},
|
||||
processData(cpuData) {
|
||||
const { system, user } = cpuData;
|
||||
const labels = [];
|
||||
const systemValues = [];
|
||||
const userValues = [];
|
||||
system.forEach((dataPoint) => {
|
||||
labels.push(timestampToTime(dataPoint[0]));
|
||||
systemValues.push(dataPoint[1]);
|
||||
});
|
||||
user.forEach((dataPoint) => {
|
||||
userValues.push(dataPoint[1]);
|
||||
});
|
||||
const chartTitle = this.makeTitle(system);
|
||||
const datasets = [
|
||||
{ name: 'System', type: 'bar', values: systemValues },
|
||||
{ name: 'User', type: 'bar', values: userValues },
|
||||
];
|
||||
this.generateChart({ labels, datasets }, chartTitle);
|
||||
},
|
||||
makeTitle(system) {
|
||||
return `CPU Usage over past ${getTimeAgo(system[0][0]).replace('ago', '')}`;
|
||||
},
|
||||
generateChart(timeChartData, chartTitle) {
|
||||
return new this.Chart(`#${this.chartId}`, {
|
||||
title: chartTitle,
|
||||
data: timeChartData,
|
||||
type: 'axis-mixed',
|
||||
height: this.chartHeight,
|
||||
colors: ['#9b5de5', '#00f5d4'],
|
||||
truncateLegends: true,
|
||||
lineOptions: {
|
||||
regionFill: 1,
|
||||
hideDots: 1,
|
||||
},
|
||||
axisOptions: {
|
||||
xIsSeries: true,
|
||||
xAxisMode: 'tick',
|
||||
},
|
||||
tooltipOptions: {
|
||||
formatTooltipY: d => `${Math.round(d)}%`,
|
||||
// formatTooltipX: d => timestampToTime(d),
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
},
|
||||
created() {
|
||||
this.overrideUpdateInterval = 20;
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.glances-cpu-history-wrapper {
|
||||
.gl-history-chart {}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -123,6 +123,13 @@
|
|||
@error="handleError"
|
||||
:ref="widgetRef"
|
||||
/>
|
||||
<GlCpuHistory
|
||||
v-else-if="widgetType === 'gl-cpu-history'"
|
||||
:options="widgetOptions"
|
||||
@loading="setLoaderState"
|
||||
@error="handleError"
|
||||
:ref="widgetRef"
|
||||
/>
|
||||
<HealthChecks
|
||||
v-else-if="widgetType === 'health-checks'"
|
||||
:options="widgetOptions"
|
||||
|
|
@ -314,6 +321,7 @@ export default {
|
|||
GitHubTrending: () => import('@/components/Widgets/GitHubTrending.vue'),
|
||||
GlCpuCores: () => import('@/components/Widgets/GlCpuCores.vue'),
|
||||
GlCpuGauge: () => import('@/components/Widgets/GlCpuGauge.vue'),
|
||||
GlCpuHistory: () => import('@/components/Widgets/GlCpuHistory.vue'),
|
||||
GitHubProfile: () => import('@/components/Widgets/GitHubProfile.vue'),
|
||||
HealthChecks: () => import('@/components/Widgets/HealthChecks.vue'),
|
||||
IframeWidget: () => import('@/components/Widgets/IframeWidget.vue'),
|
||||
|
|
|
|||
Loading…
Reference in New Issue