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 data 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 { LitSelect } from '../../../../../base-ui/select/LitSelect.js'; 18import { LitSelectOption } from '../../../../../base-ui/select/LitSelectOption.js'; 19import { SelectionParam } from '../../../../bean/BoxSelection.js'; 20import { MemoryConfig } from '../../../../bean/MemoryConfig.js'; 21import { queryProcessPurgeableSelectionTab } from '../../../../database/SqlLite.js'; 22import { Utils } from '../../base/Utils.js'; 23import { CompareStruct, compare, resizeObserverFromMemory } from '../SheetUtils.js'; 24import { TabPaneJsMemoryFilter } from '../TabPaneJsMemoryFilter.js'; 25@element('tabpane-purgeable-pin-comparison-vm') 26export class TabPanePurgPinComparisonVM extends BaseElement { 27 private purgeablePinTable: LitTable | null | undefined; 28 private purgeablePinSource: Array<unknown> = []; 29 private filterEl: TabPaneJsMemoryFilter | undefined | null; 30 private selectEl: LitSelect | undefined | null; 31 32 public initElements(): void { 33 this.purgeablePinTable = this.shadowRoot?.querySelector<LitTable>('#tb-purgeable-pin'); 34 this.filterEl = this.shadowRoot!.querySelector<TabPaneJsMemoryFilter>('#filter'); 35 this.selectEl = this.filterEl?.shadowRoot?.querySelector<LitSelect>('lit-select'); 36 } 37 public totalData(data: SelectionParam | any, dataList: any): void { 38 //@ts-ignore 39 this.purgeablePinTable?.shadowRoot?.querySelector('.table')?.style?.height = `${ 40 this.parentElement!.clientHeight - 45 41 }px`; 42 this.purgeablePinSource = []; 43 let fileArr: any[] = []; 44 for (let fileData of dataList) { 45 if (fileData.startNs !== data.startNs) { 46 fileArr.push(fileData); 47 } 48 } 49 fileArr = fileArr.sort(); 50 this.initSelect(data.startNs, fileArr); 51 this.updateComparisonData(data.startNs, fileArr[0].startNs); 52 } 53 private initSelect(fileStartNs: number, purgePinComVmList: Array<any>): void { 54 let that = this; 55 let input = this.selectEl!.shadowRoot?.querySelector('input') as HTMLInputElement; 56 this.selectEl!.innerHTML = ''; 57 let option = new LitSelectOption(); 58 option.innerHTML = 'File Name'; 59 option.setAttribute('disabled', 'disabled'); 60 this.selectEl?.appendChild(option); 61 if (purgePinComVmList[0].name) { 62 option.setAttribute('value', purgePinComVmList[0].name); 63 } 64 this.selectEl!.defaultValue = purgePinComVmList[0].name; 65 this.selectEl!.placeholder = purgePinComVmList[0].name; 66 this.selectEl!.dataSource = purgePinComVmList; 67 this.selectEl!.querySelectorAll('lit-select-option').forEach((a) => { 68 a.addEventListener('onSelected', (e: any) => { 69 for (let f of purgePinComVmList) { 70 if (input.value === f.name) { 71 that.updateComparisonData(fileStartNs, f.startNs); 72 } 73 } 74 e.stopPropagation(); 75 }); 76 }); 77 } 78 private async updateComparisonData(baseTime: number, targetTime: number): Promise<void> { 79 this.purgeablePinSource = []; 80 let tableData = await this.queryPinVMData(baseTime, targetTime); 81 this.purgeablePinSource.push(tableData); 82 if (this.purgeablePinSource.length > 0) { 83 this.purgeablePinTable!.recycleDataSource = this.purgeablePinSource; 84 } else { 85 this.purgeablePinTable!.recycleDataSource = []; 86 } 87 } 88 private async queryPinVMData(baseTime: number, targetTime: number): Promise<any> { 89 let delta = { 90 purgPinDelta: '0Bytes', 91 shmPurgPinDelta: '0Bytes', 92 }; 93 const baseArr: CompareStruct[] = []; 94 const targetArr: CompareStruct[] = []; 95 // 点击的 96 await queryProcessPurgeableSelectionTab(baseTime, MemoryConfig.getInstance().iPid).then(async (results) => { 97 for (let i = 0; i < results.length; i++) { 98 baseArr.push(new CompareStruct(results[i].name, results[i].value)); 99 } 100 // 被比较的 101 await queryProcessPurgeableSelectionTab(targetTime, MemoryConfig.getInstance().iPid).then((results) => { 102 for (let i = 0; i < results.length; i++) { 103 targetArr.push(new CompareStruct(results[i].name, results[i].value)); 104 } 105 let compareData = compare(targetArr, baseArr); 106 for (let data of compareData) { 107 if (data.key === 'PinedPurg') { 108 delta.purgPinDelta = Utils.getBinaryByteWithUnit(data.value); 109 } else if (data.key === 'ShmPurg') { 110 delta.shmPurgPinDelta = Utils.getBinaryByteWithUnit(data.value); 111 } 112 } 113 }); 114 }); 115 return delta; 116 } 117 118 public connectedCallback(): void { 119 super.connectedCallback(); 120 resizeObserverFromMemory(this.parentElement!, this.purgeablePinTable!, this.filterEl!); 121 } 122 public initHtml(): string { 123 return ` 124 <style> 125 :host{ 126 display: flex; 127 flex-direction: column; 128 padding: 10px 10px; 129 } 130 </style> 131 <lit-table id="tb-purgeable-pin" style="height: auto"> 132 <lit-table-column width="1fr" title="PurgPinDelta" data-index="purgPinDelta" align="flex-start"> 133 </lit-table-column> 134 <lit-table-column width="1fr" title="ShmPurgPinDelta" data-index="shmPurgPinDelta" align="flex-start"> 135 </lit-table-column> 136 </lit-table> 137 <lit-progress-bar class="progress"></lit-progress-bar> 138 <tab-pane-js-memory-filter id="filter" first hideFilter></tab-pane-js-memory-filter> 139 `; 140 } 141} 142