feat: 缓存容器界面刷新频率 (#2606)

Refs #2569

frontend/src/components/table-setting/index.vue

@@ -1,42 +1,39 @@
 <template>
     <div>
-        <el-popover placement="bottom-start" :width="200" trigger="click">
+        <el-popover placement="bottom-start" :width="240" trigger="click">
             <template #reference>
                 <el-button round class="timer-button">{{ $t('commons.table.tableSetting') }}</el-button>
             </template>
             <div style="margin-left: 15px">
-                <div>
+                <span>{{ $t('commons.table.refreshRate') }}</span>
-                    <span>{{ $t('commons.table.autoRefresh') }}</span>
+                <el-select style="margin-left: 5px; width: 120px" v-model="refreshRate" @change="changeRefresh">
-                    <el-switch style="margin-left: 5px" v-model="autoRefresh" @change="changeRefresh"></el-switch>
+                    <el-option :label="$t('commons.table.noRefresh')" :value="0"></el-option>
-                </div>
+                    <el-option :label="$t('commons.table.refreshRateUnit', [5])" :value="5"></el-option>
-                <div>
+                    <el-option :label="$t('commons.table.refreshRateUnit', [10])" :value="10"></el-option>
-                    <span>{{ $t('commons.table.refreshRate') }}</span>
+                    <el-option :label="$t('commons.table.refreshRateUnit', [30])" :value="30"></el-option>
-                    <el-select style="margin-left: 5px; width: 80px" v-model="refreshRate" @change="changeRefresh">
+                    <el-option :label="$t('commons.table.refreshRateUnit', [60])" :value="60"></el-option>
-                        <el-option label="5s" :value="5"></el-option>
+                    <el-option :label="$t('commons.table.refreshRateUnit', [120])" :value="120"></el-option>
-                        <el-option label="10s" :value="10"></el-option>
+                    <el-option :label="$t('commons.table.refreshRateUnit', [300])" :value="300"></el-option>
-                        <el-option label="30s" :value="30"></el-option>
+                </el-select>
-                        <el-option label="1min" :value="60"></el-option>
-                        <el-option label="2min" :value="120"></el-option>
-                        <el-option label="5min" :value="300"></el-option>
-                    </el-select>
-                </div>
             </div>
         </el-popover>
     </div>
 </template>
 
 <script setup lang="ts">
-import { onUnmounted, ref } from 'vue';
+import { onMounted, onUnmounted, ref } from 'vue';
 defineOptions({ name: 'TableSetting' });
 
-const autoRefresh = ref<boolean>(false);
+const refreshRate = ref<number>(0);
-const refreshRate = ref<number>(10);
 const emit = defineEmits(['search']);
+const props = defineProps({
+    title: String,
+});
 
 let timer: NodeJS.Timer | null = null;
 
 const changeRefresh = () => {
-    if (autoRefresh.value) {
+    if (refreshRate.value !== 0) {
         if (timer) {
             clearInterval(Number(timer));
             timer = null;
@@ -52,23 +49,20 @@ const changeRefresh = () => {
     }
 };
 
-const startTimer = () => {
-    autoRefresh.value = true;
-    changeRefresh();
-};
-const endTimer = () => {
-    autoRefresh.value = false;
-    changeRefresh();
-};
-
 onUnmounted(() => {
     clearInterval(Number(timer));
     timer = null;
+    if (props.title) {
+        localStorage.setItem(props.title, refreshRate.value + '');
+    }
 });
 
-defineExpose({
+onMounted(() => {
-    startTimer,
+    if (props.title) {
-    endTimer,
+        let rate = Number(localStorage.getItem(props.title));
+        refreshRate.value = rate ? Number(rate) : 0;
+        changeRefresh();
+    }
 });
 </script>
 

frontend/src/lang/modules/en.ts

@@ -83,8 +83,9 @@ const message = {
             port: 'Port',
             protocol: 'Protocol',
             tableSetting: 'Table setting',
-            autoRefresh: 'Auto refresh',
             refreshRate: 'Rate',
+            noRefresh: 'No Refresh',
+            refreshRateUnit: '{0} Seconds/Time',
         },
         loadingText: {
             Upgrading: 'System upgrade, please wait...',

frontend/src/lang/modules/tw.ts

@@ -83,8 +83,9 @@ const message = {
             port: '端口',
             protocol: '協議',
             tableSetting: '列表設置',
-            autoRefresh: '定時刷新',
             refreshRate: '刷新頻率',
+            noRefresh: '不刷新',
+            refreshRateUnit: '{0} 秒/次',
         },
         loadingText: {
             Upgrading: '系統升級中，請稍候...',

frontend/src/lang/modules/zh.ts

@@ -83,8 +83,9 @@ const message = {
             port: '端口',
             protocol: '协议',
             tableSetting: '列表设置',
-            autoRefresh: '定时刷新',
             refreshRate: '刷新频率',
+            noRefresh: '不刷新',
+            refreshRateUnit: '{0} 秒/次',
         },
         loadingText: {
             Upgrading: '系统升级中，请稍候...',

frontend/src/views/container/container/index.vue

@@ -40,7 +40,7 @@
                         </el-button-group>
                     </el-col>
                     <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
-                        <TableSetting @search="search()" />
+                        <TableSetting title="container-refresh" @search="refresh()" />
                         <div class="search-button">
                             <el-input
                                 v-model="searchName"
@@ -379,6 +379,34 @@ const search = async (column?: any) => {
         });
 };
 
+const refresh = async () => {
+    let filterItem = props.filters ? props.filters : '';
+    let params = {
+        name: searchName.value,
+        state: searchState.value || 'all',
+        page: paginationConfig.currentPage,
+        pageSize: paginationConfig.pageSize,
+        filters: filterItem,
+        orderBy: paginationConfig.orderBy,
+        order: paginationConfig.order,
+    };
+    loadStats();
+    const res = await searchContainer(params);
+    let containers = res.data.items || [];
+    for (const container of containers) {
+        for (const c of data.value) {
+            c.hasLoad = true;
+            if (container.containerID == c.containerID) {
+                for (let key in container) {
+                    if (key !== 'cpuPercent' && key !== 'memoryPercent') {
+                        c[key] = container[key];
+                    }
+                }
+            }
+        }
+    }
+};
+
 const loadStats = async () => {
     const res = await containerListStats();
     let stats = res.data || [];