59 lines
1.5 KiB
Vue
59 lines
1.5 KiB
Vue
<template>
|
|
<Services
|
|
:serviceStatuses="serviceStatuses"
|
|
:showStatusOnHover="true"
|
|
@showTooltip="showTooltip"
|
|
@toggleShowAverageResponseTime="toggleShowAverageResponseTime" :showAverageResponseTime="showAverageResponseTime"
|
|
/>
|
|
<Pagination @page="changePage"/>
|
|
<Settings @refreshData="fetchData"/>
|
|
</template>
|
|
|
|
<script>
|
|
import Settings from '@/components/Settings.vue'
|
|
import Services from '@/components/Services.vue';
|
|
import Pagination from "@/components/Pagination";
|
|
import {SERVER_URL} from "@/main.js";
|
|
|
|
export default {
|
|
name: 'Home',
|
|
components: {
|
|
Pagination,
|
|
Services,
|
|
Settings,
|
|
},
|
|
emits: ['showTooltip', 'toggleShowAverageResponseTime'],
|
|
methods: {
|
|
fetchData() {
|
|
//console.log("[Home][fetchData] Fetching data");
|
|
fetch(`${SERVER_URL}/api/v1/statuses?page=${this.currentPage}`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (JSON.stringify(this.serviceStatuses) !== JSON.stringify(data)) {
|
|
this.serviceStatuses = data;
|
|
}
|
|
});
|
|
},
|
|
changePage(page) {
|
|
this.currentPage = page;
|
|
this.fetchData();
|
|
},
|
|
showTooltip(result, event) {
|
|
this.$emit('showTooltip', result, event);
|
|
},
|
|
toggleShowAverageResponseTime() {
|
|
this.showAverageResponseTime = !this.showAverageResponseTime;
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
serviceStatuses: {},
|
|
currentPage: 1,
|
|
showAverageResponseTime: true
|
|
}
|
|
},
|
|
created() {
|
|
this.fetchData();
|
|
}
|
|
}
|
|
</script> |