缓存监控
This commit is contained in:
parent
cef8b4a5a1
commit
48b122a348
50
src/views/monitor/cache/gaugeBox.vue
vendored
Normal file
50
src/views/monitor/cache/gaugeBox.vue
vendored
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
<template>
|
||||||
|
<div ref="chartRef" :style="{ height, width }"></div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { onMounted, PropType, ref, Ref } from 'vue';
|
||||||
|
import { useECharts } from '@/hooks/web/useECharts';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
width: {
|
||||||
|
type: String as PropType<string>,
|
||||||
|
default: '100%',
|
||||||
|
},
|
||||||
|
height: {
|
||||||
|
type: String as PropType<string>,
|
||||||
|
default: '300px',
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const chartRef = ref<HTMLDivElement | null>(null);
|
||||||
|
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
|
||||||
|
|
||||||
|
const option = {
|
||||||
|
tooltip: {
|
||||||
|
formatter: '{a} <br/>{b} : {c}%',
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: 'Pressure',
|
||||||
|
type: 'gauge',
|
||||||
|
radius: '100%',
|
||||||
|
detail: {
|
||||||
|
formatter: '{value}'+'M',
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: props.data,
|
||||||
|
name: '内存消耗',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
setOptions(option as any);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
88
src/views/monitor/cache/index.vue
vendored
Normal file
88
src/views/monitor/cache/index.vue
vendored
Normal file
@ -0,0 +1,88 @@
|
|||||||
|
<template>
|
||||||
|
<PageWrapper>
|
||||||
|
<el-card :bordered="false" header="基本信息" style="margin-bottom:20px;">
|
||||||
|
<el-table :data="tabledata" :show-header="false">
|
||||||
|
<el-table-column width="150" align="center">Redis版本</el-table-column>
|
||||||
|
<el-table-column>{{ baseInfo.redis_version }}</el-table-column>
|
||||||
|
<el-table-column width="150" align="center">运行模式</el-table-column>
|
||||||
|
<el-table-column align="center">{{ baseInfo.redis_mode == 'standalone' ? '单机' : '集群' }}</el-table-column>
|
||||||
|
<el-table-column width="150" align="center">端口</el-table-column>
|
||||||
|
<el-table-column>{{ baseInfo.tcp_port }}</el-table-column>
|
||||||
|
<el-table-column width="150" align="center">客户端数</el-table-column>
|
||||||
|
<el-table-column align="center">{{ baseInfo.connected_clients }}</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<el-table :data="tabledata" :show-header="false">
|
||||||
|
<el-table-column width="150" align="center">运行时间(天)</el-table-column>
|
||||||
|
<el-table-column>{{ baseInfo.uptime_in_days }}</el-table-column>
|
||||||
|
<el-table-column width="150" align="center">使用内存</el-table-column>
|
||||||
|
<el-table-column align="center">{{ baseInfo.used_memory_human }}</el-table-column>
|
||||||
|
<el-table-column width="150" align="center">使用CUP</el-table-column>
|
||||||
|
<el-table-column>{{ baseInfo.used_cpu_user_children }}</el-table-column>
|
||||||
|
<el-table-column width="150" align="center">内存配置</el-table-column>
|
||||||
|
<el-table-column align="center">{{ baseInfo.maxmemory_human }}</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<el-table :data="tabledata" :show-header="false">
|
||||||
|
<el-table-column width="150" align="center">AOF是否开启</el-table-column>
|
||||||
|
<el-table-column>{{ baseInfo.aof_enabled == 0 ? '开启' : '关闭' }}</el-table-column>
|
||||||
|
<el-table-column width="150" align="center">RDB是否成功</el-table-column>
|
||||||
|
<el-table-column align="center">{{ baseInfo.aof_enabled == 'ok' ? '成功' : '失败' }}</el-table-column>
|
||||||
|
<el-table-column width="150" align="center">key数量</el-table-column>
|
||||||
|
<el-table-column>{{ baseInfo.dbSize }}</el-table-column>
|
||||||
|
<el-table-column width="150" align="center">网络入口/出口</el-table-column>
|
||||||
|
<el-table-column align="center">
|
||||||
|
{{ baseInfo.instantaneous_input_kbps }}
|
||||||
|
/
|
||||||
|
{{ baseInfo.instantaneous_output_kbps }}</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</el-card>
|
||||||
|
<div class="cache-box">
|
||||||
|
<el-card :bordered="false" header="命令统计">
|
||||||
|
<pie-box :pieData="commandStats" v-if="commandStats.length > 0" />
|
||||||
|
</el-card>
|
||||||
|
<el-card :bordered="false" header="内存信息">
|
||||||
|
<gauge-box :data="gaugeValue" v-if="gaugeValue"/>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</PageWrapper>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, onMounted} from 'vue';
|
||||||
|
import { getCacheInfo } from '@/api/monitor/cache';
|
||||||
|
import pieBox from './pieBox.vue';
|
||||||
|
import gaugeBox from './gaugeBox.vue';
|
||||||
|
const tabledata = ref([{}])
|
||||||
|
const baseInfo = ref<any>({});
|
||||||
|
const commandStats = ref([])
|
||||||
|
const gaugeValue = ref('')
|
||||||
|
const loadCacheInfo = async () => {
|
||||||
|
const result = await getCacheInfo();
|
||||||
|
commandStats.value = result.commandStats
|
||||||
|
baseInfo.value = result.info
|
||||||
|
baseInfo.value.dbSize = result.dbSize;
|
||||||
|
gaugeValue.value = (result.info.used_memory / 1024 / 1024).toFixed(2);
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
loadCacheInfo()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.cache-box {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
>.el-card {
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
&:nth-child(2) {
|
||||||
|
margin: 0 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
43
src/views/monitor/cache/pieBox.vue
vendored
Normal file
43
src/views/monitor/cache/pieBox.vue
vendored
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
<template>
|
||||||
|
<div ref="chartRef" :style="{ height, width }"></div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { onMounted, PropType, ref, Ref } from 'vue';
|
||||||
|
import { useECharts } from '@/hooks/web/useECharts';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
width: {
|
||||||
|
type: String as PropType<string>,
|
||||||
|
default: '100%',
|
||||||
|
},
|
||||||
|
height: {
|
||||||
|
type: String as PropType<string>,
|
||||||
|
default: '300px',
|
||||||
|
},
|
||||||
|
pieData:{
|
||||||
|
type:Array,
|
||||||
|
default:[]
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const chartRef = ref<HTMLDivElement | null>(null);
|
||||||
|
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
|
||||||
|
const option = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item'
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'pie',
|
||||||
|
data: props.pieData,
|
||||||
|
itemStyle: {
|
||||||
|
borderColor: '#fff',
|
||||||
|
borderWidth: 2,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
setOptions(option as any);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
Loading…
Reference in New Issue
Block a user