mayfly-go/mayfly_go_web/src/views/ops/redis/Info.vue

<template>
    <div>
        <el-dialog :title="title" v-model="dialogVisible" :show-close="true" width="1000px" @close="close()">

            <el-row :gutter="20">
                <el-col :lg="16" :md="16">
                    <el-descriptions class="redis-info info-server" title="Redis服务器信息" :column="3" size="small" border>
                        <el-descriptions-item label="版本">{{ info.Server.redis_version }}</el-descriptions-item>
                        <el-descriptions-item label="端口">{{ info.Server.tcp_port }}</el-descriptions-item>
                        <el-descriptions-item label="PID">{{ info.Server.process_id }}</el-descriptions-item>
                        <el-descriptions-item label="模式">{{ info.Server.redis_mode }}</el-descriptions-item>
                        <el-descriptions-item label="操作系统">{{ info.Server.os }}</el-descriptions-item>
                        <el-descriptions-item label="运行天数">{{ info.Server.uptime_in_days }}</el-descriptions-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="8" :md="8" class="redis-info">
                    <div class="info-memory-chart" ref="memRef"></div>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :lg="12" :md="12">
                    <el-descriptions class="redis-info info-cluster" title="节点信息" :column="3" size="small" border>
                        <el-descriptions-item label="是否启用集群模式">{{ info.Cluster.cluster_enabled }}</el-descriptions-item>
                        <el-descriptions-item label="DB总数">{{ info.Cluster.databases }}</el-descriptions-item>
                        <el-descriptions-item label="节点总数">{{ info.Cluster.nodecount }}</el-descriptions-item>
                    </el-descriptions>
                </el-col>

                <el-col :lg="12" :md="12">
                    <el-descriptions class="redis-info info-client" title="客户端连接" :column="3" size="small" border>
                        <el-descriptions-item label="已连接客户端数">{{ info.Clients.connected_clients
                        }}</el-descriptions-item>
                        <el-descriptions-item label="正在等待阻塞命令客户端数">{{ info.Clients.blocked_clients
                        }}</el-descriptions-item>
                    </el-descriptions>
                </el-col>
            </el-row>

            <el-descriptions class="redis-info info-memory" title="CPU" :column="2" size="small" 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-row :gutter="20" class="redis-info">
                <el-col :lg="24" :md="24">
                    <span style="font-size: 14px; font-weight: 700">键值统计</span>
                    <el-table :data="Keyspace" stripe max-height="250" style="width: 100%" border>
                        <el-table-column prop="db" label="数据库" min-width="100" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="keys" label="keys" min-width="70" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="expires" label="expires" min-width="70" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="avg_ttl" label="avg_ttl" min-width="70" show-overflow-tooltip>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>

            <el-descriptions class="redis-info info-state" title="统计信息" :column="3" size="small" border>
                <el-descriptions-item label="总处理命令数">{{ info.Stats.total_commands_processed }}</el-descriptions-item>
                <el-descriptions-item label="当前qps">{{ info.Stats.instantaneous_ops_per_sec }}</el-descriptions-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-dialog>
    </div>
</template>

<script lang="ts" setup>
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({
    visible: {
        type: Boolean,
    },
    title: {
        type: String,
    },
    info: {
        type: [Boolean, Object],
    },
})

const emit = defineEmits(['update:visible', 'close'])

const state = reactive({
    dialogVisible: false,
    memInfo: {} as any,
    Keyspace: [] as any[],

});

let memChart: any = null;
let memRef = ref(null);

const {
    dialogVisible,
    Keyspace,
} = toRefs(state)

watch(
    () => props.visible,
    (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(',')
                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 = () => {
    let maxMem = state.memInfo.maxmemory === '0' ? state.memInfo.total_system_memory : state.memInfo.maxmemory
    const data = [
        { name: '可用内存：', value: maxMem - 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: ['40%', '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 = () => {
    emit('update:visible', false);
    emit('close');
};
</script>

<style lang="scss">
.redis-info {
    margin-top: 12px;

    .info-memory-chart {
        width: 360px;
        height: 150px;
    }
}

.row .title {
    font-size: 12px;
    color: #8492a6;
    margin-right: 6px;
}

.row .value {
    font-size: 12px;
    color: var(--el-color-success);
}
</style>