feat: add topology control

src/assets/icons/topology.svg

@@ -0,0 +1,15 @@
+<!-- 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. -->
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1645251603089" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1435" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M900.032 646.016h-56.064V502.976a16 16 0 0 0-16-16H544v-96h62.976c22.144 0 40-17.92 40-40V161.024a40 40 0 0 0-40-40H417.024a40 40 0 0 0-40 40v189.952c0 22.144 17.92 40 40 40H480v96H195.968a16 16 0 0 0-16 16v143.04h-55.936a38.016 38.016 0 0 0-38.016 38.016v176c0 20.928 17.024 37.952 37.952 37.952h176a38.016 38.016 0 0 0 38.016-38.016v-176a38.016 38.016 0 0 0-37.952-37.952h-56V550.976H480v95.04h-56a38.016 38.016 0 0 0-38.016 38.016v176c0 20.928 17.024 37.952 38.016 37.952h176a38.016 38.016 0 0 0 38.016-38.016v-176a38.016 38.016 0 0 0-38.016-37.952H544V550.976h236.032v95.04h-56.064a38.016 38.016 0 0 0-37.952 38.016v176c0 20.928 17.024 37.952 38.016 37.952h176a38.016 38.016 0 0 0 37.952-38.016v-176a38.016 38.016 0 0 0-38.016-37.952zM440.96 184.96h141.952v141.952H441.024V185.024zM278.016 838.016H145.92V705.92h132.032v132.032z m299.968 0H446.08V705.92H577.92v132.032z m300.032 0h-132.032V705.92h132.032v132.032z" p-id="1436" fill="#707070"></path></svg>

src/locales/lang/en.ts

