feat: add metric mode

src/locales/lang/en.ts

@@ -378,5 +378,6 @@ const msg = {
   menus: "Menus",
   saveReload: "Save and reload the page",
   document: "Documentation",
+  metricMode: "Metric Mode",
 };
 export default msg;

src/locales/lang/es.ts

@@ -378,5 +378,6 @@ const msg = {
   menus: "Menus",
   saveReload: "Save and reload the page",
   document: "Documentation",
+  metricMode: "Metric Mode",
 };
 export default msg;

src/locales/lang/zh.ts

@@ -376,5 +376,6 @@ const msg = {
   menusManagement: "菜单",
   saveReload: "保存并重新加载页面",
   document: "文档",
+  metricMode: "Metric Mode",
 };
 export default msg;

src/types/components.d.ts

@@ -7,7 +7,6 @@ declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     DateCalendar: typeof import('./../components/DateCalendar.vue')['default']
     ElButton: typeof import('element-plus/es')['ElButton']
-    ElCard: typeof import('element-plus/es')['ElCard']
     ElCollapse: typeof import('element-plus/es')['ElCollapse']
     ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
     ElDialog: typeof import('element-plus/es')['ElDialog']
@@ -18,13 +17,11 @@ declare module '@vue/runtime-core' {
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
-    ElLink: typeof import('element-plus/es')['ElLink']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElMenuItemGroup: typeof import('element-plus/es')['ElMenuItemGroup']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
-    ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
     ElPopover: typeof import('element-plus/es')['ElPopover']
     ElProgress: typeof import('element-plus/es')['ElProgress']
     ElRadio: typeof import('element-plus/es')['ElRadio']

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

@@ -0,0 +1,27 @@
+<!-- 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="flex-v"> expressions </div>
+</template>
+<script lang="ts" setup>
+  import { useAppStoreWithOut } from "@/store/modules/app";
+</script>
+<style lang="scss" scoped>
+  .event {
+    flex-grow: 1;
+    height: 100%;
+    font-size: $font-size-smaller;
+  }
+</style>

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

@@ -667,7 +667,7 @@ limitations under the License. -->
       padding: 0 15px;
       border-radius: 3px;
       color: $disabled-color;
-      border: 1px solid $disabled-color;
+      border: 1px solid #eee;
       background-color: $theme-background;
       box-shadow: #eee 1px 2px 10px;
       transition: all 0.5ms linear;

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

@@ -22,6 +22,7 @@ limitations under the License. -->
         :options="DepthList"
         placeholder="Select a option"
         @change="changeDepth"
+        size="small"
       />
     </span>
     <span class="switch-icon ml-5" title="Settings" @click="setConfig" v-if="dashboardStore.editMode">

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

@@ -13,6 +13,17 @@ 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="mb-10 mt-20">
+    <h5 class="title">{{ t("metricMode") }}</h5>
+    <el-switch
+      v-model="isExpression"
+      class="mb-5"
+      active-text="Expressions"
+      inactive-text="General"
+      size="small"
+      @change="changeMetricMode"
+    />
+  </div>
   <div class="link-settings">
     <h5 class="title">{{ t("callSettings") }}</h5>
     <div class="label">{{ t("linkDashboard") }}</div>
@@ -33,7 +44,8 @@ limitations under the License. -->
             <Icon class="cp ml-5" iconName="mode_edit" size="middle" />
           </span>
         </template>
-        <Metrics :type="configType" :metrics="states.linkServerMetrics" @update="changeLinkServerMetrics" />
+        <Expressions v-if="isExpression" />
+        <Metrics v-else :type="configType" :metrics="states.linkServerMetrics" @update="changeLinkServerMetrics" />
       </el-popover>
     </div>
     <Selector
@@ -54,7 +66,8 @@ limitations under the License. -->
               <Icon class="cp ml-5" iconName="mode_edit" size="middle" />
             </span>
           </template>
-          <Metrics :type="configType" :metrics="states.linkClientMetrics" @update="changeLinkClientMetrics" />
+          <Expressions v-if="isExpression" />
+          <Metrics v-else :type="configType" :metrics="states.linkClientMetrics" @update="changeLinkClientMetrics" />
         </el-popover>
       </div>
       <Selector
@@ -116,6 +129,7 @@ limitations under the License. -->
             <Icon class="cp ml-5" iconName="mode_edit" size="middle" />
           </span>
         </template>
+        <Expressions v-if="isExpression" />
         <Metrics :type="configType" :metrics="states.nodeMetrics" @update="changeNodeMetrics" />
       </el-popover>
     </div>
@@ -189,8 +203,9 @@ limitations under the License. -->
   import { useQueryTopologyMetrics } from "@/hooks/useMetricsProcessor";
   import type { Node } from "@/types/topology";
   import type { DashboardItem, MetricConfigOpt } from "@/types/dashboard";
-  import { EntityType, LegendOpt, MetricsType } from "../../../data";
+  import { EntityType, LegendOpt, MetricsType, MetricModes } from "../../../data";
   import Metrics from "./Metrics.vue";
+  import Expressions from "./Expressions.vue";
 
   /*global defineEmits */
   const emit = defineEmits(["update", "updateNodes"]);
@@ -198,6 +213,7 @@ limitations under the License. -->
   const dashboardStore = useDashboardStore();
   const topologyStore = useTopologyStore();
   const { selectedGrid } = dashboardStore;
+  const isExpression = ref<boolean>(dashboardStore.selectedGrid.metricMode === MetricModes.Expression ? true : false);
   const nodeDashboard =
     selectedGrid.nodeDashboard && selectedGrid.nodeDashboard.length ? selectedGrid.nodeDashboard : "";
   const isService = [EntityType[0].value, EntityType[1].value].includes(dashboardStore.entity);
@@ -431,6 +447,9 @@ limitations under the License. -->
   function setConfigType(type: string) {
     configType.value = type;
   }
+  function changeMetricMode() {
+    console.log(isExpression.value);
+  }
 </script>
 <style lang="scss" scoped>
   .link-settings {
@@ -454,6 +473,7 @@ limitations under the License. -->
 
   .title {
     margin-bottom: 0;
+    margin-top: 0;
     color: #666;
   }