Song/xkrs_ms
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Pre Merge pull request !197 from Andot Studio/master

Browse Source
This commit is contained in:
Andot Studio 2021-09-22 01:03:29 +00:00 committed by Gitee
commit 19b8af7adc
3 changed files with 242 additions and 165 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
ruoyi-admin/src/main/java/com/ruoyi/web/controller/monitor/CacheController.java
View File

@ -9,9 +9,7 @@ import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.core.RedisCallback; import org.springframework.data.redis.core.RedisCallback;
import org.springframework.data.redis.core.RedisTemplate; import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.security.access.prepost.PreAuthorize; import org.springframework.security.access.prepost.PreAuthorize;
import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.*;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import com.ruoyi.common.core.domain.AjaxResult; import com.ruoyi.common.core.domain.AjaxResult;
import com.ruoyi.common.utils.StringUtils; import com.ruoyi.common.utils.StringUtils;
@ -48,6 +46,19 @@ public class CacheController
pieList.add(data); pieList.add(data);
}); });
result.put("commandStats", pieList); result.put("commandStats", pieList);
result.put("allKeys", redisTemplate.keys("*"));
return AjaxResult.success(result); return AjaxResult.success(result);
} }
@PreAuthorize("@ss.hasPermi('monitor:cache:remove')")
@DeleteMapping("/{key}")
public AjaxResult delRedisCache(@PathVariable("key") String key)
{
try {
redisTemplate.delete(key);
return AjaxResult.success();
} catch (Exception exception) {
return AjaxResult.error("删除失败，请告知管理员，说明这个错误：" + exception.getMessage());
}
}
} }

34
ruoyi-ui/src/api/monitor/cache.js
View File

@ -1,9 +1,25 @@
import request from '@/utils/request' import request from '@/utils/request'
// 查询缓存详细 // 查询缓存详细
export function getCache() { export function getCache() {
return request({ return request({
url: '/monitor/cache', url: '/monitor/cache',
method: 'get' method: 'get'
}) })
} }
// 删除缓存
export function delRedisCache(key) {
return request({
url: '/monitor/cache/'+key,
method: 'delete'
})
}
// 清空缓存
export function clearRedisCache() {
return request({
url: '/monitor/cache/clear',
method: 'delete'
})
}

356
ruoyi-ui/src/views/monitor/cache/index.vue vendored
View File

