updatess to service on Dashboard

CHANGELOG.md

@@ -3,6 +3,7 @@
 - Modified static email templates to github.com/statping/emails
 - Modified Regenerate API function to keep API_SECRET env
 - Added DEMO_MODE env variable, if true, 'admin' cannot be deleted
+- Modified Service sparklines on Dashboard
 
 # 0.90.64 (08-18-2020)
 - Modified max-width for container to 1012px, larger UI

frontend/src/assets/scss/base.scss

@@ -85,13 +85,13 @@
 .chartmarker {
   padding: 0px;
   width: 200px;
-  text-align: right;
+  text-align: left;
 }
 
 .chartmarker SPAN {
   font-size: 4pt;
   display: block;
-  color: #8b8b8b;
+  color: #b1b1b1;
 }
 
 .apexcharts-tooltip {

frontend/src/components/Dashboard/GroupedServices.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="row">
-    <h5 v-if="group.name" class="h5 col-12 mb-3 mt-2 text-dim">
+    <h5 v-if="group.name && group_services" class="h5 col-12 mb-3 mt-2 text-dim">
       <font-awesome-icon @click="toggle" :icon="expanded ? 'minus' : 'plus'" class="pointer mr-3"/> {{group.name}}
       <span class="badge badge-success text-uppercase float-right ml-2">{{services_online.length}} online</span>
       <span v-if="services_online.services_offline > 0" class="badge badge-danger text-uppercase float-right">

frontend/src/components/Dashboard/ServiceInfo.vue

@@ -32,7 +32,7 @@
 
           <div class="row">
           <div class="col-5 pr-0">
-              <span class="small text-dim"> {{ hoverbtn }}</span>
+              <span class="small text-dim">{{ hoverbtn }}</span>
           </div>
 
             <div class="col-7 pr-2 pl-0">
@@ -125,9 +125,9 @@
           this.uptime = await Api.service_uptime(this.service.id, this.toUnix(start), this.toUnix(this.now()))
         },
         async loadInfo() {
-          this.set1 = await this.getHits(24 * 7, "6h")
+          this.set1 = await this.getHits(24 * 7, "720m")
           this.set1_name = this.calc(this.set1)
-          this.set2 = await this.getHits(24, "1h")
+          this.set2 = await this.getHits(24, "60m")
           this.set2_name = this.calc(this.set2)
           this.loaded = true
         },
@@ -147,7 +147,7 @@
         },
           async getHits(hours, group) {
               const start = this.nowSubtract(3600 * hours)
-              const fetched = await Api.service_hits(this.service.id, this.toUnix(start), this.toUnix(this.now()), group, false)
+              const fetched = await Api.service_hits(this.service.id, this.toUnix(start), this.toUnix(this.now()), group, true)
 
               const data = this.convertToChartData(fetched, 0.001, 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>Average Response Time: </span><span class="font-3">${this.humanTime(val)}</span><span>${dt}</span></div>`
+            return `<div class="chartmarker"><span class="font-3">Average Response Time:  ${this.humanTime(val)}</span><span>${dt}</span></div>`
           },
           fixed: {
             enabled: true,
-            position: 'topRight',
+            position: 'bottomLeft',
             offsetX: 0,
-            offsetY: 0,
+            offsetY: -30,
           },
           x: {
             show: true,
@@ -94,7 +94,3 @@
   }
 }
 </script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-</style>

frontend/src/forms/Login.vue

@@ -10,7 +10,7 @@
         <div class="form-group row">
             <label for="password" class="col-4 col-form-label">{{$t('password')}}</label>
             <div class="col-8">
-                <input @keyup="checkForm" type="password" v-model="password" autocomplete="current-password" name="password" class="form-control" id="password" placeholder="password123">
+                <input @keyup="checkForm" type="password" v-model="password" autocomplete="current-password" name="password" class="form-control" id="password" placeholder="************">
             </div>
         </div>
         <div class="form-group row">

frontend/src/pages/Index.vue

@@ -23,9 +23,7 @@
             </div>
         </div>
 
-      <div v-if="loaded">
+      <Group v-for="group in groups" v-bind:key="group.id" :group=group />
-        <Group v-for="group in groups" v-bind:key="group.id" :group=group />
-      </div>
 
         <div class="col-12 full-col-12">
             <MessageBlock v-for="message in messages" v-bind:key="message.id" :message="message" />