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 {BoxJumpParam, SelectionData} from "../../../bean/BoxSelection.js"; 19import {getTabBoxChildData} from "../../../database/SqlLite.js"; 20import {Utils} from "../base/Utils.js"; 21import {SpSystemTrace} from "../../SpSystemTrace.js"; 22import {SPTChild} from "../../../bean/StateProcessThread.js"; 23 24@element('tabpane-box-child') 25export class TabPaneBoxChild extends BaseElement { 26 private tbl: LitTable | null | undefined; 27 private range: HTMLLabelElement | null | undefined; 28 private source: Array<SPTChild> = []; 29 private loadDataInCache: boolean = true; 30 31 set data(val: BoxJumpParam) { 32 // @ts-ignore 33 this.tbl?.shadowRoot?.querySelector(".table")?.style?.height = (this.parentElement!.clientHeight - 45) + "px"; 34 this.range!.textContent = "Selected range: " + parseFloat(((val.rightNs - val.leftNs) / 1000000.0).toFixed(5)) + " ms" 35 if (this.loadDataInCache) { 36 this.getDataByCache(val).then((arr) => { 37 this.source = arr; 38 // @ts-ignore 39 this.tbl?.recycleDataSource = arr; 40 }) 41 } else { 42 this.getDataByDB(val) 43 } 44 } 45 46 initElements(): void { 47 this.tbl = this.shadowRoot?.querySelector<LitTable>('#tb-cpu-thread'); 48 this.range = this.shadowRoot?.querySelector('#time-range'); 49 this.tbl!.addEventListener('column-click', (evt) => { 50 // @ts-ignore 51 this.sortByColumn(evt.detail) 52 }); 53 new ResizeObserver((entries) => { 54 if (this.parentElement?.clientHeight != 0) { 55 // @ts-ignore 56 this.tbl?.shadowRoot.querySelector(".table").style.height = (this.parentElement.clientHeight - 45) + "px" 57 this.tbl?.reMeauseHeight() 58 } 59 }).observe(this.parentElement!) 60 } 61 62 getDataByDB(val: BoxJumpParam) { 63 getTabBoxChildData(val.leftNs, val.rightNs, val.state, val.processId, val.threadId).then((result) => { 64 if (result.length != null && result.length > 0) { 65 result.map((e) => { 66 e.startTime = Utils.getTimeString(e.startNs) 67 e.state = Utils.getEndState(e.state)! 68 e.prior = e.priority == undefined || e.priority == null ? "-" : e.priority + "" 69 e.core = e.cpu == undefined || e.cpu == null ? "-" : "CPU" + e.cpu 70 e.processName = (e.process == undefined || e.process == null ? "process" : e.process) + "(" + e.processId + ")" 71 e.threadName = (e.thread == undefined || e.thread == null ? "thread" : e.thread) + "(" + e.threadId + ")" 72 }) 73 this.source = result; 74 // @ts-ignore 75 this.tbl?.recycleDataSource = result; 76 } else { 77 this.source = []; 78 // @ts-ignore 79 this.tbl?.recycleDataSource = [] 80 } 81 }) 82 } 83 84 getDataByCache(val: BoxJumpParam): Promise<Array<SPTChild>> { 85 return new Promise<Array<SPTChild>>((resolve, reject) => { 86 let arr: Array<SPTChild> = []; 87 SpSystemTrace.SPT_DATA.map((spt) => { 88 let b1 = (val.state != undefined && val.state != '') ? spt.state == val.state : true 89 let b2 = (val.processId != undefined && val.processId != -1) ? spt.processId == val.processId : true 90 let b3 = (val.threadId != undefined && val.threadId != -1) ? spt.threadId == val.threadId : true 91 if (!(spt.end_ts < val.leftNs || spt.start_ts > val.rightNs) && b1 && b2 && b3) { 92 let sptChild = new SPTChild(); 93 sptChild.startTime = Utils.getTimeString(spt.start_ts) 94 sptChild.state = Utils.getEndState(spt.state)! 95 sptChild.prior = spt.priority == undefined || spt.priority == null ? "-" : spt.priority + "" 96 sptChild.core = spt.cpu == undefined || spt.cpu == null ? "-" : "CPU" + spt.cpu 97 sptChild.processName = (spt.process == undefined || spt.process == null || spt.process == "" ? "process" : spt.process) + "(" + spt.processId + ")" 98 sptChild.threadName = (spt.thread == undefined || spt.thread == null || spt.thread == "" ? "thread" : spt.thread) + "(" + spt.threadId + ")" 99 arr.push(sptChild); 100 } 101 }) 102 resolve(arr); 103 }) 104 105 } 106 107 initHtml(): string { 108 return ` 109 <style> 110 :host{ 111 display: flex; 112 flex-direction: column; 113 padding: 10px 10px; 114 } 115 </style> 116 <label id="time-range" style="width: 100%;height: 20px;text-align: end;font-size: 10pt;margin-bottom: 5px">Selected range:0.0 ms</label> 117 <lit-table id="tb-cpu-thread" style="height: auto"> 118 <lit-table-column order width="20%" title="Start Time" data-index="startTime" key="startTime" align="flex-start" order > 119 </lit-table-column> 120 <lit-table-column order width="20%" title="Process" data-index="processName" key="processName" align="flex-start" order > 121 </lit-table-column> 122 <lit-table-column order width="20%" title="Thread" data-index="threadName" key="threadName" align="flex-start" order > 123 </lit-table-column> 124 <lit-table-column order width="1fr" title="State" data-index="state" key="state" align="flex-start" order > 125 </lit-table-column> 126 <lit-table-column order width="1fr" title="Core" data-index="core" key="core" align="flex-start" order > 127 </lit-table-column> 128 <lit-table-column order width="1fr" title="Priority" data-index="prior" key="prior" align="flex-start" order > 129 </lit-table-column> 130 <lit-table-column order width="1fr" title="Note" data-index="note" key="note" align="flex-start" > 131 </lit-table-column> 132 </lit-table> 133 `; 134 } 135 136 sortByColumn(detail: any) { 137 // @ts-ignore 138 function compare(property, sort, type) { 139 return function (a: SelectionData, b: SelectionData) { 140 if (type === 'number') { 141 // @ts-ignore 142 return sort === 2 ? parseFloat(b[property]) - parseFloat(a[property]) : parseFloat(a[property]) - parseFloat(b[property]); 143 } else { 144 // @ts-ignore 145 if (b[property] > a[property]) { 146 return sort === 2 ? 1 : -1; 147 } else { // @ts-ignore 148 if (b[property] == a[property]) { 149 return 0; 150 } else { 151 return sort === 2 ? -1 : 1; 152 } 153 } 154 } 155 } 156 } 157 158 // @ts-ignore 159 this.source.sort(compare(detail.key, detail.sort, 'string')) 160 this.tbl!.recycleDataSource = this.source; 161 } 162 163}