@ -1,153 +1,203 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<el-row> <el-row>
<el-col :span="24" class="card-box"> <el-col :span="24" class="card-box">
<el-card> <el-card>
<div slot="header"><span>基本信息</span></div> <div slot="header"><span>基本信息</span></div>
<div class="el-table el-table--enable-row-hover el-table--medium"> <div class="el-table el-table--enable-row-hover el-table--medium">
<table cellspacing="0" style="width: 100%"> <table cellspacing="0" style="width: 100%">
<tbody> <tbody>
<tr> <tr>
<td><div class="cell">Redis版本</div></td> <td><div class="cell">Redis版本</div></td>
<td><div class="cell" v-if="cache.info">{{ cache.info.redis_version }}</div></td> <td><div class="cell" v-if="cache.info">{{ cache.info.redis_version }}</div></td>
<td><div class="cell">运行模式</div></td> <td><div class="cell">运行模式</div></td>
<td><div class="cell" v-if="cache.info">{{ cache.info.redis_mode == "standalone" ? "单机" : "集群" }}</div></td> <td><div class="cell" v-if="cache.info">{{ cache.info.redis_mode == "standalone" ? "单机" : "集群" }}</div></td>
<td><div class="cell">端口</div></td> <td><div class="cell">端口</div></td>
<td><div class="cell" v-if="cache.info">{{ cache.info.tcp_port }}</div></td> <td><div class="cell" v-if="cache.info">{{ cache.info.tcp_port }}</div></td>
<td><div class="cell">客户端数</div></td> <td><div class="cell">客户端数</div></td>
<td><div class="cell" v-if="cache.info">{{ cache.info.connected_clients }}</div></td> <td><div class="cell" v-if="cache.info">{{ cache.info.connected_clients }}</div></td>
</tr> </tr>
<tr> <tr>
<td><div class="cell">运行时间(天)</div></td> <td><div class="cell">运行时间(天)</div></td>
<td><div class="cell" v-if="cache.info">{{ cache.info.uptime_in_days }}</div></td> <td><div class="cell" v-if="cache.info">{{ cache.info.uptime_in_days }}</div></td>
<td><div class="cell">使用内存</div></td> <td><div class="cell">使用内存</div></td>
<td><div class="cell" v-if="cache.info">{{ cache.info.used_memory_human }}</div></td> <td><div class="cell" v-if="cache.info">{{ cache.info.used_memory_human }}</div></td>
<td><div class="cell">使用CPU</div></td> <td><div class="cell">使用CPU</div></td>
<td><div class="cell" v-if="cache.info">{{ parseFloat(cache.info.used_cpu_user_children).toFixed(2) }}</div></td> <td><div class="cell" v-if="cache.info">{{ parseFloat(cache.info.used_cpu_user_children).toFixed(2) }}</div></td>
<td><div class="cell">内存配置</div></td> <td><div class="cell">内存配置</div></td>
<td><div class="cell" v-if="cache.info">{{ cache.info.maxmemory_human }}</div></td> <td><div class="cell" v-if="cache.info">{{ cache.info.maxmemory_human }}</div></td>
</tr> </tr>
<tr> <tr>
<td><div class="cell">AOF是否开启</div></td> <td><div class="cell">AOF是否开启</div></td>
<td><div class="cell" v-if="cache.info">{{ cache.info.aof_enabled == "0" ? "否" : "是" }}</div></td> <td><div class="cell" v-if="cache.info">{{ cache.info.aof_enabled == "0" ? "否" : "是" }}</div></td>
<td><div class="cell">RDB是否成功</div></td> <td><div class="cell">RDB是否成功</div></td>
<td><div class="cell" v-if="cache.info">{{ cache.info.rdb_last_bgsave_status }}</div></td> <td><div class="cell" v-if="cache.info">{{ cache.info.rdb_last_bgsave_status }}</div></td>
<td><div class="cell">Key数量</div></td> <td><div class="cell">Key数量</div></td>
<td><div class="cell" v-if="cache.dbSize">{{ cache.dbSize }} </div></td> <td><div class="cell" v-if="cache.dbSize">{{ cache.dbSize }} </div></td>
<td><div class="cell">网络入口/出口</div></td> <td><div class="cell">网络入口/出口</div></td>
<td><div class="cell" v-if="cache.info">{{ cache.info.instantaneous_input_kbps }}kps/{{cache.info.instantaneous_output_kbps}}kps</div></td> <td><div class="cell" v-if="cache.info">{{ cache.info.instantaneous_input_kbps }}kps/{{cache.info.instantaneous_output_kbps}}kps</div></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</el-card> </el-card>
</el-col> </el-col>
<el-col :span="12" class="card-box"> <el-col :span="12" class="card-box">
<el-card> <el-card>
<div slot="header"><span>命令统计</span></div> <div slot="header"><span>命令统计</span></div>
<div class="el-table el-table--enable-row-hover el-table--medium"> <div class="el-table el-table--enable-row-hover el-table--medium">
<div ref="commandstats" style="height: 420px" /> <div ref="commandstats" style="height: 420px" />
</div> </div>
</el-card> </el-card>
</el-col> </el-col>
<el-col :span="12" class="card-box"> <el-col :span="12" class="card-box">
<el-card> <el-card>
<div slot="header"> <div slot="header">
<span>内存信息</span> <span>内存信息</span>
</div> </div>
<div class="el-table el-table--enable-row-hover el-table--medium"> <div class="el-table el-table--enable-row-hover el-table--medium">
<div ref="usedmemory" style="height: 420px" /> <div ref="usedmemory" style="height: 420px" />
</div> </div>
</el-card> </el-card>
</el-col> </el-col>
</el-row> </el-row>
</div> <el-row>
</template> <el-col :xs="8" :sm="8" :md="8" :lg="6" :xl="3" v-for="key in cache.allKeys" :key="key" >
<div class="grid-content bg-purple" style="width: 95%; display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 16px;">
<script> <div style="width: 10%; line-height: 36px; text-align: center;">
import { getCache } from "@/api/monitor/cache"; <i class="el-icon-cpu" />
import echarts from "echarts"; </div>
<div :title="key" style="line-height: 36px; width: 80%; height: 36px; overflow: hidden; text-overflow:ellipsis; white-space:nowrap;">
export default { <label>{{ key }}</label>
name: "Server", </div>
data() { <div style="width: 10%; line-height: 36px; cursor: pointer;" @click="delCache(key)">
return { <i class="el-icon-delete-solid" />
// 加载层信息 </div>
loading: [], </div>
// 统计命令信息 </el-col>
commandstats: null, </el-row>
// 使用内存 <el-row>
usedmemory: null, <el-alert
// cache信息 title="点击清空缓存，是把当前系统所用的整个index缓存库，直接清空，该操作不可逆，请慎重操作！"
cache: [], type="error">
}; </el-alert>
}, </el-row>
created() { <el-row>
this.getList(); <el-button type="danger" icon="el-icon-delete" @click="clearCache" style="float: right" round>清空缓存</el-button>
this.openLoading(); </el-row>
}, </div>
methods: { </template>
/** 查缓存询信息 */
getList() { <script>
getCache().then((response) => { import { getCache } from "@/api/monitor/cache";
this.cache = response.data; import echarts from "echarts";
this.loading.close();
export default {
this.commandstats = echarts.init(this.$refs.commandstats, "macarons"); name: "Server",
this.commandstats.setOption({ data() {
tooltip: { return {
trigger: "item", // 加载层信息
formatter: "{a} <br/>{b} : {c} ({d}%)", loading: [],
}, // 统计命令信息
series: [ commandstats: null,
{ // 使用内存
name: "命令", usedmemory: null,
type: "pie", // cache信息
roseType: "radius", cache: [],
radius: [15, 95], };
center: ["50%", "38%"], },
data: response.data.commandStats, created() {
animationEasing: "cubicInOut", this.getList();
animationDuration: 1000, this.openLoading();
}, },
], methods: {
}); /** 查缓存询信息 */
this.usedmemory = echarts.init(this.$refs.usedmemory, "macarons"); getList() {
this.usedmemory.setOption({ getCache().then((response) => {
tooltip: { this.cache = response.data;
formatter: "{b} <br/>{a} : " + this.cache.info.used_memory_human, this.loading.close();
},
series: [ this.commandstats = echarts.init(this.$refs.commandstats, "macarons");
{ this.commandstats.setOption({
name: "峰值", tooltip: {
type: "gauge", trigger: "item",
min: 0, formatter: "{a} <br/>{b} : {c} ({d}%)",
max: 1000, },
detail: { series: [
formatter: this.cache.info.used_memory_human, {
}, name: "命令",
data: [ type: "pie",
{ roseType: "radius",
value: parseFloat(this.cache.info.used_memory_human), radius: [15, 95],
name: "内存消耗", center: ["50%", "38%"],
}, data: response.data.commandStats,
], animationEasing: "cubicInOut",
}, animationDuration: 1000,
], },
}); ],
}); });
}, this.usedmemory = echarts.init(this.$refs.usedmemory, "macarons");
// 打开加载层 this.usedmemory.setOption({
openLoading() { tooltip: {
this.loading = this.$loading({ formatter: "{b} <br/>{a} : " + this.cache.info.used_memory_human,
lock: true, },
text: "拼命读取中", series: [
spinner: "el-icon-loading", {
background: "rgba(0, 0, 0, 0.7)", name: "峰值",
}); type: "gauge",
}, min: 0,
}, max: 1000,
}; detail: {
</script> formatter: this.cache.info.used_memory_human,
},
data: [
{
value: parseFloat(this.cache.info.used_memory_human),
name: "内存消耗",
},
],
},
],
});
});
},
// 打开加载层
openLoading() {
this.loading = this.$loading({
lock: true,
text: "拼命读取中",
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0.7)",
});
},
// 删除缓存
delCache(key) {
this.$confirm('是否确认删除缓存"' + key + '"的数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function() {
return delRedisCache(key);
}).then(() => {
this.getList();
this.msgSuccess("删除成功");
})
},
// 删除缓存
clearCache() {
this.$confirm('是否确认清空缓存? 该操作不可逆，请慎重操作!', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function() {
return clearRedisCache();
}).then(() => {
this.getList();
this.msgSuccess("删除成功");
})
}
},
};
</script>