feat: add topology config

src/assets/icons/topology-dark.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. -->
+<svg t="1645261422781" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1440" width="48" height="48"><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="1441"></path></svg>

src/assets/icons/topology-light.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. -->
+<svg t="1645261422781" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1440" width="48" height="48"><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="1441" fill="#ffffff"></path></svg>

src/assets/icons/topology.svg

@@ -1,15 +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. -->
-<?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

@@ -87,6 +87,9 @@ const msg = {
   conditions: "Conditions",
   legendSettings: "Legend Settings",
   setLegend: "Set Legend",
+  backgroundColors: "Background Colors",
+  fontColors: "Font Colors",
+  iconTheme: "Icon Theme",
   hourTip: "Select Hour",
   minuteTip: "Select Minute",
   secondTip: "Select Second",

src/locales/lang/zh.ts

@@ -86,6 +86,9 @@ const msg = {
   conditions: "条件",
   legendSettings: "图例设置",
   setLegend: "设置图例",
+  backgroundColors: "背景颜色",
+  fontColors: "字体颜色",
+  iconTheme: "图标主题",
   hourTip: "选择小时",
   minuteTip: "选择分钟",
   secondTip: "选择秒数",

src/store/data.ts

@@ -113,6 +113,13 @@ export const ConfigData3: any = [
       title: "Topology",
       tips: "Topology",
     },
+    graph: {
+      fontColor: "white",
+      backgroundColor: "green",
+      iconTheme: true,
+      content: "Topology",
+      fontSize: 18,
+    },
   },
   {
     x: 2,

src/store/modules/dashboard.ts

@@ -83,6 +83,10 @@ export const dashboardStore = defineStore({
           },
         ];
       }
+      if (type === "Topology") {
+        newWidget.w = 2;
+        newWidget.h = 6;
+      }
       this.layout = this.layout.map((d: LayoutConfig) => {
         d.y = d.y + newWidget.h;
         return d;

src/types/dashboard.ts

@@ -55,7 +55,8 @@ export type GraphConfig =
   | TableConfig
   | EndpointListConfig
   | ServiceListConfig
-  | InstanceListConfig;
+  | InstanceListConfig
+  | TopologyConfig;
 export interface BarConfig {
   type?: string;
   showBackground?: boolean;
@@ -110,3 +111,12 @@ export interface EndpointListConfig {
   dashboardName: string;
   fontSize: number;
 }
+
+export interface TopologyConfig {
+  type?: string;
+  backgroundColor?: string;
+  fontColor?: string;
+  iconTheme?: string;
+  content?: string;
+  fontSize?: number;
+}

src/views/dashboard/configuration/Topology.vue

@@ -12,7 +12,41 @@ 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>
+<template>
+  <WidgetOptions />
+  <TopologyOptions />
+  <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 WidgetOptions from "./WidgetOptions.vue";
+import TopologyOptions from "./graph-styles/Topology.vue";
+import { useDashboardStore } from "@/store/modules/dashboard";
+
+const { t } = useI18n();
+const dashboardStore = useDashboardStore();
+
+function applyConfig() {
+  dashboardStore.setConfigs(dashboardStore.selectedGrid);
+  dashboardStore.setConfigPanel(false);
+}
 </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;
+}
+</style>

src/views/dashboard/configuration/graph-styles/Topology.vue

@@ -0,0 +1,125 @@
+<!-- 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("backgroundColors") }}</span>
+    <Selector
+      :value="backgroundColor"
+      :options="colors"
+      size="small"
+      placeholder="Select a color"
+      class="input"
+      @change="changeConfig({ backgroundColor })"
+    />
+  </div>
+  <div class="item">
+    <span class="label">{{ t("fontSize") }}</span>
+    <el-slider
+      class="slider"
+      v-model="fontSize"
+      show-input
+      input-size="small"
+      :min="12"
+      :max="30"
+      :step="1"
+      @change="changeConfig({ fontSize })"
+    />
+  </div>
+  <div class="item">
+    <span class="label">{{ t("fontColors") }}</span>
+    <Selector
+      :value="fontColor"
+      :options="colors"
+      size="small"
+      placeholder="Select a color"
+      class="input"
+      @change="changeConfig({ fontColor })"
+    />
+  </div>
+  <div class="item">
+    <span class="label">{{ t("iconTheme") }}</span>
+    <el-switch
+      v-model="iconTheme"
+      active-text="Light"
+      inactive-text="Dark"
+      @change="changeConfig({ iconTheme })"
+    />
+  </div>
+  <div class="item">
+    <span class="label">{{ t("content") }}</span>
+    <el-input
+      class="input"
+      v-model="content"
+      size="small"
+      @change="changeConfig({ content })"
+    />
+  </div>
+</template>
+<script lang="ts" setup>
+import { useI18n } from "vue-i18n";
+import { ref } from "vue";
+import { useDashboardStore } from "@/store/modules/dashboard";
+
+const { t } = useI18n();
+const dashboardStore = useDashboardStore();
+const { selectedGrid } = dashboardStore;
+const iconTheme = ref(selectedGrid.graph.iconTheme || true);
+const backgroundColor = ref(selectedGrid.graph.backgroundColor || "green");
+const fontColor = ref(selectedGrid.graph.fontColor || "white");
+const content = ref<string>("");
+const fontSize = ref<number>(selectedGrid.graph.fontSize);
+const colors = [
+  {
+    label: "Green",
+    key: "#67C23A",
+    value: "green",
+  },
+  { label: "Blue", key: "#409EFF", value: "blue" },
+  { label: "Red", key: "#F56C6C", value: "red" },
+  { label: "Grey", key: "#909399", value: "grey" },
+  { label: "White", key: "#fff", value: "white" },
+  { label: "Black", key: "#000", value: "black" },
+  { label: "Orange", key: "#E6A23C", value: "orange" },
+];
+
+function changeConfig(param: { [key: string]: unknown }) {
+  const graph = {
+    ...selectedGrid.graph,
+    ...param,
+  };
+  dashboardStore.selectWidget({ ...selectedGrid, graph });
+}
+</script>
+<style lang="scss" scoped>
+.slider {
+  width: 500px;
+  margin-top: -3px;
+}
+
+.label {
+  font-size: 13px;
+  font-weight: 500;
+  display: block;
+  margin-bottom: 5px;
+}
+
+.input {
+  width: 500px;
+}
+
+.item {
+  margin-bottom: 10px;
+}
+</style>

src/views/dashboard/controls/Topology.vue

@@ -29,15 +29,29 @@ limitations under the License. -->
           <div class="tools" @click="editConfig">
             <span>{{ t("edit") }}</span>
           </div>
-          <div class="tools">
+          <div class="tools" @click="removeTopo">
             <span>{{ t("delete") }}</span>
           </div>
         </el-popover>
       </div>
     </div>
-    <div class="body" @click="ViewTopology">
+    <div
-      <Icon iconName="topology" size="xl" />
+      class="body"
-      <div>Topology</div>
+      @click="ViewTopology"
+      :style="`background: ${Colors[data.graph.backgroundColor]}`"
+    >
+      <Icon
+        :iconName="data.graph.iconTheme ? 'topology-light' : 'topology-dark'"
+        size="middle"
+      />
+      <div
+        :style="{
+          color: Colors[data.graph.fontColor],
+          fontSize: data.graph.fontSize + 'px',
+        }"
+      >
+        {{ data.graph.content }}
+      </div>
     </div>
   </div>
 </template>
