+
@@ -67,18 +67,12 @@ export default {
name: 'ServiceBlock',
components: { Analytics, ServiceTopStats, ServiceChart},
props: {
- in_service: {
+ service: {
type: Object,
required: true
},
},
- watch: {
-
- },
computed: {
- service() {
- return this.track_service
- },
timeframepick() {
return this.timeframes.find(s => s.value === this.timeframe_val)
},
@@ -124,7 +118,7 @@ export default {
{value: "4320m", text: "3/day", set: 10 },
{value: "10080m", text: "7/day", set: 11 },
],
- stats: {
+ stats: {
total_failures: {
title: "Total Failures",
subtitle: "Last 7 Days",
@@ -151,14 +145,13 @@ export default {
value: 0,
}
},
- track_service: null,
}
},
beforeDestroy() {
// clearInterval(this.timer_func)
},
- async created() {
- this.track_service = this.in_service
+ created() {
+
},
methods: {
disabled_interval(interval) {
@@ -189,30 +182,8 @@ export default {
},
async setService() {
await this.$store.commit('setService', this.service)
- this.$router.push('/service/'+this.service.id, {props: {in_service: this.service}})
+ this.$router.push('/service/'+this.service.id, {props: {service: this.service}})
},
- async showMoreStats() {
- this.expanded = !this.expanded;
-
- const failData = await Graphing.failures(this.service, 7)
- this.stats.total_failures.chart = failData.data;
- this.stats.total_failures.value = failData.total;
-
- const hitsData = await Graphing.hits(this.service, 7)
-
- this.stats.high_latency.chart = hitsData.chart;
- this.stats.high_latency.value = this.humanTime(hitsData.high);
-
- this.stats.lowest_latency.chart = hitsData.chart;
- this.stats.lowest_latency.value = this.humanTime(hitsData.low);
-
- const pingData = await Graphing.pings(this.service, 7)
- this.stats.high_ping.chart = pingData.chart;
- this.stats.high_ping.value = this.humanTime(pingData.high);
-
- this.stats.low_ping.chart = pingData.chart;
- this.stats.low_ping.value = this.humanTime(pingData.low);
- },
visibleChart(isVisible, entry) {
if (isVisible && !this.visible) {
this.visible = true
@@ -226,4 +197,4 @@ export default {
}
}
}
-
\ No newline at end of file
+
diff --git a/frontend/src/components/Service/ServiceChart.vue b/frontend/src/components/Service/ServiceChart.vue
index f6ce9e46..fca32d5a 100644
--- a/frontend/src/components/Service/ServiceChart.vue
+++ b/frontend/src/components/Service/ServiceChart.vue
@@ -47,122 +47,138 @@
return {
ready: false,
showing: false,
- data: [],
- chartOptions: {
- noData: {
- text: 'Loading...'
- },
- chart: {
- height: "100%",
- width: "100%",
- type: "area",
- animations: {
- enabled: true,
- initialAnimation: {
- enabled: true
- }
- },
- selection: {
- enabled: false
- },
- zoom: {
- enabled: false
- },
- toolbar: {
- show: false
- },
- },
- grid: {
- show: false,
- padding: {
- top: 0,
- right: 0,
- bottom: 0,
- left: -10,
- }
- },
- dropShadow: {
- enabled: false,
- },
- xaxis: {
- type: "datetime",
- labels: {
- show: false
- },
- tooltip: {
- enabled: false
- }
- },
- yaxis: {
- labels: {
- show: false
- },
- },
- markers: {
- size: 0,
- strokeWidth: 0,
- hover: {
- size: undefined,
- sizeOffset: 0
- }
- },
- tooltip: {
- theme: false,
- enabled: true,
- custom: ({series, seriesIndex, dataPointIndex, w}) => {
- let ts = w.globals.seriesX[seriesIndex][dataPointIndex];
- const dt = new Date(ts).toLocaleDateString("en-us", timeoptions)
- let val = series[seriesIndex][dataPointIndex];
- if (val >= 10000) {
- val = Math.round(val / 1000) + " ms"
- } else {
- val = val + " μs"
- }
- return `
Average Response Time: ${val}${dt}
`
- },
- fixed: {
- enabled: true,
- position: 'topRight',
- offsetX: -30,
- offsetY: 0,
- },
- x: {
- show: false,
- },
- y: {
- formatter: (value) => { return value + " %" },
- },
- },
- legend: {
- show: false,
- },
- dataLabels: {
- enabled: false
- },
- floating: true,
- axisTicks: {
- show: false
- },
- axisBorder: {
- show: false
- },
- fill: {
- colors: [this.service.online ? "#48d338" : "#dd3545"],
- opacity: 1,
- type: 'solid'
- },
- stroke: {
- show: false,
- curve: 'smooth',
- lineCap: 'butt',
- colors: [this.service.online ? "#3aa82d" : "#dd3545"],
- }
- },
- series: [{
- data: []
- }]
+ data: null,
+ ping_data: null,
+ series: null,
}
},
+ computed: {
+ chartOptions() {
+ return {
+ noData: {
+ text: 'Loading...'
+ },
+ chart: {
+ height: "100%",
+ width: "100%",
+ type: "area",
+ animations: {
+ enabled: true,
+ easing: 'easeinout',
+ speed: 800,
+ animateGradually: {
+ enabled: false,
+ delay: 400,
+ },
+ dynamicAnimation: {
+ enabled: true,
+ speed: 500
+ },
+ hover: {
+ animationDuration: 0, // duration of animations when hovering an item
+ },
+ responsiveAnimationDuration: 0,
+ },
+ selection: {
+ enabled: false
+ },
+ zoom: {
+ enabled: false
+ },
+ toolbar: {
+ show: false
+ },
+ },
+ grid: {
+ show: false,
+ padding: {
+ top: 0,
+ right: 0,
+ bottom: 0,
+ left: -10,
+ }
+ },
+ dropShadow: {
+ enabled: false,
+ },
+ xaxis: {
+ type: "datetime",
+ labels: {
+ show: false
+ },
+ tooltip: {
+ enabled: false
+ }
+ },
+ yaxis: {
+ labels: {
+ show: false
+ },
+ },
+ markers: {
+ size: 0,
+ strokeWidth: 0,
+ hover: {
+ size: undefined,
+ sizeOffset: 0
+ }
+ },
+ tooltip: {
+ theme: false,
+ enabled: true,
+ custom: ({series, seriesIndex, dataPointIndex, w}) => {
+ let ts = w.globals.seriesX[seriesIndex][dataPointIndex];
+ const dt = new Date(ts).toLocaleDateString("en-us", timeoptions)
+ let val = series[0][dataPointIndex];
+ let pingVal = series[1][dataPointIndex];
+ return `
+Average Response Time: ${this.humanTime(val)}/${this.chart_timeframe.interval}
+Average Ping: ${this.humanTime(pingVal)}/${this.chart_timeframe.interval}
+${dt}
+
`
+ },
+ fixed: {
+ enabled: true,
+ position: 'topRight',
+ offsetX: -30,
+ offsetY: 0,
+ },
+ x: {
+ show: false,
+ },
+ y: {
+ formatter: (value) => {
+ return value + " %"
+ },
+ },
+ },
+ legend: {
+ show: false,
+ },
+ dataLabels: {
+ enabled: false
+ },
+ floating: true,
+ axisTicks: {
+ show: false
+ },
+ axisBorder: {
+ show: false
+ },
+ fill: {
+ colors: this.service.online ? ["#3dc82f", "#48d338"] : ["#c60f20", "#dd3545"],
+ opacity: 1,
+ type: 'solid',
+ },
+ stroke: {
+ show: false,
+ curve: 'smooth',
+ lineCap: 'butt',
+ colors: this.service.online ? ["#38bc2a", "#48d338"] : ["#c60f20", "#dd3545"],
+ }
+ }
+ }
+ },
watch: {
visible: function(newVal, oldVal) {
if (newVal && !this.showing) {
@@ -185,11 +201,13 @@
if (this.data === null && val.interval !== "5m") {
await this.chartHits({start_time: val.start_time, interval: "5m"})
}
- this.series = [{
- name: this.service.name,
- ...this.convertToChartData(this.data)
- }]
- this.ready = true
+ this.ping_data = await Api.service_ping(this.service.id, start, end, val.interval, false)
+
+ this.series = [
+ {name: "Latency", ...this.convertToChartData(this.data)},
+ {name: "Ping", ...this.convertToChartData(this.ping_data)},
+ ]
+ this.ready = true
}
}
}
diff --git a/frontend/src/main.js b/frontend/src/main.js
index efa353f6..ee918dcd 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -37,7 +37,10 @@ Sentry.init({
integrations: [new Integrations.Vue({Vue, attachProps: true, logErrors: true})],
});
-Vue.config.productionTip = false
+Vue.config.productionTip = process.env.NODE_ENV !== 'production'
+Vue.config.devtools = process.env.NODE_ENV !== 'production'
+Vue.config.performance = process.env.NODE_ENV !== 'production'
+
new Vue({
router,
store,
diff --git a/frontend/src/mixin.js b/frontend/src/mixin.js
index ae61b519..c8c50b36 100644
--- a/frontend/src/mixin.js
+++ b/frontend/src/mixin.js
@@ -57,7 +57,6 @@ export default Vue.mixin({
return getUnixTime(parseISO(val)) <= 0
},
smallText(s) {
- const incidents = s.incidents
if (s.online) {
return `Online, checked ${this.ago(s.last_success)} ago`
} else {
diff --git a/frontend/src/pages/Index.vue b/frontend/src/pages/Index.vue
index 8408f84b..009643dc 100644
--- a/frontend/src/pages/Index.vue
+++ b/frontend/src/pages/Index.vue
@@ -1,7 +1,16 @@
-
+
+
+
+
+
+
+
+ {{loading_text}}
+
+
-
-
-
+
+
+
@@ -24,7 +33,7 @@
@@ -52,10 +61,29 @@ export default {
},
data() {
return {
- logged_in: false
+ logged_in: false,
}
},
computed: {
+ loading_text() {
+ if (this.core == null) {
+ return "Loading Core"
+ } else if (this.groups == null) {
+ return "Loading Groups"
+ } else if (this.services == null) {
+ return "Loading Services"
+ } else if (this.messages == null) {
+ return "Loading Announcements"
+ } else {
+ return "Completed"
+ }
+ },
+ loaded() {
+ return this.core !== null && this.groups !== null && this.services !== null
+ },
+ core() {
+ return this.$store.getters.core
+ },
messages() {
return this.$store.getters.messages.filter(m => this.inRange(m) && m.service === 0)
},
diff --git a/frontend/src/pages/Settings.vue b/frontend/src/pages/Settings.vue
index 5fda6cd0..44a7ddb2 100644
--- a/frontend/src/pages/Settings.vue
+++ b/frontend/src/pages/Settings.vue
@@ -173,10 +173,6 @@
},
methods: {
async update() {
- const c = await Api.core()
- this.$store.commit('setCore', c)
- const n = await Api.notifiers()
- this.$store.commit('setNotifiers', n)
this.cache = await Api.cache()
await this.getGithub()
},
@@ -194,19 +190,24 @@
return this.tab === id
},
async renewApiKeys() {
- let r = confirm("Are you sure you want to reset the API keys?");
+ let r = confirm("Are you sure you want to reset the API keys? You will be logged out.");
if (r === true) {
await Api.renewApiKeys()
const core = await Api.core()
this.$store.commit('setCore', core)
this.core = core
+ await this.logout()
}
},
+ async logout () {
+ await Api.logout()
+ this.$store.commit('setHasAllData', false)
+ this.$store.commit('setToken', null)
+ this.$store.commit('setAdmin', false)
+ this.$store.commit('setUser', false)
+ // this.$cookies.remove("statping_auth")
+ await this.$router.push('/logout')
+ }
}
}
-
-
-
diff --git a/frontend/vue.config.js b/frontend/vue.config.js
index 39d5beb2..8a3ee963 100644
--- a/frontend/vue.config.js
+++ b/frontend/vue.config.js
@@ -2,6 +2,9 @@ module.exports = {
baseUrl: '/',
assetsDir: 'assets',
filenameHashing: false,
+ productionTip: process.env.NODE_ENV !== 'production',
+ devtools: process.env.NODE_ENV !== 'production',
+ performance: process.env.NODE_ENV !== 'production',
devServer: {
disableHostCheck: true,
proxyTable: {
diff --git a/notifiers/mobile.go b/notifiers/mobile.go
index cb19ff30..1096df11 100644
--- a/notifiers/mobile.go
+++ b/notifiers/mobile.go
@@ -79,7 +79,7 @@ func (m *mobilePush) OnFailure(s services.Service, f failures.Failure) (string,
func (m *mobilePush) OnSuccess(s services.Service) (string, error) {
data := dataJson(s, failures.Failure{})
msg := &pushArray{
- Message: fmt.Sprintf("%s is currently online!", s.Name),
+ Message: fmt.Sprintf("%s is back online and was down for %s", s.Name, s.Downtime().Human()),
Title: "Service Online",
Data: data,
Platform: 2,
diff --git a/notifiers/mobile_test.go b/notifiers/mobile_test.go
index 175f5040..14029178 100644
--- a/notifiers/mobile_test.go
+++ b/notifiers/mobile_test.go
@@ -19,7 +19,6 @@ var (
)
func TestMobileNotifier(t *testing.T) {
- t.SkipNow()
err := utils.InitLogs()
require.Nil(t, err)