Merge pull request #2878 from chakflying/feat/status-page-countdown

Feat: Add status page countdown to refresh

src/lang/en.json

@@ -174,6 +174,7 @@
     "Avg. Response": "Avg. Response",
     "Entry Page": "Entry Page",
     "statusPageNothing": "Nothing here, please add a group or a monitor.",
+    "statusPageRefreshIn": "Refresh in: {0}",
     "No Services": "No Services",
     "All Systems Operational": "All Systems Operational",
     "Partially Degraded Service": "Partially Degraded Service",

src/pages/StatusPage.vue

@@ -306,6 +306,11 @@
                 <p v-if="config.showPoweredBy">
                     {{ $t("Powered by") }} <a target="_blank" rel="noopener noreferrer" href="https://github.com/louislam/uptime-kuma">{{ $t("Uptime Kuma" ) }}</a>
                 </p>
+
+                <div class="refresh-info mb-2">
+                    <div>{{ $t("Last Updated") }}: <date-time :value="lastUpdateTime" /></div>
+                    <div>{{ $tc("statusPageRefreshIn", [ updateCountdownText]) }}</div>
+                </div>
             </footer>
         </div>
 
@@ -322,6 +327,7 @@
 <script>
 import axios from "axios";
 import dayjs from "dayjs";
+import duration from "dayjs/plugin/duration";
 import Favico from "favico.js";
 // import highlighting library (you can use any library you want just return html string)
 import { highlight, languages } from "prismjs/components/prism-core";
@@ -337,10 +343,12 @@ import DOMPurify from "dompurify";
 import Confirm from "../components/Confirm.vue";
 import PublicGroupList from "../components/PublicGroupList.vue";
 import MaintenanceTime from "../components/MaintenanceTime.vue";
+import DateTime from "../components/Datetime.vue";
 import { getResBaseURL } from "../util-frontend";
 import { STATUS_PAGE_ALL_DOWN, STATUS_PAGE_ALL_UP, STATUS_PAGE_MAINTENANCE, STATUS_PAGE_PARTIAL_DOWN, UP, MAINTENANCE } from "../util.ts";
 
 const toast = useToast();
+dayjs.extend(duration);
 
 const leavePageMsg = "Do you really want to leave? you have unsaved changes!";
 
@@ -359,6 +367,7 @@ export default {
         Confirm,
         PrismEditor,
         MaintenanceTime,
+        DateTime,
     },
 
     // Leave Page for vue route change
@@ -400,6 +409,10 @@ export default {
             baseURL: "",
             clickedEditButton: false,
             maintenanceList: [],
+            autoRefreshInterval: 5,
+            lastUpdateTime: dayjs(),
+            updateCountdown: null,
+            updateCountdownText: null,
         };
     },
     computed: {
@@ -637,11 +650,13 @@ export default {
             console.log(error);
         });
 
-        // 5mins a loop
+        // Configure auto-refresh loop
         this.updateHeartbeatList();
         feedInterval = setInterval(() => {
             this.updateHeartbeatList();
-        }, (300 + 10) * 1000);
+        }, (this.autoRefreshInterval * 60 + 10) * 1000);
+
+        this.updateUpdateTimer();
 
         // Go to edit page if ?edit present
         // null means ?edit present, but no value
@@ -700,10 +715,29 @@ export default {
                     favicon.badge(downMonitors);
 
                     this.loadedData = true;
+                    this.lastUpdateTime = dayjs();
+                    this.updateUpdateTimer();
                 });
             }
         },
 
+        /**
+         * Setup timer to display countdown to refresh
+         * @returns {void}
+         */
+        updateUpdateTimer() {
+            clearInterval(this.updateCountdown);
+
+            this.updateCountdown = setInterval(() => {
+                const countdown = dayjs.duration(this.lastUpdateTime.add(this.autoRefreshInterval, "minutes").add(10, "seconds").diff(dayjs()));
+                if (countdown.as("seconds") < 0) {
+                    clearInterval(this.updateCountdown);
+                } else {
+                    this.updateCountdownText = countdown.format("mm:ss");
+                }
+            }, 1000);
+        },
+
         /** Enable editing mode */
         edit() {
             if (this.hasToken) {
@@ -1118,4 +1152,8 @@ footer {
     }
 }
 
+.refresh-info {
+    opacity: 0.7;
+}
+
 </style>