update ServerDashboard
This commit is contained in:
Timi
265
src/pages/setting/DashboardSetting.vue
Normal file
265
src/pages/setting/DashboardSetting.vue
Normal file
@@ -0,0 +1,265 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<section class="card">
|
||||
<div class="head">
|
||||
<p class="tag">服务器</p>
|
||||
<h2 class="header">数据刷新与采集</h2>
|
||||
<p class="desc">用于配置服务器仪表板的请求频率和 metrics 参数。</p>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<p class="label">当前状态刷新频率（秒）</p>
|
||||
<t-input v-model="snapshotRefreshText" type="number" clearable placeholder="默认 3 秒" />
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<p class="label">历史采样刷新频率（秒）</p>
|
||||
<t-input v-model="historyRefreshText" type="number" clearable placeholder="默认 10 秒" />
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<p class="label">当前状态采集指标</p>
|
||||
<div class="metrics">
|
||||
<t-button
|
||||
v-for="metric in snapshotMetricOptions"
|
||||
:key="metric.value"
|
||||
size="small"
|
||||
theme="primary"
|
||||
:variant="isSnapshotMetricChecked(metric.value) ? 'base' : 'outline'"
|
||||
@click="toggleSnapshotMetric(metric.value)"
|
||||
>
|
||||
<span v-text="metric.label" />
|
||||
</t-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<p class="label">历史采样采集指标</p>
|
||||
<div class="metrics">
|
||||
<t-button
|
||||
v-for="metric in historyMetricOptions"
|
||||
:key="metric.value"
|
||||
size="small"
|
||||
theme="primary"
|
||||
:variant="isHistoryMetricChecked(metric.value) ? 'base' : 'outline'"
|
||||
@click="toggleHistoryMetric(metric.value)"
|
||||
>
|
||||
<span v-text="metric.label" />
|
||||
</t-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<t-button block theme="primary" @click="saveServerDashboardSetting">
|
||||
保存服务器配置
|
||||
</t-button>
|
||||
<t-button block variant="outline" @click="resetServerDashboardSetting">
|
||||
恢复默认
|
||||
</t-button>
|
||||
</section>
|
||||
|
||||
<section class="card">
|
||||
<div class="head">
|
||||
<p class="tag">Docker</p>
|
||||
<h2 class="header">配置待定</h2>
|
||||
<p class="desc">后续将支持 Docker 仪表板采集项和展示策略配置。</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="card">
|
||||
<div class="head">
|
||||
<p class="tag">UPS</p>
|
||||
<h2 class="header">配置待定</h2>
|
||||
<p class="desc">后续将支持 UPS 仪表板采集项和告警策略配置。</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Toast } from "tdesign-mobile-vue";
|
||||
import {
|
||||
useSettingStore,
|
||||
type DashboardHistoryMetric,
|
||||
type DashboardSnapshotMetric,
|
||||
type ServerDashboardSetting
|
||||
} from "@/store/settingStore";
|
||||
|
||||
defineOptions({
|
||||
name: "DashboardSetting"
|
||||
});
|
||||
|
||||
const settingStore = useSettingStore();
|
||||
|
||||
const snapshotMetricOptions: Array<{ label: string; value: DashboardSnapshotMetric }> = [
|
||||
{ label: "系统", value: "os" },
|
||||
{ label: "CPU", value: "cpu" },
|
||||
{ label: "内存", value: "memory" },
|
||||
{ label: "JVM", value: "jvm" },
|
||||
{ label: "网络", value: "network" },
|
||||
{ label: "硬件", value: "hardware" },
|
||||
{ label: "磁盘", value: "storage" }
|
||||
];
|
||||
|
||||
const historyMetricOptions: Array<{ label: string; value: DashboardHistoryMetric }> = [
|
||||
{ label: "CPU", value: "cpu" },
|
||||
{ label: "内存", value: "memory" },
|
||||
{ label: "JVM", value: "jvm" },
|
||||
{ label: "网络", value: "network" }
|
||||
];
|
||||
|
||||
const snapshotRefreshText = ref("");
|
||||
const historyRefreshText = ref("");
|
||||
const selectedSnapshotMetrics = ref<DashboardSnapshotMetric[]>([]);
|
||||
const selectedHistoryMetrics = ref<DashboardHistoryMetric[]>([]);
|
||||
|
||||
watch(
|
||||
() => settingStore.dashboard.server,
|
||||
(setting) => {
|
||||
snapshotRefreshText.value = String(setting.snapshotRefreshSeconds);
|
||||
historyRefreshText.value = String(setting.historyRefreshSeconds);
|
||||
selectedSnapshotMetrics.value = [...setting.snapshotMetrics];
|
||||
selectedHistoryMetrics.value = [...setting.historyMetrics];
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
function isSnapshotMetricChecked(metric: DashboardSnapshotMetric): boolean {
|
||||
return selectedSnapshotMetrics.value.includes(metric);
|
||||
}
|
||||
|
||||
function isHistoryMetricChecked(metric: DashboardHistoryMetric): boolean {
|
||||
return selectedHistoryMetrics.value.includes(metric);
|
||||
}
|
||||
|
||||
function toggleSnapshotMetric(metric: DashboardSnapshotMetric): void {
|
||||
if (isSnapshotMetricChecked(metric)) {
|
||||
if (selectedSnapshotMetrics.value.length <= 1) {
|
||||
Toast({
|
||||
theme: "warning",
|
||||
message: "当前状态至少保留一个采集指标"
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
selectedSnapshotMetrics.value = selectedSnapshotMetrics.value.filter((item) => item !== metric);
|
||||
return;
|
||||
}
|
||||
|
||||
selectedSnapshotMetrics.value = [...selectedSnapshotMetrics.value, metric];
|
||||
}
|
||||
|
||||
function toggleHistoryMetric(metric: DashboardHistoryMetric): void {
|
||||
if (isHistoryMetricChecked(metric)) {
|
||||
if (selectedHistoryMetrics.value.length <= 1) {
|
||||
Toast({
|
||||
theme: "warning",
|
||||
message: "历史采样至少保留一个采集指标"
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
selectedHistoryMetrics.value = selectedHistoryMetrics.value.filter((item) => item !== metric);
|
||||
return;
|
||||
}
|
||||
|
||||
selectedHistoryMetrics.value = [...selectedHistoryMetrics.value, metric];
|
||||
}
|
||||
|
||||
function saveServerDashboardSetting(): void {
|
||||
const nextSetting: Partial<ServerDashboardSetting> = {
|
||||
snapshotRefreshSeconds: normalizeSecondValue(snapshotRefreshText.value, 3),
|
||||
historyRefreshSeconds: normalizeSecondValue(historyRefreshText.value, 10),
|
||||
snapshotMetrics: selectedSnapshotMetrics.value,
|
||||
historyMetrics: selectedHistoryMetrics.value
|
||||
};
|
||||
|
||||
settingStore.setServerDashboard(nextSetting);
|
||||
Toast({
|
||||
theme: "success",
|
||||
message: "服务器仪表板配置已保存"
|
||||
});
|
||||
}
|
||||
|
||||
function resetServerDashboardSetting(): void {
|
||||
settingStore.setServerDashboard({
|
||||
snapshotRefreshSeconds: 3,
|
||||
historyRefreshSeconds: 10,
|
||||
snapshotMetrics: ["os", "cpu", "memory", "jvm", "network", "hardware", "storage"],
|
||||
historyMetrics: ["cpu", "memory", "jvm", "network"]
|
||||
});
|
||||
|
||||
Toast({
|
||||
theme: "success",
|
||||
message: "已恢复默认配置"
|
||||
});
|
||||
}
|
||||
|
||||
function normalizeSecondValue(value: string, fallback: number): number {
|
||||
const numberValue = Number(value);
|
||||
if (Number.isNaN(numberValue)) {
|
||||
return fallback;
|
||||
}
|
||||
|
||||
return Math.min(Math.max(Math.floor(numberValue), 1), 120);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.page {
|
||||
gap: 1rem;
|
||||
display: flex;
|
||||
padding: 1rem;
|
||||
flex-direction: column;
|
||||
|
||||
.card {
|
||||
gap: 1rem;
|
||||
display: flex;
|
||||
padding: 1rem;
|
||||
border-radius: 1rem;
|
||||
flex-direction: column;
|
||||
border: 1px solid var(--app-line);
|
||||
background: var(--app-card);
|
||||
box-shadow: 0 .35rem 1rem rgba(17, 32, 56, .05);
|
||||
}
|
||||
|
||||
.head,
|
||||
.group {
|
||||
gap: .5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.tag,
|
||||
.label,
|
||||
.desc {
|
||||
margin: 0;
|
||||
color: var(--app-sub);
|
||||
}
|
||||
|
||||
.tag,
|
||||
.label {
|
||||
font-size: .875rem;
|
||||
}
|
||||
|
||||
.header {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.desc {
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.metrics {
|
||||
gap: .75rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.theme-dark) .page {
|
||||
.card {
|
||||
box-shadow: 0 .35rem 1rem rgba(0, 0, 0, .2);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user