lingling
/
tiny-rdm
mirror of https://github.com/tiny-craft/tiny-rdm.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: list all server info in server status page

This commit is contained in:
tiny-craft 2023-07-14 11:36:07 +08:00
parent ddf69a3bb2
commit 484cdcf54e
4 changed files with 88 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

121
frontend/src/components/content_value/ContentServerStatus.vue
View File

@ -1,7 +1,10 @@
<script setup> <script setup>
import { get, mapValues, pickBy, split, sum, toArray, toNumber } from 'lodash' import { get, map, mapValues, pickBy, split, sum, toArray, toNumber } from 'lodash'
import { computed } from 'vue' import { computed, reactive, ref } from 'vue'
import Help from '../icons/Help.vue' import Help from '../icons/Help.vue'
import IconButton from '../common/IconButton.vue'
import Filter from '../icons/Filter.vue'
import { useI18n } from 'vue-i18n'
const props = defineProps({ const props = defineProps({
server: String, server: String,
@ -64,45 +67,87 @@ const totalKeys = computed(() => {
}) })
return sum(toArray(nums)) return sum(toArray(nums))
}) })
const infoList = computed(() => map(props.info, (value, key) => ({ value, key })))
const i18n = useI18n()
const infoColumns = [
reactive({
title: i18n.t('key'),
key: 'key',
defaultSortOrder: 'ascend',
sorter: 'default',
minWidth: 100,
filterOptionValue: null,
filter(value, row) {
return !!~row.key.indexOf(value.toString())
},
}),
{ title: i18n.t('value'), key: 'value' },
]
const infoFilter = ref('')
const onFilterInfo = (val) => {
infoColumns[0].filterOptionValue = val
}
</script> </script>
<template> <template>
<n-card :theme-override1s="{ paddingMedium: '10px 20px 10px' }"> <n-scrollbar>
<template #header> <n-space vertical>
{{ props.server }} <n-card :theme-override1s="{ paddingMedium: '10px 20px 10px' }">
<n-space inline size="small"> <template #header>
<n-tag v-if="redisVersion" type="primary" size="small">v{{ redisVersion }}</n-tag> {{ props.server }}
<n-tag v-if="redisMode" type="primary" size="small">{{ redisMode }}</n-tag> <n-space inline size="small">
<n-tag v-if="role" type="primary" size="small">{{ role }}</n-tag> <n-tag v-if="redisVersion" type="primary" size="small">v{{ redisVersion }}</n-tag>
</n-space> <n-tag v-if="redisMode" type="primary" size="small">{{ redisMode }}</n-tag>
</template> <n-tag v-if="role" type="primary" size="small">{{ role }}</n-tag>
<template #header-extra> </n-space>
<n-space inline size="small"> </template>
{{ $t('auto_refresh') }} <template #header-extra>
<n-switch :value="props.autoRefresh" @update:value="(v) => emit('update:autoRefresh', v)" /> <n-space inline size="small">
</n-space> {{ $t('auto_refresh') }}
</template> <n-switch :value="props.autoRefresh" @update:value="(v) => emit('update:autoRefresh', v)" />
<n-grid x-gap="5" style="min-width: 500px"> </n-space>
<n-gi :span="6"> </template>
<n-statistic :label="$t('uptime')" :value="uptime[0]"> <n-grid x-gap="5" style="min-width: 500px">
<template #suffix> {{ $t(uptime[1]) }}</template> <n-gi :span="6">
</n-statistic> <n-statistic :label="$t('uptime')" :value="uptime[0]">
</n-gi> <template #suffix> {{ $t(uptime[1]) }}</template>
<n-gi :span="6"> </n-statistic>
<n-statistic :label="$t('connected_clients')" :value="get(props.info, 'connected_clients', 0)" /> </n-gi>
</n-gi> <n-gi :span="6">
<n-gi :span="6"> <n-statistic
<n-statistic :value="totalKeys"> :label="$t('connected_clients')"
<template #label>{{ $t('total_keys') }} <n-icon :component="Help" /></template> :value="get(props.info, 'connected_clients', 0)"
</n-statistic> />
</n-gi> </n-gi>
<n-gi :span="6"> <n-gi :span="6">
<n-statistic :label="$t('memory_used')" :value="usedMemory[0]"> <n-statistic :value="totalKeys">
<template #suffix> {{ usedMemory[1] }}</template> <template #label
</n-statistic> >{{ $t('total_keys') }}
</n-gi> <n-icon :component="Help" />
</n-grid> </template>
</n-card> </n-statistic>
</n-gi>
<n-gi :span="6">
<n-statistic :label="$t('memory_used')" :value="usedMemory[0]">
<template #suffix> {{ usedMemory[1] }}</template>
</n-statistic>
</n-gi>
</n-grid>
</n-card>
<n-card :title="$t('all_info')">
<template #header-extra>
<n-input v-model:value="infoFilter" @update:value="onFilterInfo" placeholder="">
<template #prefix>
<icon-button :icon="Filter" size="18" />
</template>
</n-input>
</template>
<n-data-table :columns="infoColumns" :data="infoList" />
</n-card>
</n-space>
</n-scrollbar>
</template> </template>
<style scoped lang="scss"></style> <style scoped lang="scss"></style>

2
frontend/src/components/sidebar/ConnectionTree.vue
View File

@ -29,7 +29,7 @@ const selectedKeys = ref([])
watch(selectedKeys, () => { watch(selectedKeys, () => {
const key = selectedKeys.value[0] const key = selectedKeys.value[0]
// try remove group name // try to remove group name
const kparts = split(key, '/') const kparts = split(key, '/')
const len = size(kparts) const len = size(kparts)
if (len > 1) { if (len > 1) {

3
frontend/src/langs/en.json
View File

@ -141,5 +141,6 @@
"memory_used": "Memory", "memory_used": "Memory",
"unit_day": "D", "unit_day": "D",
"unit_hour": "H", "unit_hour": "H",
"unit_minute": "M" "unit_minute": "M",
"all_info": "All Info"
} }

3
frontend/src/langs/zh-cn.json
View File

@ -144,5 +144,6 @@
"memory_used": "内存使用", "memory_used": "内存使用",
"unit_day": "天", "unit_day": "天",
"unit_hour": "小时", "unit_hour": "小时",
"unit_minute": "分钟" "unit_minute": "分钟",
"all_info": "所有信息"
} }