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 */ 15import { BaseElement, element } from '../../../../../base-ui/BaseElement.js'; 16import { LitTable } from '../../../../../base-ui/table/lit-table.js'; 17import { queryVmTrackerShmSelectionData } from '../../../../database/SqlLite.js'; 18import { SpSystemTrace } from '../../../SpSystemTrace.js'; 19import { Utils } from '../../base/Utils.js'; 20import { SnapshotStruct } from '../../../../database/ui-worker/ProcedureWorkerSnapshot'; 21import { MemoryConfig } from '../../../../bean/MemoryConfig.js'; 22import { ns2s } from '../../../../database/ui-worker/ProcedureWorkerCommon.js'; 23 24@element('tabpane-vmtracker-shm-selection') 25export class TabPaneVmTrackerShmSelection extends BaseElement { 26 private TableEl: LitTable | undefined | null; 27 private shmData: Array<any> = []; 28 private memoryConfig: MemoryConfig = MemoryConfig.getInstance(); 29 private tabTitle: HTMLDivElement | undefined | null; 30 31 setShmData(data: SnapshotStruct, dataList: Array<SnapshotStruct>): void { 32 this.init(); 33 this.clear(); 34 this.queryDataByDB(data); 35 } 36 37 initElements(): void { 38 this.TableEl = this.shadowRoot!.querySelector<LitTable>('#tb-shm-selection') as LitTable; 39 this.tabTitle = this.TableEl!.shadowRoot?.querySelector('.thead') as HTMLDivElement; 40 this.TableEl!.addEventListener('column-click', (evt) => { 41 // @ts-ignore 42 this.sortByColumn(evt.detail.key, evt.detail.sort); 43 }); 44 } 45 46 queryDataByDB(data: SnapshotStruct): void { 47 queryVmTrackerShmSelectionData(data.startNs, this.memoryConfig.iPid).then((result) => { 48 if (result.length > 0) { 49 for (let filter of result) { 50 filter.name = SpSystemTrace.DATA_DICT.get(filter.name)?.split('/'); 51 filter.ts = ns2s(filter.startNS); 52 filter.sizeStr = Utils.getBinaryByteWithUnit(filter.size); 53 this.TableEl!.getItemTextColor = (filter): any => { 54 if (filter.flag === 1) { 55 return '#d4b550'; 56 } else if (filter.flag === 2) { 57 return '#f86b6b'; 58 } else { 59 return '#000000'; 60 } 61 }; 62 } 63 this.shmData = result.sort((a, b) => b.size - a.size); 64 this.TableEl!.recycleDataSource = this.shmData; 65 } 66 }); 67 } 68 69 clear(): void { 70 this.TableEl!.recycleDataSource = []; 71 } 72 73 private init(): void { 74 const thTable = this.tabTitle!.querySelector('.th'); 75 const list = thTable!.querySelectorAll('div'); 76 if (this.tabTitle!.hasAttribute('sort')) { 77 this.tabTitle!.removeAttribute('sort'); 78 list.forEach((item) => { 79 item.querySelectorAll('svg').forEach((svg) => { 80 svg.style.display = 'none'; 81 }); 82 }); 83 } 84 } 85 86 sortByColumn(column: string, sort: number): void { 87 switch (sort) { 88 case 0: 89 this.TableEl!.snapshotDataSource = this.shmData; 90 break; 91 default: 92 let arr = [...this.shmData]; 93 switch (column) { 94 case 'ts': 95 this.TableEl!.snapshotDataSource = arr.sort((leftTs, rightTs) => { 96 return sort === 1 ? leftTs.startNS - rightTs.startNS : rightTs.startNS - leftTs.startNS; 97 }); 98 break; 99 case 'fd': 100 this.TableEl!.snapshotDataSource = arr.sort((leftFd, rightFd) => { 101 return sort === 1 ? leftFd.fd - rightFd.fd : rightFd.fd - leftFd.fd; 102 }); 103 break; 104 case 'sizeStr': 105 this.TableEl!.snapshotDataSource = arr.sort((leftSize, rightSize) => { 106 return sort === 1 ? leftSize.size - rightSize.size : rightSize.size - leftSize.size; 107 }); 108 break; 109 case 'adj': 110 this.TableEl!.snapshotDataSource = arr.sort((leftAdj, rightAdj) => { 111 return sort === 1 ? leftAdj.adj - rightAdj.adj : rightAdj.adj - leftAdj.adj; 112 }); 113 break; 114 case 'name': 115 this.TableEl!.snapshotDataSource = arr.sort((leftName, rightName) => { 116 if (sort === 1) { 117 if (leftName.name > rightName.name) { 118 return 1; 119 } else if (leftName.name === rightName.name) { 120 return 0; 121 } else { 122 return -1; 123 } 124 } else { 125 if (rightName.name > leftName.name) { 126 return 1; 127 } else if (leftName.name === rightName.name) { 128 return 0; 129 } else { 130 return -1; 131 } 132 } 133 }); 134 break; 135 case 'id': 136 this.TableEl!.snapshotDataSource = arr.sort((leftId, rightId) => { 137 return sort === 1 ? leftId.id - rightId.id : rightId.id - leftId.id; 138 }); 139 break; 140 case 'time': 141 this.TableEl!.snapshotDataSource = arr.sort((leftTime, rightTime) => { 142 return sort === 1 ? leftTime.time - rightTime.time : rightTime.time - leftTime.time; 143 }); 144 break; 145 case 'count': 146 this.TableEl!.snapshotDataSource = arr.sort((leftCount, rightCount) => { 147 return sort === 1 ? leftCount.count - rightCount.count : rightCount.count - leftCount.count; 148 }); 149 break; 150 case 'purged': 151 this.TableEl!.snapshotDataSource = arr.sort((leftPurged, rightPurged) => { 152 return sort === 1 ? leftPurged.purged - rightPurged.purged : rightPurged.purged - leftPurged.purged; 153 }); 154 break; 155 case 'flag': 156 this.TableEl!.snapshotDataSource = arr.sort((leftFlag, rightFlag) => { 157 return sort === 1 ? leftFlag.flag - rightFlag.flag : rightFlag.flag - leftFlag.flag; 158 }); 159 break; 160 } 161 break; 162 } 163 } 164 165 initHtml(): string { 166 return ` 167 <style> 168 :host{ 169 display: flex; 170 flex-direction: column; 171 padding: 10px 10px 0 10px; 172 height: calc(100% - 10px - 31px); 173 } 174 tab-pane-filter { 175 border: solid rgb(216,216,216) 1px; 176 float: left; 177 position: fixed; 178 bottom: 0; 179 width: 100%; 180 } 181 selector{ 182 display: none; 183 } 184 .show{ 185 display: flex; 186 flex: 1; 187 } 188 .progress{ 189 bottom: 33px; 190 position: absolute; 191 height: 1px; 192 left: 0; 193 right: 0; 194 } 195 .loading{ 196 bottom: 0; 197 position: absolute; 198 left: 0; 199 right: 0; 200 width:100%; 201 background:transparent; 202 z-index: 999999; 203 } 204 </style> 205 <lit-table id="tb-shm-selection" style="height: auto"> 206 <lit-table-column width="100px" title="TimeStamp" data-index="ts" key="ts" align="flex-start" order> 207 </lit-table-column> 208 <lit-table-column width="1fr" title="Fd" data-index="fd" key="fd" align="flex-start" order> 209 </lit-table-column> 210 <lit-table-column width="1fr" title="Size" data-index="sizeStr" key="sizeStr" align="flex-start" order> 211 </lit-table-column> 212 <lit-table-column width="1fr" title="Adj" data-index="adj" key="adj" align="flex-start" order> 213 </lit-table-column> 214 <lit-table-column width="250px" title="AshmName" data-index="name" key="name" align="flex-start" order> 215 </lit-table-column> 216 <lit-table-column width="1fr" title="Id" data-index="id" key="id" align="flex-start" order> 217 </lit-table-column> 218 <lit-table-column width="200px" title="Time" data-index="time" key="time" align="flex-start" order> 219 </lit-table-column> 220 <lit-table-column width="1fr" title="Refcount" data-index="count" key="count" align="flex-start" order> 221 </lit-table-column> 222 <lit-table-column width="1fr" title="Purged" data-index="purged" key="purged" align="flex-start" order> 223 </lit-table-column> 224 <lit-table-column width="1fr" title="Flag" data-index="flag" key="flag" align="flex-start" order> 225 </lit-table-column> 226 </lit-table> 227 `; 228 } 229} 230