@@ -73,7 +73,7 @@ const msg = {
   fontSize: "Font Size",
   showBackground: "Show Background",
   areaOpacity: "Area Opacity",
-  editGraph: "Edit Graph Options",
+  editGraph: "Edit Options",
   dashboardName: "Select Dashboard Name",
   linkDashboard: "Dashboard name related with topology calls",
   linkServerMetrics: "Server metrics related with topology calls",

src/locales/lang/zh.ts

@@ -72,7 +72,7 @@ const msg = {
   fontSize: "字体大小",
   showBackground: "显示背景",
   areaOpacity: "透明度",
-  editGraph: "编辑图表选项",
+  editGraph: "选项编辑",
   dashboardName: "选择仪表板名称",
   linkDashboard: "拓扑线关联的仪表板名称",
   linkServerMetrics: "拓扑线服务端关联的指标",

src/store/data.ts

@@ -101,27 +101,41 @@ export const ConfigData2: any = {
   },
   children: [],
 };
-export const ConfigData3: any = {
-  x: 0,
-  y: 0,
-  w: 8,
-  h: 12,
-  i: "0",
-  metrics: ["all_heatmap"],
-  metricTypes: ["readHeatMap"],
-  type: "Widget",
-  widget: {
-    title: "all_heatmap",
-    tips: "Tooltip",
+export const ConfigData3: any = [
+  {
+    x: 0,
+    y: 0,
+    w: 2,
+    h: 6,
+    i: "1",
+    type: "Topology",
+    widget: {
+      title: "Topology",
+      tips: "Topology",
+    },
   },
-  graph: {
-    type: "HeatMap",
+  {
+    x: 2,
+    y: 0,
+    w: 8,
+    h: 12,
+    i: "0",
+    metrics: ["all_heatmap"],
+    metricTypes: ["readHeatMap"],
+    type: "Widget",
+    widget: {
+      title: "all_heatmap",
+      tips: "Tooltip",
+    },
+    graph: {
+      type: "HeatMap",
+    },
+    standard: {
+      unit: "min",
+    },
+    children: [],
   },
-  standard: {
-    unit: "min",
-  },
-  children: [],
-};
+];
 export const ConfigData4: any = {
   x: 0,
   y: 0,

src/store/modules/dashboard.ts

@@ -164,7 +164,7 @@ export const dashboardStore = defineStore({
         this.layout = [ConfigData2];
       }
       if (type == "All") {
-        this.layout = [ConfigData3];
+        this.layout = ConfigData3;
       }
       if (type == "Service") {
         this.layout = [ConfigData];

src/views/dashboard/Edit.vue

@@ -23,7 +23,8 @@ limitations under the License. -->
       :destroy-on-close="true"
       @closed="dashboardStore.setConfigPanel(false)"
     >
-      <config-edit />
+      <TopologyConfig v-if="dashboardStore.selectedGrid.type === 'Topology'" />
+      <Widget v-else />
     </el-dialog>
     <el-dialog
       v-model="dashboardStore.showTopology"
@@ -41,7 +42,8 @@ import { useI18n } from "vue-i18n";
 import GridLayout from "./panel/Layout.vue";
 // import { LayoutConfig } from "@/types/dashboard";
 import Tool from "./panel/Tool.vue";
-import ConfigEdit from "./configuration/ConfigEdit.vue";
+import Widget from "./configuration/Widget.vue";
+import TopologyConfig from "./configuration/Topology.vue";
 import Topology from "./related/topology/Index.vue";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { useAppStoreWithOut } from "@/store/modules/app";

src/views/dashboard/configuration/Topology.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>topology</template>
+<script lang="ts" setup>
+import { ref } from "vue";
+</script>

src/views/dashboard/controls/Topology.vue

@@ -0,0 +1,113 @@
+<!-- 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="topology">
+    <div class="header flex-h">
+      <div>title</div>
+      <div>
+        <el-tooltip :content="'tips'">
+          <Icon iconName="info_outline" size="sm" class="operation" />
+        </el-tooltip>
+        <el-popover placement="bottom" trigger="click" :width="100">
+          <template #reference>
+            <span>
+              <Icon iconName="ellipsis_v" size="middle" class="operation" />
+            </span>
+          </template>
+          <div class="tools" @click="editConfig">
+            <span>{{ t("edit") }}</span>
+          </div>
+          <div class="tools">
+            <span>{{ t("delete") }}</span>
+          </div>
+        </el-popover>
+      </div>
+    </div>
+    <div class="body" @click="ViewTopology">
+      <Icon iconName="topology" size="xl" />
+      <div>Topology</div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import type { PropType } from "vue";
+import { useI18n } from "vue-i18n";
+import { useDashboardStore } from "@/store/modules/dashboard";
+import { LayoutConfig } from "@/types/dashboard";
+/*global defineProps */
+const props = defineProps({
+  data: {
+    type: Object as PropType<LayoutConfig>,
+    default: () => ({ widget: {} }),
+  },
+  activeIndex: { type: String, default: "" },
+});
+
+const { t } = useI18n();
+const dashboardStore = useDashboardStore();
+function editConfig() {
+  dashboardStore.setConfigPanel(true);
+  dashboardStore.selectWidget(props.data);
+}
+function ViewTopology() {
+  dashboardStore.setTopology(true);
+}
+</script>
+<style lang="scss" scoped>
+.topology {
+  font-size: 12px;
+  height: 100%;
+}
+
+.header {
+  height: 30px;
+  padding: 5px;
+  width: 100%;
+  border-bottom: 1px solid #eee;
+  justify-content: space-between;
+}
+
+.operation {
+  cursor: pointer;
+}
+
+.tools {
+  padding: 5px 0;
+  color: #999;
+  cursor: pointer;
+  position: relative;
+  text-align: center;
+
+  &:hover {
+    color: #409eff;
+    background-color: #eee;
+  }
+}
+
+.body {
+  padding: 5px 10px;
+  width: 100%;
+  height: calc(100% - 30px);
+  cursor: pointer;
+}
+
+.no-data {
+  font-size: 14px;
+  color: #888;
+  width: 100%;
+  text-align: center;
+  padding-top: 20px;
+}
+</style>

src/views/dashboard/panel/Layout.vue

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

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

@@ -110,7 +110,7 @@ limitations under the License. -->
   </div>
   <div class="legend-settings" v-show="isServer">
     <h5 class="title">{{ t("legendSettings") }}</h5>
-    <div class="label">{{ t("conditions") }} (&&)</div>
+    <div class="label">{{ t("conditions") }}</div>
     <div v-for="(metric, index) of legend.metric" :key="metric.name + index">
       <Selector
         class="item"