From d2cf41c7d17c90683c0666b57bc3855f69dfdc9b Mon Sep 17 00:00:00 2001 From: Qiuxia Fan Date: Wed, 23 Feb 2022 13:28:20 +0800 Subject: [PATCH] feat: add trace list --- src/store/modules/trace.ts | 37 +++- src/views/dashboard/controls/Trace.vue | 16 +- src/views/dashboard/data.ts | 4 + src/views/dashboard/related/trace/Filter.vue | 43 +++- src/views/dashboard/related/trace/Graph.vue | 0 .../dashboard/related/trace/TraceList.vue | 203 ++++++++++++++++++ 6 files changed, 288 insertions(+), 15 deletions(-) create mode 100644 src/views/dashboard/related/trace/Graph.vue diff --git a/src/store/modules/trace.ts b/src/store/modules/trace.ts index 92e9ddc1..cfd49cfb 100644 --- a/src/store/modules/trace.ts +++ b/src/store/modules/trace.ts @@ -31,6 +31,7 @@ interface TraceState { traceTotal: number; traceSpans: Span[]; currentTrace: Nullable; + conditions: any; // traceSpanLogs: any[]; // traceSpanLogsTotal: number; // traceListErrors: string; @@ -49,10 +50,25 @@ export const traceStore = defineStore({ traceSpans: [], traceTotal: 0, currentTrace: null, + conditions: { + queryDuration: useAppStoreWithOut().durationTime, + traceState: "ALL", + queryOrder: "BY_START_TIME", + paging: { pageNum: 1, pageSize: 15, needTotal: true }, + }, durationTime: useAppStoreWithOut().durationTime, selectorStore: useSelectorStore(), }), actions: { + setCondition(data: any) { + this.condition = data; + }, + setCurrentTrace(trace: Trace) { + this.currentTrace = trace; + }, + setTraceSpans(spans: Span) { + this.traceSpans = spans; + }, async getInstances() { const res: AxiosResponse = await graphql .query("queryServiceInstance") @@ -61,7 +77,9 @@ export const traceStore = defineStore({ if (res.data.errors) { return res.data; } - this.instances = res.data.data.pods || []; + this.instances = [{ value: 0, label: "All" }, ...res.data.data.pods] || [ + { value: 0, label: "All" }, + ]; return res.data; }, async getEndpoints() { @@ -73,19 +91,30 @@ export const traceStore = defineStore({ if (res.data.errors) { return res.data; } - this.endpoints = res.data.data.pods || []; + this.endpoints = [{ value: 0, label: "All" }, ...res.data.data.pods] || [ + { value: 0, label: "All" }, + ]; return res.data; }, - async getTraces(condition: any) { + async getTraces() { const res: AxiosResponse = await graphql .query("queryTraces") - .params({ condition }); + .params({ condition: this.condition }); if (res.data.errors) { return res.data; } this.traceList = res.data.data.data.traces; this.traceTotal = res.data.data.data.total; }, + async getTraceSpans(params: any) { + const res: AxiosResponse = await graphql + .query("queryTrace") + .params(params); + if (res.data.errors) { + return res.data; + } + this.setTraceSpans(res.data.data.trace.spans || []); + }, }, }); diff --git a/src/views/dashboard/controls/Trace.vue b/src/views/dashboard/controls/Trace.vue index b8fa14a4..1f93f742 100644 --- a/src/views/dashboard/controls/Trace.vue +++ b/src/views/dashboard/controls/Trace.vue @@ -13,14 +13,19 @@ 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. -->