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