#89: First implementation of longer result history

web/app/src/components/Pagination.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="mt-2 flex">
+    <div class="flex-1">
+      <button v-if="currentPage < 5" @click="nextPage" class="bg-gray-200 hover:bg-gray-300 px-2 rounded border-gray-300 border text-monospace">&lt;</button>
+    </div>
+    <div class="flex-1 text-right">
+      <button v-if="currentPage > 1" @click="previousPage" class="bg-gray-200 hover:bg-gray-300 px-2 rounded border-gray-300 border text-monospace">&gt;</button>
+    </div>
+  </div>
+</template>
+
+
+<script>
+export default {
+  name: 'Pagination',
+  components: {},
+  emits: ['page'],
+  methods: {
+    nextPage() {
+      this.currentPage++;
+      this.$emit('page', this.currentPage);
+    },
+    previousPage() {
+      this.currentPage--;
+      this.$emit('page', this.currentPage);
+    }
+  },
+  data() {
+    return {
+      currentPage: 1,
+    }
+  }
+}
+</script>

web/app/src/components/Service.vue

@@ -1,37 +1,48 @@
 <template>
-  <div class='service px-3 py-3 border-l border-r border-t rounded-none hover:bg-gray-100' v-if="data && data.results && data.results.length">
+  <div class='service px-3 py-3 border-l border-r border-t rounded-none hover:bg-gray-100' v-if="data">
     <div class='flex flex-wrap mb-2'>
       <div class='w-3/4'>
         <router-link :to="generatePath()" class="font-bold hover:text-blue-800 hover:underline" title="View detailed service health">
           {{ data.name }}
         </router-link>
-        <span class='text-gray-500 font-light'> | {{ data.results[data.results.length - 1].hostname }}</span>
+        <span v-if="data.results && data.results.length" class='text-gray-500 font-light'> | {{ data.results[data.results.length - 1].hostname }}</span>
       </div>
       <div class='w-1/4 text-right'>
-        <span class='font-light status-min-max-ms'>
+        <span class='font-light status-min-max-ms' v-if="data.results && data.results.length">
           {{ (minResponseTime === maxResponseTime ? minResponseTime : (minResponseTime + '-' + maxResponseTime)) }}ms
         </span>
       </div>
     </div>
     <div>
       <div class='status-over-time flex flex-row'>
-        <slot v-if="data.results.length < maximumNumberOfResults">
-          <span v-for="filler in maximumNumberOfResults - data.results.length" :key="filler" class="status rounded border border-dashed"> </span>
+        <slot v-if="data.results && data.results.length">
+          <slot v-if="data.results.length < maximumNumberOfResults">
+            <span v-for="filler in maximumNumberOfResults - data.results.length" :key="filler" class="status rounded border border-dashed">&nbsp;</span>
+          </slot>
+          <slot v-for="result in data.results" :key="result">
+            <span v-if="result.success" class="status status-success rounded bg-success" @mouseenter="showTooltip(result, $event)" @mouseleave="showTooltip(null, $event)"></span>
+            <span v-else class="status status-failure rounded bg-red-600" @mouseenter="showTooltip(result, $event)" @mouseleave="showTooltip(null, $event)"></span>
+          </slot>
         </slot>
-        <slot v-for="result in data.results" :key="result">
-          <span v-if="result.success" class="status status-success rounded bg-success" @mouseenter="showTooltip(result, $event)" @mouseleave="showTooltip(null, $event)"></span>
-          <span v-else class="status status-failure rounded bg-red-600" @mouseenter="showTooltip(result, $event)" @mouseleave="showTooltip(null, $event)"></span>
+        <slot v-else>
+          <span v-for="filler in maximumNumberOfResults" :key="filler" class="status rounded border border-dashed">&nbsp;</span>
         </slot>
       </div>
     </div>
     <div class='flex flex-wrap status-time-ago'>
