github
/
statping
mirror of https://github.com/statping/statping
1
0
Fork 0
Code Issues Releases Wiki Activity

updated services page

pull/773/head
hunterlong 2020-08-03 18:31:38 -07:00
parent 79b6e620bf
commit e5881d38c7
4 changed files with 41 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/components/Index/MessageBlock.vue
View File

@ -1,12 +1,12 @@
<template> <template>
<div class="alert alert-warning pb-4 pt-3 mt-5 mb-5" role="alert"> <div class="alert alert-secondary pb-3 pt-3 mt-5 mb-3" role="alert">
<h3 class="mb-3">{{message.title}}</h3> <h3 class="mb-3">{{message.title}}</h3>
<span class="mb-3">{{message.description}}</span> <span class="mb-3">{{message.description}}</span>
<div class="row d-block mt-3"> <div class="row d-block mt-3">
<span class="col-12 col-md-6 text-left small"> <span class="col-12 col-md-6 text-left small text-muted">
Started {{niceDate(message.start_on)}} ({{ago(message.start_on)}} ago) Started {{niceDate(message.start_on)}} ({{ago(message.start_on)}} ago)
</span> </span>
<span class="col-12 col-md-6 text-right float-right small"> <span class="col-12 col-md-6 text-right float-right small text-muted">
Ends on {{niceDate(message.end_on)}} (in {{ago(message.end_on)}})</span> Ends on {{niceDate(message.end_on)}} (in {{ago(message.end_on)}})</span>
</div> </div>
</div> </div>
@ -17,7 +17,8 @@ export default {
name: 'MessageBlock', name: 'MessageBlock',
props: { props: {
message: { message: {
type: Object type: Object,
required: true,
} }
} }
} }

1
frontend/src/components/Service/ServiceChart.vue
View File