@@ -45,16 +59,15 @@ limitations under the License. -->
 import type { PropType } from "vue";
 import { useI18n } from "vue-i18n";
 import { useDashboardStore } from "@/store/modules/dashboard";
-import { LayoutConfig } from "@/types/dashboard";
+import { Colors } from "../data";
 /*global defineProps */
 const props = defineProps({
   data: {
-    type: Object as PropType<LayoutConfig>,
+    type: Object as PropType<any>,
-    default: () => ({ widget: {} }),
+    default: () => ({ graph: {} }),
   },
   activeIndex: { type: String, default: "" },
 });
-
 const { t } = useI18n();
 const dashboardStore = useDashboardStore();
 function editConfig() {
@@ -64,6 +77,9 @@ function editConfig() {
 function ViewTopology() {
   dashboardStore.setTopology(true);
 }
+function removeTopo() {
+  dashboardStore.removeControls(props.data);
+}
 </script>
 <style lang="scss" scoped>
 .topology {
@@ -97,10 +113,16 @@ function ViewTopology() {
 }
 
 .body {
-  padding: 5px 10px;
+  text-align: center;
   width: 100%;
   height: calc(100% - 30px);
   cursor: pointer;
+  box-sizing: border-box;
+  color: #333;
+  display: -webkit-box;
+  -webkit-box-orient: horizontal;
+  -webkit-box-pack: center;
+  -webkit-box-align: center;
 }
 
 .no-data {

src/views/dashboard/data.ts

@@ -194,3 +194,12 @@ export const DepthList = ["1", "2", "3", "4", "5"].map((item: string) => ({
   value: item,
   label: item,
 }));
+export const Colors: any = {
+  green: "#67C23A",
+  blue: "#409EFF",
+  red: "#F56C6C",
+  grey: "#909399",
+  white: "#fff",
+  black: "#000",
+  orange: "#E6A23C",
+};

src/views/dashboard/panel/Tool.vue

@@ -294,7 +294,7 @@ function clickIcons(t: { id: string; content: string; name: string }) {
       dashboardStore.addControl("Image");
       break;
     case "topology":
-      dashboardStore.setTopology(true);
+      dashboardStore.addControl("Topology");
       break;
     case "settings":
       dashboardStore.setConfigPanel(true);