refactor: 使用原生组件重构redis-info
This commit is contained in:
parent
354ff7ecf6
commit
75d7a607f5
@ -1,96 +1,58 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { RedisInfo } from '#/api/monitor/cache';
|
import type { RedisInfo } from '#/api/monitor/cache';
|
||||||
import type { DescItem } from '#/components/description';
|
|
||||||
|
|
||||||
import { onMounted, watch } from 'vue';
|
import { Descriptions, DescriptionsItem } from 'ant-design-vue';
|
||||||
|
|
||||||
import { Description, useDescription } from '#/components/description';
|
|
||||||
|
|
||||||
interface IRedisInfo extends RedisInfo {
|
interface IRedisInfo extends RedisInfo {
|
||||||
dbSize: string;
|
dbSize: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
const props = defineProps<{ data: IRedisInfo }>();
|
defineProps<{ data: IRedisInfo }>();
|
||||||
|
|
||||||
const descSchemas: DescItem[] = [
|
|
||||||
{ field: 'redis_version', label: 'redis版本' },
|
|
||||||
{
|
|
||||||
field: 'redis_mode',
|
|
||||||
label: 'redis模式',
|
|
||||||
render(value) {
|
|
||||||
return value === 'standalone' ? '单机模式' : '集群模式';
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
field: 'tcp_port',
|
|
||||||
label: 'tcp端口',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
field: 'connected_clients',
|
|
||||||
label: '客户端数',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
field: 'uptime_in_days',
|
|
||||||
label: '运行时间',
|
|
||||||
render(value) {
|
|
||||||
return `${value}天`;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
field: 'used_memory_human',
|
|
||||||
label: '使用内存',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
field: 'used_cpu_user_children',
|
|
||||||
label: '使用CPU',
|
|
||||||
render(value) {
|
|
||||||
return Number.parseFloat(value).toFixed(2);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
field: 'maxmemory_human',
|
|
||||||
label: '内存配置',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
field: 'aof_enabled',
|
|
||||||
label: 'AOF是否开启',
|
|
||||||
render(value) {
|
|
||||||
return value === '0' ? '否' : '是';
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
field: 'rdb_last_bgsave_status',
|
|
||||||
label: 'RDB是否成功',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
field: 'dbSize',
|
|
||||||
label: 'Key数量',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
field: 'instantaneous_input_kbps',
|
|
||||||
label: '网络入口/出口',
|
|
||||||
render(_, data) {
|
|
||||||
const { instantaneous_input_kbps, instantaneous_output_kbps } = data;
|
|
||||||
return `${instantaneous_input_kbps}kps/${instantaneous_output_kbps}kps`;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const [registerDescription, { setDescProps }] = useDescription({
|
|
||||||
column: { lg: 4, md: 3, sm: 1, xl: 4, xs: 1 },
|
|
||||||
schema: descSchemas,
|
|
||||||
});
|
|
||||||
|
|
||||||
onMounted(() => setDescProps({ data: props.data }));
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => props.data,
|
|
||||||
(data) => {
|
|
||||||
setDescProps({ data });
|
|
||||||
},
|
|
||||||
);
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<Description @register="registerDescription" />
|
<Descriptions
|
||||||
|
bordered
|
||||||
|
:column="{ lg: 4, md: 3, sm: 1, xl: 4, xs: 1 }"
|
||||||
|
size="small"
|
||||||
|
>
|
||||||
|
<DescriptionsItem label="redis版本">
|
||||||
|
{{ data.redis_version }}
|
||||||
|
</DescriptionsItem>
|
||||||
|
<DescriptionsItem label="redis模式">
|
||||||
|
{{ data.redis_mode === 'standalone' ? '单机模式' : '集群模式' }}
|
||||||
|
</DescriptionsItem>
|
||||||
|
<DescriptionsItem label="tcp端口">
|
||||||
|
{{ data.tcp_port }}
|
||||||
|
</DescriptionsItem>
|
||||||
|
<DescriptionsItem label="客户端数">
|
||||||
|
{{ data.connected_clients }}
|
||||||
|
</DescriptionsItem>
|
||||||
|
<DescriptionsItem label="运行时间">
|
||||||
|
{{ data.uptime_in_days }} 天
|
||||||
|
</DescriptionsItem>
|
||||||
|
<DescriptionsItem label="使用内存">
|
||||||
|
{{ data.used_memory_human }}
|
||||||
|
</DescriptionsItem>
|
||||||
|
<DescriptionsItem label="使用CPU">
|
||||||
|
{{ Number.parseFloat(data?.used_cpu_user_children ?? '0').toFixed(2) }}
|
||||||
|
</DescriptionsItem>
|
||||||
|
<DescriptionsItem label="内存配置">
|
||||||
|
{{ data.maxmemory_human }}
|
||||||
|
</DescriptionsItem>
|
||||||
|
<DescriptionsItem label="AOF是否开启">
|
||||||
|
{{ data.aof_enabled === '0' ? '否' : '是' }}
|
||||||
|
</DescriptionsItem>
|
||||||
|
<DescriptionsItem label="RDB是否成功">
|
||||||
|
{{ data.rdb_last_bgsave_status }}
|
||||||
|
</DescriptionsItem>
|
||||||
|
<DescriptionsItem label="key数量">
|
||||||
|
{{ data.dbSize }}
|
||||||
|
</DescriptionsItem>
|
||||||
|
<DescriptionsItem label="网络入口/出口">
|
||||||
|
{{
|
||||||
|
`${data.instantaneous_input_kbps}kps/${data.instantaneous_output_kbps}kps`
|
||||||
|
}}
|
||||||
|
</DescriptionsItem>
|
||||||
|
</Descriptions>
|
||||||
</template>
|
</template>
|
||||||
|
Loading…
Reference in New Issue
Block a user