Redis 菜单的重构,移除对 key 的管理

This commit is contained in:
YunaiV 2023-04-06 19:49:58 +08:00
parent 06e1e27652
commit 87ac04d9a7
7 changed files with 34 additions and 150 deletions

3
.env
View File

@ -15,3 +15,6 @@ VITE_APP_CAPTCHA_ENABLE=true
# 验证码的开关 # 验证码的开关
VITE_APP_CAPTCHA_ENABLE=true VITE_APP_CAPTCHA_ENABLE=true
# 百度统计
VITE_APP_BAIDU_CODE = a1ff8825baa73c3a78eb96aa40325abc

View File

@ -6,39 +6,3 @@ import request from '@/config/axios'
export const getCache = () => { export const getCache = () => {
return request.get({ url: '/infra/redis/get-monitor-info' }) return request.get({ url: '/infra/redis/get-monitor-info' })
} }
// 获取模块
export const getKeyDefineList = () => {
return request.get({ url: '/infra/redis/get-key-define-list' })
}
/**
* redis key列表
*/
export const getKeyList = (keyTemplate: string) => {
return request.get({
url: '/infra/redis/get-key-list',
params: {
keyTemplate
}
})
}
// 获取缓存内容
export const getKeyValue = (key: string) => {
return request.get({ url: '/infra/redis/get-key-value?key=' + key })
}
// 根据键名删除缓存
export const deleteKey = (key: string) => {
return request.delete({ url: '/infra/redis/delete-key?key=' + key })
}
export const deleteKeys = (keyTemplate: string) => {
return request.delete({
url: '/infra/redis/delete-keys?',
params: {
keyTemplate
}
})
}

View File

@ -174,12 +174,3 @@ export interface RedisCommandStatsVO {
calls: number calls: number
usec: number usec: number
} }
export interface RedisKeyInfo {
keyTemplate: string
keyType: string
valueType: string
timeoutType: number
timeout: number
memo: string
}

View File

@ -52,6 +52,8 @@ import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
import hljs from 'highlight.js' //导入代码高亮文件 import hljs from 'highlight.js' //导入代码高亮文件
import 'highlight.js/styles/github.css' //导入代码高亮样式 新版 import 'highlight.js/styles/github.css' //导入代码高亮样式 新版
import '@/plugins/tongji' // 百度统计
import Logger from '@/utils/Logger' import Logger from '@/utils/Logger'
// 本地开发模式 全局引入 element-plus 样式,加快第一次进入速度 // 本地开发模式 全局引入 element-plus 样式,加快第一次进入速度

View File

@ -0,0 +1,23 @@
import router from '@/router'
// 用于 router push
window._hmt = window._hmt || []
// HM_ID
const HM_ID = import.meta.env.VITE_APP_BAIDU_CODE
;(function () {
// 有值的时候,才开启
if (!HM_ID) {
return
}
const hm = document.createElement('script')
hm.src = 'https://hm.baidu.com/hm.js?' + HM_ID
const s = document.getElementsByTagName('script')[0]
s.parentNode.insertBefore(hm, s)
})()
router.afterEach(function (to) {
if (!HM_ID) {
return
}
_hmt.push(['_trackPageview', to.fullPath])
})

View File

