mirror of
https://github.com/apache/skywalking-booster-ui.git
synced 2025-10-14 20:01:28 +00:00
feat: add Trace in dashboards (#18)
* feat: add trace tool * feat: add trace * feat: add trace filters * feat: add trace list * feat: add trace detail * fix: update trace detail * feat: add trace list * fix: update trace list * feat: add trace tree * fix: update trace tree * feat: add trace table * feat: add trace statistics * fix: update trace statistics * fix: update resize * feat: add trace log * feat: add related logs * feat: add loading * fix: update name * feat: watch selectors * fix: view span on table * fix ci * fix: update file name * fix: update file name * fix: update file name * fix: update filters * build: add package
This commit is contained in:
Fine0830
@@ -63,7 +63,7 @@ export const dashboardStore = defineStore({
|
||||
this.layout = data;
|
||||
},
|
||||
addControl(type: string) {
|
||||
const newWidget: LayoutConfig = {
|
||||
const newItem: LayoutConfig = {
|
||||
...NewControl,
|
||||
i: String(this.layout.length),
|
||||
type,
|
||||
@@ -71,8 +71,8 @@ export const dashboardStore = defineStore({
|
||||
metrics: [""],
|
||||
};
|
||||
if (type === "Tab") {
|
||||
newWidget.h = 24;
|
||||
newWidget.children = [
|
||||
newItem.h = 24;
|
||||
newItem.children = [
|
||||
{
|
||||
name: "Tab1",
|
||||
children: [],
|
||||
@@ -84,9 +84,9 @@ export const dashboardStore = defineStore({
|
||||
];
|
||||
}
|
||||
if (type === "Topology") {
|
||||
newWidget.w = 4;
|
||||
newWidget.h = 6;
|
||||
newWidget.graph = {
|
||||
newItem.w = 4;
|
||||
newItem.h = 6;
|
||||
newItem.graph = {
|
||||
fontColor: "white",
|
||||
backgroundColor: "green",
|
||||
iconTheme: true,
|
||||
@@ -95,12 +95,15 @@ export const dashboardStore = defineStore({
|
||||
showDepth: true,
|
||||
};
|
||||
}
|
||||
if (type === "Trace") {
|
||||
newItem.h = 24;
|
||||
}
|
||||
this.layout = this.layout.map((d: LayoutConfig) => {
|
||||
d.y = d.y + newWidget.h;
|
||||
d.y = d.y + newItem.h;
|
||||
return d;
|
||||
});
|
||||
this.layout.push(newWidget);
|
||||
this.activedGridItem = newWidget.i;
|
||||
this.layout.push(newItem);
|
||||
this.activedGridItem = newItem.i;
|
||||
},
|
||||
addTabItem(item: LayoutConfig) {
|
||||
const idx = this.layout.findIndex((d: LayoutConfig) => d.i === item.i);
|
||||
|
||||
172
src/store/modules/trace.ts
Normal file
172
src/store/modules/trace.ts
Normal file
@@ -0,0 +1,172 @@
|
||||
/**
|
||||
* 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, Service } 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 {
|
||||
services: Service[];
|
||||
instances: Instance[];
|
||||
endpoints: Endpoint[];
|
||||
traceList: Trace[];
|
||||
traceTotal: number;
|
||||
traceSpans: Span[];
|
||||
currentTrace: Trace | any;
|
||||
conditions: any;
|
||||
traceSpanLogs: any[];
|
||||
traceSpanLogsTotal: number;
|
||||
// traceListErrors: string;
|
||||
// traceSpanErrors: string;
|
||||
// traceSpanLogErrors: string;
|
||||
durationTime: Duration;
|
||||
selectorStore: any;
|
||||
}
|
||||
|
||||
export const traceStore = defineStore({
|
||||
id: "trace",
|
||||
state: (): TraceState => ({
|
||||
services: [{ value: "0", label: "All" }],
|
||||
instances: [{ value: "0", label: "All" }],
|
||||
endpoints: [{ value: "0", label: "All" }],
|
||||
traceList: [],
|
||||
traceSpans: [],
|
||||
traceTotal: 0,
|
||||
currentTrace: {},
|
||||
conditions: {
|
||||
queryDuration: useAppStoreWithOut().durationTime,
|
||||
traceState: "ALL",
|
||||
queryOrder: "BY_START_TIME",
|
||||
paging: { pageNum: 1, pageSize: 15, needTotal: true },
|
||||
},
|
||||
traceSpanLogs: [],
|
||||
traceSpanLogsTotal: 0,
|
||||
durationTime: useAppStoreWithOut().durationTime,
|
||||
selectorStore: useSelectorStore(),
|
||||
}),
|
||||
actions: {
|
||||
setTraceCondition(data: any) {
|
||||
this.condition = { ...this.condition, ...data };
|
||||
},
|
||||
setCurrentTrace(trace: Trace) {
|
||||
this.currentTrace = trace;
|
||||
},
|
||||
setTraceSpans(spans: Span) {
|
||||
this.traceSpans = spans;
|
||||
},
|
||||
async getServices(layer: string) {
|
||||
const res: AxiosResponse = await graphql.query("queryServices").params({
|
||||
layer,
|
||||
});
|
||||
if (res.data.errors) {
|
||||
return res.data;
|
||||
}
|
||||
this.services = [
|
||||
{ value: "0", label: "All" },
|
||||
...res.data.data.services,
|
||||
] || [{ value: "0", label: "All" }];
|
||||
return res.data;
|
||||
},
|
||||
async getInstances() {
|
||||
const res: AxiosResponse = await graphql.query("queryInstances").params({
|
||||
serviceId: this.selectorStore.currentService.id,
|
||||
duration: this.durationTime,
|
||||
});
|
||||
|
||||
if (res.data.errors) {
|
||||
return res.data;
|
||||
}
|
||||
this.instances = [
|
||||
{ value: "0", label: "All" },
|
||||
...res.data.data.pods,
|
||||
] || [{ value: " 0", label: "All" }];
|
||||
return res.data;
|
||||
},
|
||||
async getEndpoints() {
|
||||
const res: AxiosResponse = await graphql.query("queryEndpoints").params({
|
||||
serviceId: this.selectorStore.currentService.id,
|
||||
duration: this.durationTime,
|
||||
keyword: "",
|
||||
});
|
||||
if (res.data.errors) {
|
||||
return res.data;
|
||||
}
|
||||
this.endpoints = [
|
||||
{ value: "0", label: "All" },
|
||||
...res.data.data.pods,
|
||||
] || [{ value: "0", label: "All" }];
|
||||
return res.data;
|
||||
},
|
||||
async getTraces() {
|
||||
const res: AxiosResponse = await graphql
|
||||
.query("queryTraces")
|
||||
.params({ condition: this.condition });
|
||||
if (res.data.errors) {
|
||||
return res.data;
|
||||
}
|
||||
if (!res.data.data.data.traces.length) {
|
||||
this.traceTotal = 0;
|
||||
this.traceList = [];
|
||||
this.setCurrentTrace({});
|
||||
this.setTraceSpans([]);
|
||||
return res.data;
|
||||
}
|
||||
this.getTraceSpans({ traceId: res.data.data.data.traces[0].traceIds[0] });
|
||||
this.traceList = res.data.data.data.traces.map((d: Trace) => {
|
||||
d.traceIds = d.traceIds.map((id: string) => {
|
||||
return { value: id, label: id };
|
||||
});
|
||||
return d;
|
||||
});
|
||||
this.traceTotal = res.data.data.data.total;
|
||||
this.setCurrentTrace(res.data.data.data.traces[0] || {});
|
||||
return res.data;
|
||||
},
|
||||
async getTraceSpans(params: { traceId: string }) {
|
||||
const res: AxiosResponse = await graphql
|
||||
.query("queryTrace")
|
||||
.params(params);
|
||||
if (res.data.errors) {
|
||||
return res.data;
|
||||
}
|
||||
this.setTraceSpans(res.data.data.trace.spans || []);
|
||||
return res.data;
|
||||
},
|
||||
async getSpanLogs(params: any) {
|
||||
const res: AxiosResponse = await graphql
|
||||
.query("queryServiceLogs")
|
||||
.params(params);
|
||||
if (res.data.errors) {
|
||||
this.traceSpanLogs = [];
|
||||
this.traceSpanLogsTotal = 0;
|
||||
return res.data;
|
||||
}
|
||||
this.traceSpanLogs = res.data.data.queryLogs.logs || [];
|
||||
this.traceSpanLogsTotal = res.data.data.queryLogs.total;
|
||||
return res.data;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export function useTraceStore(): any {
|
||||
return traceStore(store);
|
||||
}
|
||||
Reference in New Issue
Block a user