UPTM-14 - Dashboard Display on vertical 4K screen (#3451)

* Update src/pages/DashboardHome.vue

Co-authored-by: Frank Elsinga <frank@elsinga.de>

* resolve comment

Co-authored-by: AqidaHaidari <aghida55@gmail.com>
Co-authored-by: Pascal Ojinnaka <56399504+passy4ucj@users.noreply.github.com>
Co-authored-by: Aqida <42426077+AqidaHaidari@users.noreply.github.com>

---------

Co-authored-by: gitstart <gitstart@users.noreply.github.com>
Co-authored-by: AqidaHaidari <aghida55@gmail.com>
Co-authored-by: gitstart_bot <gitstart_bot@users.noreply.github.com>
Co-authored-by: Frank Elsinga <frank@elsinga.de>
Co-authored-by: Pascal Ojinnaka <56399504+passy4ucj@users.noreply.github.com>
Co-authored-by: Aqida <42426077+AqidaHaidari@users.noreply.github.com>

src/pages/Dashboard.vue

@@ -8,9 +8,9 @@
                 <MonitorList :scrollbar="true" />
             </div>
 
-            <div class="col-12 col-md-7 col-xl-8 mb-3">
+            <div ref="container" class="col-12 col-md-7 col-xl-8 mb-3">
                 <!-- Add :key to disable vue router re-use the same component -->
-                <router-view :key="$route.fullPath" />
+                <router-view :key="$route.fullPath" :calculatedHeight="height" />
             </div>
         </div>
     </div>
@@ -25,7 +25,12 @@ export default {
         MonitorList,
     },
     data() {
-        return {};
+        return {
+            height: 0
+        };
+    },
+    mounted() {
+        this.height = this.$refs.container.offsetHeight;
     },
 };
 </script>

src/pages/DashboardHome.vue

@@ -1,5 +1,5 @@
 <template>
-    <transition name="slide-fade" appear>
+    <transition ref="tableContainer" name="slide-fade" appear>
         <div v-if="$route.name === 'DashboardHome'">
             <h1 class="mb-3">
                 {{ $t("Quick Stats") }}
@@ -81,10 +81,17 @@ export default {
         Status,
         Pagination,
     },
+    props: {
+        calculatedHeight: {
+            type: Number,
+            default: 0
+        }
+    },
     data() {
         return {
             page: 1,
             perPage: 25,
+            initialPerPage: 25,
             heartBeatList: [],
             paginationConfig: {
                 hideCount: true,
@@ -134,6 +141,37 @@ export default {
             return this.heartBeatList.slice(startIndex, endIndex);
         },
     },
+    watch: {
+        importantHeartBeatList() {
+            this.$nextTick(() => {
+                this.updatePerPage();
+            });
+        },
+    },
+    mounted() {
+        this.initialPerPage = this.perPage;
+
+        window.addEventListener("resize", this.updatePerPage);
+        this.updatePerPage();
+    },
+    beforeUnmount() {
+        window.removeEventListener("resize", this.updatePerPage);
+    },
+    methods: {
+        updatePerPage() {
+            const tableContainer = this.$refs.tableContainer;
+            const tableContainerHeight = tableContainer.offsetHeight;
+            const availableHeight = window.innerHeight - tableContainerHeight;
+            const additionalPerPage = Math.floor(availableHeight / 58);
+
+            if (additionalPerPage > 0) {
+                this.perPage = Math.max(this.initialPerPage, this.perPage + additionalPerPage);
+            } else {
+                this.perPage = this.initialPerPage;
+            }
+
+        },
+    },
 };
 </script>