mirror of https://github.com/statping/statping
service view fix - https://github.com/statping/statping/issues/808 https://github.com/statping/statping/issues/811 https://github.com/statping/statping/issues/800
parent
1eb0b85db5
commit
b7008f87e1
|
@ -1,3 +1,6 @@
|
||||||
|
# 0.90.69 (09-18-2020)
|
||||||
|
- Fixed issue with service view not loading. #808 #811 #800
|
||||||
|
|
||||||
# 0.90.68 (09-17-2020)
|
# 0.90.68 (09-17-2020)
|
||||||
- Added DB_DSN env for mysql, postgres or sqlite DSN database connection string
|
- Added DB_DSN env for mysql, postgres or sqlite DSN database connection string
|
||||||
- Added READ_ONLY env for a read only connection to the database
|
- Added READ_ONLY env for a read only connection to the database
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="container col-md-7 col-sm-12 mt-md-5">
|
<div class="container col-md-7 col-sm-12 mt-md-5">
|
||||||
|
|
||||||
<div v-if="!ready" class="row mt-5">
|
<div v-if="!ready" class="row mt-5">
|
||||||
<div class="col-12 text-center">
|
<div class="col-12 text-center">
|
||||||
<font-awesome-icon icon="circle-notch" size="3x" spin/>
|
<font-awesome-icon icon="circle-notch" size="3x" spin/>
|
||||||
|
@ -10,7 +9,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-if="ready" class="col-12 mb-4">
|
<div v-if="ready && service" class="col-12 mb-4">
|
||||||
<span class="mt-3 mb-3 text-white d-md-none btn d-block d-md-none text-uppercase" :class="{'bg-success': service.online, 'bg-danger': !service.online}">
|
<span class="mt-3 mb-3 text-white d-md-none btn d-block d-md-none text-uppercase" :class="{'bg-success': service.online, 'bg-danger': !service.online}">
|
||||||
{{service.online ? $t('online') : $t('offline')}}
|
{{service.online ? $t('online') : $t('offline')}}
|
||||||
</span>
|
</span>
|
||||||
|
@ -31,11 +30,11 @@
|
||||||
<div class="card-body pb-4">
|
<div class="card-body pb-4">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<flatPickr :disabled="!loaded" @on-change="reload" v-model="start_time" :config="{ wrap: true, allowInput: true, enableTime: true, dateFormat: 'Z', altInput: true, altFormat: 'Y-m-d h:i K', maxDate: new Date() }" type="text" class="form-control text-left" required />
|
<flatPickr :disabled="!loaded" @on-change="reload" v-model="start_time" :config="{ wrap: true, allowInput: true, enableTime: true, dateFormat: 'Z', altInput: true, altFormat: 'Y-m-d h:i K', maxDate: this.endOf('today') }" type="text" class="form-control text-left" required />
|
||||||
<small class="d-block">From {{this.format(new Date(start_time))}}</small>
|
<small class="d-block">From {{this.format(new Date(start_time))}}</small>
|
||||||
</div>
|
</div>
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<flatPickr :disabled="!loaded" @on-change="reload" v-model="end_time" :config="{ wrap: true, allowInput: true, enableTime: true, dateFormat: 'Z', altInput: true, altFormat: 'Y-m-d h:i K', maxDate: new Date() }" type="text" class="form-control text-left" required />
|
<flatPickr :disabled="!loaded" @on-change="reload" v-model="end_time" :config="{ wrap: true, allowInput: true, enableTime: true, dateFormat: 'Z', altInput: true, altFormat: 'Y-m-d h:i K', maxDate: this.endOf('today') }" type="text" class="form-control text-left" required />
|
||||||
<small class="d-block">To {{this.format(new Date(end_time))}}</small>
|
<small class="d-block">To {{this.format(new Date(end_time))}}</small>
|
||||||
</div>
|
</div>
|
||||||
<div class="col">
|
<div class="col">
|
||||||
|
@ -55,6 +54,7 @@
|
||||||
<small class="d-block d-md-none d-block">Increment Timeframe</small>
|
<small class="d-block d-md-none d-block">Increment Timeframe</small>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -99,10 +99,11 @@
|
||||||
const ServiceHeatmap = () => import(/* webpackChunkName: "service" */ '@/components/Service/ServiceHeatmap')
|
const ServiceHeatmap = () => import(/* webpackChunkName: "service" */ '@/components/Service/ServiceHeatmap')
|
||||||
const ServiceTopStats = () => import(/* webpackChunkName: "service" */ '@/components/Service/ServiceTopStats')
|
const ServiceTopStats = () => import(/* webpackChunkName: "service" */ '@/components/Service/ServiceTopStats')
|
||||||
const AdvancedChart = () => import(/* webpackChunkName: "service" */ '@/components/Service/AdvancedChart')
|
const AdvancedChart = () => import(/* webpackChunkName: "service" */ '@/components/Service/AdvancedChart')
|
||||||
|
const FailuresBarChart = () => import(/* webpackChunkName: "service" */ '@/components/Service/FailuresBarChart')
|
||||||
|
|
||||||
import flatPickr from 'vue-flatpickr-component';
|
import flatPickr from 'vue-flatpickr-component';
|
||||||
import 'flatpickr/dist/flatpickr.css';
|
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 timeoptions = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric' };
|
||||||
|
|
||||||
const axisOptions = {
|
const axisOptions = {
|
||||||
|
@ -149,13 +150,12 @@ export default {
|
||||||
ready: false,
|
ready: false,
|
||||||
group: "15m",
|
group: "15m",
|
||||||
data: null,
|
data: null,
|
||||||
service: null,
|
|
||||||
uptime_data: null,
|
uptime_data: null,
|
||||||
loaded: false,
|
loaded: false,
|
||||||
messages: [],
|
messages: [],
|
||||||
failures: [],
|
failures: [],
|
||||||
start_time: this.nowSubtract(84600 * 30),
|
start_time: this.beginningOf('day', this.nowSubtract(259200 * 3)),
|
||||||
end_time: this.nowSubtract(0),
|
end_time: this.endOf('today'),
|
||||||
timedata: null,
|
timedata: null,
|
||||||
load_timedata: false,
|
load_timedata: false,
|
||||||
dailyRangeOpts: {
|
dailyRangeOpts: {
|
||||||
|
@ -232,7 +232,7 @@ export default {
|
||||||
window.console.log(event)
|
window.console.log(event)
|
||||||
},
|
},
|
||||||
updated: (chartContext, config) => {
|
updated: (chartContext, config) => {
|
||||||
window.console.log('updated')
|
window.console.log('updated chart')
|
||||||
},
|
},
|
||||||
beforeZoom: (chartContext, { xaxis }) => {
|
beforeZoom: (chartContext, { xaxis }) => {
|
||||||
const start = (xaxis.min / 1000).toFixed(0)
|
const start = (xaxis.min / 1000).toFixed(0)
|
||||||
|
@ -368,6 +368,9 @@ export default {
|
||||||
core () {
|
core () {
|
||||||
return this.$store.getters.core
|
return this.$store.getters.core
|
||||||
},
|
},
|
||||||
|
service() {
|
||||||
|
return this.$store.getters.serviceByAll(this.$route.params.id)
|
||||||
|
},
|
||||||
params () {
|
params () {
|
||||||
return {start: this.toUnix(new Date(this.start_time)), end: this.toUnix(new Date(this.end_time))}
|
return {start: this.toUnix(new Date(this.start_time)), end: this.toUnix(new Date(this.end_time))}
|
||||||
},
|
},
|
||||||
|
@ -388,20 +391,25 @@ export default {
|
||||||
this.fetchData()
|
this.fetchData()
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.fetchData()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
async fetchData () {
|
fetchData () {
|
||||||
if (!this.$route.params.id) {
|
if (!this.$route.params.id) {
|
||||||
this.ready = false
|
this.ready = false
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
this.services = await Api.services()
|
this.reload()
|
||||||
await this.$store.commit("setServices", this.services)
|
|
||||||
|
|
||||||
this.service = await Api.service(this.$route.params.id)
|
|
||||||
await this.reload()
|
|
||||||
this.ready = true
|
this.ready = true
|
||||||
|
this.loaded = true
|
||||||
|
},
|
||||||
|
async reload() {
|
||||||
|
if (!this.ready || !this.service) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
await this.chartHits()
|
||||||
|
await this.chartFailures()
|
||||||
|
await this.fetchUptime()
|
||||||
},
|
},
|
||||||
async updated_chart(start, end) {
|
async updated_chart(start, end) {
|
||||||
this.loaded = false
|
this.loaded = false
|
||||||
|
@ -409,20 +417,14 @@ export default {
|
||||||
this.end_time = end
|
this.end_time = end
|
||||||
this.loaded = true
|
this.loaded = true
|
||||||
},
|
},
|
||||||
async reload() {
|
async fetchUptime() {
|
||||||
await this.chartHits()
|
|
||||||
await this.chartFailures()
|
|
||||||
await this.fetchUptime()
|
|
||||||
this.loaded = true
|
|
||||||
},
|
|
||||||
async fetchUptime(service) {
|
|
||||||
if (service) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
const uptime = await Api.service_uptime(this.service.id, this.params.start, this.params.end)
|
const uptime = await Api.service_uptime(this.service.id, this.params.start, this.params.end)
|
||||||
this.uptime_data = this.parse_uptime(uptime)
|
this.uptime_data = this.parse_uptime(uptime)
|
||||||
},
|
},
|
||||||
parse_uptime(timedata) {
|
parse_uptime(timedata) {
|
||||||
|
if (!timedata.series) {
|
||||||
|
return []
|
||||||
|
}
|
||||||
const data = timedata.series.filter((g) => g.online) || []
|
const data = timedata.series.filter((g) => g.online) || []
|
||||||
const offData = timedata.series.filter((g) => !g.online) || []
|
const offData = timedata.series.filter((g) => !g.online) || []
|
||||||
let arr = [];
|
let arr = [];
|
||||||
|
@ -456,18 +458,10 @@ export default {
|
||||||
return this.isBetween(this.now(), message.start_on, message.start_on === message.end_on ? this.maxDate().toISOString() : message.end_on)
|
return this.isBetween(this.now(), message.start_on, message.start_on === message.end_on ? this.maxDate().toISOString() : message.end_on)
|
||||||
},
|
},
|
||||||
async chartHits(start=0, end=99999999999) {
|
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)
|
this.data = await Api.service_hits(this.service.id, this.params.start, this.params.end, this.group, false)
|
||||||
this.ready = true
|
|
||||||
},
|
},
|
||||||
async chartFailures(start=0, end=99999999999) {
|
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)
|
this.failures_data = await Api.service_failures_data(this.service.id, this.params.start, this.params.end, this.group, true)
|
||||||
this.ready = true
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -72,8 +72,8 @@ export default new Vuex.Store({
|
||||||
return state.checkins.filter(c => c.service_id === id)
|
return state.checkins.filter(c => c.service_id === id)
|
||||||
},
|
},
|
||||||
serviceByAll: (state) => (element) => {
|
serviceByAll: (state) => (element) => {
|
||||||
if (element % 1 === 0) {
|
if (!isNaN(parseFloat(element)) && isFinite(element)) {
|
||||||
return state.services.find(s => s.id === element)
|
return state.services.find(s => s.id === parseInt(element))
|
||||||
} else {
|
} else {
|
||||||
return state.services.find(s => s.permalink === element)
|
return state.services.find(s => s.permalink === element)
|
||||||
}
|
}
|
||||||
|
|
|
@ -1 +1 @@
|
||||||
0.90.68
|
0.90.69
|
||||||
|
|
Loading…
Reference in New Issue