mirror of
https://gitee.com/log4j/pig-ui.git
synced 2024-12-22 04:57:10 +08:00
refactor(cache): 优化缓存监控页面
This commit is contained in:
冷冷
parent
137ce3d01b
commit
decad4f25d
5
auto-imports.d.ts
vendored
5
auto-imports.d.ts
vendored
@ -3,6 +3,7 @@
|
||||
// @ts-nocheck
|
||||
// noinspection JSUnusedGlobalSymbols
|
||||
// Generated by unplugin-auto-import
|
||||
// biome-ignore lint: disable
|
||||
export {}
|
||||
declare global {
|
||||
const EffectScope: typeof import('vue')['EffectScope']
|
||||
@ -46,6 +47,7 @@ declare global {
|
||||
const onServerPrefetch: typeof import('vue')['onServerPrefetch']
|
||||
const onUnmounted: typeof import('vue')['onUnmounted']
|
||||
const onUpdated: typeof import('vue')['onUpdated']
|
||||
const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
|
||||
const provide: typeof import('vue')['provide']
|
||||
const reactive: typeof import('vue')['reactive']
|
||||
const readonly: typeof import('vue')['readonly']
|
||||
@ -67,10 +69,13 @@ declare global {
|
||||
const useAttrs: typeof import('vue')['useAttrs']
|
||||
const useCssModule: typeof import('vue')['useCssModule']
|
||||
const useCssVars: typeof import('vue')['useCssVars']
|
||||
const useId: typeof import('vue')['useId']
|
||||
const useLink: typeof import('vue-router')['useLink']
|
||||
const useModel: typeof import('vue')['useModel']
|
||||
const useRoute: typeof import('vue-router')['useRoute']
|
||||
const useRouter: typeof import('vue-router')['useRouter']
|
||||
const useSlots: typeof import('vue')['useSlots']
|
||||
const useTemplateRef: typeof import('vue')['useTemplateRef']
|
||||
const watch: typeof import('vue')['watch']
|
||||
const watchEffect: typeof import('vue')['watchEffect']
|
||||
const watchPostEffect: typeof import('vue')['watchPostEffect']
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "pig-ui",
|
||||
"version": "3.8.0",
|
||||
"version": "3.8.1",
|
||||
"description": "PIGCLOUD微服务开发平台",
|
||||
"author": "pig4cloud",
|
||||
"license": "Apache-2.0",
|
||||
|
||||
@ -1,130 +1,188 @@
|
||||
<template>
|
||||
<div class="layout-padding cache">
|
||||
<el-card class="!border-none" shadow="never">
|
||||
<div>
|
||||
<div class="mb-4 lg">基本信息</div>
|
||||
|
||||
<div class="el-table--enable-row-transition el-table--large el-table">
|
||||
<el-scrollbar>
|
||||
<table class="el-table__body" cellspacing="0">
|
||||
<tbody>
|
||||
<tr class="el-table__row">
|
||||
<td class="el-table__cell">
|
||||
<div class="cell">Redis版本</div>
|
||||
</td>
|
||||
<td class="el-table__cell">
|
||||
<div class="cell">{{ baseInfo.redis_version }}</div>
|
||||
</td>
|
||||
<td class="el-table__cell">
|
||||
<div class="cell">运行模式</div>
|
||||
</td>
|
||||
<td class="el-table__cell">
|
||||
<div class="cell">
|
||||
{{ baseInfo.redis_mode == 'standalone' ? '单机' : '集群' }}
|
||||
</div>
|
||||
</td>
|
||||
<td class="el-table__cell">
|
||||
<div class="cell">端口</div>
|
||||
</td>
|
||||
<td class="el-table__cell">
|
||||
<div class="cell">{{ baseInfo.tcp_port }}</div>
|
||||
</td>
|
||||
<td class="el-table__cell">
|
||||
<div class="cell">客户端数</div>
|
||||
</td>
|
||||
<td class="el-table__cell">
|
||||
<div class="cell">{{ baseInfo.connected_clients }}</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="el-table__row">
|
||||
<td class="el-table__cell">
|
||||
<div class="cell">运行时间(天)</div>
|
||||
</td>
|
||||
<td class="el-table__cell">
|
||||
<div class="cell">{{ baseInfo.uptime_in_days }}</div>
|
||||
</td>
|
||||
<td class="el-table__cell">
|
||||
<div class="cell">使用内存</div>
|
||||
</td>
|
||||
<td class="el-table__cell">
|
||||
<div class="cell">
|
||||
{{ baseInfo.used_memory_human }}
|
||||
</div>
|
||||
</td>
|
||||
<td class="el-table__cell">
|
||||
<div class="cell">使用CPU</div>
|
||||
</td>
|
||||
<td class="el-table__cell">
|
||||
<div class="cell">
|
||||
{{ baseInfo.used_cpu_user_children }}
|
||||
</div>
|
||||
</td>
|
||||
<td class="el-table__cell">
|
||||
<div class="cell">内存配置</div>
|
||||
</td>
|
||||
<td class="el-table__cell">
|
||||
<div class="cell">{{ baseInfo.maxmemory_human }}</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="el-table__row">
|
||||
<td class="el-table__cell">
|
||||
<div class="cell">AOF是否开启</div>
|
||||
</td>
|
||||
<td class="el-table__cell">
|
||||
<div class="cell">
|
||||
{{ baseInfo.aof_enabled == 0 ? '开启' : '关闭' }}
|
||||
</div>
|
||||
</td>
|
||||
<td class="el-table__cell">
|
||||
<div class="cell">RDB是否成功</div>
|
||||
</td>
|
||||
<td class="el-table__cell">
|
||||
<div class="cell">
|
||||
{{ baseInfo.aof_enabled == 'ok' ? '成功' : '失败' }}
|
||||
</div>
|
||||
</td>
|
||||
<td class="el-table__cell">
|
||||
<div class="cell">Key数量</div>
|
||||
</td>
|
||||
<td class="el-table__cell">
|
||||
<div class="cell">{{ baseInfo.dbSize }}</div>
|
||||
</td>
|
||||
<td class="el-table__cell">
|
||||
<div class="cell">网络入口/出口</div>
|
||||
</td>
|
||||
<td class="el-table__cell">
|
||||
<div class="cell">
|
||||
{{ baseInfo.instantaneous_input_kbps }}
|
||||
/
|
||||
{{ baseInfo.instantaneous_output_kbps }}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</el-scrollbar>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<div
|
||||
class="p-4 min-w-[375px] md:min-w-[700px] xl:min-w-[800px] mt-3 grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-3 3xl:grid-cols-6">
|
||||
<div
|
||||
class="relative flex flex-grow !flex-row flex-col items-center rounded-[10px] border-[1px] border-gray-200 bg-blue-50 hover:scale-105 hover:shadow-lg bg-clip-border shadow-md shadow-[#F3F3F3] dark:border-[#ffffff33] dark:!bg-navy-800 dark:text-white dark:shadow-none">
|
||||
<div class="ml-[18px] flex h-[90px] w-auto flex-row items-center">
|
||||
<div class="rounded-full bg-lightPrimary p-3 dark:bg-navy-700">
|
||||
<span class="flex items-center text-brand-500 dark:text-white">
|
||||
<svg
|
||||
stroke="currentColor"
|
||||
fill="currentColor"
|
||||
stroke-width="0"
|
||||
viewBox="0 0 24 24"
|
||||
class="h-7 w-7"
|
||||
height="1em"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path fill="none" d="M0 0h24v24H0z"></path>
|
||||
<path d="M4 9h4v11H4zM16 13h4v7h-4zM10 4h4v16h-4z"></path>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-50 ml-4 flex w-auto flex-col justify-center">
|
||||
<p class="font-dm text-sm font-medium text-gray-600">Redis版本</p>
|
||||
<h4 class="text-xl font-bold text-navy-700 dark:text-white">{{ baseInfo.redis_version }}</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="relative flex flex-grow !flex-row flex-col items-center rounded-[10px] border-[1px] border-gray-200 bg-blue-50 hover:scale-105 hover:shadow-lg bg-clip-border shadow-md shadow-[#F3F3F3] dark:border-[#ffffff33] dark:!bg-navy-800 dark:text-white dark:shadow-none">
|
||||
<div class="ml-[18px] flex h-[90px] w-auto flex-row items-center">
|
||||
<div class="rounded-full bg-lightPrimary p-3 dark:bg-navy-700">
|
||||
<span class="flex items-center text-brand-500 dark:text-white">
|
||||
<svg
|
||||
stroke="currentColor"
|
||||
fill="currentColor"
|
||||
stroke-width="0"
|
||||
viewBox="0 0 512 512"
|
||||
class="h-6 w-6"
|
||||
height="1em"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M298.39 248a4 4 0 002.86-6.8l-78.4-79.72a4 4 0 00-6.85 2.81V236a12 12 0 0012 12z"></path>
|
||||
<path
|
||||
d="M197 267a43.67 43.67 0 01-13-31v-92h-72a64.19 64.19 0 00-64 64v224a64 64 0 0064 64h144a64 64 0 0064-64V280h-92a43.61 43.61 0 01-31-13zm175-147h70.39a4 4 0 002.86-6.8l-78.4-79.72a4 4 0 00-6.85 2.81V108a12 12 0 0012 12z"></path>
|
||||
<path
|
||||
d="M372 152a44.34 44.34 0 01-44-44V16H220a60.07 60.07 0 00-60 60v36h42.12A40.81 40.81 0 01231 124.14l109.16 111a41.11 41.11 0 0111.83 29V400h53.05c32.51 0 58.95-26.92 58.95-60V152z"></path>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-50 ml-4 flex w-auto flex-col justify-center">
|
||||
<p class="font-dm text-sm font-medium text-gray-600">客户端数</p>
|
||||
<h4 class="text-xl font-bold text-navy-700 dark:text-white">{{ baseInfo.connected_clients }}</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="relative flex flex-grow !flex-row flex-col items-center rounded-[10px] border-[1px] border-gray-200 bg-blue-50 hover:scale-105 hover:shadow-lg bg-clip-border shadow-md shadow-[#F3F3F3] dark:border-[#ffffff33] dark:!bg-navy-800 dark:text-white dark:shadow-none">
|
||||
<div class="ml-[18px] flex h-[90px] w-auto flex-row items-center">
|
||||
<div class="rounded-full bg-lightPrimary p-3 dark:bg-navy-700">
|
||||
<span class="flex items-center text-brand-500 dark:text-white">
|
||||
<svg
|
||||
stroke="currentColor"
|
||||
fill="currentColor"
|
||||
stroke-width="0"
|
||||
viewBox="0 0 24 24"
|
||||
class="h-7 w-7"
|
||||
height="1em"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path fill="none" d="M0 0h24v24H0z"></path>
|
||||
<path d="M4 9h4v11H4zM16 13h4v7h-4zM10 4h4v16h-4z"></path>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-50 ml-4 flex w-auto flex-col justify-center">
|
||||
<p class="font-dm text-sm font-medium text-gray-600">运行时间(天)</p>
|
||||
<h4 class="text-xl font-bold text-navy-700 dark:text-white">{{ baseInfo.uptime_in_days }}</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="relative flex flex-grow !flex-row flex-col items-center rounded-[10px] border-[1px] border-gray-200 bg-blue-50 hover:scale-105 hover:shadow-lg bg-clip-border shadow-md shadow-[#F3F3F3] dark:border-[#ffffff33] dark:!bg-navy-800 dark:text-white dark:shadow-none">
|
||||
<div class="ml-[18px] flex h-[90px] w-auto flex-row items-center">
|
||||
<div class="rounded-full bg-lightPrimary p-3 dark:bg-navy-700">
|
||||
<span class="flex items-center text-brand-500 dark:text-white">
|
||||
<svg
|
||||
stroke="currentColor"
|
||||
fill="currentColor"
|
||||
stroke-width="0"
|
||||
viewBox="0 0 24 24"
|
||||
class="h-6 w-6"
|
||||
height="1em"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path fill="none" d="M0 0h24v24H0z"></path>
|
||||
<path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"></path>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-50 ml-4 flex w-auto flex-col justify-center">
|
||||
<p class="font-dm text-sm font-medium text-gray-600">使用内存</p>
|
||||
<h4 class="text-xl font-bold text-navy-700 dark:text-white">{{ baseInfo.used_memory_human }}</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="relative flex flex-grow !flex-row flex-col items-center rounded-[10px] border-[1px] border-gray-200 bg-blue-50 hover:scale-105 hover:shadow-lg bg-clip-border shadow-md shadow-[#F3F3F3] dark:border-[#ffffff33] dark:!bg-navy-800 dark:text-white dark:shadow-none">
|
||||
<div class="ml-[18px] flex h-[90px] w-auto flex-row items-center">
|
||||
<div class="rounded-full bg-lightPrimary p-3 dark:bg-navy-700">
|
||||
<span class="flex items-center text-brand-500 dark:text-white">
|
||||
<svg
|
||||
stroke="currentColor"
|
||||
fill="currentColor"
|
||||
stroke-width="0"
|
||||
viewBox="0 0 24 24"
|
||||
class="h-7 w-7"
|
||||
height="1em"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path fill="none" d="M0 0h24v24H0z"></path>
|
||||
<path d="M4 9h4v11H4zM16 13h4v7h-4zM10 4h4v16h-4z"></path>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-50 ml-4 flex w-auto flex-col justify-center">
|
||||
<p class="font-dm text-sm font-medium text-gray-600">AOF是否开启</p>
|
||||
<h4 class="text-xl font-bold text-navy-700 dark:text-white">{{ baseInfo.aof_enabled == 0 ? '开启' : '关闭' }}</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="relative flex flex-grow !flex-row items-center rounded-[10px] border-[1px] border-gray-200 bg-blue-50 hover:scale-105 hover:shadow-lg bg-clip-border shadow-md shadow-[#F3F3F3] dark:border-[#ffffff33] dark:!bg-navy-800 dark:text-white dark:shadow-none">
|
||||
<div class="ml-[18px] flex h-[90px] w-auto flex-row items-center">
|
||||
<div class="rounded-full bg-lightPrimary p-3 dark:bg-navy-700">
|
||||
<span class="flex items-center text-brand-500 dark:text-white">
|
||||
<svg
|
||||
stroke="currentColor"
|
||||
fill="currentColor"
|
||||
stroke-width="0"
|
||||
viewBox="0 0 512 512"
|
||||
class="h-6 w-6"
|
||||
height="1em"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M208 448V320h96v128h97.6V256H464L256 64 48 256h62.4v192z"></path>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-50 ml-4 flex w-auto flex-col justify-center">
|
||||
<p class="font-dm text-sm font-medium text-gray-600">RDB是否成功</p>
|
||||
<h4 class="text-xl font-bold text-navy-700 dark:text-white">{{ baseInfo.aof_enabled == 'ok' ? '成功' : '失败' }}</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<div class="sm:flex">
|
||||
<!-- 命令统计 -->
|
||||
<el-card class="sm:mr-4 flex-1 !border-none mt-4" shadow="never">
|
||||
<div>
|
||||
<div class="mb-10">命令统计</div>
|
||||
<div class="flex h-[300px] items-center" ref="commandChartRef"></div>
|
||||
<div class="mb-10 font-semibold">命令统计</div>
|
||||
<div class="flex h-[30vh] items-center" ref="commandChartRef"></div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<!-- 内存信息 -->
|
||||
<el-card class="flex-1 !border-none mt-4" shadow="never">
|
||||
<div>
|
||||
<div class="mb-10">内存信息</div>
|
||||
<div class="flex h-[300px] items-center" ref="memoryChartRef"></div>
|
||||
<div class="mb-10 font-semibold">内存信息</div>
|
||||
<div class="flex h-[30vh] items-center" ref="memoryChartRef"></div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="cache">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user