page: 📄 添加系统缓存监控和内置os及其java监控

src/api/v1/actuator.ts

@@ -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');
+};

src/api/v1/system.ts

@@ -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');
-};

src/views/monitor/caches/index.vue

@@ -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>

src/views/monitor/server/index.vue

@@ -1,24 +1,22 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
-import ListCard from '@/views/monitor/server/list-card.vue';
+import Info from '@/views/monitor/server/info.vue';
-import { fetchSystemHealthList } from '@/api/v1/system';
+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>

src/views/monitor/server/info.vue

@@ -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>

src/views/monitor/server/utils/columns.ts

@@ -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)"/>`;