swap in new DashboardHome.vue and add OffLineList.vue

package-lock.json

@@ -1,12 +1,12 @@
 {
     "name": "uptime-kuma",
-    "version": "2.0.0-beta.2",
+    "version": "2.0.0-beta.3",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "uptime-kuma",
-            "version": "2.0.0-beta.2",
+            "version": "2.0.0-beta.3",
             "license": "MIT",
             "dependencies": {
                 "@grpc/grpc-js": "~1.8.22",

src/components/OffLineList.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="offline-list shadow-box mb-4">
+    <h3>🚨 Offline Devices</h3>
+
+    <ul class="list-unstyled" v-if="offlineMonitors.length > 0">
+      <li
+        v-for="monitor in offlineMonitors"
+        :key="monitor.id"
+        class="flashing-red mb-2"
+      >
+        <router-link :to="`/dashboard/${monitor.id}`" class="text-danger">
+          {{ monitor.name }}
+        </router-link>
+      </li>
+    </ul>
+
+    <div v-else>
+      ✅ All devices online
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  computed: {
+    offlineMonitors() {
+      const monitors = Object.values(this.$root.monitorList || {});
+      const heartbeats = this.$root.lastHeartbeatList || {};
+
+      return monitors
+        .filter((monitor) => {
+          const status = heartbeats[monitor.id]?.status;
+          return status === 0;
+        })
+        .sort((a, b) => a.name.localeCompare(b.name));
+    },
+  },
+};
+</script>
+
+<style scoped>
+.flashing-red {
+  animation: flash 1.5s infinite;
+  font-weight: bold;
+}
+@keyframes flash {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+}
+</style>

src/pages/DashboardHome.vue

@@ -45,6 +45,9 @@
                 </div>
             </div>
 
+            <!-- 🚨 Offline Devices Component -->
+            <OfflineList />
+
             <div class="shadow-box table-shadow-box" style="overflow-x: hidden;">
                 <table class="table table-borderless table-hover">
                     <thead>
@@ -57,9 +60,13 @@
                     </thead>
                     <tbody>
                         <tr v-for="(beat, index) in displayedRecords" :key="index" :class="{ 'shadow-box': $root.windowWidth <= 550}">
-                            <td class="name-column"><router-link :to="`/dashboard/${beat.monitorID}`">{{ $root.monitorList[beat.monitorID]?.name }}</router-link></td>
+                            <td class="name-column">
+                                <router-link :to="`/dashboard/${beat.monitorID}`">
+                                    {{ $root.monitorList[beat.monitorID]?.name }}
+                                </router-link>
+                            </td>
                             <td><Status :status="beat.status" /></td>
-                            <td :class="{ 'border-0':! beat.msg}"><Datetime :value="beat.time" /></td>
+                            <td :class="{ 'border-0': !beat.msg }"><Datetime :value="beat.time" /></td>
                             <td class="border-0">{{ beat.msg }}</td>
                         </tr>
 
@@ -89,12 +96,14 @@
 import Status from "../components/Status.vue";
 import Datetime from "../components/Datetime.vue";
 import Pagination from "v-pagination-3";
+import OfflineList from "../components/OfflineList.vue";
 
 export default {
     components: {
         Datetime,
         Status,
         Pagination,
+        OfflineList,
     },
     props: {
         calculatedHeight: {
@@ -140,16 +149,10 @@ export default {
 
     beforeUnmount() {
         this.$root.emitter.off("newImportantHeartbeat", this.onNewImportantHeartbeat);
-
         window.removeEventListener("resize", this.updatePerPage);
     },
 
     methods: {
-        /**
-         * Updates the displayed records when a new important heartbeat arrives.
-         * @param {object} heartbeat - The heartbeat object received.
-         * @returns {void}
-         */
         onNewImportantHeartbeat(heartbeat) {
             if (this.page === 1) {
                 this.displayedRecords.unshift(heartbeat);
@@ -160,10 +163,6 @@ export default {
             }
         },
 
-        /**
-         * Retrieves the length of the important heartbeat list for all monitors.
-         * @returns {void}
-         */
         getImportantHeartbeatListLength() {
             this.$root.getSocket().emit("monitorImportantHeartbeatListCount", null, (res) => {
                 if (res.ok) {
@@ -173,10 +172,6 @@ export default {
             });
         },
 
-        /**
-         * Retrieves the important heartbeat list for the current page.
-         * @returns {void}
-         */
         getImportantHeartbeatListPaged() {
             const offset = (this.page - 1) * this.perPage;
             this.$root.getSocket().emit("monitorImportantHeartbeatListPaged", null, offset, this.perPage, (res) => {
@@ -186,10 +181,6 @@ export default {
             });
         },
 
-        /**
-         * Updates the number of items shown per page based on the available height.
-         * @returns {void}
-         */
         updatePerPage() {
             const tableContainer = this.$refs.tableContainer;
             const tableContainerHeight = tableContainer.offsetHeight;
@@ -201,7 +192,6 @@ export default {
             } else {
                 this.perPage = this.initialPerPage;
             }
-
         },
     },
 };