tyler.durden
/
dashy
mirror of https://github.com/Lissy93/dashy.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat(widgets): Uptime Kuma widget

This commit is contained in:
Jimmeh 2024-03-05 19:29:35 +00:00
parent 777b2a1319
commit 6f937fbe00
1 changed files with 85 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

122
src/components/Widgets/UptimeKuma.vue
View File

@ -2,10 +2,22 @@
<div class="example-wrapper"> <div class="example-wrapper">
<template v-if="monitors"> <template v-if="monitors">
<div v-for="(monitor, index) in monitors" :key="index" class=""> <div v-for="(monitor, index) in monitors" :key="index" class="">
<p>{{monitor.name}}</p> <div class="title-title"><span class="text">{{ monitor.name }}</span></div>
<p>{{monitor.status }}</p> <div class="monitors-container">
<p>{{monitor.responseTime }}</p> <div class="status-container">
<span class="status-pill" :class="{ up: monitor.status == 1, down: monitor.status != 1 }">{{ monitor.status
==
1
? "Up" : "Down" }}</span>
</div>
<div class="status-container">
<span class="status-pill">{{ monitor.responseTime }}ms</span>
</div>
<div class="status-container">
<span class="status-pill" :class="{ up: monitor.certValid == 1, down: monitor.certValid != 1 }">{{
monitor.certValid }}</span>
</div>
</div>
</div> </div>
</template> </template>
</div> </div>
@ -17,8 +29,7 @@
* Takes two optional parameters (`text` and `count`), and fetches a list of images * Takes two optional parameters (`text` and `count`), and fetches a list of images
* from dummyapis.com, then renders the results to the UI. * from dummyapis.com, then renders the results to the UI.
*/ */
import axios from "axios"; import WidgetMixin from '@/mixins/WidgetMixin';
import WidgetMixin from "@/mixins/WidgetMixin";
export default { export default {
mixins: [WidgetMixin], mixins: [WidgetMixin],
@ -36,19 +47,19 @@ export default {
* If not present, or not a number, then return the default (5) * If not present, or not a number, then return the default (5)
*/ */
apiKey() { apiKey() {
const apiKey = this.options.apiKey; const { apiKey } = this.options;
if (!apiKey) throw "No API key set"; if (!apiKey) throw new Error('No API key set');
return apiKey; return apiKey;
}, },
/* Get users desired image text, or return `Dashy` */ /* Get users desired image text, or return `Dashy` */
url() { url() {
const apiUrl = this.options.url; const { url } = this.options;
if (!apiUrl) throw "No URL set"; if (!url) throw new Error('No URL set');
return apiUrl; return url;
}, },
authHeaders() { authHeaders() {
if (!this.options.apiKey) { if (!this.options.apiKey) {
@ -73,73 +84,82 @@ export default {
}, },
/* Convert API response data into a format to be consumed by the UI */ /* Convert API response data into a format to be consumed by the UI */
processData(response) { processData(response) {
const rows = response.split('\n').filter(row => row.startsWith("monitor_")); const rows = response.split('\n').filter(row => row.startsWith('monitor_'));
const monitors = new Map(); const monitors = new Map();
const regex = /monitor_name="([^"]+)"/; const regex = /monitor_name='([^']+)'/;
const getValue = (row) => row.match(/\b\d+\b$/); const getValue = (row) => row.match(/\b\d+\b$/)[0];
for (const row of rows) { for (let index = 0; index < rows.length; index++) {
const key = row.match(/^(.*?)\{/); const row = rows[x];
const monitorName = row.match(regex);
const key = row.match(/^(.*?)\{/)[1];
const monitorName = row.match(regex)[1];
if (!monitors.has(monitorName)) { if (!monitors.has(monitorName)) {
monitors.set(monitorName, {name: monitorName}); monitors.set(monitorName, { name: monitorName });
} }
const existingMonitor = monitors.get(monitorName); const monitor = monitors.get(monitorName);
const value = getValue(row); const value = getValue(row);
this.setMonitorValue(key, monitor, value);
this.monitors = Array.from(monitors.values());
}
},
setMonitorValue(key, monitor, value) {
switch (key) { switch (key) {
case "monitor_cert_days_remaining": { case 'monitor_cert_days_remaining': {
existingMonitor.certDaysRemaining = value; monitor.certDaysRemaining = value;
break; break;
} }
case "monitor_cert_is_valid": { case 'monitor_cert_is_valid': {
existingMonitor.certValid = value; monitor.certValid = value;
break; break;
} }
case "monitor_response_time": { case 'monitor_response_time': {
existingMonitor.responseTime = value; monitor.responseTime = value;
break; break;
} }
case "monitor_status": { case 'monitor_status': {
existingMonitor.status= value; monitor.status = value;
break; break;
} }
default: default:
console.log("not matched", key);
break; break;
} }
}
console.log(monitors);
this.monitors = Array.from(monitors.values());
}, },
}, },
}; };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.example-wrapper { .status-pill {
.image-row { border-radius: 50em;
box-sizing: border-box;
font-size: 0.75em;
display: inline-block;
font-weight: 700;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
padding: .35em .65em;
margin: 1em 0.5em;
}
.up {
background-color: rgb(92, 221, 139);
}
.down {
background-color: rgb(220, 53, 69);
}
.monitors-container {
display: flex; display: flex;
align-items: center; flex-direction: column;
justify-content: space-around; justify-content: center;
p.picture-title {
font-size: 1.2rem;
color: var(--widget-text-color);
}
img.picture-result {
width: 4rem;
margin: 0.5rem 0;
border-radius: var(--curve-factor);
}
&:not(:last-child) {
border-bottom: 1px dashed var(--widget-text-color);
}
}
} }
</style> </style>