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 LitTable } from '../../../../../base-ui/table/lit-table'; 18import { type GpuMemory } from '../../../../bean/AbilityMonitor'; 19import { ns2s } from '../../../../database/ui-worker/ProcedureWorkerCommon'; 20import { Utils } from '../../base/Utils'; 21import { getTabGpuMemoryAbilityClickData } from '../../../../database/sql/Ability.sql'; 22 23@element('tabpane-gpu-memory-selection-ability') 24export class TabPaneGpuMemorySelectAbility extends BaseElement { 25 private gpuMemoryClickTables: LitTable | null | undefined; 26 private gpuMemoryClickSource: Array<GpuMemory> = []; 27 private tableThead: HTMLDivElement | undefined | null; 28 29 set data(data: number) { 30 // @ts-ignore 31 this.queryDataByDB(data); 32 this.init(); 33 } 34 35 initElements(): void { 36 this.gpuMemoryClickTables = this.shadowRoot?.querySelector<LitTable>('#gpuMemoryClickTables'); 37 this.tableThead = this.gpuMemoryClickTables?.shadowRoot?.querySelector('.thead') as HTMLDivElement; 38 this.gpuMemoryClickTables!.addEventListener('column-click', (e) => { 39 // @ts-ignore 40 this.sortGpuMemoryByColumn(e.detail.key, e.detail.sort); 41 }); 42 } 43 44 connectedCallback(): void { 45 super.connectedCallback(); 46 new ResizeObserver(() => { 47 if (this.parentElement?.clientHeight !== 0) { 48 let gpuMemoryTbl = this.gpuMemoryClickTables?.shadowRoot?.querySelector('.table'); 49 // @ts-ignore 50 gpuMemoryTbl.style.height = this.parentElement.clientHeight - 18 + 'px'; 51 this.parentElement!.style.overflow = 'hidden'; 52 this.gpuMemoryClickTables?.reMeauseHeight(); 53 } 54 }).observe(this.parentElement!); 55 } 56 57 private init(): void { 58 const thTable = this.tableThead!.querySelector('.th'); 59 const gpuMemorySelectTblNode = thTable!.querySelectorAll('div'); 60 if (this.tableThead!.hasAttribute('sort')) { 61 this.tableThead!.removeAttribute('sort'); 62 gpuMemorySelectTblNode.forEach((item) => { 63 item.querySelectorAll('svg').forEach((svg) => { 64 svg.style.display = 'none'; 65 }); 66 }); 67 } 68 } 69 70 queryGpuMemoryClickDataByDB(startNs: number): void { 71 this.init(); 72 getTabGpuMemoryAbilityClickData(startNs).then((data) => { 73 if (data.length !== null && data.length > 0) { 74 data.forEach((item) => { 75 if (item.processName !== null) { 76 item.process = `${item.processName}(${item.processId})`; 77 } else { 78 item.process = `Process(${item.processId})`; 79 } 80 item.sizes = Utils.getBinaryByteWithUnit(item.size); 81 item.timeStamp = ns2s(item.startNs); 82 }); 83 this.gpuMemoryClickTables!.recycleDataSource = data.sort(function ( 84 gpuMemoryLeftData: GpuMemory, 85 gpuMemoryRightData: GpuMemory 86 ) { 87 return gpuMemoryRightData.size - gpuMemoryLeftData.size; 88 }); 89 this.gpuMemoryClickSource = data; 90 } else { 91 this.gpuMemoryClickTables!.recycleDataSource = []; 92 this.gpuMemoryClickSource = []; 93 } 94 }); 95 } 96 97 initHtml(): string { 98 return ` 99<style> 100.gpuMemoryClickTables{ 101 height: auto; 102} 103:host{ 104 display: flex; 105 flex-direction: column; 106 padding: 10px 10px; 107} 108</style> 109<lit-table id="gpuMemoryClickTables" class="gpuMemoryClickTables"> 110 <lit-table-column order title="TimeStamp" data-index="timeStamp" key="startNs" align="flex-start" width="1fr" > 111 </lit-table-column> 112 <lit-table-column order title="GpuName" data-index="gpuName" key="gpuName" align="flex-start" width="1fr" > 113 </lit-table-column> 114 <lit-table-column order title="Process(pid)" data-index="process" key="process" align="flex-start" width="1fr" > 115 </lit-table-column> 116 <lit-table-column order title="Size" data-index="sizes" key="size" align="flex-start" width="1fr" > 117 </lit-table-column> 118</lit-table> 119 `; 120 } 121 122 sortGpuMemoryByColumn(column: string, sort: number): void { 123 switch (sort) { 124 case 0: 125 this.gpuMemoryClickTables!.recycleDataSource = this.gpuMemoryClickSource; 126 break; 127 default: 128 let array = [...this.gpuMemoryClickSource]; 129 switch (column) { 130 case 'process': 131 this.gpuMemoryClickTables!.recycleDataSource = array.sort((gpuMemoryLeftData, gpuMemoryRightData) => { 132 return sort === 1 133 ? `${gpuMemoryLeftData.process}`.localeCompare(`${gpuMemoryRightData.process}`) 134 : `${gpuMemoryRightData.process}`.localeCompare(`${gpuMemoryLeftData.process}`); 135 }); 136 break; 137 case 'startNs': 138 this.gpuMemoryClickTables!.recycleDataSource = array.sort((gpuMemoryLeftData, gpuMemoryRightData) => { 139 return sort === 1 140 ? gpuMemoryLeftData.startNs - gpuMemoryRightData.startNs 141 : gpuMemoryRightData.startNs - gpuMemoryLeftData.startNs; 142 }); 143 break; 144 case 'gpuName': 145 this.gpuMemoryClickTables!.recycleDataSource = array.sort((gpuMemoryLeftData, gpuMemoryRightData) => { 146 return sort === 1 147 ? `${gpuMemoryLeftData.gpuName}`.localeCompare(`${gpuMemoryRightData.gpuName}`) 148 : `${gpuMemoryRightData.gpuName}`.localeCompare(`${gpuMemoryLeftData.gpuName}`); 149 }); 150 break; 151 case 'size': 152 this.gpuMemoryClickTables!.recycleDataSource = array.sort((gpuMemoryLeftData, gpuMemoryRightData) => { 153 return sort === 1 154 ? gpuMemoryLeftData.size - gpuMemoryRightData.size 155 : gpuMemoryRightData.size - gpuMemoryLeftData.size; 156 }); 157 break; 158 } 159 break; 160 } 161 } 162} 163