Browse Source

UI fixes

uifixes
Hunter Long 2 years ago
parent
commit
2c64a0abf3
  1. 2
      frontend/src/API.js
  2. 2
      frontend/src/assets/scss/base.scss
  3. 2
      frontend/src/components/Dashboard/ServiceEvents.vue
  4. 23
      frontend/src/components/Dashboard/ServiceInfo.vue
  5. 4
      frontend/src/components/Dashboard/ServiceSparkLine.vue
  6. 2
      frontend/src/pages/Help.vue

2
frontend/src/API.js

@ -8,7 +8,7 @@ const tokenKey = "statping_auth";
class Api {
constructor() {
this.version = "0.90.74";
this.commit = "2352cae85cb388437ae848c6acd0a658a4cd2d84";
this.commit = "df8e1f73d9f7fdf218bc5c26130d7d8a6af6719a";
}
async oauth() {

2
frontend/src/assets/scss/base.scss

@ -89,7 +89,7 @@
}
.chartmarker SPAN {
font-size: 4pt;
font-size: 8pt;
display: block;
color: #b1b1b1;
}

2
frontend/src/components/Dashboard/ServiceEvents.vue

@ -23,7 +23,7 @@
<div v-if="success_event && !failureBefore" class="col-12 font-2 m-0 mb-2">
<span class="text-success"><font-awesome-icon icon="check" class="mr-1" size="1x"/>No New Events</span>
<span class="font-italic d-inline-block text-truncate text-dim mt-1" style="max-width: 270px">
<span v-if="!this.isZero(service.last_error)" class="font-italic d-inline-block text-truncate text-dim mt-1" style="max-width: 270px">
Last failure was {{ago(service.last_error)}} ago.
</span>
</div>

23
frontend/src/components/Dashboard/ServiceInfo.vue

@ -9,21 +9,15 @@
</h6>
</div>
<div class="card-body">
<div class="card-body pb-1">
<div v-if="loaded" class="row pl-2">
<div class="col-md-6 col-sm-12 pl-2 mt-2 mt-md-0 mb-3">
<div class="col-md-12 col-sm-12 pl-2 mt-2 mt-md-0 mb-3">
<ServiceSparkLine :title="set2_name" subtitle="Latency Last 24 Hours" :series="set2"/>
</div>
<div class="col-md-6 col-sm-12 pl-0 mt-4 mt-md-0 mb-3">
<ServiceSparkLine :title="set1_name" subtitle="Latency Last 7 Days" :series="set1"/>
</div>
<ServiceEvents :service="service"/>
</div>
<div v-else class="row mb-5">
<div class="col-12 col-md-6 text-center">
<font-awesome-icon icon="circle-notch" class="text-dim" size="2x" spin/>
</div>
<div class="col-12 col-md-6 text-center text-dim">
<div class="col-12 col-md-12 text-center">
<font-awesome-icon icon="circle-notch" class="text-dim" size="2x" spin/>
</div>
</div>
@ -44,7 +38,8 @@
<font-awesome-icon icon="calendar-check"/>
</button>
<button @click="$router.push({path: `/dashboard/service/${service.id}/failures`, params: {id: service.id}})" @mouseleave="unsetHover" @mouseover="setHover($t('failures'))" class="btn btn-sm btn-white failures">
<font-awesome-icon icon="exclamation-triangle"/> <span v-if="service.stats.failures !== 0" class="badge badge-danger ml-1">{{service.stats.failures}}</span>
<font-awesome-icon icon="exclamation-triangle"/>
<span v-if="service.stats.failures !== 0" class="badge badge-danger ml-1">{{service.stats.failures}}</span>
</button>
</div>
</div>
@ -91,10 +86,8 @@
hovered: false,
hoverbtn: "",
openTab: "",
set1: [],
set2: [],
loaded: false,
set1_name: "",
set2_name: "",
failures: null,
visible: false
@ -111,7 +104,7 @@
this.hoverbtn = name
},
unsetHover() {
this.hoverbtn = this.$t('uptime', [this.service.online_7_days])
this.hoverbtn = this.$t('uptime') + " "+ this.service.online_7_days + "%"
},
async setVisible(isVisible, entry) {
if (isVisible && !this.visible) {
@ -126,9 +119,7 @@
this.uptime = await Api.service_uptime(this.service.id, this.toUnix(start), this.toUnix(end))
},
async loadInfo() {
this.set1 = await this.getHits(86400 * 7, "12h")
this.set1_name = this.calc(this.set1)
this.set2 = await this.getHits(86400, "60m")
this.set2 = await this.getHits(86400 * 3, "60m")
this.set2_name = this.calc(this.set2)
this.loaded = true
},

4
frontend/src/components/Dashboard/ServiceSparkLine.vue

@ -57,13 +57,13 @@
let ts = w.globals.seriesX[seriesIndex][dataPointIndex];
const dt = new Date(ts).toLocaleDateString("en-us", timeoptions)
let val = series[seriesIndex][dataPointIndex];
return `<div class="chartmarker"><span class="font-3">Average Response Time: ${this.humanTime(val)}</span><span>${dt}</span></div>`
return `<div class="chartmarker"><span class="">Average Response Time: ${this.humanTime(val)}</span><span>${dt}</span></div>`
},
fixed: {
enabled: true,
position: 'bottomLeft',
offsetX: 0,
offsetY: -30,
offsetY: -15,
},
x: {
show: true,

2
frontend/src/pages/Help.vue

@ -2321,7 +2321,7 @@ OluFxewsEO0QNDrfFb+0gnjYlnGqOFcZjUMXbDdY5oLSPtXohynuTK1qyQ==
</div>
<div class="text-center small text-dim" v-pre>
Automatically generated from Statping's Wiki on 2020-12-20 09:31:51.335569 &#43;0000 UTC
Automatically generated from Statping's Wiki on 2020-12-20 10:21:49.484474 &#43;0000 UTC
</div>
</div>

Loading…
Cancel
Save