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 Dma } from '../../../../bean/AbilityMonitor'; 19import { MemoryConfig } from '../../../../bean/MemoryConfig'; 20import { SpSystemTrace } from '../../../SpSystemTrace'; 21import { Utils } from '../../base/Utils'; 22import { ns2s } from '../../TimerShaftElement'; 23import { getTabDmaVMTrackerClickData } from '../../../../database/sql/Dma.sql'; 24 25@element('tabpane-dma-selection-vmtracker') 26export class TabPaneDmaSelectVmTracker extends BaseElement { 27 private damClickTable: LitTable | null | undefined; 28 private dmaClickSource: Array<Dma> = []; 29 private tableThead: HTMLDivElement | undefined | null; 30 31 initElements(): void { 32 this.damClickTable = this.shadowRoot?.querySelector<LitTable>('#damClickTable'); 33 this.tableThead = this.damClickTable?.shadowRoot?.querySelector('.thead') as HTMLDivElement; 34 this.damClickTable!.addEventListener('column-click', (e) => { 35 // @ts-ignore 36 this.sortDmaByColumn(e.detail.key, e.detail.sort); 37 }); 38 } 39 40 connectedCallback(): void { 41 super.connectedCallback(); 42 new ResizeObserver(() => { 43 if (this.parentElement?.clientHeight !== 0) { 44 if (this.damClickTable) { 45 // @ts-ignore 46 this.damClickTable.shadowRoot.querySelector('.table').style.height = 47 this.parentElement!.clientHeight - 18 + 'px'; 48 this.damClickTable.reMeauseHeight(); 49 } 50 this.parentElement!.style.overflow = 'hidden'; 51 } 52 }).observe(this.parentElement!); 53 } 54 55 private init(): void { 56 const thTable = this.tableThead!.querySelector('.th'); 57 const dmaSelectVmTrackerTblNodes = thTable!.querySelectorAll('div'); 58 if (this.tableThead!.hasAttribute('sort')) { 59 this.tableThead!.removeAttribute('sort'); 60 dmaSelectVmTrackerTblNodes.forEach((item) => { 61 item.querySelectorAll('svg').forEach((svg) => { 62 svg.style.display = 'none'; 63 }); 64 }); 65 } 66 } 67 68 queryDmaVmTrackerClickDataByDB(startNs: number): void { 69 this.init(); 70 getTabDmaVMTrackerClickData(startNs, MemoryConfig.getInstance().iPid).then((data) => { 71 if (data.length !== null && data.length > 0) { 72 data.forEach((item) => { 73 item.bufName = SpSystemTrace.DATA_DICT.get(item.bufName as number) || '-'; 74 item.expName = SpSystemTrace.DATA_DICT.get(item.expName as number) || '-'; 75 item.expTaskComm = SpSystemTrace.DATA_DICT.get(item.expTaskComm as number) || '-'; 76 item.timeStamp = ns2s(item.startNs); 77 item.sizes = Utils.getBinaryByteWithUnit(item.size); 78 // @ts-ignore 79 this.damClickTable!.getItemTextColor = (item: Dma): unknown => { 80 if (item.flag === 1) { 81 return '#d4b550'; 82 } else if (item.flag === 2) { 83 return '#f86b6b'; 84 } else { 85 return '#000000'; 86 } 87 }; 88 }); 89 this.damClickTable!.recycleDataSource = data.sort(function (dmaVmLeftData: Dma, dmaVmRightData: Dma) { 90 return dmaVmRightData.size - dmaVmLeftData.size; 91 }); 92 this.dmaClickSource = data; 93 } else { 94 this.damClickTable!.recycleDataSource = []; 95 this.dmaClickSource = []; 96 } 97 }); 98 } 99 100 initHtml(): string { 101 return ` 102<style> 103.damClickTable{ 104 height: auto; 105} 106:host{ 107 display: flex; 108 flex-direction: column; 109 padding: 10px 10px; 110} 111</style> 112<lit-table id="damClickTable" class="damClickTable"> 113 <lit-table-column order title="TimeStamp" data-index="timeStamp" key="startNs" align="flex-start" width="1fr" > 114 </lit-table-column> 115 <lit-table-column order title="Fd" data-index="fd" key="fd" align="flex-start" width="1fr" > 116 </lit-table-column> 117 <lit-table-column order title="Size" data-index="sizes" key="size" align="flex-start" width="1fr" > 118 </lit-table-column> 119 <lit-table-column order title="Ino" data-index="ino" key="ino" align="flex-start" width="1fr" > 120 </lit-table-column> 121 <lit-table-column order title="ExpPid" data-index="expPid" key="expPid" align="flex-start" width="1fr" > 122 </lit-table-column> 123 <lit-table-column order title="ExpTaskComm" data-index="expTaskComm" key="expTaskComm" align="flex-start" width="1fr" > 124 </lit-table-column> 125 <lit-table-column order title="BufName" data-index="bufName" key="bufName" align="flex-start" width="1fr" > 126 </lit-table-column> 127 <lit-table-column order title="ExpName" data-index="expName" key="expName" align="flex-start" width="1fr" > 128 </lit-table-column> 129 <lit-table-column order title="Flag" data-index="flag" key="flag" align="flex-start" width="1fr" > 130 </lit-table-column> 131</lit-table> 132 `; 133 } 134 135 private compareValues(a: unknown, b: unknown, sort: number): number { 136 if (sort === 1) { 137 // @ts-ignore 138 return a > b ? 1 : a < b ? -1 : 0; 139 } else { 140 // @ts-ignore 141 return a < b ? 1 : a > b ? -1 : 0; 142 } 143 } 144 145 sortDmaByColumn(column: string, sort: number): void { 146 const comparisonFunctions: { [key: string]: (a: unknown, b: unknown) => number } = { 147 // @ts-ignore 148 startNs: (a, b) => this.compareValues(a.startNs, b.startNs, sort), 149 // @ts-ignore 150 expTaskComm: (a, b) => this.compareValues(`${a.expTaskComm}`, `${b.expTaskComm}`, sort), 151 // @ts-ignore 152 fd: (a, b) => this.compareValues(a.fd, b.fd, sort), 153 // @ts-ignore 154 size: (a, b) => this.compareValues(a.size, b.size, sort), 155 // @ts-ignore 156 ino: (a, b) => this.compareValues(a.ino, b.ino, sort), 157 // @ts-ignore 158 expPid: (a, b) => this.compareValues(a.expPid, b.expPid, sort), 159 // @ts-ignore 160 flag: (a, b) => this.compareValues(a.flag, b.flag, sort), 161 // @ts-ignore 162 bufName: (a, b) => this.compareValues(`${a.bufName}`, `${b.bufName}`, sort), 163 // @ts-ignore 164 expName: (a, b) => this.compareValues(`${a.expName}`, `${b.expName}`, sort), 165 }; 166 167 if (sort === 0) { 168 this.damClickTable!.recycleDataSource = this.dmaClickSource; 169 } else { 170 const array = [...this.dmaClickSource]; 171 const comparisonFunction = comparisonFunctions[column] || (() => 0); 172 this.damClickTable!.recycleDataSource = array.sort(comparisonFunction); 173 } 174 } 175} 176