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.js'; 17import { LitTable } from '../../../../../base-ui/table/lit-table.js'; 18import { Dma } from '../../../../bean/AbilityMonitor.js'; 19import { MemoryConfig } from '../../../../bean/MemoryConfig.js'; 20import { getTabDmaVMTrackerClickData } from '../../../../database/SqlLite.js'; 21import { SpSystemTrace } from '../../../SpSystemTrace.js'; 22import { Utils } from '../../base/Utils.js'; 23import { ns2s } from '../../TimerShaftElement.js'; 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 // @ts-ignore 45 this.damClickTable?.shadowRoot?.querySelector('.table').style.height = this.parentElement.clientHeight - 18 + 'px'; 46 this.parentElement!.style.overflow = 'hidden'; 47 this.damClickTable?.reMeauseHeight(); 48 } 49 }).observe(this.parentElement!); 50 } 51 52 private init(): void { 53 const thTable = this.tableThead!.querySelector('.th'); 54 const dmaSelectVmTrackerTblNodes = thTable!.querySelectorAll('div'); 55 if (this.tableThead!.hasAttribute('sort')) { 56 this.tableThead!.removeAttribute('sort'); 57 dmaSelectVmTrackerTblNodes.forEach((item) => { 58 item.querySelectorAll('svg').forEach((svg) => { 59 svg.style.display = 'none'; 60 }); 61 }); 62 } 63 } 64 65 queryDmaVmTrackerClickDataByDB(startNs: number): void { 66 this.init(); 67 getTabDmaVMTrackerClickData(startNs, MemoryConfig.getInstance().iPid).then((data) => { 68 if (data.length !== null && data.length > 0) { 69 data.forEach((item) => { 70 item.bufName = SpSystemTrace.DATA_DICT.get(item.bufName as number) || '-'; 71 item.expName = SpSystemTrace.DATA_DICT.get(item.expName as number) || '-'; 72 item.expTaskComm = SpSystemTrace.DATA_DICT.get(item.expTaskComm as number) || '-'; 73 item.timeStamp = ns2s(item.startNs); 74 item.sizes = Utils.getBinaryByteWithUnit(item.size); 75 this.damClickTable!.getItemTextColor = (item: Dma): any => { 76 if (item.flag === 1) { 77 return '#d4b550'; 78 } else if (item.flag === 2) { 79 return '#f86b6b'; 80 } else { 81 return '#000000'; 82 } 83 }; 84 }); 85 this.damClickTable!.recycleDataSource = data.sort(function (dmaVmLeftData: Dma, dmaVmRightData: Dma) { 86 return dmaVmRightData.size - dmaVmLeftData.size; 87 }); 88 this.dmaClickSource = data; 89 } else { 90 this.damClickTable!.recycleDataSource = []; 91 this.dmaClickSource = []; 92 } 93 }); 94 } 95 96 initHtml(): string { 97 return ` 98<style> 99.damClickTable{ 100 height: auto; 101} 102:host{ 103 display: flex; 104 flex-direction: column; 105 padding: 10px 10px; 106} 107</style> 108<lit-table id="damClickTable" class="damClickTable"> 109 <lit-table-column order title="TimeStamp" data-index="timeStamp" key="startNs" align="flex-start" width="1fr" > 110 </lit-table-column> 111 <lit-table-column order title="Fd" data-index="fd" key="fd" align="flex-start" width="1fr" > 112 </lit-table-column> 113 <lit-table-column order title="Size" data-index="sizes" key="size" align="flex-start" width="1fr" > 114 </lit-table-column> 115 <lit-table-column order title="Ino" data-index="ino" key="ino" align="flex-start" width="1fr" > 116 </lit-table-column> 117 <lit-table-column order title="ExpPid" data-index="expPid" key="expPid" align="flex-start" width="1fr" > 118 </lit-table-column> 119 <lit-table-column order title="ExpTaskComm" data-index="expTaskComm" key="expTaskComm" align="flex-start" width="1fr" > 120 </lit-table-column> 121 <lit-table-column order title="BufName" data-index="bufName" key="bufName" align="flex-start" width="1fr" > 122 </lit-table-column> 123 <lit-table-column order title="ExpName" data-index="expName" key="expName" align="flex-start" width="1fr" > 124 </lit-table-column> 125 <lit-table-column order title="Flag" data-index="flag" key="flag" align="flex-start" width="1fr" > 126 </lit-table-column> 127</lit-table> 128 `; 129 } 130 131 sortDmaByColumn(column: string, sort: number): void { 132 switch (sort) { 133 case 0: 134 this.damClickTable!.recycleDataSource = this.dmaClickSource; 135 break; 136 default: 137 let array = [...this.dmaClickSource]; 138 switch (column) { 139 case 'startNs': 140 this.damClickTable!.recycleDataSource = array.sort((dmaVmLeftData, dmaVmRightData) => { 141 return sort === 1 142 ? dmaVmLeftData.startNs - dmaVmRightData.startNs 143 : dmaVmRightData.startNs - dmaVmLeftData.startNs; 144 }); 145 break; 146 case 'expTaskComm': 147 this.damClickTable!.recycleDataSource = array.sort((dmaVmLeftData, dmaVmRightData) => { 148 return sort === 1 149 ? `${dmaVmLeftData.expTaskComm}`.localeCompare(`${dmaVmRightData.expTaskComm}`) 150 : `${dmaVmRightData.expTaskComm}`.localeCompare(`${dmaVmLeftData.expTaskComm}`); 151 }); 152 break; 153 case 'fd': 154 this.damClickTable!.recycleDataSource = array.sort((dmaVmLeftData, dmaVmRightData) => { 155 return sort === 1 ? dmaVmLeftData.fd - dmaVmRightData.fd : dmaVmRightData.fd - dmaVmLeftData.fd; 156 }); 157 break; 158 case 'size': 159 this.damClickTable!.recycleDataSource = array.sort((dmaVmLeftData, dmaVmRightData) => { 160 return sort === 1 ? dmaVmLeftData.size - dmaVmRightData.size : dmaVmRightData.size - dmaVmLeftData.size; 161 }); 162 break; 163 case 'ino': 164 this.damClickTable!.recycleDataSource = array.sort((dmaVmLeftData, dmaVmRightData) => { 165 return sort === 1 ? dmaVmLeftData.ino - dmaVmRightData.ino : dmaVmRightData.ino - dmaVmLeftData.ino; 166 }); 167 break; 168 case 'expPid': 169 this.damClickTable!.recycleDataSource = array.sort((dmaVmLeftData, dmaVmRightData) => { 170 return sort === 1 171 ? dmaVmLeftData.expPid - dmaVmRightData.expPid 172 : dmaVmRightData.expPid - dmaVmLeftData.expPid; 173 }); 174 break; 175 case 'flag': 176 this.damClickTable!.recycleDataSource = array.sort((dmaVmLeftData, dmaVmRightData) => { 177 return sort === 1 ? dmaVmLeftData.flag - dmaVmRightData.flag : dmaVmRightData.flag - dmaVmLeftData.flag; 178 }); 179 break; 180 case 'bufName': 181 this.damClickTable!.recycleDataSource = array.sort((dmaVmLeftData, dmaVmRightData) => { 182 return sort === 1 183 ? `${dmaVmLeftData.bufName}`.localeCompare(`${dmaVmRightData.bufName}`) 184 : `${dmaVmRightData.bufName}`.localeCompare(`${dmaVmLeftData.bufName}`); 185 }); 186 break; 187 case 'expName': 188 this.damClickTable!.recycleDataSource = array.sort((dmaVmLeftData, dmaVmRightData) => { 189 return sort === 1 190 ? `${dmaVmLeftData.expName}`.localeCompare(`${dmaVmRightData.expName}`) 191 : `${dmaVmRightData.expName}`.localeCompare(`${dmaVmLeftData.expName}`); 192 }); 193 break; 194 } 195 break; 196 } 197 } 198} 199