-      <!-- Show "Last update at" instead? -->
-      <div class='w-1/2'>
-        {{ generatePrettyTimeAgo(data.results[0].timestamp) }}
-      </div>
-      <div class='w-1/2 text-right'>
-        {{ generatePrettyTimeAgo(data.results[data.results.length - 1].timestamp) }}
-      </div>
+      <slot v-if="data.results && data.results.length">
+        <div class='w-1/2'>
+          {{ generatePrettyTimeAgo(data.results[0].timestamp) }}
+        </div>
+        <div class='w-1/2 text-right'>
+          {{ generatePrettyTimeAgo(data.results[data.results.length - 1].timestamp) }}
+        </div>
+      </slot>
+      <slot v-else>
+        <div class='w-1/2'>
+          &nbsp;
+        </div>
+      </slot>
     </div>
   </div>
 </template>
@@ -153,7 +164,7 @@ export default {
   content: "X";
 }
 
-@media screen and (max-width: 450px) {
+@media screen and (max-width: 600px) {
   .status.status-success::after,
   .status.status-failure::after {
     content: " ";

web/app/src/views/Details.vue

@@ -7,6 +7,7 @@
       <h1 class="text-xl xl:text-3xl text-monospace text-gray-400">RECENT CHECKS</h1>
       <hr class="mb-4" />
       <Service :data="serviceStatus" :maximumNumberOfResults="20" @showTooltip="showTooltip" />
+      <Pagination @page="changePage"/>
     </slot>
     <div v-if="uptime" class="mt-12">
       <h1 class="text-xl xl:text-3xl text-monospace text-gray-400">UPTIME</h1>
@@ -73,10 +74,12 @@ import Settings from '@/components/Settings.vue'
 import Service from '@/components/Service.vue';
 import {SERVER_URL} from "@/main.js";
 import {helper} from "@/mixins/helper.js";
+import Pagination from "@/components/Pagination";
 
 export default {
   name: 'Details',
   components: {
+    Pagination,
     Service,
     Settings,
   },
@@ -85,7 +88,7 @@ export default {
   methods: {
     fetchData() {
       //console.log("[Details][fetchData] Fetching data");
-      fetch(`${this.serverUrl}/api/v1/statuses/${this.$route.params.key}`)
+      fetch(`${this.serverUrl}/api/v1/statuses/${this.$route.params.key}?page=${this.currentPage}`)
           .then(response => response.json())
           .then(data => {
             if (JSON.stringify(this.serviceStatus) !== JSON.stringify(data)) {
@@ -138,7 +141,11 @@ export default {
     },
     showTooltip(result, event) {
       this.$emit('showTooltip', result, event);
-    }
+    },
+    changePage(page) {
+      this.currentPage = page;
+      this.fetchData();
+    },
   },
   data() {
     return {
@@ -147,6 +154,7 @@ export default {
       uptime: {"7d": 0, "24h": 0, "1h": 0},
       // Since this page isn't at the root, we need to modify the server URL a bit
       serverUrl: SERVER_URL === '.' ? '..' : SERVER_URL,
+      currentPage: 1,
     }
   },
   created() {

web/app/src/views/Home.vue

@@ -1,16 +1,19 @@
 <template>
   <Services :serviceStatuses="serviceStatuses" :showStatusOnHover="true" @showTooltip="showTooltip"/>
+  <Pagination @page="changePage"/>
   <Settings @refreshData="fetchData"/>
 </template>
 
 <script>
 import Settings from '@/components/Settings.vue'
 import Services from '@/components/Services.vue';
+import Pagination from "@/components/Pagination";
 import {SERVER_URL} from "@/main.js";
 
 export default {
   name: 'Home',
   components: {
+    Pagination,
     Services,
     Settings,
   },
@@ -18,7 +21,7 @@ export default {
   methods: {
     fetchData() {
       //console.log("[Home][fetchData] Fetching data");
-      fetch(`${SERVER_URL}/api/v1/statuses`)
+      fetch(`${SERVER_URL}/api/v1/statuses?page=${this.currentPage}`)
           .then(response => response.json())
           .then(data => {
             if (JSON.stringify(this.serviceStatuses) !== JSON.stringify(data)) {
@@ -28,11 +31,16 @@ export default {
     },
     showTooltip(result, event) {
       this.$emit('showTooltip', result, event);
-    }
+    },
+    changePage(page) {
+      this.currentPage = page;
+      this.fetchData();
+    },
   },
   data() {
     return {
-      serviceStatuses: {}
+      serviceStatuses: {},
+      currentPage: 1
     }
   },
   created() {