@ -112,7 +112,6 @@ export enum DICT_TYPE {
// ========== INFRA 模块 ========== // ========== INFRA 模块 ==========
INFRA_BOOLEAN_STRING = 'infra_boolean_string', INFRA_BOOLEAN_STRING = 'infra_boolean_string',
INFRA_REDIS_TIMEOUT_TYPE = 'infra_redis_timeout_type',
INFRA_JOB_STATUS = 'infra_job_status', INFRA_JOB_STATUS = 'infra_job_status',
INFRA_JOB_LOG_STATUS = 'infra_job_log_status', INFRA_JOB_LOG_STATUS = 'infra_job_log_status',
INFRA_API_ERROR_LOG_PROCESS_STATUS = 'infra_api_error_log_process_status', INFRA_API_ERROR_LOG_PROCESS_STATUS = 'infra_api_error_log_process_status',

View File

@ -4,6 +4,7 @@
<el-scrollbar height="calc(100vh - 88px - 40px - 50px)"> <el-scrollbar height="calc(100vh - 88px - 40px - 50px)">
<el-row> <el-row>
<!-- 基本信息 -->
<el-col :span="24" class="card-box" shadow="hover"> <el-col :span="24" class="card-box" shadow="hover">
<el-card> <el-card>
<el-descriptions title="基本信息" :column="6" border> <el-descriptions title="基本信息" :column="6" border>
@ -47,106 +48,33 @@
</el-descriptions> </el-descriptions>
</el-card> </el-card>
</el-col> </el-col>
<!-- 命令统计 -->
<el-col :span="12" class="mt-3"> <el-col :span="12" class="mt-3">
<el-card :gutter="12" shadow="hover"> <el-card :gutter="12" shadow="hover">
<div ref="commandStatsRef" class="h-88"></div> <div ref="commandStatsRef" class="h-88"></div>
</el-card> </el-card>
</el-col> </el-col>
<!-- 内存使用量统计 -->
<el-col :span="12" class="mt-3"> <el-col :span="12" class="mt-3">
<el-card class="ml-3" :gutter="12" shadow="hover"> <el-card class="ml-3" :gutter="12" shadow="hover">
<div ref="usedmemory" class="h-88"></div> <div ref="usedmemory" class="h-88"></div>
</el-card> </el-card>
</el-col> </el-col>
</el-row> </el-row>
<el-row class="mt-3">
<el-col :span="24" class="card-box" shadow="hover">
<el-card>
<el-table
v-loading="keyListLoad"
:data="keyList"
row-key="id"
@row-click="openKeyTemplate"
>
<el-table-column prop="keyTemplate" label="Key 模板" width="200" />
<el-table-column prop="keyType" label="Key 类型" width="100" />
<el-table-column prop="valueType" label="Value 类型" />
<el-table-column prop="timeoutType" label="超时时间" width="200">
<template #default="{ row }">
<DictTag :type="DICT_TYPE.INFRA_REDIS_TIMEOUT_TYPE" :value="row?.timeoutType" />
<span v-if="row?.timeout > 0">({{ row?.timeout / 1000 }} )</span>
</template>
</el-table-column>
<el-table-column prop="memo" label="备注" />
</el-table>
</el-card>
</el-col>
</el-row>
</el-scrollbar> </el-scrollbar>
<XModal v-model="dialogVisible" :title="keyTemplate + ' 模板'">
<el-row>
<el-col :span="14" class="mt-3">
<el-card shadow="always">
<template #header>
<div class="card-header">
<span>键名列表</span>
</div>
</template>
<el-table :data="cacheKeys" style="width: 100%" @row-click="handleKeyValue">
<el-table-column label="缓存键名" align="center" :show-overflow-tooltip="true">
<template #default="{ row }">
{{ row }}
</template>
</el-table-column>
<el-table-column label="操作" align="right" width="60">
<template #default="{ row }">
<XTextButton preIcon="ep:delete" @click="handleDeleteKey(row)" />
</template>
</el-table-column>
</el-table>
</el-card>
</el-col>
<el-col :span="10" class="mt-3">
<el-card shadow="always">
<template #header>
<div class="card-header">
<span>缓存内容</span>
<XTextButton
preIcon="ep:refresh"
title="清理全部"
@click="handleDeleteKeys(keyTemplate)"
class="float-right p-1"
/>
</div>
</template>
<el-descriptions :column="1">
<el-descriptions-item label="缓存键名:">{{ cacheForm.key }}</el-descriptions-item>
<el-descriptions-item label="缓存内容:">{{ cacheForm.value }}</el-descriptions-item>
</el-descriptions>
</el-card>
</el-col>
</el-row>
</XModal>
</template> </template>
<script setup lang="ts" name="Redis"> <script setup lang="ts" name="Redis">
import * as echarts from 'echarts' import * as echarts from 'echarts'
import { DICT_TYPE } from '@/utils/dict'
import * as RedisApi from '@/api/infra/redis' import * as RedisApi from '@/api/infra/redis'
import { RedisKeyInfo, RedisMonitorInfoVO } from '@/api/infra/redis/types' import { RedisMonitorInfoVO } from '@/api/infra/redis/types'
const { t } = useI18n() //
const message = useMessage() //
const cache = ref<RedisMonitorInfoVO>() const cache = ref<RedisMonitorInfoVO>()
const keyListLoad = ref(true)
const keyList = ref<RedisKeyInfo[]>([])
// //
const readRedisInfo = async () => { const readRedisInfo = async () => {
const data = await RedisApi.getCache() const data = await RedisApi.getCache()
cache.value = data cache.value = data
loadEchartOptions(data.commandStats) loadEchartOptions(data.commandStats)
const redisKeysInfo = await RedisApi.getKeyDefineList()
keyList.value = redisKeysInfo
keyListLoad.value = false //
} }
// //
const commandStatsRef = ref<HTMLElement>() const commandStatsRef = ref<HTMLElement>()
@ -241,33 +169,7 @@ const loadEchartOptions = (stats) => {
] ]
}) })
} }
const dialogVisible = ref(false)
const keyTemplate = ref('')
const cacheKeys = ref()
const cacheForm = ref<{
key: string
value: string
}>({
key: '',
value: ''
})
const openKeyTemplate = async (row: RedisKeyInfo) => {
keyTemplate.value = row.keyTemplate
cacheKeys.value = await RedisApi.getKeyList(row.keyTemplate)
dialogVisible.value = true
}
const handleDeleteKey = async (row) => {
RedisApi.deleteKey(row)
message.success(t('common.delSuccess'))
}
const handleDeleteKeys = async (row) => {
RedisApi.deleteKeys(row)
message.success(t('common.delSuccess'))
}
const handleKeyValue = async (row) => {
const res = await RedisApi.getKeyValue(row)
cacheForm.value = res
}
onBeforeMount(() => { onBeforeMount(() => {
readRedisInfo() readRedisInfo()
}) })