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 */ 15import { BaseElement, element } from '../../../../../base-ui/BaseElement'; 16import { type LitTable } from '../../../../../base-ui/table/lit-table'; 17import { type SelectionParam } from '../../../../bean/BoxSelection'; 18import { Utils } from '../../base/Utils'; 19import { MemoryConfig } from '../../../../bean/MemoryConfig'; 20import { ns2s } from '../../../../database/ui-worker/ProcedureWorkerCommon'; 21import { queryVmTrackerShmSizeData } from '../../../../database/sql/Memory.sql'; 22import { TabPaneVmTrackerShmHtml } from './TabPaneVmTrackerShm.html'; 23 24@element('tabpane-vmtracker-shm') 25export class TabPaneVmTrackerShm extends BaseElement { 26 private TableEl: LitTable | undefined | null; 27 private shmData: Array<number | string> = []; 28 private sortArray: Array<unknown> = []; 29 private memoryConfig: MemoryConfig = MemoryConfig.getInstance(); 30 private tabTitle: HTMLDivElement | undefined | null; 31 private range: HTMLLabelElement | null | undefined; 32 33 set data(valVmTrackerShm: SelectionParam | unknown) { 34 // @ts-ignore 35 if (valVmTrackerShm.vmtrackershm.length > 0) { 36 this.init(); 37 this.clear(); 38 this.range!.textContent = 39 'Selected range: ' + 40 // @ts-ignore 41 parseFloat(((valVmTrackerShm.rightNs - valVmTrackerShm.leftNs) / 1000000.0).toFixed(5)) + 42 ' ms'; 43 this.queryDataByDB(valVmTrackerShm); 44 } 45 } 46 47 initElements(): void { 48 this.TableEl = this.shadowRoot!.querySelector<LitTable>('#tb-shm') as LitTable; 49 this.range = this.shadowRoot?.querySelector('#time-range'); 50 this.tabTitle = this.TableEl!.shadowRoot?.querySelector('.thead') as HTMLDivElement; 51 this.TableEl!.addEventListener('column-click', (evt) => { 52 // @ts-ignore 53 this.sortByColumn(evt.detail.key, evt.detail.sort); 54 }); 55 } 56 57 queryDataByDB(srVal: SelectionParam | unknown): void { 58 queryVmTrackerShmSizeData( 59 // @ts-ignore 60 srVal.leftNs, 61 // @ts-ignore 62 srVal.rightNs, 63 this.memoryConfig.iPid, 64 (MemoryConfig.getInstance().interval * 1000_000) / 5 65 ).then((result) => { 66 if (result.length > 0) { 67 for (let filter of result) { 68 //@ts-ignore 69 filter.time = ns2s(filter.startNS); //@ts-ignore 70 filter.sumSizeStr = Utils.getBinaryByteWithUnit(filter.sum); //@ts-ignore 71 filter.avgSizeStr = Utils.getBinaryByteWithUnit(filter.avg); //@ts-ignore 72 filter.minSizeStr = Utils.getBinaryByteWithUnit(filter.min); //@ts-ignore 73 filter.maxSizeStr = Utils.getBinaryByteWithUnit(filter.max); 74 } //@ts-ignore 75 this.shmData = result.sort((a, b) => b.avg - a.avg); 76 this.TableEl!.recycleDataSource = this.shmData; 77 } 78 }); 79 } 80 81 clear(): void { 82 this.TableEl!.recycleDataSource = []; 83 } 84 85 private init(): void { 86 const thTable = this.tabTitle!.querySelector('.th'); 87 const vmTrackerShmTblNodes = thTable!.querySelectorAll('div'); 88 if (this.tabTitle!.hasAttribute('sort')) { 89 this.tabTitle!.removeAttribute('sort'); 90 vmTrackerShmTblNodes.forEach((item) => { 91 item.querySelectorAll('svg').forEach((svg) => { 92 svg.style.display = 'none'; 93 }); 94 }); 95 } 96 } 97 98 sortByColumn(column: string, sort: number): void { 99 switch (sort) { 100 case 0: 101 this.TableEl!.snapshotDataSource = this.shmData; 102 break; 103 default: 104 this.sortArray = [...this.shmData]; 105 switch (column) { 106 case 'time': 107 this.TableEl!.snapshotDataSource = this.sortArray.sort((leftStartNS, rightStartNS) => { 108 return sort === 1 109 ? // @ts-ignore 110 leftStartNS.startNS - rightStartNS.startNS 111 : // @ts-ignore 112 rightStartNS.startNS - leftStartNS.startNS; 113 }); 114 break; 115 case 'flag': 116 this.TableEl!.snapshotDataSource = this.sortArray.sort((leftFlag, rightFlag) => { 117 // @ts-ignore 118 return sort === 1 ? leftFlag.flag - rightFlag.flag : rightFlag.flag - leftFlag.flag; 119 }); 120 break; 121 case 'minSizeStr': 122 this.TableEl!.snapshotDataSource = this.sortArray.sort((leftMin, rightMin) => { 123 // @ts-ignore 124 return sort === 1 ? leftMin.min - rightMin.min : rightMin.min - leftMin.min; 125 }); 126 break; 127 case 'avgSizeStr': 128 this.TableEl!.snapshotDataSource = this.sortArray.sort((leftAvg, rightAvg) => { 129 // @ts-ignore 130 return sort === 1 ? leftAvg.avg - rightAvg.avg : rightAvg.avg - leftAvg.avg; 131 }); 132 break; 133 case 'maxSizeStr': 134 this.TableEl!.snapshotDataSource = this.sortArray.sort((leftMax, rightMax) => { 135 // @ts-ignore 136 return sort === 1 ? leftMax.max - rightMax.max : rightMax.max - leftMax.max; 137 }); 138 break; 139 } 140 break; 141 } 142 } 143 144 initHtml(): string { 145 return TabPaneVmTrackerShmHtml; 146 } 147} 148