diff --git a/src/assets/icons/topology-dark.svg b/src/assets/icons/topology-dark.svg new file mode 100644 index 00000000..db404e3e --- /dev/null +++ b/src/assets/icons/topology-dark.svg @@ -0,0 +1,15 @@ + + \ No newline at end of file diff --git a/src/assets/icons/topology-light.svg b/src/assets/icons/topology-light.svg new file mode 100644 index 00000000..2210c7f2 --- /dev/null +++ b/src/assets/icons/topology-light.svg @@ -0,0 +1,15 @@ + + \ No newline at end of file diff --git a/src/assets/icons/topology.svg b/src/assets/icons/topology.svg deleted file mode 100644 index 7bffd765..00000000 --- a/src/assets/icons/topology.svg +++ /dev/null @@ -1,15 +0,0 @@ - - \ No newline at end of file diff --git a/src/locales/lang/en.ts b/src/locales/lang/en.ts index 59f7662b..fa7cf213 100644 --- a/src/locales/lang/en.ts +++ b/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", diff --git a/src/locales/lang/zh.ts b/src/locales/lang/zh.ts index 225185aa..24492caf 100644 --- a/src/locales/lang/zh.ts +++ b/src/locales/lang/zh.ts @@ -86,6 +86,9 @@ const msg = { conditions: "条件", legendSettings: "图例设置", setLegend: "设置图例", + backgroundColors: "背景颜色", + fontColors: "字体颜色", + iconTheme: "图标主题", hourTip: "选择小时", minuteTip: "选择分钟", secondTip: "选择秒数", diff --git a/src/store/data.ts b/src/store/data.ts index b99cd3b4..d0b37e53 100644 --- a/src/store/data.ts +++ b/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, diff --git a/src/store/modules/dashboard.ts b/src/store/modules/dashboard.ts index 1a2589f3..941ebbd0 100644 --- a/src/store/modules/dashboard.ts +++ b/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; diff --git a/src/types/dashboard.ts b/src/types/dashboard.ts index e8b27db9..0d23efb0 100644 --- a/src/types/dashboard.ts +++ b/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; +} diff --git a/src/views/dashboard/configuration/Topology.vue b/src/views/dashboard/configuration/Topology.vue index 26634b36..80062e64 100644 --- a/src/views/dashboard/configuration/Topology.vue +++ b/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. --> - + + diff --git a/src/views/dashboard/configuration/graph-styles/Topology.vue b/src/views/dashboard/configuration/graph-styles/Topology.vue new file mode 100644 index 00000000..7f703c72 --- /dev/null +++ b/src/views/dashboard/configuration/graph-styles/Topology.vue @@ -0,0 +1,125 @@ + + + + diff --git a/src/views/dashboard/controls/Topology.vue b/src/views/dashboard/controls/Topology.vue index 916fe54e..dd662446 100644 --- a/src/views/dashboard/controls/Topology.vue +++ b/src/views/dashboard/controls/Topology.vue @@ -29,15 +29,29 @@ limitations under the License. -->
{{ t("edit") }}
-
+
{{ t("delete") }}
-
- -
Topology
+
+ +
+ {{ data.graph.content }} +
@@ -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, - default: () => ({ widget: {} }), + type: Object as PropType, + 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); +}