mirror of
https://gitee.com/dromara/mayfly-go
synced 2025-11-04 00:10:25 +08:00
redis监控信息面板重构
This commit is contained in:
刘宗洋
@@ -1,152 +1,123 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<el-dialog :title="title" v-model="dialogVisible" :show-close="true" width="35%" @close="close()">
|
<el-dialog :title="title" v-model="dialogVisible" :show-close="true" width="80%" @close="close()">
|
||||||
<el-collapse>
|
|
||||||
<el-collapse-item title="Server(Redis服务器的一般信息)" name="server">
|
|
||||||
<div class="row">
|
|
||||||
<span class="title">redis_version(版本):</span>
|
|
||||||
<span class="value">{{ info.Server.redis_version }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<span class="title">tcp_port(端口):</span>
|
|
||||||
<span class="value">{{ info.Server.tcp_port }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<span class="title">redis_mode(模式):</span>
|
|
||||||
<span class="value">{{ info.Server.redis_mode }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<span class="title">os(宿主操作系统):</span>
|
|
||||||
<span class="value">{{ info.Server.os }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<span class="title">uptime_in_days(运行天数):</span>
|
|
||||||
<span class="value">{{ info.Server.uptime_in_days }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<span class="title">executable(可执行文件路径):</span>
|
|
||||||
<span class="value">{{ info.Server.executable }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<span class="title">config_file(配置文件路径):</span>
|
|
||||||
<span class="value">{{ info.Server.config_file }}</span>
|
|
||||||
</div>
|
|
||||||
</el-collapse-item>
|
|
||||||
|
|
||||||
<el-collapse-item title="Clients(客户端连接)" name="client">
|
<el-row :gutter="20">
|
||||||
<div class="row">
|
<el-col :lg="12" :md="12">
|
||||||
<span class="title">connected_clients(已连接客户端数):</span>
|
<el-descriptions
|
||||||
<span class="value">{{ info.Clients.connected_clients }}</span>
|
class="redis-info info-server"
|
||||||
</div>
|
title="Redis服务器信息"
|
||||||
<div class="row">
|
:column="3"
|
||||||
<span class="title">blocked_clients(正在等待阻塞命令客户端数):</span>
|
size="small"
|
||||||
<span class="value">{{ info.Clients.blocked_clients }}</span>
|
border
|
||||||
</div>
|
>
|
||||||
</el-collapse-item>
|
<el-descriptions-item label="版本">{{ info.Server.redis_version }}</el-descriptions-item>
|
||||||
<el-collapse-item title="Keyspace(key信息)" name="keyspace">
|
<el-descriptions-item label="端口">{{ info.Server.tcp_port }}</el-descriptions-item>
|
||||||
<div class="row" v-for="(value, key) in info.Keyspace" :key="key">
|
<el-descriptions-item label="PID">{{ info.Server.process_id }}</el-descriptions-item>
|
||||||
<span class="title">{{ key }}: </span>
|
<el-descriptions-item label="模式">{{ info.Server.redis_mode }}</el-descriptions-item>
|
||||||
<span class="value">{{ value }}</span>
|
<el-descriptions-item label="操作系统">{{ info.Server.os }}</el-descriptions-item>
|
||||||
</div>
|
<el-descriptions-item label="运行天数">{{ info.Server.uptime_in_days }}</el-descriptions-item>
|
||||||
</el-collapse-item>
|
<el-descriptions-item label="可执行文件路径">{{ info.Server.executable }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="配置文件路径">{{ info.Server.config_file }}</el-descriptions-item>
|
||||||
|
</el-descriptions>
|
||||||
|
</el-col>
|
||||||
|
<el-col :lg="12" :md="12" class="redis-info">
|
||||||
|
<div class="info-memory-chart" ref="memRef"></div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
<el-collapse-item title="Stats(统计)" name="state">
|
<el-row :gutter="20">
|
||||||
<div class="row">
|
<el-col :lg="12" :md="12">
|
||||||
<span class="title">total_commands_processed(总处理命令数):</span>
|
<el-descriptions
|
||||||
<span class="value">{{ info.Stats.total_commands_processed }}</span>
|
class="redis-info info-cluster"
|
||||||
</div>
|
title="节点信息"
|
||||||
<div class="row">
|
:column="3"
|
||||||
<span class="title">instantaneous_ops_per_sec(当前qps):</span>
|
size="small"
|
||||||
<span class="value">{{ info.Stats.instantaneous_ops_per_sec }}</span>
|
border
|
||||||
</div>
|
>
|
||||||
<div class="row">
|
<el-descriptions-item label="是否启用集群模式">{{ info.Cluster.cluster_enabled }}</el-descriptions-item>
|
||||||
<span class="title">total_net_input_bytes(网络入口流量字节数):</span>
|
<el-descriptions-item label="DB总数">{{ info.Cluster.databases }}</el-descriptions-item>
|
||||||
<span class="value">{{ info.Stats.total_net_input_bytes }}</span>
|
<el-descriptions-item label="节点总数">{{ info.Cluster.nodecount }}</el-descriptions-item>
|
||||||
</div>
|
</el-descriptions>
|
||||||
<div class="row">
|
</el-col>
|
||||||
<span class="title">total_net_output_bytes(网络出口流量字节数):</span>
|
|
||||||
<span class="value">{{ info.Stats.total_net_output_bytes }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<span class="title">expired_keys(过期key的总数量):</span>
|
|
||||||
<span class="value">{{ info.Stats.expired_keys }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<span class="title">instantaneous_ops_per_sec(当前qps):</span>
|
|
||||||
<span class="value">{{ info.Stats.instantaneous_ops_per_sec }}</span>
|
|
||||||
</div>
|
|
||||||
</el-collapse-item>
|
|
||||||
|
|
||||||
<el-collapse-item title="Persistence(持久化)" name="persistence">
|
<el-col :lg="12" :md="12">
|
||||||
<div class="row">
|
<el-descriptions
|
||||||
<span class="title">aof_enabled(是否启用aof):</span>
|
class="redis-info info-client"
|
||||||
<span class="value">{{ info.Persistence.aof_enabled }}</span>
|
title="客户端连接"
|
||||||
</div>
|
:column="3"
|
||||||
<div class="row">
|
size="small"
|
||||||
<span class="title">loading(是否正在载入持久化文件):</span>
|
border
|
||||||
<span class="value">{{ info.Persistence.loading }}</span>
|
>
|
||||||
</div>
|
<el-descriptions-item label="已连接客户端数">{{ info.Clients.connected_clients }}</el-descriptions-item>
|
||||||
</el-collapse-item>
|
<el-descriptions-item label="正在等待阻塞命令客户端数">{{ info.Clients.blocked_clients }}</el-descriptions-item>
|
||||||
|
</el-descriptions>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
<el-collapse-item title="Cluster(集群)" name="cluster">
|
<el-descriptions
|
||||||
<div class="row">
|
class="redis-info info-memory"
|
||||||
<span class="title">cluster_enabled(是否启用集群模式):</span>
|
title="CPU"
|
||||||
<span class="value">{{ info.Cluster.cluster_enabled }}</span>
|
:column="2"
|
||||||
</div>
|
size="small"
|
||||||
</el-collapse-item>
|
border
|
||||||
|
>
|
||||||
|
<el-descriptions-item label="系统CPU">{{ info.CPU.used_cpu_sys }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="用户CPU">{{ info.CPU.used_cpu_user }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="后台系统CPU">{{ info.CPU.used_cpu_sys_children }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="后台用户CPU">{{ info.CPU.used_cpu_user_children }}</el-descriptions-item>
|
||||||
|
</el-descriptions>
|
||||||
|
|
||||||
<el-collapse-item title="Memory(内存消耗相关信息)" name="memory">
|
<el-row :gutter="20" class="redis-info">
|
||||||
<div class="row">
|
<el-col :lg="24" :md="24">
|
||||||
<span class="title">used_memory(分配内存总量):</span>
|
<span style="font-size: 14px; font-weight: 700">键值统计</span>
|
||||||
<span class="value">{{ info.Memory.used_memory_human }}</span>
|
<el-table :data="Keyspace" stripe max-height="250" style="width: 100%" border>
|
||||||
</div>
|
<el-table-column prop="db" label="数据库" min-width="100" show-overflow-tooltip>
|
||||||
<div class="row">
|
</el-table-column>
|
||||||
<span class="title">maxmemory(最大内存配置):</span>
|
<el-table-column prop="keys" label="keys" min-width="70" show-overflow-tooltip>
|
||||||
<span class="value">{{ info.Memory.maxmemory }}</span>
|
</el-table-column>
|
||||||
</div>
|
<el-table-column prop="expires" label="expires" min-width="70" show-overflow-tooltip>
|
||||||
<div class="row">
|
</el-table-column>
|
||||||
<span class="title">used_memory_rss(已分配的内存总量，操作系统角度):</span>
|
<el-table-column prop="avg_ttl" label="avg_ttl" min-width="70" show-overflow-tooltip>
|
||||||
<span class="value">{{ info.Memory.used_memory_rss_human }}</span>
|
</el-table-column>
|
||||||
</div>
|
</el-table>
|
||||||
<div class="row">
|
</el-col>
|
||||||
<span class="title">mem_fragmentation_ratio(used_memory_rss和used_memory 之间的比率):</span>
|
</el-row>
|
||||||
<span class="value">{{ info.Memory.mem_fragmentation_ratio }}</span>
|
|
||||||
</div>
|
<el-descriptions
|
||||||
<div class="row">
|
class="redis-info info-state"
|
||||||
<span class="title">used_memory_peak(内存消耗峰值):</span>
|
title="统计信息"
|
||||||
<span class="value">{{ info.Memory.used_memory_peak_human }}</span>
|
:column="3"
|
||||||
</div>
|
size="small"
|
||||||
<div class="row">
|
border
|
||||||
<span class="title">total_system_memory(主机总内存):</span>
|
>
|
||||||
<span class="value">{{ info.Memory.total_system_memory_human }}</span>
|
<el-descriptions-item label="总处理命令数">{{ info.Stats.total_commands_processed }}</el-descriptions-item>
|
||||||
</div>
|
<el-descriptions-item label="当前qps">{{ info.Stats.instantaneous_ops_per_sec }}</el-descriptions-item>
|
||||||
</el-collapse-item>
|
<el-descriptions-item label="过期key的总数量">{{ info.Stats.expired_keys }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="网络入口流量字节数">{{ info.Stats.total_net_input_bytes }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="网络出口流量字节数">{{ info.Stats.total_net_output_bytes }}</el-descriptions-item>
|
||||||
|
</el-descriptions>
|
||||||
|
|
||||||
|
<el-descriptions
|
||||||
|
class="redis-info info-persistence"
|
||||||
|
title="持久化"
|
||||||
|
:column="3"
|
||||||
|
size="small"
|
||||||
|
border
|
||||||
|
>
|
||||||
|
<el-descriptions-item label="是否启用aof">{{ info.Persistence?.aof_enabled || false }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="是否正在载入持久化文件">{{ info.Persistence?.loading || false }}</el-descriptions-item>
|
||||||
|
</el-descriptions>
|
||||||
|
|
||||||
<el-collapse-item title="CPU" name="cpu">
|
|
||||||
<div class="row">
|
|
||||||
<span class="title">used_cpu_sys(由Redis服务器消耗的系统CPU):</span>
|
|
||||||
<span class="value">{{ info.CPU.used_cpu_sys }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<span class="title">used_cpu_user(由Redis服务器消耗的用户CPU):</span>
|
|
||||||
<span class="value">{{ info.CPU.used_cpu_user }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<span class="title">used_cpu_sys_children(由后台进程消耗的系统CPU):</span>
|
|
||||||
<span class="value">{{ info.CPU.used_cpu_sys_children }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<span class="title">used_cpu_user_children(由后台进程消耗的用户CPU):</span>
|
|
||||||
<span class="value">{{ info.CPU.used_cpu_user_children }}</span>
|
|
||||||
</div>
|
|
||||||
</el-collapse-item>
|
|
||||||
</el-collapse>
|
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { reactive, watch, toRefs } from 'vue';
|
import {reactive, watch, toRefs, ref, nextTick} from 'vue';
|
||||||
|
import {formatByteSize} from '@/common/utils/format';
|
||||||
|
import useEcharts from '@/common/echarts/useEcharts';
|
||||||
|
import tdTheme from '@/common/echarts/theme.json';
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
visible: {
|
visible: {
|
||||||
@@ -164,10 +135,17 @@ const emit = defineEmits(['update:visible', 'close'])
|
|||||||
|
|
||||||
const state = reactive({
|
const state = reactive({
|
||||||
dialogVisible: false,
|
dialogVisible: false,
|
||||||
|
memInfo: {} as any,
|
||||||
|
Keyspace: [] as any[],
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
let memChart: any = null;
|
||||||
|
let memRef = ref(null);
|
||||||
|
|
||||||
const {
|
const {
|
||||||
dialogVisible,
|
dialogVisible,
|
||||||
|
Keyspace,
|
||||||
} = toRefs(state)
|
} = toRefs(state)
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
@@ -176,6 +154,90 @@ watch(
|
|||||||
state.dialogVisible = val;
|
state.dialogVisible = val;
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
watch(
|
||||||
|
() => props.info,
|
||||||
|
(info: any) => {
|
||||||
|
state.memInfo = info['Memory'];
|
||||||
|
if (state.memInfo) {
|
||||||
|
initCharts();
|
||||||
|
}
|
||||||
|
if(info['Keyspace']){
|
||||||
|
let arr = [];
|
||||||
|
for(let k in info['Keyspace']){
|
||||||
|
let data = {db:k}
|
||||||
|
let d = info['Keyspace'][k].split(',')
|
||||||
|
debugger
|
||||||
|
for(let f of d){
|
||||||
|
let v = f.split('=')
|
||||||
|
data[v[0]] = v[1]
|
||||||
|
}
|
||||||
|
arr.push(data)
|
||||||
|
}
|
||||||
|
state.Keyspace = arr
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
const initCharts = () => {
|
||||||
|
nextTick(() => {
|
||||||
|
initMemStats();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const initMemStats = () => {
|
||||||
|
const data = [
|
||||||
|
{ name: '可用内存：', value: state.memInfo.maxmemory - state.memInfo.used_memory },
|
||||||
|
{
|
||||||
|
name: '已用内存：',
|
||||||
|
value: state.memInfo.used_memory,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
const option = {
|
||||||
|
title: {
|
||||||
|
text: '内存',
|
||||||
|
x: 'left',
|
||||||
|
textStyle: { fontSize: 14 },
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
valueFormatter: formatByteSize,
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
top: '15%',
|
||||||
|
orient: 'vertical',
|
||||||
|
left: 'left',
|
||||||
|
textStyle: { fontSize: 12 },
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '内存',
|
||||||
|
type: 'pie',
|
||||||
|
radius: ['30%', '60%'], // 饼图内圈和外圈大小
|
||||||
|
center: ['70%', '50%'], // 饼图位置，0: 左右；1: 上下
|
||||||
|
avoidLabelOverlap: false,
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
position: 'center',
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
label: {
|
||||||
|
fontSize: '15',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
data: data,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
if (memChart) {
|
||||||
|
memChart.setOption(option, true);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
memChart = useEcharts(memRef.value, tdTheme, option);
|
||||||
|
}
|
||||||
|
|
||||||
const close = () => {
|
const close = () => {
|
||||||
emit('update:visible', false);
|
emit('update:visible', false);
|
||||||
@@ -183,7 +245,16 @@ const close = () => {
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style lang="scss">
|
||||||
|
|
||||||
|
.redis-info{
|
||||||
|
margin-top: 12px;
|
||||||
|
.info-memory-chart{
|
||||||
|
width: 360px;
|
||||||
|
height: 150px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.row .title {
|
.row .title {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #8492a6;
|
color: #8492a6;
|
||||||
@@ -192,6 +263,6 @@ const close = () => {
|
|||||||
|
|
||||||
.row .value {
|
.row .value {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: black;
|
color: var(--el-color-success);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -258,7 +258,7 @@ const showInfoDialog = async (redis: any) => {
|
|||||||
}
|
}
|
||||||
const res = await redisApi.redisInfo.request({ id: redis.id, host });
|
const res = await redisApi.redisInfo.request({ id: redis.id, host });
|
||||||
state.infoDialog.info = res;
|
state.infoDialog.info = res;
|
||||||
state.infoDialog.title = `'${host}' info`;
|
state.infoDialog.title = `[${redis.name || host}] redis信息`;
|
||||||
state.infoDialog.visible = true;
|
state.infoDialog.visible = true;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user