update topology config

src/components/Selector.vue

@@ -49,7 +49,7 @@ const props = defineProps({
     default: () => [],
   },
   value: {
-    type: [Array, String] as PropType<string[] | string>,
+    type: [Array, String, Number] as PropType<any>,
     default: () => [],
   },
   size: { type: null, default: "default" },

src/store/modules/dashboard.ts

@@ -27,6 +27,7 @@ import { Duration } from "@/types/app";
 import { AxiosResponse } from "axios";
 import { ElMessage } from "element-plus";
 import { useI18n } from "vue-i18n";
+import { EntityType } from "@/views/dashboard/data";
 interface DashboardState {
   showConfig: boolean;
   layout: LayoutConfig[];
@@ -94,12 +95,13 @@ export const dashboardStore = defineStore({
       if (type === "Topology") {
         newItem.h = 36;
         newItem.graph = {
-          fontColor: "white",
-          backgroundColor: "green",
-          iconTheme: true,
-          content: "Topology",
-          fontSize: 18,
           showDepth: true,
+          depth:
+            this.entity === EntityType[1].value
+              ? 2
+              : this.entity === EntityType[0].value
+              ? 1
+              : 3,
         };
       }
       if (type === "Trace" || type === "Profile" || type === "Log") {

src/types/dashboard.ts

@@ -129,6 +129,6 @@ export interface TopologyConfig {
   iconTheme?: boolean;
   content?: string;
   fontSize?: number;
-  depth?: string;
+  depth?: number;
   showDepth?: boolean;
 }

src/views/dashboard/Edit.vue

@@ -27,7 +27,8 @@ limitations under the License. -->
       :destroy-on-close="true"
       @closed="dashboardStore.setConfigPanel(false)"
     >
-      <Widget />
+      <TopologyConfig v-if="dashboardStore.selectedGrid.type === 'Topology'" />
+      <WidgetConfig v-else />
     </el-dialog>
   </div>
 </template>
@@ -37,7 +38,8 @@ import { useI18n } from "vue-i18n";
 import { useRoute } from "vue-router";
 import GridLayout from "./panel/Layout.vue";
 import Tool from "./panel/Tool.vue";
-import Widget from "./configuration/Widget.vue";
+import TopologyConfig from "./configuration/Topology.vue";
+import WidgetConfig from "./configuration/Widget.vue";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { useAppStoreWithOut } from "@/store/modules/app";
 

src/views/dashboard/configuration/Topology.vue

@@ -0,0 +1,94 @@
+<!-- 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("showDepth") }}</span>
+    <el-switch
+      v-model="showDepth"
+      active-text="Yes"
+      inactive-text="No"
+      @change="changeConfig({ showDepth })"
+    />
+  </div>
+  <div class="item" v-show="showDepth">
+    <span class="label">{{ t("defaultDepth") }}</span>
+    <Selector
+      class="input"
+      size="small"
+      :value="depth"
+      :options="DepthList"
+      @change="changeDepth($event)"
+    />
+  </div>
+  <div class="footer">
+    <el-button size="small">
+      {{ t("cancel") }}
+    </el-button>
+    <el-button size="small" type="primary" @click="applyConfig">
+      {{ t("apply") }}
+    </el-button>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref } from "vue";
+import { useI18n } from "vue-i18n";
+import { useDashboardStore } from "@/store/modules/dashboard";
+import { DepthList } from "../data";
+import { Option } from "@/types/app";
+
+const { t } = useI18n();
+const dashboardStore = useDashboardStore();
+const { selectedGrid } = dashboardStore;
+const showDepth = ref<boolean>(selectedGrid.graph.showDepth);
+const depth = ref<number>(selectedGrid.graph.depth || 2);
+
+function applyConfig() {
+  dashboardStore.setConfigs(dashboardStore.selectedGrid);
+  dashboardStore.setConfigPanel(false);
+}
+function changeConfig(param: { [key: string]: unknown }) {
+  const { selectedGrid } = dashboardStore;
+  const graph = {
+    ...selectedGrid.graph,
+    ...param,
+  };
+  dashboardStore.selectWidget({ ...selectedGrid, graph });
+}
+function changeDepth(opt: Option[] | any) {
+  const val = opt[0].value;
+  changeConfig({ depth: val });
+}
+</script>
+<style lang="scss" scoped>
+.footer {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  border-top: 1px solid #eee;
+  padding: 10px;
+  text-align: right;
+  width: 100%;
+  background-color: #fff;
+}
+
+.label {
+  font-size: 13px;
+  font-weight: 500;
+  display: block;
+  margin-bottom: 5px;
+}
+
+.item {
+  margin: 10px 0;
+}
+</style>

src/views/dashboard/configuration/Widget.vue

@@ -81,10 +81,10 @@ import { useDashboardStore } from "@/store/modules/dashboard";
 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 StandardOptions from "./StandardOptions.vue";
-import MetricOptions from "./MetricOptions.vue";
+import configs from "./widget/graph-styles";
+import WidgetOptions from "./widget/WidgetOptions.vue";
+import StandardOptions from "./widget/StandardOptions.vue";
+import MetricOptions from "./widget/MetricOptions.vue";
 
 export default defineComponent({
   name: "ConfigEdit",

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

@@ -96,7 +96,7 @@ import {
   ChartTypes,
   PodsChartTypes,
   ListEntity,
-} 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

@@ -117,7 +117,7 @@ limitations under the License. -->
 <script lang="ts" setup>
 import { ref } from "vue";
 import { useI18n } from "vue-i18n";
-import { SortOrder } from "../data";
+import { SortOrder } from "../../data";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { useQueryProcessor, useSourceProcessor } from "@/hooks/useProcessor";
 import { ElMessage } from "element-plus";

src/views/dashboard/controls/Topology.vue

@@ -34,7 +34,7 @@ limitations under the License. -->
         </div>
       </el-popover>
     </div>
-    <Topology />
+    <Topology :config="props.data" />
   </div>
 </template>
 <script lang="ts" setup>

src/views/dashboard/data.ts

@@ -229,19 +229,10 @@ export enum LegendOpt {
   VALUE = "value",
   CONDITION = "condition",
 }
-export const DepthList = ["1", "2", "3", "4", "5"].map((item: string) => ({
+export const DepthList = [1, 2, 3, 4, 5].map((item: number) => ({
   value: item,
   label: item,
 }));
-export const Colors: any = {
-  green: "#67C23A",
-  blue: "#409EFF",
-  red: "#F56C6C",
-  grey: "#909399",
-  white: "#fff",
-  black: "#000",
-  orange: "#E6A23C",
-};
 export const Status = [
   { label: "All", value: "ALL" },
   { label: "Success", value: "SUCCESS" },

src/views/dashboard/related/topology/Index.vue

@@ -13,18 +13,27 @@ 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>
-  <PodTopology v-if="isSankey" />
-  <Graph v-else />
+  <PodTopology :config="config" v-if="isSankey" />
+  <Graph :config="config" v-else />
 </template>
 <script lang="ts" setup>
+import type { PropType } from "vue";
 import { ref } from "vue";
 import Graph from "./components/Graph.vue";
 import PodTopology from "./components/PodTopology.vue";
 import { EntityType } from "../../data";
 import { useDashboardStore } from "@/store/modules/dashboard";
 
+/*global defineProps */
+defineProps({
+  config: {
+    type: Object as PropType<any>,
+    default: () => ({ graph: {} }),
+  },
+});
 const dashboardStore = useDashboardStore();
+console.log(dashboardStore.entity);
 const isSankey = ref<boolean>(
-  [EntityType[2].value, EntityType[4].value].includes(dashboardStore.entity)
+  [EntityType[2].value, EntityType[3].value].includes(dashboardStore.entity)
 );
 </script>

src/views/dashboard/related/topology/components/Graph.vue

@@ -23,7 +23,7 @@ limitations under the License. -->
       <Settings @update="updateSettings" @updateNodes="freshNodes" />
     </div>
     <div class="tool">
-      <span v-show="dashboardStore.selectedGrid.showDepth">
+      <span v-show="config.graph.showDepth">
         <span class="label">{{ t("currentDepth") }}</span>
         <Selector
           class="inputs"
@@ -63,6 +63,7 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
+import type { PropType } from "vue";
 import { ref, onMounted, onBeforeUnmount, reactive } from "vue";
 import { useI18n } from "vue-i18n";
 import * as d3 from "d3";
@@ -83,7 +84,13 @@ import Settings from "./Settings.vue";
 import { Option } from "@/types/app";
 import { Service } from "@/types/selector";
 
-/*global Nullable */
+/*global Nullable, defineProps */
+const props = defineProps({
+  config: {
+    type: Object as PropType<any>,
+    default: () => ({ graph: {} }),
+  },
+});
 const { t } = useI18n();
 const selectorStore = useSelectorStore();
 const topologyStore = useTopologyStore();
@@ -110,9 +117,10 @@ const items = ref<
   { id: "inspect", title: "Inspect", func: handleInspect },
   { id: "alarm", title: "Alarm", func: handleGoAlarm },
 ]);
-const depth = ref<string>(dashboardStore.selectedGrid.depth || "2");
+const depth = ref<number>(props.config.graph.depth || 2);
 
 onMounted(async () => {
+  console.log(props.config.graph);
   loading.value = true;
   const resp = await getTopology();
   loading.value = false;

src/views/dashboard/related/topology/components/PodTopology.vue

@@ -16,8 +16,7 @@ limitations under the License. -->
   <div class="tool">
     <span
       v-show="
-        dashboardStore.entity === EntityType[2].value &&
-        dashboardStore.selectedGrid.showDepth
+        dashboardStore.entity === EntityType[2].value && config.graph.showDepth
       "
     >
       <span class="label">{{ t("currentDepth") }}</span>
@@ -72,6 +71,7 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
+import type { PropType } from "vue";
 import { useI18n } from "vue-i18n";
 import { ref, onMounted, reactive } from "vue";
 import { Option } from "@/types/app";
@@ -84,6 +84,13 @@ import Sankey from "./Sankey.vue";
 import Settings from "./Settings.vue";
 import router from "@/router";
 
+/*global defineProps */
+const props = defineProps({
+  config: {
+    type: Object as PropType<any>,
+    default: () => ({ graph: {} }),
+  },
+});
 const { t } = useI18n();
 const dashboardStore = useDashboardStore();
 const selectorStore = useSelectorStore();
@@ -94,14 +101,14 @@ const width = ref<number>(document.body.clientWidth);
 const showSettings = ref<boolean>(false);
 const settings = ref<any>({});
 const operationsPos = reactive<{ x: number; y: number }>({ x: NaN, y: NaN });
-const depth = ref<string>(dashboardStore.selectedGrid.depth || "3");
+const depth = ref<number>(props.config.graph.depth || 3);
 const items = [
   { id: "inspect", title: "Inspect", func: inspect },
   { id: "dashboard", title: "View Dashboard", func: goDashboard },
   { id: "alarm", title: "View Alarm", func: goAlarm },
 ];
 
-onMounted(async () => {
+onMounted(() => {
   loadTopology(selectorStore.currentPod && selectorStore.currentPod.id);
 });
 
@@ -196,7 +203,7 @@ async function getTopology(id: string) {
         Number(depth.value)
       );
       break;
-    case EntityType[4].value:
+    case EntityType[3].value:
       resp = await topologyStore.getInstanceTopology();
       break;
   }
@@ -221,7 +228,7 @@ function handleClick(event: any) {
   top: 60px;
   right: 10px;
   width: 400px;
-  height: 700px;
+  height: 500px;
   background-color: #2b3037;
   overflow: auto;
   padding: 0 15px;