feat: 新增 ele infra redis 监控模块
puhui999
parent
2e95c591bf
commit
a597f80b23
|
|
@ -0,0 +1,54 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import type { InfraRedisApi } from '#/api/infra/redis';
|
||||||
|
|
||||||
|
import { onMounted, ref } from 'vue';
|
||||||
|
|
||||||
|
import { Page } from '@vben/common-ui';
|
||||||
|
|
||||||
|
import { ElCard } from 'element-plus';
|
||||||
|
|
||||||
|
import { getRedisMonitorInfo } from '#/api/infra/redis';
|
||||||
|
import { DocAlert } from '#/components/doc-alert';
|
||||||
|
|
||||||
|
import Commands from './modules/commands.vue';
|
||||||
|
import Info from './modules/info.vue';
|
||||||
|
import Memory from './modules/memory.vue';
|
||||||
|
|
||||||
|
const redisData = ref<InfraRedisApi.RedisMonitorInfo>();
|
||||||
|
|
||||||
|
/** 统一加载 Redis 数据 */
|
||||||
|
const loadRedisData = async () => {
|
||||||
|
try {
|
||||||
|
redisData.value = await getRedisMonitorInfo();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('加载 Redis 数据失败', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
loadRedisData();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Page auto-content-height>
|
||||||
|
<template #doc>
|
||||||
|
<DocAlert title="Redis 缓存" url="https://doc.iocoder.cn/redis-cache/" />
|
||||||
|
<DocAlert title="本地缓存" url="https://doc.iocoder.cn/local-cache/" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<ElCard class="mt-5" header="Redis 概览">
|
||||||
|
<Info :redis-data="redisData" />
|
||||||
|
</ElCard>
|
||||||
|
|
||||||
|
<div class="mt-5 grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||||
|
<ElCard header="内存使用">
|
||||||
|
<Memory :redis-data="redisData" />
|
||||||
|
</ElCard>
|
||||||
|
|
||||||
|
<ElCard header="命令统计">
|
||||||
|
<Commands :redis-data="redisData" />
|
||||||
|
</ElCard>
|
||||||
|
</div>
|
||||||
|
</Page>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,103 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import type { EchartsUIType } from '@vben/plugins/echarts';
|
||||||
|
|
||||||
|
import type { InfraRedisApi } from '#/api/infra/redis';
|
||||||
|
|
||||||
|
import { onMounted, ref, watch } from 'vue';
|
||||||
|
|
||||||
|
import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
redisData?: InfraRedisApi.RedisMonitorInfo;
|
||||||
|
}>();
|
||||||
|
|
||||||
|
const chartRef = ref<EchartsUIType>();
|
||||||
|
const { renderEcharts } = useEcharts(chartRef);
|
||||||
|
|
||||||
|
/** 渲染命令统计图表 */
|
||||||
|
const renderCommandStats = () => {
|
||||||
|
if (!props.redisData?.commandStats) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理数据
|
||||||
|
const commandStats = [] as any[];
|
||||||
|
const nameList = [] as string[];
|
||||||
|
props.redisData.commandStats.forEach((row) => {
|
||||||
|
commandStats.push({
|
||||||
|
name: row.command,
|
||||||
|
value: row.calls,
|
||||||
|
});
|
||||||
|
nameList.push(row.command);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 渲染图表
|
||||||
|
renderEcharts({
|
||||||
|
title: {
|
||||||
|
text: '命令统计',
|
||||||
|
left: 'center',
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
formatter: '{a} <br/>{b} : {c} ({d}%)',
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
type: 'scroll',
|
||||||
|
orient: 'vertical',
|
||||||
|
right: 30,
|
||||||
|
top: 10,
|
||||||
|
bottom: 20,
|
||||||
|
data: nameList,
|
||||||
|
textStyle: {
|
||||||
|
color: '#a1a1a1',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '命令',
|
||||||
|
type: 'pie',
|
||||||
|
radius: [20, 120],
|
||||||
|
center: ['40%', '60%'],
|
||||||
|
data: commandStats,
|
||||||
|
roseType: 'radius',
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
shadowBlur: 10,
|
||||||
|
shadowOffsetX: 0,
|
||||||
|
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 监听数据变化，重新渲染图表 */
|
||||||
|
watch(
|
||||||
|
() => props.redisData,
|
||||||
|
(newVal) => {
|
||||||
|
if (newVal) {
|
||||||
|
renderCommandStats();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ deep: true },
|
||||||
|
);
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
if (props.redisData) {
|
||||||
|
renderCommandStats();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<EchartsUI ref="chartRef" height="420px" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,55 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import type { InfraRedisApi } from '#/api/infra/redis';
|
||||||
|
|
||||||
|
import { ElDescriptions, ElDescriptionsItem } from 'element-plus';
|
||||||
|
|
||||||
|
defineProps<{
|
||||||
|
redisData?: InfraRedisApi.RedisMonitorInfo;
|
||||||
|
}>();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<ElDescriptions :column="6" border size="default" :label-width="138">
|
||||||
|
<ElDescriptionsItem label="Redis 版本">
|
||||||
|
{{ redisData?.info?.redis_version }}
|
||||||
|
</ElDescriptionsItem>
|
||||||
|
<ElDescriptionsItem label="运行模式">
|
||||||
|
{{ redisData?.info?.redis_mode === 'standalone' ? '单机' : '集群' }}
|
||||||
|
</ElDescriptionsItem>
|
||||||
|
<ElDescriptionsItem label="端口">
|
||||||
|
{{ redisData?.info?.tcp_port }}
|
||||||
|
</ElDescriptionsItem>
|
||||||
|
<ElDescriptionsItem label="客户端数">
|
||||||
|
{{ redisData?.info?.connected_clients }}
|
||||||
|
</ElDescriptionsItem>
|
||||||
|
<ElDescriptionsItem label="运行时间(天)">
|
||||||
|
{{ redisData?.info?.uptime_in_days }}
|
||||||
|
</ElDescriptionsItem>
|
||||||
|
<ElDescriptionsItem label="使用内存">
|
||||||
|
{{ redisData?.info?.used_memory_human }}
|
||||||
|
</ElDescriptionsItem>
|
||||||
|
<ElDescriptionsItem label="使用 CPU">
|
||||||
|
{{
|
||||||
|
redisData?.info
|
||||||
|
? parseFloat(redisData?.info?.used_cpu_user_children).toFixed(2)
|
||||||
|
: ''
|
||||||
|
}}
|
||||||
|
</ElDescriptionsItem>
|
||||||
|
<ElDescriptionsItem label="内存配置">
|
||||||
|
{{ redisData?.info?.maxmemory_human }}
|
||||||
|
</ElDescriptionsItem>
|
||||||
|
<ElDescriptionsItem label="AOF 是否开启">
|
||||||
|
{{ redisData?.info?.aof_enabled === '0' ? '否' : '是' }}
|
||||||
|
</ElDescriptionsItem>
|
||||||
|
<ElDescriptionsItem label="RDB 是否成功">
|
||||||
|
{{ redisData?.info?.rdb_last_bgsave_status }}
|
||||||
|
</ElDescriptionsItem>
|
||||||
|
<ElDescriptionsItem label="Key 数量">
|
||||||
|
{{ redisData?.dbSize }}
|
||||||
|
</ElDescriptionsItem>
|
||||||
|
<ElDescriptionsItem label="网络入口/出口">
|
||||||
|
{{ redisData?.info?.instantaneous_input_kbps }}kps /
|
||||||
|
{{ redisData?.info?.instantaneous_output_kbps }}kps
|
||||||
|
</ElDescriptionsItem>
|
||||||
|
</ElDescriptions>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,137 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import type { EchartsUIType } from '@vben/plugins/echarts';
|
||||||
|
|
||||||
|
import type { InfraRedisApi } from '#/api/infra/redis';
|
||||||
|
|
||||||
|
import { onMounted, ref, watch } from 'vue';
|
||||||
|
|
||||||
|
import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
redisData?: InfraRedisApi.RedisMonitorInfo;
|
||||||
|
}>();
|
||||||
|
|
||||||
|
const chartRef = ref<EchartsUIType>();
|
||||||
|
const { renderEcharts } = useEcharts(chartRef);
|
||||||
|
|
||||||
|
/** 解析内存值，移除单位，转为数字 */
|
||||||
|
const parseMemoryValue = (memStr: string | undefined): number => {
|
||||||
|
if (!memStr) {
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
// 从字符串中提取数字部分，例如 "1.2M" 中的 1.2
|
||||||
|
const str = String(memStr); // 显式转换为字符串类型
|
||||||
|
const match = str.match(/^([\d.]+)/);
|
||||||
|
return match ? Number.parseFloat(match[1] as string) : 0;
|
||||||
|
} catch {
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 渲染内存使用图表 */
|
||||||
|
const renderMemoryChart = () => {
|
||||||
|
if (!props.redisData?.info) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理数据
|
||||||
|
const usedMemory = props.redisData.info.used_memory_human || '0';
|
||||||
|
const memoryValue = parseMemoryValue(usedMemory);
|
||||||
|
|
||||||
|
// 渲染图表
|
||||||
|
renderEcharts({
|
||||||
|
title: {
|
||||||
|
text: '内存使用情况',
|
||||||
|
left: 'center',
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
formatter: `{b} <br/>{a} : ${usedMemory}`,
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '峰值',
|
||||||
|
type: 'gauge',
|
||||||
|
min: 0,
|
||||||
|
max: 100,
|
||||||
|
splitNumber: 10,
|
||||||
|
color: '#F5C74E',
|
||||||
|
radius: '85%',
|
||||||
|
center: ['50%', '50%'],
|
||||||
|
startAngle: 225,
|
||||||
|
endAngle: -45,
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: [
|
||||||
|
[0.2, '#7FFF00'],
|
||||||
|
[0.8, '#00FFFF'],
|
||||||
|
[1, '#FF0000'],
|
||||||
|
],
|
||||||
|
width: 10,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
length: 5,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#76D9D7',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
length: 20,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#76D9D7',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: '#76D9D7',
|
||||||
|
distance: 15,
|
||||||
|
fontSize: 15,
|
||||||
|
},
|
||||||
|
pointer: {
|
||||||
|
width: 7,
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
|
detail: {
|
||||||
|
show: true,
|
||||||
|
offsetCenter: [0, '50%'],
|
||||||
|
color: 'auto',
|
||||||
|
fontSize: 30,
|
||||||
|
formatter: usedMemory,
|
||||||
|
},
|
||||||
|
progress: {
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: memoryValue,
|
||||||
|
name: '内存消耗',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 监听数据变化，重新渲染图表 */
|
||||||
|
watch(
|
||||||
|
() => props.redisData,
|
||||||
|
(newVal) => {
|
||||||
|
if (newVal) {
|
||||||
|
renderMemoryChart();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ deep: true },
|
||||||
|
);
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
if (props.redisData) {
|
||||||
|
renderMemoryChart();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<EchartsUI ref="chartRef" height="420px" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
Loading…
Reference in New Issue