From a663ecdeb521e99246a16db55d8d8df494e78a25 Mon Sep 17 00:00:00 2001
From: Lykin <137850705+tiny-craft@users.noreply.github.com>
Date: Fri, 12 Jan 2024 15:36:30 +0800
Subject: [PATCH] perf: add refresh interval option for server status page
---
.../src/components/common/AutoRefreshForm.vue | 69 +++++++++++++++++++
.../content_value/ContentServerStatus.vue | 65 +++++++++--------
frontend/src/components/icons/Refresh.vue | 4 +-
frontend/src/langs/en-us.json | 4 +-
frontend/src/langs/pt-br.json | 4 +-
frontend/src/langs/zh-cn.json | 4 +-
frontend/src/styles/style.scss | 10 +++
7 files changed, 119 insertions(+), 41 deletions(-)
create mode 100644 frontend/src/components/common/AutoRefreshForm.vue
diff --git a/frontend/src/components/common/AutoRefreshForm.vue b/frontend/src/components/common/AutoRefreshForm.vue
new file mode 100644
index 0000000..2239a39
--- /dev/null
+++ b/frontend/src/components/common/AutoRefreshForm.vue
@@ -0,0 +1,69 @@
+
+
+
+
+
+
+
+
+ emit('update:interval', val)">
+
+ {{ $t('common.unit_second') }}
+
+
+
+
+
+
+
diff --git a/frontend/src/components/content_value/ContentServerStatus.vue b/frontend/src/components/content_value/ContentServerStatus.vue
index 6978876..9161581 100644
--- a/frontend/src/components/content_value/ContentServerStatus.vue
+++ b/frontend/src/components/content_value/ContentServerStatus.vue
@@ -6,16 +6,19 @@ import Filter from '@/components/icons/Filter.vue'
import Refresh from '@/components/icons/Refresh.vue'
import useBrowserStore from 'stores/browser.js'
import { timeout } from '@/utils/promise.js'
+import AutoRefreshForm from '@/components/common/AutoRefreshForm.vue'
+import { NIcon, useThemeVars } from 'naive-ui'
const props = defineProps({
server: String,
})
const browserStore = useBrowserStore()
+const themeVars = useThemeVars()
const serverInfo = ref({})
const pageState = reactive({
autoRefresh: false,
- refreshInterval: 1,
+ refreshInterval: 5,
loading: false, // loading status for refresh
autoLoading: false, // loading status for auto refresh
})
@@ -41,15 +44,11 @@ const refreshInfo = async (force) => {
}
}
+const isLoading = computed(() => {
+ return pageState.loading || pageState.autoLoading
+})
+
const startAutoRefresh = async () => {
- if (pageState.autoRefresh) {
- return
- }
- pageState.autoRefresh = true
- if (!isNaN(pageState.refreshInterval)) {
- pageState.refreshInterval = 5
- }
- pageState.refreshInterval = Math.min(pageState.refreshInterval, 1)
let lastExec = Date.now()
do {
if (!pageState.autoRefresh) {
@@ -171,28 +170,34 @@ const infoFilter = ref('')
-
- {{ $t('status.auto_refresh') }}
-
+
+
+
+
+
+
+
+
+
+
-
- {{ $t('status.refresh') }}
-
-
-
-
-
-
-
-
-
+ @toggle="onToggleRefresh" />
+
diff --git a/frontend/src/components/icons/Refresh.vue b/frontend/src/components/icons/Refresh.vue
index 4abbc9e..6f10344 100644
--- a/frontend/src/components/icons/Refresh.vue
+++ b/frontend/src/components/icons/Refresh.vue
@@ -16,14 +16,14 @@ const props = defineProps({
diff --git a/frontend/src/langs/en-us.json b/frontend/src/langs/en-us.json
index 4855e59..02eec05 100644
--- a/frontend/src/langs/en-us.json
+++ b/frontend/src/langs/en-us.json
@@ -359,9 +359,7 @@
"connected_clients": "Clients",
"total_keys": "Keys",
"memory_used": "Memory",
- "all_info": "Information",
- "refresh": "Refresh",
- "auto_refresh": "Auto Refresh"
+ "all_info": "Information"
},
"slog": {
"title": "Slow Log",
diff --git a/frontend/src/langs/pt-br.json b/frontend/src/langs/pt-br.json
index 004a6d2..15993ec 100644
--- a/frontend/src/langs/pt-br.json
+++ b/frontend/src/langs/pt-br.json
@@ -291,9 +291,7 @@
"connected_clients": "Clientes Conectados",
"total_keys": "Chaves Totais",
"memory_used": "Memória Usada",
- "all_info": "Informações",
- "refresh": "Atualizar",
- "auto_refresh": "Atualização Automática"
+ "all_info": "Informações"
},
"slog": {
"title": "Registro de Operações Lentas",
diff --git a/frontend/src/langs/zh-cn.json b/frontend/src/langs/zh-cn.json
index 3ab874b..8bc7ec8 100644
--- a/frontend/src/langs/zh-cn.json
+++ b/frontend/src/langs/zh-cn.json
@@ -359,9 +359,7 @@
"connected_clients": "已连客户端",
"total_keys": "键总数",
"memory_used": "内存使用",
- "all_info": "全部信息",
- "refresh": "立即刷新",
- "auto_refresh": "自动刷新"
+ "all_info": "全部信息"
},
"slog": {
"title": "慢日志",
diff --git a/frontend/src/styles/style.scss b/frontend/src/styles/style.scss
index 8dfd723..dbbeea1 100644
--- a/frontend/src/styles/style.scss
+++ b/frontend/src/styles/style.scss
@@ -168,3 +168,13 @@ body {
.fade-leave-to {
opacity: 0;
}
+
+.auto-rotate {
+ animation: rotate 2s linear infinite;
+}
+
+@keyframes rotate {
+ 100% {
+ transform: rotate(360deg);
+ }
+}