github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-13 16:27:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: update codes

Browse Source
This commit is contained in:
Fine 2022-12-14 17:00:45 +08:00
parent 04e049c629
commit 09d0d0049b
15 changed files with 75 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -12,7 +12,6 @@
"build-only": "vite build",
"type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
"lint:eslint": "eslint --cache --max-warnings 0 \"{src,mock}/**/*.{vue,ts,tsx}\" --fix",
"lint:prettier": "prettier --write \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\"",
"lint:stylelint": "stylelint --cache --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
"lint:lint-staged": "lint-staged",

2
prettier.config.js
View File

@ -16,7 +16,7 @@
*/
/* global module */
module.exports = {
printWidth: 100,
printWidth: 120,
semi: true,
vueIndentScriptAndStyle: true,
trailingComma: "all",

59
src/store/modules/dashboard.ts
View File

@ -105,8 +105,7 @@ export const dashboardStore = defineStore({
newItem.h = 36;
newItem.graph = {
showDepth: true,
depth:
this.entity === EntityType[1].value ? 1 : this.entity === EntityType[0].value ? 2 : 3,
depth: this.entity === EntityType[1].value ? 1 : this.entity === EntityType[0].value ? 2 : 3,
};
}
if (["Trace", "Profile", "Log", "DemandLog", "Ebpf", "NetworkProfiling"].includes(type)) {
@ -148,7 +147,7 @@ export const dashboardStore = defineStore({
return;
}
const tabIndex = this.layout[idx].activedTabIndex || 0;
const { children } = this.layout[idx].children[tabIndex];
const { children } = (this.layout[idx].children || [])[tabIndex];
const arr = children.map((d: any) => Number(d.i));
let index = String(Math.max(...arr) + 1);
if (!children.length) {
@ -187,7 +186,7 @@ export const dashboardStore = defineStore({
return d;
});
items.push(newItem);
this.layout[idx].children[tabIndex].children = items;
(this.layout[idx].children || [])[tabIndex].children = items;
this.currentTabItems = items;
}
},
@ -222,7 +221,7 @@ export const dashboardStore = defineStore({
if (actived.length === 3) {
const tabIndex = Number(actived[1]);
this.currentTabItems = this.currentTabItems.filter((d: LayoutConfig) => actived[2] !== d.i);
this.layout[index].children[tabIndex].children = this.currentTabItems;
(this.layout[index].children || [])[tabIndex].children = this.currentTabItems;
return;
}
this.layout = this.layout.filter((d: LayoutConfig) => d.i !== item.i);
@ -230,8 +229,8 @@ export const dashboardStore = defineStore({
removeTabItem(item: LayoutConfig, index: number) {
const idx = this.layout.findIndex((d: LayoutConfig) => d.i === item.i);
if (this.selectedGrid) {
for (const item of this.layout[idx].children[index].children) {
if (this.selectedGrid.i === item.i) {
for (const item of (this.layout[idx].children || [])[index].children) {
if (this.selectedGrid?.i === item.i) {
this.selectedGrid = null;
}
}
@ -260,16 +259,16 @@ export const dashboardStore = defineStore({
const index = this.layout.findIndex((d: LayoutConfig) => actived[0] === d.i);
if (actived.length === 3) {
const tabIndex = Number(actived[1]);
const itemIndex = this.layout[index].children[tabIndex].children.findIndex(
const itemIndex = (this.layout[index].children || [])[tabIndex].children.findIndex(
(d: LayoutConfig) => actived[2] === d.i,
);
this.layout[index].children[tabIndex].children[itemIndex] = {
...this.layout[index].children[tabIndex].children[itemIndex],
(this.layout[index].children || [])[tabIndex].children[itemIndex] = {
...(this.layout[index].children || [])[tabIndex].children[itemIndex],
...param,
};
this.selectedGrid = this.layout[index].children[tabIndex].children[itemIndex];
this.setCurrentTabItems(this.layout[index].children[tabIndex].children);
this.selectedGrid = (this.layout[index].children || [])[tabIndex].children[itemIndex];
this.setCurrentTabItems((this.layout[index].children || [])[tabIndex].children);
return;
}
this.layout[index] = {
@ -281,8 +280,8 @@ export const dashboardStore = defineStore({
setWidget(param: LayoutConfig) {
for (let i = 0; i < this.layout.length; i++) {
if (this.layout[i].type === "Tab") {
if (this.layout[i].children && this.layout[i].children.length) {
for (const child of this.layout[i].children) {
if ((this.layout[i].children || []).length) {
for (const child of this.layout[i].children || []) {
if (child.children && child.children.length) {
for (let c = 0; c < child.children.length; c++) {
if (child.children[c].id === param.id) {
@ -386,7 +385,7 @@ export const dashboardStore = defineStore({
return res.data;
},
async saveDashboard() {
if (!this.currentDashboard.name) {
if (!this.currentDashboard?.name) {
ElMessage.error("The dashboard name is needed.");
return;
}
@ -407,18 +406,16 @@ export const dashboardStore = defineStore({
c.isRoot = false;
const index = this.dashboards.findIndex(
(d: DashboardItem) =>
d.name === this.currentDashboard.name &&
d.name === this.currentDashboard?.name &&
d.entity === this.currentDashboard.entity &&
d.layer === this.currentDashboard.layerId,
d.layer === this.currentDashboard?.layer,
);
if (index > -1) {
const { t } = useI18n();
ElMessage.error(t("nameError"));
return;
}
res = await graphql
.query("addNewTemplate")
.params({ setting: { configuration: JSON.stringify(c) } });
res = await graphql.query("addNewTemplate").params({ setting: { configuration: JSON.stringify(c) } });
json = res.data.data.addTemplate;
}
@ -433,17 +430,11 @@ export const dashboardStore = defineStore({
if (!this.currentDashboard.id) {
ElMessage.success("Saved successfully");
}
const key = [
this.currentDashboard.layer,
this.currentDashboard.entity,
this.currentDashboard.name,
].join("_");
const key = [this.currentDashboard.layer, this.currentDashboard.entity, this.currentDashboard.name].join("_");
this.currentDashboard.id = json.id;
if (this.currentDashboard.id) {
sessionStorage.removeItem(key);
this.dashboards = this.dashboards.filter(
(d: DashboardItem) => d.id !== this.currentDashboard.id,
);
this.dashboards = this.dashboards.filter((d: DashboardItem) => d.id !== this.currentDashboard?.id);
}
this.dashboards.push(this.currentDashboard);
const l = { id: json.id, configuration: c };
@ -453,9 +444,7 @@ export const dashboardStore = defineStore({
return json;
},
async deleteDashboard() {
const res: AxiosResponse = await graphql
.query("removeTemplate")
.params({ id: this.currentDashboard.id });
const res: AxiosResponse = await graphql.query("removeTemplate").params({ id: this.currentDashboard?.id });
if (res.data.errors) {
ElMessage.error(res.data.errors);
@ -466,12 +455,8 @@ export const dashboardStore = defineStore({
ElMessage.error(json.message);
return res.data;
}
this.dashboards = this.dashboards.filter((d: any) => d.id !== this.currentDashboard.id);
const key = [
this.currentDashboard.layer,
this.currentDashboard.entity,
this.currentDashboard.name,
].join("_");
this.dashboards = this.dashboards.filter((d: any) => d.id !== this.currentDashboard?.id);
const key = [this.currentDashboard?.layer, this.currentDashboard?.entity, this.currentDashboard?.name].join("_");
sessionStorage.removeItem(key);
},
},

10
src/store/modules/demand-log.ts
View File

@ -59,9 +59,7 @@ export const demandLogStore = defineStore({
this.message = message || "";
},
async getInstances(id: string) {
const serviceId = this.selectorStore.currentService
? this.selectorStore.currentService.id
: id;
const serviceId = this.selectorStore.currentService ? this.selectorStore.currentService.id : id;
const res: AxiosResponse = await graphql.query("queryInstances").params({
serviceId,
duration: useAppStoreWithOut().durationTime,
@ -96,15 +94,13 @@ export const demandLogStore = defineStore({
},
async getDemandLogs() {
this.loadLogs = true;
const res: AxiosResponse = await graphql
.query("fetchDemandPodLogs")
.params({ condition: this.conditions });
const res: AxiosResponse = await graphql.query("fetchDemandPodLogs").params({ condition: this.conditions });
this.loadLogs = false;
if (res.data.errors) {
return res.data;
}
if (res.data.data.logs.errorReason) {
this.setLogs("", res.data.data.logs.errorReason);
this.setLogs([], res.data.data.logs.errorReason);
return res.data;
}
this.total = res.data.data.logs.logs.length;

15
src/store/modules/ebpf.ts
View File

@ -16,17 +16,12 @@
*/
import { defineStore } from "pinia";
import type { Option } from "@/types/app";
import type {
EBPFTaskCreationRequest,
EBPFProfilingSchedule,
EBPFTaskList,
AnalyzationTrees,
} from "@/types/ebpf";
import type { EBPFTaskCreationRequest, EBPFProfilingSchedule, EBPFTaskList, AnalyzationTrees } from "@/types/ebpf";
import { store } from "@/store";
import graphql from "@/graphql";
import type { AxiosResponse } from "axios";
interface EbpfState {
taskList: EBPFTaskList[];
taskList: Array<Recordable<EBPFTaskList>>;
eBPFSchedules: EBPFProfilingSchedule[];
currentSchedule: EBPFProfilingSchedule | Record<string, never>;
analyzeTrees: AnalyzationTrees[];
@ -51,7 +46,7 @@ export const ebpfStore = defineStore({
aggregateType: "COUNT",
}),
actions: {
setSelectedTask(task: EBPFTaskList) {
setSelectedTask(task: Recordable<EBPFTaskList>) {
this.selectedTask = task || {};
},
setCurrentSchedule(s: EBPFProfilingSchedule) {
@ -85,7 +80,7 @@ export const ebpfStore = defineStore({
});
return res.data;
},
async getTaskList(params: { serviceId: string; serviceInstanceId: string; targets: string[] }) {
async getTaskList(params: { serviceId: string; targets: string[] }) {
if (!params.serviceId) {
return new Promise((resolve) => resolve({}));
}
@ -101,7 +96,7 @@ export const ebpfStore = defineStore({
if (!this.taskList.length) {
return res.data;
}
this.getEBPFSchedules({ taskId: this.taskList[0].taskId });
this.getEBPFSchedules({ taskId: String(this.taskList[0].taskId) });
return res.data;
},
async getEBPFSchedules(params: { taskId: string }) {

7
src/store/modules/network-profiling.ts
View File

@ -24,7 +24,7 @@ import type { LayoutConfig } from "@/types/dashboard";
import { ElMessage } from "element-plus";
interface NetworkProfilingState {
networkTasks: EBPFTaskList[];
networkTasks: Array<Recordable<EBPFTaskList>>;
networkTip: string;
selectedNetworkTask: Recordable<EBPFTaskList>;
nodes: ProcessNode[];
@ -55,10 +55,10 @@ export const networkProfilingStore = defineStore({
loadNodes: false,
}),
actions: {
setSelectedNetworkTask(task: EBPFTaskList) {
setSelectedNetworkTask(task: Recordable<EBPFTaskList>) {
this.selectedNetworkTask = task || {};
},
setNode(node: Node) {
setNode(node: Nullable<ProcessNode>) {
this.node = node;
},
setLink(link: Call) {
@ -156,7 +156,6 @@ export const networkProfilingStore = defineStore({
}
const res: AxiosResponse = await graphql.query("aliveNetworkProfiling").params({ taskId });
this.aliveMessage = "";
if (res.data.errors) {
return res.data;
}

27
src/store/modules/profile.ts
View File

@ -23,7 +23,7 @@ import type {
TaskLog,
ProfileTaskCreationRequest,
} from "@/types/profile";
import type { Trace, Span } from "@/types/trace";
import type { Trace } from "@/types/trace";
import { store } from "@/store";
import graphql from "@/graphql";
import type { AxiosResponse } from "axios";
@ -35,9 +35,9 @@ interface ProfileState {
condition: { serviceId: string; endpointName: string };
taskList: TaskListItem[];
segmentList: Trace[];
currentSegment: Trace | Record<string, never>;
segmentSpans: SegmentSpan[];
currentSpan: SegmentSpan | Record<string, never>;
currentSegment: Recordable<Trace>;
segmentSpans: Array<Recordable<SegmentSpan>>;
currentSpan: Recordable<SegmentSpan>;
analyzeTrees: ProfileAnalyzationTrees;
taskLogs: TaskLog[];
highlightTop: boolean;
@ -65,10 +65,10 @@ export const profileStore = defineStore({
...data,
};
},
setCurrentSpan(span: Span) {
setCurrentSpan(span: Recordable<SegmentSpan>) {
this.currentSpan = span;
},
setCurrentSegment(s: Trace) {
setCurrentSegment(s: Recordable<Trace>) {
this.currentSegment = s;
},
setHighlightTop() {
@ -139,7 +139,7 @@ export const profileStore = defineStore({
this.currentSegment = segmentList[0];
this.getSegmentSpans({ segmentId: segmentList[0].segmentId });
} else {
this.currentSegment = null;
this.currentSegment = {};
}
return res.data;
},
@ -161,8 +161,8 @@ export const profileStore = defineStore({
this.segmentSpans = segment.spans.map((d: SegmentSpan) => {
return {
...d,
segmentId: this.currentSegment.segmentId,
traceId: this.currentSegment.traceIds[0],
segmentId: this.currentSegment?.segmentId,
traceId: (this.currentSegment.traceIds as any)[0],
};
});
if (!(segment.spans && segment.spans.length)) {
@ -173,10 +173,7 @@ export const profileStore = defineStore({
this.currentSpan = segment.spans[index];
return res.data;
},
async getProfileAnalyze(params: {
segmentId: string;
timeRanges: Array<{ start: number; end: number }>;
}) {
async getProfileAnalyze(params: { segmentId: string; timeRanges: Array<{ start: number; end: number }> }) {
if (!params.segmentId) {
return new Promise((resolve) => resolve({}));
}
@ -203,9 +200,7 @@ export const profileStore = defineStore({
return res.data;
},
async createTask(param: ProfileTaskCreationRequest) {
const res: AxiosResponse = await graphql
.query("saveProfileTask")
.params({ creationRequest: param });
const res: AxiosResponse = await graphql.query("saveProfileTask").params({ creationRequest: param });
if (res.data.errors) {
return res.data;

68
src/store/modules/topology.ts
View File

@ -105,21 +105,19 @@ export const topologyStore = defineStore({
this.calls = calls;
this.nodes = nodes;
},
setNodeMetricValue(m: { id: string; value: unknown }[]) {
setNodeMetricValue(m: MetricVal) {
this.nodeMetricValue = m;
},
setLinkServerMetrics(m: { id: string; value: unknown }[]) {
setLinkServerMetrics(m: MetricVal) {
this.linkServerMetrics = m;
},
setLinkClientMetrics(m: { id: string; value: unknown }[]) {
setLinkClientMetrics(m: MetricVal) {
this.linkClientMetrics = m;
},
async getDepthServiceTopology(serviceIds: string[], depth: number) {
const res = await this.getServicesTopology(serviceIds);
if (depth > 1) {
const ids = (res.nodes || [])
.map((item: Node) => item.id)
.filter((d: string) => !serviceIds.includes(d));
const ids = (res.nodes || []).map((item: Node) => item.id).filter((d: string) => !serviceIds.includes(d));
if (!ids.length) {
this.setTopology(res);
return;
@ -158,20 +156,8 @@ export const topologyStore = defineStore({
return;
}
const toposObj = await this.getServicesTopology(nodeIds);
const nodes = [
...res.nodes,
...json.nodes,
...topo.nodes,
...data.nodes,
...toposObj.nodes,
];
const calls = [
...res.calls,
...json.calls,
...topo.calls,
...data.calls,
...toposObj.calls,
];
const nodes = [...res.nodes, ...json.nodes, ...topo.nodes, ...data.nodes, ...toposObj.nodes];
const calls = [...res.calls, ...json.calls, ...topo.calls, ...data.calls, ...toposObj.calls];
this.setTopology({ nodes, calls });
} else {
const nodes = [...res.nodes, ...json.nodes, ...topo.nodes, ...data.nodes];
@ -221,9 +207,7 @@ export const topologyStore = defineStore({
async updateEndpointTopology(endpointIds: string[], depth: number) {
const res = await this.getEndpointTopology(endpointIds);
if (depth > 1) {
const ids = res.nodes
.map((item: Node) => item.id)
.filter((d: string) => !endpointIds.includes(d));
const ids = res.nodes.map((item: Node) => item.id).filter((d: string) => !endpointIds.includes(d));
if (!ids.length) {
this.setTopology(res);
return;
@ -254,9 +238,7 @@ export const topologyStore = defineStore({
if (depth > 4) {
const nodeIds = data.nodes
.map((item: Node) => item.id)
.filter(
(d: string) => ![...endpoints, ...ids, ...pods, ...endpointIds].includes(d),
);
.filter((d: string) => ![...endpoints, ...ids, ...pods, ...endpointIds].includes(d));
if (!nodeIds.length) {
const nodes = [...res.nodes, ...json.nodes, ...topo.nodes, ...data.nodes];
const calls = [...res.calls, ...json.calls, ...topo.calls, ...data.calls];
@ -264,20 +246,8 @@ export const topologyStore = defineStore({
return;
}
const toposObj = await this.getEndpointTopology(nodeIds);
const nodes = [
...res.nodes,
...json.nodes,
...topo.nodes,
...data.nodes,
...toposObj.nodes,
];
const calls = [
...res.calls,
...json.calls,
...topo.calls,
...data.calls,
...toposObj.calls,
];
const nodes = [...res.nodes, ...json.nodes, ...topo.nodes, ...data.nodes, ...toposObj.nodes];
const calls = [...res.calls, ...json.calls, ...topo.calls, ...data.calls, ...toposObj.calls];
this.setTopology({ nodes, calls });
} else {
const nodes = [...res.nodes, ...json.nodes, ...topo.nodes, ...data.nodes];
@ -352,9 +322,7 @@ export const topologyStore = defineStore({
this.setLinkClientMetrics({});
return;
}
const idsC = this.calls
.filter((i: Call) => i.detectPoints.includes("CLIENT"))
.map((b: Call) => b.id);
const idsC = this.calls.filter((i: Call) => i.detectPoints.includes("CLIENT")).map((b: Call) => b.id);
if (!idsC.length) {
return;
}
@ -370,9 +338,7 @@ export const topologyStore = defineStore({
this.setLinkServerMetrics({});
return;
}
const idsS = this.calls
.filter((i: Call) => i.detectPoints.includes("SERVER"))
.map((b: Call) => b.id);
const idsS = this.calls.filter((i: Call) => i.detectPoints.includes("SERVER")).map((b: Call) => b.id);
if (!idsS.length) {
return;
}
@ -419,10 +385,7 @@ export const topologyStore = defineStore({
});
return res.data;
},
async getCallServerMetrics(param: {
queryStr: string;
conditions: { [key: string]: unknown };
}) {
async getCallServerMetrics(param: { queryStr: string; conditions: { [key: string]: unknown } }) {
const res: AxiosResponse = await query(param);
if (res.data.errors) {
@ -431,10 +394,7 @@ export const topologyStore = defineStore({
this.setLinkServerMetrics(res.data.data);
return res.data;
},
async getCallClientMetrics(param: {
queryStr: string;
conditions: { [key: string]: unknown };
}) {
async getCallClientMetrics(param: { queryStr: string; conditions: { [key: string]: unknown } }) {
const res: AxiosResponse = await query(param);
if (res.data.errors) {

18
src/store/modules/trace.ts
View File

@ -30,7 +30,7 @@ interface TraceState {
endpoints: Endpoint[];
traceList: Trace[];
traceSpans: Span[];
currentTrace: Trace | any;
currentTrace: Recordable<Trace>;
conditions: any;
traceSpanLogs: any[];
selectorStore: any;
@ -58,10 +58,10 @@ export const traceStore = defineStore({
setTraceCondition(data: any) {
this.conditions = { ...this.conditions, ...data };
},
setCurrentTrace(trace: Trace) {
setCurrentTrace(trace: Recordable<Trace>) {
this.currentTrace = trace;
},
setTraceSpans(spans: Span) {
setTraceSpans(spans: Span[]) {
this.traceSpans = spans;
},
resetState() {
@ -116,9 +116,7 @@ export const traceStore = defineStore({
return res.data;
},
async getInstances(id: string) {
const serviceId = this.selectorStore.currentService
? this.selectorStore.currentService.id
: id;
const serviceId = this.selectorStore.currentService ? this.selectorStore.currentService.id : id;
const res: AxiosResponse = await graphql.query("queryInstances").params({
serviceId: serviceId,
duration: useAppStoreWithOut().durationTime,
@ -131,9 +129,7 @@ export const traceStore = defineStore({
return res.data;
},
async getEndpoints(id: string, keyword?: string) {
const serviceId = this.selectorStore.currentService
? this.selectorStore.currentService.id
: id;
const serviceId = this.selectorStore.currentService ? this.selectorStore.currentService.id : id;
const res: AxiosResponse = await graphql.query("queryEndpoints").params({
serviceId,
duration: useAppStoreWithOut().durationTime,
@ -146,9 +142,7 @@ export const traceStore = defineStore({
return res.data;
},
async getTraces() {
const res: AxiosResponse = await graphql
.query("queryTraces")
.params({ condition: this.conditions });
const res: AxiosResponse = await graphql.query("queryTraces").params({ condition: this.conditions });
if (res.data.errors) {
return res.data;
}

1
src/types/monaco-editor.ts
View File

@ -15,3 +15,4 @@
* limitations under the License.
*/
declare module "monaco-editor";
export {};

1
src/types/selector.d.ts vendored
View File

@ -29,6 +29,7 @@ export type Instance = {
language?: string;
instanceUUID?: string;
attributes?: { name: string; value: string }[];
id?: string;
};
export type Endpoint = {

11
src/views/dashboard/graphs/Line.vue
View File

@ -46,7 +46,7 @@ limitations under the License. -->
filters?: Filters;
relatedTrace?: RelatedTrace;
id?: string;
associate: { widgetId: string }[];
associate?: { widgetId: string }[];
}
>,
default: () => ({
@ -66,15 +66,10 @@ limitations under the License. -->
function getOption() {
const { showEchartsLegend, isRight, chartColors } = useLegendProcess(props.config.legend);
setRight.value = isRight;
const keys = Object.keys(props.data || {}).filter(
(i: any) => Array.isArray(props.data[i]) && props.data[i].length,
);
const keys = Object.keys(props.data || {}).filter((i: any) => Array.isArray(props.data[i]) && props.data[i].length);
const temp = keys.map((i: any) => {
const serie: any = {
data: props.data[i].map((item: any, itemIndex: number) => [
props.intervalTime[itemIndex],
item,
]),
data: props.data[i].map((item: any, itemIndex: number) => [props.intervalTime[itemIndex], item]),
name: i,
type: "line",
symbol: "circle",

5
src/views/dashboard/related/trace/components/Table/TableContainer.vue
View File

@ -139,9 +139,8 @@ limitations under the License. -->
}
}
}
this.tableData = element;
this.componentKey += 1;
this.flag = !this.flag;
componentKey.value += 1;
flag.value = !flag.value;
}
</script>
<style lang="scss" scoped>

3
tsconfig.app.json
View File

@ -23,6 +23,7 @@
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
},
"noImplicitThis": false
}
}

1
tsconfig.config.json
View File

@ -20,5 +20,6 @@
"compilerOptions": {
"composite": true,
"types": ["node"],
"noImplicitThis": false
}
}