1/* 2 * Copyright (C) 2024 Huawei Device Co., Ltd. 3 * Licensed under the Apache License, Version 2.0 (the "License"); 4 * you may not use this file except in compliance with the License. 5 * You may obtain a copy of the License at 6 * 7 * http://www.apache.org/licenses/LICENSE-2.0 8 * 9 * Unless required by applicable law or agreed to in writing, software 10 * distributed under the License is distributed on an "AS IS" BASIS, 11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 * See the License for the specific language governing permissions and 13 * limitations under the License. 14 */ 15 16import { BaseElement, element } from '../../../../../base-ui/BaseElement'; 17import { LitTable } from '../../../../../base-ui/table/lit-table'; 18import { SelectionData, SliceBoxJumpParam } from '../../../../bean/BoxSelection'; 19import { Utils } from '../../base/Utils'; 20import { resizeObserver } from '../SheetUtils'; 21import { getTabDetails, getCatDetails } from '../../../../database/sql/Func.sql'; 22 23@element('box-slice-child') 24export class TabPaneSliceChild extends BaseElement { 25 private sliceChildTbl: LitTable | null | undefined; 26 private boxChildSource: Array<unknown> = []; 27 private sliceChildParam: SliceBoxJumpParam | null | undefined; 28 29 set data(boxChildValue: SliceBoxJumpParam) { 30 //切换Tab页 保持childTab数据不变 除非重新点击跳转 31 if (boxChildValue === this.sliceChildParam || !boxChildValue.isJumpPage) { 32 return; 33 } 34 // @ts-ignore 35 this.sliceChildParam = boxChildValue; 36 this.sliceChildTbl!.recycleDataSource = []; 37 this.getDataByDB(boxChildValue); 38 } 39 40 initElements(): void { 41 this.sliceChildTbl = this.shadowRoot?.querySelector<LitTable>('#tb-slice-child'); 42 this.sliceChildTbl!.addEventListener('column-click', (evt): void => { 43 // @ts-ignore 44 this.sortByColumn(evt.detail); 45 }); 46 //监听row的点击事件，在对应起始时间上画标记棋子 47 this.sliceChildTbl!.addEventListener('row-click', (evt): void => { 48 //@ts-ignore 49 let param = evt.detail.data; 50 param.isSelected = true; 51 this.sliceChildTbl!.clearAllSelection(param); 52 this.sliceChildTbl!.setCurrentSelection(param); 53 document.dispatchEvent( 54 new CustomEvent('triangle-flag', { 55 detail: { time: [param.startNs], type: 'triangle' }, 56 }) 57 ); 58 }); 59 } 60 61 connectedCallback(): void { 62 super.connectedCallback(); 63 resizeObserver(this.parentElement!, this.sliceChildTbl!, 25); 64 } 65 66 getDataByDB(val: SliceBoxJumpParam): void { 67 this.sliceChildTbl!.loading = true; 68 //处理异步方法 69 getTabDetails(val.name!, val.processId, val.leftNs, val.rightNs, 'async').then((res1: unknown) => {//@ts-ignore 70 //处理cat方法 71 getCatDetails(val.name!, val.asyncCatNames!, val.processId, val.leftNs, val.rightNs).then((res2) => {//@ts-ignore 72 //处理同步方法 73 getTabDetails(val.name!, val.processId, val.leftNs, val.rightNs, 'sync', val.threadId).then( 74 (res3: unknown) => {//@ts-ignore 75 let result: unknown = (res1 || []).concat(res2 || []).concat(res3 || []); 76 this.sliceChildTbl!.loading = false;//@ts-ignore 77 if (result.length !== null && result.length > 0) {//@ts-ignore 78 result.map((e: unknown) => {//@ts-ignore 79 e.startTime = Utils.getTimeString(e.startNs); 80 // @ts-ignore 81 e.absoluteTime = ((window as unknown).recordStartNS + e.startNs) / 1000000000;//@ts-ignore 82 e.duration = e.duration / 1000000;//@ts-ignore 83 e.state = Utils.getEndState(e.state)!;//@ts-ignore 84 e.processName = `${e.process === undefined || e.process === null ? 'process' : e.process}(${e.processId})`;//@ts-ignore 85 e.threadName = `${e.thread === undefined || e.thread === null ? 'thread' : e.thread}(${e.threadId})`; 86 });//@ts-ignore 87 this.boxChildSource = result; 88 if (this.sliceChildTbl) { 89 // @ts-ignore 90 this.sliceChildTbl.recycleDataSource = result; 91 } 92 } else { 93 this.boxChildSource = []; 94 if (this.sliceChildTbl) { 95 // @ts-ignore 96 this.sliceChildTbl.recycleDataSource = []; 97 } 98 } 99 } 100 ); 101 }); 102 }); 103 } 104 105 initHtml(): string { 106 return ` 107 <style> 108 :host{ 109 padding: 10px 10px; 110 display: flex; 111 flex-direction: column; 112 } 113 </style> 114 <lit-table id="tb-slice-child" style="height: auto"> 115 <lit-table-column order title="StartTime(Relative)" width="15%" data-index="startTime" key="startTime" align="flex-start" > 116 </lit-table-column> 117 <lit-table-column order title="StartTime(Absolute)" width="15%" data-index="absoluteTime" key="absoluteTime" align="flex-start" > 118 </lit-table-column> 119 <lit-table-column order width="15%" data-index="processName" key="processName" title="Process" align="flex-start" > 120 </lit-table-column> 121 <lit-table-column order width="15%" data-index="threadName" key="threadName" align="flex-start" title="Thread" > 122 </lit-table-column> 123 <lit-table-column order width="1fr" data-index="name" key="name" align="flex-start" title="Name"> 124 </lit-table-column> 125 <lit-table-column order width="1fr" data-index="duration" key="duration" title="duration(ms)" align="flex-start"> 126 </lit-table-column> 127 </lit-table> 128 `; 129 } 130 131 sortByColumn(detail: unknown): void { 132 // @ts-ignore 133 function compare(property, sort, type) { 134 return function (boxChildLeftData: SelectionData, boxChildRightData: SelectionData): number { 135 if (type === 'number') { 136 return sort === 2 // @ts-ignore 137 ? parseFloat(boxChildRightData[property]) - parseFloat(boxChildLeftData[property]) // @ts-ignore 138 : parseFloat(boxChildLeftData[property]) - parseFloat(boxChildRightData[property]); 139 } else { 140 // @ts-ignore 141 if (boxChildRightData[property] > boxChildLeftData[property]) { 142 return sort === 2 ? 1 : -1; 143 } else { 144 // @ts-ignore 145 if (boxChildRightData[property] === boxChildLeftData[property]) { 146 return 0; 147 } else { 148 return sort === 2 ? -1 : 1; 149 } 150 } 151 } 152 }; 153 } 154 //@ts-ignore 155 if (detail.key === 'startTime' || detail.key === 'processName' || detail.key === 'threadName' || //@ts-ignore 156 detail.key === 'name') { 157 // @ts-ignore 158 this.boxChildSource.sort(compare(detail.key, detail.sort, 'string'));// @ts-ignore 159 } else if (detail.key === 'absoluteTime' || detail.key === 'duration') {// @ts-ignore 160 this.boxChildSource.sort(compare(detail.key, detail.sort, 'number')); 161 } 162 // @ts-ignore 163 this.boxChildSource.sort(compare(detail.key, detail.sort, 'string')); 164 this.sliceChildTbl!.recycleDataSource = this.boxChildSource; 165 } 166} 167