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 { getTabDmaAbilityClickData } from '../../../../database/SqlLite.js'; 20import { ns2s } from '../../../../database/ui-worker/ProcedureWorkerCommon.js'; 21import { SpSystemTrace } from '../../../SpSystemTrace.js'; 22import { Utils } from '../../base/Utils.js'; 23 24@element('tabpane-dma-selection-ability') 25export class TabPaneDmaSelectAbility extends BaseElement { 26 private damClickTable: LitTable | null | undefined; 27 private dmaClickSource: Array<Dma> = []; 28 private tableThead: HTMLDivElement | undefined | null; 29 private table: 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 dmaSelectTblNodes = thTable!.querySelectorAll('div'); 55 if (this.tableThead!.hasAttribute('sort')) { 56 this.tableThead!.removeAttribute('sort'); 57 dmaSelectTblNodes.forEach((item) => { 58 item.querySelectorAll('svg').forEach((svg) => { 59 svg.style.display = 'none'; 60 }); 61 }); 62 } 63 } 64 65 queryDmaClickDataByDB(startNs: number): void { 66 this.init(); 67 getTabDmaAbilityClickData(startNs).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 if (item.processName !== null) { 74 item.process = `${item.processName}(${item.processId})`; 75 } else { 76 item.process = `Process(${item.processId})`; 77 } 78 item.sizes = Utils.getBinaryByteWithUnit(item.size); 79 item.timeStamp = ns2s(item.startNs); 80 this.damClickTable!.getItemTextColor = (dmaItem: Dma): any => { 81 if (dmaItem.flag === 1) { 82 return '#d4b550'; 83 } else if (dmaItem.flag === 2) { 84 return '#f86b6b'; 85 } else { 86 return '#000000'; 87 } 88 }; 89 }); 90 this.damClickTable!.snapshotDataSource = data.sort(function ( 91 dmaAbilityLeftData: Dma, 92 dmaAbilityRightData: Dma 93 ) { 94 return dmaAbilityRightData.size - dmaAbilityLeftData.size; 95 }); 96 this.dmaClickSource = data; 97 } else { 98 this.damClickTable!.snapshotDataSource = []; 99 this.dmaClickSource = []; 100 } 101 }); 102 } 103 104 initHtml(): string { 105 return ` 106<style> 107.damClickTable{ 108 height: auto; 109} 110:host{ 111 display: flex; 112 flex-direction: column; 113 padding: 10px 10px; 114} 115</style> 116<lit-table id="damClickTable" class="damClickTable"> 117 <lit-table-column order title="TimeStamp" data-index="timeStamp" key="startNs" align="flex-start" width="1fr" > 118 </lit-table-column> 119 <lit-table-column order title="Process(pid)" data-index="process" key="process" align="flex-start" width="2fr" > 120 </lit-table-column> 121 <lit-table-column order title="Fd" data-index="fd" key="fd" align="flex-start" width="1fr" > 122 </lit-table-column> 123 <lit-table-column order title="Size" data-index="sizes" key="size" align="flex-start" width="1fr" > 124 </lit-table-column> 125 <lit-table-column order title="Ino" data-index="ino" key="ino" align="flex-start" width="1fr" > 126 </lit-table-column> 127 <lit-table-column order title="ExpPid" data-index="expPid" key="expPid" align="flex-start" width="1fr" > 128 </lit-table-column> 129 <lit-table-column order title="ExpTaskComm" data-index="expTaskComm" key="expTaskComm" align="flex-start" width="2fr" > 130 </lit-table-column> 131 <lit-table-column order title="BufName" data-index="bufName" key="bufName" align="flex-start" width="2fr" > 132 </lit-table-column> 133 <lit-table-column order title="ExpName" data-index="expName" key="expName" align="flex-start" width="2fr" > 134 </lit-table-column> 135 <lit-table-column order title="Flag" data-index="flag" key="flag" align="flex-start" width="1fr" > 136 </lit-table-column> 137</lit-table> 138 `; 139 } 140 141 sortDmaByColumn(column: string, sort: number): void { 142 switch (sort) { 143 case 0: 144 this.damClickTable!.recycleDataSource = this.dmaClickSource; 145 break; 146 default: 147 let array = [...this.dmaClickSource]; 148 switch (column) { 149 case 'process': 150 this.damClickTable!.recycleDataSource = array.sort((dmaAbilityLeftData, dmaAbilityRightData) => { 151 return sort === 1 152 ? `${dmaAbilityLeftData.process}`.localeCompare(`${dmaAbilityRightData.process}`) 153 : `${dmaAbilityRightData.process}`.localeCompare(`${dmaAbilityLeftData.process}`); 154 }); 155 break; 156 case 'startNs': 157 this.damClickTable!.recycleDataSource = array.sort((dmaAbilityLeftData, dmaAbilityRightData) => { 158 return sort === 1 159 ? dmaAbilityLeftData.startNs - dmaAbilityRightData.startNs 160 : dmaAbilityRightData.startNs - dmaAbilityLeftData.startNs; 161 }); 162 break; 163 case 'expTaskComm': 164 this.damClickTable!.recycleDataSource = array.sort((dmaAbilityLeftData, dmaAbilityRightData) => { 165 return sort === 1 166 ? `${dmaAbilityLeftData.expTaskComm}`.localeCompare(`${dmaAbilityRightData.expTaskComm}`) 167 : `${dmaAbilityRightData.expTaskComm}`.localeCompare(`${dmaAbilityLeftData.expTaskComm}`); 168 }); 169 break; 170 case 'fd': 171 this.damClickTable!.recycleDataSource = array.sort((dmaAbilityLeftData, dmaAbilityRightData) => { 172 return sort === 1 173 ? dmaAbilityLeftData.fd - dmaAbilityRightData.fd 174 : dmaAbilityRightData.fd - dmaAbilityLeftData.fd; 175 }); 176 break; 177 case 'size': 178 this.damClickTable!.recycleDataSource = array.sort((dmaAbilityLeftData, dmaAbilityRightData) => { 179 return sort === 1 180 ? dmaAbilityLeftData.size - dmaAbilityRightData.size 181 : dmaAbilityRightData.size - dmaAbilityLeftData.size; 182 }); 183 break; 184 case 'ino': 185 this.damClickTable!.recycleDataSource = array.sort((dmaAbilityLeftData, dmaAbilityRightData) => { 186 return sort === 1 187 ? dmaAbilityLeftData.ino - dmaAbilityRightData.ino 188 : dmaAbilityRightData.ino - dmaAbilityLeftData.ino; 189 }); 190 break; 191 case 'expPid': 192 this.damClickTable!.recycleDataSource = array.sort((dmaAbilityLeftData, dmaAbilityRightData) => { 193 return sort === 1 194 ? dmaAbilityLeftData.expPid - dmaAbilityRightData.expPid 195 : dmaAbilityRightData.expPid - dmaAbilityLeftData.expPid; 196 }); 197 break; 198 case 'flag': 199 this.damClickTable!.recycleDataSource = array.sort((dmaAbilityLeftData, dmaAbilityRightData) => { 200 return sort === 1 201 ? dmaAbilityLeftData.flag - dmaAbilityRightData.flag 202 : dmaAbilityRightData.flag - dmaAbilityLeftData.flag; 203 }); 204 break; 205 case 'bufName': 206 this.damClickTable!.recycleDataSource = array.sort((dmaAbilityLeftData, dmaAbilityRightData) => { 207 return sort === 1 208 ? `${dmaAbilityLeftData.bufName}`.localeCompare(`${dmaAbilityRightData.bufName}`) 209 : `${dmaAbilityRightData.bufName}`.localeCompare(`${dmaAbilityLeftData.bufName}`); 210 }); 211 break; 212 case 'expName': 213 this.damClickTable!.recycleDataSource = array.sort((dmaAbilityLeftData, dmaAbilityRightData) => { 214 return sort === 1 215 ? `${dmaAbilityLeftData.expName}`.localeCompare(`${dmaAbilityRightData.expName}`) 216 : `${dmaAbilityRightData.expName}`.localeCompare(`${dmaAbilityLeftData.expName}`); 217 }); 218 break; 219 } 220 break; 221 } 222 } 223} 224