#89: First implementation of longer result history

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