@ -178,6 +178,7 @@
}, },
methods: { methods: {
async chartHits(val) { async chartHits(val) {
this.ready = false
const start = val.start_time const start = val.start_time
const end = this.toUnix(new Date()) const end = this.toUnix(new Date())
this.data = await Api.service_hits(this.service.id, start, end, val.interval, false) this.data = await Api.service_hits(this.service.id, start, end, val.interval, false)

4
frontend/src/languages/english.js
View File

@ -40,8 +40,8 @@ const english = {
wrong_login: 'Incorrect username or password' wrong_login: 'Incorrect username or password'
}, },
settings: { settings: {
name: "Project Name", name: "Site Name",
description: "Project Name", description: "Site Description",
footer: "Custom Footer", footer: "Custom Footer",
footer_notes: "HTML is allowed inside the footer", footer_notes: "HTML is allowed inside the footer",
error_reporting: "Enable Error Reporting", error_reporting: "Enable Error Reporting",

63
frontend/src/pages/Service.vue
View File

@ -1,8 +1,6 @@
<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 class="col-12 mb-4"> <div 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>
@ -14,24 +12,24 @@
</span> </span>
</span> </span>
<ServiceTopStats :service="service"/> <ServiceTopStats v-if="loaded" :service="service"/>
<MessageBlock v-for="message in messagesInRange" v-bind:key="message.id" :message="message"/> <MessageBlock v-if="loaded" v-for="message in messagesInRange" v-bind:key="message.id" :message="message"/>
<div class="card text-black-50 bg-white mt-3"> <div class="card text-black-50 bg-white mt-3">
<div class="card-header text-capitalize">Timeframe</div> <div class="card-header text-capitalize">Timeframe</div>
<div class="card-body pb-4"> <div class="card-body pb-4">
<div class="row"> <div class="row">
<div class="col-12 col-md-4 font-2 mb-3 mb-md-0"> <div class="col-12 col-md-4 font-2 mb-3 mb-md-0">
<flatPickr :disabled="loading" @on-change="reload" v-model="start_time" :config="{ enableTime: true, altInput: true, altFormat: 'Y-m-d h:i K', maxDate: new Date() }" type="text" class="form-control text-left d-block" required /> <flatPickr :disabled="!loaded" @on-change="reload" v-model="start_time" :config="{ enableTime: true, altInput: true, altFormat: 'Y-m-d h:i K', maxDate: new Date() }" type="text" class="form-control text-left d-block" 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-12 col-md-4 font-2 mb-3 mb-md-0"> <div class="col-12 col-md-4 font-2 mb-3 mb-md-0">
<flatPickr :disabled="loading" @on-change="reload" v-model="end_time" :config="{ enableTime: true, 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="{ enableTime: true, altInput: true, altFormat: 'Y-m-d h:i K', maxDate: new Date()}" 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-12 col-md-4 mb-1 mb-md-0"> <div class="col-12 col-md-4 mb-1 mb-md-0">
<select :disabled="loading" @change="chartHits" v-model="group" class="form-control"> <select :disabled="!loaded" @change="chartHits" v-model="group" class="form-control">
<option value="1m">1 Minute</option> <option value="1m">1 Minute</option>
<option value="5m">5 Minutes</option> <option value="5m">5 Minutes</option>
<option value="15m">15 Minute</option> <option value="15m">15 Minute</option>
@ -52,10 +50,12 @@
<div class="card text-black-50 bg-white mt-3 mb-3"> <div class="card text-black-50 bg-white mt-3 mb-3">
<div class="card-header text-capitalize">Service Latency</div> <div class="card-header text-capitalize">Service Latency</div>
<div class="card-body"> <div v-if="loaded" class="card-body">
<AdvancedChart :group="group" :updated="updated_chart" :start="start_time.toString()" :end="end_time.toString()" :service="service"/> <div class="row mb-5">
<div v-if="!loading" class="row"> <AdvancedChart :group="group" :updated="updated_chart" :start="start_time.toString()" :end="end_time.toString()" :service="service"/>
<apexchart width="100%" height="120" type="rangeBar" :options="timeRangeOptions" :series="uptime_data"></apexchart> </div>
<div class="row mt-5">
<apexchart height="220" type="rangeBar" :options="timeRangeOptions" :series="uptime_data"></apexchart>
</div> </div>
</div> </div>
</div> </div>
@ -124,13 +124,14 @@ export default {
}, },
data() { data() {
return { return {
service: null,
tab: "failures", tab: "failures",
authenticated: false, authenticated: false,
ready: true, ready: true,
group: "1h", group: "1h",
data: null, data: null,
uptime_data: null, uptime_data: null,
loading: true, loaded: false,
messages: [], messages: [],
failures: [], failures: [],
start_time: this.nowSubtract(84600 * 30), start_time: this.nowSubtract(84600 * 30),
@ -148,6 +149,7 @@ export default {
chart: { chart: {
id: 'uptime', id: 'uptime',
height: 120, height: 120,
width: "100%",
type: 'rangeBar', type: 'rangeBar',
toolbar: { toolbar: {
show: false show: false
@ -340,9 +342,6 @@ export default {
} }
}, },
computed: { computed: {
service () {
return this.$store.getters.serviceByAll(this.id)
},
core () { core () {
return this.$store.getters.core return this.$store.getters.core
}, },
@ -367,30 +366,35 @@ export default {
}, },
watch: { watch: {
'$route': 'reload', '$route': 'reload',
service: function(n, o) { },
this.reload() created() {
}, this.reload()
load_timedata: function(n, o) { },
this.reload() async mounted() {
if (!this.$store.getters.service) {
// const s = await Api.service(this.id)
// this.$store.commit('setService', s)
} }
}, },
async mounted() {
if (!this.$store.getters.service) {
const s = await Api.service(this.id)
this.$store.commit('setService', s)
}
},
methods: { methods: {
async updated_chart(start, end) { async updated_chart(start, end) {
this.loaded = false
this.start_time = start this.start_time = start
this.end_time = end this.end_time = end
this.loading = false this.loaded = true
}, },
async reload() { async reload() {
this.loading = true 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.chartHits()
await this.fetchUptime() await this.fetchUptime()
this.loading = false this.loaded = true
}, },
async fetchUptime() { async fetchUptime() {
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)
@ -400,7 +404,6 @@ export default {
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 = [];
window.console.log(data)
if (data) { if (data) {
data.forEach((d) => { data.forEach((d) => {
arr.push({ arr.push({