feat: add trace

src/views/dashboard/configuration/Topology.vue

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <WidgetOptions />
-  <TopologyOptions />
+  <StyleOptions />
   <div class="footer">
     <el-button size="small">
       {{ t("cancel") }}
@@ -26,8 +26,8 @@ limitations under the License. -->
 </template>
 <script lang="ts" setup>
 import { useI18n } from "vue-i18n";
-import WidgetOptions from "./WidgetOptions.vue";
+import WidgetOptions from "./components/WidgetOptions.vue";
-import TopologyOptions from "./graph-styles/TopologyItem.vue";
+import StyleOptions from "./topology/StyleOptions.vue";
 import { useDashboardStore } from "@/store/modules/dashboard";
 
 const { t } = useI18n();

src/views/dashboard/configuration/Widget.vue

@@ -77,9 +77,9 @@ import { useAppStoreWithOut } from "@/store/modules/app";
 import { Option } from "@/types/app";
 import graphs from "../graphs";
 import configs from "./graph-styles";
-import WidgetOptions from "./WidgetOptions.vue";
+import WidgetOptions from "./components/WidgetOptions.vue";
-import StandardOptions from "./StandardOptions.vue";
+import StandardOptions from "./widget/StandardOptions.vue";
-import MetricOptions from "./MetricOptions.vue";
+import MetricOptions from "./widget/MetricOptions.vue";
 
 export default defineComponent({
   name: "ConfigEdit",

src/views/dashboard/configuration/widget/MetricOptions.vue

@@ -95,7 +95,7 @@ import {
   ChartTypes,
   PodsChartTypes,
   TableEntity,
-} from "../data";
+} from "../../data";
 import { ElMessage } from "element-plus";
 import Icon from "@/components/Icon.vue";
 import { useQueryProcessor, useSourceProcessor } from "@/hooks/useProcessor";

src/views/dashboard/configuration/widget/StandardOptions.vue

@@ -118,7 +118,7 @@ limitations under the License. -->
 <script lang="ts" setup>
 import { reactive } from "vue";
 import { useI18n } from "vue-i18n";
-import { SortOrder } from "../data";
+import { SortOrder } from "../../data";
 import { useDashboardStore } from "@/store/modules/dashboard";
 
 const dashboardStore = useDashboardStore();

src/views/dashboard/controls/Trace.vue

@@ -0,0 +1,18 @@
+<!-- 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="header">trace</div>
+  <div class="content">content</div>
+</template>

src/views/dashboard/controls/index.ts

@@ -0,0 +1,22 @@
+/**
+ * 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.
+ */
+import Topology from "./Topology.vue";
+import Tab from "./Tab.vue";
+import Widget from "./Widget.vue";
+import Trace from "./Trace.vue";
+
+export default { Tab, Widget, Trace, Topology };

src/views/dashboard/panel/Layout.vue

@@ -40,13 +40,11 @@ limitations under the License. -->
 import { defineComponent } from "vue";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { LayoutConfig } from "@/types/dashboard";
-import Widget from "../controls/Widget.vue";
+import controls from "../controls/index";
-import Tab from "../controls/Tab.vue";
-import Topology from "../controls/Topology.vue";
 
 export default defineComponent({
   name: "Layout",
-  components: { Widget, Tab, Topology },
+  components: { ...controls },
   setup() {
     const dashboardStore = useDashboardStore();
     function layoutUpdatedEvent(newLayout: LayoutConfig[]) {