TRKJ/mayfly-go
2
0
Fork 0
mirror of https://gitee.com/dromara/mayfly-go synced 2025-11-04 00:10:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

!27 redis监控信息面板重构

Browse Source 
Merge pull request !27 from zongyangleo/dev_20221216
This commit is contained in:
Coder慌
2022-12-16 03:17:50 +00:00
committed by Gitee
parent 0e1bde09c3 9886ee6828
commit 4e64d46cd2
2 changed files with 210 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

347
mayfly_go_web/src/views/ops/redis/Info.vue
View File

@@ -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>

2
mayfly_go_web/src/views/ops/redis/RedisList.vue
View File

@@ -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;
}; };