From d7c42fe2cbb916cbd0bdf999fd4f8e36728c995a Mon Sep 17 00:00:00 2001 From: Qiuxia Fan Date: Fri, 11 Feb 2022 18:21:17 +0800 Subject: [PATCH] feat: view from service topology to serviceRelation dashboard --- src/components/Selector.vue | 5 ++- src/hooks/useProcessor.ts | 1 + src/store/data.ts | 21 +++++++++++ src/store/modules/dashboard.ts | 11 +++++- src/store/modules/selectors.ts | 10 ++++- src/views/dashboard/New.vue | 8 ++-- src/views/dashboard/controls/Widget.vue | 12 +++--- src/views/dashboard/panel/Tool.vue | 37 +++++++++++++++---- .../dashboard/related/topology/Settings.vue | 16 +++++--- 9 files changed, 94 insertions(+), 27 deletions(-) diff --git a/src/components/Selector.vue b/src/components/Selector.vue index 3b5407cc..d23f8733 100644 --- a/src/components/Selector.vue +++ b/src/components/Selector.vue @@ -28,6 +28,7 @@ limitations under the License. --> :key="item.value" :label="item.label" :value="item.value" + :disabled="!!item.disabled" > @@ -47,14 +48,14 @@ interface Option { const emit = defineEmits(["change"]); const props = defineProps({ options: { - type: Array as PropType, + type: Array as PropType<(Option & { disabled: boolean })[]>, default: () => [], }, value: { type: [Array, String] as PropType, default: () => [], }, - size: { type: String, default: "small" }, + size: { type: String, default: "default" }, placeholder: { type: String, default: "Select a option" }, borderRadius: { type: Number, default: 3 }, multiple: { type: Boolean, default: false }, diff --git a/src/hooks/useProcessor.ts b/src/hooks/useProcessor.ts index e50e6fb6..94b8c449 100644 --- a/src/hooks/useProcessor.ts +++ b/src/hooks/useProcessor.ts @@ -28,6 +28,7 @@ export function useQueryProcessor(config: any) { const appStore = useAppStoreWithOut(); const dashboardStore = useDashboardStore(); const selectorStore = useSelectorStore(); + if (!selectorStore.currentService && dashboardStore.entity !== "All") { return; } diff --git a/src/store/data.ts b/src/store/data.ts index 5a26937a..24402d22 100644 --- a/src/store/data.ts +++ b/src/store/data.ts @@ -122,3 +122,24 @@ export const ConfigData3: any = { }, children: [], }; +export const ConfigData4: any = { + x: 0, + y: 0, + w: 8, + h: 12, + i: "0", + metrics: ["service_relation_server_resp_time"], + metricTypes: ["readMetricsValues"], + type: "Widget", + widget: { + title: "service_relation_server_resp_time", + tips: "Tooltip", + }, + graph: { + type: "Line", + }, + standard: { + unit: "min", + }, + children: [], +}; diff --git a/src/store/modules/dashboard.ts b/src/store/modules/dashboard.ts index 79f1737b..4a903c24 100644 --- a/src/store/modules/dashboard.ts +++ b/src/store/modules/dashboard.ts @@ -18,7 +18,13 @@ import { defineStore } from "pinia"; import { store } from "@/store"; import { LayoutConfig } from "@/types/dashboard"; import graphql from "@/graphql"; -import { ConfigData, ConfigData1, ConfigData2, ConfigData3 } from "../data"; +import { + ConfigData, + ConfigData1, + ConfigData2, + ConfigData3, + ConfigData4, +} from "../data"; import { useAppStoreWithOut } from "@/store/modules/app"; import { useSelectorStore } from "@/store/modules/selectors"; import { NewControl } from "../data"; @@ -161,6 +167,9 @@ export const dashboardStore = defineStore({ if (type == "Service") { this.layout = [ConfigData]; } + if (type == "ServiceRelation") { + this.layout = [ConfigData4]; + } }, setTopology(show: boolean) { this.showTopology = show; diff --git a/src/store/modules/selectors.ts b/src/store/modules/selectors.ts index e047f967..04fb9220 100644 --- a/src/store/modules/selectors.ts +++ b/src/store/modules/selectors.ts @@ -44,12 +44,18 @@ export const selectorStore = defineStore({ durationTime: useAppStoreWithOut().durationTime, }), actions: { - setCurrentService(service: Service) { + setCurrentService(service: Nullable) { this.currentService = service; }, + setCurrentDestService(service: Nullable) { + this.currentDestService = service; + }, setCurrentPod(pod: Nullable) { this.currentPod = pod; }, + setCurrentDestPod(pod: Nullable) { + this.currentPod = pod; + }, async fetchLayers(): Promise { const res: AxiosResponse = await graphql.query("queryLayers").params({}); @@ -113,7 +119,7 @@ export const selectorStore = defineStore({ serviceId, }); if (!res.data.errors) { - this.currentService = res.data.data.service || {}; + this.setCurrentService(res.data.data.service); this.services = [res.data.data.service]; } diff --git a/src/views/dashboard/New.vue b/src/views/dashboard/New.vue index 542d5df4..7731e0c3 100644 --- a/src/views/dashboard/New.vue +++ b/src/views/dashboard/New.vue @@ -18,7 +18,7 @@ limitations under the License. -->
{{ t("name") }}
@@ -28,7 +28,7 @@ limitations under the License. -->
- + {{ t("create") }}
diff --git a/src/views/dashboard/controls/Widget.vue b/src/views/dashboard/controls/Widget.vue index 254e71fc..bb6d6295 100644 --- a/src/views/dashboard/controls/Widget.vue +++ b/src/views/dashboard/controls/Widget.vue @@ -93,12 +93,9 @@ export default defineComponent({ const dashboardStore = useDashboardStore(); const selectorStore = useSelectorStore(); - if (dashboardStore.entity === EntityType[1].value) { - queryMetrics(); - } - async function queryMetrics() { const params = await useQueryProcessor(props.data); + if (!params) { state.source = {}; return; @@ -137,9 +134,12 @@ export default defineComponent({ } ); watch( - () => selectorStore.currentService, + () => [selectorStore.currentService, selectorStore.currentDestService], () => { - if (dashboardStore.entity === EntityType[0].value) { + if ( + dashboardStore.entity === EntityType[0].value || + dashboardStore.entity === EntityType[4].value + ) { queryMetrics(); } } diff --git a/src/views/dashboard/panel/Tool.vue b/src/views/dashboard/panel/Tool.vue index 76ad6569..b3e1ccd4 100644 --- a/src/views/dashboard/panel/Tool.vue +++ b/src/views/dashboard/panel/Tool.vue @@ -46,11 +46,11 @@ limitations under the License. -->
$DestinationService
@@ -103,12 +103,14 @@ const states = reactive<{ key: number; currentService: string; currentPod: string; + currentDestService: string; }>({ destService: "", destPod: "", key: (type && type.key) || 0, currentService: "", currentPod: "", + currentDestService: "", }); dashboardStore.setLayer(String(params.layerId)); @@ -142,11 +144,19 @@ async function setSelector() { ElMessage.error(json.errors); return; } - const currentService = selectorStore.services.filter( - (d: { id: string }) => d.id === String(params.serviceId) - )[0]; + let currentService, currentDestService; + for (const d of selectorStore.services) { + if (d.id === String(params.serviceId)) { + currentService = d; + } + if (d.id === String(params.destServiceId)) { + currentDestService = d; + } + } selectorStore.setCurrentService(currentService); + selectorStore.setCurrentDestService(currentDestService); states.currentService = selectorStore.currentService.value; + states.currentDestService = selectorStore.currentDestService.value; } async function getServices() { @@ -164,7 +174,11 @@ async function getServices() { selectorStore.setCurrentService( selectorStore.services.length ? selectorStore.services[0] : null ); + selectorStore.setCurrentDestService( + selectorStore.services.length ? selectorStore.services[1] : null + ); states.currentService = selectorStore.currentService.value; + states.currentDestService = selectorStore.currentDestService.value; fetchPods(dashboardStore.entity, true); } @@ -174,7 +188,16 @@ async function changeService(service: Service[]) { selectorStore.setCurrentService(service[0]); fetchPods(dashboardStore.entity, true); } else { - selectorStore.setCurrentService(""); + selectorStore.setCurrentService(null); + } +} + +function changeDestService(service: Service[]) { + if (service[0]) { + states.currentDestService = service[0].value; + selectorStore.setCurrentDestService(service[0]); + } else { + selectorStore.setCurrentDestService(null); } } @@ -265,7 +288,7 @@ watch( .icon-btn { display: inline-block; - padding: 0 5px; + padding: 0 5px 2px 5px; text-align: center; border: 1px solid #ccc; border-radius: 3px; diff --git a/src/views/dashboard/related/topology/Settings.vue b/src/views/dashboard/related/topology/Settings.vue index 60ab2f38..ace945de 100644 --- a/src/views/dashboard/related/topology/Settings.vue +++ b/src/views/dashboard/related/topology/Settings.vue @@ -28,7 +28,7 @@ limitations under the License. --> class="inputs" :multiple="true" :value="states.linkMetrics" - :options="states.metricList" + :options="states.linkMetricList" size="small" placeholder="Select a metric" @change="changeLinkMetrics" @@ -49,7 +49,7 @@ limitations under the License. --> class="inputs" :multiple="true" :value="states.nodeMetrics" - :options="states.metricList" + :options="states.nodeMetricList" size="small" placeholder="Select a metric" @change="changeNodeMetrics" @@ -73,13 +73,15 @@ const states = reactive<{ nodeDashboard: string; linkMetrics: string[]; nodeMetrics: string[]; - metricList: Option[]; + nodeMetricList: Option[]; + linkMetricList: Option[]; }>({ linkDashboard: "", nodeDashboard: "", linkMetrics: [], nodeMetrics: [], - metricList: [], + nodeMetricList: [], + linkMetricList: [], }); getMetricList(); @@ -89,10 +91,14 @@ async function getMetricList() { ElMessage.error(json.errors); return; } - states.metricList = (json.data.metrics || []).filter( + states.nodeMetricList = (json.data.metrics || []).filter( (d: { catalog: string }) => dashboardStore.entity === (MetricCatalog as any)[d.catalog] ); + states.linkMetricList = (json.data.metrics || []).filter( + (d: { catalog: string }) => + dashboardStore.entity + "Relation" === (MetricCatalog as any)[d.catalog] + ); } function updateSettings() { emit("update", {