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 { LitTable } from '../../../../../base-ui/table/lit-table'; 18import { SelectionParam } from '../../../../bean/BoxSelection'; 19import '../../../../../base-ui/slicer/lit-slicer'; 20import { LitProgressBar } from '../../../../../base-ui/progress-bar/LitProgressBar'; 21import { FileSysEvent } from '../../../../database/logic-worker/ProcedureLogicWorkerFileSystem'; 22import { procedurePool } from '../../../../database/Procedure'; 23import { TabPaneFileSystemDescTimeSliceHtml } from './TabPaneFileSystemDescTimeSlice.html'; 24 25@element('tabpane-filesystem-desc-time-slice') 26export class TabPaneFileSystemDescTimeSlice extends BaseElement { 27 private fsDescTimeSliceTbl: LitTable | null | undefined; 28 private fsDescTimeSliceTblData: LitTable | null | undefined; 29 private fsDescTimeSliceProgressEL: LitProgressBar | null | undefined; 30 private fsDescTimeSliceLoadingList: number[] = []; 31 private fsDescTimeSliceLoadingPage: unknown; 32 private fsDescTimeSliceSource: Array<FileSysEvent> = []; 33 private fsDescTimeSliceSortKey: string = 'startTs'; 34 private fsDescTimeSliceSortType: number = 0; 35 private currentSelection: SelectionParam | undefined | null; 36 37 set data(fsDescTimeSliceSelection: SelectionParam | null | undefined) { 38 if (fsDescTimeSliceSelection === this.currentSelection) { 39 return; 40 } 41 this.currentSelection = fsDescTimeSliceSelection; 42 if (this.fsDescTimeSliceTbl) { 43 // @ts-ignore 44 this.fsDescTimeSliceTbl.shadowRoot.querySelector('.table').style.height = `${ 45 this.parentElement!.clientHeight - 20 - 31 46 }px`; 47 } 48 if (this.fsDescTimeSliceTblData) { 49 // @ts-ignore 50 this.fsDescTimeSliceTblData.shadowRoot.querySelector('.table').style.height = `${ 51 this.parentElement!.clientHeight - 20 - 31 52 }px`; 53 } 54 this.fsDescTimeSliceTbl!.recycleDataSource = []; 55 this.fsDescTimeSliceTblData!.recycleDataSource = []; 56 if (fsDescTimeSliceSelection) { 57 this.fsDescTimeSliceLoadingList.push(1); 58 this.fsDescTimeSliceProgressEL!.loading = true; // @ts-ignore 59 this.fsDescTimeSliceLoadingPage.style.visibility = 'visible'; // @ts-ignore 60 let startNs = (window as unknown).recordStartNS ?? 0; 61 this.fsDescTimeSliceSource = []; 62 procedurePool.submitWithName( 63 'logic0', 64 'fileSystem-queryFileSysEvents', 65 { 66 leftNs: startNs + fsDescTimeSliceSelection.leftNs, 67 rightNs: startNs + fsDescTimeSliceSelection.rightNs, 68 typeArr: [0], 69 tab: 'time-slice', 70 }, 71 undefined, 72 (res: unknown): void => { 73 // @ts-ignore 74 this.fsDescTimeSliceSource = this.fsDescTimeSliceSource.concat(res.data); // @ts-ignore 75 res.data = null; // @ts-ignore 76 if (!res.isSending) { 77 this.fsDescTimeSliceTbl!.recycleDataSource = this.fsDescTimeSliceSource; 78 this.fsDescTimeSliceLoadingList.splice(0, 1); 79 if (this.fsDescTimeSliceLoadingList.length === 0) { 80 this.fsDescTimeSliceProgressEL!.loading = false; // @ts-ignore 81 this.fsDescTimeSliceLoadingPage.style.visibility = 'hidden'; 82 } 83 } 84 } 85 ); 86 } 87 } 88 89 initElements(): void { 90 this.fsDescTimeSliceLoadingPage = this.shadowRoot?.querySelector('.loading'); 91 this.fsDescTimeSliceProgressEL = this.shadowRoot?.querySelector('.fs-slice-progress') as LitProgressBar; 92 this.fsDescTimeSliceTbl = this.shadowRoot?.querySelector<LitTable>('#tbl-filesystem-desc-time-slice'); 93 this.fsDescTimeSliceTblData = this.shadowRoot?.querySelector<LitTable>('#tbr-filesystem-desc-time-slice'); 94 this.fsDescTimeSliceTbl!.addEventListener('row-click', (fsTimeSliceRowClickEvent): void => { 95 // @ts-ignore 96 let data = fsTimeSliceRowClickEvent.detail.data as FileSysEvent; // @ts-ignore 97 (data as unknown).isSelected = true; 98 // @ts-ignore 99 if ((fsTimeSliceRowClickEvent.detail as unknown).callBack) { 100 // @ts-ignore 101 (fsTimeSliceRowClickEvent.detail as unknown).callBack(true); 102 } 103 procedurePool.submitWithName( 104 'logic0', 105 'fileSystem-queryStack', 106 { callchainId: data.callchainId }, 107 undefined, 108 (res: unknown): void => { 109 // @ts-ignore 110 this.fsDescTimeSliceTblData!.recycleDataSource = res; 111 } 112 ); 113 }); 114 this.fsDescTimeSliceTbl!.addEventListener('column-click', (evt): void => { 115 // @ts-ignore 116 this.fsDescTimeSliceSortKey = evt.detail.key; 117 // @ts-ignore 118 this.fsDescTimeSliceSortType = evt.detail.sort; 119 // @ts-ignore 120 this.sortFsDescTimeSliceTable(evt.detail.key, evt.detail.sort); 121 }); 122 } 123 124 connectedCallback(): void { 125 super.connectedCallback(); 126 new ResizeObserver((): void => { 127 if (this.parentElement?.clientHeight !== 0) { 128 if (this.fsDescTimeSliceTbl) { 129 // @ts-ignore 130 this.fsDescTimeSliceTbl.shadowRoot.querySelector('.table').style.height = `${ 131 this.parentElement!.clientHeight - 10 - 31 132 }px`; 133 this.fsDescTimeSliceTbl.reMeauseHeight(); 134 } 135 if (this.fsDescTimeSliceTblData) { 136 // @ts-ignore 137 this.fsDescTimeSliceTblData.shadowRoot.querySelector('.table').style.height = `${ 138 this.parentElement!.clientHeight - 10 - 31 139 }px`; 140 this.fsDescTimeSliceTblData.reMeauseHeight(); // @ts-ignore 141 this.fsDescTimeSliceLoadingPage.style.height = `${this.parentElement!.clientHeight - 24}px`; 142 } 143 } 144 }).observe(this.parentElement!); 145 } 146 147 sortFsDescTimeSliceTable(key: string, type: number): void { 148 if (type === 0) { 149 this.fsDescTimeSliceTbl!.recycleDataSource = this.fsDescTimeSliceSource; 150 } else { 151 let arr = Array.from(this.fsDescTimeSliceSource); 152 arr.sort((fsTimeSliceA, fsTimeSliceB): number => { 153 if (key === 'startTsStr') { 154 if (type === 1) { 155 return fsTimeSliceA.startTs - fsTimeSliceB.startTs; 156 } else { 157 return fsTimeSliceB.startTs - fsTimeSliceA.startTs; 158 } 159 } else if (key === 'durStr') { 160 if (type === 1) { 161 return fsTimeSliceA.dur - fsTimeSliceB.dur; 162 } else { 163 return fsTimeSliceB.dur - fsTimeSliceA.dur; 164 } 165 } else if (key === 'process') { 166 if (fsTimeSliceA.process > fsTimeSliceB.process) { 167 return type === 2 ? 1 : -1; 168 } else if (fsTimeSliceA.process === fsTimeSliceB.process) { 169 return 0; 170 } else { 171 return type === 2 ? -1 : 1; 172 } 173 } else if (key === 'fd') { 174 if (type === 1) { 175 return fsTimeSliceA.fd - fsTimeSliceB.fd; 176 } else { 177 return fsTimeSliceB.fd - fsTimeSliceA.fd; 178 } 179 } else { 180 return 0; 181 } 182 }); 183 this.fsDescTimeSliceTbl!.recycleDataSource = arr; 184 } 185 } 186 187 initHtml(): string { 188 return TabPaneFileSystemDescTimeSliceHtml; 189 } 190} 191