mirror of https://github.com/statping/statping
ui updates
hunterlong
parent
5f774b732a
commit
9ebd8e169f
|
|
@ -5,6 +5,7 @@
|
|||
- Added Version and Github Commit hash to left navigation on Settings page
|
||||
- Added "reason" for failures (will be used for more custom notification messages) [regex, lookup, timeout, connection, close, status_code]
|
||||
- Added Help page that is generated from Statping's Wiki repo on build
|
||||
- Modified Service Group failures on index page to show 90 days of failures
|
||||
|
||||
# 0.90.63 (08-17-2020)
|
||||
- Modified build process to use xgo for all arch builds
|
||||
|
|
|
|||
|
|
@ -103,11 +103,33 @@
|
|||
background-color: #efefef;
|
||||
}
|
||||
|
||||
.divided {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.divider {
|
||||
flex-grow: 1;
|
||||
border-bottom: 1px solid rgba(0,0,0,0.1);
|
||||
margin: 0 20px 0 20px;
|
||||
}
|
||||
|
||||
.daily-failures {
|
||||
position: absolute;
|
||||
padding-top: 3px;
|
||||
top: 10px;
|
||||
right: 100px;
|
||||
width: 300px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.service_day {
|
||||
height: 20px;
|
||||
margin-right: 2px;
|
||||
border-radius: 4px;
|
||||
max-width: 25px;
|
||||
border-radius: 2px;
|
||||
max-width: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.service_day SPAN {
|
||||
|
|
|
|||
|
|
@ -131,3 +131,12 @@ A:HOVER {
|
|||
.footer A:HOVER {
|
||||
color: #6d6d6d;
|
||||
}
|
||||
|
||||
.no-select {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ $navbar-background: #ffffff;
|
|||
$input-background: #fdfdfd;
|
||||
$input-color: #4e4e4e;
|
||||
$input-border: 1px solid #c9c9c9;
|
||||
$day-success-background: #20ac13;
|
||||
$day-success-background: #e9e9e9;
|
||||
$day-error-background: #d50a0a;
|
||||
|
||||
/* Status Container */
|
||||
|
|
|
|||
|
|
@ -1,12 +1,14 @@
|
|||
<template>
|
||||
<footer>
|
||||
<div v-if="!core.footer" class="footer text-center mb-4 p-2">
|
||||
<div class="d-block small text-dim">
|
||||
<div class="d-block">
|
||||
<router-link :to="$store.state.admin ? '/dashboard' : '/login'">{{$t('top_nav.dashboard')}}</router-link>
|
||||
<div class="d-block text-dim">
|
||||
<div class="mb-3">
|
||||
<router-link :to="admin ? '/dashboard' : '/login'">{{$t('top_nav.dashboard')}}</router-link>
|
||||
</div>
|
||||
<a class="mt-3" href="https://github.com/statping/statping" target="_blank">Statping</a> v{{core.version}}
|
||||
made with <font-awesome-icon icon="heart" class="text-danger"/>
|
||||
<span class="text-muted font-1 mt-3">
|
||||
<a href="https://github.com/statping/statping" target="_blank">Statping v{{core.version}}
|
||||
made with <font-awesome-icon icon="heart" class="font-1 text-danger"/></a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="footer text-center mb-4 p-2" v-html="core.footer"></div>
|
||||
|
|
@ -27,7 +29,10 @@
|
|||
},
|
||||
commit() {
|
||||
return this.$store.getters.core.commit.slice(0,8)
|
||||
}
|
||||
},
|
||||
admin() {
|
||||
return this.$store.getters.admin
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,22 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="d-flex mt-3 mb-2">
|
||||
<div class="flex-fill service_day" v-for="(d, index) in failureData" :class="{'day-error': d.amount > 0, 'day-success': d.amount === 0}">
|
||||
<span v-if="d.amount !== 0" class="d-none d-md-block text-center small">{{d.amount}}</span>
|
||||
<div class="d-flex mt-3">
|
||||
<div class="flex-fill service_day" v-for="(d, index) in failureData" @mouseover="mouseover(d)" @mouseout="mouseout" :class="{'day-error': d.amount > 0, 'day-success': d.amount === 0}">
|
||||
<span v-if="d.amount !== 0" class="d-none d-md-block text-center small"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-2">
|
||||
<div class="col-3 text-left font-2 text-muted">30 Days Ago</div>
|
||||
<div class="col-6 text-center font-2" :class="{'text-muted': service.online, 'text-danger': !service.online}">
|
||||
{{service_txt}}
|
||||
</div>
|
||||
<div class="col-3 text-right font-2 text-muted">Today</div>
|
||||
<div class="col-12 no-select">
|
||||
<p class="divided">
|
||||
<span class="font-2 text-muted">90 Days Ago</span>
|
||||
<span class="divider"></span>
|
||||
<span class="text-center font-2" :class="{'text-muted': service.online, 'text-danger': !service.online}">{{service_txt}}</span>
|
||||
<span class="divider"></span>
|
||||
<span class="font-2 text-muted">Today</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="daily-failures small text-right text-dim">{{hover_text}}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -26,6 +31,7 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
failureData: [],
|
||||
hover_text: ""
|
||||
}
|
||||
},
|
||||
props: {
|
||||
|
|
@ -43,18 +49,24 @@ export default {
|
|||
this.lastDaysFailures()
|
||||
},
|
||||
methods: {
|
||||
mouseout() {
|
||||
this.hover_text = ""
|
||||
},
|
||||
mouseover(e) {
|
||||
let txt = `${e.amount} Failures`
|
||||
if (e.amount === 0) {
|
||||
txt = `No Issues`
|
||||
}
|
||||
this.hover_text = `${e.date.toLocaleDateString()} - ${txt}`
|
||||
},
|
||||
async lastDaysFailures() {
|
||||
const start = this.nowSubtract(86400 * 30)
|
||||
const data = await Api.service_failures_data(this.service.id, this.toUnix(start), this.toUnix(this.startToday()), "24h")
|
||||
const start = this.nowSubtract(86400 * 90)
|
||||
const data = await Api.service_failures_data(this.service.id, this.toUnix(start), this.toUnix(this.now()), "24h", true)
|
||||
data.forEach((d) => {
|
||||
let date = this.parseISO(d.timeframe)
|
||||
this.failureData.push({month: 1, day: date.getDate(), amount: d.amount})
|
||||
this.failureData.push({month: date.getMonth(), day: date.getDate(), date: date, amount: d.amount})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="row">
|
||||
<div v-for="(incident, i) in incidents" class="col-12">
|
||||
<div v-for="(incident, i) in incidents" class="col-12 mt-2">
|
||||
<span class="braker mt-1 mb-3"></span>
|
||||
<h6>{{incident.title}}
|
||||
<span class="font-2 float-right">{{niceDate(incident.created_at)}}</span>
|
||||
|
|
|
|||
|
|
@ -36,6 +36,7 @@ export default new Vuex.Store({
|
|||
getters: {
|
||||
hasAllData: state => state.hasAllData,
|
||||
hasPublicData: state => state.hasPublicData,
|
||||
admin: state => state.admin,
|
||||
core: state => state.core,
|
||||
oauth: state => state.oauth,
|
||||
token: state => state.token,
|
||||
|
|
|
|||
Loading…
Reference in New Issue