feat: add expressions

src/locales/lang/en.ts

@@ -379,5 +379,6 @@ const msg = {
   saveReload: "Save and reload the page",
   document: "Documentation",
   metricMode: "Metric Mode",
+  addExpressions: "Add Expressions",
 };
 export default msg;

src/locales/lang/es.ts

@@ -379,5 +379,6 @@ const msg = {
   saveReload: "Save and reload the page",
   document: "Documentation",
   metricMode: "Metric Mode",
+  addExpressions: "Add Expressions",
 };
 export default msg;

src/locales/lang/zh.ts

@@ -376,6 +376,7 @@ const msg = {
   menusManagement: "菜单",
   saveReload: "保存并重新加载页面",
   document: "文档",
-  metricMode: "Metric Mode",
+  metricMode: "指标模式",
+  addExpressions: "添加表达式",
 };
 export default msg;

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

@@ -1,27 +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="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/Settings.vue

@@ -47,7 +47,14 @@ limitations under the License. -->
         <Metrics :type="configType" :metrics="states.linkServerMetrics" @update="changeLinkServerMetrics" />
       </el-popover>
     </div>
-    <Expressions v-if="isExpression" />
+    <div v-if="isExpression">
+      <Tags
+        :tags="states.linkServerExpressions"
+        :vertical="true"
+        :text="t('addExpressions')"
+        @change="(param) => changeExpressions({ linkServerExpressions: param })"
+      />
+    </div>
     <Selector
       v-else
       class="inputs"
@@ -70,7 +77,14 @@ limitations under the License. -->
           <Metrics :type="configType" :metrics="states.linkClientMetrics" @update="changeLinkClientMetrics" />
         </el-popover>
       </div>
-      <Expressions v-if="isExpression" />
+      <div v-if="isExpression">
+        <Tags
+          :tags="states.linkClientExpressions"
+          :vertical="true"
+          :text="t('addExpressions')"
+          @change="(param) => changeExpressions({ linkClientExpressions: param })"
+        />
+      </div>
       <Selector
         v-else
         class="inputs"
@@ -131,11 +145,17 @@ 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>
-    <Expressions v-if="isExpression" />
+    <div v-if="isExpression">
+      <Tags
+        :tags="states.nodeExpressions"
+        :vertical="true"
+        :text="t('addExpressions')"
+        @change="(param) => changeExpressions({ nodeExpressions: param })"
+      />
+    </div>
     <Selector
       v-else
       class="inputs"
@@ -209,7 +229,6 @@ limitations under the License. -->
   import type { DashboardItem, MetricConfigOpt } from "@/types/dashboard";
   import { EntityType, LegendOpt, MetricsType, MetricModes } from "../../../data";
   import Metrics from "./Metrics.vue";
-  import Expressions from "./Expressions.vue";
 
   /*global defineEmits */
   const emit = defineEmits(["update", "updateNodes"]);
@@ -240,6 +259,9 @@ limitations under the License. -->
     linkMetricList: Option[];
     linkDashboards: (DashboardItem & { label: string; value: string })[];
     nodeDashboards: (DashboardItem & { label: string; value: string })[];
+    linkServerExpressions: string[];
+    linkClientExpressions: string[];
+    nodeExpressions: string[];
   }>({
     linkDashboard: selectedGrid.linkDashboard || "",
     nodeDashboard: selectedGrid.nodeDashboard || [],
@@ -250,6 +272,9 @@ limitations under the License. -->
     linkMetricList: [],
     linkDashboards: [],
     nodeDashboards: [],
+    linkServerExpressions: [],
+    linkClientExpressions: [],
+    nodeExpressions: [],
   });
   const l = selectedGrid.legend && selectedGrid.legend.length;
   const legend = reactive<{
@@ -454,6 +479,10 @@ limitations under the License. -->
   function changeMetricMode() {
     console.log(isExpression.value);
   }
+  function changeExpressions(params: { [key: string]: string[] }) {
+    const key: string = Object.keys(params || {})[0];
+    (states as any)[key] = params && params[key];
+  }
 </script>
 <style lang="scss" scoped>
   .link-settings {