1/* 2 * Copyright (C) 2022 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 { BoxJumpParam, SelectionData } from '../../../../bean/BoxSelection'; 19import { Utils } from '../../base/Utils'; 20import { resizeObserver } from '../SheetUtils'; 21import { sliceChildBoxSender, threadNearData } from '../../../../database/data-trafic/SliceSender'; 22 23@element('tabpane-box-child') 24export class TabPaneBoxChild extends BaseElement { 25 private boxChildTbl: LitTable | null | undefined; 26 private boxChildRange: HTMLLabelElement | null | undefined; 27 private boxChildSource: Array<unknown> = []; 28 private boxChildParam: BoxJumpParam | null | undefined; 29 30 set data(boxChildValue: BoxJumpParam) { 31 //切换Tab页 保持childTab数据不变 除非重新点击跳转 32 if (boxChildValue === this.boxChildParam || !boxChildValue.isJumpPage) { 33 return; 34 } // @ts-ignore 35 this.boxChildParam = boxChildValue; 36 //显示框选范围对应的时间 37 this.boxChildRange!.textContent = `Selected range: ${parseFloat( 38 ((boxChildValue.rightNs - boxChildValue.leftNs) / 1000000.0).toFixed(5) 39 )} ms`; 40 this.boxChildTbl!.recycleDataSource = []; 41 this.getDataByDB(boxChildValue); 42 } 43 44 initElements(): void { 45 this.boxChildTbl = this.shadowRoot?.querySelector<LitTable>('#tb-cpu-thread'); 46 this.boxChildRange = this.shadowRoot?.querySelector('#time-range'); 47 this.boxChildTbl!.addEventListener('column-click', (evt): void => { 48 // @ts-ignore 49 this.sortByColumn(evt.detail); 50 }); 51 //监听row的点击事件，在对应起始时间上画标记棋子 52 this.boxChildTbl!.addEventListener('row-click', (evt): void => { 53 //@ts-ignore 54 let param = evt.detail.data; 55 param.isSelected = true; 56 this.boxChildTbl!.clearAllSelection(param); 57 this.boxChildTbl!.setCurrentSelection(param); 58 document.dispatchEvent( 59 new CustomEvent('triangle-flag', { 60 detail: { time: [param.startTime], type: 'triangle' }, 61 }) 62 ); 63 }); 64 } 65 66 connectedCallback(): void { 67 super.connectedCallback(); 68 resizeObserver(this.parentElement!, this.boxChildTbl!); 69 } 70 71 getDataByDB(val: BoxJumpParam): void { 72 this.boxChildTbl!.loading = true; 73 sliceChildBoxSender('state-box', val.leftNs, val.rightNs, val.threadId!, val.processId!, 74 val.cpus, val.state, val.traceId!).then((result: unknown): void => { 75 this.boxChildTbl!.loading = false; 76 // @ts-ignore 77 if (result.length !== null && result.length > 0) { 78 // @ts-ignore 79 result.map((e: unknown) => { 80 //获取优先级数据 81 // @ts-ignore 82 let prioObj = Utils.getInstance().getSchedSliceMap().get(`${e.id}-${e.startTime}`); 83 //thread statesTab页 dur截取的问题 与thread states保持一致 84 if (val.currentId === 'box-thread-states') { 85 // @ts-ignore 86 if (e.startTime < val.leftNs && (e.startTime + e.dur) < val.rightNs) { 87 // @ts-ignore 88 e.dur = (e.startTime + e.dur) - val.leftNs; 89 // @ts-ignore 90 } else if ((e.startTime + e.dur) > val.rightNs && e.startTime > val.leftNs) { 91 // @ts-ignore 92 e.dur = val.rightNs - e.startTime; 93 // @ts-ignore 94 } else if (e.startTime < val.leftNs && (e.startTime + e.dur) > val.rightNs) { 95 // @ts-ignore 96 e.dur = val.rightNs - val.leftNs; 97 } 98 } 99 //相对起始时间转换为带单位的字符串 100 // @ts-ignore 101 e.sTime = Utils.getTimeString(e.startTime); 102 // @ts-ignore 103 e.absoluteTime = ((window as unknown).recordStartNS + e.startTime) / 1000000000; 104 // @ts-ignore 105 e.state = Utils.getEndState(e.state)!; 106 // @ts-ignore 107 e.duration = e.dur / 1000000; 108 // @ts-ignore 109 e.prior = prioObj ? prioObj.priority : '-'; 110 // @ts-ignore 111 e.core = e.cpu === undefined || e.cpu === null ? '-' : `CPU${e.cpu}`; 112 // @ts-ignore 113 let processInfo: string | undefined = Utils.getInstance().getProcessMap().get(e.pid); 114 // @ts-ignore 115 e.processName = `${processInfo === undefined || processInfo === null ? 'process' : processInfo}[${e.pid}]`; 116 // @ts-ignore 117 let threadInfo: string | undefined = Utils.getInstance().getThreadMap().get(e.tid); 118 // @ts-ignore 119 e.threadName = `${threadInfo === undefined || threadInfo === null ? 'thread' : threadInfo}[${e.tid}]`; 120 // @ts-ignore 121 e.note = '-'; 122 }); 123 // @ts-ignore 124 this.boxChildSource = result; 125 if (this.boxChildTbl) { 126 // @ts-ignore 127 this.boxChildTbl.recycleDataSource = result; 128 } 129 } else { 130 this.boxChildSource = []; 131 if (this.boxChildTbl) { 132 // @ts-ignore 133 this.boxChildTbl.recycleDataSource = []; 134 } 135 } 136 } 137 ); 138 } 139 140 initHtml(): string { 141 return ` 142 <style> 143 .box-child-label{ 144 text-align: end; 145 width: 100%; 146 height: 20px; 147 } 148 :host{ 149 padding: 10px 10px; 150 display: flex; 151 flex-direction: column; 152 } 153 </style> 154 <label id="time-range" class="box-child-label" style="font-size: 10pt;margin-bottom: 5px">Selected range:0.0 ms</label> 155 <lit-table id="tb-cpu-thread" style="height: auto"> 156 <lit-table-column order title="StartTime(Relative)" width="15%" data-index="sTime" key="sTime" align="flex-start" > 157 </lit-table-column> 158 <lit-table-column order title="StartTime(Absolute)" width="15%" data-index="absoluteTime" key="absoluteTime" align="flex-start" > 159 </lit-table-column> 160 <lit-table-column order width="15%" data-index="processName" key="processName" title="Process" align="flex-start" > 161 </lit-table-column> 162 <lit-table-column order width="15%" data-index="threadName" key="threadName" align="flex-start" title="Thread"> 163 </lit-table-column> 164 <lit-table-column order width="1fr" data-index="duration" key="duration" title="duration(ms)" align="flex-start" > 165 </lit-table-column> 166 <lit-table-column order width="1fr" data-index="state" key="state" align="flex-start" title="State"> 167 </lit-table-column> 168 <lit-table-column order width="1fr"data-index="core" title="Core" key="core" align="flex-start" > 169 </lit-table-column> 170 <lit-table-column order width="1fr" data-index="prior" title="Priority" key="prior" align="flex-start" > 171 </lit-table-column> 172 <lit-table-column order width="1fr" data-index="note" key="note" align="flex-start" title="Note"> 173 </lit-table-column> 174 </lit-table> 175 `; 176 } 177 178 sortByColumn(detail: unknown): void { 179 // @ts-ignore 180 function compare(property, sort, type) { 181 return function (boxChildLeftData: SelectionData, boxChildRightData: SelectionData): number { 182 if (type === 'number') { 183 return sort === 2 184 // @ts-ignore 185 ? parseFloat(boxChildRightData[property]) - parseFloat(boxChildLeftData[property]) 186 // @ts-ignore 187 : parseFloat(boxChildLeftData[property]) - parseFloat(boxChildRightData[property]); 188 } else { 189 // @ts-ignore 190 if (boxChildRightData[property] > boxChildLeftData[property]) { 191 return sort === 2 ? 1 : -1; 192 } else { 193 // @ts-ignore 194 if (boxChildRightData[property] === boxChildLeftData[property]) { 195 return 0; 196 } else { 197 return sort === 2 ? -1 : 1; 198 } 199 } 200 } 201 }; 202 } 203 204 // @ts-ignore 205 this.boxChildSource.sort(compare(detail.key, detail.sort, 'string')); 206 this.boxChildTbl!.recycleDataSource = this.boxChildSource; 207 } 208} 209