feat: update structure and add hierarchy services config

src/types/dashboard.d.ts

@@ -39,6 +39,7 @@ export interface LayoutConfig {
   children?: { name: string; children: LayoutConfig[]; expression?: string; enable?: boolean }[];
   activedTabIndex?: number;
   metricConfig?: MetricConfigOpt[];
+  hierarchyServicesConfig?: HierarchyServicesConfig[];
   id?: string;
   associate?: { widgetId: string }[];
   eventAssociate?: boolean;
@@ -82,6 +83,12 @@ export type MetricConfigOpt = {
   detailLabel?: string;
 };
 
+export interface HierarchyServicesConfig {
+  layer: string;
+  nodeExpressions: string[];
+  expressionsConfig: MetricConfigOpt[];
+}
+
 export interface WidgetConfig {
   name?: string;
   title?: string;

src/types/topology.d.ts

@@ -14,6 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 export interface Call {
   source: string | any;
   target: string | any;

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

@@ -18,9 +18,9 @@ limitations under the License. -->
 </template>
 <script lang="ts" setup>
   import type { PropType } from "vue";
-  import ServiceMap from "./components/ServiceMap.vue";
-  import PodMap from "./components/PodMap.vue";
-  import { EntityType } from "../../data";
+  import ServiceMap from "./service/ServiceMap.vue";
+  import PodMap from "./pod/PodMap.vue";
+  import { EntityType } from "@/views/dashboard/data";
   import { useDashboardStore } from "@/store/modules/dashboard";
 
   /*global defineProps */

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

@@ -1,38 +0,0 @@
-<!-- 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="hierarchy-services-settings">
-    <h5 class="title">{{ t("hierarchyServicesSettings") }}</h5>
-    <div class="label">{{ t("nodeMetrics") }}</div>
-  </div>
-</template>
-<script lang="ts" setup>
-  import { reactive, ref } from "vue";
-  import { useI18n } from "vue-i18n";
-
-  const { t } = useI18n();
-</script>
-<style lang="scss" scoped>
-  .title {
-    color: var(--sw-topology-color);
-    margin-bottom: 0;
-  }
-
-  .label {
-    font-size: $font-size-smaller;
-    margin-top: 10px;
-    color: var(--sw-topology-color);
-  }
-</style>

src/views/dashboard/related/topology/config/HierarchySettings.vue

@@ -0,0 +1,107 @@
+<!-- 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="hierarchy-services-settings">
+    <h5 class="title">{{ t("hierarchyServicesSettings") }}</h5>
+    <div class="label">{{ t("layer") }}</div>
+    <Selector
+      :value="currentConfig.layer || ''"
+      :options="layers"
+      size="small"
+      placeholder="Please select a layer"
+      @change="changeLayer"
+      class="inputs"
+    />
+    <div class="label">{{ t("nodeMetrics") }}</div>
+    <el-popover placement="left" :width="400" trigger="click">
+      <template #reference>
+        <span>
+          <Icon class="cp ml-5" iconName="mode_edit" size="middle" />
+        </span>
+      </template>
+      <Metrics :type="'hierarchyServicesConfig'" :isExpression="true" @update="updateSettings" />
+    </el-popover>
+    <Tags
+      :tags="currentConfig.nodeExpressions"
+      :vertical="true"
+      :text="t('addExpressions')"
+      @change="(param) => changeNodeExpressions(param)"
+    />
+  </div>
+</template>
+<script lang="ts" setup>
+  import { computed, ref } from "vue";
+  import { useI18n } from "vue-i18n";
+  import type { Node, HierarchyServicesConfig } from "@/types/dashboard";
+  import type { Option } from "@/types/app";
+  import { useDashboardStore } from "@/store/modules/dashboard";
+  import { useTopologyStore } from "@/store/modules/topology";
+
+  const emits = defineEmits(["update"]);
+  const { t } = useI18n();
+  const dashboardStore = useDashboardStore();
+  const topologyStore = useTopologyStore();
+  const { hierarchyServicesConfig } = dashboardStore.selectedGrid;
+  const layers = computed<Option[]>(() => {
+    const map = new Map();
+    const arr = topologyStore.nodes.reduce((prev: Option[], next: Node) => {
+      if (next.layer && !map.get(next.layer)) {
+        map.set(next.layer, true);
+        prev.push({ value: next.layer, label: next.layer });
+      }
+      return prev;
+    }, []);
+    return arr;
+  });
+  const currentConfig = ref<HierarchyServicesConfig>(hierarchyServicesConfig(0) || {});
+
+  function changeLayer(opt: Option[]) {
+    const { hierarchyServicesConfig } = dashboardStore.selectedGrid;
+    const layer = opt[0].value;
+
+    currentConfig.value = hierarchyServicesConfig.value.find((d) => d.layer === layer.value) || {};
+  }
+
+  function changeNodeExpressions(param: string[]) {
+    currentConfig.value.nodeExpressions = param;
+  }
+
+  function updateSettings() {
+    const param = {
+      ...dashboardStore.selectedGrid,
+      hierarchyServicesConfig: currentConfig.value,
+    };
+    dashboardStore.selectWidget(param);
+    dashboardStore.setConfigs(param);
+    emits("update", param);
+  }
+</script>
+<style lang="scss" scoped>
+  .title {
+    color: var(--sw-topology-color);
+    margin-bottom: 0;
+  }
+
+  .label {
+    font-size: $font-size-smaller;
+    margin-top: 10px;
+    color: var(--sw-topology-color);
+  }
+
+  .inputs {
+    margin-top: 8px;
+    width: 270px;
+  }
+</style>

src/views/dashboard/related/topology/config/Metrics.vue

@@ -55,7 +55,7 @@ limitations under the License. -->
 <script lang="ts" setup>
   import { ref, computed, watch } from "vue";
   import { useI18n } from "vue-i18n";
-  import { CalculationOpts, MetricModes } from "../../../data";
+  import { CalculationOpts, MetricModes } from "@/views/dashboard/data";
   import { useDashboardStore } from "@/store/modules/dashboard";
   import type { Option } from "element-plus/es/components/select-v2/src/select.types";
 

src/views/dashboard/related/topology/config/Settings.vue

@@ -266,7 +266,7 @@ limitations under the License. -->
     MetricsType,
     MetricModes,
     CallTypes,
-  } from "../../../data";
+  } from "@/views/dashboard/data";
   import type { Option } from "@/types/app";
   import { useQueryTopologyMetrics } from "@/hooks/useMetricsProcessor";
   import { useQueryTopologyExpressionsProcessor } from "@/hooks/useExpressionsProcessor";

src/views/dashboard/related/topology/pod/PodMap.vue

@@ -69,10 +69,10 @@ limitations under the License. -->
   import { useDashboardStore } from "@/store/modules/dashboard";
   import { useSelectorStore } from "@/store/modules/selectors";
   import { useAppStoreWithOut } from "@/store/modules/app";
-  import { EntityType, DepthList, MetricModes, CallTypes } from "../../../data";
+  import { EntityType, DepthList, MetricModes, CallTypes } from "@/views/dashboard/data";
   import { ElMessage } from "element-plus";
   import Sankey from "./Sankey.vue";
-  import Settings from "./Settings.vue";
+  import Settings from "../config/Settings.vue";
   import router from "@/router";
   import getDashboard from "@/hooks/useDashboardsSession";
 

src/views/dashboard/related/topology/pod/Sankey.vue

@@ -23,7 +23,7 @@ limitations under the License. -->
   import type { Node, Call } from "@/types/topology";
   import type { MetricConfigOpt } from "@/types/dashboard";
   import { aggregation } from "@/hooks/useMetricsProcessor";
-  import { MetricModes } from "../../../data";
+  import { MetricModes } from "@/views/dashboard/data";
   import { useAppStoreWithOut } from "@/store/modules/app";
   import { Themes } from "@/constants/data";
 

src/views/dashboard/related/topology/service/HierarchyMap.vue

@@ -96,7 +96,7 @@ limitations under the License. -->
       </span>
     </div>
     <div class="setting" v-if="showSetting && dashboardStore.editMode">
-      <hierachy-settings />
+      <hierarchy-settings />
     </div>
   </div>
 </template>
@@ -105,11 +105,11 @@ limitations under the License. -->
   import { ref, onMounted, watch, computed, nextTick } from "vue";
   import { useI18n } from "vue-i18n";
   import * as d3 from "d3";
-  import type { Node, Call } from "@/types/topology";
+  import type { Node } from "@/types/topology";
   import { useSelectorStore } from "@/store/modules/selectors";
   import { useTopologyStore } from "@/store/modules/topology";
   import { useDashboardStore } from "@/store/modules/dashboard";
-  import { EntityType, MetricModes } from "../../../data";
+  import { EntityType, MetricModes } from "@/views/dashboard/data";
   import router from "@/router";
   import { ElMessage } from "element-plus";
   import type { Service } from "@/types/selector";
@@ -120,9 +120,9 @@ limitations under the License. -->
   import icons from "@/assets/img/icons";
   import { useQueryTopologyMetrics } from "@/hooks/useMetricsProcessor";
   import { layout, changeNode, computeLevels } from "./utils/layout";
-  import zoom from "../../components/utils/zoom";
+  import zoom from "@/views/dashboard/related/components/utils/zoom";
   import { useQueryTopologyExpressionsProcessor } from "@/hooks/useExpressionsProcessor";
-  import HierachySettings from "./HierachySettings.vue";
+  import HierarchySettings from "../config/HierarchySettings.vue";
 
   /*global Nullable, defineProps */
   const props = defineProps({
@@ -188,7 +188,7 @@ limitations under the License. -->
   }
 
   async function update() {
-    await initLegendMetrics();
+    // await initLegendMetrics();
     draw();
     popover.value = d3.select("#popover");
   }

src/views/dashboard/related/topology/service/ServiceMap.vue

@@ -144,10 +144,11 @@ limitations under the License. -->
   import { useSelectorStore } from "@/store/modules/selectors";
   import { useTopologyStore } from "@/store/modules/topology";
   import { useDashboardStore } from "@/store/modules/dashboard";
-  import { EntityType, DepthList, MetricModes, CallTypes } from "../../../data";
+  import { EntityType, DepthList, MetricModes, CallTypes } from "@/views/dashboard/data";
   import router from "@/router";
   import { ElMessage } from "element-plus";
-  import Settings from "./Settings.vue";
+  import Settings from "..HierarchySettings.vue";
+  import HierarchyMap from "./HierarchyMap.vue";
   import type { Option } from "@/types/app";
   import type { Service } from "@/types/selector";
   import { useAppStoreWithOut } from "@/store/modules/app";
@@ -157,10 +158,8 @@ limitations under the License. -->
   import icons from "@/assets/img/icons";
   import { useQueryTopologyMetrics } from "@/hooks/useMetricsProcessor";
   import { layout, computeLevels, changeNode } from "./utils/layout";
-  import zoom from "../../components/utils/zoom";
+  import zoom from "@/views/dashboard/related/components/utils/zoom";
   import { useQueryTopologyExpressionsProcessor } from "@/hooks/useExpressionsProcessor";
-  import HierarchyMap from "./HierarchyMap.vue";
-
   /*global Nullable, defineProps */
   const props = defineProps({
     config: {