From 0a417b36655a6204cda184993dbc76020ef79bc0 Mon Sep 17 00:00:00 2001 From: Qiuxia Fan Date: Sat, 15 Jan 2022 14:33:53 +0800 Subject: [PATCH] feat: fetch services, instances, endpoints --- src/graph/fragments/selector.ts | 16 ++++---- src/locales/lang/en.ts | 1 + src/locales/lang/zh.ts | 1 + src/store/modules/selectors.ts | 63 ++++++++++++++++++++++-------- src/types/app.d.ts | 2 +- src/views/dashboard/Edit.vue | 4 +- src/views/dashboard/New.vue | 1 - src/views/dashboard/data.ts | 22 ----------- src/views/dashboard/panel/Tool.vue | 37 +++++++++++++----- 9 files changed, 88 insertions(+), 59 deletions(-) diff --git a/src/graph/fragments/selector.ts b/src/graph/fragments/selector.ts index d66aae0b..fdcd1c4a 100644 --- a/src/graph/fragments/selector.ts +++ b/src/graph/fragments/selector.ts @@ -15,14 +15,14 @@ * limitations under the License. */ export const Services = { - variable: ["$layer: String!"], + variable: "$layer: String!", query: ` - services: listServices(layer: $layer) { - value: id + services: listServices(layer: $layer) { + value: id label: name group - layer - } + layers + } `, }; export const Layers = { @@ -33,10 +33,12 @@ export const Layers = { export const Instances = { variable: "$serviceId: ID!, $duration: Duration!", query: ` - getServiceInstances(duration: $duration, serviceId: $serviceId) { + instances: listInstances(duration: $duration, serviceId: $serviceId) { key: id label: name language + instanceUUID + layer attributes { name value @@ -47,7 +49,7 @@ export const Instances = { export const Endpoints = { variable: "$serviceId: ID!, $keyword: String!", query: ` - getEndpoints: searchEndpoint(serviceId: $serviceId, keyword: $keyword, limit: 100) { + endpoints: searchEndpoint(serviceId: $serviceId, keyword: $keyword, limit: 100) { key: id label: name } diff --git a/src/locales/lang/en.ts b/src/locales/lang/en.ts index 06c0c22f..462109d8 100644 --- a/src/locales/lang/en.ts +++ b/src/locales/lang/en.ts @@ -72,6 +72,7 @@ const msg = { fontSize: "Font Size", showBackground: "Show Background", areaOpacity: "Area Opacity", + editGraph: "Edit Graph Options", hourTip: "Select Hour", minuteTip: "Select Minute", secondTip: "Select Second", diff --git a/src/locales/lang/zh.ts b/src/locales/lang/zh.ts index c8bdd9d4..93ebc760 100644 --- a/src/locales/lang/zh.ts +++ b/src/locales/lang/zh.ts @@ -70,6 +70,7 @@ const msg = { fontSize: "字体大小", showBackground: "显示背景", areaOpacity: "透明度", + editGraph: "编辑图表选项", hourTip: "选择小时", minuteTip: "选择分钟", secondTip: "选择秒数", diff --git a/src/store/modules/selectors.ts b/src/store/modules/selectors.ts index 99edc2bf..7c8b7b47 100644 --- a/src/store/modules/selectors.ts +++ b/src/store/modules/selectors.ts @@ -19,17 +19,36 @@ import { Option, Duration } from "@/types/app"; import { store } from "@/store"; import graph from "@/graph"; import { AxiosResponse } from "axios"; +import { useAppStoreWithOut } from "@/store/modules/app"; interface SelectorState { services: Option[]; + instances: Option[]; + pods: Option[]; + endpoints: Option[]; + currentService: string; + currentPod: string; + durationTime: any; } export const selectorStore = defineStore({ id: "selector", state: (): SelectorState => ({ services: [], + instances: [], + pods: [], + endpoints: [], + currentService: "", + currentPod: "", + durationTime: useAppStoreWithOut().durationTime, }), actions: { + setCurrentService(service: string) { + this.currentService = service; + }, + setCurrentPod(pod: string) { + this.currentPod = pod; + }, async fetchLayers(): Promise { const res: AxiosResponse = await graph.query("queryLayers").params({}); @@ -41,30 +60,40 @@ export const selectorStore = defineStore({ .params({ layer }); if (!res.data.errors) { - this.services = res.data.data.services; + this.services = res.data.data.services || []; + this.currentService = this.services.length + ? this.services[0].value + : ""; } return res.data; }, - async getServiceInstances(params: { - serviceId: string; - duration: Duration; - }): Promise { - const res: AxiosResponse = await graph - .query("queryInstances") - .params(params); - return res; + async getServiceInstances(): Promise { + const res: AxiosResponse = await graph.query("queryInstances").params({ + serviceId: this.currentService, + duration: this.durationTime, + }); + if (!res.data.errors) { + this.instances = res.data.data.instances || []; + this.pods = this.instances; + this.currentPod = this.pods.length ? this.pods[0].value : ""; + } + return res.data; }, - async getEndpoints(params: { - keyword: string; - serviceId: string; - }): Promise { + async getEndpoints(params: { keyword: string }): Promise { if (!params.keyword) { params.keyword = ""; } - const res: AxiosResponse = await graph - .query("queryEndpoints") - .params(params); - return res; + const res: AxiosResponse = await graph.query("queryEndpoints").params({ + serviceId: this.currentService, + duration: this.durationTime, + keyword: params.keyword, + }); + if (!res.data.errors) { + this.endpoints = res.data.data.endpoints || []; + this.pods = this.endpoints; + this.currentPod = this.pods.length ? this.pods[0].value : ""; + } + return res.data; }, }, }); diff --git a/src/types/app.d.ts b/src/types/app.d.ts index 82369754..74e69c32 100644 --- a/src/types/app.d.ts +++ b/src/types/app.d.ts @@ -15,7 +15,7 @@ * limitations under the License. */ export interface Option { - value: string | number; + value: string; label: string; } export interface Duration { diff --git a/src/views/dashboard/Edit.vue b/src/views/dashboard/Edit.vue index c3462176..febba3d6 100644 --- a/src/views/dashboard/Edit.vue +++ b/src/views/dashboard/Edit.vue @@ -18,7 +18,7 @@ limitations under the License. -->