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 { Dma } from '../../../../bean/AbilityMonitor'; 20import { resizeObserver } from '../SheetUtils'; 21import { MemoryConfig } from '../../../../bean/MemoryConfig'; 22import { Utils } from '../../base/Utils'; 23import { getTabDmaAbilityData } from '../../../../database/sql/Dma.sql'; 24import { NUM_5, NUM_MILLON } from '../../../../bean/NumBean'; 25 26@element('tabpane-dma-ability') 27export class TabPaneDmaAbility extends BaseElement { 28 private dmaTbl: LitTable | null | undefined; 29 private dmaSource: Array<Dma> = []; 30 private tableThead: HTMLDivElement | undefined | null; 31 private dmaTimeRange: HTMLLabelElement | null | undefined; 32 private total: Dma = new Dma(); 33 34 set data(dmaAbilityValue: SelectionParam) { 35 if (dmaAbilityValue.dmaAbilityData.length > 0) { 36 this.init(); 37 this.dmaTimeRange!.textContent = 38 'Selected range: ' + ((dmaAbilityValue.rightNs - dmaAbilityValue.leftNs) / NUM_MILLON).toFixed(NUM_5) + ' ms'; 39 this.dmaTbl!.loading = true; 40 this.queryDataByDB(dmaAbilityValue); 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<HTMLLabelElement>('#dma-time-range'); 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!); 57 } 58 59 private init(): void { 60 const thTable = this.tableThead!.querySelector('.th'); 61 const list = thTable!.querySelectorAll('div'); 62 if (this.tableThead!.hasAttribute('sort')) { 63 this.tableThead!.removeAttribute('sort'); 64 list.forEach((item) => { 65 item.querySelectorAll('svg').forEach((svgEl) => { 66 svgEl.style.display = 'none'; 67 }); 68 }); 69 } 70 } 71 72 queryDataByDB(val: SelectionParam): void { 73 getTabDmaAbilityData(val.leftNs, val.rightNs, (MemoryConfig.getInstance().interval * NUM_MILLON) / NUM_5).then( 74 (data) => { 75 this.dmaSource = data; 76 this.dmaTbl!.loading = false; 77 if (data.length !== null && data.length > 0) { 78 this.total = new Dma(); 79 this.total.process = '*All*'; 80 data.forEach((dmaItem) => { 81 if (dmaItem.processName !== null) { 82 dmaItem.process = `${dmaItem.processName}(${dmaItem.processId})`; 83 } else { 84 dmaItem.process = `Process(${dmaItem.processId})`; 85 } 86 87 this.total.avgSize += dmaItem.avgSize; 88 if (this.total.minSize < 0) { 89 this.total.minSize = dmaItem.minSize; 90 } 91 if (this.total.maxSize < 0) { 92 this.total.maxSize = dmaItem.maxSize; 93 } 94 this.total.minSize = Math.min(this.total.minSize, dmaItem.minSize); 95 this.total.maxSize = Math.max(this.total.maxSize, dmaItem.maxSize); 96 97 dmaItem.avgSizes = Utils.getBinaryByteWithUnit(Math.round(dmaItem.avgSize)); 98 dmaItem.minSizes = Utils.getBinaryByteWithUnit(dmaItem.minSize); 99 dmaItem.maxSizes = Utils.getBinaryByteWithUnit(dmaItem.maxSize); 100 }); 101 this.total.avgSizes = Utils.getBinaryByteWithUnit(Math.round(this.total.avgSize / data.length)); 102 this.total.minSizes = Utils.getBinaryByteWithUnit(this.total.minSize); 103 this.total.maxSizes = Utils.getBinaryByteWithUnit(this.total.maxSize); 104 this.dmaSource.sort(function (dmaAbilityLeftData: Dma, dmaAbilityRightData: Dma) { 105 return dmaAbilityRightData.avgSize - dmaAbilityLeftData.avgSize; 106 }); 107 this.dmaTbl!.recycleDataSource = [this.total, ...this.dmaSource]; 108 } else { 109 this.dmaTbl!.recycleDataSource = []; 110 this.dmaSource = []; 111 } 112 } 113 ); 114 } 115 116 initHtml(): string { 117 return ` 118 <style> 119 .dma-label{ 120 flex-direction: row; 121 margin-bottom: 5px; 122 } 123 :host{ 124 display: flex; 125 flex-direction: column; 126 padding: 10px 10px; 127 } 128 </style> 129 <div class="dma-label" 130 style="display: flex;height: 20px;align-items: center;flex-direction: row;margin-bottom: 5px"> 131 <div style="flex: 1"></div> 132 <label id="dma-time-range" 133 style="width: auto;text-align: end;font-size: 10pt;">Selected range:0.0 ms</label> 134 </div> 135 <div style="overflow: auto"> 136 <lit-table id="damTable" class="damTable"> 137 <lit-table-column order title="Process" data-index="process" key="process" align="flex-start" width="2fr" > 138 </lit-table-column> 139 <lit-table-column order title="AvgSize" data-index="avgSizes" key="avgSize" align="flex-start" width="1fr" > 140 </lit-table-column> 141 <lit-table-column order title="MaxSize" data-index="maxSizes" key="maxSize" align="flex-start" width="1fr" > 142 </lit-table-column> 143 <lit-table-column order title="MinSize" data-index="minSizes" key="minSize" align="flex-start" width="1fr" > 144 </lit-table-column> 145 </lit-table> 146 </div> 147 `; 148 } 149 150 sortDmaByColumn(column: string, sort: number): void { 151 switch (sort) { 152 case 0: 153 this.dmaTbl!.recycleDataSource = [this.total, ...this.dmaSource]; 154 break; 155 default: 156 let array = [...this.dmaSource]; 157 switch (column) { 158 case 'process': 159 array.sort((dmaAbilityLeftData, dmaAbilityRightData) => { 160 return sort === 1 161 ? `${dmaAbilityLeftData.process}`.localeCompare(`${dmaAbilityRightData.process}`) 162 : `${dmaAbilityRightData.process}`.localeCompare(`${dmaAbilityLeftData.process}`); 163 }); 164 break; 165 case 'avgSize': 166 array.sort((dmaAbilityLeftData, dmaAbilityRightData) => { 167 return sort === 1 168 ? dmaAbilityLeftData.avgSize - dmaAbilityRightData.avgSize 169 : dmaAbilityRightData.avgSize - dmaAbilityLeftData.avgSize; 170 }); 171 break; 172 case 'minSize': 173 array.sort((dmaAbilityLeftData, dmaAbilityRightData) => { 174 return sort === 1 175 ? dmaAbilityLeftData.minSize - dmaAbilityRightData.minSize 176 : dmaAbilityRightData.minSize - dmaAbilityLeftData.minSize; 177 }); 178 break; 179 case 'maxSize': 180 array.sort((dmaAbilityLeftData, dmaAbilityRightData) => { 181 return sort === 1 182 ? dmaAbilityLeftData.maxSize - dmaAbilityRightData.maxSize 183 : dmaAbilityRightData.maxSize - dmaAbilityLeftData.maxSize; 184 }); 185 break; 186 } 187 this.dmaTbl!.recycleDataSource = [this.total, ...array]; 188 break; 189 } 190 } 191} 192