You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@skywalking.apache.org by wu...@apache.org on 2025/06/03 13:23:53 UTC
(skywalking-booster-ui) branch main updated: feat: enhance the TTL Tab on Setting page (#473)
This is an automated email from the ASF dual-hosted git repository.
wusheng pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/skywalking-booster-ui.git
The following commit(s) were added to refs/heads/main by this push:
new 35a1ff9b feat: enhance the TTL Tab on Setting page (#473)
35a1ff9b is described below
commit 35a1ff9b24fb8d6baa2eb50371e843735f22aa02
Author: Fine0830 <fa...@gmail.com>
AuthorDate: Tue Jun 3 21:23:48 2025 +0800
feat: enhance the TTL Tab on Setting page (#473)
---
src/locales/lang/en.ts | 4 +-
src/locales/lang/es.ts | 4 +-
src/locales/lang/zh.ts | 4 +-
src/store/data.ts | 16 ++++++++
src/store/modules/settings.ts | 17 +++++++-
src/views/settings/components/TTL.vue | 33 ++-------------
src/views/settings/components/TTLTable.vue | 44 ++++++++++++++++++++
src/views/settings/data.ts | 65 +++++++++++-------------------
8 files changed, 108 insertions(+), 79 deletions(-)
diff --git a/src/locales/lang/en.ts b/src/locales/lang/en.ts
index ea77bc16..78029437 100644
--- a/src/locales/lang/en.ts
+++ b/src/locales/lang/en.ts
@@ -397,8 +397,8 @@ const msg = {
instances: "Instances",
snapshot: "Snapshot",
expression: "Expression",
- metricsTTL: "Metrics TTL",
- recordsTTL: "Records TTL",
+ metricsTTL: "Metrics TTL (day)",
+ recordsTTL: "Records TTL (day)",
clusterNodes: "Cluster Nodes",
debuggingConfigDump: "Dump Effective Configurations",
customDuration: "Custom Duration",
diff --git a/src/locales/lang/es.ts b/src/locales/lang/es.ts
index ba7d7edc..f088f27f 100644
--- a/src/locales/lang/es.ts
+++ b/src/locales/lang/es.ts
@@ -397,8 +397,8 @@ const msg = {
snapshot: "Snapshot",
expression: "Expression",
asSelector: "As Selector",
- metricsTTL: "Metrics TTL",
- recordsTTL: "Records TTL",
+ metricsTTL: "Metrics TTL (day)",
+ recordsTTL: "Records TTL (day)",
clusterNodes: "Cluster Nodes",
debuggingConfigDump: "Dump Effective Configurations",
customDuration: "Duración Personalizada",
diff --git a/src/locales/lang/zh.ts b/src/locales/lang/zh.ts
index 40c21e0e..a3b079b7 100644
--- a/src/locales/lang/zh.ts
+++ b/src/locales/lang/zh.ts
@@ -395,8 +395,8 @@ const msg = {
instances: "实例",
snapshot: "快照",
expression: "表达式",
- metricsTTL: "Metrics TTL",
- recordsTTL: "Records TTL",
+ metricsTTL: "Metrics TTL (day)",
+ recordsTTL: "Records TTL (day)",
clusterNodes: "集群节点",
debuggingConfigDump: "转储有效配置",
customDuration: "自定义时长",
diff --git a/src/store/data.ts b/src/store/data.ts
index 760e1107..f40dfa25 100644
--- a/src/store/data.ts
+++ b/src/store/data.ts
@@ -15,6 +15,7 @@
* limitations under the License.
*/
import { WidgetType } from "@/views/dashboard/data";
+import { HotAndWarmOpt } from "@/views/settings/data";
export const NewControl = {
x: 0,
@@ -58,3 +59,18 @@ export enum EBPFProfilingTriggerType {
}
export const EndpointsTopNDefault = 20;
+
+export const TTLTypes = {
+ HotAndWarm: "Hot / Warm",
+ Cold: "Cold",
+};
+export const TTLColdMap: Indexable<string> = {
+ coldDay: HotAndWarmOpt[0],
+ coldHour: HotAndWarmOpt[1],
+ coldMinute: HotAndWarmOpt[2],
+ coldNormal: HotAndWarmOpt[3],
+ coldTrace: HotAndWarmOpt[4],
+ coldZipkinTrace: HotAndWarmOpt[5],
+ coldLog: HotAndWarmOpt[6],
+ coldBrowserErrorLog: HotAndWarmOpt[7],
+};
diff --git a/src/store/modules/settings.ts b/src/store/modules/settings.ts
index e9dd3708..4341a1da 100644
--- a/src/store/modules/settings.ts
+++ b/src/store/modules/settings.ts
@@ -18,6 +18,8 @@ import { defineStore } from "pinia";
import { store } from "@/store";
import fetchQuery from "@/graphql/http";
import type { ClusterNode, ConfigTTL } from "@/types/settings";
+import { HotAndWarmOpt } from "@/views/settings/data";
+import { TTLTypes, TTLColdMap } from "../data";
interface SettingsState {
clusterNodes: ClusterNode[];
@@ -46,7 +48,20 @@ export const settingsStore = defineStore({
method: "get",
path: "ConfigTTL",
});
- this.configTTL = response;
+ for (const item of Object.keys(response)) {
+ const rows = [];
+ const row: Indexable<string> = { type: TTLTypes.HotAndWarm };
+ const rowCold: Indexable<string> = { type: TTLTypes.Cold };
+ for (const key of Object.keys(response[item])) {
+ if (HotAndWarmOpt.includes(key)) {
+ row[key] = response[item][key];
+ } else {
+ rowCold[TTLColdMap[key] as string] = response[item][key];
+ }
+ }
+ rows.push(row, rowCold);
+ this.configTTL[item] = rows;
+ }
return response;
},
async getDebuggingConfigDump() {
diff --git a/src/views/settings/components/TTL.vue b/src/views/settings/components/TTL.vue
index 5e2a6ea8..bca4b77c 100644
--- a/src/views/settings/components/TTL.vue
+++ b/src/views/settings/components/TTL.vue
@@ -15,43 +15,16 @@ limitations under the License. -->
<template>
<div class="ttl">
<div class="label">{{ t("metricsTTL") }}</div>
- <el-table
- :data="[settingsStore.configTTL.metrics]"
- class="mb-5"
- :row-style="{ backgroundColor: 'var(--layout-background)' }"
- >
- <el-table-column v-for="item in MetricsTTLRow" :prop="item.value" :label="item.label" :key="item.value">
- {{
- settingsStore.configTTL?.metrics
- ? settingsStore.configTTL.metrics[item.value] < 0
- ? "N/A"
- : (settingsStore.configTTL?.metrics ?? {})[item.value]
- : "N/A"
- }}
- </el-table-column>
- </el-table>
+ <TTLTable :data="settingsStore.configTTL.metrics" :metricsRows="MetricsTTLRow" />
<div class="label">{{ t("recordsTTL") }}</div>
- <el-table
- :data="[settingsStore.configTTL.records]"
- class="mb-5"
- :row-style="{ backgroundColor: 'var(--layout-background)' }"
- >
- <el-table-column v-for="item in RecordsTTLRow" :prop="item.value" :label="item.label" :key="item.value">
- {{
- settingsStore.configTTL?.records
- ? settingsStore.configTTL?.records[item.value] < 0
- ? "N/A"
- : (settingsStore.configTTL?.records || {})[item.value]
- : "N/A"
- }}
- </el-table-column>
- </el-table>
+ <TTLTable :data="settingsStore.configTTL.records" :metricsRows="RecordsTTLRow" />
</div>
</template>
<script lang="ts" setup>
import { onMounted } from "vue";
import { useI18n } from "vue-i18n";
import { useSettingsStore } from "@/store/modules/settings";
+ import TTLTable from "./TTLTable.vue";
import { MetricsTTLRow, RecordsTTLRow } from "../data";
const { t } = useI18n();
diff --git a/src/views/settings/components/TTLTable.vue b/src/views/settings/components/TTLTable.vue
new file mode 100644
index 00000000..d01c0f87
--- /dev/null
+++ b/src/views/settings/components/TTLTable.vue
@@ -0,0 +1,44 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements. See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. -->
+<template>
+ <el-table
+ :data="data"
+ class="mb-5"
+ :row-style="{ backgroundColor: 'var(--layout-background)' }"
+ :cell-style="(data: Indexable) => (data.columnIndex === 0 ? { backgroundColor: 'var(--el-table-header-bg-color)' } : {})"
+ >
+ <el-table-column
+ v-for="item in metricsRows"
+ :prop="item.value"
+ :label="item.label"
+ :key="item.value"
+ :width="item.width"
+ >
+ <template #default="scope">
+ {{ scope.row && scope.row[item.value] ? (scope.row[item.value] < 0 ? "N/A" : scope.row[item.value]) : "N/A" }}
+ </template>
+ </el-table-column>
+ </el-table>
+</template>
+<script lang="ts" setup>
+ /*global PropType, Indexable */
+ defineProps({
+ metricsRows: {
+ type: Array as PropType<{ width?: number; value: string; label: string }[]>,
+ default: () => [],
+ },
+ data: { type: Array as PropType<Indexable[]>, default: () => [] },
+ });
+</script>
diff --git a/src/views/settings/data.ts b/src/views/settings/data.ts
index 83adaea8..1ac0ce98 100644
--- a/src/views/settings/data.ts
+++ b/src/views/settings/data.ts
@@ -49,72 +49,53 @@ export const SettingsTabs = [
value: "dumpEffectiveConfigurations",
},
];
+
+export const HotAndWarmOpt = ["day", "hour", "minute", "normal", "trace", "zipkinTrace", "log", "browserErrorLog"];
+
export const MetricsTTLRow = [
+ {
+ label: "Type",
+ value: "type",
+ width: 260,
+ },
{
label: "Day",
- value: "day",
+ value: HotAndWarmOpt[0],
},
{
label: "Hour",
- value: "hour",
+ value: HotAndWarmOpt[1],
},
{
label: "Minute",
- value: "minute",
- },
- {
- label: "Cold Day",
- value: "coldDay",
- },
- {
- label: "Cold Hour",
- value: "coldHour",
- },
- {
- label: "Cold Minute",
- value: "coldMinute",
+ value: HotAndWarmOpt[2],
},
];
export const RecordsTTLRow = [
{
- label: "Normal",
- value: "normal",
+ label: "Type",
+ value: "type",
+ width: 260,
},
{
- label: "Trace",
- value: "trace",
+ label: "Normal",
+ value: HotAndWarmOpt[3],
},
{
- label: "Log",
- value: "log",
+ label: "Trace",
+ value: HotAndWarmOpt[4],
},
{
label: "Zipkin Trace",
- value: "zipkinTrace",
- },
- {
- label: "Browser Error Log",
- value: "browserErrorLog",
- },
- {
- label: "Cold Normal",
- value: "coldNormal",
+ value: HotAndWarmOpt[5],
},
{
- label: "Cold Trace",
- value: "coldTrace",
- },
- {
- label: "Cold Zipkin Trace",
- value: "coldZipkinTrace",
- },
- {
- label: "Cold Log",
- value: "coldLog",
+ label: "Log",
+ value: HotAndWarmOpt[6],
},
{
- label: "Cold Browser Error Log",
- value: "coldBrowserErrorLog",
+ label: "Browser Error Log",
+ value: HotAndWarmOpt[7],
},
];