From 4b3f83269b2282e42b22c9a10934bd7895f43144 Mon Sep 17 00:00:00 2001 From: liufei Date: Mon, 4 Dec 2023 17:36:42 +0800 Subject: [PATCH] =?UTF-8?q?=E5=8E=BB=E9=99=A4binder,sched,=E4=BC=98?= =?UTF-8?q?=E5=8C=96json=E6=96=87=E4=BB=B6=E9=80=89=E6=8B=A9=E6=8C=89?= =?UTF-8?q?=E9=92=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: liufei --- ide/src/trace/component/SpHelp.ts | 2 - .../component/chart/SpSegmentationChart.ts | 190 +----------------- .../trace/component/trace/base/TraceRow.ts | 83 ++++---- .../ui-worker/ProcedureWorkerFreqExtend.ts | 16 +- 4 files changed, 59 insertions(+), 232 deletions(-) diff --git a/ide/src/trace/component/SpHelp.ts b/ide/src/trace/component/SpHelp.ts index d0e5d80c0..d8ca953ab 100644 --- a/ide/src/trace/component/SpHelp.ts +++ b/ide/src/trace/component/SpHelp.ts @@ -127,7 +127,6 @@ export class SpHelp extends BaseElement { title: 'Native Memory抓取和展示说明', icon: '', clickHandler: function (item: MenuItem) { - console.log('22222'); SpStatisticsHttpUtil.addOrdinaryVisitAction({ event: 'native', action: 'help_doc', @@ -391,7 +390,6 @@ export class SpHelp extends BaseElement { title: 'Ability Monitor抓取和展示说明', icon: '', clickHandler: function (item: MenuItem) { - console.log('444444'); SpStatisticsHttpUtil.addOrdinaryVisitAction({ event: 'ability', action: 'help_doc', diff --git a/ide/src/trace/component/chart/SpSegmentationChart.ts b/ide/src/trace/component/chart/SpSegmentationChart.ts index be34e9525..2782aa633 100644 --- a/ide/src/trace/component/chart/SpSegmentationChart.ts +++ b/ide/src/trace/component/chart/SpSegmentationChart.ts @@ -31,7 +31,7 @@ export class SegMenTaTion { static schedRow: TraceRow | undefined; static freqInfoMapData: any = new Map(); private rowFolder!: TraceRow; - static chartData: any; + static chartData: Array = [];; // 数据切割联动 static setChartData(type: string, data: any) { let currentMaxValue = 0; @@ -58,7 +58,6 @@ export class SegMenTaTion { } else if (type === 'GPU-FREQ') { let chartData = data.map((v: any) => { - if (v.count > currentMaxValue) { currentMaxValue = v.count } @@ -68,6 +67,7 @@ export class SegMenTaTion { value: v.count, startNS: v.startNS, cycle: v.cycle, + type } }) CpuFreqExtendStruct.maxValue = currentMaxValue; @@ -76,96 +76,13 @@ export class SegMenTaTion { SegMenTaTion.GpuRow!.isComplete = false; SegMenTaTion.GpuRow!.supplier = (): Promise> => new Promise>((resolve) => resolve(chartData)); - } else if (type === 'SCHED-SWITCH') { - let chartData = data.map((v: any) => { - if (v.count > currentMaxValue) { - currentMaxValue = v.count - } - return { - cpu: 5, - dur: Number(v.duration) * 1000 * 1000, - value: v.count, - startNS: Number(v.cycleStartTime) * 1000 * 1000, - cycle: v.cycle, - } - }) - CpuFreqExtendStruct.maxValue = currentMaxValue; - SegMenTaTion.schedRow!.dataList = []; - SegMenTaTion.schedRow!.dataListCache = []; - SegMenTaTion.schedRow!.isComplete = false; - SegMenTaTion.schedRow!.supplier = (): Promise> => - new Promise>((resolve) => resolve(chartData)); - } else if (type === 'BINDER') { - let binderList: any = []; - let chartData: any; - data.map((v: any) => { - let listCount = 0 - v.map((t: any) => { - listCount += t.count - if (t.name === 'binder transaction') { - t.depth = t.count - } - if (t.name === 'binder transaction async') { - console.log(t, 'ttttttttt') - t.depth = t.count + ((v.filter((i: any) => { - return i.name === 'binder transaction' - }).length > 0) ? (v.filter((i: any) => { - return i.name === 'binder transaction' - })[0].count) : 0); - } - if (t.name === 'binder reply') { - t.depth = t.count + ((v.filter((i: any) => { - return i.name === 'binder transaction' - }).length > 0) ? (v.filter((i: any) => { - return i.name === 'binder transaction' - })[0].count) : 0) + ((v.filter((i: any) => { - return i.name === 'binder transaction async' - }).length > 0) ? (v.filter((i: any) => { - return i.name === 'binder transaction async' - })[0].count) : 0); - } - if (t.name === 'binder async rcv') { - t.depth = t.count + ((v.filter((i: any) => { - return i.name === 'binder transaction' - }).length > 0) ? (v.filter((i: any) => { - return i.name === 'binder transaction' - })[0].count) : 0) + ((v.filter((i: any) => { - return i.name === 'binder transaction async' - }).length > 0) ? (v.filter((i: any) => { - return i.name === 'binder transaction async' - })[0].count) : 0) + ((v.filter((i: any) => { - return i.name === 'binder reply' - }).length > 0) ? (v.filter((i: any) => { - return i.name === 'binder reply' - })[0].count) : 0) - } - binderList.push(t); - }); - binderStruct.maxHeight = binderStruct.maxHeight > listCount ? binderStruct.maxHeight : JSON.parse(JSON.stringify(listCount)); - listCount = 0 - }) - chartData = binderList.map((v: any) => { - return { - cpu: v.name === 'binder transaction' ? - 0 : v.name === 'binder transaction async' ? - 1 : v.name === 'binder reply' ? - 2 : 3, - startNS: v.startNS, - dur: v.dur, - name: `${v.name}`, - value: v.count, - depth: v.depth, - cycle: v.idx, - } - }) + } else { SegMenTaTion.binderRow!.dataList = []; SegMenTaTion.binderRow!.dataListCache = []; SegMenTaTion.binderRow!.isComplete = false; SegMenTaTion.binderRow!.style.height = `${binderStruct.maxHeight > 2 ? binderStruct.maxHeight * 20 + 20 : 40}px`; SegMenTaTion.binderRow!.supplier = (): Promise> => - new Promise>((resolve) => resolve(chartData)); - } else { - return + new Promise>((resolve) => resolve([])); } SegMenTaTion.trace.refreshCanvas(true) } @@ -175,6 +92,8 @@ export class SegMenTaTion { CpuFreqExtendStruct.isTabHover = tableIsHover; if (type === 'CPU-FREQ' || type === 'GPU-FREQ' || type === 'SCHED-SWITCH') { if (tableIsHover) { + SegMenTaTion.jsonRow!.isHover = false; + SegMenTaTion.GpuRow!.isHover = false; CpuFreqExtendStruct.cycle = cycle } else { CpuFreqExtendStruct.cycle = -1 @@ -203,8 +122,6 @@ export class SegMenTaTion { await this.initFolder(); await this.initCpuFreq(); await this.initGpuTrace(); - await this.initSchedTrace(); - await this.initBinderTrace(); } } @@ -249,7 +166,8 @@ export class SegMenTaTion { SegMenTaTion.jsonRow.style.height = '40px'; SegMenTaTion.jsonRow.name = `Cpu Computility`; SegMenTaTion.jsonRow.favoriteChangeHandler = SegMenTaTion.trace.favoriteChangeHandler; - SegMenTaTion.jsonRow.checkFile = 'json'; + SegMenTaTion.jsonRow.addRowCheckFilePop(); + SegMenTaTion.jsonRow.rowSetting = 'checkFile'; // 拿到了用户传递的数据 SegMenTaTion.jsonRow.onRowCheckFileChangeHandler = (e: any) => { let chartData = JSON.parse(e); @@ -266,7 +184,7 @@ export class SegMenTaTion { SegMenTaTion.trace?.displayTip( SegMenTaTion.jsonRow!, CpuFreqExtendStruct.hoverCpuFreqStruct, - `${ColorUtils.formatNumberComma(CpuFreqExtendStruct.hoverCpuFreqStruct!.value || 0)}` + `${CpuFreqExtendStruct.hoverCpuFreqStruct === undefined ? 0 : CpuFreqExtendStruct.hoverCpuFreqStruct.value!}` ); }; SegMenTaTion.jsonRow.findHoverStruct = () => { @@ -309,7 +227,7 @@ export class SegMenTaTion { SegMenTaTion.trace?.displayTip( SegMenTaTion.GpuRow!, CpuFreqExtendStruct.hoverCpuFreqStruct, - `${ColorUtils.formatNumberComma(CpuFreqExtendStruct.hoverCpuFreqStruct?.value!)} Hz·ms` + `${ColorUtils.formatNumberComma(CpuFreqExtendStruct.hoverCpuFreqStruct === undefined ? 0 : CpuFreqExtendStruct.hoverCpuFreqStruct.value!)} Hz·ms` ); }; SegMenTaTion.GpuRow.findHoverStruct = () => { @@ -336,92 +254,4 @@ export class SegMenTaTion { SegMenTaTion.trace.rowsEL?.appendChild(SegMenTaTion.GpuRow); this.rowFolder!.addChildTraceRow(SegMenTaTion.GpuRow); } - - async initSchedTrace() { - SegMenTaTion.schedRow = TraceRow.skeleton(); - SegMenTaTion.schedRow.rowId = `sched_switch Count`; - SegMenTaTion.schedRow.rowType = TraceRow.ROW_TYPE_SCHED_SWITCH; - SegMenTaTion.schedRow.rowParentId = ''; - SegMenTaTion.schedRow.style.height = '40px'; - SegMenTaTion.schedRow.name = `Sched_switch Count`; - SegMenTaTion.schedRow.favoriteChangeHandler = SegMenTaTion.trace.favoriteChangeHandler; - SegMenTaTion.schedRow.selectChangeHandler = SegMenTaTion.trace.selectChangeHandler; - SegMenTaTion.schedRow.focusHandler = (ev) => { - SegMenTaTion.trace?.displayTip( - SegMenTaTion.schedRow!, - CpuFreqExtendStruct.hoverCpuFreqStruct, - `${ColorUtils.formatNumberComma(CpuFreqExtendStruct.hoverCpuFreqStruct?.value!)} Hz·ms` - ); - }; - SegMenTaTion.schedRow.findHoverStruct = () => { - CpuFreqExtendStruct.hoverCpuFreqStruct = SegMenTaTion.schedRow!.getHoverStruct(); - }; - SegMenTaTion.schedRow.supplier = (): Promise> => - new Promise>((resolve) => resolve([])); - SegMenTaTion.schedRow.onThreadHandler = (useCache) => { - let context: CanvasRenderingContext2D; - if (SegMenTaTion.schedRow!.currentContext) { - context = SegMenTaTion.schedRow!.currentContext; - } else { - context = SegMenTaTion.schedRow!.collect ? SegMenTaTion.trace.canvasFavoritePanelCtx! : SegMenTaTion.trace.canvasPanelCtx!; - } - SegMenTaTion.schedRow!.canvasSave(context); - (renders['freq-extend'] as FreqExtendRender).renderMainThread( - { - context: context, - useCache: useCache, - type: `json0`, - }, - SegMenTaTion.schedRow! - ); - SegMenTaTion.schedRow!.canvasRestore(context); - }; - SegMenTaTion.trace.rowsEL?.appendChild(SegMenTaTion.schedRow); - this.rowFolder!.addChildTraceRow(SegMenTaTion.schedRow); - } - - async initBinderTrace() { - SegMenTaTion.binderRow = TraceRow.skeleton(); - SegMenTaTion.binderRow.rowId = `binderrow`; - SegMenTaTion.binderRow.rowType = TraceRow.ROW_TYPE_BINDER_COUNT; - SegMenTaTion.binderRow.rowParentId = ''; - SegMenTaTion.binderRow.name = `Binder Count`; - SegMenTaTion.binderRow.style.height = '40px'; - SegMenTaTion.binderRow.favoriteChangeHandler = SegMenTaTion.trace.favoriteChangeHandler; - SegMenTaTion.binderRow.selectChangeHandler = SegMenTaTion.trace.selectChangeHandler; - SegMenTaTion.binderRow.findHoverStruct = () => { - binderStruct.hoverCpuFreqStruct = SegMenTaTion.binderRow!.getHoverStruct(); - }; - // SegMenTaTion.binderRow.focusHandler = (ev) => { - // SegMenTaTion.trace?.displayTip( - // SegMenTaTion.binderRow!, - // binderStruct.hoverCpuFreqStruct, - // `Cycle: ${binderStruct.hoverCpuFreqStruct?.cycle}
- // Name: ${binderStruct.hoverCpuFreqStruct?.name || ''}
- // Count: ${binderStruct.hoverCpuFreqStruct?.value || ''}` - // ); - // }; - SegMenTaTion.binderRow.supplier = (): Promise> => - new Promise>((resolve) => resolve([])); - SegMenTaTion.binderRow.onThreadHandler = (useCache) => { - let context: CanvasRenderingContext2D; - if (SegMenTaTion.binderRow!.currentContext) { - context = SegMenTaTion.binderRow!.currentContext; - } else { - context = SegMenTaTion.binderRow!.collect ? SegMenTaTion.trace.canvasFavoritePanelCtx! : SegMenTaTion.trace.canvasPanelCtx!; - } - SegMenTaTion.binderRow!.canvasSave(context); - (renders['binder'] as BinderRender).renderMainThread( - { - context: context, - useCache: useCache, - type: `binder`, - }, - SegMenTaTion.binderRow! - ); - SegMenTaTion.binderRow!.canvasRestore(context); - }; - SegMenTaTion.trace.rowsEL?.appendChild(SegMenTaTion.binderRow); - this.rowFolder!.addChildTraceRow(SegMenTaTion.binderRow); - } } diff --git a/ide/src/trace/component/trace/base/TraceRow.ts b/ide/src/trace/component/trace/base/TraceRow.ts index 07de4e950..02a033920 100644 --- a/ide/src/trace/component/trace/base/TraceRow.ts +++ b/ide/src/trace/component/trace/base/TraceRow.ts @@ -179,9 +179,9 @@ export class TraceRow extends HTMLElement { parentRowEl: TraceRow | undefined; _rowSettingList: Array | null | undefined; _docompositionList: Array | undefined; - public rowCheckFileEL: LitIcon | null | undefined; - public inputEL: any; public onRowCheckFileChangeHandler: ((file: any) => void) | undefined | null; + private rowCheckFilePop: LitPopover | null | undefined; + public fileEL: any; focusHandler?: (ev: MouseEvent) => void | undefined; findHoverStruct?: () => void | undefined; @@ -244,14 +244,6 @@ export class TraceRow extends HTMLElement { ]; } - get checkFile(): string { - return this.getAttribute('row-file') || 'disable' - } - - set checkFile(value: string) { - this.setAttribute('row-file', value) - } - get docompositionList(): Array | undefined { return this._docompositionList; } @@ -674,8 +666,6 @@ export class TraceRow extends HTMLElement { this.canvasVessel = this.shadowRoot?.querySelector('.panel-vessel'); this.tipEL = this.shadowRoot?.querySelector('.tip'); let canvasNumber = this.args['canvasNumber']; - this.rowCheckFileEL = this.shadowRoot?.querySelector('.checkfile'); - this.inputEL = this.shadowRoot?.querySelector('#fileinput'); if (!this.args['skeleton']) { for (let i = 0; i < canvasNumber; i++) { let canvas = document.createElement('canvas'); @@ -687,23 +677,6 @@ export class TraceRow extends HTMLElement { } } - this.rowCheckFileEL!.onclick = () => { - this.inputEL.click(); - this.inputEL.addEventListener('change', (e: any) => { - let file = e.target.files[0]; - if (file.type === 'application/json') { - let file_reader = new FileReader(); - file_reader.readAsText(file, 'UTF-8'); - file_reader.onload = () => { - let fc = file_reader.result; - this.onRowCheckFileChangeHandler?.(fc) - }; - } else { - return - } - }, false) - } - this.checkBoxEL!.onchange = (ev: any) => { info('checkBoxEL onchange '); if (!ev.target.checked) { @@ -759,6 +732,38 @@ export class TraceRow extends HTMLElement { this.describeEl?.appendChild(this.rowSettingPop); } + addRowCheckFilePop(): void { + this.rowCheckFilePop = document.createElement('litpopover') as LitPopover; + this.rowCheckFilePop.innerHTML = `
+
+ + `; + this.rowCheckFilePop.id = 'rowCheckFile'; + this.rowCheckFilePop.className = 'popover checkFile'; + this.rowCheckFilePop.setAttribute('trigger', 'click'); + this.rowCheckFilePop?.addEventListener('mouseenter', (e) => { + window.publish(window.SmartEvent.UI.HoverNull, undefined); + }); + this.fileEL = this.rowCheckFilePop.querySelector('#jsoninput'); + this.rowCheckFilePop.onclick = (): void => { + this.fileEL.click(); + this.fileEL.addEventListener('change', (e: any) => { + let file = e.target.files[0]; + if (file.type === 'application/json') { + let file_reader = new FileReader(); + file_reader.readAsText(file, 'UTF-8'); + file_reader.onload = () => { + let fc = file_reader.result; + this.onRowCheckFileChangeHandler?.(fc) + }; + } else { + return + } + }, false) + } + this.describeEl?.appendChild(this.rowCheckFilePop); + } + getRowSettingKeys(): Array { if (this.rowSetting === 'enable') { return this.rowSettingTree!.getCheckdKeys(); @@ -1458,23 +1463,11 @@ export class TraceRow extends HTMLElement { :host([row-setting='enable']:not([check-type='-1'])) .collect{ margin-right: 5px; } - :host(:not([row-file='json'])) .checkfile{ - display:none; - } - :host(:not([row-file='json'])) input{ - display:none; - } - :host([row-file='json']) .checkfile{ + :host([row-setting='checkFile']) #rowCheckFile{ display:flex; } - :host([row-file='json']) input{ - display:flex; - } - :host([row-file='json']) .folder{ - display:none; - } - :host([row-file="json"]) .describe:hover .checkfile{ - color:#000; + :host([row-setting='checkFile']) #myfolder{ + color:#4b5766; }
@@ -1482,10 +1475,8 @@ export class TraceRow extends HTMLElement { -
- `; } diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerFreqExtend.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerFreqExtend.ts index 93759b2f7..93758690b 100644 --- a/ide/src/trace/database/ui-worker/ProcedureWorkerFreqExtend.ts +++ b/ide/src/trace/database/ui-worker/ProcedureWorkerFreqExtend.ts @@ -41,6 +41,7 @@ export class FreqExtendRender extends Render { if (row.isHover) { CpuFreqExtendStruct.cycle = -1; + CpuFreqExtendStruct.isTabHover = false; } freqReq.context.beginPath(); for (let re of freqFilter) { @@ -66,16 +67,18 @@ export class CpuFreqExtendStruct extends BaseStruct { startNS: number | undefined; dur: number | undefined; //自补充，数据库没有返回 cycle: number | undefined; + type: string | undefined; static draw(freqContext: CanvasRenderingContext2D, data: CpuFreqExtendStruct) { if (data.frame) { let width = data.frame.width || 0; let index = data.cpu || 0; index += 2; - freqContext.fillStyle = ColorUtils.colorForTid(index); - freqContext.strokeStyle = ColorUtils.colorForTid(index); - if (data === CpuFreqExtendStruct.hoverCpuFreqStruct - || data === CpuFreqExtendStruct.selectCpuFreqStruct + let color = ColorUtils.colorForTid(index) + freqContext.fillStyle = color; + freqContext.strokeStyle = color; + if (data === CpuFreqExtendStruct.hoverCpuFreqStruct + || data === CpuFreqExtendStruct.selectCpuFreqStruct || data === CpuFreqExtendStruct.selectCpuFreqStruct || (data.cycle === CpuFreqExtendStruct.cycle && CpuFreqExtendStruct.cycle !== -1)) { @@ -83,6 +86,11 @@ export class CpuFreqExtendStruct extends BaseStruct { freqContext.strokeStyle = '#ff0000'; freqContext.lineWidth = 3; freqContext.globalAlpha = 0.6; + if (data.type === 'SCHED-SWITCH' || data.type === 'GPU-FREQ') { + freqContext.globalAlpha = 1; + freqContext.fillStyle = color; + freqContext.strokeStyle = color; + } let drawHeight: number = Math.floor( ((data.value || 0) * (data.frame.height || 0) * 1.0) / CpuFreqExtendStruct.maxValue ); -- Gitee