mirror of
https://github.com/Lissy93/dashy.git
synced 2025-04-08 17:06:18 +02:00
🎨 Refactors StatPing widget
This commit is contained in:
parent
d516bb02fa
commit
2ee01f603c
@ -46,9 +46,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
import { serviceEndpoints } from '@/utils/defaults';
|
||||
import { showNumAsThousand } from '@/utils/MiscHelpers';
|
||||
import { showNumAsThousand, getTimeAgo } from '@/utils/MiscHelpers';
|
||||
import WidgetMixin from '@/mixins/WidgetMixin';
|
||||
|
||||
export default {
|
||||
@ -77,21 +76,8 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
fetchData() {
|
||||
const requestConfig = {
|
||||
method: 'GET',
|
||||
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();
|
||||
});
|
||||
this.overrideProxyChoice = true;
|
||||
this.makeRequest(this.endpoint).then(this.processData);
|
||||
},
|
||||
makeChartUrl(uptime, title) {
|
||||
const host = 'https://quickchart.io';
|
||||
@ -110,19 +96,6 @@ export default {
|
||||
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) {
|
||||
let services = [];
|
||||
data.forEach((service) => {
|
||||
@ -134,8 +107,8 @@ export default {
|
||||
responseTime: Math.round(service.avg_response / 1000),
|
||||
totalSuccess: showNumAsThousand(service.stats.hits),
|
||||
totalFailure: showNumAsThousand(service.stats.failures),
|
||||
lastSuccess: this.getTimeAgo(service.last_success),
|
||||
lastFailure: this.getTimeAgo(service.last_error),
|
||||
lastSuccess: getTimeAgo(service.last_success),
|
||||
lastFailure: getTimeAgo(service.last_error),
|
||||
});
|
||||
});
|
||||
if (this.limit) services = services.slice(0, this.limit);
|
||||
|
@ -107,6 +107,21 @@ export const truncateStr = (str, len = 60, ellipse = '...') => {
|
||||
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 */
|
||||
export const findCurrencySymbol = (currencyCode) => {
|
||||
const code = currencyCode.toUpperCase().trim();
|
||||
|
Loading…
x
Reference in New Issue
Block a user