From a0b57d0a5abc008afc0f8b51a64e3973a796be48 Mon Sep 17 00:00:00 2001 From: Fine0830 Date: Tue, 10 May 2022 17:03:47 +0800 Subject: [PATCH 01/11] feat: remove the layer filed for instance query (#81) --- src/graphql/fragments/selector.ts | 60 +++++++++++++++---------------- src/types/selector.d.ts | 1 - 2 files changed, 29 insertions(+), 32 deletions(-) diff --git a/src/graphql/fragments/selector.ts b/src/graphql/fragments/selector.ts index f855d8f3..a5c70392 100644 --- a/src/graphql/fragments/selector.ts +++ b/src/graphql/fragments/selector.ts @@ -20,10 +20,10 @@ export const Services = { services: listServices(layer: $layer) { id value: name - label: name - group - layers - normal + label: name + group + layers + normal } `, }; @@ -36,17 +36,16 @@ export const Instances = { variable: "$serviceId: ID!, $duration: Duration!", query: ` pods: listInstances(duration: $duration, serviceId: $serviceId) { - id - value: name - label: name - language - instanceUUID - layer - attributes { - name - value - } + id + value: name + label: name + language + instanceUUID + attributes { + name + value } + } `, }; export const Endpoints = { @@ -66,10 +65,10 @@ export const getService = { service: getService(serviceId: $serviceId) { id value: name - label: name - group - layers - normal + label: name + group + layers + normal } `, }; @@ -79,16 +78,15 @@ export const getInstance = { query: ` instance: getInstance(instanceId: $instanceId) { id - value: name - label: name - language - instanceUUID - layer - attributes { - name - value - } + value: name + label: name + language + instanceUUID + attributes { + name + value } + } `, }; @@ -97,10 +95,10 @@ export const getEndpoint = { query: ` endpoint: getEndpointInfo(endpointId: $endpointId) { id - value: name - label: name - serviceId - serviceName + value: name + label: name + serviceId + serviceName } `, }; diff --git a/src/types/selector.d.ts b/src/types/selector.d.ts index 4e1439cd..293ef469 100644 --- a/src/types/selector.d.ts +++ b/src/types/selector.d.ts @@ -26,7 +26,6 @@ export type Service = { export type Instance = { value: string; label: string; - layer?: string; language?: string; instanceUUID?: string; attributes?: { name: string; value: string }[]; From 49c4c96a6aa9df6d0bb1e29315e8bb9499969d18 Mon Sep 17 00:00:00 2001 From: Fine0830 Date: Tue, 10 May 2022 17:25:56 +0800 Subject: [PATCH 02/11] remove process layer (#82) --- src/graphql/fragments/ebpf.ts | 1 - src/types/ebpf.d.ts | 1 - 2 files changed, 2 deletions(-) diff --git a/src/graphql/fragments/ebpf.ts b/src/graphql/fragments/ebpf.ts index 662cfb31..4a80777a 100644 --- a/src/graphql/fragments/ebpf.ts +++ b/src/graphql/fragments/ebpf.ts @@ -60,7 +60,6 @@ export const queryEBPFSchedules = { serviceName instanceId instanceName - layer agentId detectType attributes { diff --git a/src/types/ebpf.d.ts b/src/types/ebpf.d.ts index 7ca3febc..b40597ef 100644 --- a/src/types/ebpf.d.ts +++ b/src/types/ebpf.d.ts @@ -50,7 +50,6 @@ export type Process = { serviceName: string; instanceId: string; instanceName: string; - layer: string; agentId: string; detectType: string; attributes: { name: string; value: string }; From ca14a7d2c2f1c6cc2ff10485dc27eeaf1292d0a6 Mon Sep 17 00:00:00 2001 From: Fine0830 Date: Wed, 11 May 2022 15:05:58 +0800 Subject: [PATCH 03/11] fix: set date to 0 and remove duration filed (#83) --- src/components/DateCalendar.vue | 7 +++---- src/store/modules/ebpf.ts | 5 ++--- 2 files changed, 5 insertions(+), 7 deletions(-) diff --git a/src/components/DateCalendar.vue b/src/components/DateCalendar.vue index 3e3a150f..f331192e 100755 --- a/src/components/DateCalendar.vue +++ b/src/components/DateCalendar.vue @@ -247,7 +247,7 @@ limitations under the License. --> (state.showMinutes = state.showSeconds = false) " :class="{ on: state.showHours }" - >{{ state.hour || dd }}{{ dd(state.hour) }} : (state.showHours = state.showSeconds = false) " :class="{ on: state.showMinutes }" - >{{ state.minute || dd }}{{ dd(state.minute) }} : @@ -268,7 +268,7 @@ limitations under the License. --> (state.showHours = state.showMinutes = false) " :class="{ on: state.showSeconds }" - >{{ state.second || dd }}{{ dd(state.second) }} @@ -464,7 +464,6 @@ const status = ( const minutes = time.getMinutes(); const seconds = time.getSeconds(); const milliseconds = time.getMilliseconds(); - const dd = (t: number) => `0${t}`.slice(-2); const map: { [key: string]: string | number } = { YYYY: year, MM: dd(month + 1), diff --git a/src/store/modules/ebpf.ts b/src/store/modules/ebpf.ts index d59f317b..897abf12 100644 --- a/src/store/modules/ebpf.ts +++ b/src/store/modules/ebpf.ts @@ -103,14 +103,13 @@ export const ebpfStore = defineStore({ this.getEBPFSchedules({ taskId: this.taskList[0].taskId }); return res.data; }, - async getEBPFSchedules(params: { taskId: string; duration?: Duration }) { + async getEBPFSchedules(params: { taskId: string }) { if (!params.taskId) { return new Promise((resolve) => resolve({})); } - const duration = useAppStoreWithOut().durationTime; const res: AxiosResponse = await graphql .query("getEBPFSchedules") - .params({ ...params, duration }); + .params({ ...params }); if (res.data.errors) { this.eBPFSchedules = []; From 0e0f2704b3f40c01d0f389c26d6253389cfea0e3 Mon Sep 17 00:00:00 2001 From: Fine0830 Date: Wed, 11 May 2022 20:02:45 +0800 Subject: [PATCH 04/11] fix graphql query (#84) --- src/graphql/fragments/ebpf.ts | 4 ++-- src/locales/lang/en.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/graphql/fragments/ebpf.ts b/src/graphql/fragments/ebpf.ts index 4a80777a..7479b623 100644 --- a/src/graphql/fragments/ebpf.ts +++ b/src/graphql/fragments/ebpf.ts @@ -48,9 +48,9 @@ export const queryEBPFTasks = { }`, }; export const queryEBPFSchedules = { - variable: "$taskId: ID!, $duration: Duration!", + variable: "$taskId: ID!", query: ` - eBPFSchedules: queryEBPFProfilingSchedules(taskId: $taskId, duration: $duration) { + eBPFSchedules: queryEBPFProfilingSchedules(taskId: $taskId) { scheduleId taskId process { diff --git a/src/locales/lang/en.ts b/src/locales/lang/en.ts index 9bed54dc..b04edd50 100644 --- a/src/locales/lang/en.ts +++ b/src/locales/lang/en.ts @@ -134,7 +134,7 @@ const msg = { taskId: "Task ID", triggerType: "Trigger Type", targetType: "Target Type", - ebpfTip: "Don't have process could profiling", + ebpfTip: "Don't have a process for profiling", processSelect: "Click to select processes", hourTip: "Select Hour", minuteTip: "Select Minute", From b49278702757db8b8d5bf56ffb470d8336fd7f4a Mon Sep 17 00:00:00 2001 From: Fine0830 Date: Thu, 12 May 2022 17:00:07 +0800 Subject: [PATCH 05/11] feat: Implement tags auto-complete for Trace and Log (#85) --- src/graphql/fragments/log.ts | 12 ++ src/graphql/fragments/trace.ts | 11 ++ src/graphql/query/log.ts | 4 + src/graphql/query/trace.ts | 11 +- src/locales/lang/en.ts | 2 +- src/locales/lang/zh.ts | 2 +- src/store/modules/log.ts | 14 ++ src/store/modules/trace.ts | 14 ++ src/views/components/ConditionTags.vue | 174 +++++++++++++----- src/views/dashboard/related/log/Header.vue | 28 +-- src/views/dashboard/related/trace/Filter.vue | 44 ++--- .../trace/components/Table/TableItem.vue | 12 +- 12 files changed, 244 insertions(+), 84 deletions(-) diff --git a/src/graphql/fragments/log.ts b/src/graphql/fragments/log.ts index cfc505d5..78738d8e 100644 --- a/src/graphql/fragments/log.ts +++ b/src/graphql/fragments/log.ts @@ -63,3 +63,15 @@ export const QueryLogsByKeywords = { query: ` support: supportQueryLogsByKeywords`, }; + +export const LogTagKeys = { + variable: "$duration: Duration!", + query: ` + tagKeys: queryLogTagAutocompleteKeys(duration: $duration)`, +}; + +export const LogTagValues = { + variable: "$tagKey: String!, $duration: Duration!", + query: ` + tagValues: queryLogTagAutocompleteValues(tagKey: $tagKey, duration: $duration)`, +}; diff --git a/src/graphql/fragments/trace.ts b/src/graphql/fragments/trace.ts index 2dd391a1..04f718e0 100644 --- a/src/graphql/fragments/trace.ts +++ b/src/graphql/fragments/trace.ts @@ -74,3 +74,14 @@ export const TraceSpans = { } `, }; +export const TraceTagKeys = { + variable: "$duration: Duration!", + query: ` + tagKeys: queryTraceTagAutocompleteKeys(duration: $duration)`, +}; + +export const TraceTagValues = { + variable: "$tagKey: String!, $duration: Duration!", + query: ` + tagValues: queryTraceTagAutocompleteValues(tagKey: $tagKey, duration: $duration)`, +}; diff --git a/src/graphql/query/log.ts b/src/graphql/query/log.ts index cac2e2e1..dfe8c002 100644 --- a/src/graphql/query/log.ts +++ b/src/graphql/query/log.ts @@ -19,9 +19,13 @@ import { QueryBrowserErrorLogs, QueryServiceLogs, QueryLogsByKeywords, + LogTagValues, + LogTagKeys, } from "../fragments/log"; export const queryBrowserErrorLogs = `query queryBrowserErrorLogs(${QueryBrowserErrorLogs.variable}) { ${QueryBrowserErrorLogs.query}}`; export const queryServiceLogs = `query queryLogs(${QueryServiceLogs.variable}) {${QueryServiceLogs.query}}`; export const queryLogsByKeywords = `query queryLogsByKeywords {${QueryLogsByKeywords.query}}`; +export const queryLogTagValues = `query queryTagValues(${LogTagValues.variable}) {${LogTagValues.query}}`; +export const queryLogTagKeys = `query queryTagKeys(${LogTagKeys.variable}) {${LogTagKeys.query}}`; diff --git a/src/graphql/query/trace.ts b/src/graphql/query/trace.ts index 6195160a..c4ce706f 100644 --- a/src/graphql/query/trace.ts +++ b/src/graphql/query/trace.ts @@ -15,8 +15,17 @@ * limitations under the License. */ -import { Traces, TraceSpans } from "../fragments/trace"; +import { + Traces, + TraceSpans, + TraceTagKeys, + TraceTagValues, +} from "../fragments/trace"; export const queryTraces = `query queryTraces(${Traces.variable}) {${Traces.query}}`; export const queryTrace = `query queryTrace(${TraceSpans.variable}) {${TraceSpans.query}}`; + +export const queryTraceTagKeys = `query queryTraceTagKeys(${TraceTagKeys.variable}) {${TraceTagKeys.query}}`; + +export const queryTraceTagValues = `query queryTraceTagValues(${TraceTagValues.variable}) {${TraceTagValues.query}}`; diff --git a/src/locales/lang/en.ts b/src/locales/lang/en.ts index b04edd50..6e3041e0 100644 --- a/src/locales/lang/en.ts +++ b/src/locales/lang/en.ts @@ -326,7 +326,7 @@ const msg = { addExcludingKeywordsOfContent: "Please input a keyword of excluding content", noticeTag: "Please press Enter after inputting a tag(key=value).", conditionNotice: - "Notice: Please press Enter after inputting a tag, key of content, exclude key of content(key=value).", + "Notice: Please press Enter after inputting a key of content, exclude key of content(key=value).", language: "Language", }; export default msg; diff --git a/src/locales/lang/zh.ts b/src/locales/lang/zh.ts index 3e222342..a2d9ecd5 100644 --- a/src/locales/lang/zh.ts +++ b/src/locales/lang/zh.ts @@ -327,7 +327,7 @@ const msg = { addExcludingKeywordsOfContent: "请输入一个内容不包含的关键词", noticeTag: "请输入一个标签(key=value)之后回车", conditionNotice: - "请输入一个标签、内容关键词或者内容不包含的关键词(key=value)之后回车", + "请输入一个内容关键词或者内容不包含的关键词(key=value)之后回车", language: "语言", }; export default msg; diff --git a/src/store/modules/log.ts b/src/store/modules/log.ts index b9934976..9790ac22 100644 --- a/src/store/modules/log.ts +++ b/src/store/modules/log.ts @@ -151,6 +151,20 @@ export const logStore = defineStore({ this.logsTotal = res.data.data.queryBrowserErrorLogs.total; return res.data; }, + async getLogTagKeys() { + const res: AxiosResponse = await graphql + .query("queryLogTagKeys") + .params({ duration: useAppStoreWithOut().durationTime }); + + return res.data; + }, + async getLogTagValues(tagKey: string) { + const res: AxiosResponse = await graphql + .query("queryLogTagValues") + .params({ tagKey, duration: useAppStoreWithOut().durationTime }); + + return res.data; + }, }, }); diff --git a/src/store/modules/trace.ts b/src/store/modules/trace.ts index 794cdffa..85a3fec3 100644 --- a/src/store/modules/trace.ts +++ b/src/store/modules/trace.ts @@ -161,6 +161,20 @@ export const traceStore = defineStore({ this.traceSpanLogsTotal = res.data.data.queryLogs.total; return res.data; }, + async getTagKeys() { + const res: AxiosResponse = await graphql + .query("queryTraceTagKeys") + .params({ duration: useAppStoreWithOut().durationTime }); + + return res.data; + }, + async getTagValues(tagKey: string) { + const res: AxiosResponse = await graphql + .query("queryTraceTagValues") + .params({ tagKey, duration: useAppStoreWithOut().durationTime }); + + return res.data; + }, }, }); diff --git a/src/views/components/ConditionTags.vue b/src/views/components/ConditionTags.vue index 19b58548..c85ada38 100644 --- a/src/views/components/ConditionTags.vue +++ b/src/views/components/ConditionTags.vue @@ -13,65 +13,97 @@ 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/related/trace/components/Table/TableItem.vue b/src/views/dashboard/related/trace/components/Table/TableItem.vue index 4becc9a1..66ce4285 100644 --- a/src/views/dashboard/related/trace/components/Table/TableItem.vue +++ b/src/views/dashboard/related/trace/components/Table/TableItem.vue @@ -200,9 +200,9 @@ export default defineComponent({ dom.style.background = "rgba(0, 0, 0, 0.1)"; } function selectSpan(event: any) { - const dom = event.path.find((d: any) => - d.className.includes("trace-item") - ); + const dom = event + .composedPath() + .find((d: any) => d.className.includes("trace-item")); emit("select", props.data); if (props.headerType === "profile") { @@ -212,9 +212,9 @@ export default defineComponent({ viewSpanDetail(dom); } function viewSpan(event: any) { - const dom = event.path.find((d: any) => - d.className.includes("trace-item") - ); + const dom = event + .composedPath() + .find((d: any) => d.className.includes("trace-item")); emit("select", props.data); viewSpanDetail(dom); } From 784c2e97b820a31cc3a13cb36dda3d0f6c038d8d Mon Sep 17 00:00:00 2001 From: Fine0830 Date: Thu, 12 May 2022 20:57:37 +0800 Subject: [PATCH 06/11] feat: support multiple trees for the flame graph (#86) --- src/store/modules/ebpf.ts | 2 +- src/views/components/ConditionTags.vue | 10 ++- .../related/ebpf/components/EBPFStack.vue | 61 ++++++++++++++----- 3 files changed, 56 insertions(+), 17 deletions(-) diff --git a/src/store/modules/ebpf.ts b/src/store/modules/ebpf.ts index 897abf12..c27adcf7 100644 --- a/src/store/modules/ebpf.ts +++ b/src/store/modules/ebpf.ts @@ -153,7 +153,7 @@ export const ebpfStore = defineStore({ this.analyzeTrees = []; return res.data; } - this.analyzeTrees = analysisEBPFResult.trees[0].elements; + this.analyzeTrees = analysisEBPFResult.trees; return res.data; }, }, diff --git a/src/views/components/ConditionTags.vue b/src/views/components/ConditionTags.vue index c85ada38..34e60fa4 100644 --- a/src/views/components/ConditionTags.vue +++ b/src/views/components/ConditionTags.vue @@ -78,11 +78,12 @@ limitations under the License. --> diff --git a/src/views/dashboard/related/ebpf/components/EBPFSchedules.vue b/src/views/dashboard/related/ebpf/components/EBPFSchedules.vue index a584e40f..2e144ad4 100644 --- a/src/views/dashboard/related/ebpf/components/EBPFSchedules.vue +++ b/src/views/dashboard/related/ebpf/components/EBPFSchedules.vue @@ -34,7 +34,7 @@ limitations under the License. --> placeholder="Please input name" class="input-with-search" size="small" - @change="searchProcesses" + @change="searchProcesses(0)" >