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<any> = []; 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 { name: 'TimeStamp(Absolute)', size: (startNs + (window as any).recordStartNS) / 1000000000 }, 50 { name: 'Total', size: getByteWithUnit(totalSize) } 51 ); 52 } 53 this.gpuResourceTable!.recycleDataSource = this.gpuResourceDataSource; 54 }); 55 } 56 57 public initElements(): void { 58 this.gpuResourceTable = this.shadowRoot?.querySelector<LitTable>('#gpu-resource-tbl'); 59 } 60 61 connectedCallback() { 62 super.connectedCallback(); 63 resizeObserver(this.parentElement!, this.gpuResourceTable!); 64 new ResizeObserver(() => { 65 if (this.parentElement?.clientHeight !== 0) { 66 this.gpuResourceTable!.shadowRoot!.querySelector<HTMLDivElement>('.table')!.style.height = '100%'; 67 this.gpuResourceTable!.reMeauseHeight(); 68 } 69 }).observe(this.parentElement!); 70 } 71 public initHtml(): string { 72 return `<style> 73 :host{ 74 display: flex; 75 padding: 10px 10px; 76 flex-direction: column; 77 height: calc(100% - 20px); 78 } 79 #gpu-resource-tbl{ 80 height: 100%; 81 } 82 </style> 83 <lit-table id="gpu-resource-tbl" no-head> 84 <lit-table-column title="Name" data-index="name" align="flex-start" width="27%"> 85 <template><div>{{name}}</div></template> 86 </lit-table-column> 87 <lit-table-column title="size" data-index="size" align="flex-start" width="1fr"> 88 <template><div style="display: flex;">{{size}}</div></template> 89 </lit-table-column> 90 </lit-table> 91 `; 92 } 93} 94