add auto-refresh

EthDevOps · Jul 30, 2024 · e9224bf · e9224bf
1 parent 0e542cd
commit e9224bf
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 4 deletions.
diff --git a/src/components/Jobs.vue b/src/components/Jobs.vue
@@ -9,6 +9,16 @@
     <n-form-item>
       <n-button @click="fetchJobs">Refresh</n-button>
     </n-form-item>
+    <n-form-item>
+      <n-switch v-model:value="autoRefresh">
+        <template #checked>
+          Auto-update enabled
+        </template>
+        <template #unchecked>
+          Auto-update disabled
+        </template>
+      </n-switch>
+    </n-form-item>
   </n-form>
   <n-table striped>
     <thead>
@@ -42,11 +52,28 @@
 import axios from 'axios';
 import {parseJobState} from '../common'
 export default {
-  name: 'RunnersView',
+  name: 'JobsView',
+  watch: {
+    autoRefresh(newVal) {
+      if (newVal) {
+        // Start auto-refreshing
+        this.interval = setInterval(this.fetchJobs, 2000); // Fetch jobs every 2000 milliseconds (2 seconds)
+      } else {
+        // Stop auto-refreshing
+        clearInterval(this.interval);
+      }
+    }
+  },
+  beforeUnmount() {
+    if (this.interval) {
+      clearInterval(this.interval);
+    }
+  },
   data() {
     return {
       jobs: [],
-      hideComplete: false
+      hideComplete: false,
+      autoRefresh: false
     };
   },
   mounted() {

diff --git a/src/components/Runners.vue b/src/components/Runners.vue
@@ -13,6 +13,16 @@
       <n-form-item>
         <n-button @click="fetchrunners">Refresh</n-button>
       </n-form-item>
+      <n-form-item>
+        <n-switch v-model:value="autoRefresh">
+          <template #checked>
+            Auto-update enabled
+          </template>
+          <template #unchecked>
+            Auto-update disabled
+          </template>
+        </n-switch>
+      </n-form-item>
     </n-form>
     <n-drawer v-model:show="show" :width="'60%'">
       <n-drawer-content :title="'Runner Details for ' + this.selectedRunner.hostname" closable>
@@ -68,13 +78,30 @@ export default {
   components: {
     RunnerDetails
   },
+  watch: {
+    autoRefresh(newVal) {
+      if (newVal) {
+        // Start auto-refreshing
+        this.interval = setInterval(this.fetchRunners, 2000); // Fetch jobs every 2000 milliseconds (2 seconds)
+      } else {
+        // Stop auto-refreshing
+        clearInterval(this.interval);
+      }
+    }
+  },
+  beforeUnmount() {
+    if (this.interval) {
+      clearInterval(this.interval);
+    }
+  },
   data() {
     return {
       runners: [],
       jobs: [],
       searchRunner: "",
       searchOnlyOnline: false,
-      selectedRunner: {}
+      selectedRunner: {},
+      autoRefresh: false,
     };
   },
   setup() {
@@ -84,7 +111,6 @@ export default {
   },
   mounted() {
     this.fetchRunners();
-    setInterval(this.fetchRunners, 10000);
   },
   computed: {
     sortedRunners() {