feat: list all server info in server status page
This commit is contained in:
tiny-craft
parent
ddf69a3bb2
commit
484cdcf54e
|
|
@ -1,7 +1,10 @@
|
|||
<script setup>
|
||||
import { get, mapValues, pickBy, split, sum, toArray, toNumber } from 'lodash'
|
||||
import { computed } from 'vue'
|
||||
import { get, map, mapValues, pickBy, split, sum, toArray, toNumber } from 'lodash'
|
||||
import { computed, reactive, ref } from '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({
|
||||
server: String,
|
||||
|
|
@ -64,45 +67,87 @@ const totalKeys = computed(() => {
|
|||
})
|
||||
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>
|
||||
|
||||
<template>
|
||||
<n-card :theme-override1s="{ paddingMedium: '10px 20px 10px' }">
|
||||
<template #header>
|
||||
{{ props.server }}
|
||||
<n-space inline size="small">
|
||||
<n-tag v-if="redisVersion" type="primary" size="small">v{{ redisVersion }}</n-tag>
|
||||
<n-tag v-if="redisMode" type="primary" size="small">{{ redisMode }}</n-tag>
|
||||
<n-tag v-if="role" type="primary" size="small">{{ role }}</n-tag>
|
||||
</n-space>
|
||||
</template>
|
||||
<template #header-extra>
|
||||
<n-space inline size="small">
|
||||
{{ $t('auto_refresh') }}
|
||||
<n-switch :value="props.autoRefresh" @update:value="(v) => emit('update:autoRefresh', v)" />
|
||||
</n-space>
|
||||
</template>
|
||||
<n-grid x-gap="5" style="min-width: 500px">
|
||||
<n-gi :span="6">
|
||||
<n-statistic :label="$t('uptime')" :value="uptime[0]">
|
||||
<template #suffix> {{ $t(uptime[1]) }}</template>
|
||||
</n-statistic>
|
||||
</n-gi>
|
||||
<n-gi :span="6">
|
||||
<n-statistic :label="$t('connected_clients')" :value="get(props.info, 'connected_clients', 0)" />
|
||||
</n-gi>
|
||||
<n-gi :span="6">
|
||||
<n-statistic :value="totalKeys">
|
||||
<template #label>{{ $t('total_keys') }} <n-icon :component="Help" /></template>
|
||||
</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-scrollbar>
|
||||
<n-space vertical>
|
||||
<n-card :theme-override1s="{ paddingMedium: '10px 20px 10px' }">
|
||||
<template #header>
|
||||
{{ props.server }}
|
||||
<n-space inline size="small">
|
||||
<n-tag v-if="redisVersion" type="primary" size="small">v{{ redisVersion }}</n-tag>
|
||||
<n-tag v-if="redisMode" type="primary" size="small">{{ redisMode }}</n-tag>
|
||||
<n-tag v-if="role" type="primary" size="small">{{ role }}</n-tag>
|
||||
</n-space>
|
||||
</template>
|
||||
<template #header-extra>
|
||||
<n-space inline size="small">
|
||||
{{ $t('auto_refresh') }}
|
||||
<n-switch :value="props.autoRefresh" @update:value="(v) => emit('update:autoRefresh', v)" />
|
||||
</n-space>
|
||||
</template>
|
||||
<n-grid x-gap="5" style="min-width: 500px">
|
||||
<n-gi :span="6">
|
||||
<n-statistic :label="$t('uptime')" :value="uptime[0]">
|
||||
<template #suffix> {{ $t(uptime[1]) }}</template>
|
||||
</n-statistic>
|
||||
</n-gi>
|
||||
<n-gi :span="6">
|
||||
<n-statistic
|
||||
:label="$t('connected_clients')"
|
||||
:value="get(props.info, 'connected_clients', 0)"
|
||||
/>
|
||||
</n-gi>
|
||||
<n-gi :span="6">
|
||||
<n-statistic :value="totalKeys">
|
||||
<template #label
|
||||
>{{ $t('total_keys') }}
|
||||
<n-icon :component="Help" />
|
||||
</template>
|
||||
</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>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ const selectedKeys = ref([])
|
|||
|
||||
watch(selectedKeys, () => {
|
||||
const key = selectedKeys.value[0]
|
||||
// try remove group name
|
||||
// try to remove group name
|
||||
const kparts = split(key, '/')
|
||||
const len = size(kparts)
|
||||
if (len > 1) {
|
||||
|
|
|
|||
|
|
@ -141,5 +141,6 @@
|
|||
"memory_used": "Memory",
|
||||
"unit_day": "D",
|
||||
"unit_hour": "H",
|
||||
"unit_minute": "M"
|
||||
"unit_minute": "M",
|
||||
"all_info": "All Info"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -144,5 +144,6 @@
|
|||
"memory_used": "内存使用",
|
||||
"unit_day": "天",
|
||||
"unit_hour": "小时",
|
||||
"unit_minute": "分钟"
|
||||
"unit_minute": "分钟",
|
||||
"all_info": "所有信息"
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue