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 SelectionParam } from '../../../../bean/BoxSelection'; 19import { resizeObserver } from '../SheetUtils'; 20import { type Dma } from '../../../../bean/AbilityMonitor'; 21import { MemoryConfig } from '../../../../bean/MemoryConfig'; 22import { Utils } from '../../base/Utils'; 23import { getTabDmaVmTrackerData } from '../../../../database/sql/Dma.sql'; 24 25@element('tabpane-dma-vmtracker') 26export class TabPaneDmaVmTracker extends BaseElement { 27 private dmaTbl: LitTable | null | undefined; 28 private dmaSource: Array<Dma> = []; 29 private tableThead: HTMLDivElement | undefined | null; 30 private dmaTimeRange: HTMLDivElement | undefined | null; 31 32 set data(dmaValue: SelectionParam | unknown) { 33 // @ts-ignore 34 if (dmaValue.dmaVmTrackerData.length > 0) { 35 this.dmaTimeRange!.textContent = 36 // @ts-ignore 37 'Selected range: ' + ((dmaValue.rightNs - dmaValue.leftNs) / 1000000.0).toFixed(5) + ' ms'; 38 this.dmaTbl!.loading = true; 39 this.queryDataByDB(dmaValue); 40 this.init(); 41 } 42 } 43 44 initElements(): void { 45 this.dmaTbl = this.shadowRoot?.querySelector<LitTable>('#damTable'); 46 this.tableThead = this.dmaTbl?.shadowRoot?.querySelector('.thead') as HTMLDivElement; 47 this.dmaTimeRange = this.shadowRoot?.querySelector('#dma-time-range') as HTMLDivElement; 48 this.dmaTbl!.addEventListener('column-click', (e) => { 49 // @ts-ignore 50 this.sortDmaByColumn(e.detail.key, e.detail.sort); 51 }); 52 } 53 54 connectedCallback(): void { 55 super.connectedCallback(); 56 resizeObserver(this.parentElement!, this.dmaTbl!, 18); 57 } 58 59 private init(): void { 60 const thTable = this.tableThead!.querySelector('.th'); 61 const dmaVmTrackerTblNodes = thTable!.querySelectorAll('div'); 62 if (this.tableThead!.hasAttribute('sort')) { 63 this.tableThead!.removeAttribute('sort'); 64 dmaVmTrackerTblNodes.forEach((item) => { 65 item.querySelectorAll('svg').forEach((svg) => { 66 svg.style.display = 'none'; 67 }); 68 }); 69 } 70 } 71 72 queryDataByDB(val: SelectionParam | unknown): void { 73 getTabDmaVmTrackerData( 74 // @ts-ignore 75 val.leftNs, 76 // @ts-ignore 77 val.rightNs, 78 MemoryConfig.getInstance().iPid, 79 (MemoryConfig.getInstance().interval * 1000000) / 5 80 ).then((data) => { 81 this.dmaTbl!.loading = false; 82 if (data.length !== null && data.length > 0) { 83 data.forEach((item) => { 84 item.avgSizes = Utils.getBinaryByteWithUnit(Math.round(item.avgSize)); 85 item.minSizes = Utils.getBinaryByteWithUnit(item.minSize); 86 item.maxSizes = Utils.getBinaryByteWithUnit(item.maxSize); 87 }); 88 this.dmaSource = data; 89 this.dmaTbl!.recycleDataSource = this.dmaSource.sort(function (dmaVmLeftData: Dma, dmaVmRightData: Dma) { 90 return dmaVmRightData.avgSize - dmaVmLeftData.avgSize; 91 }); 92 } else { 93 this.dmaTbl!.recycleDataSource = []; 94 this.dmaSource = []; 95 } 96 }); 97 } 98 99 initHtml(): string { 100 return ` 101 <style> 102 .dma-table{ 103 flex-direction: row; 104 margin-bottom: 5px; 105 } 106 :host{ 107 display: flex; 108 flex-direction: column; 109 padding: 10px 10px; 110 } 111 </style> 112 <div class="dma-table" style="display: flex;height: 20px;align-items: center;flex-direction: row;margin-bottom: 5px"> 113 <div style="flex: 1"></div> 114 <label id="dma-time-range" style="width: auto;text-align: end;font-size: 10pt;">Selected range:0.0 ms</label> 115 </div> 116 <div style="overflow: auto"> 117 <lit-table id="damTable" class="damTable"> 118 <lit-table-column order title="AvgSize" data-index="avgSizes" key="avgSize" align="flex-start" width="1fr" > 119 </lit-table-column> 120 <lit-table-column order title="MinSize" data-index="minSizes" key="minSize" align="flex-start" width="1fr" > 121 </lit-table-column> 122 <lit-table-column order title="MaxSize" data-index="maxSizes" key="maxSize" align="flex-start" width="1fr" > 123 </lit-table-column> 124 </lit-table> 125 </div> 126 `; 127 } 128 129 sortDmaByColumn(column: string, sort: number): void { 130 switch (sort) { 131 case 0: 132 this.dmaTbl!.recycleDataSource = this.dmaSource; 133 break; 134 default: 135 let array = [...this.dmaSource]; 136 switch (column) { 137 case 'avgSize': 138 this.dmaTbl!.recycleDataSource = array.sort((dmaVmLeftData, dmaVmRightData) => { 139 return sort === 1 140 ? dmaVmLeftData.avgSize - dmaVmRightData.avgSize 141 : dmaVmRightData.avgSize - dmaVmLeftData.avgSize; 142 }); 143 break; 144 case 'minSize': 145 this.dmaTbl!.recycleDataSource = array.sort((dmaVmLeftData, dmaVmRightData) => { 146 return sort === 1 147 ? dmaVmLeftData.minSize - dmaVmRightData.minSize 148 : dmaVmRightData.minSize - dmaVmLeftData.minSize; 149 }); 150 break; 151 case 'maxSize': 152 this.dmaTbl!.recycleDataSource = array.sort((dmaVmLeftData, dmaVmRightData) => { 153 return sort === 1 154 ? dmaVmLeftData.maxSize - dmaVmRightData.maxSize 155 : dmaVmRightData.maxSize - dmaVmLeftData.maxSize; 156 }); 157 break; 158 } 159 break; 160 } 161 } 162} 163