tyler.durden/dashy
1
0
Fork 0
mirror of https://github.com/Lissy93/dashy.git synced 2025-09-24 10:18:50 +02:00
Code Issues Packages Projects Releases Wiki Activity

🎨 Refactors StatPing widget

Browse Source
This commit is contained in:
Alicia Sykes 2022-01-03 12:31:39 +00:00
parent d516bb02fa
commit 2ee01f603c
2 changed files with 20 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/components/Widgets/StatPing.vue
View File

@ -46,9 +46,8 @@
</template> </template>
<script> <script>
import axios from 'axios';
import { serviceEndpoints } from '@/utils/defaults'; import { serviceEndpoints } from '@/utils/defaults';
import { showNumAsThousand } from '@/utils/MiscHelpers'; import { showNumAsThousand, getTimeAgo } from '@/utils/MiscHelpers';
import WidgetMixin from '@/mixins/WidgetMixin'; import WidgetMixin from '@/mixins/WidgetMixin';
export default { export default {
@ -77,21 +76,8 @@ export default {
}, },
methods: { methods: {
fetchData() { fetchData() {
const requestConfig = { this.overrideProxyChoice = true;
method: 'GET', this.makeRequest(this.endpoint).then(this.processData);
url: this.proxyReqEndpoint,
headers: {
'Target-URL': this.endpoint,
},
};
axios.request(requestConfig)
.then((response) => {
this.processData(response.data);
}).catch((error) => {
this.error('Unable to fetch cron data', error);
}).finally(() => {
this.finishLoading();
});
}, },
makeChartUrl(uptime, title) { makeChartUrl(uptime, title) {
const host = 'https://quickchart.io'; const host = 'https://quickchart.io';
@ -110,19 +96,6 @@ export default {
content, html: true, trigger: 'hover focus', delay: 250, classes: 'ping-times-tt', content, html: true, trigger: 'hover focus', delay: 250, classes: 'ping-times-tt',
}; };
}, },
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';
},
processData(data) { processData(data) {
let services = []; let services = [];
data.forEach((service) => { data.forEach((service) => {
@ -134,8 +107,8 @@ export default {
responseTime: Math.round(service.avg_response / 1000), responseTime: Math.round(service.avg_response / 1000),
totalSuccess: showNumAsThousand(service.stats.hits), totalSuccess: showNumAsThousand(service.stats.hits),
totalFailure: showNumAsThousand(service.stats.failures), totalFailure: showNumAsThousand(service.stats.failures),
lastSuccess: this.getTimeAgo(service.last_success), lastSuccess: getTimeAgo(service.last_success),
lastFailure: this.getTimeAgo(service.last_error), lastFailure: getTimeAgo(service.last_error),
}); });
}); });
if (this.limit) services = services.slice(0, this.limit); if (this.limit) services = services.slice(0, this.limit);

15
src/utils/MiscHelpers.js
View File

@ -107,6 +107,21 @@ export const truncateStr = (str, len = 60, ellipse = '...') => {
return str.length > len + ellipse.length ? `${str.slice(0, len)}${ellipse}` : str; return str.length > len + ellipse.length ? `${str.slice(0, len)}${ellipse}` : str;
}; };
/* 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';
};
/* Given a currency code, return the corresponding unicode symbol */ /* Given a currency code, return the corresponding unicode symbol */
export const findCurrencySymbol = (currencyCode) => { export const findCurrencySymbol = (currencyCode) => {
const code = currencyCode.toUpperCase().trim(); const code = currencyCode.toUpperCase().trim();