page: 📄 添加系统缓存监控和内置os及其java监控
This commit is contained in:
parent
0a7237d733
commit
daffb0883b
|
|
@ -0,0 +1,16 @@
|
|||
import { http } from '@/api/service/request';
|
||||
|
||||
/** actuator断端点-系统服务获取 */
|
||||
export const fetchSystemHealthList = () => {
|
||||
return http.request<any>('get', '/health');
|
||||
};
|
||||
|
||||
/** actuator断端点-系统信息 */
|
||||
export const fetchSystemInfo = () => {
|
||||
return http.request<any>('get', '/info');
|
||||
};
|
||||
|
||||
/** actuator断端点-系统缓存 */
|
||||
export const fetchSystemCaches = () => {
|
||||
return http.request<any>('get', '/caches');
|
||||
};
|
||||
|
|
@ -10,8 +10,3 @@ export const getRouterAsync = () => {
|
|||
export const fetchUploadFile = (data: any) => {
|
||||
return http.request<BaseResult<any>>('post', '/files/upload', { data }, { headers: { 'Content-Type': 'multipart/form-data' } });
|
||||
};
|
||||
|
||||
/** 系统监控-系统服务获取 */
|
||||
export const fetchSystemHealthList = () => {
|
||||
return http.request<any>('get', '/health');
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,23 @@
|
|||
<script lang="ts" setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { fetchSystemCaches } from '@/api/v1/actuator';
|
||||
|
||||
const caches = ref([]);
|
||||
const onSearch = async () => {
|
||||
let result = await fetchSystemCaches();
|
||||
result = result.cacheManagers.cacheManagerWithMouth.caches;
|
||||
caches.value = Object.entries(result).map(([key, value]) => ({ key, value: value.target }));
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
onSearch();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-descriptions :column="4" border direction="vertical" title="系统已缓存内容">
|
||||
<el-descriptions-item v-for="cache in caches" :key="cache.key" :label="cache.key">{{ cache.value }} </el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
@ -1,24 +1,22 @@
|
|||
<script lang="ts" setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
import ListCard from '@/views/monitor/server/list-card.vue';
|
||||
import { fetchSystemHealthList } from '@/api/v1/system';
|
||||
import Info from '@/views/monitor/server/info.vue';
|
||||
import { fetchSystemHealthList, fetchSystemInfo } from '@/api/v1/actuator';
|
||||
import { $t } from '@/plugins/i18n';
|
||||
import { svg } from '@/views/monitor/server/utils/columns';
|
||||
import ListCard from '@/views/monitor/server/list-card.vue';
|
||||
|
||||
// 系统健康状态
|
||||
const datalist = ref([]);
|
||||
// 系统运行信息
|
||||
const info = ref({ java: { vendor: {}, runtime: {}, jvm: {} }, os: {} });
|
||||
const loading = ref(false);
|
||||
const svg = `<path class="path" d="
|
||||
M 30 15
|
||||
L 28 17
|
||||
M 25.61 25.61
|
||||
A 15 15, 0, 0, 1, 15 30
|
||||
A 15 15, 0, 1, 1, 27.99 7.5
|
||||
L 15 15
|
||||
" style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>`;
|
||||
|
||||
/** 获取系统服务数据 */
|
||||
const onSearch = async () => {
|
||||
loading.value = true;
|
||||
|
||||
// 获取系统运行状态信息
|
||||
const result = await fetchSystemHealthList();
|
||||
datalist.value = Object.entries(result.components).map(([key, value]: any) => ({
|
||||
type: key,
|
||||
|
|
@ -27,6 +25,9 @@ const onSearch = async () => {
|
|||
details: value.details && Object.entries(value.details).map(([key, value]: any) => ({ key, value })),
|
||||
}));
|
||||
|
||||
// 系统信息
|
||||
info.value = await fetchSystemInfo();
|
||||
|
||||
loading.value = false;
|
||||
};
|
||||
|
||||
|
|
@ -37,8 +38,10 @@ onMounted(() => {
|
|||
|
||||
<template>
|
||||
<div v-loading="loading" :element-loading-svg="svg" element-loading-svg-view-box="-10, -10, 50, 50">
|
||||
<el-empty v-show="datalist.length === 0" :description="$t('no_server')" />
|
||||
<el-empty v-if="false" :description="$t('no_server')" />
|
||||
|
||||
<el-row :gutter="16">
|
||||
<info v-if="info.java.jvm" :info="info" />
|
||||
<el-col v-for="(product, index) in datalist" :key="index" :lg="6" :md="8" :sm="12" :xl="4" :xs="24">
|
||||
<ListCard :product="product" />
|
||||
</el-col>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,134 @@
|
|||
<script lang="ts" setup>
|
||||
import { useRenderIcon } from '@/components/CommonIcon/src/hooks';
|
||||
import { $t } from '@/plugins/i18n';
|
||||
import { cardClass, cardLogoClass } from '@/views/monitor/server/utils/columns';
|
||||
|
||||
defineProps({
|
||||
info: { type: Object as PropType<any> },
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-col :lg="6" :md="8" :sm="12" :xl="4" :xs="24">
|
||||
<div :class="cardClass">
|
||||
<div class="list-card-item_detail bg-bg_color">
|
||||
<el-row justify="space-between">
|
||||
<div :class="cardLogoClass">
|
||||
<component :is="useRenderIcon('devicon:java')" />
|
||||
</div>
|
||||
<div class="list-card-item_detail--operation">
|
||||
<el-tag class="mx-1 list-card-item_detail--operation--tag" color="#00a870" effect="dark">
|
||||
{{ $t('enable') }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</el-row>
|
||||
<p class="list-card-item_detail--name text-text_color_primary">java</p>
|
||||
<el-text>
|
||||
<div>Java版本：{{ info.java.version }}</div>
|
||||
|
||||
<div>供应商：{{ info.java.vendor.name }}</div>
|
||||
<div>供应商版本：{{ info.java.vendor.version }}</div>
|
||||
|
||||
<div>运行时：{{ info.java.runtime.name }}</div>
|
||||
<div>运行时版本：{{ info.java.runtime.version }}</div>
|
||||
|
||||
<div>jvm：{{ info.java.jvm.name }}</div>
|
||||
<div>jvm版本：{{ info.java.jvm.version }}</div>
|
||||
</el-text>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<el-col :lg="6" :md="8" :sm="12" :xl="4" :xs="24">
|
||||
<div :class="cardClass">
|
||||
<div class="list-card-item_detail bg-bg_color">
|
||||
<el-row justify="space-between">
|
||||
<div :class="cardLogoClass">
|
||||
<component :is="useRenderIcon('mdi:server')" />
|
||||
</div>
|
||||
<div class="list-card-item_detail--operation">
|
||||
<el-tag class="mx-1 list-card-item_detail--operation--tag" color="#00a870" effect="dark">
|
||||
{{ $t('enable') }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</el-row>
|
||||
<p class="list-card-item_detail--name text-text_color_primary">系统信息</p>
|
||||
<el-text>
|
||||
<div>系统名称： {{ info.os.name }}</div>
|
||||
<div>系统版本： {{ info.os.version }}</div>
|
||||
<div>系统架构： {{ info.os.arch }}</div>
|
||||
</el-text>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.list-card-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 12px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
|
||||
&_detail {
|
||||
flex: 1;
|
||||
min-height: 140px;
|
||||
padding: 24px 32px;
|
||||
|
||||
&--logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
font-size: 26px;
|
||||
color: #0052d9;
|
||||
background: #e0ebff;
|
||||
border-radius: 50%;
|
||||
|
||||
&__disabled {
|
||||
color: #a1c4ff;
|
||||
}
|
||||
}
|
||||
|
||||
&--operation {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
|
||||
&--tag {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&--name {
|
||||
margin: 24px 0 8px;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
&--desc {
|
||||
display: -webkit-box;
|
||||
height: 40px;
|
||||
margin-bottom: 24px;
|
||||
overflow: hidden;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
}
|
||||
|
||||
&__disabled {
|
||||
.list-card-item_detail--name {
|
||||
color: var(--el-text-color-disabled);
|
||||
}
|
||||
|
||||
.list-card-item_detail--operation--tag {
|
||||
color: #bababa;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
import { computed } from 'vue';
|
||||
|
||||
export const cardClass = computed(() => ['list-card-item']);
|
||||
export const cardLogoClass = computed(() => ['list-card-item_detail--logo']);
|
||||
|
||||
export const svg = `<path class="path" d="
|
||||
M 30 15
|
||||
L 28 17
|
||||
M 25.61 25.61
|
||||
A 15 15, 0, 0, 1, 15 30
|
||||
A 15 15, 0, 1, 1, 27.99 7.5
|
||||
L 15 15
|
||||
" style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>`;
|
||||
Loading…
Reference in New Issue