diff --git a/ide/src/base-ui/chart/column/LitChartColumn.ts b/ide/src/base-ui/chart/column/LitChartColumn.ts index 3f8dc9a41cd2484a0f835dfb8faaf235c630f8fe..818412eba75ef6162c7f701b610d2d7bedd429e9 100644 --- a/ide/src/base-ui/chart/column/LitChartColumn.ts +++ b/ide/src/base-ui/chart/column/LitChartColumn.ts @@ -112,7 +112,11 @@ export class LitChartColumn extends BaseElement { private tipTypeShow(x: number, y: number, pillars: Pillar[], innerHtml: string) { if (x >= this.clientWidth - this.litChartColumnTipEL!.clientWidth) { - this.showTip(x - this.litChartColumnTipEL!.clientWidth - 10, y - 20, this.litChartColumnCfg!.tip ? this.litChartColumnCfg!.tip(pillars) : innerHtml); + this.showTip( + x - this.litChartColumnTipEL!.clientWidth - 10, + y - 20, + this.litChartColumnCfg!.tip ? this.litChartColumnCfg!.tip(pillars) : innerHtml + ); } else { this.showTip(x + 10, y - 20, this.litChartColumnCfg!.tip ? this.litChartColumnCfg!.tip(pillars) : innerHtml); } @@ -136,14 +140,22 @@ export class LitChartColumn extends BaseElement { .map((it) => it.obj[this.litChartColumnCfg?.yField!]) .reduce((pre, current) => pre + current, 0)}`; let innerHtml = `
${title}${msg}${sum}
`; - this.showTip(this.clientWidth / 2, this.clientHeight / 2, this.litChartColumnCfg!.tip ? this.litChartColumnCfg!.tip(pillars) : innerHtml); + this.showTip( + this.clientWidth / 2, + this.clientHeight / 2, + this.litChartColumnCfg!.tip ? this.litChartColumnCfg!.tip(pillars) : innerHtml + ); } } else { if (pillars.length > 0) { let hoverData = pillars[0]; let title = ``; let innerHtml = `
${title}
`; - this.showTip(this.clientWidth / 2, this.clientHeight / 2, this.litChartColumnCfg!.tip ? this.litChartColumnCfg!.tip(pillars) : innerHtml); + this.showTip( + this.clientWidth / 2, + this.clientHeight / 2, + this.litChartColumnCfg!.tip ? this.litChartColumnCfg!.tip(pillars) : innerHtml + ); } } @@ -231,7 +243,9 @@ export class LitChartColumn extends BaseElement { }); } else { let reduceGroup = this.litChartColumnCfg.data.reduce((pre, current, index, arr) => { - (pre[current[this.litChartColumnCfg!.xField]] = pre[current[this.litChartColumnCfg!.xField]] || []).push(current); + (pre[current[this.litChartColumnCfg!.xField]] = pre[current[this.litChartColumnCfg!.xField]] || []).push( + current + ); return pre; }, {}); let sums = Reflect.ownKeys(reduceGroup).map((k) => @@ -365,9 +379,9 @@ export class LitChartColumn extends BaseElement { } c.fillStyle = '#fff'; if (this.litChartColumnCfg?.label) { - if (yMetricsH < it.frame!.h) { + if (yMetricsH < it.frame!.h) { c.fillText( - // @ts-ignore + // @ts-ignore this.litChartColumnCfg!.label!.content ? this.litChartColumnCfg!.label!.content(it.obj) : it.yLabel!, it.centerX! - yMetrics.width / 2, it.centerY! + (it.frame!.h - it.height!) / 2 diff --git a/ide/src/base-ui/chart/pie/LitChartPie.ts b/ide/src/base-ui/chart/pie/LitChartPie.ts index 0a20cc68e0138b7802b94f53ef257b6b061d704d..ed191a2492e55e667c1073d7436c5292478c665c 100644 --- a/ide/src/base-ui/chart/pie/LitChartPie.ts +++ b/ide/src/base-ui/chart/pie/LitChartPie.ts @@ -107,13 +107,18 @@ export class LitChartPie extends BaseElement { let startDegree = 0; let full = Math.PI / 180; //每度 let fullDegree = 0; //每度 - let sum = this.litChartPieConfig.data.reduce((previousValue, currentValue) => currentValue[pieCfg.angleField] + previousValue, 0); + let sum = this.litChartPieConfig.data.reduce( + (previousValue, currentValue) => currentValue[pieCfg.angleField] + previousValue, + 0 + ); this.labelsEL!.textContent = ''; let labelArray: string[] = []; this.litChartPieConfig.data.forEach((pieItem, index) => { let item: Sector = { id: `id-${Utils.uuid()}`, - color: this.litChartPieConfig!.label.color ? this.litChartPieConfig!.label.color(pieItem) : pieChartColors[index % pieChartColors.length], + color: this.litChartPieConfig!.label.color + ? this.litChartPieConfig!.label.color(pieItem) + : pieChartColors[index % pieChartColors.length], obj: pieItem, key: pieItem[pieCfg.colorField], value: pieItem[pieCfg.angleField], diff --git a/ide/src/base-ui/drawer/LitDrawer.ts b/ide/src/base-ui/drawer/LitDrawer.ts index 6bd2efce48959a7bedeff37a339d90c686225a8d..ec20ccb1527fd00cbc6d7c3b3169e29412ac4a31 100644 --- a/ide/src/base-ui/drawer/LitDrawer.ts +++ b/ide/src/base-ui/drawer/LitDrawer.ts @@ -321,7 +321,7 @@ export class LitDrawer extends BaseElement { //当 custom element被移动到新的文档时，被调用。 adoptedCallback() { - console.log('Custom square element moved to new page.'); + } //当 custom element增加、删除、修改自身属性时，被调用。 diff --git a/ide/src/base-ui/modal/LitModal.ts b/ide/src/base-ui/modal/LitModal.ts index 8c2e65720581c2217ed3bf2790906a76d38325ba..8eb1b057a904be51fe682601659ba7b7e227b218 100644 --- a/ide/src/base-ui/modal/LitModal.ts +++ b/ide/src/base-ui/modal/LitModal.ts @@ -534,7 +534,7 @@ export class LitModal extends BaseElement { //当 custom element被移动到新的文档时，被调用。 adoptedCallback() { - console.log('Custom square element moved to new page.'); + } //当 custom element增加、删除、修改自身属性时，被调用。 diff --git a/ide/src/base-ui/select/LitSelect.ts b/ide/src/base-ui/select/LitSelect.ts index 4833cffea0c1b5dd136884576d0ce1a6e3f79af3..985f1d01159d8b5177b92d1f4d541f0c081c2546 100644 --- a/ide/src/base-ui/select/LitSelect.ts +++ b/ide/src/base-ui/select/LitSelect.ts @@ -142,9 +142,9 @@ export class LitSelect extends BaseElement { set dataSource(selectDataSource: any) { selectDataSource.forEach((dateSourceBean: any) => { let selectOption = document.createElement('lit-select-option'); - if (dateSourceBean.file_name) { - selectOption.textContent = dateSourceBean.file_name; - selectOption.setAttribute('value', dateSourceBean.file_name); + if (dateSourceBean.name) { + selectOption.textContent = dateSourceBean.name; + selectOption.setAttribute('value', dateSourceBean.name); } this.append(selectOption); }); diff --git a/ide/src/base-ui/select/LitSelectHtml.ts b/ide/src/base-ui/select/LitSelectHtml.ts index 45e53cfd5489821aa09a76e5da57971e5c9eeb2c..090277a0d4b3d0dcc85f95c9985eabd0f69cd798 100644 --- a/ide/src/base-ui/select/LitSelectHtml.ts +++ b/ide/src/base-ui/select/LitSelectHtml.ts @@ -13,8 +13,8 @@ * limitations under the License. */ -export function selectHtmlStr(): string{ - return ` +export function selectHtmlStr(): string { + return ` :host{ display: inline-flex; position: relative; @@ -136,5 +136,5 @@ export function selectHtmlStr(): string{ :host([border='false'][disabled]) *{ color: #b7b7b7; cursor: not-allowed; - }` -} \ No newline at end of file + }`; +} diff --git a/ide/src/base-ui/select/LitSelectOption.ts b/ide/src/base-ui/select/LitSelectOption.ts index b828752f69de40928e4a493be610f399cad418c5..59daef7e233b463a4c6b07dafbe5dcf3bfdd6516 100644 --- a/ide/src/base-ui/select/LitSelectOption.ts +++ b/ide/src/base-ui/select/LitSelectOption.ts @@ -31,7 +31,7 @@ export class LitSelectOption extends BaseElement { color: var(--dark-color2,#333); tab-index: -1; align-items: center; - width: max-content; + width: 100%; max-lines: 1; white-space: nowrap; font-size: 0.8rem; diff --git a/ide/src/base-ui/table/lit-table.ts b/ide/src/base-ui/table/lit-table.ts index 9a1555f6f1d73e905ea8e6a49bec5f2643982bc0..27f974ea111f6ea5190cab76af33145d0b2e92f3 100644 --- a/ide/src/base-ui/table/lit-table.ts +++ b/ide/src/base-ui/table/lit-table.ts @@ -264,7 +264,7 @@ export class LitTable extends HTMLElement { return ['scroll-y', 'selectable', 'no-head', 'grid-line', 'defaultOrderColumn', 'hideDownload', 'loading']; } - set loading(value : boolean){ + set loading(value: boolean) { this._loading = value; this.exportProgress!.loading = value; } @@ -326,8 +326,10 @@ export class LitTable extends HTMLElement { if (this.rememberScrollTop) { this.currentScrollTop = this.tableElement!.scrollTop; this.tableElement!.scrollTop = 0; + this.tableElement!.scrollLeft = 0; } else { this.tableElement!.scrollTop = 0; + this.tableElement!.scrollLeft = 0; } if (this.hasAttribute('tree')) { this.recycleDs = this.meauseTreeRowElement(value); @@ -362,7 +364,7 @@ export class LitTable extends HTMLElement { } exportData() { - if (this.exportLoading) { + if (this.exportLoading || this.ds.length === 0) { return; } this.exportLoading = true; @@ -1143,6 +1145,9 @@ export class LitTable extends HTMLElement { td.insertBefore(btn, td.firstChild); } td.style.paddingLeft = rowData.depth * 15 + 'px'; + if (!rowData.data.children || rowData.data.children.length === 0) { + td.style.paddingLeft = (15 * rowData.depth + 16) + 'px'; + } if (rowData.data.rowName === 'js-memory') { let nodeText = document.createElement('text'); nodeText.classList.add('nodeName'); @@ -1163,7 +1168,12 @@ export class LitTable extends HTMLElement { td.insertBefore(edgeNameText, nodeText); let span = document.createElement('span'); span.classList.add('span'); - span.textContent = '\xa0' + '::' + '\xa0'; + if (rowData.data.type === ConstructorType.RetainersType) { + span.textContent = '\xa0' + 'in' + '\xa0'; + nodeIdText.textContent = ` @${rowData.data.id}`; + } else { + span.textContent = '\xa0' + '::' + '\xa0'; + } edgeNameText.append(span); } if ( @@ -1224,7 +1234,7 @@ export class LitTable extends HTMLElement { newTableElement.append(td); } }); - let lastChild = this.treeElement?.lastChild as HTMLElement + let lastChild = this.treeElement?.lastChild as HTMLElement; if (lastChild) { lastChild.style.transform = `translateY(${treeTop}px)`; } @@ -1467,12 +1477,16 @@ export class LitTable extends HTMLElement { let btn = this.createExpandBtn(rowObject); firstElement.insertBefore(btn, firstElement.firstChild); } + firstElement.style.paddingLeft = 15 * rowObject.depth + 'px'; + if (!rowObject.children || rowObject.children.length === 0) { + firstElement.style.paddingLeft = 15 * rowObject.depth + 16 + 'px'; + } if (rowObject.data.hasNext) { let btn = this.createBtn(rowObject); firstElement.title = rowObject.data.objectName; firstElement.insertBefore(btn, firstElement.firstChild); + firstElement.style.paddingLeft = 15 * rowObject.depth + 'px'; } - firstElement.style.paddingLeft = 15 * rowObject.depth + 'px'; if (rowObject.data.rowName === 'js-memory') { let nodeText = document.createElement('text'); nodeText.classList.add('nodeName'); @@ -1493,7 +1507,12 @@ export class LitTable extends HTMLElement { firstElement.insertBefore(edgeNameText, nodeText); let span = document.createElement('span'); span.classList.add('span'); - span.textContent = '\xa0' + '::' + '\xa0'; + if (rowObject.data.type === ConstructorType.RetainersType) { + span.textContent = '\xa0' + 'in' + '\xa0'; + nodeIdText.textContent = ` @${rowObject.data.id}`; + } else { + span.textContent = '\xa0' + '::' + '\xa0'; + } edgeNameText.append(span); } if ( diff --git a/ide/src/command/Cmd.ts b/ide/src/command/Cmd.ts index a66eb61529cf8bb441e66a6de682a6b94d883dd4..b15711fedec3e3311d12a5e8ef9d8e13e545a916 100644 --- a/ide/src/command/Cmd.ts +++ b/ide/src/command/Cmd.ts @@ -14,7 +14,6 @@ */ export class Cmd { - static CmdSendPostUtils(uri: string, callback: Function, requestData: any) { // @ts-ignore if (window.useWb) { diff --git a/ide/src/doc/quickstart_Application_operation_skills.html b/ide/src/doc/quickstart_Application_operation_skills.html index c3b3a86fe6378a3e6d211cfc6f62d7c2fc37fdf0..b57f6b1fb99e2e88e4bbf34419d08298676e74cc 100644 --- a/ide/src/doc/quickstart_Application_operation_skills.html +++ b/ide/src/doc/quickstart_Application_operation_skills.html @@ -1,819 +1,854 @@ - - + + quickstart_Application_operation_skills - + - - -
-

应用操作技巧

- -

应用操作技巧主要展示各个小模块的使用技巧。

-

可导入符号表

- -

- 符号表导入适用于所有支持调用栈的Tab页，选择一个文件夹，获取文件下及其子文件夹的所有so文件，更新数据库中符号数据。文件夹内so的格式需要与在设备上的路径一致，例如下图中，选择的文件夹为import，选择导入的libnative_hook.z.so，在设备上的路径是/system/lib64/，那么在本地选择的文件夹内也需要保证路径是import/system/lib64/libnative_hook.z.so。
- GitHub Logo
- 以NativeMemory举例，导入NativeMemory文件，点击Call info的Tab页，在搜索框中输入libnative_hook.z.so，会发现该so下的调用栈没有符号化完全。
- GitHub Logo
- 将本地编译的so通过导入按钮导入，本地导入路径是import/system/lib64/libnative_hook.z.so，红框处是导入按钮
- GitHub Logo
- 导入so以后，在搜索框中输入libnative_hook.z.so，会发现符号化数据已经更新
- GitHub Logo

-

网页连接文件打开接口

- -

网页连接文件打开接口可以在网址后增加文件地址，打开后直接打开trace。
- 接口的url路径如下：
- GitHub Logo

- +
- - - - - \ No newline at end of file + document.getElementById('body').setAttribute('style', 'background-color:#272C34;'); + let header = document.getElementsByClassName('fontColor'); + for (let i = 0; i < header.length; i++) { + header[i].style.color = '#fff'; + } + let lightBackGround = document.getElementsByClassName('light'); + for (let i = 0; i < lightBackGround.length; i++) { + lightBackGround[i].style.backgroundColor = '#32373F'; + } + } + }; + + + diff --git a/ide/src/doc/quickstart_Import_so.html b/ide/src/doc/quickstart_Import_so.html index 1e27b61e8fdf708b37f15d5cde19c9502bbbfcc1..fa16d87969d1b2a21ccb624ddc9b6076d53451b4 100644 --- a/ide/src/doc/quickstart_Import_so.html +++ b/ide/src/doc/quickstart_Import_so.html @@ -1,1221 +1,1454 @@ - - + + quickstart_Import_so - + - - -
-

调用栈可视化和不同库函数调用占比说明

+ + +
+

调用栈可视化和不同库函数调用占比说明

-

调用栈可视化可以将开发者编译的so符号化结果展示出来，不同库函数的占比通过饼图的方式展示出来。

-

Native Memory文件的不同库函数占比

+

+ 调用栈可视化可以将开发者编译的so符号化结果展示出来，不同库函数的占比通过饼图的方式展示出来。 +

+

Native Memory文件的不同库函数占比

-

Native - Memory分为三级统计，分别按照内存分配的类型(Alloc/Mmap)，lib库，函数进行统计分析。其中lib跟函数为每一条调用栈，从栈顶往下查找，非musl库与c++库的第一条函数及其lib为每次分配归属的函数及lib库。
- 点击Analysis的Tab页，先以内存分配的类型去统计。
- GitHub Logo

- +

Hiperf文件的不同库函数占比

-

Hiperf分为四级统计，分别按照进程，线程，lib库，函数进行统计。其中lib跟函数为每一条调用栈的栈顶函数及其lib。
- 点击Analysis的Tab页，先以进程去统计。
- GitHub Logo

- +

FileSystem文件的不同库函数占比

-

- FileSystem分为五级统计，分别按照进程，系统调用类型，线程，lib库，函数进行统计。其中lib跟函数为每一条调用栈，从栈顶往下查找，非musl库与c++库的第一条函数及其lib为每次分配归属的函数及lib库。
- 点击Analysis的Tab页，先以进程去统计。
- GitHub Logo

- +

Bio文件的不同库函数占比

-

- Bio分为五级统计，分别按照进程，系统调用类型，线程，lib库，函数进行统计。其中lib跟函数为每一条调用栈，从栈顶往下查找，非submit_bio第一条函数及其lib为每次分配归属的函数及lib库。
- 点击Analysis的Tab页，先以进程去统计。
- GitHub Logo

- +

Page Fault文件的不同库函数占比

-

Page - Fault分为五级统计，分别按照进程，系统调用类型，线程，lib库，函数进行统计。其中lib跟函数为每一条调用栈，从栈顶往下查找，非musl库与c++库的第一条函数及其lib为每次分配归属的函数及lib库。
- 点击Analysis的Tab页，先以进程去统计。
- GitHub Logo

-
+ +
- - - - - \ No newline at end of file + document.getElementById('body').setAttribute('style', 'background-color:#272C34;'); + let header = document.getElementsByClassName('fontColor'); + for (let i = 0; i < header.length; i++) { + header[i].style.color = '#fff'; + } + let lightBackGround = document.getElementsByClassName('light'); + for (let i = 0; i < lightBackGround.length; i++) { + lightBackGround[i].style.backgroundColor = '#32373F'; + } + } + }; + + + diff --git a/ide/src/doc/quickstart_Js_memory.html b/ide/src/doc/quickstart_Js_memory.html index f337844b610fbada96ca7327a3e4bd48903f5927..b2ef07c0b9ffd1d73340838ef097ed4a60b223bf 100644 --- a/ide/src/doc/quickstart_Js_memory.html +++ b/ide/src/doc/quickstart_Js_memory.html @@ -1,837 +1,893 @@ - - + + quickstart_Js_memory - + - - -
-

Js Memory抓取和展示说明

+ + +
+

Js Memory抓取和展示说明

-

Js Memory是查看程序中存量内存的情况。

-

Js Memory的抓取

+

Js Memory是查看程序中存量内存的情况。

+

Js Memory的抓取

-

Js Memory抓取配置参数

+

Js Memory抓取配置参数

-

GitHub Logo
- 配置参数说明：

- +

Js Memory详细显示的过滤功能

-
+

+ 在下方的Class Filter中输入类名，可以对类名进行过滤，如下图输入array，会过滤出类名是array的相关数据。
+ GitHub Logo +

+
- - - - - \ No newline at end of file + document.getElementById('body').setAttribute('style', 'background-color:#272C34;'); + let header = document.getElementsByClassName('fontColor'); + for (let i = 0; i < header.length; i++) { + header[i].style.color = '#fff'; + } + let lightBackGround = document.getElementsByClassName('light'); + for (let i = 0; i < lightBackGround.length; i++) { + lightBackGround[i].style.backgroundColor = '#32373F'; + } + } + }; + + + diff --git a/ide/src/hdc/common/Serialize.ts b/ide/src/hdc/common/Serialize.ts index ddc166948b18f3e2b0a2d6ef64ca2f693d4c1799..a4201d929be3b885e195e979198c3adced562c11 100644 --- a/ide/src/hdc/common/Serialize.ts +++ b/ide/src/hdc/common/Serialize.ts @@ -253,7 +253,6 @@ export class Serialize { let channelDataBuffer = dataBuffer.slice(1); let channelDataView = new DataView(channelDataBuffer); let fileSize = this.parseU64(channelDataView, 1); - console.log('parseTransferConfig fileSize,', fileSize); return new TransferConfig(fileSize, 0, 0, '', '', '', false, 0, false, '', '', '', ''); } diff --git a/ide/src/js-heap/HeapDataInterface.ts b/ide/src/js-heap/HeapDataInterface.ts index 24f08339cbfda2fb32c13bea76e87e3c582b9858..58225261c895883119900764c35a7a3a009b7ab1 100644 --- a/ide/src/js-heap/HeapDataInterface.ts +++ b/ide/src/js-heap/HeapDataInterface.ts @@ -275,4 +275,18 @@ export class HeapDataInterface { public getFileStructs(): Array { return this.fileStructs; } + + /** + * clear Cache + */ + public clearData() { + if (!this.fileStructs) { + return; + } + for (let file of this.fileStructs) { + file.snapshotStruct.clear(); + file.heapLoader.clear(); + } + this.fileStructs.length = 0; + } } diff --git a/ide/src/js-heap/LoadDatabase.ts b/ide/src/js-heap/LoadDatabase.ts index 63f9d1965f230e85f54289503db36a3eb6308098..7e545c5fb52241a08e5a1f40d4ae63d3d12efb1f 100644 --- a/ide/src/js-heap/LoadDatabase.ts +++ b/ide/src/js-heap/LoadDatabase.ts @@ -15,14 +15,7 @@ import { HeapDataInterface, ParseListener } from './HeapDataInterface.js'; import { AllocationFunction, FileType } from './model/UiStruct.js'; import { getTimeForLog } from './utils/Utils.js'; -import { - HeapEdge, - HeapNode, - HeapTraceFunctionInfo, - HeapSample, - HeapLocation, - FileStruct, -} from './model/DatabaseStruct.js'; +import { HeapNode, FileStruct } from './model/DatabaseStruct.js'; import { queryHeapFile, queryHeapInfo, @@ -31,7 +24,6 @@ import { queryHeapFunction, queryHeapTraceNode, queryHeapSample, - queryHeapLocation, queryHeapString, } from '../trace/database/SqlLite.js'; import { info } from '../log/Log.js'; @@ -54,10 +46,11 @@ export class LoadDatabase { for (let row of result) { let fileStruct = new FileStruct(); fileStruct.id = row.id; - fileStruct.name = row.file_name; - fileStruct.start_ts = row.start_time; - fileStruct.end_ts = row.end_time; + fileStruct.name = row.name; + fileStruct.startTs = row.startTs; + fileStruct.endTs = row.endTs; fileStruct.pid = row.pid; + fileStruct.size = row.size; if (fileStruct.name.startsWith('Snapshot')) { fileStruct.type = FileType.SNAPSHOT; } else { @@ -72,7 +65,6 @@ export class LoadDatabase { await this.loadTraceFunctionInfos(fileStruct); await this.loadTraceTree(fileStruct); await this.loadSamples(fileStruct); - await this.loadLocations(fileStruct); let percent = Math.floor(50 / result.length) * (row.id + 1); listener.process('loading file ' + fileStruct.name + ' from db ', percent); info(`read ${fileStruct.name} from db Success ${getTimeForLog()}`); @@ -90,13 +82,13 @@ export class LoadDatabase { if (row.key.includes('types')) continue; switch (row.key) { case 'node_count': - file.snapshotStruct.nodeCount = row.int_value; + file.snapshotStruct.nodeCount = row.intValue; break; case 'edge_count': - file.snapshotStruct.edgeCount = row.int_value; + file.snapshotStruct.edgeCount = row.intValue; break; case 'trace_function_count': - file.snapshotStruct.functionCount = row.int_value; + file.snapshotStruct.functionCount = row.intValue; break; } } @@ -105,69 +97,34 @@ export class LoadDatabase { private async loadNode(file: FileStruct) { let result = await queryHeapNode(file.id); let heapNodes = file.snapshotStruct.nodeMap; - - let items = new Array(); let firstEdgeIndex = 0; for (let row of result) { let node = new HeapNode( file.id, - row.node_index, + row.nodeIndex, row.type, - file.snapshotStruct.strings[row.name], + file.snapshotStruct.strings[row.nameIdx], row.id, - row.self_size, - row.edge_count, - row.trace_node_id, + row.selfSize, + row.edgeCount, + row.traceNodeId, row.detachedness, firstEdgeIndex ); if (file.snapshotStruct.rootNodeId === -1) { file.snapshotStruct.rootNodeId = row.id; } - heapNodes.set(row.id, node); - items.push(...[row.type, row.name, row.id, row.self_size, row.edge_count, row.trace_node_id, row.detachedness]); - firstEdgeIndex += node.edgeCount; + heapNodes.set(node.id, node); + firstEdgeIndex += row.edgeCount; } } private async loadEdge(file: FileStruct) { - let result = await queryHeapEdge(file.id); - let heapEdges = file.snapshotStruct.edges; - - let items = new Array(); - for (let row of result) { - let edge = new HeapEdge( - row.edge_index, - row.type, - file.snapshotStruct.strings[row.name_or_index], - row.to_node, - row.from_node_id, - row.to_node_id - ); - heapEdges.push(edge); - items.push(...[row.type, row.name_or_index, row.to_node]); - } + file.snapshotStruct.edges = await queryHeapEdge(file.id); } private async loadTraceFunctionInfos(file: FileStruct) { - let result = await queryHeapFunction(file.id); - let heapFunction = file.snapshotStruct.functionInfos; - - let items = new Array(); - for (let row of result) { - let functionInfo = new HeapTraceFunctionInfo( - row.function_id, - row.function_index, - file.snapshotStruct.strings[row.name], - file.snapshotStruct.strings[row.script_name], - row.script_id, - row.line, - row.column - ); - heapFunction.push(functionInfo); - - items.push(...[row.function_id, row.name, row.script_name, row.script_id, row.line, row.column]); - } + file.snapshotStruct.functionInfos = await queryHeapFunction(file.id); } private async loadTraceTree(file: FileStruct) { @@ -178,47 +135,31 @@ export class LoadDatabase { let traceNode = new AllocationFunction( row.id, strings[row.name], - strings[row.script_name], - row.script_id, + strings[row.scriptName], + row.scriptId, row.line, row.column, row.count, row.size, - row.live_count, - row.live_size, + row.liveCount, + row.liveSize, false ); - traceNode.parentsId.push(row.parent_id); - traceNode.functionIndex = row.function_info_index; + traceNode.parentsId.push(row.parentId); + traceNode.functionIndex = row.functionInfoIndex; traceNode.fileId = file.id; heapTraceNode.push(traceNode); } } private async loadSamples(file: FileStruct) { - let result = await queryHeapSample(file.id); - let samples = file.snapshotStruct.samples; - - for (let row of result) { - let functionInfo = new HeapSample(row.timestamp_us, row.last_assigned_id); - samples.push(functionInfo); - } - } - - private async loadLocations(file: FileStruct) { - let result = await queryHeapLocation(file.id); - let locations = file.snapshotStruct.locations; - - for (let row of result) { - let location = new HeapLocation(row.object_index / 7, row.script_id, row.line, row.column); - locations.set(location.objectIndex, location); - } + file.snapshotStruct.samples = await queryHeapSample(file.id); } private async loadStrings(file: FileStruct) { let result = await queryHeapString(file.id); - for (let row of result) { - file.snapshotStruct.strings.push(row.string); + for (let data of result) { + file.snapshotStruct.strings.push(data.string); } } diff --git a/ide/src/js-heap/logic/HeapLoader.ts b/ide/src/js-heap/logic/HeapLoader.ts index a89e1191a5a2cce0961281a138235683a2bdf303..750f9744c5eb8d7c9688b253fe93a119a5743f0f 100644 --- a/ide/src/js-heap/logic/HeapLoader.ts +++ b/ide/src/js-heap/logic/HeapLoader.ts @@ -48,7 +48,7 @@ export class HeapLoader { private dominatorTree: Uint32Array; private firstDominatedNodesIdx: Uint32Array; private dominatedNodes: Uint32Array; - private allClasses!: Map; + private allClasses?: Map; private diffToOtherFile: Map>; constructor(fileStruct: FileStruct) { @@ -164,7 +164,7 @@ export class HeapLoader { if (!childNode) { continue; } - if (node.nodeIndex !== this.rootNode?.nodeIndex){ + if (node.nodeIndex !== this.rootNode?.nodeIndex) { childNode.retainsNodeIdx.push(node.nodeIndex); childNode.retainsEdgeIdx.push(edge.edgeIndex); } @@ -1039,6 +1039,14 @@ export class HeapLoader { public getNodes(): Array { return this.nodes; } + + public clear() { + this.allClasses?.clear(); + this.diffToOtherFile.clear(); + this.nodeMap.clear(); + this.edges.length = 0; + this.nodes.length = 0; + } } class DOMState { diff --git a/ide/src/js-heap/model/DatabaseStruct.ts b/ide/src/js-heap/model/DatabaseStruct.ts index 4e8a89cef45d96496f70f732765ebdd4d5bce1c9..4112d19b0c55249e2086f118548cd65956e1f7e3 100644 --- a/ide/src/js-heap/model/DatabaseStruct.ts +++ b/ide/src/js-heap/model/DatabaseStruct.ts @@ -70,6 +70,7 @@ export class HeapNode { nodeOldIndex: number; type: NodeType; name: string; + nameIdx!: number; id: number; selfSize: number; edgeCount: number; @@ -87,7 +88,7 @@ export class HeapNode { constructor( fileId: number, - node_index: number, + nodeIndex: number, type: number, name: string, id: number, @@ -98,8 +99,8 @@ export class HeapNode { firstEdgeIndex: number ) { this.fileId = fileId; - this.nodeIndex = node_index; - this.nodeOldIndex = node_index * 7; + this.nodeIndex = nodeIndex; + this.nodeOldIndex = nodeIndex * 7; this.type = type; this.name = name; this.id = id; @@ -217,16 +218,14 @@ export class HeapTraceFunctionInfo { export class HeapSample { timestamp: number; lastAssignedId: number; - size: number; + size: number = 0; constructor(timestamp: number, lastAssignedId: number) { this.timestamp = timestamp; this.lastAssignedId = lastAssignedId; - this.size = 0; } } export class HeapLocation { - objectIndex: number; scriptId: number; line: number; @@ -250,7 +249,6 @@ export class HeapSnapshotStruct { functionInfos: Array; traceNodes: Array; samples: Array; - locations: Map; strings: Array; rootNodeId: number = -1; @@ -261,9 +259,17 @@ export class HeapSnapshotStruct { this.functionInfos = new Array(); this.traceNodes = new Array(); this.samples = new Array(); - this.locations = new Map(); this.strings = new Array(); } + + public clear() { + this.nodeMap.clear(); + this.edges.length = 0; + this.functionInfos.length = 0; + this.traceNodes.length = 0; + this.samples.length = 0; + this.strings.length = 0; + } } export class FileStruct extends FileInfo { diff --git a/ide/src/js-heap/model/UiStruct.ts b/ide/src/js-heap/model/UiStruct.ts index 98302e44fad9e9f92296d90f17fb21a726caadb3..02555a42ae898d680bd0dd456dfc3db4418946de 100644 --- a/ide/src/js-heap/model/UiStruct.ts +++ b/ide/src/js-heap/model/UiStruct.ts @@ -38,6 +38,8 @@ export class ConstructorItem { distance = -1; shallowSize = -1; retainedSize = -1; + retainedPercent = ''; //retained percent + shallowPercent = ''; //shallow percent hasNext = true; status = true; isSelected: boolean = false; @@ -212,7 +214,8 @@ export class FileInfo { id: number = -1; name: string = ''; type!: FileType; - start_ts: number = 0; - end_ts: number = 0; + startTs: number = 0; + endTs: number = 0; pid: number = 0; + size: number = 0; } diff --git a/ide/src/statistics/util/SpStatisticsHttpUtil.ts b/ide/src/statistics/util/SpStatisticsHttpUtil.ts index df84a3301b093188d77f7a9f88c5c1b184bcc4af..0273215f46a0e9fc3c07c80b12f8299875d320fe 100644 --- a/ide/src/statistics/util/SpStatisticsHttpUtil.ts +++ b/ide/src/statistics/util/SpStatisticsHttpUtil.ts @@ -37,7 +37,9 @@ export class SpStatisticsHttpUtil { let req = new XMLHttpRequest(); req.open( 'GET', - `${window.location.protocol}//${window.location.host.split(':')[0]}:${window.location.port}/application/serverInfo`, + `${window.location.protocol}//${window.location.host.split(':')[0]}:${ + window.location.port + }/application/serverInfo`, false ); req.send(null); diff --git a/ide/src/trace/SpApplication.ts b/ide/src/trace/SpApplication.ts index 452e993c212df899692d86c27ae4ab0e5825bced..d184d380f669bb2c03fa98cdbad1fbb027061dac 100644 --- a/ide/src/trace/SpApplication.ts +++ b/ide/src/trace/SpApplication.ts @@ -471,13 +471,13 @@ export class SpApplication extends BaseElement { }; window.subscribe(window.SmartEvent.UI.MenuTrace, () => showContent(spSystemTrace!)); - window.subscribe(window.SmartEvent.UI.Error,(err) => { - litSearch.setPercent(err,-1); + window.subscribe(window.SmartEvent.UI.Error, (err) => { + litSearch.setPercent(err, -1); progressEL.loading = false; }); window.subscribe(window.SmartEvent.UI.Loading, (loading) => { - litSearch.setPercent(loading ? 'Import So File' : '', loading ? -1 : 101); - progressEL.loading = loading + litSearch.setPercent(loading ? 'Import So File' : '', loading ? -1 : 101); + progressEL.loading = loading; }); litSearch.addEventListener('focus', () => { window.publish(window.SmartEvent.UI.KeyboardEnable, { @@ -891,6 +891,9 @@ export class SpApplication extends BaseElement { }); info('openTraceFile'); spSystemTrace!.clearPointPair(); + spSystemTrace!.reset((command: string, percent: number) => { + setProgress(command); + }); window.clearTraceRowComplete(); that.freshMenuDisable(true); SpSchedulingAnalysis.resetCpu(); @@ -1154,7 +1157,7 @@ export class SpApplication extends BaseElement { if (sidebarButton) { sidebarButton.style.width = open ? `0px` : '48px'; } - } + }; let urlParams = this.getUrlParams(window.location.href); if (urlParams && urlParams.trace && urlParams.link) { @@ -1166,7 +1169,7 @@ export class SpApplication extends BaseElement { progressEL.loading = true; let downloadLineFile = false; setProgress(downloadLineFile ? 'download trace file' : 'open trace file'); - this.downloadOnLineFile(urlParams.trace, downloadLineFile,(localPath) => { + this.downloadOnLineFile(urlParams.trace, downloadLineFile, (localPath) => { let path = urlParams.trace as string; let fileName = path.split('/').reverse()[0]; let showFileName = diff --git a/ide/src/trace/component/SpHelp.ts b/ide/src/trace/component/SpHelp.ts index 6ce5e24fa45b0f5aa42378c4f0464a7d89c71bf5..508a043ba33f2eedb7304d03361b10ddceefe315 100644 --- a/ide/src/trace/component/SpHelp.ts +++ b/ide/src/trace/component/SpHelp.ts @@ -307,10 +307,10 @@ export class SpHelp extends BaseElement { action: 'help_doc', }); that.appContent!.innerHTML = - ''; + ''; }, }, { @@ -322,10 +322,10 @@ export class SpHelp extends BaseElement { action: 'help_doc', }); that.appContent!.innerHTML = - ''; + ''; }, }, ], diff --git a/ide/src/trace/component/SpRecordTrace.ts b/ide/src/trace/component/SpRecordTrace.ts index 8c320d798adc8c2e5f7b94f72d5733323599309b..bc1e9cdfe6b9c8254833134a75ed0a8ef2cf477e 100644 --- a/ide/src/trace/component/SpRecordTrace.ts +++ b/ide/src/trace/component/SpRecordTrace.ts @@ -368,7 +368,7 @@ export class SpRecordTrace extends BaseElement { public deviceSelect: HTMLSelectElement | undefined; public deviceVersion: HTMLSelectElement | undefined; - private recordButtonText:HTMLSpanElement | undefined; + private recordButtonText: HTMLSpanElement | undefined; private recordButton: LitButton | undefined; private sp: SpApplication | undefined; @@ -391,7 +391,7 @@ export class SpRecordTrace extends BaseElement { private menuGroup: LitMainMenuGroup | undefined | null; private appContent: HTMLElement | undefined | null; - private record= 'Record'; + private record = 'Record'; private stop = 'StopCmd'; compareArray(devs: Array): boolean { @@ -720,7 +720,7 @@ export class SpRecordTrace extends BaseElement { } stopRecordListener() { - this.recordButtonText!.textContent = 'Record' + this.recordButtonText!.textContent = 'Record'; if (this.vs) { let cmd = Cmd.formatString(CmdConstant.CMS_HDC_STOP, [SpRecordTrace.serialNumber]); Cmd.execHdcCmd(cmd, (res: string) => { @@ -732,6 +732,7 @@ export class SpRecordTrace extends BaseElement { this.addButton!.style.pointerEvents = 'auto'; this.deviceSelect!.style.pointerEvents = 'auto'; this.disconnectButton!.style.pointerEvents = 'auto'; + this.deviceVersion!.style.pointerEvents = 'auto'; }); } else { let selectedOption = this.deviceSelect!.options[this.deviceSelect!.selectedIndex] as HTMLOptionElement; @@ -746,6 +747,7 @@ export class SpRecordTrace extends BaseElement { this.disconnectButton!.style.pointerEvents = 'auto'; this.addButton!.style.pointerEvents = 'auto'; this.deviceSelect!.style.pointerEvents = 'auto'; + this.deviceVersion!.style.pointerEvents = 'auto'; SpRecordTrace.stopRecord = true; HdcDeviceManager.stopHiprofiler(CmdConstant.CMS_STOP, true).then((result) => {}); } catch (exception) { @@ -1037,7 +1039,7 @@ export class SpRecordTrace extends BaseElement { let child = children[0].children as Array; let fileHandler = child[0].fileHandler; if (fileHandler && !SpRecordTrace.stopRecord) { - this.recordButtonText!.textContent = this.record + this.recordButtonText!.textContent = this.record; this.freshMenuDisable(false); this.freshConfigMenuDisable(false); fileHandler({ detail: file }); @@ -1047,7 +1049,7 @@ export class SpRecordTrace extends BaseElement { }); } else { this.litSearch!.setPercent('tracing htrace failed, please check your config ', -2); - this.recordButtonText!.textContent = this.record + this.recordButtonText!.textContent = this.record; this.freshMenuDisable(false); this.freshConfigMenuDisable(false); this.progressEL!.loading = false; @@ -1090,6 +1092,9 @@ export class SpRecordTrace extends BaseElement { ).then((traceFileSize) => { if (traceFileSize.indexOf('No such') != -1) { this.litSearch!.setPercent('No such file or directory', -2); + this.buttonDisable(false); + this.freshConfigMenuDisable(false); + this.freshMenuDisable(false); } else if (Number(traceFileSize) <= SpRecordTrace.MaxFileSize) { HdcDeviceManager.fileRecv(this.recordSetting!.output, (perNumber: number) => { this.litSearch!.setPercent('downloading Hitrace file ', perNumber); @@ -1117,8 +1122,11 @@ export class SpRecordTrace extends BaseElement { }); }); } else { - this.recordButtonText!.textContent = this.record + this.recordButtonText!.textContent = this.record; this.litSearch!.setPercent('htrace file is too big', -2); + this.buttonDisable(false); + this.freshConfigMenuDisable(false); + this.freshMenuDisable(false); } }); } else if (re == 2) { @@ -1897,7 +1905,7 @@ export class SpRecordTrace extends BaseElement { this.deviceSelect!.style.pointerEvents = 'none'; this.deviceVersion!.style.pointerEvents = 'none'; } else { - this.recordButtonText!.textContent = this.record + this.recordButtonText!.textContent = this.record; this.disconnectButton!.style.pointerEvents = 'auto'; this.addButton!.style.pointerEvents = 'auto'; this.deviceSelect!.style.pointerEvents = 'auto'; diff --git a/ide/src/trace/component/SpSystemTrace.ts b/ide/src/trace/component/SpSystemTrace.ts index 1d569e89e4a9dae7744bebbd9b13fd8d8e99b7c4..15e8e2904698ecc9d141131143a4eaac2d65b8fa 100644 --- a/ide/src/trace/component/SpSystemTrace.ts +++ b/ide/src/trace/component/SpSystemTrace.ts @@ -25,7 +25,6 @@ import { RangeSelect } from './trace/base/RangeSelect.js'; import { SelectionParam } from '../bean/BoxSelection.js'; import { procedurePool } from '../database/Procedure.js'; import { SpApplication } from '../SpApplication.js'; -import { SPT } from '../bean/StateProcessThread.js'; import { Flag } from './trace/timer-shaft/Flag.js'; import { SportRuler } from './trace/timer-shaft/SportRuler.js'; import { SpHiPerf } from './chart/SpHiPerf.js'; @@ -72,6 +71,7 @@ import { HeapDataInterface } from '../../js-heap/HeapDataInterface.js'; import { TabPaneSummary } from './trace/sheet/snapshot/TabPaneSummary.js'; import { LitTabs } from '../../base-ui/tabs/lit-tabs.js'; import { SpJsMemoryChart } from './chart/SpJsMemoryChart.js'; +import { TraceRowConfig } from './trace/base/TraceRowConfig.js'; function dpr() { return window.devicePixelRatio || 1; @@ -84,7 +84,6 @@ export class SpSystemTrace extends BaseElement { static moveable = true; static scrollViewWidth = 0; static isCanvasOffScreen = true; - static SPT_DATA: Array = []; static DATA_DICT: Map = new Map(); static SDK_CONFIG_MAP: any; static sliceRangeMark: any; @@ -145,7 +144,6 @@ export class SpSystemTrace extends BaseElement { this.linkNodes.length = 0; } - initElements(): void { this.rowsEL = this.shadowRoot?.querySelector('.rows'); this.tipEL = this.shadowRoot?.querySelector('.tip'); @@ -415,8 +413,9 @@ export class SpSystemTrace extends BaseElement { info('load nativeMemory traceRow id is : ', it.rowId); } else if (it.rowType == TraceRow.ROW_TYPE_THREAD) { let pid = parseInt(it.rowParentId!); + // @ts-ignore if (!selection.processIds.includes(pid)) { - selection.processIds.push(pid) + selection.processIds.push(pid); } selection.threadIds.push(parseInt(it.rowId!)); info('load thread traceRow id is : ', it.rowId); @@ -595,32 +594,36 @@ export class SpSystemTrace extends BaseElement { ? TraceRow.rangeSelectObject?.startNS : TraceRow.range?.startNS; let minNodeId, maxNodeId; + if (!it.dataList) { + return; + } for (let sample of it.dataList) { - if (sample.timestamp_us * 1000 <= startNS!) { - minNodeId = sample.last_assigned_id; + if (sample.timestamp * 1000 <= startNS!) { + minNodeId = sample.lastAssignedId; } - if (sample.timestamp_us * 1000 >= endNS!) { + if (sample.timestamp * 1000 >= endNS!) { if (maxNodeId == undefined) { - maxNodeId = sample.last_assigned_id; + maxNodeId = sample.lastAssignedId; } } } + // If the start time range of the selected box is greater than the end time of the sampled data - if (startNS! >= it.dataList[it.dataList.length - 1].timestamp_us * 1000) { - minNodeId = it.dataList[it.dataList.length - 1].last_assigned_id; + if (startNS! >= it.dataList[it.dataList.length - 1].timestamp * 1000) { + minNodeId = it.dataList[it.dataList.length - 1].lastAssignedId; } // If you select the box from the beginning if (startNS! <= TraceRow.range?.startNS!) { minNodeId = HeapDataInterface.getInstance().getMinNodeId(SpJsMemoryChart.file.id); } //If you select the box from the ending - if (endNS! >= TraceRow.range?.endNS! || endNS! >= it.dataList[it.dataList.length - 1].timestamp_us * 1000) { + if (endNS! >= TraceRow.range?.endNS! || endNS! >= it.dataList[it.dataList.length - 1].timestampUs * 1000) { maxNodeId = HeapDataInterface.getInstance().getMaxNodeId(SpJsMemoryChart.file.id); } let summary = (this.traceSheetEL?.shadowRoot?.querySelector('#tabs') as LitTabs) ?.querySelector('#box-heap-summary') ?.querySelector('tabpane-summary') as TabPaneSummary; - summary.initSummaryData(SpJsMemoryChart.file.id, minNodeId, maxNodeId); + summary.initSummaryData(SpJsMemoryChart.file, minNodeId, maxNodeId); selection.jsMemory.push(1); } if (this.rangeTraceRow!.length !== rows.length) { @@ -664,9 +667,9 @@ export class SpSystemTrace extends BaseElement { }; // @ts-ignore new ResizeObserver((entries) => { - TraceRow.FRAME_WIDTH = this.clientWidth - 249; + TraceRow.FRAME_WIDTH = this.clientWidth - 249 - this.getScrollWidth(); requestAnimationFrame(() => { - this.timerShaftEL?.updateWidth(this.clientWidth); + this.timerShaftEL?.updateWidth(this.clientWidth - 1 - this.getScrollWidth()); this.shadowRoot!.querySelectorAll>('trace-row').forEach((it) => { it.updateWidth(this.clientWidth); }); @@ -991,14 +994,14 @@ export class SpSystemTrace extends BaseElement { drawFlagLineSegment(this.canvasPanelCtx, this.hoverFlag, this.selectFlag, { x: 0, y: 0, - width: TraceRow.FRAME_WIDTH, + width: this.timerShaftEL?.canvas?.clientWidth, height: this.canvasPanel?.clientHeight, }); //draw flag line segment for favorite canvas drawFlagLineSegment(this.canvasFavoritePanelCtx, this.hoverFlag, this.selectFlag, { x: 0, y: 0, - width: TraceRow.FRAME_WIDTH, + width: this.timerShaftEL?.canvas?.clientWidth, height: this.canvasFavoritePanel?.clientHeight, }); //draw wakeup for main canvas @@ -1029,6 +1032,7 @@ export class SpSystemTrace extends BaseElement { height: this.canvasFavoritePanel!.clientHeight!, } as Rect ); + // Draw the connection curve if (this.linkNodes) { drawLinkLines(this.canvasPanelCtx!, this.linkNodes, this.timerShaftEL!, false); @@ -1612,11 +1616,11 @@ export class SpSystemTrace extends BaseElement { snapshotClickHandler = (d: HeapSnapshotStruct) => { this.observerScrollHeightEnable = true; let snapshotRow = this.shadowRoot?.querySelector>( - `trace-row[row-id='heap_snapshot']` + `trace-row[row-id='heapsnapshot']` ); let task = () => { if (snapshotRow) { - let findEntry = snapshotRow!.dataList!.find((dat) => dat.start_time === d.start_time); + let findEntry = snapshotRow!.dataList!.find((dat) => dat.startTs === d.startTs); this.hoverStructNull(); this.selectStructNull(); HeapSnapshotStruct.hoverSnapshotStruct = findEntry; @@ -1712,7 +1716,7 @@ export class SpSystemTrace extends BaseElement { ); } else if (clickRowType === TraceRow.ROW_TYPE_HEAP_SNAPSHOT && HeapSnapshotStruct.hoverSnapshotStruct) { let snapshotRow = this.shadowRoot?.querySelector>( - `trace-row[row-id='heap_snapshot']` + `trace-row[row-id='heapsnapshot']` ); HeapSnapshotStruct.selectSnapshotStruct = HeapSnapshotStruct.hoverSnapshotStruct; this.traceSheetEL?.displaySnapshotData( @@ -1941,7 +1945,7 @@ export class SpSystemTrace extends BaseElement { document.addEventListener('contextmenu', this.onContextMenuHandler); /** - * 获取并保存鼠标当前的x轴坐标位置，配合ctrl+鼠标左键拖动完成泳道图的左移或右移 + * 获取并保存鼠标当前的x轴坐标位置，配合ctrl+鼠标左键拖动完成泳道图的左移或右移 */ this.addEventListener( 'mousedown', @@ -1959,7 +1963,6 @@ export class SpSystemTrace extends BaseElement { }, { passive: false } ); - /** * ctrl+鼠标移动，实现泳道图左移或者右移。 */ @@ -2000,7 +2003,7 @@ export class SpSystemTrace extends BaseElement { }, { passive: false } ); - + this.addEventListener( 'mouseup', (e) => { @@ -2072,11 +2075,11 @@ export class SpSystemTrace extends BaseElement { } }); }); - window.subscribe(window.SmartEvent.UI.CheckALL,(data) => { + window.subscribe(window.SmartEvent.UI.CheckALL, (data) => { this.favoriteRowsEL?.querySelectorAll>(`trace-row[row-parent-id='${data.rowId}']`).forEach((it) => { - it.checkType = data.isCheck ? '2' : '0' + it.checkType = data.isCheck ? '2' : '0'; }); - }) + }); } scrollToProcess(rowId: string, rowParentId: string, rowType: string, smooth: boolean = true) { @@ -2092,7 +2095,7 @@ export class SpSystemTrace extends BaseElement { if (row && !row.expansion) { row.expansion = true; } - if(rootRow && rootRow.offsetTop >= 0 && rootRow.offsetHeight >= 0){ + if (rootRow && rootRow.offsetTop >= 0 && rootRow.offsetHeight >= 0) { this.rowsPaneEL!.scroll({ top: (rootRow?.offsetTop || 0) - this.canvasPanel!.offsetHeight + (rootRow?.offsetHeight || 0), left: 0, @@ -2115,7 +2118,7 @@ export class SpSystemTrace extends BaseElement { if (row && !row.expansion) { row.expansion = true; } - if(rootRow && rootRow.offsetTop >= 0 && rootRow.offsetHeight >= 0){ + if (rootRow && rootRow.offsetTop >= 0 && rootRow.offsetHeight >= 0) { this.rowsPaneEL!.scroll({ top: (rootRow?.offsetTop || 0) - this.canvasPanel!.offsetHeight + (++depth * 20 || 0), left: 0, @@ -2475,7 +2478,9 @@ export class SpSystemTrace extends BaseElement { this.scrollToDepth(`${funcRowID}`, `${funcStract.pid}`, funcStract.type, true, funcStract.depth || 0); }; let funcRowID = funcStract.cookie == null ? funcStract.tid : `${funcStract.funName}-${funcStract.pid}`; - let targetRow = this.favoriteRowsEL!.querySelector>(`trace-row[row-id='${funcRowID}'][row-type='func']`); + let targetRow = this.favoriteRowsEL!.querySelector>( + `trace-row[row-id='${funcRowID}'][row-type='func']` + ); if (targetRow) { //如果目标泳道图在收藏上面，则跳转至收藏 let searchEntry = targetRow!.dataList!.find((dat) => dat.startTs === funcStract.startTime); @@ -2646,15 +2651,30 @@ export class SpSystemTrace extends BaseElement { this.favoriteRowsEL!.style.height = '0'; this.canvasFavoritePanel!.style.height = '0'; this.loadTraceCompleted = false; + this.collectRows = []; + this.visibleRows = []; + TraceRowConfig.allTraceRowList.forEach(it => { + it.clearMemory(); + }) + TraceRowConfig.allTraceRowList = []; if (this.favoriteRowsEL) { - this.favoriteRowsEL.querySelectorAll(`trace-row`).forEach((row) => { + this.favoriteRowsEL.querySelectorAll>(`trace-row`).forEach((row) => { + row.clearMemory(); this.favoriteRowsEL!.removeChild(row); }); } - if (this.rowsEL) this.rowsEL.innerHTML = ''; + if (this.rowsEL) { + this.rowsEL.querySelectorAll>(`trace-row`).forEach((row) => { + row.clearMemory(); + this.rowsEL!.removeChild(row); + }); + this.rowsEL.innerHTML = '' + } + this.traceSheetEL?.clearMemory(); this.spacerEL!.style.height = '0px'; this.rangeSelect.rangeTraceRow = []; - this.collectRows = []; + SpSystemTrace.SDK_CONFIG_MAP = undefined; + SpSystemTrace.sliceRangeMark = undefined; this.timerShaftEL?.displayCollect(false); this.timerShaftEL!.collecBtn!.removeAttribute('close'); CpuStruct.wakeupBean = undefined; @@ -2664,7 +2684,11 @@ export class SpSystemTrace extends BaseElement { progress && progress('rest timershaft', 8); this.timerShaftEL?.reset(); progress && progress('clear cache', 10); + HeapDataInterface.getInstance().clearData(); procedurePool.clearCache(); + Utils.clearData(); + procedurePool.submitWithName('logic0', 'clear', {}, undefined, (res: any) => {}); + procedurePool.submitWithName('logic1', 'clear', {}, undefined, (res: any) => {}); } init = async (param: { buf?: ArrayBuffer; url?: string }, wasmConfigUri: string, progress: Function) => { @@ -2673,7 +2697,6 @@ export class SpSystemTrace extends BaseElement { top: 0, left: 0, }); - this.reset(progress); if (param.buf) { let configJson = ''; try { @@ -2701,7 +2724,7 @@ export class SpSystemTrace extends BaseElement { info('All TraceRow Data initialized'); this.loadTraceCompleted = true; this.rowsEL!.querySelectorAll>('trace-row').forEach((it) => { - if(it.folder){ + if (it.folder) { let offsetYTimeOut: any = undefined; it.addEventListener('expansion-change', (event: any) => { JankStruct.delJankLineFlag = false; diff --git a/ide/src/trace/component/chart/FrameChart.ts b/ide/src/trace/component/chart/FrameChart.ts index 518ffc03e68692384ea8f0bf145a8d2c383e7fdd..7caac20b867068155e7d1a6116385850af57060d 100644 --- a/ide/src/trace/component/chart/FrameChart.ts +++ b/ide/src/trace/component/chart/FrameChart.ts @@ -801,7 +801,8 @@ export class FrameChart extends BaseElement { let box = this.canvas!.getBoundingClientRect(); let element = document.documentElement; this.startX = box.left + Math.max(element.scrollLeft, document.body.scrollLeft) - element.clientLeft; - this.startY = box.top + Math.max(element.scrollTop, document.body.scrollTop) - element.clientTop + this.canvasScrollTop; + this.startY = + box.top + Math.max(element.scrollTop, document.body.scrollTop) - element.clientTop + this.canvasScrollTop; } }).observe(document.documentElement); } diff --git a/ide/src/trace/component/chart/SpCpuChart.ts b/ide/src/trace/component/chart/SpCpuChart.ts index 366848796e2a95e6c592e72c97e61b4bed8d8e25..8422ea83e9aa7719f3b376e02cf8bba5154ebafc 100644 --- a/ide/src/trace/component/chart/SpCpuChart.ts +++ b/ide/src/trace/component/chart/SpCpuChart.ts @@ -14,7 +14,13 @@ */ import { SpSystemTrace } from '../SpSystemTrace.js'; -import { queryCpuCount, queryCpuData, queryCpuMax, queryCpuSchedSlice } from '../../database/SqlLite.js'; +import { + queryCpuCount, + queryCpuData, + queryCpuDataCount, + queryCpuMax, + queryCpuSchedSlice, +} from '../../database/SqlLite.js'; import { info } from '../../../log/Log.js'; import { TraceRow } from '../trace/base/TraceRow.js'; import { procedurePool } from '../../database/Procedure.js'; @@ -38,6 +44,7 @@ export class SpCpuChart { } else { (window as any).cpuCount = 0; } + let dataCount: { count: number; cpu: number }[] = (await queryCpuDataCount()) as { count: number; cpu: number }[]; let cpuSchedSlice = await queryCpuSchedSlice(); this.initSchedSliceData(cpuSchedSlice); info('Cpu trace row data size is: ', array.length); @@ -45,69 +52,71 @@ export class SpCpuChart { let cpuMax = array[0].cpu; CpuStruct.cpuCount = cpuMax + 1; for (let i1 = 0; i1 < CpuStruct.cpuCount; i1++) { - const cpuId = i1; - let traceRow = TraceRow.skeleton(); - traceRow.rowId = `${cpuId}`; - traceRow.rowType = TraceRow.ROW_TYPE_CPU; - traceRow.rowParentId = ''; - traceRow.style.height = '40px'; - traceRow.name = `Cpu ${cpuId}`; - traceRow.favoriteChangeHandler = this.trace.favoriteChangeHandler; - traceRow.selectChangeHandler = this.trace.selectChangeHandler; - traceRow.supplier = () => - queryCpuData(cpuId, TraceRow.range?.startNS || 0, TraceRow.range?.endNS || 0).then((res) => { - res.forEach((it, i, arr) => { - let p = Utils.PROCESS_MAP.get(it.processId!); - let t = Utils.THREAD_MAP.get(it.tid!); - let slice = Utils.SCHED_SLICE_MAP.get(`${it.id}-${it.startTime}`); - if (slice) { - it.end_state = slice.endState; - it.priority = slice.priority; - } - it.processName = p; - it.processCmdLine = p; - it.name = t; - it.type = 'thread'; - if (i !== arr.length - 1) { - if (it.startTime! + it.dur! > arr[i + 1]!.startTime! || it.dur == -1) { - it.dur = arr[i + 1]!.startTime! - it.startTime!; - it.nofinish = true; + if (dataCount.find((it) => it.cpu === i1 && it.count > 0)) { + const cpuId = i1; + let traceRow = TraceRow.skeleton(); + traceRow.rowId = `${cpuId}`; + traceRow.rowType = TraceRow.ROW_TYPE_CPU; + traceRow.rowParentId = ''; + traceRow.style.height = '40px'; + traceRow.name = `Cpu ${cpuId}`; + traceRow.favoriteChangeHandler = this.trace.favoriteChangeHandler; + traceRow.selectChangeHandler = this.trace.selectChangeHandler; + traceRow.supplier = () => + queryCpuData(cpuId, TraceRow.range?.startNS || 0, TraceRow.range?.endNS || 0).then((res) => { + res.forEach((it, i, arr) => { + let p = Utils.PROCESS_MAP.get(it.processId!); + let t = Utils.THREAD_MAP.get(it.tid!); + let slice = Utils.SCHED_SLICE_MAP.get(`${it.id}-${it.startTime}`); + if (slice) { + it.end_state = slice.endState; + it.priority = slice.priority; } - } else { - if (it.dur == -1) { - it.dur = TraceRow.range!.endNS - it.startTime!; - it.nofinish = true; + it.processName = p; + it.processCmdLine = p; + it.name = t; + it.type = 'thread'; + if (i !== arr.length - 1) { + if (it.startTime! + it.dur! > arr[i + 1]!.startTime! || it.dur == -1) { + it.dur = arr[i + 1]!.startTime! - it.startTime!; + it.nofinish = true; + } + } else { + if (it.dur == -1) { + it.dur = TraceRow.range!.endNS - it.startTime!; + it.nofinish = true; + } } - } + }); + return res; }); - return res; - }); - traceRow.focusHandler = () => { - this.trace?.displayTip( - traceRow, - CpuStruct.hoverCpuStruct, - `P：${CpuStruct.hoverCpuStruct?.processName || 'Process'} [${ - CpuStruct.hoverCpuStruct?.processId - }]T：${CpuStruct.hoverCpuStruct?.name} [${CpuStruct.hoverCpuStruct?.tid}] [Prio:${ - CpuStruct.hoverCpuStruct?.priority || 0 - }]` - ); - }; - traceRow.onThreadHandler = (useCache: boolean, buf: ArrayBuffer | undefined | null) => { - let context = traceRow.collect ? this.trace.canvasFavoritePanelCtx! : this.trace.canvasPanelCtx!; - traceRow.canvasSave(context); - (renders['cpu-data'] as CpuRender).renderMainThread( - { - context: context, - useCache: useCache, - type: `cpu-data-${i1}`, - translateY: traceRow.translateY, - }, - traceRow - ); - traceRow.canvasRestore(context); - }; - this.trace.rowsEL?.appendChild(traceRow); + traceRow.focusHandler = () => { + this.trace?.displayTip( + traceRow, + CpuStruct.hoverCpuStruct, + `P：${CpuStruct.hoverCpuStruct?.processName || 'Process'} [${ + CpuStruct.hoverCpuStruct?.processId + }]T：${CpuStruct.hoverCpuStruct?.name} [${CpuStruct.hoverCpuStruct?.tid}] [Prio:${ + CpuStruct.hoverCpuStruct?.priority || 0 + }]` + ); + }; + traceRow.onThreadHandler = (useCache: boolean, buf: ArrayBuffer | undefined | null) => { + let context = traceRow.collect ? this.trace.canvasFavoritePanelCtx! : this.trace.canvasPanelCtx!; + traceRow.canvasSave(context); + (renders['cpu-data'] as CpuRender).renderMainThread( + { + context: context, + useCache: useCache, + type: `cpu-data-${i1}`, + translateY: traceRow.translateY, + }, + traceRow + ); + traceRow.canvasRestore(context); + }; + this.trace.rowsEL?.appendChild(traceRow); + } } } let CpuDurTime = new Date().getTime() - CpuStartTime; @@ -116,11 +125,8 @@ export class SpCpuChart { initProcessThreadStateData = async (progress: Function) => { let time = new Date().getTime(); - SpSystemTrace.SPT_DATA = []; progress('StateProcessThread', 93); - procedurePool.submitWithName('logic1', 'spt-init', {}, undefined, (res: any) => { - SpSystemTrace.SPT_DATA = Array.from(res); - }); + procedurePool.submitWithName('logic1', 'spt-init', {}, undefined, (res: any) => {}); let durTime = new Date().getTime() - time; info('The time to load the first ProcessThreadState data is: ', durTime); }; diff --git a/ide/src/trace/component/chart/SpFileSystemChart.ts b/ide/src/trace/component/chart/SpFileSystemChart.ts index bc31d43f9c5ef19f49a00561a30f59e7feffe448..4c1e248c9032fb2fda432df981b912c6baf6f188 100644 --- a/ide/src/trace/component/chart/SpFileSystemChart.ts +++ b/ide/src/trace/component/chart/SpFileSystemChart.ts @@ -159,7 +159,7 @@ export class SpFileSystemChart { ); logicalWriteRow.canvasRestore(context); }; - folder.addChildTraceRow(logicalWriteRow); + folder.addChildTraceRow(logicalWriteRow); } async initDiskIOLatency(folder: TraceRow) { diff --git a/ide/src/trace/component/chart/SpFreqChart.ts b/ide/src/trace/component/chart/SpFreqChart.ts index 3004415a72c140d00c7d89eded2b2caf0ff62799..e18c093e5ff60036a1e832311e3fc15e5368bed3 100644 --- a/ide/src/trace/component/chart/SpFreqChart.ts +++ b/ide/src/trace/component/chart/SpFreqChart.ts @@ -32,7 +32,7 @@ import { CpuFreqLimitRender, CpuFreqLimitsStruct } from '../../database/ui-worke import { renders } from '../../database/ui-worker/ProcedureWorker.js'; import { CpuFreqStruct, FreqRender } from '../../database/ui-worker/ProcedureWorkerFreq.js'; import { CpuStateRender, CpuStateStruct } from '../../database/ui-worker/ProcedureWorkerCpuState.js'; -import {Utils} from "../trace/base/Utils.js"; +import { Utils } from '../trace/base/Utils.js'; export class SpFreqChart { private trace: SpSystemTrace; @@ -182,7 +182,6 @@ export class SpFreqChart { this.trace.rowsEL?.appendChild(cpuFreqLimitRow); } } - } export class CpuFreqRowLimit { diff --git a/ide/src/trace/component/chart/SpHiPerf.ts b/ide/src/trace/component/chart/SpHiPerf.ts index 438613c8caffce91a4783c6593e316739aad7440..97dff67205ee377c6816a8a2e236ada7f56d8767 100644 --- a/ide/src/trace/component/chart/SpHiPerf.ts +++ b/ide/src/trace/component/chart/SpHiPerf.ts @@ -63,7 +63,6 @@ export class SpHiPerf { private rowList: TraceRow[] | undefined; private eventTypeList: Array<{ id: number; report_value: string }> = []; - constructor(trace: SpSystemTrace) { this.trace = trace; } @@ -236,7 +235,7 @@ export class SpHiPerf { fold.rowHidden = !this.rowFolder.expansion; fold.folder = true; fold.name = `Event :${it.report_value}`; - fold.folderPaddingLeft = 30; + fold.folderPaddingLeft = 6; fold.favoriteChangeHandler = this.trace.favoriteChangeHandler; fold.selectChangeHandler = this.trace.selectChangeHandler; fold.supplier = () => queryHiPerfEventListData(it.id); @@ -309,7 +308,7 @@ export class SpHiPerf { row.rowHidden = !this.rowFolder.expansion; row.folder = true; row.name = `${process.processName || 'Process'} [${process.pid}]`; - row.folderPaddingLeft = 30; + row.folderPaddingLeft = 6; row.style.height = '40px'; row.favoriteChangeHandler = this.trace.favoriteChangeHandler; row.selectChangeHandler = this.trace.selectChangeHandler; @@ -347,7 +346,7 @@ export class SpHiPerf { thread.folder = false; thread.name = `${thObj.threadName || 'Thread'} [${thObj.tid}]`; thread.setAttribute('children', ''); - thread.folderPaddingLeft = 30; + thread.folderPaddingLeft = 0; thread.style.height = '40px'; thread.favoriteChangeHandler = this.trace.favoriteChangeHandler; thread.selectChangeHandler = this.trace.selectChangeHandler; @@ -376,12 +375,12 @@ export class SpHiPerf { } updateChartData() { - this.rowList?.forEach((it)=>{ + this.rowList?.forEach((it) => { it.dataList = []; it.dataList2 = []; it.dataListCache = []; it.isComplete = false; - }) + }); } hoverTip( diff --git a/ide/src/trace/component/chart/SpJsMemoryChart.ts b/ide/src/trace/component/chart/SpJsMemoryChart.ts index 12626f6c9c8a24726daa237198baab5bbaba0106..0a612cbaf05531e9c8f34745c836abaf703d0d8d 100644 --- a/ide/src/trace/component/chart/SpJsMemoryChart.ts +++ b/ide/src/trace/component/chart/SpJsMemoryChart.ts @@ -13,7 +13,7 @@ * limitations under the License. */ import { SpSystemTrace } from '../SpSystemTrace.js'; -import { queryHeapFile, queryHeapSample, queryTraceRange } from '../../database/SqlLite.js'; +import { queryHeapFile, queryTraceRange } from '../../database/SqlLite.js'; import { TraceRow } from '../trace/base/TraceRow.js'; import { info } from '../../../log/Log.js'; import { renders } from '../../database/ui-worker/ProcedureWorker.js'; @@ -23,6 +23,7 @@ import { HeapDataInterface, ParseListener } from '../../../js-heap/HeapDataInter import { LoadDatabase } from '../../../js-heap/LoadDatabase.js'; import { FileInfo } from '../../../js-heap/model/UiStruct.js'; import { HeapSnapshotRender, HeapSnapshotStruct } from '../../database/ui-worker/ProcedureWorkerHeapSnapshot.js'; + export class SpJsMemoryChart implements ParseListener { private trace: SpSystemTrace; private loadJsDatabase: LoadDatabase; @@ -35,8 +36,8 @@ export class SpJsMemoryChart implements ParseListener { if (fileModule.length > 0) { let jsHeapRow = TraceRow.skeleton(); let process = ''; - let heapFile = await queryHeapFile(); - process = heapFile[0].pid; + let heapFile = HeapDataInterface.getInstance().getFileStructs(); + process = String(heapFile[0].pid); jsHeapRow.rowId = `js-memory`; jsHeapRow.index = 0; jsHeapRow.rowType = TraceRow.ROW_TYPE_JS_MEMORY; @@ -68,7 +69,7 @@ export class SpJsMemoryChart implements ParseListener { this.trace.rowsEL?.appendChild(jsHeapRow); let file = heapFile[0]; SpJsMemoryChart.file = file; - if (file.file_name.includes('Timeline')) { + if (file.name.includes('Timeline')) { let samples = HeapDataInterface.getInstance().getSamples(file.id); let heapTimelineRow = TraceRow.skeleton(); heapTimelineRow.index = 0; @@ -76,7 +77,7 @@ export class SpJsMemoryChart implements ParseListener { heapTimelineRow.rowHidden = !jsHeapRow.expansion; heapTimelineRow.style.height = '40px'; heapTimelineRow.name = `Heaptimeline`; - heapTimelineRow.rowId = `heap_timeline` + file.id; + heapTimelineRow.rowId = `heaptimeline` + file.id; heapTimelineRow.drawType = 0; heapTimelineRow.isHover = true; heapTimelineRow.folder = false; @@ -85,7 +86,7 @@ export class SpJsMemoryChart implements ParseListener { heapTimelineRow.selectChangeHandler = this.trace.selectChangeHandler; heapTimelineRow.setAttribute('children', ''); heapTimelineRow.focusHandler = () => {}; - heapTimelineRow.supplier = () => queryHeapSample(file.id); + heapTimelineRow.supplier = () => new Promise((resolve) => resolve(samples)); heapTimelineRow.onThreadHandler = (useCache) => { let context = heapTimelineRow.collect ? this.trace.canvasFavoritePanelCtx! : this.trace.canvasPanelCtx!; heapTimelineRow.canvasSave(context); @@ -108,7 +109,7 @@ export class SpJsMemoryChart implements ParseListener { heapSnapshotRow.rowHidden = !jsHeapRow.expansion; heapSnapshotRow.style.height = '40px'; heapSnapshotRow.name = `Heapsnapshot`; - heapSnapshotRow.rowId = `heap_snapshot`; + heapSnapshotRow.rowId = `heapsnapshot`; heapSnapshotRow.isHover = true; heapSnapshotRow.folder = false; heapSnapshotRow.rowType = TraceRow.ROW_TYPE_HEAP_SNAPSHOT; @@ -116,7 +117,7 @@ export class SpJsMemoryChart implements ParseListener { heapSnapshotRow.selectChangeHandler = this.trace.selectChangeHandler; heapSnapshotRow.setAttribute('children', ''); heapSnapshotRow.focusHandler = () => {}; - heapSnapshotRow.supplier = () => queryHeapFile(); + heapSnapshotRow.supplier = () => new Promise>((resolve) => resolve(heapFile)); heapSnapshotRow.onThreadHandler = (useCache) => { let context = heapSnapshotRow.collect ? this.trace.canvasFavoritePanelCtx! : this.trace.canvasPanelCtx!; heapSnapshotRow.canvasSave(context); diff --git a/ide/src/trace/component/chart/SpNativeMemoryChart.ts b/ide/src/trace/component/chart/SpNativeMemoryChart.ts index cdfe495184a9a09dafc9d1305b505e362f7d7a57..1dfd5acad6fb1853211864136b227c81a4e60e08 100644 --- a/ide/src/trace/component/chart/SpNativeMemoryChart.ts +++ b/ide/src/trace/component/chart/SpNativeMemoryChart.ts @@ -68,7 +68,7 @@ export class SpNativeMemoryChart { nativeRow.favoriteChangeHandler = this.trace.favoriteChangeHandler; nativeRow.selectChangeHandler = this.trace.selectChangeHandler; nativeRow.onDrawTypeChangeHandler = (type) => { - nativeRow.childrenList.forEach(row => row.drawType = type); + nativeRow.childrenList.forEach((row) => (row.drawType = type)); this.trace.favoriteRowsEL?.querySelectorAll>(`trace-row[row-type='heap']`).forEach((it) => { it.drawType = type; }); diff --git a/ide/src/trace/component/chart/SpProcessChart.ts b/ide/src/trace/component/chart/SpProcessChart.ts index d24fd46e5eea73cfe280a47037f0dcda924b09e4..30322cbb819792dfc774e30b8cdcf8007e385a51 100644 --- a/ide/src/trace/component/chart/SpProcessChart.ts +++ b/ide/src/trace/component/chart/SpProcessChart.ts @@ -94,7 +94,8 @@ export class SpProcessChart { let asyncFuncGroups: Array = asyncFuncGroup[key]; if (asyncFuncGroups.length > 0) { let isIntersect = (left: any, right: any) => - Math.max(left.startTs + left.dur, right.startTs + right.dur) - Math.min(left.startTs, right.startTs) < left.dur + right.dur; + Math.max(left.startTs + left.dur, right.startTs + right.dur) - Math.min(left.startTs, right.startTs) < + left.dur + right.dur; let depths: any = []; let createDepth = (currentDepth: number, index: number) => { if (depths[currentDepth] == undefined || !isIntersect(depths[currentDepth], asyncFuncGroups[index])) { @@ -426,13 +427,15 @@ export class SpProcessChart { if (linkProcessItem[0].rowEL.collect) { linkProcessItem[0].rowEL.translateY = linkProcessItem[0].rowEL.getBoundingClientRect().top - 195; } else { - linkProcessItem[0].rowEL.translateY = linkProcessItem[0].rowEL.offsetTop - this.trace.rowsPaneEL!.scrollTop; + linkProcessItem[0].rowEL.translateY = + linkProcessItem[0].rowEL.offsetTop - this.trace.rowsPaneEL!.scrollTop; } linkProcessItem[0].y = linkProcessItem[0].rowEL!.translateY! + linkProcessItem[0].offsetY; if (linkProcessItem[1].rowEL.collect) { linkProcessItem[1].rowEL.translateY = linkProcessItem[1].rowEL.getBoundingClientRect().top - 195; } else { - linkProcessItem[1].rowEL.translateY = linkProcessItem[1].rowEL.offsetTop - this.trace.rowsPaneEL!.scrollTop; + linkProcessItem[1].rowEL.translateY = + linkProcessItem[1].rowEL.offsetTop - this.trace.rowsPaneEL!.scrollTop; } linkProcessItem[1].y = linkProcessItem[1].rowEL!.translateY! + linkProcessItem[1].offsetY; if (linkProcessItem[0].rowEL.rowParentId == e.detail.rowId) { diff --git a/ide/src/trace/component/chart/SpSdkChart.ts b/ide/src/trace/component/chart/SpSdkChart.ts index 006e951182bbef42ff7147513a16b9e8fa3b0937..b532629e6247d1fb7dd9445518814d0becbf528b 100644 --- a/ide/src/trace/component/chart/SpSdkChart.ts +++ b/ide/src/trace/component/chart/SpSdkChart.ts @@ -28,7 +28,7 @@ import { CounterStruct, SdkCounterRender } from '../../database/ui-worker/Produc import { renders } from '../../database/ui-worker/ProcedureWorker.js'; import { SdkSliceRender, SdkSliceStruct } from '../../database/ui-worker/ProduceWorkerSdkSlice.js'; import { EmptyRender } from '../../database/ui-worker/ProcedureWorkerCPU.js'; -import {TabUtil} from "../trace/sheet/sdk/TabUtil.js"; +import { TabUtil } from '../trace/sheet/sdk/TabUtil.js'; export class SpSdkChart { private trace: SpSystemTrace; diff --git a/ide/src/trace/component/setting/SpAllocations.ts b/ide/src/trace/component/setting/SpAllocations.ts index 65c8a592f081eec366dc69dbb383ad19e77a4a8f..e8566cd54afcfd31bf52f2bbcc079bb2b629a59d 100644 --- a/ide/src/trace/component/setting/SpAllocations.ts +++ b/ide/src/trace/component/setting/SpAllocations.ts @@ -234,10 +234,7 @@ export class SpAllocations extends BaseElement { return; } let memorySize = Number(intervalResultInput.value); - if ( - memorySize < statisticsSlider!.sliderStyle.minRange || - memorySize > statisticsSlider!.sliderStyle.maxRange - ) { + if (memorySize < statisticsSlider!.sliderStyle.minRange || memorySize > statisticsSlider!.sliderStyle.maxRange) { intervalResultInput.style.color = 'red'; parentElement.setAttribute('percent', '3600'); } else { diff --git a/ide/src/trace/component/setting/SpFileSystem.ts b/ide/src/trace/component/setting/SpFileSystem.ts index 6ad2b7c488c2c462aed6d7825a5b80dfe3dd87e6..7a3cfef2b268f3faa6de8505361218d198a61fb6 100644 --- a/ide/src/trace/component/setting/SpFileSystem.ts +++ b/ide/src/trace/component/setting/SpFileSystem.ts @@ -280,7 +280,7 @@ export class SpFileSystem extends BaseElement { HdcDeviceManager.shellResultAsString(CmdConstant.CMD_GET_PROCESS, false).then((res) => { fileSystemProcessData = []; if (res) { - let fileSystemValues: string[] = res.replace(/\r\n/g, '\r').replace(/\n/g, '\r').split(/\r/); + let fileSystemValues: string[] = res.replace(/\r\n/g, '\r').replace(/\n/g, '\r').split(/\r/); for (let lineVal of fileSystemValues) { if (lineVal.indexOf('__progname') != -1 || lineVal.indexOf('PID CMD') != -1) { continue; diff --git a/ide/src/trace/component/setting/SpHisysEvent.ts b/ide/src/trace/component/setting/SpHisysEvent.ts index e558aa1b846d1b8f4298876b54e579c65bfafd0b..c0105ca32dc00309fc2e1d4e748d55c6e671f516 100644 --- a/ide/src/trace/component/setting/SpHisysEvent.ts +++ b/ide/src/trace/component/setting/SpHisysEvent.ts @@ -106,7 +106,9 @@ export class SpHisysEvent extends BaseElement { } hisysEventConfigList!.appendChild(hisysEventDiv); }); - this.eventProcessInput = this.shadowRoot?.querySelector("lit-allocation-select[title='AppName']"); + this.eventProcessInput = this.shadowRoot?.querySelector( + "lit-allocation-select[title='AppName']" + ); let hisyEventProcessInput = this.eventProcessInput?.shadowRoot?.querySelector('.multipleSelect') as HTMLDivElement; this.selectProcess = this.eventProcessInput!.shadowRoot?.querySelector('input') as HTMLInputElement; let hisysEventProcessData: Array = []; diff --git a/ide/src/trace/component/setting/SpVmTracker.ts b/ide/src/trace/component/setting/SpVmTracker.ts index 5f5b7e384436e6e79ada8bb259225b8b4b17857d..ef099a96a80929cb89a8d51a5dd3a95f9d081b9e 100644 --- a/ide/src/trace/component/setting/SpVmTracker.ts +++ b/ide/src/trace/component/setting/SpVmTracker.ts @@ -111,7 +111,9 @@ export class SpVmTracker extends BaseElement { } configList!.appendChild(vmTrackerDiv); }); - this.vmTrackerProcessInput = this.shadowRoot?.querySelector("lit-allocation-select[title='Process']"); + this.vmTrackerProcessInput = this.shadowRoot?.querySelector( + "lit-allocation-select[title='Process']" + ); let vmTrackerMul = this.vmTrackerProcessInput?.shadowRoot?.querySelector('.multipleSelect') as HTMLDivElement; this.vmTrackerSelectProcess = this.vmTrackerProcessInput!.shadowRoot?.querySelector('input') as HTMLInputElement; let processData: Array = []; diff --git a/ide/src/trace/component/setting/utils/PluginConvertUtils.ts b/ide/src/trace/component/setting/utils/PluginConvertUtils.ts index a1ae9b3b55352d94ff2b2dd38e84c5b1bc3cc04e..4ec9edc8b3d7d8571a61d296919c111a14b65629 100644 --- a/ide/src/trace/component/setting/utils/PluginConvertUtils.ts +++ b/ide/src/trace/component/setting/utils/PluginConvertUtils.ts @@ -223,12 +223,20 @@ export class PluginConvertUtils { return humpString.replace(/[A-Z]/g, (value) => '_' + value.toLowerCase()); } - private static getMontageStrings(prefixText: string, spacesNumber: number, indentation: number, key: string, value: any): string{ - return prefixText + - ' '.repeat(spacesNumber).repeat(indentation + 1) + - this.humpToSnake(key) + - ': ' + - value.toString() + - this.crlf; + private static getMontageStrings( + prefixText: string, + spacesNumber: number, + indentation: number, + key: string, + value: any + ): string { + return ( + prefixText + + ' '.repeat(spacesNumber).repeat(indentation + 1) + + this.humpToSnake(key) + + ': ' + + value.toString() + + this.crlf + ); } } diff --git a/ide/src/trace/component/trace/TimerShaftElement.ts b/ide/src/trace/component/trace/TimerShaftElement.ts index 1f9744c860142f31e213c4bd082e71106c788a6e..83b01e80f53ec213adcd9bd7285b5cf2331f4917 100644 --- a/ide/src/trace/component/trace/TimerShaftElement.ts +++ b/ide/src/trace/component/trace/TimerShaftElement.ts @@ -100,7 +100,7 @@ export class TimerShaftElement extends BaseElement { private _totalNS: number = 10_000_000_000; private _startNS: number = 0; private _endNS: number = 10_000_000_000; - + get sportRuler(): SportRuler | undefined { return this._sportRuler; } @@ -379,6 +379,7 @@ export class TimerShaftElement extends BaseElement { this._sportRuler?.setSlicesMark(startTime, endTime); } + displayCollect(showCollect: boolean) { if (showCollect) { this.collecBtn!.style.display = 'flex'; diff --git a/ide/src/trace/component/trace/base/Extension.ts b/ide/src/trace/component/trace/base/Extension.ts index c5eb55e619c0bfa732097013d331b0cf1077c54f..910b984d7b51906cbb2b58b9c85ba1121946aa25 100644 --- a/ide/src/trace/component/trace/base/Extension.ts +++ b/ide/src/trace/component/trace/base/Extension.ts @@ -98,7 +98,7 @@ window.SmartEvent = { UploadSOFile: 'SmartEvent-UI-UploadSoFile', Loading: 'SmartEvent-UI-Loading', Error: 'SmartEvent-UI-Error', - CheckALL: 'SmartEvent-UI-CheckALL' + CheckALL: 'SmartEvent-UI-CheckALL', }, }; Window.prototype.subscribe = (ev, fn) => EventCenter.subscribe(ev, fn); diff --git a/ide/src/trace/component/trace/base/RangeSelect.ts b/ide/src/trace/component/trace/base/RangeSelect.ts index cd7833e530aa44e868945d127561e39c22282724..fb9c98d80849f932811f66ef25891418ebc78562 100644 --- a/ide/src/trace/component/trace/base/RangeSelect.ts +++ b/ide/src/trace/component/trace/base/RangeSelect.ts @@ -90,7 +90,7 @@ export class RangeSelect { this.endY = 0; this.endY2 = mouseEventUp.pageY - this.spacerEL!.getBoundingClientRect().top - this.rowsPaneEL!.scrollTop; } else { - this.endY = mouseEventUp.pageY - this.rowsEL!.getBoundingClientRect().top + this.spacerEL.getBoundingClientRect().height; + this.endY = mouseEventUp.pageY - this.rowsEL!.getBoundingClientRect().top + this.spacerEL.getBoundingClientRect().height; this.endY2 = mouseEventUp.pageY - this.spacerEL!.getBoundingClientRect().top - this.rowsPaneEL!.scrollTop; } if (this.selectHandler) { @@ -125,7 +125,7 @@ export class RangeSelect { this.endY = 0; this.endY2 = mouseEventOut.pageY - this.spacerEL!.getBoundingClientRect().top - this.rowsPaneEL!.scrollTop; } else { - this.endY = mouseEventOut.pageY - this.rowsEL!.getBoundingClientRect().top + this.spacerEL.getBoundingClientRect().height; + this.endY = mouseEventOut.pageY - this.rowsEL!.getBoundingClientRect().top + this.spacerEL.getBoundingClientRect().height; this.endY2 = mouseEventOut.pageY - this.spacerEL!.getBoundingClientRect().top - this.rowsPaneEL!.scrollTop; } if (this.selectHandler && this.isMouseDown) { @@ -232,7 +232,7 @@ export class RangeSelect { rt = new Rect(xMin, Math.min(this.startY2, this.endY2), xMax - xMin, Math.abs(this.startY2 - this.endY2)); } else { bound = it.getBoundingClientRect(); - if (spacerRect.height > 0 && bound.y + bound.height < spacerRect.y + spacerRect.height) { + if (spacerRect.height > 0 && bound.y + bound.height < spacerRect.y + spacerRect.height) { it.rangeSelect = false; return false; } @@ -267,9 +267,9 @@ export class RangeSelect { this.timerShaftEL!.sportRuler!.draw(); } - static SetNS(row: TraceRow, num: number): number{ + static SetNS(row: TraceRow, num: number): number { return Math.floor( - ((TraceRow.range!.endNS - TraceRow.range!.startNS) * num) / row.frame.width + TraceRow.range!.startNS! + ((TraceRow.range!.endNS - TraceRow.range!.startNS) * num) / row.frame.width + TraceRow.range!.startNS! ); } } diff --git a/ide/src/trace/component/trace/base/TraceRow.ts b/ide/src/trace/component/trace/base/TraceRow.ts index 8ab8ad4b5364b50654538f8f32d56636119e0020..223600a87ffbc12e6ee00598aab098fe233a3aee 100644 --- a/ide/src/trace/component/trace/base/TraceRow.ts +++ b/ide/src/trace/component/trace/base/TraceRow.ts @@ -287,24 +287,27 @@ export class TraceRow extends HTMLElement { if (value === this.expansion) { return; } + let fragment: DocumentFragment | undefined = document.createDocumentFragment(); if (value) { - let fragment = document.createDocumentFragment(); this.childrenList.forEach((child: any) => { child.rowHidden = false; - fragment.appendChild(child); + fragment!.appendChild(child); }); this.insertAfter(fragment, this); } else { - let fragment = document.createDocumentFragment(); this.childrenList.length = 0; this.parentElement?.querySelectorAll(`[row-parent-id='${this.rowId!}']`).forEach((it) => { this.childrenList.push(it); if (it.folder) { it.expansion = value; } - fragment.appendChild(it); + fragment!.appendChild(it); + }); + this.childrenList.forEach(child => { + fragment!.removeChild(child); }); } + fragment = undefined; if (value) { this.setAttribute('expansion', ''); } else { @@ -322,11 +325,28 @@ export class TraceRow extends HTMLElement { ); } - addTemplateTypes(...type:string[]) { + clearMemory() { + this.dataList2 = []; + this.dataList = []; + this.dataListCache = []; + if (this.rootEL) { + this.rootEL.innerHTML = '' + } + if (this.folder) { + this.childrenList.forEach(child => { + if (child.clearMemory !== undefined) { + child.clearMemory(); + } + }) + this.childrenList = []; + } + } + + addTemplateTypes(...type: string[]) { this.templateType.push(...type); } - replaceTraceRow(newNode:any, oldNode:any) { + replaceTraceRow(newNode: any, oldNode: any) { let oldIndex = this.childrenList.indexOf(oldNode); if (oldIndex != -1) { this.childrenList.splice(oldIndex, 1, newNode); @@ -341,7 +361,7 @@ export class TraceRow extends HTMLElement { this.toParentAddTemplateType(parentRow); } } - } + }; addChildTraceRow(child: TraceRow) { TraceRowConfig.allTraceRowList.push(child); @@ -386,7 +406,7 @@ export class TraceRow extends HTMLElement { get frame(): Rect | any { if (this._frame) { - this._frame.width = TraceRow.FRAME_WIDTH; + this._frame.width = TraceRow.FRAME_WIDTH this._frame.height = this.clientHeight; return this._frame; } else { @@ -431,7 +451,7 @@ export class TraceRow extends HTMLElement { return; } if (this.folder) { - this.childrenList.forEach(it => it.checkType = value) + this.childrenList.forEach((it) => (it.checkType = value)); } this.setAttribute('check-type', value); if (this.hasAttribute('disabled-check')) { @@ -712,9 +732,9 @@ export class TraceRow extends HTMLElement { setCheckBox(isCheck: boolean) { if (this.folder) { // favorite row check change; - window.publish(window.SmartEvent.UI.CheckALL,{ + window.publish(window.SmartEvent.UI.CheckALL, { rowId: this.rowId, - isCheck: isCheck + isCheck: isCheck, }); this.childrenList!.forEach((ck) => { ck.setAttribute('check-type', isCheck ? '2' : '0'); @@ -1097,7 +1117,7 @@ export class TraceRow extends HTMLElement { grid-template-rows: 100%; grid-template-columns: 248px 1fr; border-bottom: 1px solid var(--dark-border1,#dadada); - border-right: 15px solid var(--dark-border1,#ffffff); + border-right: 1px solid var(--dark-border1,#ffffff); box-sizing: border-box; } .root .drag{ @@ -1136,7 +1156,7 @@ export class TraceRow extends HTMLElement { margin-left: 10px; font-size: .9rem; font-weight: normal; - width: 80%; + flex: 1; max-height: 100%; text-align: left; overflow: hidden; @@ -1173,7 +1193,7 @@ export class TraceRow extends HTMLElement { display: none; } :host(:not([folder])[children]) .icon{ - visibility: hidden; + display: none; color:#fff } diff --git a/ide/src/trace/component/trace/base/TraceRowConfig.ts b/ide/src/trace/component/trace/base/TraceRowConfig.ts index 5717e24ad650610eee707f4b965b2de0d1240873..404c637cb863be14555603b3c49183b61740849f 100644 --- a/ide/src/trace/component/trace/base/TraceRowConfig.ts +++ b/ide/src/trace/component/trace/base/TraceRowConfig.ts @@ -112,7 +112,7 @@ export class TraceRowConfig extends BaseElement { optionCheckBox.title = templateType; optionCheckBox.setAttribute('search_text', row.name); optionCheckBox.addEventListener('change', (e) => { - TraceRowConfig.allTraceRowList.forEach(chartRow => { + TraceRowConfig.allTraceRowList.forEach((chartRow) => { let upParentRow = getUpParentRow(chartRow); if (upParentRow == row) { if (optionCheckBox.checked) { @@ -134,7 +134,7 @@ export class TraceRowConfig extends BaseElement { getUpParentRow(newTraceRow); } return newTraceRow; - } + }; this.chartTable!.append(...[div, optionCheckBox]); } diff --git a/ide/src/trace/component/trace/base/TraceSheet.ts b/ide/src/trace/component/trace/base/TraceSheet.ts index 9de7f5295e4dd61f92399fa5ccacf82321f8f29c..7c1306ac196e9517c8bf8f8227280553ab0be23d 100644 --- a/ide/src/trace/component/trace/base/TraceSheet.ts +++ b/ide/src/trace/component/trace/base/TraceSheet.ts @@ -356,7 +356,7 @@ export class TraceSheet extends BaseElement { val.nativeMemoryStatistic.push(rowType); val.nativeMemory = []; val.leftNs = data.startTime!; - val.rightNs = data.startTime! + data.dur! -1; + val.rightNs = data.startTime! + data.dur! - 1; this.selection = val; this.displayTab('box-native-statistic-analysis', 'box-native-calltree').data = val; this.showUploadSoBt(val); @@ -426,7 +426,7 @@ export class TraceSheet extends BaseElement { }); if (restore) { if (this.litTabs?.activekey) { - this.loadTabPaneData(this.litTabs?.activekey) + this.loadTabPaneData(this.litTabs?.activekey); this.setAttribute('mode', 'max'); return true; } else { @@ -447,7 +447,7 @@ export class TraceSheet extends BaseElement { } } - updateRangeSelect() : boolean { + updateRangeSelect(): boolean { if ( this.selection && (this.selection.nativeMemory.length > 0 || @@ -462,7 +462,7 @@ export class TraceSheet extends BaseElement { ) { let param: SelectionParam = new SelectionParam(); Object.assign(param, this.selection); - this.rangeSelect(param,true); + this.rangeSelect(param, true); return true; } else { return false; @@ -471,18 +471,16 @@ export class TraceSheet extends BaseElement { showUploadSoBt(selection: SelectionParam | null | undefined) { if ( - selection && - ( - selection.nativeMemory.length > 0 || - selection.nativeMemoryStatistic.length > 0 || - selection.perfSampleIds.length > 0 || - selection.fileSystemType.length > 0 || - selection.fsCount > 0 || - selection.fileSysVirtualMemory || - selection.vmCount > 0 || - selection.diskIOLatency || - selection.diskIOipids.length > 0 - ) + selection && + (selection.nativeMemory.length > 0 || + selection.nativeMemoryStatistic.length > 0 || + selection.perfSampleIds.length > 0 || + selection.fileSystemType.length > 0 || + selection.fsCount > 0 || + selection.fileSysVirtualMemory || + selection.vmCount > 0 || + selection.diskIOLatency || + selection.diskIOipids.length > 0) ) { this.importDiv!.style.display = 'flex'; } else { @@ -517,4 +515,18 @@ export class TraceSheet extends BaseElement { param.processId = e.detail.processId; (pane.children.item(0) as TabPaneBoxChild).data = param; } + + clearMemory() { + let allTabs = Array.from(this.shadowRoot?.querySelectorAll('#tabs lit-tabpane').values() || []); + allTabs.forEach( tab => { + if (tab) { + let tables = Array.from( + (tab.firstChild as BaseElement).shadowRoot?.querySelectorAll('lit-table') || [] + ); + for (let table of tables) { + table.recycleDataSource = []; + } + } + }); + } } diff --git a/ide/src/trace/component/trace/base/Utils.ts b/ide/src/trace/component/trace/base/Utils.ts index 3f4c4021410c89a594796a499cd78692a3f75fec..b902b75a5ac21ff69e47778dbcc9612be04b69a8 100644 --- a/ide/src/trace/component/trace/base/Utils.ts +++ b/ide/src/trace/component/trace/base/Utils.ts @@ -61,6 +61,12 @@ export class Utils { return Utils.instance; } + public static clearData() { + Utils.THREAD_MAP.clear(); + Utils.PROCESS_MAP.clear(); + Utils.SCHED_SLICE_MAP.clear(); + } + public static getEndState(state: string): string { if (Utils.getInstance().getStatusMap().has(state)) { return Utils.getInstance().getStatusMap().get(state) || 'Unknown State'; diff --git a/ide/src/trace/component/trace/sheet/SheetUtils.ts b/ide/src/trace/component/trace/sheet/SheetUtils.ts index 818576e804c3fdd2ea2e70a00a23781463ea8e01..2dfea48f7be274058a4ec62d93c8f38275d61509 100644 --- a/ide/src/trace/component/trace/sheet/SheetUtils.ts +++ b/ide/src/trace/component/trace/sheet/SheetUtils.ts @@ -13,29 +13,35 @@ * limitations under the License. */ -import {LitTable} from "../../../../base-ui/table/lit-table.js"; +import { LitTable } from '../../../../base-ui/table/lit-table.js'; -export function resizeObserver(parentEl:HTMLElement, tableEl:LitTable, tblOffsetHeight: number = 45, loadingPage?: HTMLElement, loadingPageOffsetHeight:number = 24) { - new ResizeObserver((entries) => { - if (parentEl.clientHeight != 0) { - // @ts-ignore - tableEl?.shadowRoot.querySelector('.table').style.height = parentEl.clientHeight - tblOffsetHeight + 'px'; - tableEl?.reMeauseHeight(); - if (loadingPage) { - loadingPage.style.height = parentEl.clientHeight - loadingPageOffsetHeight + 'px'; - } - } - }).observe(parentEl); +export function resizeObserver( + parentEl: HTMLElement, + tableEl: LitTable, + tblOffsetHeight: number = 45, + loadingPage?: HTMLElement, + loadingPageOffsetHeight: number = 24 +) { + new ResizeObserver((entries) => { + if (parentEl.clientHeight != 0) { + // @ts-ignore + tableEl?.shadowRoot.querySelector('.table').style.height = parentEl.clientHeight - tblOffsetHeight + 'px'; + tableEl?.reMeauseHeight(); + if (loadingPage) { + loadingPage.style.height = parentEl.clientHeight - loadingPageOffsetHeight + 'px'; + } + } + }).observe(parentEl); } -export function showButtonMenu(filter: any, isShow: boolean){ - if (isShow) { - filter.setAttribute('tree', ''); - filter.setAttribute('input', ''); - filter.setAttribute('inputLeftText', ''); - } else { - filter.removeAttribute('tree'); - filter.removeAttribute('input'); - filter.removeAttribute('inputLeftText'); - } -} \ No newline at end of file +export function showButtonMenu(filter: any, isShow: boolean) { + if (isShow) { + filter.setAttribute('tree', ''); + filter.setAttribute('input', ''); + filter.setAttribute('inputLeftText', ''); + } else { + filter.removeAttribute('tree'); + filter.removeAttribute('input'); + filter.removeAttribute('inputLeftText'); + } +} diff --git a/ide/src/trace/component/trace/sheet/TabPaneCurrentSelection.ts b/ide/src/trace/component/trace/sheet/TabPaneCurrentSelection.ts index 04196871d9fe9722abecf1a673f2d09884b0f155..4d1764970b8f4bf08cc6e9d5a3630d75b6b45659 100644 --- a/ide/src/trace/component/trace/sheet/TabPaneCurrentSelection.ts +++ b/ide/src/trace/component/trace/sheet/TabPaneCurrentSelection.ts @@ -89,6 +89,7 @@ export class TabPaneCurrentSelection extends BaseElement { weakUpBean: WakeupBean | null | undefined; private currentSelectionTbl: LitTable | null | undefined; private tableObserver: MutationObserver | undefined; + private scrollView: HTMLDivElement | null | undefined; // @ts-ignore private dpr: any = window.devicePixelRatio || window.webkitDevicePixelRatio || window.mozDevicePixelRatio || 1; @@ -101,6 +102,7 @@ export class TabPaneCurrentSelection extends BaseElement { callback: ((data: WakeupBean | null) => void) | undefined = undefined, scrollCallback?: (data: CpuStruct) => void ) { + this.setTableHeight('300px'); let leftTitle: HTMLElement | null | undefined = this?.shadowRoot?.querySelector('#leftTitle'); if (leftTitle) { leftTitle.innerText = 'Slice Details'; @@ -201,6 +203,7 @@ export class TabPaneCurrentSelection extends BaseElement { let isBinder = FuncStruct.isBinder(data); let isAsyncBinder = isBinder && FuncStruct.isBinderAsync(data); if (data.argsetid != undefined && data.argsetid != null) { + this.setTableHeight('550px'); if (isAsyncBinder) { Promise.all([ queryBinderByArgsId(data.argsetid!, data.startTs!, !data.funName!.endsWith('rcv')), @@ -310,6 +313,7 @@ export class TabPaneCurrentSelection extends BaseElement { }); } } else { + this.setTableHeight('auto'); list.push({ name: 'Name', value: name }); list.push({ name: 'StartTime', @@ -324,7 +328,7 @@ export class TabPaneCurrentSelection extends BaseElement { } } - private tabCurrentSelectionInit(leftTitleStr:string) { + private tabCurrentSelectionInit(leftTitleStr: string) { this.initCanvas(); let leftTitle: HTMLElement | null | undefined = this?.shadowRoot?.querySelector('#leftTitle'); let rightTitle: HTMLElement | null | undefined = this?.shadowRoot?.querySelector('#rightTitle'); @@ -337,6 +341,7 @@ export class TabPaneCurrentSelection extends BaseElement { } setClockData(data: ClockStruct) { + this.setTableHeight('auto'); //时钟信息 this.tabCurrentSelectionInit('Counter Details'); let list: any[] = []; @@ -348,12 +353,12 @@ export class TabPaneCurrentSelection extends BaseElement { name: 'Value', value: ColorUtils.formatNumberComma(data.value || 0), }); - // list.push({name: 'Delta', value: ColorUtils.formatNumberComma(data.delta||0)}) list.push({ name: 'Duration', value: getTimeString(data.dur || 0) }); this.currentSelectionTbl!.dataSource = list; } setMemData(data: ProcessMemStruct) { + this.setTableHeight('auto'); //时钟信息 this.initCanvas(); let leftTitle: HTMLElement | null | undefined = this?.shadowRoot?.querySelector('#leftTitle'); @@ -375,6 +380,7 @@ export class TabPaneCurrentSelection extends BaseElement { } setIrqData(data: IrqStruct) { + this.setTableHeight('300px'); this.initCanvas(); let rightTitle: HTMLElement | null | undefined = this?.shadowRoot?.querySelector('#rightTitle'); if (rightTitle) { @@ -407,6 +413,7 @@ export class TabPaneCurrentSelection extends BaseElement { scrollWakeUp: (d: any) => void | undefined ) { //线程信息 + this.setTableHeight('350px'); this.initCanvas(); let leftTitle: HTMLElement | null | undefined = this?.shadowRoot?.querySelector('#leftTitle'); let rightTitle: HTMLElement | null | undefined = this?.shadowRoot?.querySelector('#rightTitle'); @@ -532,6 +539,7 @@ export class TabPaneCurrentSelection extends BaseElement { scrollCallback: ((d: any) => void) | undefined ) { //线程信息 + this.setTableHeight('550px'); this.tabCurrentSelectionInit('Slice Details'); let list: any[] = []; list.push({ name: 'Name', value: data.name }); @@ -750,7 +758,16 @@ export class TabPaneCurrentSelection extends BaseElement { } } - private addJankScrollCallBackEvent(scrollCallback: ((d: any) => void) | undefined, callback: ((data: Array) => void) | undefined, jankJumperList: JankTreeNode[]) { + private setTableHeight(height: string) { + this.scrollView!.scrollTop = 0; + this.currentSelectionTbl!.style.height = height; + } + + private addJankScrollCallBackEvent( + scrollCallback: ((d: any) => void) | undefined, + callback: ((data: Array) => void) | undefined, + jankJumperList: JankTreeNode[] + ) { let all = this.currentSelectionTbl?.shadowRoot?.querySelectorAll(`.jank_cla`); all!.forEach((a) => { a.addEventListener('click', () => { @@ -932,8 +949,8 @@ export class TabPaneCurrentSelection extends BaseElement { initElements(): void { this.currentSelectionTbl = this.shadowRoot?.querySelector('#selectionTbl'); + this.scrollView = this.shadowRoot?.querySelector('#scroll_view'); this.currentSelectionTbl?.addEventListener('column-click', (ev: any) => {}); - this.addTableObserver(); } addTableObserver() { @@ -964,38 +981,40 @@ export class TabPaneCurrentSelection extends BaseElement { } .scroll-area{ display: flex; - height: auto; - overflow-y: auto; + flex-direction: row; + flex: 1; } .table-left{ width: 50%; + height: 500px; padding: 0 10px; } .table-right{ width: 50%; } -
-
-

-

Scheduling Latency

+
+
+
+

+

Scheduling Latency

+
-
- + - -
+
+
`; } } diff --git a/ide/src/trace/component/trace/sheet/TabPaneFilter.ts b/ide/src/trace/component/trace/sheet/TabPaneFilter.ts index 2fff2c4f7712dfda34275691d8d4744266a630ea..d4227f2c0cae5e46654164b739e3f6d5b0e7964b 100644 --- a/ide/src/trace/component/trace/sheet/TabPaneFilter.ts +++ b/ide/src/trace/component/trace/sheet/TabPaneFilter.ts @@ -793,7 +793,7 @@ export class TabPaneFilter extends BaseElement { display: flex; } - + Input Filter diff --git a/ide/src/trace/component/trace/sheet/ability/TabPaneCpuAbility.ts b/ide/src/trace/component/trace/sheet/ability/TabPaneCpuAbility.ts index 784cd302cf7ef67c31dc5e8057df537423c27a8e..2bd4dbba4e7a737c208d1dbb34cb44be7828351a 100644 --- a/ide/src/trace/component/trace/sheet/ability/TabPaneCpuAbility.ts +++ b/ide/src/trace/component/trace/sheet/ability/TabPaneCpuAbility.ts @@ -21,7 +21,7 @@ import { SystemCpuSummary } from '../../../../bean/AbilityMonitor.js'; import { Utils } from '../../base/Utils.js'; import { ColorUtils } from '../../base/ColorUtils.js'; import { log } from '../../../../../log/Log.js'; -import { resizeObserver } from "../SheetUtils.js"; +import { resizeObserver } from '../SheetUtils.js'; @element('tabpane-cpu-ability') export class TabPaneCpuAbility extends BaseElement { @@ -46,7 +46,7 @@ export class TabPaneCpuAbility extends BaseElement { connectedCallback() { super.connectedCallback(); - resizeObserver(this.parentElement!, this.cpuAbilityTbl!) + resizeObserver(this.parentElement!, this.cpuAbilityTbl!); } filterData() { @@ -141,13 +141,21 @@ export class TabPaneCpuAbility extends BaseElement { // @ts-ignore return sort === 2 ? parseFloat(cpuAbilityRightData[property]) - parseFloat(cpuAbilityLeftData[property]) : parseFloat(cpuAbilityLeftData[property]) - parseFloat(cpuAbilityRightData[property]); } else if (type === 'durationStr') { - return sort === 2 ? cpuAbilityRightData.duration - cpuAbilityLeftData.duration : cpuAbilityLeftData.duration - cpuAbilityRightData.duration; + return sort === 2 + ? cpuAbilityRightData.duration - cpuAbilityLeftData.duration + : cpuAbilityLeftData.duration - cpuAbilityRightData.duration; } else if (type === 'totalLoadStr') { - return sort === 2 ? cpuAbilityRightData.totalLoad - cpuAbilityLeftData.totalLoad : cpuAbilityLeftData.totalLoad - cpuAbilityRightData.totalLoad; + return sort === 2 + ? cpuAbilityRightData.totalLoad - cpuAbilityLeftData.totalLoad + : cpuAbilityLeftData.totalLoad - cpuAbilityRightData.totalLoad; } else if (type === 'userLoadStr') { - return sort === 2 ? cpuAbilityRightData.userLoad - cpuAbilityLeftData.userLoad : cpuAbilityLeftData.userLoad - cpuAbilityRightData.userLoad; + return sort === 2 + ? cpuAbilityRightData.userLoad - cpuAbilityLeftData.userLoad + : cpuAbilityLeftData.userLoad - cpuAbilityRightData.userLoad; } else if (type === 'systemLoadStr') { - return sort === 2 ? cpuAbilityRightData.systemLoad - cpuAbilityLeftData.systemLoad : cpuAbilityLeftData.systemLoad - cpuAbilityRightData.systemLoad; + return sort === 2 + ? cpuAbilityRightData.systemLoad - cpuAbilityLeftData.systemLoad + : cpuAbilityLeftData.systemLoad - cpuAbilityRightData.systemLoad; } else { // @ts-ignore if (cpuAbilityRightData[property] > cpuAbilityLeftData[property]) { diff --git a/ide/src/trace/component/trace/sheet/ability/TabPaneDiskAbility.ts b/ide/src/trace/component/trace/sheet/ability/TabPaneDiskAbility.ts index 6fc7de24341514a3ab11cffd73b2246d3596d497..3882a5ad7ed688052c7027193f8935ea70a672b9 100644 --- a/ide/src/trace/component/trace/sheet/ability/TabPaneDiskAbility.ts +++ b/ide/src/trace/component/trace/sheet/ability/TabPaneDiskAbility.ts @@ -21,7 +21,7 @@ import { SystemDiskIOSummary } from '../../../../bean/AbilityMonitor.js'; import { Utils } from '../../base/Utils.js'; import { ColorUtils } from '../../base/ColorUtils.js'; import { log } from '../../../../../log/Log.js'; -import { resizeObserver } from "../SheetUtils.js"; +import { resizeObserver } from '../SheetUtils.js'; @element('tabpane-disk-ability') export class TabPaneDiskAbility extends BaseElement { @@ -46,7 +46,7 @@ export class TabPaneDiskAbility extends BaseElement { connectedCallback() { super.connectedCallback(); - resizeObserver(this.parentElement!, this.diskAbilityTbl!) + resizeObserver(this.parentElement!, this.diskAbilityTbl!); } filterData() { @@ -156,23 +156,41 @@ export class TabPaneDiskAbility extends BaseElement { // @ts-ignore return sort === 2 ? parseFloat(diskAbilityRightData[property]) - parseFloat(diskAbilityLeftData[property]) : parseFloat(diskAbilityLeftData[property]) - parseFloat(diskAbilityRightData[property]); } else if (type === 'durationStr') { - return sort === 2 ? diskAbilityRightData.duration - diskAbilityLeftData.duration : diskAbilityLeftData.duration - diskAbilityRightData.duration; + return sort === 2 + ? diskAbilityRightData.duration - diskAbilityLeftData.duration + : diskAbilityLeftData.duration - diskAbilityRightData.duration; } else if (type === 'dataReadStr') { - return sort === 2 ? diskAbilityRightData.dataRead - diskAbilityLeftData.dataRead : diskAbilityLeftData.dataRead - diskAbilityRightData.dataRead; + return sort === 2 + ? diskAbilityRightData.dataRead - diskAbilityLeftData.dataRead + : diskAbilityLeftData.dataRead - diskAbilityRightData.dataRead; } else if (type === 'dataReadSecStr') { - return sort === 2 ? diskAbilityRightData.dataReadSec - diskAbilityLeftData.dataReadSec : diskAbilityLeftData.dataReadSec - diskAbilityRightData.dataReadSec; + return sort === 2 + ? diskAbilityRightData.dataReadSec - diskAbilityLeftData.dataReadSec + : diskAbilityLeftData.dataReadSec - diskAbilityRightData.dataReadSec; } else if (type === 'dataWriteStr') { - return sort === 2 ? diskAbilityRightData.dataWrite - diskAbilityLeftData.dataWrite : diskAbilityLeftData.dataWrite - diskAbilityRightData.dataWrite; + return sort === 2 + ? diskAbilityRightData.dataWrite - diskAbilityLeftData.dataWrite + : diskAbilityLeftData.dataWrite - diskAbilityRightData.dataWrite; } else if (type === 'dataWriteSecStr') { - return sort === 2 ? diskAbilityRightData.dataWriteSec - diskAbilityLeftData.dataWriteSec : diskAbilityLeftData.dataWriteSec - diskAbilityRightData.dataWriteSec; + return sort === 2 + ? diskAbilityRightData.dataWriteSec - diskAbilityLeftData.dataWriteSec + : diskAbilityLeftData.dataWriteSec - diskAbilityRightData.dataWriteSec; } else if (type === 'readsInStr') { - return sort === 2 ? diskAbilityRightData.readsIn - diskAbilityLeftData.readsIn : diskAbilityLeftData.readsIn - diskAbilityRightData.readsIn; + return sort === 2 + ? diskAbilityRightData.readsIn - diskAbilityLeftData.readsIn + : diskAbilityLeftData.readsIn - diskAbilityRightData.readsIn; } else if (type === 'readsInSecStr') { - return sort === 2 ? diskAbilityRightData.readsInSec - diskAbilityLeftData.readsInSec : diskAbilityLeftData.readsInSec - diskAbilityRightData.readsInSec; + return sort === 2 + ? diskAbilityRightData.readsInSec - diskAbilityLeftData.readsInSec + : diskAbilityLeftData.readsInSec - diskAbilityRightData.readsInSec; } else if (type === 'writeOutStr') { - return sort === 2 ? diskAbilityRightData.writeOut - diskAbilityLeftData.writeOut : diskAbilityLeftData.writeOut - diskAbilityRightData.writeOut; + return sort === 2 + ? diskAbilityRightData.writeOut - diskAbilityLeftData.writeOut + : diskAbilityLeftData.writeOut - diskAbilityRightData.writeOut; } else if (type === 'writeOutSecStr') { - return sort === 2 ? diskAbilityRightData.writeOutSec - diskAbilityLeftData.writeOutSec : diskAbilityLeftData.writeOutSec - diskAbilityRightData.writeOutSec; + return sort === 2 + ? diskAbilityRightData.writeOutSec - diskAbilityLeftData.writeOutSec + : diskAbilityLeftData.writeOutSec - diskAbilityRightData.writeOutSec; } else { // @ts-ignore if (diskAbilityRightData[property] > diskAbilityLeftData[property]) { diff --git a/ide/src/trace/component/trace/sheet/ability/TabPaneHistoryProcesses.ts b/ide/src/trace/component/trace/sheet/ability/TabPaneHistoryProcesses.ts index 9d6241a0c67f36ba7874ddc8ddc7469c68b221a4..7bcc918449d0e5e9a3c3bd58437873bed8a141d7 100644 --- a/ide/src/trace/component/trace/sheet/ability/TabPaneHistoryProcesses.ts +++ b/ide/src/trace/component/trace/sheet/ability/TabPaneHistoryProcesses.ts @@ -20,7 +20,7 @@ import { getTabProcessHistoryData } from '../../../../database/SqlLite.js'; import { Utils } from '../../base/Utils.js'; import { ProcessHistory } from '../../../../bean/AbilityMonitor.js'; import { log } from '../../../../../log/Log.js'; -import { resizeObserver } from "../SheetUtils.js"; +import { resizeObserver } from '../SheetUtils.js'; @element('tabpane-history-processes') export class TabPaneHistoryProcesses extends BaseElement { @@ -45,7 +45,7 @@ export class TabPaneHistoryProcesses extends BaseElement { connectedCallback() { super.connectedCallback(); - resizeObserver(this.parentElement!, this.historyProcessTbl!) + resizeObserver(this.parentElement!, this.historyProcessTbl!); } filterData() { @@ -167,11 +167,17 @@ export class TabPaneHistoryProcesses extends BaseElement { // @ts-ignore return sort === 2 ? parseFloat(historyProcessRightData[property]) - parseFloat(historyProcessLeftData[property]) : parseFloat(historyProcessLeftData[property]) - parseFloat(historyProcessRightData[property]); } else if (type === 'cpuTime') { - return sort === 2 ? historyProcessRightData.cpuTimeNumber - historyProcessLeftData.cpuTimeNumber : historyProcessLeftData.cpuTimeNumber - historyProcessRightData.cpuTimeNumber; + return sort === 2 + ? historyProcessRightData.cpuTimeNumber - historyProcessLeftData.cpuTimeNumber + : historyProcessLeftData.cpuTimeNumber - historyProcessRightData.cpuTimeNumber; } else if (type === 'lastSeen') { - return sort === 2 ? historyProcessRightData.lastSeenNumber - historyProcessLeftData.lastSeenNumber : historyProcessLeftData.lastSeenNumber - historyProcessRightData.lastSeenNumber; + return sort === 2 + ? historyProcessRightData.lastSeenNumber - historyProcessLeftData.lastSeenNumber + : historyProcessLeftData.lastSeenNumber - historyProcessRightData.lastSeenNumber; } else if (type === 'firstSeen') { - return sort === 2 ? historyProcessRightData.firstSeenNumber - historyProcessLeftData.firstSeenNumber : historyProcessLeftData.firstSeenNumber - historyProcessRightData.firstSeenNumber; + return sort === 2 + ? historyProcessRightData.firstSeenNumber - historyProcessLeftData.firstSeenNumber + : historyProcessLeftData.firstSeenNumber - historyProcessRightData.firstSeenNumber; } else if (type === 'alive') { let aaaa = 0; let bbbb = 0; diff --git a/ide/src/trace/component/trace/sheet/ability/TabPaneLiveProcesses.ts b/ide/src/trace/component/trace/sheet/ability/TabPaneLiveProcesses.ts index 7e403bbd09ec45c989efd8acc2cec1ae84114f4d..03b6ebd69382041d452614cbc01cc5aa852cdde8 100644 --- a/ide/src/trace/component/trace/sheet/ability/TabPaneLiveProcesses.ts +++ b/ide/src/trace/component/trace/sheet/ability/TabPaneLiveProcesses.ts @@ -20,7 +20,7 @@ import { getTabLiveProcessData } from '../../../../database/SqlLite.js'; import { LiveProcess } from '../../../../bean/AbilityMonitor.js'; import { Utils } from '../../base/Utils.js'; import { log } from '../../../../../log/Log.js'; -import { resizeObserver } from "../SheetUtils.js"; +import { resizeObserver } from '../SheetUtils.js'; @element('tabpane-live-processes') export class TabPaneLiveProcesses extends BaseElement { @@ -45,7 +45,7 @@ export class TabPaneLiveProcesses extends BaseElement { connectedCallback() { super.connectedCallback(); - resizeObserver(this.parentElement!, this.liveProcessTbl!) + resizeObserver(this.parentElement!, this.liveProcessTbl!); } filterData() { @@ -167,9 +167,13 @@ export class TabPaneLiveProcesses extends BaseElement { // @ts-ignore return sort === 2 ? parseFloat(liveProcessRightData[property]) - parseFloat(liveProcessLeftData[property]) : parseFloat(liveProcessLeftData[property]) - parseFloat(liveProcessRightData[property]); } else if (type === 'cpuTime') { - return sort === 2 ? liveProcessRightData.cpuTimeNumber - liveProcessLeftData.cpuTimeNumber : liveProcessLeftData.cpuTimeNumber - liveProcessRightData.cpuTimeNumber; + return sort === 2 + ? liveProcessRightData.cpuTimeNumber - liveProcessLeftData.cpuTimeNumber + : liveProcessLeftData.cpuTimeNumber - liveProcessRightData.cpuTimeNumber; } else if (type === 'memory') { - return sort === 2 ? liveProcessRightData.memoryNumber - liveProcessLeftData.memoryNumber : liveProcessLeftData.memoryNumber - liveProcessRightData.memoryNumber; + return sort === 2 + ? liveProcessRightData.memoryNumber - liveProcessLeftData.memoryNumber + : liveProcessLeftData.memoryNumber - liveProcessRightData.memoryNumber; } else { // @ts-ignore if (liveProcessRightData[property] > liveProcessLeftData[property]) { diff --git a/ide/src/trace/component/trace/sheet/ability/TabPaneMemoryAbility.ts b/ide/src/trace/component/trace/sheet/ability/TabPaneMemoryAbility.ts index ef888e333d413d7e8688bc0e936a8965c81aa81e..0bd0a7ee1d62207857eda6ff098a29c200e982b1 100644 --- a/ide/src/trace/component/trace/sheet/ability/TabPaneMemoryAbility.ts +++ b/ide/src/trace/component/trace/sheet/ability/TabPaneMemoryAbility.ts @@ -20,7 +20,7 @@ import { getTabMemoryAbilityData, queryStartTime } from '../../../../database/Sq import { SystemMemorySummary } from '../../../../bean/AbilityMonitor.js'; import { Utils } from '../../base/Utils.js'; import { log } from '../../../../../log/Log.js'; -import { resizeObserver } from "../SheetUtils.js"; +import { resizeObserver } from '../SheetUtils.js'; @element('tabpane-memory-ability') export class TabPaneMemoryAbility extends BaseElement { @@ -45,7 +45,7 @@ export class TabPaneMemoryAbility extends BaseElement { connectedCallback() { super.connectedCallback(); - resizeObserver(this.parentElement!, this.memoryAbilityTbl!) + resizeObserver(this.parentElement!, this.memoryAbilityTbl!); } filterData() { @@ -236,7 +236,9 @@ export class TabPaneMemoryAbility extends BaseElement { // @ts-ignore return sort === 2 ? parseFloat(memoryAbilityRightData[property]) - parseFloat(memoryAbilityLeftData[property]) : parseFloat(memoryAbilityLeftData[property]) - parseFloat(memoryAbilityRightData[property]); } else if (type === 'durationStr') { - return sort === 2 ? memoryAbilityRightData.durationNumber - memoryAbilityLeftData.durationNumber : memoryAbilityLeftData.durationNumber - memoryAbilityRightData.durationNumber; + return sort === 2 + ? memoryAbilityRightData.durationNumber - memoryAbilityLeftData.durationNumber + : memoryAbilityLeftData.durationNumber - memoryAbilityRightData.durationNumber; } else { // @ts-ignore if (memoryAbilityRightData[property] > memoryAbilityLeftData[property]) { diff --git a/ide/src/trace/component/trace/sheet/ability/TabPaneNetworkAbility.ts b/ide/src/trace/component/trace/sheet/ability/TabPaneNetworkAbility.ts index c7bdbd7ff3419bae139137f934fe69d19e2672ca..96f4119c80c122b8828a4d6f9cfad81a94e05d08 100644 --- a/ide/src/trace/component/trace/sheet/ability/TabPaneNetworkAbility.ts +++ b/ide/src/trace/component/trace/sheet/ability/TabPaneNetworkAbility.ts @@ -21,7 +21,7 @@ import { SystemNetworkSummary } from '../../../../bean/AbilityMonitor.js'; import { Utils } from '../../base/Utils.js'; import { ColorUtils } from '../../base/ColorUtils.js'; import { log } from '../../../../../log/Log.js'; -import { resizeObserver } from "../SheetUtils.js"; +import { resizeObserver } from '../SheetUtils.js'; @element('tabpane-network-ability') export class TabPaneNetworkAbility extends BaseElement { @@ -47,7 +47,7 @@ export class TabPaneNetworkAbility extends BaseElement { connectedCallback() { super.connectedCallback(); - resizeObserver(this.parentElement!, this.networkAbilityTbl!) + resizeObserver(this.parentElement!, this.networkAbilityTbl!); } filterData() { @@ -147,23 +147,41 @@ export class TabPaneNetworkAbility extends BaseElement { // @ts-ignore return sort === 2 ? parseFloat(networkAbilityRightData[property]) - parseFloat(networkAbilityLeftData[property]) : parseFloat(networkAbilityLeftData[property]) - parseFloat(networkAbilityRightData[property]); } else if (type === 'durationStr') { - return sort === 2 ? networkAbilityRightData.duration - networkAbilityLeftData.duration : networkAbilityLeftData.duration - networkAbilityRightData.duration; + return sort === 2 + ? networkAbilityRightData.duration - networkAbilityLeftData.duration + : networkAbilityLeftData.duration - networkAbilityRightData.duration; } else if (type === 'dataReceivedStr') { - return sort === 2 ? networkAbilityRightData.dataReceived - networkAbilityLeftData.dataReceived : networkAbilityLeftData.dataReceived - networkAbilityRightData.dataReceived; + return sort === 2 + ? networkAbilityRightData.dataReceived - networkAbilityLeftData.dataReceived + : networkAbilityLeftData.dataReceived - networkAbilityRightData.dataReceived; } else if (type === 'dataReceivedSecStr') { - return sort === 2 ? networkAbilityRightData.dataReceivedSec - networkAbilityLeftData.dataReceivedSec : networkAbilityLeftData.dataReceivedSec - networkAbilityRightData.dataReceivedSec; + return sort === 2 + ? networkAbilityRightData.dataReceivedSec - networkAbilityLeftData.dataReceivedSec + : networkAbilityLeftData.dataReceivedSec - networkAbilityRightData.dataReceivedSec; } else if (type === 'dataSendStr') { - return sort === 2 ? networkAbilityRightData.dataSend - networkAbilityLeftData.dataSend : networkAbilityLeftData.dataSend - networkAbilityRightData.dataSend; + return sort === 2 + ? networkAbilityRightData.dataSend - networkAbilityLeftData.dataSend + : networkAbilityLeftData.dataSend - networkAbilityRightData.dataSend; } else if (type === 'dataSendSecStr') { - return sort === 2 ? networkAbilityRightData.dataSendSec - networkAbilityLeftData.dataSendSec : networkAbilityLeftData.dataSendSec - networkAbilityRightData.dataSendSec; + return sort === 2 + ? networkAbilityRightData.dataSendSec - networkAbilityLeftData.dataSendSec + : networkAbilityLeftData.dataSendSec - networkAbilityRightData.dataSendSec; } else if (type === 'packetsInStr') { - return sort === 2 ? networkAbilityRightData.packetsIn - networkAbilityLeftData.packetsIn : networkAbilityLeftData.packetsIn - networkAbilityRightData.packetsIn; + return sort === 2 + ? networkAbilityRightData.packetsIn - networkAbilityLeftData.packetsIn + : networkAbilityLeftData.packetsIn - networkAbilityRightData.packetsIn; } else if (type === 'packetsInSecStr') { - return sort === 2 ? networkAbilityRightData.packetsInSec - networkAbilityLeftData.packetsInSec : networkAbilityLeftData.packetsInSec - networkAbilityRightData.packetsInSec; + return sort === 2 + ? networkAbilityRightData.packetsInSec - networkAbilityLeftData.packetsInSec + : networkAbilityLeftData.packetsInSec - networkAbilityRightData.packetsInSec; } else if (type === 'packetsOutStr') { - return sort === 2 ? networkAbilityRightData.packetsOut - networkAbilityLeftData.packetsOut : networkAbilityLeftData.packetsOut - networkAbilityRightData.packetsOut; + return sort === 2 + ? networkAbilityRightData.packetsOut - networkAbilityLeftData.packetsOut + : networkAbilityLeftData.packetsOut - networkAbilityRightData.packetsOut; } else if (type === 'packetsOutSecStr') { - return sort === 2 ? networkAbilityRightData.packetsOutSec - networkAbilityLeftData.packetsOutSec : networkAbilityLeftData.packetsOutSec - networkAbilityRightData.packetsOutSec; + return sort === 2 + ? networkAbilityRightData.packetsOutSec - networkAbilityLeftData.packetsOutSec + : networkAbilityLeftData.packetsOutSec - networkAbilityRightData.packetsOutSec; } else { // @ts-ignore if (networkAbilityRightData[property] > networkAbilityLeftData[property]) { diff --git a/ide/src/trace/component/trace/sheet/clock/TabPaneClockCounter.ts b/ide/src/trace/component/trace/sheet/clock/TabPaneClockCounter.ts index c4f4d8eb692bffd5f5ee226e7ad7d3b1e6b284ff..97101bb5bec520a7104b89109cdbbf6c7acfcf65 100644 --- a/ide/src/trace/component/trace/sheet/clock/TabPaneClockCounter.ts +++ b/ide/src/trace/component/trace/sheet/clock/TabPaneClockCounter.ts @@ -16,7 +16,7 @@ import { BaseElement, element } from '../../../../../base-ui/BaseElement.js'; import { LitTable } from '../../../../../base-ui/table/lit-table.js'; import { Counter, SelectionData, SelectionParam } from '../../../../bean/BoxSelection.js'; -import { resizeObserver } from "../SheetUtils.js"; +import { resizeObserver } from '../SheetUtils.js'; @element('tabpane-clock-counter') export class TabPaneClockCounter extends BaseElement { @@ -26,9 +26,12 @@ export class TabPaneClockCounter extends BaseElement { set data(clockCounterValue: SelectionParam | any) { //@ts-ignore - this.clockCounterTbl?.shadowRoot?.querySelector('.table')?.style?.height = this.parentElement!.clientHeight - 45 + 'px'; + this.clockCounterTbl?.shadowRoot?.querySelector('.table')?.style?.height = + this.parentElement!.clientHeight - 45 + 'px'; this.clockCounterRange!.textContent = - 'Selected range: ' + parseFloat(((clockCounterValue.rightNs - clockCounterValue.leftNs) / 1000000.0).toFixed(5)) + ' ms'; + 'Selected range: ' + + parseFloat(((clockCounterValue.rightNs - clockCounterValue.leftNs) / 1000000.0).toFixed(5)) + + ' ms'; let dataSource: Array = []; let collect = clockCounterValue.clockMapData; let sumCount = 0; @@ -57,7 +60,7 @@ export class TabPaneClockCounter extends BaseElement { connectedCallback() { super.connectedCallback(); - resizeObserver(this.parentElement!, this.clockCounterTbl!) + resizeObserver(this.parentElement!, this.clockCounterTbl!); } initHtml(): string { diff --git a/ide/src/trace/component/trace/sheet/cpu/TabPaneBoxChild.ts b/ide/src/trace/component/trace/sheet/cpu/TabPaneBoxChild.ts index 64e5821205c8e85289c71e188817905373cdd97a..0c5b3f4f9a86b97fae8ece156c39c6d100ce7519 100644 --- a/ide/src/trace/component/trace/sheet/cpu/TabPaneBoxChild.ts +++ b/ide/src/trace/component/trace/sheet/cpu/TabPaneBoxChild.ts @@ -15,36 +15,31 @@ import { BaseElement, element } from '../../../../../base-ui/BaseElement.js'; import { LitTable } from '../../../../../base-ui/table/lit-table.js'; -import {BoxJumpParam, SelectionData} from '../../../../bean/BoxSelection.js'; +import { BoxJumpParam, SelectionData } from '../../../../bean/BoxSelection.js'; import { getTabBoxChildData } from '../../../../database/SqlLite.js'; import { Utils } from '../../base/Utils.js'; -import { SpSystemTrace } from '../../../SpSystemTrace.js'; import { SPTChild } from '../../../../bean/StateProcessThread.js'; -import { resizeObserver } from "../SheetUtils.js"; +import { resizeObserver } from '../SheetUtils.js'; @element('tabpane-box-child') export class TabPaneBoxChild extends BaseElement { private boxChildTbl: LitTable | null | undefined; private boxChildRange: HTMLLabelElement | null | undefined; private boxChildSource: Array = []; - private loadDataInCache: boolean = false; set data(boxChildValue: BoxJumpParam) { // @ts-ignore this.boxChildTbl?.shadowRoot?.querySelector('.table')?.style?.height = this.parentElement!.clientHeight - 45 + 'px'; this.boxChildRange!.textContent = 'Selected range: ' + parseFloat(((boxChildValue.rightNs - boxChildValue.leftNs) / 1000000.0).toFixed(5)) + ' ms'; - if (boxChildValue.state != null && boxChildValue.state != undefined && boxChildValue.processId && boxChildValue.threadId) { + if ( + boxChildValue.state != null && + boxChildValue.state != undefined && + boxChildValue.processId && + boxChildValue.threadId + ) { this.boxChildTbl!.recycleDataSource = []; - if (this.loadDataInCache) { - this.getDataByCache(boxChildValue).then((arr) => { - this.boxChildSource = arr; - // @ts-ignore - this.boxChildTbl?.recycleDataSource = arr; - }); - } else { - this.getDataByDB(boxChildValue); - } + this.getDataByDB(boxChildValue); } } @@ -59,11 +54,13 @@ export class TabPaneBoxChild extends BaseElement { connectedCallback() { super.connectedCallback(); - resizeObserver(this.parentElement!, this.boxChildTbl!) + resizeObserver(this.parentElement!, this.boxChildTbl!); } getDataByDB(val: BoxJumpParam) { + this.boxChildTbl!.loading = true; getTabBoxChildData(val.leftNs, val.rightNs, val.state, val.processId, val.threadId).then((result) => { + this.boxChildTbl!.loading = false; if (result.length != null && result.length > 0) { result.map((e) => { e.startTime = Utils.getTimeString(e.startNs); @@ -87,38 +84,6 @@ export class TabPaneBoxChild extends BaseElement { }); } - getDataByCache(val: BoxJumpParam): Promise> { - return new Promise>((resolve, reject) => { - let arr: Array = []; - SpSystemTrace.SPT_DATA.map((spt) => { - let b1 = val.state != undefined && val.state != '' ? spt.state == val.state : true; - let b2 = val.processId != undefined && val.processId != -1 ? spt.processId == val.processId : true; - let b3 = val.threadId != undefined && val.threadId != -1 ? spt.threadId == val.threadId : true; - if (!(spt.end_ts < val.leftNs || spt.start_ts > val.rightNs) && b1 && b2 && b3) { - let sptChild = new SPTChild(); - sptChild.startTime = Utils.getTimeString(spt.start_ts); - sptChild.absoluteTime = ((window as any).recordStartNS + spt.start_ts) / 1000000000; - sptChild.startNs = spt.start_ts; - sptChild.state = Utils.getEndState(spt.state)!; - sptChild.prior = spt.priority == undefined || spt.priority == null ? '-' : spt.priority + ''; - sptChild.core = spt.cpu == undefined || spt.cpu == null ? '-' : 'CPU' + spt.cpu; - sptChild.processName = - (spt.process == undefined || spt.process == null || spt.process == '' ? 'process' : spt.process) + - '(' + - spt.processId + - ')'; - sptChild.threadName = - (spt.thread == undefined || spt.thread == null || spt.thread == '' ? 'thread' : spt.thread) + - '(' + - spt.threadId + - ')'; - arr.push(sptChild); - } - }); - resolve(arr); - }); - } - initHtml(): string { return `