mirror of https://github.com/lissy93/dashy
✨ Adds a system alert widget
This commit is contained in:
Alicia Sykes
parent
9148195b84
commit
6b8a5ee086
|
|
@ -52,6 +52,7 @@ Dashy has support for displaying dynamic content in the form of widgets. There a
|
|||
- [Disk IO](#disk-io)
|
||||
- [System Load](#system-load)
|
||||
- [System Load History](#system-load-history)
|
||||
- [Resource Usage Alerts](#resource-usage-alerts)
|
||||
- **[Dynamic Widgets](#dynamic-widgets)**
|
||||
- [Iframe Widget](#iframe-widget)
|
||||
- [HTML Embed Widget](#html-embedded-widget)
|
||||
|
|
@ -1354,6 +1355,22 @@ Shows recent historical system load, calculated from the number of processes wai
|
|||
|
||||
---
|
||||
|
||||
### Resource Usage Alerts
|
||||
|
||||
Lists recent high resource usage alerts (e.g. CPU, mem, IO, load, temp)
|
||||
|
||||
<p align="center"><img width="500" src="https://i.ibb.co/w01NX5R/gl-alerts.png" /></p>
|
||||
|
||||
##### Example
|
||||
|
||||
```yaml
|
||||
- type: gl-alerts
|
||||
options:
|
||||
hostname: http://192.168.130.2:61208
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Dynamic Widgets
|
||||
|
||||
### Iframe Widget
|
||||
|
|
|
|||
|
|
@ -0,0 +1,129 @@
|
|||
<template>
|
||||
<div class="glances-alerts-wrapper" v-if="alerts">
|
||||
<div class="alert-row" v-for="(alert, index) in alerts" :key="index">
|
||||
<p class="time" v-tooltip="tooltip(`${alert.timeAgo}<br>Lasted: ${alert.lasted}`, true)">
|
||||
{{ alert.time }}
|
||||
<span v-if="alert.ongoing" class="ongoing">Ongoing</span>
|
||||
</p>
|
||||
<div class="alert-info" v-tooltip="tooltip(alert.minMax, true)">
|
||||
<span class="category">{{ alert.category }}</span> -
|
||||
<span class="value">{{ alert.value }}%</span>
|
||||
</div>
|
||||
<p :class="`severity ${alert.severity.toLowerCase()}`">{{ alert.severity }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="noResults" class="no-alerts">
|
||||
<p class="no-alert-title">System is Healthy</p>
|
||||
<p class="no-alert-info">There are no active alerts</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import WidgetMixin from '@/mixins/WidgetMixin';
|
||||
import { timestampToDateTime, getTimeAgo, getTimeDifference } from '@/utils/MiscHelpers';
|
||||
|
||||
export default {
|
||||
mixins: [WidgetMixin],
|
||||
data() {
|
||||
return {
|
||||
alerts: null,
|
||||
noResults: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
hostname() {
|
||||
if (!this.options.hostname) this.error('You must specify a \'hostname\' for Glaces');
|
||||
return this.options.hostname;
|
||||
},
|
||||
endpoint() {
|
||||
return `${this.hostname}/api/3/alert`;
|
||||
},
|
||||
},
|
||||
filters: {},
|
||||
methods: {
|
||||
fetchData() {
|
||||
this.makeRequest(this.endpoint).then(this.processData);
|
||||
},
|
||||
processData(alertData) {
|
||||
if (!alertData || alertData.length === 0) {
|
||||
this.noResults = true;
|
||||
} else {
|
||||
const alerts = [];
|
||||
alertData.forEach((alert) => {
|
||||
alerts.push({
|
||||
time: timestampToDateTime(alert[0] * 1000),
|
||||
ongoing: (alert[1] === -1),
|
||||
timeAgo: getTimeAgo(alert[0] * 1000),
|
||||
lasted: alert[1] ? getTimeDifference(alert[0] * 1000, alert[1] * 1000) : 'Ongoing',
|
||||
severity: alert[2],
|
||||
category: alert[3],
|
||||
value: alert[5],
|
||||
minMax: `Min: ${alert[4]}%<br>Avg: ${alert[5]}%<br>Max: ${alert[6]}%`,
|
||||
});
|
||||
});
|
||||
this.alerts = alerts;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.glances-alerts-wrapper {
|
||||
.alert-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: var(--widget-text-color);
|
||||
.time {
|
||||
max-width: 25%;
|
||||
margin: 0.25rem 0;
|
||||
span.ongoing {
|
||||
display: block;
|
||||
padding: 0.25rem;
|
||||
margin: 0.2rem 0;
|
||||
font-weight: bold;
|
||||
font-size: 0.85rem;
|
||||
width: fit-content;
|
||||
color: var(--error);
|
||||
border: 1px solid var(--error);
|
||||
border-radius: var(--curve-factor);
|
||||
}
|
||||
}
|
||||
.alert-info {
|
||||
.category {}
|
||||
.value {
|
||||
font-family: var(--font-monospace);
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.severity {
|
||||
padding: 0.25rem;
|
||||
font-size: 0.85rem;
|
||||
border-radius: var(--curve-factor);
|
||||
color: var(--black);
|
||||
font-weight: bold;
|
||||
cursor: default;
|
||||
border: 1px solid var(--widget-text-color);
|
||||
&.warning { color: var(--warning); border-color: var(--warning); }
|
||||
&.critical { color: var(--danger); border-color: var(--danger); }
|
||||
}
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px dashed var(--widget-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
p.no-alert-title {
|
||||
margin: 0.5rem 0;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
color: var(--success);
|
||||
}
|
||||
p.no-alert-info {
|
||||
margin: 0.5rem 0;
|
||||
font-style: italic;
|
||||
text-align: center;
|
||||
opacity: var(--dimming-factor);
|
||||
color: var(--widget-text-color);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -109,6 +109,13 @@
|
|||
@error="handleError"
|
||||
:ref="widgetRef"
|
||||
/>
|
||||
<GlAlerts
|
||||
v-else-if="widgetType === 'gl-alerts'"
|
||||
:options="widgetOptions"
|
||||
@loading="setLoaderState"
|
||||
@error="handleError"
|
||||
:ref="widgetRef"
|
||||
/>
|
||||
<GlCpuCores
|
||||
v-else-if="widgetType === 'gl-current-cores'"
|
||||
:options="widgetOptions"
|
||||
|
|
@ -362,6 +369,7 @@ export default {
|
|||
Flights: () => import('@/components/Widgets/Flights.vue'),
|
||||
GitHubTrending: () => import('@/components/Widgets/GitHubTrending.vue'),
|
||||
GitHubProfile: () => import('@/components/Widgets/GitHubProfile.vue'),
|
||||
GlAlerts: () => import('@/components/Widgets/GlAlerts.vue'),
|
||||
GlCpuCores: () => import('@/components/Widgets/GlCpuCores.vue'),
|
||||
GlCpuGauge: () => import('@/components/Widgets/GlCpuGauge.vue'),
|
||||
GlCpuHistory: () => import('@/components/Widgets/GlCpuHistory.vue'),
|
||||
|
|
|
|||
|
|
@ -117,19 +117,25 @@ export const truncateStr = (str, len = 60, ellipse = '...') => {
|
|||
return str.length > len + ellipse.length ? `${str.slice(0, len)}${ellipse}` : str;
|
||||
};
|
||||
|
||||
/* Given two timestamp, return the difference in text format, e.g. '10 minutes' */
|
||||
export const getTimeDifference = (startTime, endTime) => {
|
||||
const msDifference = new Date(endTime).getTime() - new Date(startTime).getTime();
|
||||
const diff = Math.abs(Math.round(msDifference / 1000));
|
||||
const divide = (time, round) => Math.round(time / round);
|
||||
if (diff < 60) return `${divide(diff, 1)} seconds`;
|
||||
if (diff < 3600) return `${divide(diff, 60)} minutes`;
|
||||
if (diff < 86400) return `${divide(diff, 3600)} hours`;
|
||||
if (diff < 604800) return `${divide(diff, 86400)} days`;
|
||||
if (diff >= 604800) return `${divide(diff, 604800)} weeks`;
|
||||
return 'unknown';
|
||||
};
|
||||
|
||||
/* Given a timestamp, return how long ago it was, e.g. '10 minutes' */
|
||||
export const getTimeAgo = (dateTime) => {
|
||||
const now = new Date().getTime();
|
||||
const then = new Date(dateTime).getTime();
|
||||
if (then < 0) return 'Never';
|
||||
const diff = (now - then) / 1000;
|
||||
const divide = (time, round) => Math.round(time / round);
|
||||
if (diff < 60) return `${divide(diff, 1)} seconds ago`;
|
||||
if (diff < 3600) return `${divide(diff, 60)} minutes ago`;
|
||||
if (diff < 86400) return `${divide(diff, 3600)} hours ago`;
|
||||
if (diff < 604800) return `${divide(diff, 86400)} days ago`;
|
||||
if (diff >= 604800) return `${divide(diff, 604800)} weeks ago`;
|
||||
return 'unknown';
|
||||
const diffStr = getTimeDifference(dateTime, now);
|
||||
if (diffStr === 'unknown') return diffStr;
|
||||
return `${diffStr} ago`;
|
||||
};
|
||||
|
||||
/* Given the name of a CSS variable, returns it's value */
|
||||
|
|
|
|||
Loading…
Reference in New Issue