UI fixes

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() {

frontend/src/assets/scss/base.scss

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

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>

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
         },

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,

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>