Make auto refresh interval customizable

Fix lint errore Remove manual french traduction Remove wrong comment Rollback wrong change for status api
louislam · Dec 20, 2023 · 9ec2d2a · 9ec2d2a
1 parent c9fe6b5
commit 9ec2d2a
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 10 deletions.
diff --git a/db/knex_migrations/2023-12-20-0000-alter-status-page.js b/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");
+    });
+};
diff --git a/server/model/status_page.js b/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,

diff --git a/server/socket-handlers/status-page-socket-handler.js b/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({

diff --git a/src/lang/en.json b/src/lang/en.json
@@ -358,6 +358,7 @@
     "Proxy": "Proxy",
     "Date Created": "Date Created",
     "Footer Text": "Footer Text",
+    "Refresh Interval": "Refresh Interval",
     "Show Powered By": "Show Powered By",
     "Domain Names": "Domain Names",
     "signedInDisp": "Signed in as {0}",

diff --git a/src/pages/StatusPage.vue b/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>
+
                 <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,21 +715,21 @@ export default {
             this.$root.publicGroupList = res.data.publicGroupList;
 
             this.loading = false;
+
+            // Configure auto-refresh loop
+            this.updateHeartbeatList();
+            feedInterval = setInterval(() => {
+                this.updateHeartbeatList();
+            }, (this.config.autoRefreshInterval + 10) * 1000);
+
+            this.updateUpdateTimer();
         }).catch( function (error) {
             if (error.response.status === 404) {
                 location.href = "/page-not-found";
             }
             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
         if (this.$route.query.edit || this.$route.query.edit === null) {
@@ -797,7 +804,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 {