From b2df16b77e8c33c1628c5dce0f2157562c4c4b91 Mon Sep 17 00:00:00 2001 From: zhangzepeng Date: Wed, 13 Mar 2024 16:01:57 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E2=80=98fix:=E5=8D=A1=E9=A1=BF=E4=B8=A2?= =?UTF-8?q?=E5=B8=A7=E4=B8=9A=E5=8A=A1=E6=B8=B2=E6=9F=93=E5=B8=A7=E5=88=A4?= =?UTF-8?q?=E6=96=AD=E8=A7=84=E5=88=99=E4=BF=AE=E6=94=B91.=E8=A7=A3?= =?UTF-8?q?=E5=86=B3rawtrace=E5=88=87=E5=89=B2=E5=A4=B1=E8=B4=A5=E9=97=AE?= =?UTF-8?q?=E9=A2=982.trace=E9=93=BE=E6=8E=A5=E6=97=A0=E6=B3=95=E6=89=93?= =?UTF-8?q?=E5=BC=80=E9=97=AE=E9=A2=983.Taskpool=E6=B2=A1=E5=85=B3?= =?UTF-8?q?=E8=81=94=E5=85=B3=E7=B3=BB=E6=97=B6Tab=E4=BC=9A=E6=98=BE?= =?UTF-8?q?=E7=A4=BA=E4=B8=80=E7=9B=B4=E5=8A=A0=E8=BD=BD4.=E8=A7=A3?= =?UTF-8?q?=E5=86=B3Task-pool=E6=90=9C=E7=B4=A2=E5=90=8E=E6=A1=86=E9=80=89?= =?UTF-8?q?=E7=9A=84Tab=E9=A1=B5=E4=BC=9A=E5=87=BA=E7=8E=B0=E4=B8=A4?= =?UTF-8?q?=E4=B8=AA=E5=B9=B6=E5=8F=91=E5=BA=A6=E7=9A=84=E9=97=AE=E9=A2=98?= =?UTF-8?q?5.raw-trace=E6=89=A7=E8=A1=8Ctrace-convert=E5=90=8E=E7=BC=BA?= =?UTF-8?q?=E5=B0=91=E6=95=B0=E6=8D=AE=E9=97=AE=E9=A2=98=E4=BF=AE=E5=A4=8D?= =?UTF-8?q?6.PageFaultTrace=E6=B3=B3=E9=81=93=E5=9B=BEcount=E6=98=BE?= =?UTF-8?q?=E7=A4=BA=E6=9C=89=E9=97=AE=E9=A2=98=EF=BC=88=E4=B8=8D=E6=98=AF?= =?UTF-8?q?=E6=8C=89=E6=9C=80=E5=A4=A7=E7=9A=84count=E6=98=BE=E7=A4=BA?= =?UTF-8?q?=EF=BC=897.AppStartups=E5=92=8CStaticInit=E6=B3=B3=E9=81=93?= =?UTF-8?q?=E7=BC=A9=E6=94=BE=E6=97=B6,=E6=B3=B3=E9=81=93=E6=98=8E?= =?UTF-8?q?=E6=98=BE=E6=99=83=E5=8A=A8=E9=97=AE=E9=A2=988.=E8=A7=A3?= =?UTF-8?q?=E5=86=B3=E5=8A=A8=E6=95=88=E6=9B=B2=E7=BA=BF=E5=92=8C=E5=B8=A7?= =?UTF-8?q?=E9=97=B4=E8=B7=9D=E6=9B=B2=E7=BA=BFhover=E9=9A=BE=E4=BB=A5?= =?UTF-8?q?=E9=80=89=E4=B8=AD=E7=9A=84=E9=97=AE=E9=A2=989.trace=E5=AF=BC?= =?UTF-8?q?=E5=85=A5=E6=96=87=E4=BB=B6=E5=8D=A1=E5=9C=A899%=E6=A0=88?= =?UTF-8?q?=E6=BA=A2=E5=87=BA=E9=97=AE=E9=A2=98=E2=80=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: zhangzepeng --- ide/src/base-ui/menu/LitMainMenu.ts | 4 + ide/src/base-ui/select/LitSelect.ts | 105 +++++++++++--- ide/src/base-ui/select/LitSelectHtml.ts | 42 +++++- ide/src/base-ui/select/LitSelectOption.ts | 2 +- ide/src/command/Cmd.ts | 20 +++ ide/src/command/CmdConstant.ts | 1 + ide/src/index.ts | 2 +- ide/src/trace/SpApplication.ts | 110 +++++++++++++-- ide/src/trace/bean/BoxSelection.ts | 2 +- ide/src/trace/bean/StateModle.ts | 1 - ide/src/trace/component/SpFlags.ts | 5 + .../trace/component/SpSystemTrace.event.ts | 10 +- ide/src/trace/component/SpSystemTrace.init.ts | 50 +++---- ide/src/trace/component/SpSystemTrace.ts | 11 +- .../{SpSampleChart.ts => SpBpftraceChart.ts} | 14 +- .../trace/component/chart/SpChartManager.ts | 12 +- ide/src/trace/component/chart/SpCpuChart.ts | 2 +- ide/src/trace/component/chart/SpEBPFChart.ts | 2 +- .../trace/component/chart/SpProcessChart.ts | 20 ++- .../component/setting/SpAllocation.html.ts | 10 +- .../trace/component/setting/SpAllocations.ts | 111 +++++++++++---- .../component/trace/base/TraceRowConfig.ts | 17 ++- .../trace/component/trace/base/TraceSheet.ts | 4 +- .../component/trace/base/TraceSheetConfig.ts | 10 +- .../trace/sheet/ark-ts/TabPaneComparison.ts | 98 +++++++------ .../TabPaneSampleInstruction.ts | 2 +- .../TabPaneSampleInstructionDistributions.ts | 4 +- .../TabPaneSampleInstructionSelection.ts | 2 +- ...PaneSampleInstructionSelectionTotalTime.ts | 6 +- .../trace/sheet/task/TabPaneTaskFrames.ts | 9 +- .../component/trace/timer-shaft/RangeRuler.ts | 2 +- ide/src/trace/database/ConvertTraceWorker.ts | 6 +- ide/src/trace/database/SqlLiteWorker.ts | 19 +++ .../database/data-trafic/ArkTsReceiver.ts | 19 ++- ide/src/trace/database/sql/Func.sql.ts | 1 - .../database/ui-worker/ProcedureWorker.ts | 2 +- .../ui-worker/ProcedureWorkerAppStartup.ts | 3 +- ...erSample.ts => ProcedureWorkerBpftrace.ts} | 0 .../ui-worker/ProcedureWorkerCommon.ts | 22 +++ .../ui-worker/ProcedureWorkerFrameDynamic.ts | 2 +- .../ui-worker/ProcedureWorkerFrameSpacing.ts | 2 +- .../database/ui-worker/ProcedureWorkerFunc.ts | 24 ++-- .../ui-worker/ProcedureWorkerSoInit.ts | 11 +- .../ui-worker/ProcedureWorkerThread.ts | 9 +- .../ui-worker/cpu/ProcedureWorkerCPU.ts | 2 +- .../src/filter/animation_filter.cpp | 3 +- trace_streamer/src/filter/animation_filter.h | 2 +- .../src/filter/task_pool_filter.cpp | 4 +- trace_streamer/src/filter/task_pool_filter.h | 2 +- trace_streamer/src/main.cpp | 2 +- .../src/parser/ebpf_parser/ebpf_splitter.h | 1 - .../src/parser/print_event_parser.cpp | 4 + .../src/parser/print_event_parser.h | 3 +- .../rawtrace_parser/rawtrace_parser.cpp | 9 +- .../src/table/base/include/table_base.h | 3 +- trace_streamer/src/table/base/table_base.cpp | 19 +++ .../table/ftrace/cpu_measure_filter_table.cpp | 18 --- .../ftrace/include/cpu_measure_filter_table.h | 2 - .../src/table/ftrace/include/instants_table.h | 2 - .../src/table/ftrace/include/measure_table.h | 1 - .../include/process_measure_filter_table.h | 2 - .../table/ftrace/include/sched_slice_table.h | 2 - .../include/system_event_filter_table.h | 2 - .../table/ftrace/include/thread_state_table.h | 2 - .../src/table/ftrace/instants_table.cpp | 33 ----- .../src/table/ftrace/measure_table.cpp | 18 --- .../ftrace/process_measure_filter_table.cpp | 18 --- .../src/table/ftrace/sched_slice_table.cpp | 18 --- .../ftrace/system_event_filter_table.cpp | 18 --- .../src/table/ftrace/thread_state_table.cpp | 18 --- trace_streamer/src/version.cpp | 2 +- .../unittest/filter/task_pool_filter_test.cpp | 131 +++++++++++++++++- 72 files changed, 731 insertions(+), 420 deletions(-) rename ide/src/trace/component/chart/{SpSampleChart.ts => SpBpftraceChart.ts} (97%) rename ide/src/trace/component/trace/sheet/{sample => bpftrace}/TabPaneSampleInstruction.ts (99%) rename ide/src/trace/component/trace/sheet/{sample => bpftrace}/TabPaneSampleInstructionDistributions.ts (99%) rename ide/src/trace/component/trace/sheet/{sample => bpftrace}/TabPaneSampleInstructionSelection.ts (99%) rename ide/src/trace/component/trace/sheet/{sample => bpftrace}/TabPaneSampleInstructionSelectionTotalTime.ts (98%) rename ide/src/trace/database/ui-worker/{ProcedureWorkerSample.ts => ProcedureWorkerBpftrace.ts} (100%) diff --git a/ide/src/base-ui/menu/LitMainMenu.ts b/ide/src/base-ui/menu/LitMainMenu.ts index c9f7b4f9..e8884aad 100644 --- a/ide/src/base-ui/menu/LitMainMenu.ts +++ b/ide/src/base-ui/menu/LitMainMenu.ts @@ -129,6 +129,9 @@ export class LitMainMenu extends BaseElement { let groupDescribe: LitMainMenuGroup = group!.shadowRoot!.querySelector('.group-describe') as LitMainMenuGroup; menuBody?.appendChild(group); it.children?.forEach((item: any) => { + if (item.fileModel !== undefined && item.fileModel === 'db') { + return; + } if (item.children && item.children.length > 0) { let secondGroup: LitMainMenuGroup = new LitMainMenuGroup(); secondGroup.setAttribute('title', item.title || ''); @@ -273,6 +276,7 @@ export interface MenuGroup { export interface MenuItem { icon: string; title: string; + fileModel?: string; disabled?: boolean; fileChoose?: boolean; clickHandler?: Function; diff --git a/ide/src/base-ui/select/LitSelect.ts b/ide/src/base-ui/select/LitSelect.ts index e72abac2..e086ed9d 100644 --- a/ide/src/base-ui/select/LitSelect.ts +++ b/ide/src/base-ui/select/LitSelect.ts @@ -15,11 +15,15 @@ import { BaseElement, element } from '../BaseElement'; import { selectHtmlStr } from './LitSelectHtml'; +import { LitSelectOption } from './LitSelectOption'; @element('lit-select') export class LitSelect extends BaseElement { private focused: any; private selectInputEl: any; + private selectSearchInputEl: HTMLInputElement | null | undefined; + private selectOptions: HTMLDivElement | null | undefined; + private selectItem: string = ''; private selectClearEl: any; private selectIconEl: any; private bodyEl: any; @@ -38,6 +42,7 @@ export class LitSelect extends BaseElement { 'list-height', 'border', 'mode', + 'showSearchInput', ]; } @@ -140,19 +145,70 @@ export class LitSelect extends BaseElement { } } + get showSearchInput() { + return this.hasAttribute('showSearchInput'); + } + + set showSearchInput(isHide: boolean) { + if (isHide) { + this.setAttribute('showSearchInput', ''); + } else { + this.removeAttribute('showSearchInput'); + } + } + + set showItem(item: string) { + this.selectItem = item; + } + set dataSource(selectDataSource: any) { - selectDataSource.forEach((dateSourceBean: any) => { - let selectOption = document.createElement('lit-select-option'); - if (dateSourceBean.name) { - selectOption.textContent = dateSourceBean.name; - selectOption.setAttribute('value', dateSourceBean.name); - } - this.append(selectOption); - }); - this.initOptions(); + this.innerHTML = ``; + if (selectDataSource.length > 0) { + this.bodyEl!.style.display = 'flex'; + selectDataSource.forEach((dateSourceBean: any) => { + let selectOption = document.createElement('lit-select-option'); + if (dateSourceBean.name) { + selectOption.textContent = dateSourceBean.name; + selectOption.setAttribute('value', dateSourceBean.name); + } else if (dateSourceBean) { + selectOption.textContent = dateSourceBean; + selectOption.setAttribute('value', dateSourceBean); + if ( + this.selectItem !== '' && + this.selectItem === this.value && + this.selectItem === selectOption.textContent + ) { + selectOption.setAttribute('selected', ''); + } + this.selectInputEl!.value = ''; + } + this.append(selectOption); + }); + this.initOptions(); + } else { + this.bodyEl!.style.display = 'none'; + } } - initElements(): void {} + initElements(): void { + if (this.showSearchInput) { + this.shadowRoot!.querySelector('.body-select')!.style.display = 'block'; + this.selectSearchInputEl = this.shadowRoot!.querySelector('#search-input') as HTMLInputElement; + this.selectSearchInputEl?.addEventListener('keyup', (evt) => { + let options = []; + options = [...this.querySelectorAll('lit-select-option')]; + options.filter((a: LitSelectOption) => { + if (a.textContent!.indexOf(this.selectSearchInputEl!.value) <= -1) { + a.style.display = 'none'; + } else { + a.style.display = 'flex'; + } + }); + evt.preventDefault(); + evt.stopPropagation(); + }); + } + } initHtml() { return ` @@ -168,8 +224,13 @@ export class LitSelect extends BaseElement {
- - + +
+ + +
`; } @@ -214,6 +275,7 @@ export class LitSelect extends BaseElement { this.selectIconEl = this.shadowRoot!.querySelector('.icon'); this.selectSearchEl = this.shadowRoot!.querySelector('.search'); this.selectMultipleRootEl = this.shadowRoot!.querySelector('.multipleRoot'); + this.selectOptions = this.shadowRoot!.querySelector('.body-opt') as HTMLDivElement; this.setEventClick(); this.setEvent(); this.selectInputEl.onblur = (ev: any) => { @@ -238,14 +300,14 @@ export class LitSelect extends BaseElement { this.setOnkeydown(); } - setOninput():void{ + setOninput(): void { this.selectInputEl.oninput = (ev: any) => { let els: Element[] = [...this.querySelectorAll('lit-select-option')]; if (this.hasAttribute('show-search')) { if (!ev.target.value) { els.forEach((a: any) => (a.style.display = 'flex')); } else { - this.setSelectItem(els,ev) + this.setSelectItem(els, ev); } } else { this.value = ev.target.value; @@ -253,7 +315,7 @@ export class LitSelect extends BaseElement { }; } - setSelectItem(els:Element[],ev:any):void{ + setSelectItem(els: Element[], ev: any): void { els.forEach((a: any) => { let value = a.getAttribute('value'); if ( @@ -267,7 +329,7 @@ export class LitSelect extends BaseElement { }); } - setEventClick():void{ + setEventClick(): void { this.selectClearEl.onclick = (ev: any) => { if (this.isMultiple()) { let delNodes: Array = []; @@ -298,17 +360,15 @@ export class LitSelect extends BaseElement { if (this.focused === false) { this.selectInputEl.focus(); this.focused = true; - this.bodyEl!.style.display = 'block'; + this.bodyEl!.style.display = 'flex'; } else { - this.blur(); - this.bodyEl!.style.display = 'none'; this.focused = false; } } }; } - setEvent():void{ + setEvent(): void { this.onmouseover = this.onfocus = (ev) => { if (this.focused === false && this.hasAttribute('adaptive-expansion')) { if (this.parentElement!.offsetTop < this.bodyEl!.clientHeight) { @@ -351,7 +411,7 @@ export class LitSelect extends BaseElement { }; } - setOnkeydown():void{ + setOnkeydown(): void { this.selectInputEl.onkeydown = (ev: any) => { if (ev.key === 'Backspace') { if (this.isMultiple()) { @@ -422,7 +482,7 @@ export class LitSelect extends BaseElement { }); } - onSelectedEvent(a:Element):void{ + onSelectedEvent(a: Element): void { a.addEventListener('onSelected', (e: any) => { if (this.isMultiple()) { if (a.hasAttribute('selected')) { @@ -454,6 +514,7 @@ export class LitSelect extends BaseElement { a.removeAttribute('selected'); } else { a.setAttribute('selected', ''); + this.selectItem = a.textContent!; } // @ts-ignore this.value = e.detail.value; diff --git a/ide/src/base-ui/select/LitSelectHtml.ts b/ide/src/base-ui/select/LitSelectHtml.ts index 47aa38f3..785ebaa1 100644 --- a/ide/src/base-ui/select/LitSelectHtml.ts +++ b/ide/src/base-ui/select/LitSelectHtml.ts @@ -33,6 +33,7 @@ let css = ` border: 1px solid var(--bark-prompt,#dcdcdc); } input{ + width: 100%; border: 0; outline: none; background-color: transparent; @@ -54,7 +55,7 @@ let css = ` } .root{ position: relative; - padding: 3px 6px; + padding: 1px 8px; display: flex; align-items: center; justify-content: space-between; @@ -141,10 +142,10 @@ let css = ` } :host(:not([mode])) input{ width: 100%; + padding: 6px 0px; } .body{ - max-height: {1}; - overflow: auto; + max-height: 286px; border-radius: 2px; box-shadow: 0 5px 15px 0px #00000033; } @@ -174,6 +175,7 @@ let css = ` display: none; } .multipleRoot{ + width:100%; display: flex; align-items: center; flex-flow: wrap; @@ -208,6 +210,40 @@ let css = ` color: #999999; margin-left: 0px; } + #search-input { + outline: none; + border: none; + margin-left: 15px; + } + .body-select { + margin-top: 3px; + background-color: var(--dark-background4,#fff); + width: 100%; + border-bottom: none; + } + .body-opt{ + width: 100%; + max-height: 256px; + border-top: none; + overflow: auto; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 10px; + background-color: var(--dark-background4,#fff); + } + input::-webkit-input-placeholder { + color: var(--dark-color,#aab2bd); + } + /*Define the height, width and background of the scroll bar*/ + ::-webkit-scrollbar{ + width: 8px; + border-radius: 10px; + background-color: var(--dark-background3,#FFFFFF); + } + /*define slider*/ + ::-webkit-scrollbar-thumb{ + border-radius: 6px; + background-color: var(--dark-background7,rgba(0,0,0,0.1)); + } `; diff --git a/ide/src/base-ui/select/LitSelectOption.ts b/ide/src/base-ui/select/LitSelectOption.ts index de6345c0..a9f58c3c 100644 --- a/ide/src/base-ui/select/LitSelectOption.ts +++ b/ide/src/base-ui/select/LitSelectOption.ts @@ -16,7 +16,7 @@ import { BaseElement } from '../BaseElement'; import '../icon/LitIcon'; -const initHtmlStyle:string = ` +const initHtmlStyle: string = `