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, 74 (MemoryConfig.getInstance().interval * NUM_MILLON) / NUM_5).then((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 initHtml(): string { 116 return ` 117 <style> 118 .dma-label{ 119 flex-direction: row; 120 margin-bottom: 5px; 121 } 122 :host{ 123 display: flex; 124 flex-direction: column; 125 padding: 10px 10px; 126 } 127 </style> 128 <div class="dma-label" 129 style="display: flex;height: 20px;align-items: center;flex-direction: row;margin-bottom: 5px"> 130 <div style="flex: 1"></div> 131 <label id="dma-time-range" 132 style="width: auto;text-align: end;font-size: 10pt;">Selected range:0.0 ms</label> 133 </div> 134 <div style="overflow: auto"> 135 <lit-table id="damTable" class="damTable"> 136 <lit-table-column order title="Process" data-index="process" key="process" align="flex-start" width="2fr" > 137 </lit-table-column> 138 <lit-table-column order title="AvgSize" data-index="avgSizes" key="avgSize" align="flex-start" width="1fr" > 139 </lit-table-column> 140 <lit-table-column order title="MaxSize" data-index="maxSizes" key="maxSize" align="flex-start" width="1fr" > 141 </lit-table-column> 142 <lit-table-column order title="MinSize" data-index="minSizes" key="minSize" align="flex-start" width="1fr" > 143 </lit-table-column> 144 </lit-table> 145 </div> 146 `; 147 } 148 149 sortDmaByColumn(column: string, sort: number): void { 150 switch (sort) { 151 case 0: 152 this.dmaTbl!.recycleDataSource = [this.total, ...this.dmaSource]; 153 break; 154 default: 155 let array = [...this.dmaSource]; 156 switch (column) { 157 case 'process': 158 array.sort((dmaAbilityLeftData, dmaAbilityRightData) => { 159 return sort === 1 160 ? `${dmaAbilityLeftData.process}`.localeCompare(`${dmaAbilityRightData.process}`) 161 : `${dmaAbilityRightData.process}`.localeCompare(`${dmaAbilityLeftData.process}`); 162 }); 163 break; 164 case 'avgSize': 165 array.sort((dmaAbilityLeftData, dmaAbilityRightData) => { 166 return sort === 1 167 ? dmaAbilityLeftData.avgSize - dmaAbilityRightData.avgSize 168 : dmaAbilityRightData.avgSize - dmaAbilityLeftData.avgSize; 169 }); 170 break; 171 case 'minSize': 172 array.sort((dmaAbilityLeftData, dmaAbilityRightData) => { 173 return sort === 1 174 ? dmaAbilityLeftData.minSize - dmaAbilityRightData.minSize 175 : dmaAbilityRightData.minSize - dmaAbilityLeftData.minSize; 176 }); 177 break; 178 case 'maxSize': 179 array.sort((dmaAbilityLeftData, dmaAbilityRightData) => { 180 return sort === 1 181 ? dmaAbilityLeftData.maxSize - dmaAbilityRightData.maxSize 182 : dmaAbilityRightData.maxSize - dmaAbilityLeftData.maxSize; 183 }); 184 break; 185 } 186 this.dmaTbl!.recycleDataSource = [this.total, ...array]; 187 break; 188 } 189 } 190} 191