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 {procedurePool} from "../../../../database/Procedure.js"; 22import {FileSysEvent} from "../../../../database/logic-worker/ProcedureLogicWorkerFileSystem.js"; 23import {FilterData, TabPaneFilter} from "../TabPaneFilter.js"; 24import "../TabPaneFilter.js"; 25 26@element('tabpane-filesystem-event') 27export class TabPaneFileSystemEvents extends BaseElement { 28 private tbl: LitTable | null | undefined; 29 private tblData: LitTable | null | undefined; 30 private progressEL:LitProgressBar | null | undefined; 31 private filter: TabPaneFilter | null | undefined; 32 private loadingList:number[] = [] 33 private loadingPage:any; 34 private source: Array<FileSysEvent> = []; 35 private filterSource: Array<FileSysEvent> = []; 36 private sortKey: string = "startTs"; 37 private sortType: number = 0; 38 private currentSelection: SelectionParam | undefined | null 39 private filterEventType: string = "0"; 40 private filterProcess: string = "0"; 41 private eventList:string[] | null |undefined; 42 private processList:string[] | null |undefined; 43 44 set data(val: SelectionParam | null | undefined) { 45 if (val == this.currentSelection) { 46 return 47 } 48 this.currentSelection = val 49 // @ts-ignore 50 this.tbl?.shadowRoot.querySelector(".table").style.height = (this.parentElement.clientHeight - 20 - 31) + "px" 51 // @ts-ignore 52 this.tblData?.shadowRoot.querySelector(".table").style.height = (this.parentElement.clientHeight - 20 - 31) + "px" 53 this.tbl!.recycleDataSource = []; 54 this.tblData!.recycleDataSource = []; 55 if (val) { 56 this.loadingList.push(1) 57 this.progressEL!.loading = true 58 this.loadingPage.style.visibility = "visible" 59 this.source = []; 60 procedurePool.submitWithName("logic0","fileSystem-queryFileSysEvents", 61 {leftNs:val.leftNs,rightNs:val.rightNs,typeArr:val.fileSystemType,tab:"events"},undefined,(res:any)=>{ 62 this.source = this.source.concat(res.data) 63 res.data = null; 64 if(!res.isSending){ 65 this.tbl!.recycleDataSource = this.source; 66 this.filterSource = this.source; 67 this.setProcessFilter(); 68 this.loadingList.splice(0,1) 69 if(this.loadingList.length == 0) { 70 this.progressEL!.loading = false 71 this.loadingPage.style.visibility = "hidden" 72 } 73 } 74 }) 75 } 76 } 77 78 setProcessFilter(){ 79 this.processList = ["All Process"]; 80 this.source.map(it => { 81 if(this.processList!.findIndex(a => a === it.process) == -1){ 82 this.processList!.push(it.process); 83 } 84 }) 85 this.filter!.setSelectList(this.eventList,this.processList,"",""); 86 this.filter!.firstSelect = "0"; 87 this.filter!.secondSelect = "0"; 88 } 89 90 filterData(){ 91 let pfv = parseInt(this.filterProcess) 92 if(this.filterEventType == "0"){ 93 this.filterSource = pfv === 0 ? this.source : this.source.filter((it) => it.process === this.processList![pfv]); 94 }else{ 95 let eventType = parseInt(this.filterEventType) - 1 96 this.filterSource = this.source.filter((it) => it.type == eventType && ( pfv === 0 ? true : it.process === this.processList![pfv])); 97 } 98 this.tblData!.recycleDataSource = []; 99 this.sortTable(this.sortKey,this.sortType); 100 } 101 102 initElements(): void { 103 this.loadingPage = this.shadowRoot?.querySelector('.loading'); 104 this.progressEL = this.shadowRoot?.querySelector('.progress') as LitProgressBar; 105 this.tbl = this.shadowRoot?.querySelector<LitTable>('#tbl'); 106 this.tblData = this.shadowRoot?.querySelector<LitTable>('#tbr'); 107 this.tbl!.addEventListener('row-click', (e) => { 108 // @ts-ignore 109 let data = (e.detail.data as FileSysEvent); 110 (data as any).isSelected = true; 111 // @ts-ignore 112 if ((e.detail as any).callBack) { 113 // @ts-ignore 114 (e.detail as any).callBack(true) 115 } 116 procedurePool.submitWithName("logic0","fileSystem-queryStack", 117 { callchainId : data.callchainId },undefined,(res:any)=>{ 118 this.tblData!.recycleDataSource = res; 119 }) 120 }); 121 this.tbl!.addEventListener('column-click', (evt) => { 122 // @ts-ignore 123 this.sortKey = evt.detail.key 124 // @ts-ignore 125 this.sortType = evt.detail.sort 126 // @ts-ignore 127 this.sortTable(evt.detail.key,evt.detail.sort) 128 }) 129 this.filter = this.shadowRoot?.querySelector<TabPaneFilter>("#filter"); 130 this.eventList = ['All Event','All Open Event','All Close Event','All Read Event','All Write Event']; 131 this.processList = ['All Process']; 132 this.filter!.setSelectList(this.eventList,this.processList,"",""); 133 this.filter!.firstSelect = "0"; 134 this.filter!.getFilterData((data: FilterData) => { 135 this.filterEventType = data.firstSelect || "0"; 136 this.filterProcess = data.secondSelect || "0"; 137 this.filterData(); 138 }) 139 } 140 141 connectedCallback() { 142 super.connectedCallback(); 143 new ResizeObserver((entries) => { 144 if (this.parentElement?.clientHeight != 0) { 145 // @ts-ignore 146 this.tbl?.shadowRoot.querySelector(".table").style.height = (this.parentElement.clientHeight) - 10 - 33 + "px"; 147 this.tbl?.reMeauseHeight(); 148 // @ts-ignore 149 this.tblData?.shadowRoot.querySelector(".table").style.height = (this.parentElement.clientHeight) - 10 -33 + "px" 150 this.tblData?.reMeauseHeight() 151 this.loadingPage.style.height = (this.parentElement!.clientHeight - 24) + "px" 152 } 153 }).observe(this.parentElement!); 154 } 155 156 sortTable(key: string,type:number){ 157 if(type == 0){ 158 this.tbl!.recycleDataSource = this.filterSource 159 }else{ 160 let arr = Array.from(this.filterSource) 161 arr.sort((a,b):number=>{ 162 if(key == "startTsStr"){ 163 if(type == 1){ 164 return a.startTs - b.startTs ; 165 }else{ 166 return b.startTs - a.startTs ; 167 } 168 }else if(key == "durStr"){ 169 if(type == 1){ 170 return a.dur - b.dur ; 171 }else{ 172 return b.dur - a.dur ; 173 } 174 }else if(key == "process"){ 175 if (a.process > b.process) { 176 return type === 2 ? 1 : -1; 177 } else if (a.process == b.process) { 178 return 0; 179 } else { 180 return type === 2 ? -1 : 1; 181 } 182 }else if(key == "thread"){ 183 if (a.thread > b.thread) { 184 return type === 2 ? 1 : -1; 185 } else if (a.thread == b.thread) { 186 return 0; 187 } else { 188 return type === 2 ? -1 : 1; 189 } 190 } else if(key == "typeStr"){ 191 if (a.typeStr > b.typeStr) { 192 return type === 2 ? 1 : -1; 193 } else if (a.typeStr == b.typeStr) { 194 return 0; 195 } else { 196 return type === 2 ? -1 : 1; 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="240px" title="Process" data-index="process" key="process" align="flex-start" order></lit-table-column> 247 <lit-table-column width="240px" title="Thread" data-index="thread" key="thread" align="flex-start" order></lit-table-column> 248 <lit-table-column width="120px" title="Type" data-index="typeStr" key="typeStr" align="flex-start" order></lit-table-column> 249 <lit-table-column width="160px" title="First Argument" data-index="firstArg" key="firstArg" align="flex-start" ></lit-table-column> 250 <lit-table-column width="160px" title="Second Argument" data-index="secondArg" key="secondArg" align="flex-start" ></lit-table-column> 251 <lit-table-column width="160px" title="Third Argument" data-index="thirdArg" key="thirdArg" align="flex-start" ></lit-table-column> 252 <lit-table-column width="160px" title="Fourth Argument" data-index="fourthArg" key="fourthArg" align="flex-start" ></lit-table-column> 253 <lit-table-column width="160px" title="Return" data-index="returnValue" key="returnValue" align="flex-start" ></lit-table-column> 254 <lit-table-column width="160px" title="Error" data-index="error" key="error" align="flex-start" ></lit-table-column> 255 <lit-table-column width="600px" title="Backtrace" data-index="backtrace" key="backtrace" align="flex-start" > 256 <template> 257 <div> 258 <span>{{backtrace[0]}}</span> 259 <span v-if="backtrace.length > 1">⬅</span> 260 <span v-if="backtrace.length > 1"style="color: #565656"> {{backtrace[1]}}</span> 261 </div> 262 </template> 263 </lit-table-column> 264 </lit-table> 265 </div> 266 <lit-slicer-track ></lit-slicer-track> 267 <lit-table id="tbr" no-head style="height: auto;border-left: 1px solid var(--dark-border1,#e2e2e2)"> 268 <lit-table-column width="60px" title="" data-index="type" key="type" align="flex-start" > 269 <template> 270 <div v-if=" type == -1 ">Thread:</div> 271 <img src="img/library.png" size="20" v-if=" type == 1 "> 272 <img src="img/function.png" size="20" v-if=" type == 0 "> 273 </template> 274 </lit-table-column> 275 <lit-table-column width="1fr" title="" data-index="symbol" key="symbol" align="flex-start"> 276 </lit-table-column> 277 </lit-table> 278 </lit-slicer> 279 </div> 280 <lit-progress-bar class="progress"></lit-progress-bar> 281 <tab-pane-filter id="filter" first second></tab-pane-filter> 282 <div class="loading"></div> 283 </div> 284`; 285 } 286} 287
