refactor: separate define for all opened server status info
This commit is contained in:
parent
bb1d9f316b
commit
efc09a8745
|
@ -302,10 +302,6 @@ func (c *connectionService) OpenConnection(name string) (resp types.JSResp) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
switch selConn.DBFilterType {
|
switch selConn.DBFilterType {
|
||||||
case "none":
|
|
||||||
for idx := 0; idx < totaldb; idx++ {
|
|
||||||
dbs = append(dbs, queryDB(idx))
|
|
||||||
}
|
|
||||||
case "show":
|
case "show":
|
||||||
for _, idx := range selConn.DBFilterList {
|
for _, idx := range selConn.DBFilterList {
|
||||||
dbs = append(dbs, queryDB(idx))
|
dbs = append(dbs, queryDB(idx))
|
||||||
|
@ -316,6 +312,10 @@ func (c *connectionService) OpenConnection(name string) (resp types.JSResp) {
|
||||||
dbs = append(dbs, queryDB(idx))
|
dbs = append(dbs, queryDB(idx))
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
default:
|
||||||
|
for idx := 0; idx < totaldb; idx++ {
|
||||||
|
dbs = append(dbs, queryDB(idx))
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
resp.Success = true
|
resp.Success = true
|
||||||
|
|
|
@ -1,55 +1,109 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
|
import { computed, onMounted, onUnmounted, reactive, watch } from 'vue'
|
||||||
import { types } from '@/consts/support_redis_type.js'
|
import { types } from '@/consts/support_redis_type.js'
|
||||||
import ContentValueHash from '@/components/content_value/ContentValueHash.vue'
|
import ContentValueHash from '@/components/content_value/ContentValueHash.vue'
|
||||||
import ContentValueList from '@/components/content_value/ContentValueList.vue'
|
import ContentValueList from '@/components/content_value/ContentValueList.vue'
|
||||||
import ContentValueString from '@/components/content_value/ContentValueString.vue'
|
import ContentValueString from '@/components/content_value/ContentValueString.vue'
|
||||||
import ContentValueSet from '@/components/content_value/ContentValueSet.vue'
|
import ContentValueSet from '@/components/content_value/ContentValueSet.vue'
|
||||||
import ContentValueZset from '@/components/content_value/ContentValueZSet.vue'
|
import ContentValueZset from '@/components/content_value/ContentValueZSet.vue'
|
||||||
import { isEmpty, map, toUpper } from 'lodash'
|
import { get, isEmpty, keyBy, map, size, toUpper } from 'lodash'
|
||||||
import useTabStore from 'stores/tab.js'
|
import useTabStore from 'stores/tab.js'
|
||||||
import useConnectionStore from 'stores/connections.js'
|
import useConnectionStore from 'stores/connections.js'
|
||||||
import ContentServerStatus from '@/components/content_value/ContentServerStatus.vue'
|
import ContentServerStatus from '@/components/content_value/ContentServerStatus.vue'
|
||||||
import ContentValueStream from '@/components/content_value/ContentValueStream.vue'
|
import ContentValueStream from '@/components/content_value/ContentValueStream.vue'
|
||||||
|
|
||||||
const serverInfo = ref({})
|
/**
|
||||||
const autoRefresh = ref(false)
|
* @typedef {Object} ServerStatusItem
|
||||||
|
* @property {string} name
|
||||||
|
* @property {Object} info
|
||||||
|
* @property {boolean} autoRefresh
|
||||||
|
* @property {boolean} loading loading status for refresh
|
||||||
|
* @property {boolean} autoLoading loading status for auto refresh
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @type {UnwrapNestedRefs<Object.<string, ServerStatusItem>>}
|
||||||
|
*/
|
||||||
|
const serverStatusTab = reactive({})
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @param {string} serverName
|
||||||
|
* @return {UnwrapRef<ServerStatusItem>}
|
||||||
|
*/
|
||||||
|
const getServerInfo = (serverName) => {
|
||||||
|
if (isEmpty(serverName)) {
|
||||||
|
return {
|
||||||
|
name: serverName,
|
||||||
|
info: {},
|
||||||
|
autoRefresh: false,
|
||||||
|
autoLoading: false,
|
||||||
|
loading: false,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (!serverStatusTab.hasOwnProperty(serverName)) {
|
||||||
|
serverStatusTab[serverName] = {
|
||||||
|
name: serverName,
|
||||||
|
info: {},
|
||||||
|
autoRefresh: false,
|
||||||
|
autoLoading: false,
|
||||||
|
loading: false,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return serverStatusTab[serverName]
|
||||||
|
}
|
||||||
const serverName = computed(() => {
|
const serverName = computed(() => {
|
||||||
if (tabContent.value != null) {
|
if (tabContent.value != null) {
|
||||||
return tabContent.value.name
|
return tabContent.value.name
|
||||||
}
|
}
|
||||||
return ''
|
return ''
|
||||||
})
|
})
|
||||||
const loadingServerInfo = ref(false)
|
/**
|
||||||
const autoLoadingServerInfo = ref(false)
|
*
|
||||||
|
* @type {ComputedRef<ServerStatusItem>}
|
||||||
|
*/
|
||||||
|
const currentServer = computed(() => {
|
||||||
|
return getServerInfo(serverName.value)
|
||||||
|
})
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* refresh server status info
|
* refresh server status info
|
||||||
|
* @param {string} serverName
|
||||||
* @param {boolean} [force] force refresh will show loading indicator
|
* @param {boolean} [force] force refresh will show loading indicator
|
||||||
* @returns {Promise<void>}
|
* @returns {Promise<void>}
|
||||||
*/
|
*/
|
||||||
const refreshInfo = async (force) => {
|
const refreshInfo = async (serverName, force) => {
|
||||||
|
const info = getServerInfo(serverName)
|
||||||
if (force) {
|
if (force) {
|
||||||
loadingServerInfo.value = true
|
info.loading = true
|
||||||
} else {
|
} else {
|
||||||
autoLoadingServerInfo.value = true
|
info.autoLoading = true
|
||||||
}
|
}
|
||||||
if (!isEmpty(serverName.value) && connectionStore.isConnected(serverName.value)) {
|
if (!isEmpty(serverName) && connectionStore.isConnected(serverName)) {
|
||||||
try {
|
try {
|
||||||
serverInfo.value = await connectionStore.getServerInfo(serverName.value)
|
info.info = await connectionStore.getServerInfo(serverName)
|
||||||
} finally {
|
} finally {
|
||||||
loadingServerInfo.value = false
|
info.loading = false
|
||||||
autoLoadingServerInfo.value = false
|
info.autoLoading = false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const refreshAllInfo = async (force) => {
|
||||||
|
for (const serverName in serverStatusTab) {
|
||||||
|
await refreshInfo(serverName, force)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
let intervalId
|
let intervalId
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
refreshInfo(true)
|
refreshAllInfo(true)
|
||||||
intervalId = setInterval(() => {
|
intervalId = setInterval(() => {
|
||||||
if (autoRefresh.value) {
|
for (const serverName in serverStatusTab) {
|
||||||
refreshInfo()
|
if (get(serverStatusTab, [serverName, 'autoRefresh'])) {
|
||||||
|
refreshInfo(serverName)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}, 5000)
|
}, 5000)
|
||||||
})
|
})
|
||||||
|
@ -80,11 +134,27 @@ watch(
|
||||||
() => tabStore.nav,
|
() => tabStore.nav,
|
||||||
(nav) => {
|
(nav) => {
|
||||||
if (nav === 'browser') {
|
if (nav === 'browser') {
|
||||||
refreshInfo()
|
refreshInfo(serverName.value)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
)
|
)
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => tabStore.tabList,
|
||||||
|
(tabs) => {
|
||||||
|
if (size(tabs) < size(serverStatusTab)) {
|
||||||
|
const tabMap = keyBy(tabs, 'name')
|
||||||
|
// remove unused server status tab
|
||||||
|
for (const t in serverStatusTab) {
|
||||||
|
if (!tabMap.hasOwnProperty(t)) {
|
||||||
|
delete serverStatusTab[t]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ deep: true },
|
||||||
|
)
|
||||||
|
|
||||||
const tabContent = computed(() => {
|
const tabContent = computed(() => {
|
||||||
const tab = tabStore.currentTab
|
const tab = tabStore.currentTab
|
||||||
if (tab == null) {
|
if (tab == null) {
|
||||||
|
@ -110,10 +180,6 @@ const showNonexists = computed(() => {
|
||||||
return tabContent.value.value == null
|
return tabContent.value.value == null
|
||||||
})
|
})
|
||||||
|
|
||||||
const onUpdateValue = (tabIndex) => {
|
|
||||||
tabStore.switchTab(tabIndex)
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* reload current selection key
|
* reload current selection key
|
||||||
* @returns {Promise<null>}
|
* @returns {Promise<null>}
|
||||||
|
@ -132,12 +198,12 @@ const onReloadKey = async () => {
|
||||||
<div v-if="showServerStatus" class="content-container flex-item-expand flex-box-v">
|
<div v-if="showServerStatus" class="content-container flex-item-expand flex-box-v">
|
||||||
<!-- select nothing or select server node, display server status -->
|
<!-- select nothing or select server node, display server status -->
|
||||||
<content-server-status
|
<content-server-status
|
||||||
v-model:auto-refresh="autoRefresh"
|
v-model:auto-refresh="currentServer.autoRefresh"
|
||||||
:info="serverInfo"
|
:info="currentServer.info"
|
||||||
:loading="loadingServerInfo"
|
:loading="currentServer.loading"
|
||||||
:auto-loading="autoLoadingServerInfo"
|
:auto-loading="currentServer.autoLoading"
|
||||||
:server="serverName"
|
:server="currentServer.name"
|
||||||
@refresh="refreshInfo(true)" />
|
@refresh="refreshInfo(currentServer.name, true)" />
|
||||||
</div>
|
</div>
|
||||||
<div v-else-if="showNonexists" class="content-container flex-item-expand flex-box-v">
|
<div v-else-if="showNonexists" class="content-container flex-item-expand flex-box-v">
|
||||||
<n-empty :description="$t('interface.nonexist_tab_content')" class="empty-content">
|
<n-empty :description="$t('interface.nonexist_tab_content')" class="empty-content">
|
||||||
|
|
|
@ -261,7 +261,7 @@ const onClose = () => {
|
||||||
path="keySeparator">
|
path="keySeparator">
|
||||||
<n-input
|
<n-input
|
||||||
v-model:value="generalForm.keySeparator"
|
v-model:value="generalForm.keySeparator"
|
||||||
:placeholder="$t('dialogue.connection.advn_separator_tip')" />
|
:placeholder="$t('dialogue.connection.advn.separator_tip')" />
|
||||||
</n-form-item-gi>
|
</n-form-item-gi>
|
||||||
<n-form-item-gi
|
<n-form-item-gi
|
||||||
:span="12"
|
:span="12"
|
||||||
|
|
Loading…
Reference in New Issue