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 { type SelectionParam } from '../../../../bean/BoxSelection'; 18import { type LitTable } from '../../../../../base-ui/table/lit-table'; 19import { log } from '../../../../../log/Log'; 20import { getProbablyTime } from '../../../../database/logic-worker/ProcedureLogicWorkerCommon'; 21import { resizeObserver } from '../SheetUtils'; 22import { SpSystemTrace } from '../../../SpSystemTrace'; 23import { MemoryConfig } from '../../../../bean/MemoryConfig'; 24import { Utils } from '../../base/Utils'; 25import { queryGpuDataByRange } from '../../../../database/sql/Gpu.sql'; 26 27interface GpuTotal { 28 startTs: number; 29 startTsStr?: string; 30 windowId: number; 31 moduleId: number; 32 categoryId: number; 33 gpuName?: string; 34 avgSize: number; 35 avgSizeStr?: string; 36 maxSize: number; 37 maxSizeStr?: string; 38 minSize: number; 39 minSizeStr?: string; 40} 41 42@element('tabpane-gpu-total-box-select') 43export class TabPaneGpuTotalBoxSelect extends BaseElement { 44 private gpuBoxTbl: LitTable | null | undefined; 45 private range: HTMLLabelElement | null | undefined; 46 private gpuBoxSource: Array<GpuTotal> = []; 47 private currentSelectionParam: SelectionParam | undefined; 48 49 set data(gpuTotalBoxParam: SelectionParam | unknown) { 50 if (this.currentSelectionParam === gpuTotalBoxParam) { 51 return; 52 } 53 // @ts-ignore 54 this.currentSelectionParam = gpuTotalBoxParam; 55 //@ts-ignore 56 this.gpuBoxTbl?.shadowRoot?.querySelector('.table')?.style?.height = this.parentElement!.clientHeight - 45 + 'px'; 57 this.range!.textContent = 58 // @ts-ignore 59 'Selected range: ' + ((gpuTotalBoxParam.rightNs - gpuTotalBoxParam.leftNs) / 1000000.0).toFixed(5) + ' ms'; 60 this.gpuBoxTbl!.loading = true; 61 // @ts-ignore 62 queryGpuDataByRange(gpuTotalBoxParam.leftNs, gpuTotalBoxParam.rightNs, MemoryConfig.getInstance().snapshotDur).then( 63 (result) => { 64 this.gpuBoxTbl!.loading = false; 65 if (result != null && result.length > 0) { 66 log('getTabStartups result size : ' + result.length); 67 let target = result.filter((it) => it.windowId === 0); 68 target.forEach((it: GpuTotal) => { 69 let moduleName = SpSystemTrace.DATA_DICT.get(it.moduleId) || 'NULL'; 70 let categoryName = SpSystemTrace.DATA_DICT.get(it.categoryId) || 'NULL'; 71 it.gpuName = `${moduleName} / ${categoryName}`; 72 it.startTsStr = getProbablyTime(it.startTs); 73 it.avgSizeStr = Utils.getBinaryByteWithUnit(it.avgSize); 74 it.minSizeStr = Utils.getBinaryByteWithUnit(it.minSize); 75 it.maxSizeStr = Utils.getBinaryByteWithUnit(it.maxSize); 76 }); 77 this.gpuBoxSource = target; 78 this.gpuBoxTbl!.recycleDataSource = this.gpuBoxSource; 79 } else { 80 this.gpuBoxSource = []; 81 this.gpuBoxTbl!.recycleDataSource = []; 82 } 83 } 84 ); 85 } 86 87 initElements(): void { 88 this.gpuBoxTbl = this.shadowRoot?.querySelector<LitTable>('#tb-gpu-box'); 89 this.range = this.shadowRoot?.querySelector('#gpu-box-time-range'); 90 this.gpuBoxTbl!.addEventListener('column-click', (evt: unknown) => { 91 // @ts-ignore 92 this.sortByColumn(evt.detail); 93 }); 94 } 95 96 connectedCallback(): void { 97 super.connectedCallback(); 98 resizeObserver(this.parentElement!, this.gpuBoxTbl!); 99 } 100 101 initHtml(): string { 102 return ` 103 <style> 104 .gpuBox-table{ 105 flex-direction: row; 106 margin-bottom: 5px; 107 } 108 :host{ 109 display: flex; 110 flex-direction: column; 111 padding: 10px 10px; 112 } 113 </style> 114 <div class="gpu-box-table" style="display: flex;height: 20px;align-items: center;flex-direction: row;margin-bottom: 5px"> 115 <div style="flex: 1"></div> 116 <label id="gpu-box-time-range" style="width: auto;text-align: end;font-size: 10pt;">Selected range:0.0 ms</label> 117 </div> 118 <div style="overflow: auto"> 119 <lit-table id="tb-gpu-box" style="height: auto"> 120 </lit-table-column> 121 <lit-table-column width="500px" title="Module / Category" data-index="gpuName" key="gpuName" align="flex-start"> 122 </lit-table-column> 123 <lit-table-column width="160px" title="AvgSize" data-index="avgSizeStr" key="avgSizeStr" align="flex-start" order > 124 </lit-table-column> 125 <lit-table-column width="160px" title="MaxSize" data-index="maxSizeStr" key="maxSizeStr" align="flex-start" order > 126 </lit-table-column> 127 <lit-table-column width="160px" title="MinSize" data-index="minSizeStr" key="minSizeStr" align="flex-start" order > 128 </lit-table-column> 129 </lit-table> 130 </div> 131 `; 132 } 133 134 sortByColumn(gpuTotalBoxDetail: { key: string; sort: number }): void { 135 this.gpuBoxSource.sort((gpuA, gpuB) => { 136 if (gpuTotalBoxDetail.sort === 0) { 137 return gpuA.startTs - gpuB.startTs; 138 } else { 139 let key = gpuTotalBoxDetail.key.replace('Str', ''); 140 // @ts-ignore 141 let valueA = (gpuA as unknown)[key]; 142 // @ts-ignore 143 let valueB = (gpuB as unknown)[key]; 144 return gpuTotalBoxDetail.sort === 1 ? valueA - valueB : valueB - valueA; 145 } 146 }); 147 this.gpuBoxTbl!.recycleDataSource = this.gpuBoxSource; 148 } 149} 150