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 2023/12/20 09:58:06 UTC
(skywalking-booster-ui) branch main updated: feat: support Tabs in the widget visiable when MQE expressions (#353)
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 001fa25a feat: support Tabs in the widget visiable when MQE expressions (#353)
001fa25a is described below
commit 001fa25a3be7720f93b672dedea25a9d0552d2cc
Author: Fine0830 <fa...@gmail.com>
AuthorDate: Wed Dec 20 17:58:00 2023 +0800
feat: support Tabs in the widget visiable when MQE expressions (#353)
---
src/assets/icons/add_iframe.svg | 2 +-
src/assets/icons/demand.svg | 2 +-
src/assets/icons/event.svg | 2 +-
src/components/Graph.vue | 3 +-
src/hooks/useExpressionsProcessor.ts | 2 +
src/layout/components/NavBar.vue | 3 +-
src/locales/lang/en.ts | 1 +
src/locales/lang/es.ts | 1 +
src/locales/lang/zh.ts | 1 +
src/store/data.ts | 22 ++--
src/store/modules/dashboard.ts | 26 ++--
src/styles/theme.scss | 2 +-
src/types/dashboard.d.ts | 2 +-
src/views/dashboard/List.vue | 16 ++-
src/views/dashboard/configuration/Tab.vue | 110 +++++++++++++++++
src/views/dashboard/configuration/index.ts | 2 +
src/views/dashboard/controls/Tab.vue | 135 ++++++++++++++++-----
src/views/dashboard/data.ts | 135 ++++++++++++---------
src/views/dashboard/graphs/TopList.vue | 3 +-
src/views/dashboard/panel/Layout.vue | 7 +-
src/views/dashboard/panel/Tool.vue | 113 +++--------------
src/views/dashboard/related/event/Content.vue | 5 +-
.../dashboard/related/log/LogTable/LogService.vue | 3 +-
src/views/dashboard/related/trace/Detail.vue | 3 +-
tsconfig.app.json | 1 -
tsconfig.vitest.json | 1 -
26 files changed, 379 insertions(+), 224 deletions(-)
diff --git a/src/assets/icons/add_iframe.svg b/src/assets/icons/add_iframe.svg
index 5fa776c0..a24b9967 100644
--- a/src/assets/icons/add_iframe.svg
+++ b/src/assets/icons/add_iframe.svg
@@ -12,4 +12,4 @@ 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. -->
-<svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32"><path d="M856.32 428.064a32 32 0 0 0-32 32v163.328H372.48c-0.896 0-1.664 0.448-2.56 0.512v-177.696h244.48a32 32 0 1 0 0-64H130.56c-0.896 0-1.664 0.448-2.56 0.512V231.68h488.16a32 32 0 1 0 0-64H96a32 32 0 0 0-32 32v701.824a32 32 0 0 0 32 32h760.32a32 32 0 0 0 32-32V460.064a32 32 0 0 0-32-32zM128 445.728c0.896 0.064 1.664 0.512 2.56 0.512h175.36v423.264H128V445.728z m241.92 423 [...]
\ No newline at end of file
+<svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32"><path d="M856.32 428.064a32 32 0 0 0-32 32v163.328H372.48c-0.896 0-1.664 0.448-2.56 0.512v-177.696h244.48a32 32 0 1 0 0-64H130.56c-0.896 0-1.664 0.448-2.56 0.512V231.68h488.16a32 32 0 1 0 0-64H96a32 32 0 0 0-32 32v701.824a32 32 0 0 0 32 32h760.32a32 32 0 0 0 32-32V460.064a32 32 0 0 0-32-32zM128 445.728c0.896 0.064 1.664 0.512 2.56 0.512h175.36v423.264H128V445.728z m241.92 423 [...]
\ No newline at end of file
diff --git a/src/assets/icons/demand.svg b/src/assets/icons/demand.svg
index 4b1b60db..1d4861fd 100644
--- a/src/assets/icons/demand.svg
+++ b/src/assets/icons/demand.svg
@@ -13,4 +13,4 @@ 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. -->
-<svg t="1654161407133" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1721" width="16" height="16"><path d="M804.224 86.144c0-19.264-15.616-34.944-34.944-34.944l-734.336 0c-19.264 0-34.944 15.68-34.944 34.944l0 82.048 804.224 0 0-82.048zM738.88 602.432c0 47.072-38.176 85.248-85.248 85.248s-85.248-38.176-85.248-85.248c0-47.072 38.176-85.248 85.248-85.248s85.248 38.176 85.248 85.248zM804.992 264.64l0-62.976-804.224 0 0 665.408c0 18.56 14.656 33. [...]
\ No newline at end of file
+<svg t="1654161407133" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1721" width="16" height="16"><path d="M804.224 86.144c0-19.264-15.616-34.944-34.944-34.944l-734.336 0c-19.264 0-34.944 15.68-34.944 34.944l0 82.048 804.224 0 0-82.048zM738.88 602.432c0 47.072-38.176 85.248-85.248 85.248s-85.248-38.176-85.248-85.248c0-47.072 38.176-85.248 85.248-85.248s85.248 38.176 85.248 85.248zM804.992 264.64l0-62.976-804.224 0 0 665.408c0 18.56 14.656 33. [...]
\ No newline at end of file
diff --git a/src/assets/icons/event.svg b/src/assets/icons/event.svg
index 93bf25ec..b4cedb14 100644
--- a/src/assets/icons/event.svg
+++ b/src/assets/icons/event.svg
@@ -12,4 +12,4 @@ 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. -->
-<svg t="1655695739627" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2218" width="48" height="48"><path d="M173.292308 177.230769C86.646154 265.846154 39.384615 382.030769 39.384615 504.123077 39.384615 531.692308 61.046154 551.384615 86.646154 551.384615s47.261538-21.661538 47.261538-47.261538c-1.969231-96.492308 37.415385-189.046154 106.338462-257.969231s163.446154-106.338462 257.969231-106.338461c27.569231 0 47.261538-21.661538 47.261538-4 [...]
\ No newline at end of file
+<svg t="1655695739627" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2218" width="48" height="48"><path d="M173.292308 177.230769C86.646154 265.846154 39.384615 382.030769 39.384615 504.123077 39.384615 531.692308 61.046154 551.384615 86.646154 551.384615s47.261538-21.661538 47.261538-47.261538c-1.969231-96.492308 37.415385-189.046154 106.338462-257.969231s163.446154-106.338462 257.969231-106.338461c27.569231 0 47.261538-21.661538 47.261538-4 [...]
\ No newline at end of file
diff --git a/src/components/Graph.vue b/src/components/Graph.vue
index 5ed35d1d..174d6de4 100644
--- a/src/components/Graph.vue
+++ b/src/components/Graph.vue
@@ -53,6 +53,7 @@ limitations under the License. -->
import { addResizeListener, removeResizeListener } from "@/utils/event";
import Trace from "@/views/dashboard/related/trace/Index.vue";
import associateProcessor from "@/hooks/useAssociateProcessor";
+ import { WidgetType } from "@/views/dashboard/data";
/*global Nullable, defineProps, defineEmits, Indexable*/
const emits = defineEmits(["select"]);
@@ -63,7 +64,7 @@ limitations under the License. -->
const currentParams = ref<Nullable<EventParams>>(null);
const showTrace = ref<boolean>(false);
const traceOptions = ref<{ type: string; filters?: unknown }>({
- type: "Trace",
+ type: WidgetType.Trace,
});
const menuPos = reactive<{ x: number; y: number }>({ x: NaN, y: NaN });
const props = defineProps({
diff --git a/src/hooks/useExpressionsProcessor.ts b/src/hooks/useExpressionsProcessor.ts
index fb7f4a3c..e237cb0d 100644
--- a/src/hooks/useExpressionsProcessor.ts
+++ b/src/hooks/useExpressionsProcessor.ts
@@ -141,6 +141,7 @@ export async function useExpressionsQueryProcessor(config: Indexable) {
return { source, tips, typesOfMQE };
}
+
const params = await expressionsGraphqlPods();
if (!params) {
return { source: {}, tips: [], typesOfMQE: [] };
@@ -301,6 +302,7 @@ export async function useExpressionsQueryPodsMetrics(
return { data, names, subNames, metricConfigArr, metricTypesArr, expressionsTips, subExpressionsTips };
}
+
const dashboardStore = useDashboardStore();
const params = await expressionsGraphqlPods();
const json = await dashboardStore.fetchMetricValue(params);
diff --git a/src/layout/components/NavBar.vue b/src/layout/components/NavBar.vue
index f7f253e0..51c7e96d 100644
--- a/src/layout/components/NavBar.vue
+++ b/src/layout/components/NavBar.vue
@@ -93,7 +93,8 @@ limitations under the License. -->
const savedTheme = window.localStorage.getItem("theme-is-dark");
if (savedTheme === "false") {
theme.value = false;
- } else if (savedTheme === "") {
+ }
+ if (savedTheme === "") {
// read the theme preference from system setting if there is no user setting
theme.value = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
}
diff --git a/src/locales/lang/en.ts b/src/locales/lang/en.ts
index 43987752..797b463f 100644
--- a/src/locales/lang/en.ts
+++ b/src/locales/lang/en.ts
@@ -384,5 +384,6 @@ const msg = {
unhealthyExpression: "Unhealthy Expression",
traceDesc:
"The trace segment serves as a representation of a trace portion executed within one single OS process, such as a JVM. It comprises a collection of spans, typically associated with and collected from a single request or execution context.",
+ tabExpressions: "Tab Expressions",
};
export default msg;
diff --git a/src/locales/lang/es.ts b/src/locales/lang/es.ts
index 801c2ca3..18a2d46f 100644
--- a/src/locales/lang/es.ts
+++ b/src/locales/lang/es.ts
@@ -384,5 +384,6 @@ const msg = {
unhealthyExpression: "Unhealthy Expression",
traceDesc:
"The trace segment serves as a representation of a trace portion executed within one single OS process, such as a JVM. It comprises a collection of spans, typically associated with and collected from a single request or execution context.",
+ tabExpressions: "Tab Expressions",
};
export default msg;
diff --git a/src/locales/lang/zh.ts b/src/locales/lang/zh.ts
index 3225a3ac..36962afc 100644
--- a/src/locales/lang/zh.ts
+++ b/src/locales/lang/zh.ts
@@ -382,5 +382,6 @@ const msg = {
unhealthyExpression: "非健康表达式",
traceDesc:
"Trace Segment代表在单一操作系统进程（例如JVM）中执行的追踪部分。它包含了一组跨度（spans），这些跨度通常与单一请求或执行上下文关联。",
+ tabExpressions: "Tab表达式",
};
export default msg;
diff --git a/src/store/data.ts b/src/store/data.ts
index 43d0d4d2..24749b4d 100644
--- a/src/store/data.ts
+++ b/src/store/data.ts
@@ -14,13 +14,15 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
+import { WidgetType } from "@/views/dashboard/data";
+
export const NewControl = {
x: 0,
y: 0,
w: 24,
h: 12,
i: "0",
- type: "Widget",
+ type: WidgetType.Widget,
};
export const TextConfig = {
fontColor: "white",
@@ -39,15 +41,15 @@ export const TimeRangeConfig = {
};
export const ControlsTypes = [
- "Trace",
- "Profile",
- "Log",
- "DemandLog",
- "Ebpf",
- "NetworkProfiling",
- "ThirdPartyApp",
- "ContinuousProfiling",
- "TaskTimeline",
+ WidgetType.Trace,
+ WidgetType.Profile,
+ WidgetType.Log,
+ WidgetType.DemandLog,
+ WidgetType.Ebpf,
+ WidgetType.NetworkProfiling,
+ WidgetType.ThirdPartyApp,
+ WidgetType.ContinuousProfiling,
+ WidgetType.TaskTimeline,
];
export enum EBPFProfilingTriggerType {
FIXED_TIME = "FIXED_TIME",
diff --git a/src/store/modules/dashboard.ts b/src/store/modules/dashboard.ts
index 5fd55921..6aa3da63 100644
--- a/src/store/modules/dashboard.ts
+++ b/src/store/modules/dashboard.ts
@@ -25,7 +25,7 @@ import { NewControl, TextConfig, TimeRangeConfig, ControlsTypes } from "../data"
import type { AxiosResponse } from "axios";
import { ElMessage } from "element-plus";
import { useI18n } from "vue-i18n";
-import { EntityType, MetricModes } from "@/views/dashboard/data";
+import { EntityType, MetricModes, WidgetType } from "@/views/dashboard/data";
interface DashboardState {
showConfig: boolean;
layout: LayoutConfig[];
@@ -78,7 +78,7 @@ export const dashboardStore = defineStore({
setCurrentDashboard(item: DashboardItem) {
this.currentDashboard = item;
},
- addControl(type: string) {
+ addControl(type: WidgetType) {
const arr = this.layout.map((d: Recordable) => Number(d.i));
let index = String(Math.max(...arr) + 1);
if (!this.layout.length) {
@@ -93,10 +93,10 @@ export const dashboardStore = defineStore({
metrics: [""],
};
- if (type === "Widget") {
+ if (type === WidgetType.Widget) {
newItem.metricMode = MetricModes.Expression;
}
- if (type === "Tab") {
+ if (type === WidgetType.Tab) {
newItem.h = 36;
newItem.activedTabIndex = 0;
newItem.children = [
@@ -110,7 +110,7 @@ export const dashboardStore = defineStore({
},
];
}
- if (type === "Topology") {
+ if (type === WidgetType.Topology) {
newItem.h = 36;
newItem.graph = {
showDepth: true,
@@ -120,11 +120,11 @@ export const dashboardStore = defineStore({
if (ControlsTypes.includes(type)) {
newItem.h = 36;
}
- if (type === "Text") {
+ if (type === WidgetType.Text) {
newItem.h = 6;
newItem.graph = TextConfig;
}
- if (type === "TimeRange") {
+ if (type === WidgetType.TimeRange) {
newItem.w = 8;
newItem.h = 6;
newItem.graph = TimeRangeConfig;
@@ -149,7 +149,7 @@ export const dashboardStore = defineStore({
};
this.layout[idx].children?.push(i);
},
- addTabControls(type: string) {
+ addTabControls(type: WidgetType) {
const activedGridItem = this.activedGridItem.split("-")[0];
const idx = this.layout.findIndex((d: LayoutConfig) => d.i === activedGridItem);
if (idx < 0) {
@@ -171,10 +171,10 @@ export const dashboardStore = defineStore({
metricTypes: [""],
metrics: [""],
};
- if (type === "Widget") {
+ if (type === WidgetType.Widget) {
newItem.metricMode = MetricModes.Expression;
}
- if (type === "Topology") {
+ if (type === WidgetType.Topology) {
newItem.h = 32;
newItem.graph = {
showDepth: true,
@@ -184,11 +184,11 @@ export const dashboardStore = defineStore({
if (ControlsTypes.includes(type)) {
newItem.h = 32;
}
- if (type === "Text") {
+ if (type === WidgetType.Text) {
newItem.h = 6;
newItem.graph = TextConfig;
}
- if (type === "TimeRange") {
+ if (type === WidgetType.TimeRange) {
newItem.w = 8;
newItem.h = 6;
newItem.graph = TextConfig;
@@ -292,7 +292,7 @@ export const dashboardStore = defineStore({
},
setWidget(param: LayoutConfig) {
for (let i = 0; i < this.layout.length; i++) {
- if (this.layout[i].type === "Tab") {
+ if (this.layout[i].type === WidgetType.Tab) {
if ((this.layout[i].children || []).length) {
for (const child of this.layout[i].children || []) {
if (child.children && child.children.length) {
diff --git a/src/styles/theme.scss b/src/styles/theme.scss
index 12b1bbed..e17ab4bb 100644
--- a/src/styles/theme.scss
+++ b/src/styles/theme.scss
@@ -65,7 +65,7 @@ html.dark {
--el-color-primary: #409eff;
--theme-background: #212224;
--font-color: #fafbfc;
- --disabled-color: #ccc;
+ --disabled-color: #999;
--dashboard-tool-bg: #000;
--text-color-placeholder: #ccc;
--border-color: #262629;
diff --git a/src/types/dashboard.d.ts b/src/types/dashboard.d.ts
index 8612c10e..400ccd0b 100644
--- a/src/types/dashboard.d.ts
+++ b/src/types/dashboard.d.ts
@@ -36,7 +36,7 @@ export interface LayoutConfig {
expressions?: string[];
metricTypes?: string[];
typesOfMQE?: string[];
- children?: { name: string; children: LayoutConfig[] }[];
+ children?: { name: string; children: LayoutConfig[]; expression?: string; enable?: boolean }[];
activedTabIndex?: number;
metricConfig?: MetricConfigOpt[];
id?: string;
diff --git a/src/views/dashboard/List.vue b/src/views/dashboard/List.vue
index 25b4997a..d1c372dd 100644
--- a/src/views/dashboard/List.vue
+++ b/src/views/dashboard/List.vue
@@ -139,6 +139,7 @@ limitations under the License. -->
import { saveFile, readFile } from "@/utils/file";
import { EntityType } from "./data";
import { isEmptyObject } from "@/utils/is";
+ import { WidgetType } from "@/views/dashboard/data";
/*global Nullable*/
const { t } = useI18n();
@@ -271,12 +272,23 @@ limitations under the License. -->
if (!(child.metricConfig && child.metricConfig.length)) {
delete child.metricConfig;
}
- if (child.type === "Tab") {
+ if (child.type === WidgetType.Tab) {
for (const item of child.children || []) {
optimizeTemplate(item.children);
}
}
- if (["Trace", "Topology", "Tab", "Profile", "Ebpf", "Log"].includes(child.type)) {
+ if (
+ (
+ [
+ WidgetType.Trace,
+ WidgetType.Topology,
+ WidgetType.Tab,
+ WidgetType.Profile,
+ WidgetType.Ebpf,
+ WidgetType.Log,
+ ] as string[]
+ ).includes(child.type)
+ ) {
delete child.widget;
}
}
diff --git a/src/views/dashboard/configuration/Tab.vue b/src/views/dashboard/configuration/Tab.vue
new file mode 100644
index 00000000..4bf394af
--- /dev/null
+++ b/src/views/dashboard/configuration/Tab.vue
@@ -0,0 +1,110 @@
+<!-- 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>
+ <div class="item">
+ <span class="label">{{ t("tabExpressions") }}</span>
+ <div class="mt-10" v-for="(child, index) in widgetTabs || []" :key="index">
+ <span class="name">{{ child.name }}</span>
+ <el-input class="input" size="small" v-model="expressions[child.name]" @change="changeExpression(child.name)" />
+ </div>
+ </div>
+ <div class="footer">
+ <el-button size="small" @click="cancelConfig">
+ {{ t("cancel") }}
+ </el-button>
+ <el-button size="small" type="primary" @click="applyConfig">
+ {{ t("apply") }}
+ </el-button>
+ </div>
+</template>
+<script lang="ts" setup>
+ import { useI18n } from "vue-i18n";
+ import { reactive, computed } from "vue";
+ import { useDashboardStore } from "@/store/modules/dashboard";
+ import { ElMessage } from "element-plus";
+ import { WidgetType, ListEntity } from "@/views/dashboard/data";
+
+ const { t } = useI18n();
+ const dashboardStore = useDashboardStore();
+ const originConfig = dashboardStore.selectedGrid;
+ const expressions = reactive<{ [key: string]: string }>({});
+ const widgetTabs = computed(() =>
+ (dashboardStore.selectedGrid.children || []).filter((child: any) =>
+ child.children.find(
+ (item: any) =>
+ item.type === WidgetType.Widget &&
+ !(Object.keys(ListEntity).includes(item.graph.type as string) && child.children.length === 1),
+ ),
+ ),
+ );
+
+ for (const child of originConfig.children || []) {
+ expressions[child.name] = child.expression || "";
+ }
+ function changeExpression(name: string) {
+ if (expressions[name] && !expressions[name].includes("is_present")) {
+ ElMessage.error("Only support the is_present function");
+ return;
+ }
+ const children = JSON.parse(JSON.stringify(dashboardStore.selectedGrid.children || []));
+
+ for (const item of children) {
+ if (item.name === name) {
+ item.expression = expressions[name];
+ }
+ }
+
+ dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, children });
+ }
+ function applyConfig() {
+ dashboardStore.setConfigPanel(false);
+ dashboardStore.setConfigs(dashboardStore.selectedGrid);
+ }
+
+ function cancelConfig() {
+ dashboardStore.selectWidget(originConfig);
+ dashboardStore.setConfigPanel(false);
+ }
+</script>
+<style lang="scss" scoped>
+ .label {
+ font-size: 13px;
+ font-weight: 500;
+ display: block;
+ margin-bottom: 5px;
+ }
+
+ .item {
+ margin-bottom: 10px;
+ }
+
+ .input {
+ width: 500px;
+ }
+
+ .footer {
+ position: fixed;
+ bottom: 0;
+ right: 0;
+ border-top: 1px solid $border-color-primary;
+ padding: 10px;
+ text-align: right;
+ width: 100%;
+ background-color: $theme-background;
+ }
+
+ .name {
+ width: 180px;
+ display: inline-block;
+ }
+</style>
diff --git a/src/views/dashboard/configuration/index.ts b/src/views/dashboard/configuration/index.ts
index aadb8f33..aa4b8c85 100644
--- a/src/views/dashboard/configuration/index.ts
+++ b/src/views/dashboard/configuration/index.ts
@@ -22,8 +22,10 @@ import Event from "./Event.vue";
import TimeRange from "./TimeRange.vue";
import ThirdPartyApp from "./ThirdPartyApp.vue";
import ContinuousProfiling from "./ContinuousProfiling.vue";
+import Tab from "./Tab.vue";
export default {
+ Tab,
Text,
Widget,
Topology,
diff --git a/src/views/dashboard/controls/Tab.vue b/src/views/dashboard/controls/Tab.vue
index 18977897..2460defb 100644
--- a/src/views/dashboard/controls/Tab.vue
+++ b/src/views/dashboard/controls/Tab.vue
@@ -15,29 +15,41 @@ limitations under the License. -->
<template>
<div class="flex-h tab-header">
<div class="tabs scroll_bar_style" @click="handleClick">
- <span
- v-for="(child, idx) in data.children || []"
- :key="idx"
- :class="{ active: activeTabIndex === idx }"
- @click="clickTabs($event, idx)"
- >
- <input
- @click="editTabName($event, idx)"
- v-model="child.name"
- placeholder="Please input"
- class="tab-name"
- :readonly="isNaN(editTabIndex) && !canEditTabName"
- :class="{ view: !canEditTabName }"
+ <template v-for="(child, idx) in data.children || []">
+ <span
+ :key="idx"
+ :class="{ active: activeTabIndex === idx }"
+ @click="clickTabs($event, idx)"
+ v-if="child.enable !== false"
+ >
+ <input
+ @click="editTabName($event, idx)"
+ v-model="child.name"
+ placeholder="Please input"
+ class="tab-name"
+ :readonly="isNaN(editTabIndex) && !canEditTabName"
+ :class="{ view: !canEditTabName }"
+ :style="{ width: getStringWidth(child.name) + 'px' }"
+ />
+ <Icon
+ v-show="activeTabIndex === idx"
+ size="sm"
+ iconName="cancel"
+ @click="deleteTabItem($event, idx)"
+ v-if="dashboardStore.editMode && canEditTabName"
+ />
+ </span>
+ </template>
+ <template v-for="(child, idx) in data.children || []">
+ <span
+ :key="idx"
:style="{ width: getStringWidth(child.name) + 'px' }"
- />
- <Icon
- v-show="activeTabIndex === idx"
- size="sm"
- iconName="cancel"
- @click="deleteTabItem($event, idx)"
- v-if="dashboardStore.editMode && canEditTabName"
- />
- </span>
+ v-if="child.enable === false"
+ class="tab-diabled"
+ >
+ {{ child.name }}
+ </span>
+ </template>
<span class="tab-icons">
<el-tooltip content="Copy Link" placement="bottom">
<i @click="copyLink">
@@ -56,10 +68,13 @@ limitations under the License. -->
<div class="operations" v-if="dashboardStore.editMode">
<el-dropdown placement="bottom" trigger="click" :width="200">
<span class="icon-operation">
- <Icon iconName="ellipsis_v" size="middle" />
+ <Icon class="icon-tool" iconName="ellipsis_v" size="middle" />
</span>
<template #dropdown>
<el-dropdown-menu>
+ <el-dropdown-item @click="editConfig">
+ <span>{{ t("edit") }}</span>
+ </el-dropdown-item>
<el-dropdown-item @click="canEditTabName = true">
<span class="edit-tab">{{ t("editTab") }}</span>
</el-dropdown-item>
@@ -112,8 +127,9 @@ limitations under the License. -->
import type { LayoutConfig } from "@/types/dashboard";
import { useDashboardStore } from "@/store/modules/dashboard";
import controls from "./tab";
- import { dragIgnoreFrom } from "../data";
+ import { dragIgnoreFrom, WidgetType } from "../data";
import copy from "@/utils/copy";
+ import { useExpressionsQueryProcessor } from "@/hooks/useExpressionsProcessor";
const props = {
data: {
@@ -137,13 +153,17 @@ limitations under the License. -->
const editTabIndex = ref<number>(NaN); // edit tab item name
const canEditTabName = ref<boolean>(false);
const needQuery = ref<boolean>(false);
-
- dashboardStore.setActiveTabIndex(activeTabIndex);
const l = dashboardStore.layout.findIndex((d: LayoutConfig) => d.i === props.data.i);
+
+ dashboardStore.setActiveTabIndex(activeTabIndex.value);
if (dashboardStore.layout[l].children.length) {
- dashboardStore.setCurrentTabItems(dashboardStore.layout[l].children[activeTabIndex.value].children);
+ const tab = dashboardStore.layout[l].children[activeTabIndex.value];
+ dashboardStore.setCurrentTabItems(
+ tab.enable === false ? [] : dashboardStore.layout[l].children[activeTabIndex.value].children,
+ );
dashboardStore.setActiveTabIndex(activeTabIndex.value, props.data.i);
}
+ queryExpressions();
function clickTabs(e: Event, idx: number) {
e.stopPropagation();
@@ -224,6 +244,53 @@ limitations under the License. -->
copy(path);
}
document.body.addEventListener("click", handleClick, false);
+
+ function editConfig() {
+ dashboardStore.setConfigPanel(true);
+ dashboardStore.selectWidget(props.data);
+ }
+
+ async function queryExpressions() {
+ const tabsProps = props.data;
+ const metrics = [];
+ for (const child of tabsProps.children || []) {
+ child.expression && metrics.push(child.expression);
+ }
+ if (!metrics.length) {
+ return;
+ }
+ const params: { [key: string]: any } = (await useExpressionsQueryProcessor({ metrics })) || {};
+ for (const child of tabsProps.children || []) {
+ if (params.source[child.expression || ""]) {
+ child.enable =
+ !!Number(params.source[child.expression || ""]) &&
+ !!child.children.find((item: { type: string }) => item.type === WidgetType.Widget);
+ } else {
+ child.enable = true;
+ }
+ }
+
+ dashboardStore.setConfigs(tabsProps);
+ if (((props.data.children || [])[activeTabIndex.value] || {}).enable === false) {
+ const index = (props.data.children || []).findIndex((tab: any) => tab.enable !== false) || 0;
+ const items = ((props.data.children || [])[index] || {}).children;
+ dashboardStore.setCurrentTabItems(items || []);
+ dashboardStore.activeGridItem(0);
+ activeTabIndex.value = index;
+ dashboardStore.setActiveTabIndex(activeTabIndex.value);
+ needQuery.value = true;
+ }
+ }
+
+ watch(
+ () => (props.data.children || []).map((d: any) => d.expression),
+ (old: string[], data: string[]) => {
+ if (JSON.stringify(data) === JSON.stringify(old)) {
+ return;
+ }
+ queryExpressions();
+ },
+ );
watch(
() => dashboardStore.activedGridItem,
(data) => {
@@ -266,6 +333,7 @@ limitations under the License. -->
clickTabs,
copyLink,
getStringWidth,
+ editConfig,
...toRefs(props),
activeTabWidget,
dashboardStore,
@@ -288,6 +356,7 @@ limitations under the License. -->
white-space: nowrap;
overflow-y: hidden;
padding: 0 10px;
+ display: inline-flex;
span {
display: inline-block;
@@ -310,6 +379,18 @@ limitations under the License. -->
background-color: $theme-background;
}
+ .tab-diabled {
+ max-width: 150px;
+ outline: none;
+ color: $disabled-color;
+ font-style: normal;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ margin-right: 20px;
+ background-color: $theme-background;
+ cursor: not-allowed;
+ }
+
.tab-icons {
i {
margin-right: 3px;
diff --git a/src/views/dashboard/data.ts b/src/views/dashboard/data.ts
index 16f84074..379b19fe 100644
--- a/src/views/dashboard/data.ts
+++ b/src/views/dashboard/data.ts
@@ -188,87 +188,104 @@ export const SortOrder = [
{ label: "DES", value: "DES" },
{ label: "ASC", value: "ASC" },
];
+export enum WidgetType {
+ Widget = "Widget",
+ Topology = "Topology",
+ Tab = "Tab",
+ Text = "Text",
+ TimeRange = "TimeRange",
+ Trace = "Trace",
+ Log = "Log",
+ Profile = "Profile",
+ Ebpf = "Ebpf",
+ DemandLog = "DemandLog",
+ Event = "Event",
+ NetworkProfiling = "NetworkProfiling",
+ ContinuousProfiling = "ContinuousProfiling",
+ ThirdPartyApp = "ThirdPartyApp",
+ TaskTimeline = "TaskTimeline",
+}
export const AllTools = [
- { name: "playlist_add", content: "Add Widget", id: "addWidget" },
- { name: "all_inbox", content: "Add Tabs", id: "addTab" },
- { name: "library_books", content: "Add Text", id: "addText" },
- { name: "device_hub", content: "Add Topology", id: "addTopology" },
- { name: "merge", content: "Add Trace", id: "addTrace" },
- { name: "assignment", content: "Add Log", id: "addLog" },
- { name: "add_iframe", content: "Add Iframe", id: "addIframe" },
+ { name: "playlist_add", content: "Add Widget", id: WidgetType.Widget },
+ { name: "all_inbox", content: "Add Tabs", id: WidgetType.Tab },
+ { name: "library_books", content: "Add Text", id: WidgetType.Text },
+ { name: "device_hub", content: "Add Topology", id: WidgetType.Topology },
+ { name: "merge", content: "Add Trace", id: WidgetType.Trace },
+ { name: "assignment", content: "Add Log", id: WidgetType.Log },
+ { name: "add_iframe", content: "Add Iframe", id: WidgetType.ThirdPartyApp },
];
export const ServiceTools = [
- { name: "playlist_add", content: "Add Widget", id: "addWidget" },
- { name: "all_inbox", content: "Add Tabs", id: "addTab" },
- { name: "library_books", content: "Add Text", id: "addText" },
- { name: "device_hub", content: "Add Topology", id: "addTopology" },
- { name: "merge", content: "Add Trace", id: "addTrace" },
- { name: "timeline", content: "Add Trace Profiling", id: "addProfile" },
- { name: "insert_chart", content: "Add eBPF Profiling", id: "addEbpf" },
- { name: "continuous_profiling", content: "Add Continuous Profiling", id: "addContinuousProfiling" },
- { name: "assignment", content: "Add Log", id: "addLog" },
- { name: "demand", content: "Add On Demand Log", id: "addDemandLog" },
- { name: "event", content: "Add Event", id: "addEvent" },
- { name: "add_iframe", content: "Add Iframe", id: "addIframe" },
+ { name: "playlist_add", content: "Add Widget", id: WidgetType.Widget },
+ { name: "all_inbox", content: "Add Tabs", id: WidgetType.Tab },
+ { name: "library_books", content: "Add Text", id: WidgetType.Text },
+ { name: "device_hub", content: "Add Topology", id: WidgetType.Topology },
+ { name: "merge", content: "Add Trace", id: WidgetType.Trace },
+ { name: "timeline", content: "Add Trace Profiling", id: WidgetType.Profile },
+ { name: "insert_chart", content: "Add eBPF Profiling", id: WidgetType.Ebpf },
+ { name: "continuous_profiling", content: "Add Continuous Profiling", id: WidgetType.ContinuousProfiling },
+ { name: "assignment", content: "Add Log", id: WidgetType.Log },
+ { name: "demand", content: "Add On Demand Log", id: WidgetType.DemandLog },
+ { name: "event", content: "Add Event", id: WidgetType.Event },
+ { name: "add_iframe", content: "Add Iframe", id: WidgetType.ThirdPartyApp },
];
export const InstanceTools = [
- { name: "playlist_add", content: "Add Widget", id: "addWidget" },
- { name: "all_inbox", content: "Add Tabs", id: "addTab" },
- { name: "library_books", content: "Add Text", id: "addText" },
- { name: "merge", content: "Add Trace", id: "addTrace" },
- { name: "assignment", content: "Add Log", id: "addLog" },
- { name: "demand", content: "Add On Demand Log", id: "addDemandLog" },
- { name: "event", content: "Add Event", id: "addEvent" },
- { name: "add_iframe", content: "Add Iframe", id: "addIframe" },
+ { name: "playlist_add", content: "Add Widget", id: WidgetType.Widget },
+ { name: "all_inbox", content: "Add Tabs", id: WidgetType.Tab },
+ { name: "library_books", content: "Add Text", id: WidgetType.Text },
+ { name: "merge", content: "Add Trace", id: WidgetType.Trace },
+ { name: "assignment", content: "Add Log", id: WidgetType.Log },
+ { name: "demand", content: "Add On Demand Log", id: WidgetType.DemandLog },
+ { name: "event", content: "Add Event", id: WidgetType.Event },
+ { name: "add_iframe", content: "Add Iframe", id: WidgetType.ThirdPartyApp },
{
name: "timeline",
content: "Add Network Profiling",
- id: "addNetworkProfiling",
+ id: WidgetType.NetworkProfiling,
},
];
export const EndpointTools = [
- { name: "playlist_add", content: "Add Widget", id: "addWidget" },
- { name: "all_inbox", content: "Add Tabs", id: "addTab" },
- { name: "library_books", content: "Add Text", id: "addText" },
- { name: "device_hub", content: "Add Topology", id: "addTopology" },
- { name: "merge", content: "Add Trace", id: "addTrace" },
- { name: "assignment", content: "Add Log", id: "addLog" },
- { name: "event", content: "Add Event", id: "c" },
- { name: "add_iframe", content: "Add Iframe", id: "addIframe" },
+ { name: "playlist_add", content: "Add Widget", id: WidgetType.Widget },
+ { name: "all_inbox", content: "Add Tabs", id: WidgetType.Tab },
+ { name: "library_books", content: "Add Text", id: WidgetType.Text },
+ { name: "device_hub", content: "Add Topology", id: WidgetType.Topology },
+ { name: "merge", content: "Add Trace", id: WidgetType.Trace },
+ { name: "assignment", content: "Add Log", id: WidgetType.Log },
+ { name: "event", content: "Add Event", id: WidgetType.Event },
+ { name: "add_iframe", content: "Add Iframe", id: WidgetType.ThirdPartyApp },
];
export const ProcessTools = [
- { name: "playlist_add", content: "Add Widget", id: "addWidget" },
- { name: "all_inbox", content: "Add Tabs", id: "addTab" },
- { name: "task_timeline", content: "Add Task Timeline", id: "addTaskTimeline" },
- { name: "library_books", content: "Add Text", id: "addText" },
- { name: "add_iframe", content: "Add Iframe", id: "addIframe" },
+ { name: "playlist_add", content: "Add Widget", id: WidgetType.Widget },
+ { name: "all_inbox", content: "Add Tabs", id: WidgetType.Tab },
+ { name: "task_timeline", content: "Add Task Timeline", id: WidgetType.TaskTimeline },
+ { name: "library_books", content: "Add Text", id: WidgetType.Text },
+ { name: "add_iframe", content: "Add Iframe", id: WidgetType.ThirdPartyApp },
];
export const ProcessRelationTools = [
- { name: "playlist_add", content: "Add Widget", id: "addWidget" },
- { name: "all_inbox", content: "Add Tabs", id: "addTab" },
- { name: "library_books", content: "Add Text", id: "addText" },
- { name: "add_iframe", content: "Add Iframe", id: "addIframe" },
+ { name: "playlist_add", content: "Add Widget", id: WidgetType.Widget },
+ { name: "all_inbox", content: "Add Tabs", id: WidgetType.Tab },
+ { name: "library_books", content: "Add Text", id: WidgetType.Text },
+ { name: "add_iframe", content: "Add Iframe", id: WidgetType.ThirdPartyApp },
];
export const ServiceRelationTools = [
- { name: "playlist_add", content: "Add Widget", id: "addWidget" },
- { name: "all_inbox", content: "Add Tabs", id: "addTab" },
- { name: "library_books", content: "Add Text", id: "addText" },
- { name: "device_hub", content: "Add Topology", id: "addTopology" },
- { name: "add_iframe", content: "Add Iframe", id: "addIframe" },
+ { name: "playlist_add", content: "Add Widget", id: WidgetType.Widget },
+ { name: "all_inbox", content: "Add Tabs", id: WidgetType.Tab },
+ { name: "library_books", content: "Add Text", id: WidgetType.Text },
+ { name: "device_hub", content: "Add Topology", id: WidgetType.Topology },
+ { name: "add_iframe", content: "Add Iframe", id: WidgetType.ThirdPartyApp },
];
export const EndpointRelationTools = [
- { name: "playlist_add", content: "Add Widget", id: "addWidget" },
- { name: "all_inbox", content: "Add Tabs", id: "addTab" },
- { name: "library_books", content: "Add Text", id: "addText" },
- { name: "add_iframe", content: "Add Iframe", id: "addIframe" },
+ { name: "playlist_add", content: "Add Widget", id: WidgetType.Widget },
+ { name: "all_inbox", content: "Add Tabs", id: WidgetType.Tab },
+ { name: "library_books", content: "Add Text", id: WidgetType.Text },
+ { name: "add_iframe", content: "Add Iframe", id: WidgetType.ThirdPartyApp },
];
export const InstanceRelationTools = [
- { name: "playlist_add", content: "Add Widget", id: "addWidget" },
- { name: "all_inbox", content: "Add Tabs", id: "addTab" },
- { name: "library_books", content: "Add Text", id: "addText" },
- { name: "device_hub", content: "Add Topology", id: "addTopology" },
- { name: "add_iframe", content: "Add Iframe", id: "addIframe" },
+ { name: "playlist_add", content: "Add Widget", id: WidgetType.Widget },
+ { name: "all_inbox", content: "Add Tabs", id: WidgetType.Tab },
+ { name: "library_books", content: "Add Text", id: WidgetType.Text },
+ { name: "device_hub", content: "Add Topology", id: WidgetType.Topology },
+ { name: "add_iframe", content: "Add Iframe", id: WidgetType.ThirdPartyApp },
];
export const ScopeType = [
diff --git a/src/views/dashboard/graphs/TopList.vue b/src/views/dashboard/graphs/TopList.vue
index c3c5377c..434a18ae 100644
--- a/src/views/dashboard/graphs/TopList.vue
+++ b/src/views/dashboard/graphs/TopList.vue
@@ -65,6 +65,7 @@ limitations under the License. -->
import { TextColors } from "@/views/dashboard/data";
import Trace from "@/views/dashboard/related/trace/Index.vue";
import { QueryOrders, Status, RefIdTypes, ProtocolTypes, ExpressionResultType } from "../data";
+ import { WidgetType } from "@/views/dashboard/data";
/*global defineProps */
const props = defineProps({
@@ -90,7 +91,7 @@ limitations under the License. -->
const { t } = useI18n();
const showTrace = ref<boolean>(false);
const traceOptions = ref<{ type: string; filters?: unknown }>({
- type: "Trace",
+ type: WidgetType.Trace,
});
const refIdType = computed(
() => (props.config.relatedTrace && props.config.relatedTrace.refIdType) || RefIdTypes[0].value,
diff --git a/src/views/dashboard/panel/Layout.vue b/src/views/dashboard/panel/Layout.vue
index 222f2ddf..b12b18b0 100644
--- a/src/views/dashboard/panel/Layout.vue
+++ b/src/views/dashboard/panel/Layout.vue
@@ -58,7 +58,12 @@ limitations under the License. -->
function clickGrid(item: LayoutConfig, event: Event) {
dashboardStore.activeGridItem(item.i);
dashboardStore.selectWidget(item);
- if (item.type === "Tab" && (event.target as HTMLDivElement)?.className !== "tab-layout") {
+ if (
+ item.type === "Tab" &&
+ !["operations", "tab-layout"].includes((event.target as HTMLDivElement)?.className) &&
+ (event.target as HTMLDivElement)?.classList[2] !== "icon-tool" &&
+ (event.target as HTMLDivElement)?.nodeName !== "use"
+ ) {
dashboardStore.setActiveTabIndex(0);
}
}
diff --git a/src/views/dashboard/panel/Tool.vue b/src/views/dashboard/panel/Tool.vue
index f584a057..c8bff5fd 100644
--- a/src/views/dashboard/panel/Tool.vue
+++ b/src/views/dashboard/panel/Tool.vue
@@ -143,7 +143,8 @@ limitations under the License. -->
ServiceRelationTools,
ProcessTools,
ProcessRelationTools,
- } from "../data";
+ WidgetType,
+ } from "@/views/dashboard/data";
import { useSelectorStore } from "@/store/modules/selectors";
import { ElMessage } from "element-plus";
import type { Option } from "@/types/app";
@@ -154,7 +155,7 @@ limitations under the License. -->
const selectorStore = useSelectorStore();
const appStore = useAppStoreWithOut();
const params = useRoute().params;
- const toolIcons = ref<{ name: string; content: string; id: string }[]>(AllTools);
+ const toolIcons = ref<{ name: string; content: string; id: WidgetType }[]>(AllTools);
const loading = ref<boolean>(false);
const states = reactive<{
destService: string;
@@ -397,7 +398,7 @@ limitations under the License. -->
loading.value = false;
}
- async function clickIcons(t: { id: string; content: string; name: string }) {
+ async function clickIcons(t: { id: WidgetType; content: string; name: string }) {
if (dashboardStore.selectedGrid && dashboardStore.selectedGrid.type === "Tab") {
setTabControls(t.id);
return;
@@ -409,106 +410,20 @@ limitations under the License. -->
setControls(t.id);
}
- function setTabControls(id: string) {
- switch (id) {
- case "addWidget":
- dashboardStore.addTabControls("Widget");
- break;
- case "addTrace":
- dashboardStore.addTabControls("Trace");
- break;
- case "addLog":
- dashboardStore.addTabControls("Log");
- break;
- case "addProfile":
- dashboardStore.addTabControls("Profile");
- break;
- case "addEbpf":
- dashboardStore.addTabControls("Ebpf");
- break;
- case "addTopology":
- dashboardStore.addTabControls("Topology");
- break;
- case "addText":
- dashboardStore.addTabControls("Text");
- break;
- case "addDemandLog":
- dashboardStore.addTabControls("DemandLog");
- break;
- case "addEvent":
- dashboardStore.addTabControls("Event");
- break;
- case "addNetworkProfiling":
- dashboardStore.addTabControls("NetworkProfiling");
- break;
- case "addContinuousProfiling":
- dashboardStore.addTabControls("ContinuousProfiling");
- break;
- case "addTimeRange":
- dashboardStore.addTabControls("TimeRange");
- break;
- case "addIframe":
- dashboardStore.addTabControls("ThirdPartyApp");
- break;
- case "addTaskTimeline":
- dashboardStore.addTabControls("TaskTimeline");
- break;
- default:
- ElMessage.info("Don't support this control");
- break;
+ function setTabControls(id: WidgetType) {
+ if (!WidgetType[id]) {
+ ElMessage.info("Don't support this control");
+ return;
}
+ dashboardStore.addTabControls(id);
}
- function setControls(id: string) {
- switch (id) {
- case "addWidget":
- dashboardStore.addControl("Widget");
- break;
- case "addTab":
- dashboardStore.addControl("Tab");
- break;
- case "addTrace":
- dashboardStore.addControl("Trace");
- break;
- case "addProfile":
- dashboardStore.addControl("Profile");
- break;
- case "addEbpf":
- dashboardStore.addControl("Ebpf");
- break;
- case "addLog":
- dashboardStore.addControl("Log");
- break;
- case "addTopology":
- dashboardStore.addControl("Topology");
- break;
- case "addText":
- dashboardStore.addControl("Text");
- break;
- case "addDemandLog":
- dashboardStore.addControl("DemandLog");
- break;
- case "addEvent":
- dashboardStore.addControl("Event");
- break;
- case "addNetworkProfiling":
- dashboardStore.addControl("NetworkProfiling");
- break;
- case "addContinuousProfiling":
- dashboardStore.addControl("ContinuousProfiling");
- break;
- case "addTimeRange":
- dashboardStore.addControl("TimeRange");
- break;
- case "addIframe":
- dashboardStore.addControl("ThirdPartyApp");
- break;
- case "addTaskTimeline":
- dashboardStore.addControl("TaskTimeline");
- break;
- default:
- dashboardStore.addControl("Widget");
+ function setControls(id: WidgetType) {
+ if (!WidgetType[id]) {
+ ElMessage.info("Don't support this control");
+ return;
}
+ dashboardStore.addControl(id);
}
async function fetchPods(type: string, serviceId: string, setPod: boolean, param?: { keyword?: string }) {
diff --git a/src/views/dashboard/related/event/Content.vue b/src/views/dashboard/related/event/Content.vue
index 022435e2..31d02363 100644
--- a/src/views/dashboard/related/event/Content.vue
+++ b/src/views/dashboard/related/event/Content.vue
@@ -29,6 +29,7 @@ limitations under the License. -->
import { useAppStoreWithOut } from "@/store/modules/app";
import dateFormatStep, { dateFormatTime } from "@/utils/dateFormat";
import getLocalTime from "@/utils/localtime";
+ import { WidgetType } from "@/views/dashboard/data";
const eventStore = useEventStore();
/*global defineProps, Nullable */
@@ -122,7 +123,9 @@ limitations under the License. -->
}[],
dashboard: LayoutConfig[],
) {
- const widgets = dashboard.filter((d: { type: string }) => ["Trace", "Log"].includes(d.type));
+ const widgets = dashboard.filter((d: { type: string }) =>
+ ([WidgetType.Trace, WidgetType.Log] as string[]).includes(d.type),
+ );
const index = items[0];
const i = events[index - 1 || 0];
for (const widget of widgets) {
diff --git a/src/views/dashboard/related/log/LogTable/LogService.vue b/src/views/dashboard/related/log/LogTable/LogService.vue
index 522ff81d..137d9f19 100644
--- a/src/views/dashboard/related/log/LogTable/LogService.vue
+++ b/src/views/dashboard/related/log/LogTable/LogService.vue
@@ -41,6 +41,7 @@ limitations under the License. -->
import { useDashboardStore } from "@/store/modules/dashboard";
import type { LayoutConfig } from "@/types/dashboard";
import { dateFormat } from "@/utils/dateFormat";
+ import { WidgetType } from "@/views/dashboard/data";
/*global defineProps, defineEmits, Recordable */
const props = defineProps({
@@ -78,7 +79,7 @@ limitations under the License. -->
traceId: id,
id: props.data.serviceId || "",
},
- "Trace",
+ WidgetType.Trace,
);
}
</script>
diff --git a/src/views/dashboard/related/trace/Detail.vue b/src/views/dashboard/related/trace/Detail.vue
index 53f5ce7d..f58f80fc 100644
--- a/src/views/dashboard/related/trace/Detail.vue
+++ b/src/views/dashboard/related/trace/Detail.vue
@@ -101,6 +101,7 @@ limitations under the License. -->
import type { LayoutConfig } from "@/types/dashboard";
import { dateFormat } from "@/utils/dateFormat";
import { useAppStoreWithOut } from "@/store/modules/app";
+ import { WidgetType } from "@/views/dashboard/data";
const props = {
serviceId: { type: String, default: "" },
@@ -145,7 +146,7 @@ limitations under the License. -->
traceId: traceId.value || traceStore.currentTrace.traceIds[0].value,
id: props.serviceId || undefined,
},
- "Log",
+ WidgetType.Log,
);
}
return {
diff --git a/tsconfig.app.json b/tsconfig.app.json
index 7854119f..bd9f7e54 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -19,7 +19,6 @@
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
"exclude": ["src/**/__tests__/*"],
"compilerOptions": {
- "composite": true,
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
diff --git a/tsconfig.vitest.json b/tsconfig.vitest.json
index a3c32408..6a78a1b3 100644
--- a/tsconfig.vitest.json
+++ b/tsconfig.vitest.json
@@ -18,7 +18,6 @@
"extends": "./tsconfig.app.json",
"exclude": [],
"compilerOptions": {
- "composite": true,
"lib": [],
"types": ["node", "jsdom"]
}