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 { SelectionParam } from '../../../../bean/BoxSelection'; 19import { MemoryConfig } from '../../../../bean/MemoryConfig'; 20import { SmapsType } from '../../../../bean/SmapsStruct'; 21import { getByteWithUnit } from '../../../../database/logic-worker/ProcedureLogicWorkerCommon'; 22import { ns2s } from '../../../../database/ui-worker/ProcedureWorkerCommon'; 23import { SnapshotStruct } from '../../../../database/ui-worker/ProcedureWorkerSnapshot'; 24import { SpSystemTrace } from '../../../SpSystemTrace'; 25import { resizeObserver } from '../SheetUtils'; 26import { querySmapsRecordTabData } from '../../../../database/sql/Smaps.sql'; 27@element('tabpane-smaps-record') 28export class TabPaneSmapsRecord extends BaseElement { 29 private smapsRecordTable: LitTable | undefined | null; 30 private smapsRecordDataSource: Array<unknown> = []; 31 private _GLESHostCache: Array<SnapshotStruct> = []; 32 private pixelmapId = -1; 33 private typeId = SmapsType.TYPE_NATIVE_HEAP; 34 35 set GLESHostCache(value: Array<SnapshotStruct>) { 36 this._GLESHostCache = value; 37 } 38 set data(smapsValue: SelectionParam | unknown) { 39 this.smapsRecordDataSource = []; 40 if (smapsValue) { 41 if (this.pixelmapId === -1) { 42 for (let [key, value] of SpSystemTrace.DATA_DICT) { 43 if (value === 'pixelmap') { 44 this.pixelmapId = key; 45 break; 46 } 47 } 48 } 49 // @ts-ignore 50 this.setSmapsRecordTableData(smapsValue.leftNs); 51 } 52 } 53 54 private async setSmapsRecordTableData(startNs: number): Promise<void> { 55 await querySmapsRecordTabData(startNs, MemoryConfig.getInstance().iPid, this.pixelmapId, this.typeId).then( 56 (results) => { 57 if (results.length > 0) { 58 let totalSize = 0; 59 let RSGSize = 0; 60 let virtaulSize = 0; 61 let currentData = this._GLESHostCache.filter((item: SnapshotStruct) => item.startNs === startNs) || []; 62 if (currentData.length === 1) { 63 // GLESHostCache === currentData[0].aSize，改值Gpu Resource泳道图中已经获取过，所以在这个sql里只是设置为0，占位置，不用多查一遍 64 RSGSize = currentData[0].aSize || 0; 65 } 66 for (let res of results) { 67 if (res.name === 'VirtaulSize') { 68 virtaulSize = res.size; 69 } else { 70 // RSGSize = RenderServiceCpu + SkiaCpu + GLESHostCache 71 RSGSize += res.size; 72 } 73 switch (res.name) { 74 case 'RenderServiceCpu': 75 this.smapsRecordDataSource.push({ name: 'RenderServiceCpu', size: getByteWithUnit(res.size) }); 76 break; 77 case 'SkiaCpu': 78 this.smapsRecordDataSource.push({ name: 'SkiaCpu', size: getByteWithUnit(res.size) }); 79 break; 80 case 'GLESHostCache': 81 let size = currentData.length > 0 ? currentData[0].aSize : 0; 82 this.smapsRecordDataSource.push({ name: 'GLESHostCache', size: getByteWithUnit(size) }); 83 break; 84 default: 85 break; 86 } 87 } 88 // ProcessCacheSize = virtaul_size - RenderServiceCpu - SkiaCpu - GLESHostCache 89 const ProcessCacheSize = virtaulSize - RSGSize; 90 // totalSize = RenderServiceCpu + SkiaCpu + GLESHostCache + ProcessCacheSize 91 totalSize = RSGSize + ProcessCacheSize; 92 this.smapsRecordDataSource.push({ name: 'ProcessCache', size: getByteWithUnit(ProcessCacheSize) }); 93 this.smapsRecordDataSource.unshift( 94 { name: 'TimeStamp', size: ns2s(startNs) }, 95 // @ts-ignore 96 { name: 'TimeStamp(Absolute)', size: (startNs + (window as unknown).recordStartNS) / 1000000000 }, 97 { name: 'Total', size: getByteWithUnit(totalSize) } 98 ); 99 } 100 this.smapsRecordTable!.recycleDataSource = this.smapsRecordDataSource; 101 } 102 ); 103 } 104 105 public initElements(): void { 106 this.smapsRecordTable = this.shadowRoot?.querySelector<LitTable>('#smaps-record-tbl'); 107 } 108 109 connectedCallback(): void { 110 super.connectedCallback(); 111 resizeObserver(this.parentElement!, this.smapsRecordTable!); 112 new ResizeObserver(() => { 113 if (this.parentElement?.clientHeight !== 0) { 114 this.smapsRecordTable!.shadowRoot!.querySelector<HTMLDivElement>('.table')!.style.height = '100%'; 115 this.smapsRecordTable!.reMeauseHeight(); 116 } 117 }).observe(this.parentElement!); 118 } 119 public initHtml(): string { 120 return `<style> 121 :host{ 122 display: flex; 123 padding: 10px 10px; 124 flex-direction: column; 125 height: calc(100% - 20px); 126 } 127 #smaps-record-tbl{ 128 height: 100%; 129 } 130 </style> 131 <lit-table id="smaps-record-tbl" no-head> 132 <lit-table-column title="Name" data-index="name" align="flex-start" width="27%"> 133 <template><div>{{name}}</div></template> 134 </lit-table-column> 135 <lit-table-column title="size" data-index="size" align="flex-start" width="1fr"> 136 <template><div style="display: flex;">{{size}}</div></template> 137 </lit-table-column> 138 </lit-table> 139 `; 140 } 141} 142