From b7c36a6a1a3cb04cc8c6088a4b24f3c1fab5ebfe Mon Sep 17 00:00:00 2001 From: jichuan Date: Mon, 25 Sep 2023 09:21:16 +0800 Subject: [PATCH 01/19] =?UTF-8?q?Feat:=E9=AB=98=E9=98=B6debug=20sql?= =?UTF-8?q?=E6=8C=87=E5=AF=BC=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: jichuan --- ide/src/base-ui/icon.svg | 16 ++ ide/src/base-ui/table/lit-table.ts | 32 ++- ide/src/trace/SpApplication.ts | 6 + ide/src/trace/component/SpQuerySQL.ts | 138 ++++++++-- .../trace/component/chart/SpFrameTimeChart.ts | 14 +- ide/src/trace/component/chart/SpHiPerf.ts | 8 +- .../trace/component/chart/SpProcessChart.ts | 243 +++++++++--------- .../trace/component/trace/base/CommonSql.ts | 135 ++++++++++ .../component/trace/base/CustomThemeColor.ts | 3 +- .../component/trace/base/TraceRowConfig.ts | 2 +- ide/src/trace/database/SqlLite.ts | 12 + 11 files changed, 444 insertions(+), 165 deletions(-) create mode 100644 ide/src/trace/component/trace/base/CommonSql.ts diff --git a/ide/src/base-ui/icon.svg b/ide/src/base-ui/icon.svg index 569a0aea..ff9b5bff 100644 --- a/ide/src/base-ui/icon.svg +++ b/ide/src/base-ui/icon.svg @@ -324,4 +324,20 @@ + + + + + + + + + + + + + + + + diff --git a/ide/src/base-ui/table/lit-table.ts b/ide/src/base-ui/table/lit-table.ts index 56c64671..826cd620 100644 --- a/ide/src/base-ui/table/lit-table.ts +++ b/ide/src/base-ui/table/lit-table.ts @@ -187,7 +187,13 @@ export class LitTable extends HTMLElement { display: grid; background-color: var(--dark-background,#FFFFFF); } - + :host([data-query-scene]) .th { + background-color: #F6F6F6; + color: #7E7E7E; + } + :host([data-query-scene]) .tr { + background-color: #F6F6F6; + } .tree-icon{ font-size: 1.2rem; width: 20px; @@ -1574,17 +1580,19 @@ export class LitTable extends HTMLElement { this.setSelectedRow(false, [firstElement]); } } - let dataIndex = this.columns![idx].getAttribute('data-index') || '1'; - let text = this.formatName(dataIndex, rowObject.data[dataIndex]); - if ((this.columns![idx] as any).template) { - (child as HTMLElement).innerHTML = ''; - (child as HTMLElement).appendChild( - (this.columns![idx] as any).template.render(rowObject.data).content.cloneNode(true) - ); - (child as HTMLElement).title = text; - } else { - (child as HTMLElement).innerHTML = text; - (child as HTMLElement).title = text; + if (idx < this.columns!.length) { + let dataIndex = this.columns![idx].getAttribute('data-index') || '1'; + let text = this.formatName(dataIndex, rowObject.data[dataIndex]); + if ((this.columns![idx] as any).template) { + (child as HTMLElement).innerHTML = ''; + (child as HTMLElement).appendChild( + (this.columns![idx] as any).template.render(rowObject.data).content.cloneNode(true) + ); + (child as HTMLElement).title = text; + } else { + (child as HTMLElement).innerHTML = text; + (child as HTMLElement).title = text; + } } }); if (element.style.display == 'none') { diff --git a/ide/src/trace/SpApplication.ts b/ide/src/trace/SpApplication.ts index 07a2b61d..edb0a0e8 100644 --- a/ide/src/trace/SpApplication.ts +++ b/ide/src/trace/SpApplication.ts @@ -439,7 +439,9 @@ export class SpApplication extends BaseElement { let customColor = this.shadowRoot?.querySelector('.custom-color') as CustomThemeColor; mainMenu!.setAttribute('main_menu', '1'); chartFilter!.setAttribute('mode', ''); + chartFilter!.setAttribute('hidden', ''); customColor!.setAttribute('mode', ''); + customColor!.setAttribute('hidden', ''); let childNodes = [ spSystemTrace, spRecordTrace, @@ -517,8 +519,10 @@ export class SpApplication extends BaseElement { filterConfig.addEventListener('click', (ev) => { if (this!.hasAttribute('chart_filter')) { this!.removeAttribute('chart_filter'); + chartFilter!.setAttribute('hidden', ''); } else { this!.setAttribute('chart_filter', ''); + chartFilter!.removeAttribute('hidden'); } }); configClose!.addEventListener('click', (ev) => { @@ -533,9 +537,11 @@ export class SpApplication extends BaseElement { customColorShow.addEventListener('click', (ev) => { if (this!.hasAttribute('custom-color')) { this!.removeAttribute('custom-color'); + customColor!.setAttribute('hidden', ''); customColor.cancelOperate(); } else { this!.setAttribute('custom-color', ''); + customColor!.removeAttribute('hidden'); } }); diff --git a/ide/src/trace/component/SpQuerySQL.ts b/ide/src/trace/component/SpQuerySQL.ts index 8cd45c3a..6f28d1f8 100644 --- a/ide/src/trace/component/SpQuerySQL.ts +++ b/ide/src/trace/component/SpQuerySQL.ts @@ -23,6 +23,8 @@ import { LitProgressBar } from '../../base-ui/progress-bar/LitProgressBar.js'; import { PageNation } from '../../base-ui/chart/pagenation/PageNation.js'; import { PaginationBox } from '../../base-ui/chart/pagenation/PaginationBox.js'; import { SpStatisticsHttpUtil } from '../../statistics/util/SpStatisticsHttpUtil.js'; +import { getAllSql } from './trace/base/CommonSql.js'; +import { LitIcon } from '../../base-ui/icon/LitIcon.js'; @element('sp-query-sql') export class SpQuerySQL extends BaseElement { @@ -38,15 +40,18 @@ export class SpQuerySQL extends BaseElement { private querySqlErrorText: string = ''; private progressLoad: LitProgressBar | undefined; private pagination: PaginationBox | undefined; + private sqlListDiv: HTMLDivElement | undefined; initElements(): void { this.progressLoad = this.shadowRoot?.querySelector('.load-query-sql') as LitProgressBar; this.selector = this.shadowRoot?.querySelector('.sql-select') as HTMLTextAreaElement; this.queryTableEl = new LitTable(); + this.queryTableEl.setAttribute('data-query-scene',''); this.querySize = this.shadowRoot?.querySelector('.query_size') as HTMLElement; this.response = this.shadowRoot?.querySelector('#dataResult') as HTMLDivElement; this.pagination = this.shadowRoot?.querySelector('.pagination-box') as PaginationBox; this.notSupportList?.push('insert', 'delete', 'update', 'drop', 'alter', 'truncate', 'create'); + this.sqlListDiv = this.shadowRoot?.querySelector('#sqlList') as HTMLDivElement; let htmlDivElement = this.queryTableEl.shadowRoot?.querySelector('.table') as HTMLDivElement; htmlDivElement.style.overflowX = 'scroll'; window.addEventListener('resize', () => { @@ -67,7 +72,28 @@ export class SpQuerySQL extends BaseElement { this.queryTableEl!.style.height = '100%'; this.queryTableEl!.reMeauseHeight(); } - }).observe(this.parentElement!); + }).observe(this.response); + this.initSqlInit(); + } + + private initSqlInit() : void { + let commonSqlList = getAllSql(); + if (commonSqlList.length > 0) { + for (let i = 0;i < commonSqlList.length; i ++) { + let commonSqlDiv = document.createElement('div'); + commonSqlDiv.className = 'sql-item'; + let sql = document.createElement('div'); + sql.className = 'sql'; + sql.textContent = commonSqlList[i]; + let runButton = document.createElement('lit-icon'); + runButton.className = 'runButton'; + runButton.setAttribute('size', '20'); + runButton.setAttribute('name', 'run-sql'); + commonSqlDiv.appendChild(sql); + commonSqlDiv.appendChild(runButton); + this.sqlListDiv?.append(commonSqlDiv); + } + } } private freshTableHeadResizeStyle(): void { @@ -130,20 +156,7 @@ export class SpQuerySQL extends BaseElement { this.queryTableEl!.innerHTML = ''; this.pagination!.style.display = 'none'; if (this.isSupportSql) { - this.progressLoad!.loading = true; - queryCustomizeSelect(this.selector!.value).then((resultList): void => { - if (resultList && resultList.length > 0) { - this.statDataArray = resultList; - this.keyList = Object.keys(resultList[0]); - this.querySize!.textContent = `Query result - ${this.statDataArray.length} counts.`; - this.initDataElement(); - this.response!.appendChild(this.queryTableEl!); - this.setPageNationTableEl(); - } else { - this.querySize!.textContent = `Query result - ${this.statDataArray.length} counts.`; - this.progressLoad!.loading = false; - } - }); + this.executeSql(this.selector!.value); } else { this.querySize!.textContent = this.querySqlErrorText; this.queryTableEl!.dataSource = []; @@ -153,6 +166,23 @@ export class SpQuerySQL extends BaseElement { } }; + private executeSql(sql: string) : void{ + this.progressLoad!.loading = true; + queryCustomizeSelect(sql).then((resultList): void => { + if (resultList && resultList.length > 0) { + this.statDataArray = resultList; + this.keyList = Object.keys(resultList[0]); + this.querySize!.textContent = `Query result - ${this.statDataArray.length} counts.`; + this.initDataElement(); + this.response!.appendChild(this.queryTableEl!); + this.setPageNationTableEl(); + } else { + this.querySize!.textContent = `Query result - ${this.statDataArray.length} counts.`; + this.progressLoad!.loading = false; + } + }); + } + private setPageNationTableEl(): void { let that = this; let timeOutTs: number = 200; @@ -239,8 +269,25 @@ export class SpQuerySQL extends BaseElement { this.selector!.addEventListener('input', this.inputSqlListener); this.selector!.addEventListener('change', this.inputSqlListener); this.selector!.addEventListener('keydown', this.deleteSqlListener); + this.shadowRoot?.querySelectorAll('.runButton'). + forEach((it) => ( + it.addEventListener('click', this.runSqlListener) + )); } + runSqlListener = (e: Event): void => { + this.statDataArray = []; + this.keyList = []; + this.response!.innerHTML = ''; + this.queryTableEl!.innerHTML = ''; + this.pagination!.style.display = 'none'; + let previousSibling = (e.target as HTMLDivElement).previousElementSibling; + if (previousSibling && previousSibling instanceof HTMLDivElement) { + const content = previousSibling.textContent; + this.executeSql(content!); + } + }; + private deleteSqlListener = (event: KeyboardEvent): void => { if (event.key === 'Backspace') { this.resizeSqlHeight().then(); @@ -341,7 +388,6 @@ export class SpQuerySQL extends BaseElement { } .response{ flex-grow: 1; - margin-bottom: 1%; display: flex; flex-direction: column; min-height: inherit; @@ -353,6 +399,10 @@ export class SpQuerySQL extends BaseElement { overflow-x: visible; margin-bottom: 1%; border-radius: 16px; + background-color: #F6F6F6; + padding: 0px 0px 0px 30px; + min-height: inherit; + max-height: 70vh; } p{ display: table-cell; @@ -409,6 +459,36 @@ export class SpQuerySQL extends BaseElement { .pagination-box { opacity: 0; } + .sql-item { + display: flex; + justify-content: space-between; + padding: 10px 0px; + font-size: 14px; + } + .sql { + width: 90%; + } + .query-sql { + background-color: var(--dark-background3,#FFFFFF); + padding: 1% 2%; + margin: 0% 2.5% 0 2.5%; + border-bottom-left-radius: 16px; + border-bottom-right-radius: 16px; + width: 90%; + } + .query-result { + background-color: var(--dark-background3,#FFFFFF); + padding: 1% 2%; + margin: 2% 2.5% 0 2.5%; + border-top-left-radius: 16px; + border-top-right-radius: 16px; + width: 90%; + } + #sqlList { + background-color:#F6F6F6; + padding: 10px; + border-radius: 16px; + }
@@ -416,18 +496,20 @@ export class SpQuerySQL extends BaseElement {
-
-
-

Query result - 0 counts

-
- - -
-
-
- -
-
+
+
+

Query result - 0 counts

+
+ + +
+
+
+ +
+
+
+
`; } } diff --git a/ide/src/trace/component/chart/SpFrameTimeChart.ts b/ide/src/trace/component/chart/SpFrameTimeChart.ts index bd00198c..797f374a 100644 --- a/ide/src/trace/component/chart/SpFrameTimeChart.ts +++ b/ide/src/trace/component/chart/SpFrameTimeChart.ts @@ -25,7 +25,7 @@ import { queryFrameDynamicData, queryFrameSpacing, queryFrameTimeData, - queryPhysicalData + queryPhysicalData, queryTraceType } from '../../database/SqlLite.js'; import { JanksStruct } from '../../bean/JanksStruct.js'; import { ns2xByTimeShaft, PairPoint } from '../../database/ui-worker/ProcedureWorkerCommon.js'; @@ -50,6 +50,7 @@ import { EmptyRender } from '../../database/ui-worker/ProcedureWorkerCPU.js'; export class SpFrameTimeChart { private trace: SpSystemTrace; private flagConfig: Params | undefined; + private isTxtTraceType: boolean = false; constructor(trace: SpSystemTrace) { this.trace = trace; @@ -59,7 +60,13 @@ export class SpFrameTimeChart { let frameTimeData = await queryFrameTimeData(); if (frameTimeData.length > 0) { let frameTimeLineRow: TraceRow = await this.initFrameTimeLine(); - await this.initExpectedChart(frameTimeLineRow); + let traceType = await queryTraceType(); + if (traceType.length > 0 && traceType[0].value.startsWith('txt')) { + this.isTxtTraceType = true; + } + if (!this.isTxtTraceType) { + await this.initExpectedChart(frameTimeLineRow); + } await this.initActualChart(frameTimeLineRow); } } @@ -634,6 +641,9 @@ export class SpFrameTimeChart { let depthArray = []; for (let index: number = 0; index < frameActualData.length; index++) { let it = frameActualData[index]; + if (this.isTxtTraceType) { + it.jank_tag = 0; + } if (!it.dur || it.dur < 0) { continue; } diff --git a/ide/src/trace/component/chart/SpHiPerf.ts b/ide/src/trace/component/chart/SpHiPerf.ts index 84376c23..b600b27b 100644 --- a/ide/src/trace/component/chart/SpHiPerf.ts +++ b/ide/src/trace/component/chart/SpHiPerf.ts @@ -114,6 +114,9 @@ export class SpHiPerf { row.rowParentId = ''; row.folder = true; row.style.height = '40px'; + if (SpChartManager.APP_STARTUP_PID_ARR.find(pid => pid === process.pid) !== undefined) { + row.addTemplateTypes('AppStartup'); + } row.addTemplateTypes('HiPerf'); if (SpHiPerf.stringResult?.existA === true) { row.name = `HiPerf (All)`; @@ -233,10 +236,7 @@ export class SpHiPerf { row.rowParentId = 'HiPerf'; row.rowHidden = !this.rowFolder.expansion; row.folder = true; - if (SpChartManager.APP_STARTUP_PID_ARR.find(pid => pid === process.pid) !== undefined) { - row.addTemplateTypes('AppStartup'); - } - row.addTemplateTypes('HiPerf'); + row.name = `${process.processName || 'Process'} [${process.pid}]`; row.folderPaddingLeft = 6; row.style.height = '40px'; diff --git a/ide/src/trace/component/chart/SpProcessChart.ts b/ide/src/trace/component/chart/SpProcessChart.ts index 2f8d3f67..0bff7204 100644 --- a/ide/src/trace/component/chart/SpProcessChart.ts +++ b/ide/src/trace/component/chart/SpProcessChart.ts @@ -34,7 +34,7 @@ import { queryProcessThreads, queryProcessThreadsByTable, queryStartupPidArray, - queryThreadData + queryThreadData, queryTraceType, } from '../../database/SqlLite.js'; import { Utils } from '../trace/base/Utils.js'; import { info } from '../../../log/Log.js'; @@ -201,11 +201,18 @@ export class SpProcessChart { let allJankProcess: Array = []; let allExpectedProcess: Array = []; let allActualProcess: Array = []; + let isTxtTraceType: boolean = false; if (allJankProcessData.length > 0) { allJankProcessData.forEach((name, index) => { allJankProcess.push(name.pid!); }); - allExpectedProcess = await queryAllExpectedData(); + let traceType = await queryTraceType(); + if (traceType.length > 0 && traceType[0].value.startsWith('txt')) { + isTxtTraceType = true; + } + if (!isTxtTraceType) { + allExpectedProcess = await queryAllExpectedData(); + } allActualProcess = await queryAllActualData(); } let allTaskPoolPid = await queryAllTaskPoolPid(); @@ -277,142 +284,144 @@ export class SpProcessChart { */ let actualRow: TraceRow | null = null; let expectedRow: TraceRow | null = null; - if (allJankProcess.indexOf(it.pid) > -1 && allExpectedProcess.length > 0) { - let expectedData = allExpectedProcess.filter((ite) => ite.pid == it.pid); - if (expectedData.length > 0) { - // @ts-ignore - let isIntersect = (a: JanksStruct, b: JanksStruct): boolean => - Math.max(a.ts! + a.dur!, b.ts! + b.dur!) - Math.min(a.ts!, b.ts!) < a.dur! + b.dur!; - let depthArray: any = []; - for (let j = 0 ; j < expectedData.length ; j++) { - let expectedItem = expectedData[j]; - if (expectedItem.cmdline != 'render_service') { - expectedItem.frame_type = 'app'; - } else { - expectedItem.frame_type = expectedItem.cmdline; - } - if (!expectedItem.dur || expectedItem.dur < 0) { - continue; - } - if (depthArray.length === 0) { - expectedItem.depth = 0; - depthArray.push(expectedItem); - } else { - if (isIntersect(depthArray[0], expectedItem)) { - if (isIntersect(depthArray[depthArray.length - 1], expectedItem)) { - expectedItem.depth = depthArray.length; - depthArray.push(expectedItem); - } - } else { - expectedItem.depth = 0; - depthArray = [expectedItem]; - } - } - } - let max = Math.max(...expectedData.map((it) => it.depth || 0)) + 1; - let maxHeight = max * 20; - expectedRow = TraceRow.skeleton(); - let timeLineType = expectedData[0].type; - expectedRow.rowId = `${ timeLineType }-${ it.pid }`; - expectedRow.asyncFuncName = it.processName; - expectedRow.asyncFuncNamePID = it.pid; - expectedRow.rowType = TraceRow.ROW_TYPE_JANK; - expectedRow.rowParentId = `${ it.pid }`; - expectedRow.rowHidden = !processRow.expansion; - expectedRow.style.width = '100%'; - expectedRow.style.height = `${ maxHeight }px`; - expectedRow.setAttribute('height', `${ maxHeight }`); - expectedRow.setAttribute('frame_type', expectedData[0].frame_type); - expectedRow.name = 'Expected Timeline'; - expectedRow.addTemplateTypes('FrameTimeline'); - expectedRow.setAttribute('children', ''); - expectedRow.supplier = (): Promise => - new Promise((resolve) => { - resolve(expectedData); - }); - expectedRow.favoriteChangeHandler = this.trace.favoriteChangeHandler; - expectedRow.selectChangeHandler = this.trace.selectChangeHandler; - expectedRow.onThreadHandler = (useCache): void => { - let context = expectedRow!.collect ? this.trace.canvasFavoritePanelCtx! : this.trace.canvasPanelCtx!; - expectedRow!.canvasSave(context); - (renders['jank'] as JankRender).renderMainThread( - { - context: context, - useCache: useCache, - type: 'expected_frame_timeline_slice', - }, - expectedRow! - ); - expectedRow!.canvasRestore(context); - }; - processRow.addChildTraceRow(expectedRow); - let actualData = allActualProcess.filter((ite) => ite.pid == it.pid); - if (actualData.length > 0) { - let isIntersect = (a: any, b: any): boolean => - Math.max(a.ts + a.dur, b.ts + b.dur) - Math.min(a.ts, b.ts) < a.dur + b.dur; + if (allJankProcess.indexOf(it.pid) > -1) { + let isIntersect = (a: JanksStruct, b: JanksStruct): boolean => + Math.max(a.ts! + a.dur!, b.ts! + b.dur!) - Math.min(a.ts!, b.ts!) < a.dur! + b.dur!; + if (!isTxtTraceType) { + let expectedData = allExpectedProcess.filter((ite) => ite.pid == it.pid); + if (expectedData.length > 0) { let depthArray: any = []; - for (let j = 0 ; j < actualData.length ; j++) { - let actualItem = actualData[j]; - if (actualItem.cmdline != 'render_service') { - actualItem.frame_type = 'app'; + for (let j = 0 ; j < expectedData.length ; j++) { + let expectedItem = expectedData[j]; + if (expectedItem.cmdline != 'render_service') { + expectedItem.frame_type = 'app'; } else { - actualItem.frame_type = actualItem.cmdline; + expectedItem.frame_type = expectedItem.cmdline; } - if (!actualItem.dur || actualItem.dur < 0) { + if (!expectedItem.dur || expectedItem.dur < 0) { continue; } if (depthArray.length === 0) { - actualItem.depth = 0; - depthArray.push(actualItem); + expectedItem.depth = 0; + depthArray.push(expectedItem); } else { - if (isIntersect(depthArray[0], actualItem)) { - if (isIntersect(depthArray[depthArray.length - 1], actualItem)) { - actualItem.depth = depthArray.length; - depthArray.push(actualItem); - } else { - actualItem.depth = depthArray.length - 1; - depthArray[length - 1] = actualItem; + if (isIntersect(depthArray[0], expectedItem)) { + if (isIntersect(depthArray[depthArray.length - 1], expectedItem)) { + expectedItem.depth = depthArray.length; + depthArray.push(expectedItem); } } else { - actualItem.depth = 0; - depthArray = [actualItem]; + expectedItem.depth = 0; + depthArray = [expectedItem]; } } } - let max = Math.max(...actualData.map((it) => it.depth || 0)) + 1; + let max = Math.max(...expectedData.map((it) => it.depth || 0)) + 1; let maxHeight = max * 20; - actualRow = TraceRow.skeleton(); - let timeLineType = actualData[0].type; - actualRow.rowId = `${ timeLineType }-${ it.pid }`; - actualRow.rowType = TraceRow.ROW_TYPE_JANK; - actualRow.rowParentId = `${ it.pid }`; - actualRow.rowHidden = !processRow.expansion; - actualRow.style.width = '100%'; - actualRow.style.height = `${ maxHeight }px`; - actualRow.setAttribute('height', `${ maxHeight }`); - actualRow.name = 'Actual Timeline'; - actualRow.addTemplateTypes('FrameTimeline'); - actualRow.setAttribute('frame_type', actualData[0].frame_type); - actualRow.setAttribute('children', ''); - actualRow.dataList = actualData; - actualRow.supplier = (): Promise => new Promise((resolve) => resolve(actualData)); - actualRow.favoriteChangeHandler = this.trace.favoriteChangeHandler; - actualRow.selectChangeHandler = this.trace.selectChangeHandler; - actualRow.onThreadHandler = (useCache): void => { - let context = actualRow!.collect ? this.trace.canvasFavoritePanelCtx! : this.trace.canvasPanelCtx!; - actualRow!.canvasSave(context); + expectedRow = TraceRow.skeleton(); + let timeLineType = expectedData[0].type; + expectedRow.rowId = `${ timeLineType }-${ it.pid }`; + expectedRow.asyncFuncName = it.processName; + expectedRow.asyncFuncNamePID = it.pid; + expectedRow.rowType = TraceRow.ROW_TYPE_JANK; + expectedRow.rowParentId = `${ it.pid }`; + expectedRow.rowHidden = !processRow.expansion; + expectedRow.style.width = '100%'; + expectedRow.style.height = `${ maxHeight }px`; + expectedRow.setAttribute('height', `${ maxHeight }`); + expectedRow.setAttribute('frame_type', expectedData[0].frame_type); + expectedRow.name = 'Expected Timeline'; + expectedRow.addTemplateTypes('FrameTimeline'); + expectedRow.setAttribute('children', ''); + expectedRow.supplier = (): Promise => + new Promise((resolve) => { + resolve(expectedData); + }); + expectedRow.favoriteChangeHandler = this.trace.favoriteChangeHandler; + expectedRow.selectChangeHandler = this.trace.selectChangeHandler; + expectedRow.onThreadHandler = (useCache): void => { + let context = expectedRow!.collect ? this.trace.canvasFavoritePanelCtx! : this.trace.canvasPanelCtx!; + expectedRow!.canvasSave(context); (renders['jank'] as JankRender).renderMainThread( { context: context, useCache: useCache, - type: 'actual_frame_timeline_slice', + type: 'expected_frame_timeline_slice', }, - actualRow! + expectedRow! ); - actualRow!.canvasRestore(context); + expectedRow!.canvasRestore(context); }; - processRow.addChildTraceRow(actualRow); + processRow.addChildTraceRow(expectedRow); + } + } + let actualData = allActualProcess.filter((ite) => ite.pid == it.pid); + if (actualData.length > 0) { + let depthArray: any = []; + for (let j = 0 ; j < actualData.length ; j++) { + let actualItem = actualData[j]; + if (isTxtTraceType) { + actualItem.jank_tag = 0; + } + if (actualItem.cmdline != 'render_service') { + actualItem.frame_type = 'app'; + } else { + actualItem.frame_type = actualItem.cmdline; + } + if (!actualItem.dur || actualItem.dur < 0) { + continue; + } + if (depthArray.length === 0) { + actualItem.depth = 0; + depthArray.push(actualItem); + } else { + if (isIntersect(depthArray[0], actualItem)) { + if (isIntersect(depthArray[depthArray.length - 1], actualItem)) { + actualItem.depth = depthArray.length; + depthArray.push(actualItem); + } else { + actualItem.depth = depthArray.length - 1; + depthArray[length - 1] = actualItem; + } + } else { + actualItem.depth = 0; + depthArray = [actualItem]; + } + } } + let max = Math.max(...actualData.map((it) => it.depth || 0)) + 1; + let maxHeight = max * 20; + actualRow = TraceRow.skeleton(); + let timeLineType = actualData[0].type; + actualRow.rowId = `${ timeLineType }-${ it.pid }`; + actualRow.rowType = TraceRow.ROW_TYPE_JANK; + actualRow.rowParentId = `${ it.pid }`; + actualRow.rowHidden = !processRow.expansion; + actualRow.style.width = '100%'; + actualRow.style.height = `${ maxHeight }px`; + actualRow.setAttribute('height', `${ maxHeight }`); + actualRow.name = 'Actual Timeline'; + actualRow.addTemplateTypes('FrameTimeline'); + actualRow.setAttribute('frame_type', actualData[0].frame_type); + actualRow.setAttribute('children', ''); + actualRow.dataList = actualData; + actualRow.supplier = (): Promise => new Promise((resolve) => resolve(actualData)); + actualRow.favoriteChangeHandler = this.trace.favoriteChangeHandler; + actualRow.selectChangeHandler = this.trace.selectChangeHandler; + actualRow.onThreadHandler = (useCache): void => { + let context = actualRow!.collect ? this.trace.canvasFavoritePanelCtx! : this.trace.canvasPanelCtx!; + actualRow!.canvasSave(context); + (renders['jank'] as JankRender).renderMainThread( + { + context: context, + useCache: useCache, + type: 'actual_frame_timeline_slice', + }, + actualRow! + ); + actualRow!.canvasRestore(context); + }; + processRow.addChildTraceRow(actualRow); } } let offsetYTimeOut: any = undefined; diff --git a/ide/src/trace/component/trace/base/CommonSql.ts b/ide/src/trace/component/trace/base/CommonSql.ts new file mode 100644 index 00000000..533e1637 --- /dev/null +++ b/ide/src/trace/component/trace/base/CommonSql.ts @@ -0,0 +1,135 @@ +/* + * Copyright (C) 2022 Huawei Device Co., Ltd. + * Licensed 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. + */ + +const cpuSql: Array = [ + 'SELECT B.pid AS processId,B.cpu,B.tid,B.itid AS id,B.dur,B.ts - TR.start_ts AS startTime,B.arg_setid AS ' + + 'argSetID FROM thread_state AS B LEFT JOIN trace_range AS TR WHERE B.itid IS NOT NULL;', + 'SELECT cpu,value,IFNULL(dur,tb.end_ts - c.ts) dur,ts-tb.start_ts AS startNS FROM measure c,trace_range tb ' + + 'INNER JOIN cpu_measure_filter t ON c.filter_id = t.id WHERE (name = \'cpufreq\' OR name=\'cpu_frequency\');', + 'SELECT (A.ts - B.start_ts) AS startTs,IFNULL(dur,B.end_ts - A.ts) dur,value FROM measure A,trace_range B;', + 'SELECT ts - T.start_ts AS startNs,dur,max(value) AS max,min(value) AS min FROM measure,trace_range T GROUP BY ts;', + 'SELECT TS.pid AS pid,TS.tid AS tid,TS.cpu,SUM((TS.ts - TR.start_ts + TS.dur) - (TS.ts - TR.start_ts)) ' + + 'wallDuration,count(TS.tid) AS occurrences FROM thread_state AS TS LEFT JOIN trace_range AS TR GROUP BY TS.cpu,' + + 'TS.pid,TS.tid ORDER BY wallDuration DESC;', + 'SELECT B.pid AS pid, SUM(B.dur) AS wallDuration,AVG(B.dur) AS avgDuration,count(B.tid) AS occurrences FROM ' + + 'thread_state AS B LEFT JOIN trace_range AS TR GROUP BY B.pid ORDER BY wallDuration DESC;', + 'SELECT cpu,SUM(A.dur) / CAST(B.end_ts - B.start_ts AS float) AS usage FROM thread_state A,trace_range B ' + + 'WHERE (A.ts - B.start_ts) > 0 AND A.dur > 0 GROUP BY cpu;', + 'SELECT B.pid,B.tid,B.state,SUM(B.dur) AS wallDuration,AVG(IFNULL(B.dur,0)) AS ' + + 'avgDuration,count(B.tid) AS occurrences FROM thread_state AS B LEFT JOIN trace_range AS TR ' + + 'GROUP BY B.pid, B.tid, B.state ORDER BY wallDuration DESC;', + 'SELECT value, filter_id AS filterId, ts, f.cpu FROM measure LEFT JOIN cpu_measure_filter AS f ON f.id=filter_id ' + + 'ORDER BY ts ASC;', +]; + +const threadSql: Array = [ + 'SELECT ta.cpu,dur, ts-TR.start_ts AS startTime FROM thread_state ta LEFT JOIN trace_range AS TR ' + + 'WHERE ta.cpu IS NOT NULL;' +]; + + +const memory: Array = [ + 'SELECT startNs, SUM( value ) AS value FROM ( SELECT m.ts - tr.start_ts AS startNs,SUM( m.value ) AS value FROM' + + ' sys_mem_measure m,trace_range tr LEFT JOIN sys_event_filter f ON f.id = m.filter_id WHERE m.ts < tr.end_ts ' + + 'GROUP BY m.ts UNION ALL SELECT a.ts - tr.start_ts AS startNs,SUM( a.size ) AS value FROM memory_ashmem a,' + + 'trace_range tr WHERE a.ts < tr.end_ts AND a.flag = 0 GROUP BY a.ts) GROUP BY startNs;', + 'SELECT (A.ts - B.start_ts) AS startNs,SUM(A.size) AS value,E.data AS expTaskComm, A.flag AS flag ' + + 'FROM memory_dma A,trace_range B LEFT JOIN data_dict AS E ON E.id=A.exp_task_comm_id WHERE A.flag = 0 ' + + 'AND A.ts < B.end_ts GROUP BY A.ts;', + 'SELECT (A.ts - B.start_ts) AS startNs, SUM(A.used_gpu_size) AS value FROM memory_process_gpu A,trace_range B ' + + 'WHERE A.ts < B.end_ts GROUP BY A.ts;', + 'SELECT (A.timestamp - B.start_ts) AS startNs, SUM(dirty) * 1024 AS value, \'dirty\' AS name ' + + 'FROM smaps A,trace_range B WHERE A.timestamp < B.end_ts GROUP BY A.timestamp;', + 'SELECT (A.timestamp - B.start_ts) AS startNs, SUM(swapped) * 1024 AS value, \'swapped\' AS name ' + + 'FROM smaps A,trace_range B WHERE A.timestamp < B.end_ts GROUP BY A.timestamp;', + 'SELECT (A.timestamp - B.start_ts) AS startNs, SUM(resident_size) * 1024 AS value, \'resident_size\' AS name ' + + 'FROM smaps A,trace_range B WHERE A.timestamp < B.end_ts GROUP BY A.timestamp;', + 'SELECT (A.timestamp - B.start_ts) AS startNs, SUM(pss) * 1024 AS value, \'pss\' AS name ' + + 'FROM smaps A,trace_range B WHERE A.timestamp < B.end_ts GROUP BY A.timestamp;', + 'SELECT (A.timestamp - B.start_ts) AS startNs, SUM(private_clean + private_dirty) * 1024 AS value,\'private_clean ' + + '+ private_dirty\' AS name FROM smaps A,trace_range B WHERE A.timestamp < B.end_ts GROUP BY A.timestamp;', + 'SELECT (A.ts - B.start_ts) AS startNs,SUM(A.size) AS value FROM memory_ashmem A,trace_range B ' + + 'WHERE A.ts < B.end_ts AND flag = 0 GROUP BY A.ts;', + 'SELECT (A.ts - B.start_ts) AS startNs,SUM(A.size) AS value,A.flag AS flag,A.ipid AS ipid,E.data AS expTaskComm ' + + 'FROM memory_dma A,trace_range B LEFT JOIN data_dict AS E ON E.id=A.exp_task_comm_id ' + + 'WHERE A.flag = 0 AND A.ts < B.end_ts GROUP BY A.ts;', + 'SELECT startNs, SUM( value ) AS value FROM (SELECT m.ts - tr.start_ts AS startNs,SUM(m.value) AS value ' + + 'FROM process_measure m, trace_range tr LEFT JOIN process_measure_filter f ON f.id = m.filter_id ' + + 'WHERE m.ts < tr.end_ts GROUP BY m.ts UNION ALL SELECT a.ts - tr.start_ts AS startNs,SUM( a.pss ) AS value ' + + 'FROM memory_ashmem a,trace_range tr WHERE a.ts < tr.end_ts AND a.flag = 0 GROUP BY a.ts) GROUP BY startNs;', + 'SELECT (ts - start_ts) startNs,SUM(value) value FROM process_measure, trace_range ' + + 'WHERE filter_id = (SELECT id FROM process_measure_filter WHERE name = \'mem.gl_pss\')AND ts ' + + 'BETWEEN start_ts AND end_ts GROUP BY ts;', + 'SELECT (A.ts - B.start_ts) AS startNs,SUM(A.used_gpu_size) AS value,A.ipid AS ipid ' + + 'FROM memory_process_gpu A,trace_range B WHERE A.ts < B.end_ts GROUP BY A.ts;', + 'SELECT DISTINCT module_name_id id,data FROM memory_window_gpu A, trace_range TR LEFT JOIN data_dict B ' + + 'ON A.module_name_id = B.id WHERE window_name_id = 0 AND A.ts < TR.end_ts;', + 'SELECT DISTINCT A.window_name_id AS id,B.data, NULL AS pid FROM memory_window_gpu A, trace_range tr ' + + 'LEFT JOIN data_dict B ON A.window_name_id = B.id WHERE window_name_id != 0 AND A.ts < tr.end_ts UNION ALL ' + + 'SELECT DISTINCT A.module_name_id id, B.data, A.window_name_id pid FROM memory_window_gpu A, trace_range TR ' + + 'LEFT JOIN data_dict B ON A.module_name_id = B.id WHERE window_name_id != 0 AND A.ts < TR.end_ts;' +]; + +const bioSql: Array = [ + 'SELECT name,B.ipid,pid FROM (SELECT DISTINCT ipid FROM bio_latency_sample A,trace_range B WHERE A.start_ts ' + + 'BETWEEN B.start_ts AND B.end_ts) A LEFT JOIN process B ON A.ipid = B.ipid;', + 'SELECT (A.start_ts -B.start_ts) AS startNS,(A.start_ts - B.start_ts + A.latency_dur) AS endNS,latency_dur AS dur ' + + 'FROM bio_latency_sample A,trace_range B WHERE startNS > 0 ORDER BY A.start_ts;' +]; + +const frameTimeSql: Array = [ + 'SELECT sf.id,\'frameTime\' AS frame_type,fs.ipid,fs.vsync AS name,fs.dur AS app_dur,(sf.ts + sf.dur - fs.ts) AS ' + + 'dur,(fs.ts - TR.start_ts) AS ts,fs.type,fs.flag,pro.pid,pro.name AS cmdline,(sf.ts - TR.start_ts) AS rs_ts,' + + 'sf.vsync AS rs_vsync,sf.dur AS rs_dur,sf.ipid AS rs_ipid,proc.pid AS rs_pid,proc.name AS rs_name ' + + 'FROM frame_slice AS fs LEFT JOIN process AS pro ON pro.id = fs.ipid LEFT JOIN frame_slice AS sf ON fs.dst = sf.id ' + + 'LEFT JOIN process AS proc ON proc.id = sf.ipid LEFT JOIN trace_range TR WHERE fs.dst IS NOT NULL AND fs.type = 1 ' + + 'UNION SELECT -1 AS id,\'frameTime\' AS frame_type,fs.ipid,fs.vsync AS name,fs.dur AS app_dur,fs.dur,' + + '(fs.ts - TR.start_ts) AS ts,fs.type,fs.flag, pro.pid,pro.name AS cmdline,NULL AS rs_ts,NULL AS rs_vsync,' + + 'NULL AS rs_dur,NULL AS rs_ipid,NULL AS rs_pid,NULL AS rs_name FROM frame_slice AS fs LEFT JOIN process AS pro' + + ' ON pro.id = fs.ipid LEFT JOIN trace_range TR WHERE fs.dst IS NULL AND pro.name NOT LIKE \'%render_service%\' ' + + 'AND fs.type = 1 ORDER BY ts;', + 'SELECT sf.id,\'frameTime\' AS frame_type,fs.ipid,fs.vsync AS name,fs.dur AS app_dur,(sf.ts + sf.dur - fs.ts) AS' + + ' dur,(fs.ts - TR.start_ts) AS ts,fs.type,(CASE WHEN (sf.flag == 1 OR fs.flag == 1) THEN 1 WHEN ' + + '(sf.flag == 3 OR fs.flag == 3 ) THEN 3 ELSE 0 end) AS jank_tag,pro.pid,pro.name AS cmdline,(sf.ts - TR.start_ts) ' + + 'AS rs_ts,sf.vsync AS rs_vsync,sf.dur AS rs_dur,sf.ipid AS rs_ipid,proc.pid AS rs_pid, proc.name AS rs_name ' + + 'FROM frame_slice AS fs LEFT JOIN process AS pro ON pro.id = fs.ipid LEFT JOIN frame_slice AS sf ON fs.dst = sf.id ' + + 'LEFT JOIN process AS proc ON proc.id = sf.ipid LEFT JOIN trace_range TR WHERE fs.dst IS NOT NULL AND fs.type = 0 ' + + 'AND fs.flag <> 2 UNION SELECT -1 AS id,\'frameTime\' AS frame_type,fs.ipid,fs.vsync AS name,fs.dur AS app_dur,' + + 'fs.dur,(fs.ts - TR.start_ts) AS ts,fs.type,fs.flag AS jank_tag,pro.pid,pro.name AS cmdline,NULL AS rs_ts,' + + 'NULL AS rs_vsync,NULL AS rs_dur,NULL AS rs_ipid,NULL AS rs_pid,NULL AS rs_name FROM frame_slice AS fs LEFT JOIN ' + + 'process AS pro ON pro.id = fs.ipid LEFT JOIN trace_range TR WHERE fs.dst IS NULL AND pro.name NOT LIKE ' + + '\'%render_service%\' AND fs.type = 0 AND fs.flag <> 2 ORDER BY ts;', +]; + +const appStartUpSql: Array = [ + 'SELECT P.pid,A.tid,A.call_id AS itid,(CASE WHEN A.start_time < B.start_ts THEN 0 ELSE (A.start_time - B.start_ts) ' + + 'end) AS startTs,(CASE WHEN A.start_time < B.start_ts THEN (A.end_time - B.start_ts) WHEN A.end_time = -1 THEN' + + ' 0 ELSE (A.end_time - A.start_time) end) AS dur,A.start_name AS startName FROM app_startup A,trace_range B ' + + 'LEFT JOIN process P ON A.ipid = P.ipid ORDER BY start_name;' +]; + +const animationSql: Array = [ + 'SELECT a.id AS animationId,(CASE WHEN a.input_time NOT NULL THEN (a.input_time - R.start_ts) ELSE ' + + '(a.start_point- R.start_ts) END) AS ts,(a.start_point - R.start_ts) AS dynamicStartTs,(a.end_point - R.start_ts) ' + + 'AS dynamicEndTs FROM animation AS a,trace_range AS R ORDER BY ts;', + 'SELECT d.id,d.x,d.y,d.width,d.height,d.alpha,d.name AS appName,(d.end_time - R.start_ts) AS ts ' + + 'FROM dynamic_frame AS d,trace_range AS R ORDER BY d.end_time;', + 'SELECT d.id,d.width AS currentFrameWidth,d.height AS currentFrameHeight,d.name AS nameId,(d.end_time - R.start_ts)' + + ' AS currentTs,d.x,d.y FROM dynamic_frame AS d,trace_range AS R ORDER BY d.end_time;', +]; + +export function getAllSql(): Array { + return [...cpuSql, ...threadSql, ...memory, ...bioSql, ...frameTimeSql, ...appStartUpSql, ...animationSql]; +} diff --git a/ide/src/trace/component/trace/base/CustomThemeColor.ts b/ide/src/trace/component/trace/base/CustomThemeColor.ts index 4c882f97..f9242530 100644 --- a/ide/src/trace/component/trace/base/CustomThemeColor.ts +++ b/ide/src/trace/component/trace/base/CustomThemeColor.ts @@ -130,6 +130,7 @@ export class CustomThemeColor extends BaseElement { close!.addEventListener('click', (ev) => { if (this.application!.hasAttribute('custom-color')) { this.application!.removeAttribute('custom-color'); + this.setAttribute('hidden', ''); } this.cancelOperate(); }); @@ -190,7 +191,7 @@ export class CustomThemeColor extends BaseElement { initHtml(): string { return ` -
-
Annotation at
- - Change color: - -
+ + + + + + + + + + + + `; } } + +export class SlicesStruct { + startTime: string | undefined; + endTime: string | undefined; + colorEl: HTMLInputElement | undefined; + operate: HTMLButtonElement | undefined; + isSelected: boolean = false; + constructor( + operate: HTMLButtonElement, + startTime?: string, + endTime?: string, + colorEl?: HTMLInputElement | undefined + ) { + this.startTime = startTime; + this.endTime = endTime; + this.colorEl = colorEl; + this.operate = operate; + } +} diff --git a/ide/src/trace/component/trace/timer-shaft/SportRuler.ts b/ide/src/trace/component/trace/timer-shaft/SportRuler.ts index c06e2742..a0952b7f 100644 --- a/ide/src/trace/component/trace/timer-shaft/SportRuler.ts +++ b/ide/src/trace/component/trace/timer-shaft/SportRuler.ts @@ -21,6 +21,7 @@ import { ns2s, ns2x, randomRgbColor, TimerShaftElement } from '../TimerShaftElem import { TraceRow } from '../base/TraceRow.js'; import { SpApplication } from '../../../SpApplication.js'; import { Utils } from '../base/Utils.js'; +import { SpSystemTrace } from '../../SpSystemTrace.js'; export enum StType { TEMP, //临时的 @@ -29,8 +30,8 @@ export enum StType { export class SlicesTime { private _id: string; - startTime: number | null | undefined; - endTime: number | null | undefined; + startTime: number = 0; + endTime: number = 0; startNS: number; endNS: number; color: string = ''; @@ -41,8 +42,8 @@ export class SlicesTime { text: string = ''; type: number = StType.PERM; // 默认类型为永久的 constructor( - startTime: number | null | undefined, - endTime: number | null | undefined, + startTime: number = 0, + endTime: number = 0, startNS: number, endNS: number, startX: number, @@ -261,12 +262,12 @@ export class SportRuler extends Graph { let sectionTime = (endNS - startNS) / section; let countArr = new Uint32Array(section); let count: number = 0; //某段时间的调用栈数量 - const useIndex : number[] = []; - const isEbpf = this.durArray && this.durArray.length > 0; + const useIndex: number[] = []; + const isEbpf = this.durArray && this.durArray.length > 0; for (let i = 1; i <= section; i++) { count = 0; for (let j = 0; j < this.timeArray.length; j++) { - if (isEbpf && useIndex.includes(j)){ + if (isEbpf && useIndex.includes(j)) { continue; } const itemTime = this.timeArray[j]; @@ -277,7 +278,7 @@ export class SportRuler extends Graph { inRange = itemTime + dur >= startNS + sectionTime * (i - 1) && itemTime < startNS + sectionTime * i && - itemTime + dur >= this.range.startNS && + itemTime + dur >= this.range.startNS && itemTime < this.range.endNS; } else { inRange = @@ -411,46 +412,51 @@ export class SportRuler extends Graph { endTime: number | null = null, shiftKey: boolean | null = null ): SlicesTime | null { - let newSlicestime: SlicesTime | null = null; - if (startTime != null && typeof startTime != undefined && endTime != null && typeof endTime != undefined) { - this.slicesTime = { - startTime: startTime <= endTime ? startTime : endTime, - endTime: startTime <= endTime ? endTime : startTime, - color: null, - }; - let startX = Math.round( - (this.rulerW * (startTime - this.range.startNS)) / (this.range.endNS - this.range.startNS) - ); - let endX = Math.round((this.rulerW * (endTime - this.range.startNS)) / (this.range.endNS - this.range.startNS)); - let color = randomRgbColor(); - this.slicesTime.color = color; - newSlicestime = new SlicesTime( - this.slicesTime.startTime, - this.slicesTime.endTime, - this.range.startNS, - this.range.endNS, - startX, - endX, - color, - true - ); - if (!shiftKey) { - this.clearTempSlicesTime(); // 清除临时对象 + let findSlicesTime = this.slicesTimeList.find((it) => it.startTime === startTime && it.endTime === endTime); + if (findSlicesTime && this.slicesTimeList.length > 0) { + return null; + } else { + let newSlicestime: SlicesTime | null = null; + if (startTime != null && typeof startTime != undefined && endTime != null && typeof endTime != undefined) { + this.slicesTime = { + startTime: startTime <= endTime ? startTime : endTime, + endTime: startTime <= endTime ? endTime : startTime, + color: null, + }; + let startX = Math.round( + (this.rulerW * (startTime - this.range.startNS)) / (this.range.endNS - this.range.startNS) + ); + let endX = Math.round((this.rulerW * (endTime - this.range.startNS)) / (this.range.endNS - this.range.startNS)); + let color = randomRgbColor(); + this.slicesTime.color = color; + newSlicestime = new SlicesTime( + this.slicesTime.startTime || 0, + this.slicesTime.endTime || 0, + this.range.startNS, + this.range.endNS, + startX, + endX, + color, + true + ); + if (!shiftKey) { + this.clearTempSlicesTime(); // 清除临时对象 - // 如果没有按下shift键，则把当前slicestime对象的类型设为临时类型。 - newSlicestime.type = StType.TEMP; + // 如果没有按下shift键，则把当前slicestime对象的类型设为临时类型。 + newSlicestime.type = StType.TEMP; + } + this.slicesTimeList.forEach((slicestime) => (slicestime.selected = false)); + newSlicestime.selected = true; + this.slicesTimeList.push(newSlicestime); + } else { + this.clearTempSlicesTime(); // 清除临时对象 + this.slicesTime = { startTime: null, endTime: null, color: null }; } - this.slicesTimeList.forEach((slicestime) => (slicestime.selected = false)); - newSlicestime.selected = true; - this.slicesTimeList.push(newSlicestime); - } else { - this.clearTempSlicesTime(); // 清除临时对象 - this.slicesTime = { startTime: null, endTime: null, color: null }; + this.range.slicesTime = this.slicesTime; + this.draw(); + this.timerShaftEL?.render(); + return newSlicestime; } - this.range.slicesTime = this.slicesTime; - this.draw(); - this.timerShaftEL?.render(); - return newSlicestime; } // 清除临时对象 -- Gitee From a2bbc17d545e9f8d9f8d481f079f3aaf59bc94f5 Mon Sep 17 00:00:00 2001 From: jichuan Date: Mon, 25 Sep 2023 09:22:15 +0800 Subject: [PATCH 03/19] =?UTF-8?q?Feat:=E6=94=B6=E8=97=8F=E6=BB=9A=E5=8A=A8?= =?UTF-8?q?|=E5=85=A8=E9=83=A8=E6=B3=B3=E9=81=93=E5=9B=BE=E6=8A=98?= =?UTF-8?q?=E5=8F=A0=E5=B1=95=E5=BC=80|=E5=8D=95=E6=B3=B3=E9=81=93?= =?UTF-8?q?=E5=9B=BE=E6=8A=98=E5=8F=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: jichuan --- ide/src/index.html | 1 + ide/src/trace/SpApplication.ts | 15 +- ide/src/trace/component/SpSystemTrace.ts | 351 ++++++++---------- .../component/chart/SpAbilityMonitorChart.ts | 98 ++++- ide/src/trace/component/chart/SpArkTsChart.ts | 21 +- ide/src/trace/component/chart/SpClockChart.ts | 7 +- ide/src/trace/component/chart/SpCpuChart.ts | 7 +- .../component/chart/SpFileSystemChart.ts | 42 ++- ide/src/trace/component/chart/SpFpsChart.ts | 7 +- .../trace/component/chart/SpFrameTimeChart.ts | 28 +- ide/src/trace/component/chart/SpFreqChart.ts | 21 +- ide/src/trace/component/chart/SpHiPerf.ts | 28 +- .../component/chart/SpHiSysEventChart.ts | 28 +- ide/src/trace/component/chart/SpIrqChart.ts | 7 +- ide/src/trace/component/chart/SpLogChart.ts | 7 +- .../component/chart/SpNativeMemoryChart.ts | 9 +- .../trace/component/chart/SpProcessChart.ts | 190 ++++++---- ide/src/trace/component/chart/SpSdkChart.ts | 14 +- .../component/chart/SpVirtualMemChart.ts | 7 +- .../trace/component/chart/SpVmTrackerChart.ts | 7 +- .../Top20ProcessThreadCount.ts | 1 - ide/src/trace/component/trace/SpChartList.ts | 309 +++++++++++++++ .../component/trace/TimerShaftElement.ts | 3 +- .../trace/component/trace/base/Extension.ts | 8 + .../trace/component/trace/base/RangeSelect.ts | 108 ++---- .../trace/component/trace/base/TraceRow.ts | 249 +++++-------- .../component/trace/sheet/TabPaneCurrent.ts | 37 +- .../sheet/file-system/TabPaneCallTree.ts | 8 +- .../file-system/TabPaneFileSystemCalltree.ts | 8 +- .../trace/sheet/frame/TabFrameSpacing.ts | 27 +- .../trace/sheet/hiperf/TabPerfProfile.ts | 8 +- .../sheet/native-memory/TabPaneNMCallTree.ts | 9 +- .../trace/timer-shaft/CollapseButton.ts | 61 +++ .../trace/component/trace/timer-shaft/Rect.ts | 10 +- .../ui-worker/ProcedureWorkerCommon.ts | 86 ++++- .../ui-worker/ProcedureWorkerFrameSpacing.ts | 4 + 36 files changed, 1201 insertions(+), 630 deletions(-) create mode 100644 ide/src/trace/component/trace/SpChartList.ts create mode 100644 ide/src/trace/component/trace/timer-shaft/CollapseButton.ts diff --git a/ide/src/index.html b/ide/src/index.html index e73acb40..3bc659d8 100644 --- a/ide/src/index.html +++ b/ide/src/index.html @@ -12,6 +12,7 @@ height: 100%; margin: 0; padding: 0; + overflow: hidden; }