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 {SelectionParam} from "../../../../bean/BoxSelection.js"; 19import "../../../../../base-ui/slicer/lit-slicer.js"; 20import {LitProgressBar} from "../../../../../base-ui/progress-bar/LitProgressBar.js"; 21import {FilterData, TabPaneFilter} from "../TabPaneFilter.js"; 22import {FileSysEvent} from "../../../../database/logic-worker/ProcedureLogicWorkerFileSystem.js"; 23import {procedurePool} from "../../../../database/Procedure.js"; 24 25@element('tabpane-filesystem-desc-history') 26export class TabPaneFileSystemDescHistory extends BaseElement { 27 private tbl: LitTable | null | undefined; 28 private tblData: LitTable | null | undefined; 29 private filter: TabPaneFilter | null | undefined; 30 private progressEL:LitProgressBar | null | undefined; 31 private loadingList:number[] = [] 32 private loadingPage:any; 33 private source: Array<FileSysEvent> = []; 34 private filterSource: Array<FileSysEvent> = []; 35 private sortKey: string = "startTs"; 36 private sortType: number = 0; 37 private filterEventType: string = "0"; 38 private filterProcess: string = "0"; 39 private currentSelection: SelectionParam | undefined | null 40 private eventList:string[] | null |undefined; 41 private processList:string[] | null |undefined; 42 43 set data(val: SelectionParam | null | undefined) { 44 if (val == this.currentSelection) { 45 return 46 } 47 this.currentSelection = val 48 // @ts-ignore 49 this.tbl?.shadowRoot.querySelector(".table").style.height = (this.parentElement.clientHeight - 20 - 31) + "px" 50 // @ts-ignore 51 this.tblData?.shadowRoot.querySelector(".table").style.height = (this.parentElement.clientHeight - 20 - 31) + "px" 52 this.tbl!.recycleDataSource = []; 53 this.tblData!.recycleDataSource = []; 54 if (val) { 55 this.loadingList.push(1) 56 this.progressEL!.loading = true 57 this.loadingPage.style.visibility = "visible" 58 this.source = []; 59 procedurePool.submitWithName("logic0","fileSystem-queryFileSysEvents", 60 {leftNs:val.leftNs,rightNs:val.rightNs,typeArr:[0,1],tab:"history"},undefined,(res:any)=>{ 61 this.source = this.source.concat(res.data) 62 res.data = null; 63 if(!res.isSending){ 64 this.tbl!.recycleDataSource = this.source; 65 this.filterSource = this.source; 66 this.setProcessFilter(); 67 this.loadingList.splice(0,1) 68 if(this.loadingList.length == 0) { 69 this.progressEL!.loading = false 70 this.loadingPage.style.visibility = "hidden" 71 } 72 } 73 }) 74 } 75 } 76 77 setProcessFilter(){ 78 this.processList = ["All Process"]; 79 this.source.map(it => { 80 if(this.processList!.findIndex(a => a === it.process) == -1){ 81 this.processList!.push(it.process); 82 } 83 }) 84 this.filter!.setSelectList(this.eventList,this.processList,"",""); 85 this.filter!.firstSelect = "0"; 86 this.filter!.secondSelect = "0"; 87 } 88 89 filterData(){ 90 let pfv = parseInt(this.filterProcess) 91 if(this.filterEventType == "0"){ 92 this.filterSource = pfv === 0 ? this.source : this.source.filter((it) => it.process === this.processList![pfv]); 93 }else if(this.filterEventType == "1"){ 94 this.filterSource = this.source.filter((it) => it.type == 0 && ( pfv === 0 ? true : it.process === this.processList![pfv])); 95 }else if(this.filterEventType == "2"){ 96 this.filterSource = this.source.filter((it) => it.type == 1 && ( pfv === 0 ? true : it.process === this.processList![pfv])); 97 }else{ 98 this.filterSource = pfv === 0 ? this.source : this.source.filter((it) => it.process === this.processList![pfv]); 99 } 100 this.tblData!.recycleDataSource = []; 101 this.sortTable(this.sortKey,this.sortType); 102 } 103 104 initElements(): void { 105 this.loadingPage = this.shadowRoot?.querySelector('.loading'); 106 this.progressEL = this.shadowRoot?.querySelector('.progress') as LitProgressBar; 107 this.tbl = this.shadowRoot?.querySelector<LitTable>('#tbl'); 108 this.tblData = this.shadowRoot?.querySelector<LitTable>('#tbr'); 109 this.tbl!.addEventListener('row-click', (e) => { 110 // @ts-ignore 111 let data = (e.detail.data as FileSysEvent); 112 (data as any).isSelected = true; 113 // @ts-ignore 114 if ((e.detail as any).callBack) { 115 // @ts-ignore 116 (e.detail as any).callBack(true) 117 } 118 procedurePool.submitWithName("logic0","fileSystem-queryStack", 119 { callchainId : data.callchainId },undefined,(res:any)=>{ 120 this.tblData!.recycleDataSource = res; 121 }) 122 }); 123 this.tbl!.addEventListener('column-click', (evt) => { 124 // @ts-ignore 125 this.sortKey = evt.detail.key 126 // @ts-ignore 127 this.sortType = evt.detail.sort 128 // @ts-ignore 129 this.sortTable(evt.detail.key,evt.detail.sort) 130 }) 131 this.filter = this.shadowRoot?.querySelector<TabPaneFilter>("#filter"); 132 this.eventList = ['All FD Event','All Open Event','All Close Event']; 133 this.processList = ['All Process']; 134 this.filter!.setSelectList(this.eventList,this.processList,"",""); 135 this.filter!.firstSelect = "0"; 136 this.filter!.getFilterData((data: FilterData) => { 137 this.filterEventType = data.firstSelect || "0"; 138 this.filterProcess = data.secondSelect || "0"; 139 this.filterData(); 140 }) 141 } 142 143 connectedCallback() { 144 super.connectedCallback(); 145 new ResizeObserver((entries) => { 146 if (this.parentElement?.clientHeight != 0) { 147 // @ts-ignore 148 this.tbl?.shadowRoot.querySelector(".table").style.height = (this.parentElement.clientHeight) - 10 - 31 + "px"; 149 this.tbl?.reMeauseHeight(); 150 // @ts-ignore 151 this.tblData?.shadowRoot.querySelector(".table").style.height = (this.parentElement.clientHeight) - 10 -31 + "px" 152 this.tblData?.reMeauseHeight() 153 this.loadingPage.style.height = (this.parentElement!.clientHeight - 24) + "px" 154 } 155 }).observe(this.parentElement!); 156 } 157 158 sortTable(key: string,type:number){ 159 if(type == 0){ 160 this.tbl!.recycleDataSource = this.filterSource 161 }else{ 162 let arr = Array.from(this.filterSource) 163 arr.sort((a,b):number=>{ 164 if(key == "startTsStr"){ 165 if(type == 1){ 166 return a.startTs - b.startTs ; 167 }else{ 168 return b.startTs - a.startTs ; 169 } 170 }else if(key == "durStr"){ 171 if(type == 1){ 172 return a.dur - b.dur ; 173 }else{ 174 return b.dur - a.dur ; 175 } 176 }else if(key == "process"){ 177 if (a.process > b.process) { 178 return type === 2 ? 1 : -1; 179 } else if (a.process == b.process) { 180 return 0; 181 } else { 182 return type === 2 ? -1 : 1; 183 } 184 } else if(key == "typeStr"){ 185 if (a.typeStr > b.typeStr) { 186 return type === 2 ? 1 : -1; 187 } else if (a.typeStr == b.typeStr) { 188 return 0; 189 } else { 190 return type === 2 ? -1 : 1; 191 } 192 } else if(key == "fd"){ 193 if(type == 1){ 194 return a.fd - b.fd ; 195 }else{ 196 return b.fd - a.fd ; 197 } 198 }else{ 199 return 0; 200 } 201 }) 202 this.tbl!.recycleDataSource = arr; 203 } 204 } 205 206 initHtml(): string { 207 return ` 208 <style> 209 :host{ 210 display: flex; 211 flex-direction: column; 212 padding: 10px 10px 0 10px; 213 } 214 .loading{ 215 bottom: 0; 216 position: absolute; 217 left: 0; 218 right: 0; 219 width:100%; 220 background:transparent; 221 z-index: 999999; 222 } 223 .progress{ 224 bottom: 33px; 225 position: absolute; 226 height: 1px; 227 z-index: 99; 228 left: 0; 229 right: 0; 230 } 231 tab-pane-filter { 232 border: solid rgb(216,216,216) 1px; 233 float: left; 234 position: fixed; 235 bottom: 0; 236 width: 100%; 237 } 238 </style> 239 <div style="display: flex;flex-direction: column"> 240 <div style="display: flex;flex-direction: row"> 241 <lit-slicer style="width:100%"> 242 <div style="width: 65%"> 243 <lit-table id="tbl" style="height: auto"> 244 <lit-table-column width="200px" title="Start" data-index="startTsStr" key="startTsStr" align="flex-start" order></lit-table-column> 245 <lit-table-column width="160px" title="Duration" data-index="durStr" key="durStr" align="flex-start" order></lit-table-column> 246 <lit-table-column width="200px" title="Process" data-index="process" key="process" align="flex-start" order></lit-table-column> 247 <lit-table-column width="120px" title="Type" data-index="typeStr" key="typeStr" align="flex-start" order></lit-table-column> 248 <lit-table-column width="160px" title="File Descriptor" data-index="fd" key="fd" align="flex-start" order></lit-table-column> 249<!-- <lit-table-column width="300px" title="Path" data-index="path" key="path" align="flex-start" ></lit-table-column>--> 250 <lit-table-column width="600px" title="Backtrace" data-index="backtrace" key="backtrace" align="flex-start" > 251 <template> 252 <div> 253 <span>{{backtrace[0]}}</span> 254 <span v-if="backtrace.length > 1">⬅</span> 255 <span v-if="backtrace.length > 1"style="color: #565656"> {{backtrace[1]}}</span> 256 </div> 257 </template> 258 </lit-table-column> 259 </lit-table> 260 </div> 261 <lit-slicer-track ></lit-slicer-track> 262 <lit-table id="tbr" no-head style="height: auto;border-left: 1px solid var(--dark-border1,#e2e2e2)"> 263 <lit-table-column width="60px" title="" data-index="type" key="type" align="flex-start" > 264 <template> 265 <div v-if=" type == -1 ">Thread:</div> 266 <img src="img/library.png" size="20" v-if=" type == 1 "> 267 <img src="img/function.png" size="20" v-if=" type == 0 "> 268 </template> 269 </lit-table-column> 270 <lit-table-column width="1fr" title="" data-index="symbol" key="symbol" align="flex-start"> 271 </lit-table-column> 272 </lit-table> 273 </lit-slicer> 274 </div> 275 <lit-progress-bar class="progress"></lit-progress-bar> 276 <tab-pane-filter id="filter" first second></tab-pane-filter> 277 <div class="loading"></div> 278 </div> 279`; 280 } 281 282} 283
