From a15eabd67cbc4755d0d4adb65438032ab0ef180d Mon Sep 17 00:00:00 2001 From: Qiuxia Fan Date: Tue, 22 Feb 2022 17:26:02 +0800 Subject: [PATCH] feat: add trace filters --- src/assets/icons/help.svg | 17 +++ src/graphql/fragments/trace.ts | 76 ++++++++++ src/graphql/index.ts | 2 + src/graphql/query/trace.ts | 22 +++ src/store/modules/trace.ts | 94 +++++++++++++ src/types/trace.d.ts | 79 +++++++++++ src/views/components/ConditionTags.vue | 131 ++++++++++++++++++ src/views/dashboard/configuration/Widget.vue | 2 +- src/views/dashboard/controls/Trace.vue | 30 +++- src/views/dashboard/data.ts | 5 + src/views/dashboard/related/trace/Filter.vue | 130 +++++++++++++++++ src/views/dashboard/related/trace/Header.vue | 0 .../trace/{Content.vue => TraceList.vue} | 0 13 files changed, 585 insertions(+), 3 deletions(-) create mode 100644 src/assets/icons/help.svg create mode 100644 src/graphql/fragments/trace.ts create mode 100644 src/graphql/query/trace.ts create mode 100644 src/store/modules/trace.ts create mode 100644 src/types/trace.d.ts create mode 100644 src/views/components/ConditionTags.vue create mode 100644 src/views/dashboard/related/trace/Filter.vue delete mode 100644 src/views/dashboard/related/trace/Header.vue rename src/views/dashboard/related/trace/{Content.vue => TraceList.vue} (100%) diff --git a/src/assets/icons/help.svg b/src/assets/icons/help.svg new file mode 100644 index 00000000..f3dd80ce --- /dev/null +++ b/src/assets/icons/help.svg @@ -0,0 +1,17 @@ + + + + diff --git a/src/graphql/fragments/trace.ts b/src/graphql/fragments/trace.ts new file mode 100644 index 00000000..2dd391a1 --- /dev/null +++ b/src/graphql/fragments/trace.ts @@ -0,0 +1,76 @@ +/** + * 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. + */ + +export const Traces = { + variable: "$condition: TraceQueryCondition", + query: ` + data: queryBasicTraces(condition: $condition) { + traces { + key: segmentId + endpointNames + duration + start + isError + traceIds + } + total + }`, +}; + +/** + * @param { traceId } { string } + */ +export const TraceSpans = { + variable: "$traceId: ID!", + query: ` + trace: queryTrace(traceId: $traceId) { + spans { + traceId + segmentId + spanId + parentSpanId + refs { + traceId + parentSegmentId + parentSpanId + type + } + serviceCode + serviceInstanceName + startTime + endTime + endpointName + type + peer + component + isError + layer + tags { + key + value + } + logs { + time + data { + key + value + } + } + } + } + `, +}; diff --git a/src/graphql/index.ts b/src/graphql/index.ts index b1224520..c7db9f84 100644 --- a/src/graphql/index.ts +++ b/src/graphql/index.ts @@ -20,12 +20,14 @@ import * as app from "./query/app"; import * as selector from "./query/selector"; import * as dashboard from "./query/dashboard"; import * as topology from "./query/topology"; +import * as trace from "./query/trace"; const query: { [key: string]: string } = { ...app, ...selector, ...dashboard, ...topology, + ...trace, }; class Graphql { private queryData = ""; diff --git a/src/graphql/query/trace.ts b/src/graphql/query/trace.ts new file mode 100644 index 00000000..6195160a --- /dev/null +++ b/src/graphql/query/trace.ts @@ -0,0 +1,22 @@ +/** + * 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. + */ + +import { Traces, TraceSpans } from "../fragments/trace"; + +export const queryTraces = `query queryTraces(${Traces.variable}) {${Traces.query}}`; + +export const queryTrace = `query queryTrace(${TraceSpans.variable}) {${TraceSpans.query}}`; diff --git a/src/store/modules/trace.ts b/src/store/modules/trace.ts new file mode 100644 index 00000000..92e9ddc1 --- /dev/null +++ b/src/store/modules/trace.ts @@ -0,0 +1,94 @@ +/** + * 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. + */ +import { defineStore } from "pinia"; +import { Duration } from "@/types/app"; +import { Instance, Endpoint } from "@/types/selector"; +import { Trace, Span } from "@/types/trace"; +import { store } from "@/store"; +import graphql from "@/graphql"; +import { AxiosResponse } from "axios"; +import { useAppStoreWithOut } from "@/store/modules/app"; +import { useSelectorStore } from "@/store/modules/selectors"; + +interface TraceState { + instances: Instance[]; + endpoints: Endpoint[]; + traceList: Trace[]; + traceTotal: number; + traceSpans: Span[]; + currentTrace: Nullable; + // traceSpanLogs: any[]; + // traceSpanLogsTotal: number; + // traceListErrors: string; + // traceSpanErrors: string; + // traceSpanLogErrors: string; + durationTime: Duration; + selectorStore: any; +} + +export const traceStore = defineStore({ + id: "trace", + state: (): TraceState => ({ + instances: [], + endpoints: [], + traceList: [], + traceSpans: [], + traceTotal: 0, + currentTrace: null, + durationTime: useAppStoreWithOut().durationTime, + selectorStore: useSelectorStore(), + }), + actions: { + async getInstances() { + const res: AxiosResponse = await graphql + .query("queryServiceInstance") + .params({ serviceId: this.selectorStore.currentService }); + + if (res.data.errors) { + return res.data; + } + this.instances = res.data.data.pods || []; + return res.data; + }, + async getEndpoints() { + const res: AxiosResponse = await graphql.query("queryEndpoints").params({ + serviceId: this.selectorStore.currentService, + duration: this.durationTime, + keyword: "", + }); + if (res.data.errors) { + return res.data; + } + this.endpoints = res.data.data.pods || []; + return res.data; + }, + async getTraces(condition: any) { + const res: AxiosResponse = await graphql + .query("queryTraces") + .params({ condition }); + if (res.data.errors) { + return res.data; + } + this.traceList = res.data.data.data.traces; + this.traceTotal = res.data.data.data.total; + }, + }, +}); + +export function useTraceStore(): any { + return traceStore(store); +} diff --git a/src/types/trace.d.ts b/src/types/trace.d.ts new file mode 100644 index 00000000..010397f9 --- /dev/null +++ b/src/types/trace.d.ts @@ -0,0 +1,79 @@ +/** + * 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. + */ + +export interface Trace { + duration: number; + isError: boolean; + key: string; + operationNames: string[]; + start: string; + traceIds: string[]; +} + +export interface Span { + endpointName: string; + serviceCode: string; + parentSpanId: number; + segmentId: string; + label?: string; + layer: string; + spanId: number; + traceId: string; + type: string; + peer: string; + component: string; + isError: boolean; + isBroken?: boolean; + refs: Array; + startTime: number; + endTime: number; + dur?: number; + children?: Span[]; + tags?: Array>; + logs?: log[]; +} + +export interface log { + time: number; + data: Map; +} + +export interface Ref { + traceId: string; + parentSegmentId: string; + parentSpanId: number; + type: string; +} + +export interface StatisticsSpan { + groupRef: StatisticsGroupRef; + maxTime: number; + minTime: number; + sumTime: number; + avgTime: number; + count: number; +} + +export interface StatisticsGroupRef { + endpointName: string; + type: string; +} + +export class TraceTreeRef { + segmentMap: Map; + segmentIdGroup: string[]; +} diff --git a/src/views/components/ConditionTags.vue b/src/views/components/ConditionTags.vue new file mode 100644 index 00000000..e57c4635 --- /dev/null +++ b/src/views/components/ConditionTags.vue @@ -0,0 +1,131 @@ + + + + diff --git a/src/views/dashboard/configuration/Widget.vue b/src/views/dashboard/configuration/Widget.vue index 92e07792..045fd802 100644 --- a/src/views/dashboard/configuration/Widget.vue +++ b/src/views/dashboard/configuration/Widget.vue @@ -76,7 +76,7 @@ import { useDashboardStore } from "@/store/modules/dashboard"; import { useAppStoreWithOut } from "@/store/modules/app"; import { Option } from "@/types/app"; import graphs from "../graphs"; -import configs from "./graph-styles"; +import configs from "./widget/graph-styles"; import WidgetOptions from "./components/WidgetOptions.vue"; import StandardOptions from "./widget/StandardOptions.vue"; import MetricOptions from "./widget/MetricOptions.vue"; diff --git a/src/views/dashboard/controls/Trace.vue b/src/views/dashboard/controls/Trace.vue index be4dacc2..b8fa14a4 100644 --- a/src/views/dashboard/controls/Trace.vue +++ b/src/views/dashboard/controls/Trace.vue @@ -13,6 +13,32 @@ 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/data.ts b/src/views/dashboard/data.ts index fc2659bf..79e20512 100644 --- a/src/views/dashboard/data.ts +++ b/src/views/dashboard/data.ts @@ -203,3 +203,8 @@ export const Colors: any = { black: "#000", orange: "#E6A23C", }; +export const Status = [ + { label: "All", value: "ALL" }, + { label: "Success", value: "SUCCESS" }, + { label: "Error", value: "ERROR" }, +]; diff --git a/src/views/dashboard/related/trace/Filter.vue b/src/views/dashboard/related/trace/Filter.vue new file mode 100644 index 00000000..d3278cdb --- /dev/null +++ b/src/views/dashboard/related/trace/Filter.vue @@ -0,0 +1,130 @@ + + + + diff --git a/src/views/dashboard/related/trace/Header.vue b/src/views/dashboard/related/trace/Header.vue deleted file mode 100644 index e69de29b..00000000 diff --git a/src/views/dashboard/related/trace/Content.vue b/src/views/dashboard/related/trace/TraceList.vue similarity index 100% rename from src/views/dashboard/related/trace/Content.vue rename to src/views/dashboard/related/trace/TraceList.vue