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 LitSelect } from '../../../../../base-ui/select/LitSelect'; 18import { LitSelectOption } from '../../../../../base-ui/select/LitSelectOption'; 19import { type LitTable } from '../../../../../base-ui/table/lit-table'; 20import { type DmaComparison } from '../../../../bean/AbilityMonitor'; 21import { MemoryConfig } from '../../../../bean/MemoryConfig'; 22import { type SnapshotStruct } from '../../../../database/ui-worker/ProcedureWorkerSnapshot'; 23import { Utils } from '../../base/Utils'; 24import { resizeObserverFromMemory } from '../SheetUtils'; 25import '../TabPaneJsMemoryFilter'; 26import { type TabPaneJsMemoryFilter } from '../TabPaneJsMemoryFilter'; 27import { getTabDmaVmTrackerComparisonData } from '../../../../database/sql/Dma.sql'; 28 29@element('tabpane-dma-vmtracker-comparison') 30export class TabPaneDmaVmTrackerComparison extends BaseElement { 31 private damClickTables: LitTable | null | undefined; 32 private comparisonSelect: TabPaneJsMemoryFilter | null | undefined; 33 private selectEl: LitSelect | null | undefined; 34 private selfData: Array<DmaComparison> = []; 35 private comparisonSource: Array<DmaComparison> = []; 36 37 initElements(): void { 38 this.damClickTables = this.shadowRoot?.querySelector<LitTable>('#damClickTables'); 39 this.comparisonSelect = this.shadowRoot?.querySelector('#filter') as TabPaneJsMemoryFilter; 40 this.selectEl = this.comparisonSelect?.shadowRoot?.querySelector<LitSelect>('lit-select'); 41 this.damClickTables!.addEventListener('column-click', (e) => { 42 // @ts-ignore 43 this.sortDmaByColumn(e.detail.key, e.detail.sort); 44 }); 45 } 46 47 connectedCallback(): void { 48 super.connectedCallback(); 49 resizeObserverFromMemory(this.parentElement!, this.damClickTables!, this.comparisonSelect!); 50 } 51 52 async queryDataByDB(startNs: number): Promise<DmaComparison[]> { 53 let timeStampData: Array<DmaComparison> = []; 54 await getTabDmaVmTrackerComparisonData(startNs, MemoryConfig.getInstance().iPid).then((data) => { 55 timeStampData = data; 56 }); 57 return timeStampData; 58 } 59 60 async comparisonDataByDB(startNs: number, dataList: Array<SnapshotStruct>): Promise<void> { 61 this.selfData = []; 62 const dataArray = []; 63 this.selfData = await this.queryDataByDB(startNs); 64 for (let item of dataList) { 65 if (item.startNs !== startNs) { 66 dataArray.push(item); 67 } 68 } 69 this.selectStamps(dataArray); 70 this.getComparisonData(dataArray[0].startNs); 71 } 72 73 selectStamps(dmaVmTrackerComList: Array<SnapshotStruct>): void { 74 let input = this.selectEl!.shadowRoot?.querySelector('input') as HTMLInputElement; 75 this.selectEl!.innerHTML = ''; 76 let option = new LitSelectOption(); 77 option.innerHTML = 'File Name'; 78 option.setAttribute('disabled', 'disabled'); 79 this.selectEl?.appendChild(option); 80 if (dmaVmTrackerComList[0].name) { 81 option.setAttribute('value', dmaVmTrackerComList[0].name); 82 } 83 option.setAttribute('value', dmaVmTrackerComList[0].name); 84 this.selectEl!.defaultValue = dmaVmTrackerComList[0].name || ''; 85 this.selectEl!.placeholder = dmaVmTrackerComList[0].name || ''; 86 this.selectEl!.dataSource = dmaVmTrackerComList; 87 this.selectEl!.querySelectorAll('lit-select-option').forEach((option) => { 88 option.addEventListener('onSelected', async (e) => { 89 for (let f of dmaVmTrackerComList) { 90 if (input.value === f.name) { 91 this.getComparisonData(f.startNs); 92 } 93 } 94 e.stopPropagation(); 95 }); 96 }); 97 } 98 99 async getComparisonData(targetStartNs: number): Promise<void> { 100 let comparison: Array<DmaComparison> = []; 101 comparison = await this.queryDataByDB(targetStartNs); 102 comparison[0].value = this.selfData[0].value - comparison[0].value; 103 comparison[0].sizes = Utils.getBinaryByteWithUnit(comparison[0].value); 104 this.comparisonSource = comparison; 105 this.damClickTables!.recycleDataSource = comparison; 106 } 107 108 sortDmaByColumn(column: string, sort: number): void { 109 switch (sort) { 110 case 0: 111 this.damClickTables!.recycleDataSource = this.comparisonSource; 112 break; 113 default: 114 let array = [...this.comparisonSource]; 115 switch (column) { 116 case 'sizeDelta': 117 this.damClickTables!.recycleDataSource = array.sort((dmaComparisonLeftData, dmaComparisonRightData) => { 118 return sort === 1 119 ? dmaComparisonLeftData.value - dmaComparisonRightData.value 120 : dmaComparisonRightData.value - dmaComparisonLeftData.value; 121 }); 122 break; 123 } 124 break; 125 } 126 } 127 128 initHtml(): string { 129 return ` 130<style> 131.damClickTables{ 132 height: auto; 133} 134:host{ 135 display: flex; 136 flex-direction: column; 137 padding: 10px 10px; 138} 139</style> 140<lit-table id="damClickTables" class="damClickTables"> 141 <lit-table-column order title="SizeDelta" data-index="sizes" key="size" align="flex-start" width="1fr" > 142 </lit-table-column> 143</lit-table> 144<tab-pane-js-memory-filter id="filter" first hideFilter ></tab-pane-js-memory-filter> 145 `; 146 } 147} 148