diff --git a/src/graph/fragments/selector.ts b/src/graph/fragments/selector.ts index 7baa9d64..9cc014a3 100644 --- a/src/graph/fragments/selector.ts +++ b/src/graph/fragments/selector.ts @@ -36,7 +36,8 @@ export const Instances = { variable: "$serviceId: ID!, $duration: Duration!", query: ` pods: listInstances(duration: $duration, serviceId: $serviceId) { - value: id + id + value: name label: name language instanceUUID @@ -52,8 +53,9 @@ export const Endpoints = { variable: "$serviceId: ID!, $keyword: String!", query: ` pods: findEndpoint(serviceId: $serviceId, keyword: $keyword, limit: 100) { - value: id - label: name + id + value: name + label: name } `, }; diff --git a/src/hooks/useProcessor.ts b/src/hooks/useProcessor.ts index a5573594..2b53bc09 100644 --- a/src/hooks/useProcessor.ts +++ b/src/hooks/useProcessor.ts @@ -32,14 +32,11 @@ export function useQueryProcessor(config: any) { duration: appStore.durationTime, }; const variables: string[] = [`$duration: Duration!`]; - const { currentPod, currentService, currentDestPod, currentDestService } = - selectorStore; - const { entity } = dashboardStore; const isRelation = [ "ServiceRelation", "ServiceInstanceRelation", "EndpointRelation", - ].includes(entity); + ].includes(dashboardStore.entity); const fragment = config.metrics.map((name: string, index: number) => { const metricType = config.metricTypes[index] || ""; const labels = ["0", "1", "2", "3", "4"]; @@ -52,11 +49,11 @@ export function useQueryProcessor(config: any) { variables.push(`$condition${index}: TopNCondition!`); conditions[`condition${index}`] = { name, - parentService: ["Service", "All"].includes(entity) + parentService: ["Service", "All"].includes(dashboardStore.entity) ? null - : currentService.value, - normal: currentService.normal, - scope: entity, + : selectorStore.currentService.value, + normal: selectorStore.currentService.normal, + scope: dashboardStore.entity, topN: 10, order: "DES", }; @@ -69,19 +66,35 @@ export function useQueryProcessor(config: any) { conditions[`condition${index}`] = { name, entity: { - scope: entity, - serviceName: entity === "All" ? undefined : currentService.value, - normal: entity === "All" ? undefined : currentService.normal, - serviceInstanceName: entity.includes("ServiceInstance") - ? currentPod + scope: dashboardStore.entity, + serviceName: + dashboardStore.entity === "All" + ? undefined + : selectorStore.currentService.value, + normal: + dashboardStore.entity === "All" + ? undefined + : selectorStore.currentService.normal, + serviceInstanceName: dashboardStore.entity.includes("ServiceInstance") + ? selectorStore.currentPod + : undefined, + endpointName: dashboardStore.entity.includes("Endpoint") + ? selectorStore.currentPod + : undefined, + destNormal: isRelation + ? selectorStore.currentDestService.normal + : undefined, + destServiceName: isRelation + ? selectorStore.currentDestService.value : undefined, - endpointName: entity.includes("Endpoint") ? currentPod : undefined, - destNormal: isRelation ? currentDestService.normal : undefined, - destServiceName: isRelation ? currentDestService.value : undefined, destServiceInstanceName: - entity === "ServiceInstanceRelation" ? currentDestPod : undefined, + dashboardStore.entity === "ServiceInstanceRelation" + ? selectorStore.currentDestPod + : undefined, destEndpointName: - entity === "EndpointRelation" ? currentDestPod : undefined, + dashboardStore.entity === "EndpointRelation" + ? selectorStore.currentDestPod + : undefined, }, }; } diff --git a/src/store/data.ts b/src/store/data.ts index b874b0bc..25caaecf 100644 --- a/src/store/data.ts +++ b/src/store/data.ts @@ -35,15 +35,65 @@ export const ConfigData: any = { w: 8, h: 12, i: "0", - metrics: ["service_resp_time", "service_apdex"], - metricTypes: ["readMetricsValues", "readMetricsValues"], + metrics: ["service_resp_time"], + metricTypes: ["readMetricsValues"], type: "Widget", widget: { - title: "Title", + title: "service_resp_time", tips: "Tooltip", }, graph: { type: "Line", + showXAxis: true, + showYAxis: true, + }, + standard: { + sortOrder: "DEC", + unit: "min", + }, + children: [], +}; +export const ConfigData1: any = { + x: 0, + y: 0, + w: 8, + h: 12, + i: "0", + metrics: ["service_instance_resp_time"], + metricTypes: ["readMetricsValues"], + type: "Widget", + widget: { + title: "service_instance_resp_time", + tips: "Tooltip", + }, + graph: { + type: "Line", + showXAxis: true, + showYAxis: true, + }, + standard: { + sortOrder: "DEC", + unit: "min", + }, + children: [], +}; +export const ConfigData2: any = { + x: 0, + y: 0, + w: 8, + h: 12, + i: "0", + metrics: ["endpoint_avg"], + metricTypes: ["readMetricsValues"], + type: "Widget", + widget: { + title: "endpoint_avg", + tips: "Tooltip", + }, + graph: { + type: "Line", + showXAxis: true, + showYAxis: true, }, standard: { sortOrder: "DEC", diff --git a/src/store/modules/dashboard.ts b/src/store/modules/dashboard.ts index a01b7089..aad67347 100644 --- a/src/store/modules/dashboard.ts +++ b/src/store/modules/dashboard.ts @@ -18,7 +18,7 @@ import { defineStore } from "pinia"; import { store } from "@/store"; import { LayoutConfig } from "@/types/dashboard"; import graph from "@/graph"; -import { ConfigData } from "../data"; +import { ConfigData, ConfigData1, ConfigData2 } from "../data"; import { useAppStoreWithOut } from "@/store/modules/app"; import { useSelectorStore } from "@/store/modules/selectors"; import { NewControl } from "../data"; @@ -144,6 +144,12 @@ export const dashboardStore = defineStore({ }, setEntity(type: string) { this.entity = type; + if (type === "ServiceInstance") { + this.layout = [ConfigData1]; + } + if (type === "Endpoint") { + this.layout = [ConfigData2]; + } }, setConfigs(param: { [key: string]: unknown }) { const actived = this.activedGridItem.split("-"); diff --git a/src/views/dashboard/Edit.vue b/src/views/dashboard/Edit.vue index 8dda6c22..d073e144 100644 --- a/src/views/dashboard/Edit.vue +++ b/src/views/dashboard/Edit.vue @@ -35,8 +35,8 @@ import Tool from "./panel/Tool.vue"; import ConfigEdit from "./configuration/ConfigEdit.vue"; import { useDashboardStore } from "@/store/modules/dashboard"; -const { t } = useI18n(); const dashboardStore = useDashboardStore(); +const { t } = useI18n(); // fetch layout data from serve side // const layout: any[] = [ // { x: 0, y: 0, w: 4, h: 12, i: "0" }, @@ -56,6 +56,7 @@ const dashboardStore = useDashboardStore(); // { x: 8, y: 27, w: 4, h: 15, i: "16" }, // ]; // dashboardStore.setLayout(layout); + function handleClick(e: any) { e.stopPropagation(); if (e.target.className === "ds-main") { diff --git a/src/views/dashboard/controls/Widget.vue b/src/views/dashboard/controls/Widget.vue index 5ac9e87f..3ec9b850 100644 --- a/src/views/dashboard/controls/Widget.vue +++ b/src/views/dashboard/controls/Widget.vue @@ -119,13 +119,27 @@ export default defineComponent({ } } watch( - () => [ - props.data.metricTypes, - props.data.metrics, - selectorStore.currentService, - ], - (data, old) => { - if (data[0] === old[0] && data[1] === old[1] && data[2] === old[2]) { + () => [props.data.metricTypes, props.data.metrics], + () => { + queryMetrics(); + } + ); + watch( + () => selectorStore.currentService, + () => { + if (dashboardStore.entity !== "Service") { + return; + } + queryMetrics(); + } + ); + watch( + () => selectorStore.currentPod, + () => { + if ( + dashboardStore.entity === "All" || + dashboardStore.entity === "Service" + ) { return; } queryMetrics(); diff --git a/src/views/dashboard/data.ts b/src/views/dashboard/data.ts index 2fd64d75..e643016b 100644 --- a/src/views/dashboard/data.ts +++ b/src/views/dashboard/data.ts @@ -42,10 +42,14 @@ export const DefaultGraphConfig: { [key: string]: any } = { step: false, smooth: false, showSymbol: false, + showXAxis: true, + showYAxis: true, }, Area: { type: "Area", opacity: 0.4, + showXAxis: true, + showYAxis: true, }, Card: { type: "Card", diff --git a/src/views/dashboard/panel/Tool.vue b/src/views/dashboard/panel/Tool.vue index a10b4834..06dc8097 100644 --- a/src/views/dashboard/panel/Tool.vue +++ b/src/views/dashboard/panel/Tool.vue @@ -14,8 +14,8 @@ See the License for the specific language governing permissions and limitations under the License. -->