@@ -91,6 +103,7 @@
import flatPickr from 'vue-flatpickr-component';
import 'flatpickr/dist/flatpickr.css';
+ import FailuresBarChart from "@/components/Service/FailuresBarChart";
const timeoptions = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric' };
const axisOptions = {
@@ -120,6 +133,7 @@
export default {
name: 'Service',
components: {
+ FailuresBarChart,
AdvancedChart,
ServiceTopStats,
ServiceHeatmap,
@@ -130,12 +144,13 @@ export default {
},
data() {
return {
- service: null,
+ id: null,
tab: "failures",
authenticated: false,
- ready: true,
- group: "1h",
+ ready: false,
+ group: "15m",
data: null,
+ service: null,
uptime_data: null,
loaded: false,
messages: [],
@@ -154,8 +169,8 @@ export default {
timeRangeOptions: {
chart: {
id: 'uptime',
- height: 120,
- width: "100%",
+ height: 220,
+ width: '100%',
type: 'rangeBar',
toolbar: {
show: false
@@ -189,7 +204,7 @@ export default {
type: 'datetime'
},
yaxis: {
- show: false
+ show: true,
},
grid: {
row: {
@@ -256,14 +271,14 @@ export default {
},
stroke: {
show: false,
- curve: 'smooth',
+ curve: 'stepline',
lineCap: 'butt',
},
},
xaxis: {
type: "datetime",
labels: {
- show: true
+ format: 'MM yyyy'
},
tooltip: {
enabled: false
@@ -347,6 +362,9 @@ export default {
},
}
},
+ watch: {
+ '$route': 'fetchData'
+ },
computed: {
core () {
return this.$store.getters.core
@@ -354,9 +372,6 @@ export default {
params () {
return {start: this.toUnix(new Date(this.start_time)), end: this.toUnix(new Date(this.end_time))}
},
- id () {
- return this.$route.params.id;
- },
uptimeSeries () {
return this.timedata.series
},
@@ -370,19 +385,25 @@ export default {
return this.$store.getters.serviceMessages(this.service.id).filter(m => this.inRange(m))
},
},
- watch: {
- '$route': 'reload',
- },
created() {
- this.reload()
+ this.fetchData()
},
- async mounted() {
- if (!this.$store.getters.service) {
- // const s = await Api.service(this.id)
- // this.$store.commit('setService', s)
- }
+ mounted() {
+
},
methods: {
+ async fetchData () {
+ if (!this.$route.params.id) {
+ this.ready = false
+ return
+ }
+ this.services = await Api.services()
+ await this.$store.commit("setServices", this.services)
+
+ this.service = await Api.service(this.$route.params.id)
+ await this.reload()
+ this.ready = true
+ },
async updated_chart(start, end) {
this.loaded = false
this.start_time = start
@@ -390,19 +411,15 @@ export default {
this.loaded = true
},
async reload() {
- this.loaded = false
- const services = await Api.services()
- this.$store.commit("setServices", services)
- if (this.isNumeric(this.$route.params.id)) {
- this.service = this.$store.getters.serviceById(this.$route.params.id)
- } else {
- this.service = this.$store.getters.serviceByPermalink(this.$route.params.id)
- }
await this.chartHits()
+ await this.chartFailures()
await this.fetchUptime()
this.loaded = true
},
- async fetchUptime() {
+ async fetchUptime(service) {
+ if (service) {
+ return
+ }
const uptime = await Api.service_uptime(this.service.id, this.params.start, this.params.end)
this.uptime_data = this.parse_uptime(uptime)
},
@@ -439,21 +456,31 @@ export default {
inRange(message) {
return this.isBetween(this.now(), message.start_on, message.start_on === message.end_on ? this.maxDate().toISOString() : message.end_on)
},
- async getService() {
- await this.chartHits()
- await this.serviceFailures()
- },
async serviceFailures() {
this.failures = await Api.service_failures(this.service.id, this.params.start, this.params.end)
},
- async chartHits(start=0, end=99999999999) {
- this.data = await Api.service_hits(this.service.id, this.params.start, this.params.end, this.group, false)
- if (this.data.length === 0 && this.group !== "1h") {
- this.group = "1h"
- await this.chartHits("1h")
- }
- this.ready = true
+ async chartHits(start=0, end=99999999999) {
+ if (!this.service) {
+ return
}
+ this.data = await Api.service_hits(this.service.id, this.params.start, this.params.end, this.group, false)
+ if (this.data.length === 0 && this.group !== "1h") {
+ this.group = "1h"
+ await this.chartHits(service, "1h")
+ }
+ this.ready = true
+ },
+ async chartFailures(start=0, end=99999999999) {
+ if (!this.service) {
+ return
+ }
+ this.failures_data = await Api.service_failures_data(this.service.id, this.params.start, this.params.end, this.group, true)
+ if (this.data.length === 0 && this.group !== "1h") {
+ this.group = "1h"
+ await this.chartFailures(service, "1h")
+ }
+ this.ready = true
+ }
}
}
diff --git a/frontend/src/store.js b/frontend/src/store.js
index eca817d9..9d008cd0 100644
--- a/frontend/src/store.js
+++ b/frontend/src/store.js
@@ -70,10 +70,7 @@ export default new Vuex.Store({
}
},
serviceById: (state) => (id) => {
- return state.services.find(s => s.id === id)
- },
- serviceByPermalink: (state) => (permalink) => {
- return state.services.find(s => s.permalink === permalink)
+ return state.services.find(s => s.permalink === id || s.id === id)
},
servicesInGroup: (state) => (id) => {
return state.services.filter(s => s.group_id === id).sort((a, b) => a.order_id - b.order_id)