Make auto refresh interval customizable (#4260)

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

db/knex_migrations/2023-12-20-0000-alter-status-page.js

@@ -0,0 +1,12 @@
+exports.up = function (knex) {
+    return knex.schema
+        .alterTable("status_page", function (table) {
+            table.integer("auto_refresh_interval").defaultTo(300).unsigned();
+        });
+};
+
+exports.down = function (knex) {
+    return knex.schema.alterTable("status_page", function (table) {
+        table.dropColumn("auto_refresh_interval");
+    });
+};

server/model/status_page.js

@@ -238,6 +238,7 @@ class StatusPage extends BeanModel {
             description: this.description,
             icon: this.getIcon(),
             theme: this.theme,
+            autoRefreshInterval: this.autoRefreshInterval,
             published: !!this.published,
             showTags: !!this.show_tags,
             domainNameList: this.getDomainNameList(),
@@ -260,6 +261,7 @@ class StatusPage extends BeanModel {
             title: this.title,
             description: this.description,
             icon: this.getIcon(),
+            autoRefreshInterval: this.autoRefreshInterval,
             theme: this.theme,
             published: !!this.published,
             showTags: !!this.show_tags,

server/socket-handlers/status-page-socket-handler.js

@@ -155,6 +155,7 @@ module.exports.statusPageSocketHandler = (socket) => {
             statusPage.title = config.title;
             statusPage.description = config.description;
             statusPage.icon = config.logo;
+            statusPage.autoRefreshInterval = config.autoRefreshInterval,
             statusPage.theme = config.theme;
             //statusPage.published = ;
             //statusPage.search_engine_index = ;
@@ -280,6 +281,7 @@ module.exports.statusPageSocketHandler = (socket) => {
             statusPage.title = title;
             statusPage.theme = "auto";
             statusPage.icon = "";
+            statusPage.autoRefreshInterval = 300;
             await R.store(statusPage);
 
             callback({

src/lang/en.json

@@ -361,6 +361,8 @@
     "Proxy": "Proxy",
     "Date Created": "Date Created",
     "Footer Text": "Footer Text",
+    "Refresh Interval": "Refresh Interval",
+    "Refresh Interval Description": "The status page will do a full site refresh every {0} seconds",
     "Show Powered By": "Show Powered By",
     "Domain Names": "Domain Names",
     "signedInDisp": "Signed in as {0}",

src/pages/StatusPage.vue

@@ -34,6 +34,14 @@
                     </div>
                 </div>
 
+                <div class="my-3">
+                    <label for="auto-refresh-interval" class="form-label">{{ $t("Refresh Interval") }}</label>
+                    <input id="auto-refresh-interval" v-model="config.autoRefreshInterval" type="number" class="form-control" :min="5">
+                    <div class="form-text">
+                        {{ $t("Refresh Interval Description", [config.autoRefreshInterval]) }}
+                    </div>
+                </div>
+
                 <div class="my-3">
                     <label for="switch-theme" class="form-label">{{ $t("Theme") }}</label>
                     <select id="switch-theme" v-model="config.theme" class="form-select">
@@ -438,7 +446,6 @@ export default {
             baseURL: "",
             clickedEditButton: false,
             maintenanceList: [],
-            autoRefreshInterval: 5,
             lastUpdateTime: dayjs(),
             updateCountdown: null,
             updateCountdownText: null,
@@ -708,6 +715,13 @@ export default {
             this.$root.publicGroupList = res.data.publicGroupList;
 
             this.loading = false;
+
+            // Configure auto-refresh loop
+            feedInterval = setInterval(() => {
+                this.updateHeartbeatList();
+            }, (this.config.autoRefreshInterval + 10) * 1000);
+
+            this.updateUpdateTimer();
         }).catch( function (error) {
             if (error.response.status === 404) {
                 location.href = "/page-not-found";
@@ -715,13 +729,7 @@ export default {
             console.log(error);
         });
 
-        // Configure auto-refresh loop
         this.updateHeartbeatList();
-        feedInterval = setInterval(() => {
-            this.updateHeartbeatList();
-        }, (this.autoRefreshInterval * 60 + 10) * 1000);
-
-        this.updateUpdateTimer();
 
         // Go to edit page if ?edit present
         // null means ?edit present, but no value
@@ -797,7 +805,7 @@ export default {
             clearInterval(this.updateCountdown);
 
             this.updateCountdown = setInterval(() => {
-                const countdown = dayjs.duration(this.lastUpdateTime.add(this.autoRefreshInterval, "minutes").add(10, "seconds").diff(dayjs()));
+                const countdown = dayjs.duration(this.lastUpdateTime.add(this.config.autoRefreshInterval, "seconds").add(10, "seconds").diff(dayjs()));
                 if (countdown.as("seconds") < 0) {
                     clearInterval(this.updateCountdown);
                 } else {