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 { getByteWithUnit } from '../../../../database/logic-worker/ProcedureLogicWorkerCommon'; 19import { ns2s } from '../../../../database/ui-worker/ProcedureWorkerCommon'; 20import { SpSystemTrace } from '../../../SpSystemTrace'; 21import { resizeObserver } from '../SheetUtils'; 22import { queryGpuResourceTabData } from '../../../../database/sql/Gpu.sql'; 23@element('tabpane-gpu-resource') 24export class TabPaneGpuResourceVmTracker extends BaseElement { 25 private gpuResourceTable: LitTable | undefined | null; 26 private gpuResourceDataSource: Array<unknown> = []; 27 28 set data(startNs: number) { 29 this.gpuResourceDataSource = []; 30 this.setGpuResourceTableData(startNs); 31 } 32 33 private async setGpuResourceTableData(startNs: number): Promise<void> { 34 await queryGpuResourceTabData(startNs).then((results) => { 35 if (results.length > 0) { 36 results.sort(function (a, b) { 37 return b.totalSize - a.totalSize; 38 }); 39 let totalSize = 0; 40 for (let i = 0; i < results.length; i++) { 41 this.gpuResourceDataSource.push({ 42 name: SpSystemTrace.DATA_DICT.get(results[i].channelId), 43 size: getByteWithUnit(results[i].totalSize || 0), 44 }); 45 totalSize += results[i].totalSize; 46 } 47 this.gpuResourceDataSource.unshift( 48 { name: 'TimeStamp', size: ns2s(startNs) }, 49 // @ts-ignore 50 { name: 'TimeStamp(Absolute)', size: (startNs + (window as unknown).recordStartNS) / 1000000000 }, 51 { name: 'Total', size: getByteWithUnit(totalSize) } 52 ); 53 } 54 this.gpuResourceTable!.recycleDataSource = this.gpuResourceDataSource; 55 }); 56 } 57 58 public initElements(): void { 59 this.gpuResourceTable = this.shadowRoot?.querySelector<LitTable>('#gpu-resource-tbl'); 60 } 61 62 connectedCallback(): void { 63 super.connectedCallback(); 64 resizeObserver(this.parentElement!, this.gpuResourceTable!); 65 new ResizeObserver((): void => { 66 if (this.parentElement?.clientHeight !== 0) { 67 this.gpuResourceTable!.shadowRoot!.querySelector<HTMLDivElement>('.table')!.style.height = '100%'; 68 this.gpuResourceTable!.reMeauseHeight(); 69 } 70 }).observe(this.parentElement!); 71 } 72 public initHtml(): string { 73 return `<style> 74 :host{ 75 display: flex; 76 padding: 10px 10px; 77 flex-direction: column; 78 height: calc(100% - 20px); 79 } 80 #gpu-resource-tbl{ 81 height: 100%; 82 } 83 </style> 84 <lit-table id="gpu-resource-tbl" no-head> 85 <lit-table-column title="Name" data-index="name" align="flex-start" width="27%"> 86 <template><div>{{name}}</div></template> 87 </lit-table-column> 88 <lit-table-column title="size" data-index="size" align="flex-start" width="1fr"> 89 <template><div style="display: flex;">{{size}}</div></template> 90 </lit-table-column> 91 </lit-table> 92 `; 93 } 94} 95