From a71f5e0070420d2eea39645ebde3517a98a028ed Mon Sep 17 00:00:00 2001 From: Lykin <137850705+tiny-craft@users.noreply.github.com> Date: Wed, 3 Jan 2024 18:44:51 +0800 Subject: [PATCH] perf: support reload option after import data --- .../components/dialogs/AddFieldsDialog.vue | 2 +- .../components/dialogs/ImportKeyDialog.vue | 25 ++++++++++++------- .../src/components/sidebar/BrowserPane.vue | 8 +++++- frontend/src/langs/en-us.json | 9 ++++--- frontend/src/langs/zh-cn.json | 1 + frontend/src/objects/redisServerState.js | 2 ++ frontend/src/stores/browser.js | 22 ++++++++++++++-- 7 files changed, 53 insertions(+), 16 deletions(-) diff --git a/frontend/src/components/dialogs/AddFieldsDialog.vue b/frontend/src/components/dialogs/AddFieldsDialog.vue index 56665e2..eea7054 100644 --- a/frontend/src/components/dialogs/AddFieldsDialog.vue +++ b/frontend/src/components/dialogs/AddFieldsDialog.vue @@ -219,7 +219,7 @@ const onClose = () => { :is="addValueComponent[newForm.type]" v-model:type="newForm.opType" v-model:value="newForm.value" /> - + {{ $t('dialogue.field.reload_when_succ') }} diff --git a/frontend/src/components/dialogs/ImportKeyDialog.vue b/frontend/src/components/dialogs/ImportKeyDialog.vue index ad5e458..1387fd9 100644 --- a/frontend/src/components/dialogs/ImportKeyDialog.vue +++ b/frontend/src/components/dialogs/ImportKeyDialog.vue @@ -10,6 +10,7 @@ const importKeyForm = reactive({ server: '', db: 0, expire: true, + reload: true, file: '', type: 0, conflict: 0, @@ -25,6 +26,7 @@ watchEffect(() => { importKeyForm.server = server importKeyForm.db = db importKeyForm.expire = true + importKeyForm.reload = true importKeyForm.file = '' importKeyForm.type = 0 importKeyForm.conflict = 0 @@ -33,7 +35,7 @@ watchEffect(() => { }) const i18n = useI18n() -const conflictOption = [ +const conflictOption = computed(() => [ { value: 0, label: i18n.t('dialogue.import.conflict_overwrite'), @@ -42,7 +44,7 @@ const conflictOption = [ value: 1, label: i18n.t('dialogue.import.conflict_ignore'), }, -] +]) const importEnable = computed(() => { return !isEmpty(importKeyForm.file) @@ -51,8 +53,8 @@ const importEnable = computed(() => { const onConfirmImport = async () => { try { importing.value = true - const { server, db, file, conflict, expire } = importKeyForm - browserStore.importKeysFromCSVFile(server, db, file, conflict, expire).catch((e) => {}) + const { server, db, file, conflict, expire, reload } = importKeyForm + browserStore.importKeysFromCSVFile(server, db, file, conflict, expire, reload).catch((e) => {}) } catch (e) { $message.error(e.message) return @@ -93,11 +95,6 @@ const onClose = () => { :placeholder="$t('dialogue.import.open_csv_file_tip')" ext="csv" /> - - - {{ $t('dialogue.import.import_expire') }} - - { :value="op.value" /> + + + + {{ $t('dialogue.import.import_expire') }} + + + {{ $t('dialogue.import.reload') }} + + + diff --git a/frontend/src/components/sidebar/BrowserPane.vue b/frontend/src/components/sidebar/BrowserPane.vue index c23ce59..b048012 100644 --- a/frontend/src/components/sidebar/BrowserPane.vue +++ b/frontend/src/components/sidebar/BrowserPane.vue @@ -3,7 +3,7 @@ import { useThemeVars } from 'naive-ui' import BrowserTree from './BrowserTree.vue' import IconButton from '@/components/common/IconButton.vue' import useTabStore from 'stores/tab.js' -import { computed, nextTick, onMounted, reactive, ref, unref } from 'vue' +import { computed, nextTick, onMounted, reactive, ref, unref, watch } from 'vue' import { find, get, map, size } from 'lodash' import Refresh from '@/components/icons/Refresh.vue' import useDialogStore from 'stores/dialog.js' @@ -238,6 +238,11 @@ const onSelectOptions = (select) => { } onMounted(() => onReload()) + +watch( + () => browserStore.getReloadKey(props.server), + (key) => onReload(), +) // forbid dynamic switch key view due to performance issues // const viewType = ref(0) // const onSwitchView = (selectView) => { @@ -284,6 +289,7 @@ onMounted(() => onReload()) :options="addOptions" placement="bottom-end" style="min-width: 130px" + trigger="click" @select="onSelectOptions"> diff --git a/frontend/src/langs/en-us.json b/frontend/src/langs/en-us.json index 6165d8a..059b461 100644 --- a/frontend/src/langs/en-us.json +++ b/frontend/src/langs/en-us.json @@ -277,6 +277,8 @@ }, "export": { "name": "Export Data", + "export_expire_title": "Expiration", + "export_expire": "Include Expiration Time", "export": "Export", "save_file": "Export Path", "save_file_tip": "Select the path to save exported file", @@ -285,12 +287,13 @@ }, "import": { "name": "Import Data", - "export_expire_title": "Expiration", - "export_expire": "Export Expiration Time", + "import_expire_title": "Expiration", + "import_expire": "Import Expiration Time", "import": "Import", + "reload": "Reload Keys After Imported", "open_csv_file": "Import File", "open_csv_file_tip": "Select the file for import", - "conflict_handle": "Handle Key Conflict", + "conflict_handle": "Key Conflict Resolution", "conflict_overwrite": "Overwrite", "conflict_ignore": "Ignore", "importing": "Importing Keys imported/overwrite:{imported} conflict/fail:{conflict}", diff --git a/frontend/src/langs/zh-cn.json b/frontend/src/langs/zh-cn.json index 471d81d..1560c20 100644 --- a/frontend/src/langs/zh-cn.json +++ b/frontend/src/langs/zh-cn.json @@ -289,6 +289,7 @@ "name": "导入数据", "import_expire_title": "过期时间", "import_expire": "包含键过期时间", + "reload": "导入完成后重新载入", "import": "确认导入", "open_csv_file": "导入文件路径", "open_csv_file_tip": "选择需要导入的文件", diff --git a/frontend/src/objects/redisServerState.js b/frontend/src/objects/redisServerState.js index 2024eab..928b883 100644 --- a/frontend/src/objects/redisServerState.js +++ b/frontend/src/objects/redisServerState.js @@ -19,6 +19,7 @@ export class RedisServerState { /** * @param {string} name server name * @param {number} db current opened database + * @param {number} reloadKey try to reload when changed * @param {{}} stats current server status info * @param {Object.} databases database list * @param {string|null} patternFilter pattern filter @@ -40,6 +41,7 @@ export class RedisServerState { }) { this.name = name this.db = db + this.reloadKey = Date.now() this.stats = stats this.databases = databases this.patternFilter = patternFilter diff --git a/frontend/src/stores/browser.js b/frontend/src/stores/browser.js index 2579af2..baccd96 100644 --- a/frontend/src/stores/browser.js +++ b/frontend/src/stores/browser.js @@ -166,6 +166,20 @@ const useBrowserStore = defineStore('browser', { return get(rootNode, 'children', []) }, + getReloadKey(server) { + /** @type {RedisServerState} **/ + const serverInst = this.servers[server] + return serverInst != null ? serverInst.reloadKey : 0 + }, + + reloadServer(server) { + /** @type {RedisServerState} **/ + const serverInst = this.servers[server] + if (serverInst != null) { + serverInst.reloadKey = Date.now() + } + }, + /** * switch key view * @param {string} connName @@ -1660,9 +1674,10 @@ const useBrowserStore = defineStore('browser', { * @param {string} path * @param {number} conflict * @param {boolean} [expire] + * @param {boolean} [reload] * @return {Promise} */ - async importKeysFromCSVFile(server, db, path, conflict, expire) { + async importKeysFromCSVFile(server, db, path, conflict, expire, reload) { const msgRef = $message.loading('', { duration: 0, closable: true }) let imported = 0 let ignored = 0 @@ -1695,8 +1710,11 @@ const useBrowserStore = defineStore('browser', { if (canceled) { $message.info(i18nGlobal.t('dialogue.handle_cancel')) } else { - // no fail + // finish $message.success(i18nGlobal.t('dialogue.import.import_completed', { success: imported, ignored })) + if (reload) { + this.reloadServer(server) + } } },