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