新增功能:列表清单定时刷新的设置 (#280)

Author: awol2005ex

web/dashboard/src/business/app-layout/header-components/AutoRefresh.vue

@@ -0,0 +1,51 @@
+<template>
+    <span style="color: white;margin-left: 20px">
+        <el-select v-model="autorefresh"  @change="changeAutorefresh">
+                  <el-option v-for="(vs,index) in autorefreshs" :key="vs.value"
+                             :label="vs.label"
+                             :value="vs.value"
+                  ></el-option>
+        </el-select>
+    </span>
+</template>
+
+<script>
+/*定时刷新设置*/
+export default {
+  name: "autorefresh",
+  components: {},
+  props: {},
+  data () {
+    return {
+      autorefresh: '-1',
+      autorefreshs:[
+        {value:'-1',label:"手动刷新"},
+        {value:'5',label:"5秒自动刷新"},
+        {value:'10',label:"10秒自动刷新"},
+        {value:'30',label:"30秒自动刷新"},
+      ]
+    }
+  },
+  methods: {
+    async changeAutorefresh(){
+        await this.$store.dispatch("app/setAutorefresh", this.autorefresh)
+    }
+  },
+  async mounted () {
+    this.autorefresh =localStorage.getItem("autorefresh")
+    if(!this.autorefresh || this.autorefresh === 'undefined' || this.autorefresh === ''){
+      this.autorefresh = '-1'
+    }
+    await this.$store.dispatch("app/setAutorefresh", this.autorefresh)
+
+  },
+  created () {
+    
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
+

web/dashboard/src/business/app-layout/horizontal-layout/HorizontalHeader.vue

@@ -5,6 +5,7 @@
       <home></home>
       <project-switch style="margin-left: 20px"></project-switch>
       <cluster-name></cluster-name>
+      <AutoRefresh></AutoRefresh>
     </div>
     <div class="header-right">
       <TerminalEnter></TerminalEnter>
@@ -24,10 +25,10 @@ import Help from "@/business/app-layout/header-components/Help";
 import LanguageSwitch from "@/business/app-layout/header-components/LanguageSwitch"
 import TerminalEnter from "@/business/app-layout/header-components/TerminalEnter";
 import ClusterName from "@/business/app-layout/header-components/Cluster"
-
+import AutoRefresh from "@/business/app-layout/header-components/AutoRefresh"
 export default {
   name: "HorizontalHeader",
-  components: { ClusterName, TerminalEnter, LanguageSwitch, ProjectSwitch, Help, Home, UserSetting, SidebarToggleButton}
+  components: { ClusterName, TerminalEnter, LanguageSwitch, ProjectSwitch, Help, Home, UserSetting, SidebarToggleButton,AutoRefresh}
 }
 </script>
 

web/dashboard/src/business/dashboard/index.vue

@@ -168,7 +168,8 @@ export default {
       },
       dialogMetricVisible: false,
       loading: false,
-      isFullTextSearch: false
+      isFullTextSearch: false,
+      intervalId:null,//定时器
     }
   },
   methods: {
@@ -189,6 +190,7 @@ export default {
         this.cluster = res.data
       })
       if (checkPermissions({scope: 'cluster', apiGroup: "", resource: "nodes", verb: "list"})) {
+        this.resources=[]
         listNodes(this.clusterName).then(res => {
           const nodes = {
             name: "Nodes",
@@ -315,7 +317,7 @@ export default {
           this.resources.push(services)
         })
       }
-      this.search()
+      
     },
     search(resetPage) {
       this.loading = true
@@ -396,12 +398,48 @@ export default {
     //改变选项"是否全文搜索"
     OnIsFullTextSearchChange(val){
       this.isFullTextSearch=val
+    },
+    stopTimeTick(){
+      if (!this.intervalId) {
+        return;
+      }
+      clearInterval(this.intervalId); //清除计时器
+      this.intervalId = null; //设置为null
+    },
+    startTimeTick(tick){
+      // 计时器为空，操作
+      this.intervalId = setInterval(() => {
+          this.stopTimeTick()
+          //刷新图表
+          this.listResources();
+          console.log(tick)
+          this.startTimeTick(tick)
+      },tick*1000);
     }
   },
   created() {
     this.clusterName = this.$route.query.cluster
     this.showMetric = checkPermissions({scope: 'cluster', apiGroup: "", resource: "nodes", verb: "list"}) && checkPermissions({scope: 'cluster', apiGroup: "metrics.k8s.io", resource: "nodes", verb: "list"})
     this.listResources()
+    this.search()
+  },
+  watch: {
+    /*监控自动刷新变量*/
+   "$store.state.app.autorefresh":{
+    handler:function(newVal,oldVal){
+      if(!newVal || newVal=='-1' || newVal=='undefined' || newVal==''){
+        this.stopTimeTick();
+      } else {
+        this.stopTimeTick();
+        // 计时器为空，操作
+        this.startTimeTick(parseInt(newVal));
+      }
+    }
+   }
+  },
+  destroyed(){
+    // 在页面销毁后，清除计时器
+    this.stopTimeTick();
   }
 }
 </script>

web/dashboard/src/components/complex-table/index.vue

@@ -5,27 +5,34 @@
     </div>
 
     <div class="complex-table__toolbar">
-      <div>
-        
-        <div v-if="searchConfig">
+        <template v-if="searchConfig">
           <el-row v-if="showFullTextSwitch">
-            <el-col :span="12">
+            <el-col :span="8">
               <div  style="margin-top: 5px;  float: left">
                  <span class="spanClass">{{$t('commons.search.fullTextSearch')}}</span>
                  <el-switch class="interval"  v-model="isFullTextSearch" @change="OnIsFullTextSearchChange"/>
               </div>
             </el-col>  
-            <el-col :span="12">
+            <el-col :span="6">
+              <el-button size="mini" @click="search(true)"><i class="el-icon-search"/>{{this.$t('commons.button.search')}}</el-button>
+            </el-col> 
+            <el-col :span="10">
               <el-input  :placeholder="$t('commons.button.search')" suffix-icon="el-icon-search" clearable v-model="searchConfig.keywords" @change="search(true)">
               </el-input>
             </el-col>
           </el-row>  
-          <el-input v-if="!showFullTextSwitch" :placeholder="$t('commons.button.search')" suffix-icon="el-icon-search" clearable v-model="searchConfig.keywords" @change="search(true)">
-          </el-input>
-        </div>
+          <el-row v-if="!showFullTextSwitch">
+            <el-col :span="12">
+              <el-button size="mini" @click="search(true)"><i class="el-icon-search"/>{{this.$t('commons.button.search')}}</el-button>
+            </el-col>  
+            <el-col :span="12">
+              <el-input  :placeholder="$t('commons.button.search')" suffix-icon="el-icon-search" clearable v-model="searchConfig.keywords" @change="search(true)">
+              </el-input>
+            </el-col>
+          </el-row> 
+        </template>
         <slot name="toolbar">
         </slot>
-      </div>
     </div>
 
     <div class="complex-table__body">
@@ -65,6 +72,7 @@ export default {
     return {
       pageShow: false,
       isFullTextSearch :false,//是否全文本搜索
+      intervalId:null,//定时
     }
   },
   methods: {
@@ -76,8 +84,41 @@ export default {
     },
     OnIsFullTextSearchChange(val){
       this.$emit("update:isFullTextSearch", val)
+    },
+    stopTimeTick(){
+      if (!this.intervalId) {
+        return;
+      }
+      clearInterval(this.intervalId); //清除计时器
+      this.intervalId = null; //设置为null
+    },
+    startTimeTick(tick){
+      // 计时器为空，操作
+      this.intervalId = setInterval(() => {
+          this.stopTimeTick()
+          this.search(true);
+          this.startTimeTick(tick)
+      },tick*1000);
     }
   },
+  watch: {
+    /*监控自动刷新变量*/
+   "$store.state.app.autorefresh":{
+    handler:function(newVal,oldVal){
+      if(!newVal ||  newVal=='-1' || newVal=='undefined' || newVal==''){
+        this.stopTimeTick();
+      } else {
+        this.stopTimeTick();
+        // 计时器为空，操作
+        this.startTimeTick(parseInt(newVal));
+      }
+    }
+   }
+  },
+  destroyed(){
+    // 在页面销毁后，清除计时器
+    this.stopTimeTick();
+  }
 }
 </script>
 

web/dashboard/src/store/modules/app.js

@@ -8,7 +8,9 @@ const state = {
   sidebar: {
     opened: get() ? !!+get() : true
   },
-  device: 'desktop'
+  device: 'desktop',
+  /*定时刷新频率，单位为秒，-1为手动刷新*/
+  autorefresh: '-1'
 }
 
 const mutations = {
@@ -27,6 +29,10 @@ const mutations = {
   CLOSE_SIDEBAR: (state) => {
     set('sidebarStatus', 0)
     state.sidebar.opened = false
+  },
+  SET_AUTOREFRESH: (state, value) => {
+    localStorage.setItem('autorefresh',value)
+    state.autorefresh = value
   }
 }
 
@@ -39,6 +45,9 @@ const actions = {
   },
   closeSideBar({commit}) {
     commit('CLOSE_SIDEBAR')
+  },
+  setAutorefresh({commit},value) {
+    commit('SET_AUTOREFRESH',value)
   }
 }