1// @ts-nocheck 2/* 3 * Copyright (C) 2022 Huawei Device Co., Ltd. 4 * Licensed under the Apache License, Version 2.0 (the "License"); 5 * you may not use this file except in compliance with the License. 6 * You may obtain a copy of the License at 7 * 8 * http://www.apache.org/licenses/LICENSE-2.0 9 * 10 * Unless required by applicable law or agreed to in writing, software 11 * distributed under the License is distributed on an "AS IS" BASIS, 12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 * See the License for the specific language governing permissions and 14 * limitations under the License. 15 */ 16 17import {BaseElement, element} from "../../../../base-ui/BaseElement.js"; 18import {LitTable} from "../../../../base-ui/table/lit-table.js"; 19import {BoxJumpParam} from "../../../bean/BoxSelection.js"; 20import {getTabBoxChildData} from "../../../database/SqlLite.js"; 21import {Utils} from "../base/Utils.js"; 22 23@element('tabpane-box-child') 24export class TabPaneBoxChild extends BaseElement { 25 private tbl: LitTable | null | undefined; 26 private range: HTMLLabelElement | null | undefined; 27 private source: Array<SelectionData> = [] 28 29 set data(val: BoxJumpParam) { 30 this.range!.textContent = "Selected range: " + parseFloat(((val.rightNs - val.leftNs) / 1000000.0).toFixed(5)) + " ms" 31 getTabBoxChildData(val.leftNs, val.rightNs, val.state, val.processId, val.threadId).then((result) => { 32 if (result.length != null && result.length > 0) { 33 result.map((e) => { 34 e.startTime = Utils.getTimeString(e.startNs) 35 e.state = Utils.getEndState(e.state) 36 e.prior = e.priority == undefined || e.priority == null ? "-" : e.priority + "" 37 e.core = e.cpu == undefined || e.cpu == null ? "-" : "CPU" + e.cpu 38 e.processName = (e.process == undefined || e.process == null ? "process" : e.process) + "(" + e.processId + ")" 39 e.threadName = (e.thread == undefined || e.thread == null ? "process" : e.thread) + "(" + e.threadId + ")" 40 }) 41 this.source = result; 42 this.tbl?.dataSource = result; 43 } else { 44 this.source = []; 45 this.tbl?.dataSource = [] 46 } 47 }) 48 } 49 50 initElements(): void { 51 this.tbl = this.shadowRoot?.querySelector<LitTable>('#tb-cpu-thread'); 52 this.range = this.shadowRoot?.querySelector('#time-range'); 53 this.tbl!.addEventListener('column-click', (evt) => { 54 this.sortByColumn(evt.detail) 55 }); 56 } 57 58 initHtml(): string { 59 return ` 60<style> 61:host{ 62 display: flex; 63 flex-direction: column; 64 padding: 10px 10px; 65} 66</style> 67<label id="time-range" style="width: 100%;height: 20px;text-align: end;font-size: 10pt;margin-bottom: 5px">Selected range:0.0 ms</label> 68<lit-table id="tb-cpu-thread" style="height: auto"> 69 <lit-table-column order width="1fr" title="Start Time" data-index="startTime" key="startTime" align="flex-start" order ></lit-table-column> 70 <lit-table-column order width="25%" title="Process" data-index="processName" key="processName" align="flex-start" order ></lit-table-column> 71 <lit-table-column order width="25%" title="Thread" data-index="threadName" key="threadName" align="flex-start" order ></lit-table-column> 72 <lit-table-column order width="1fr" title="State" data-index="state" key="state" align="flex-start" order ></lit-table-column> 73 <lit-table-column order width="1fr" title="Core" data-index="core" key="core" align="flex-start" order ></lit-table-column> 74 <lit-table-column order width="1fr" title="Priority" data-index="prior" key="prior" align="flex-start" order ></lit-table-column> 75 <lit-table-column order width="1fr" title="Note" data-index="note" key="note" align="flex-start" ></lit-table-column> 76</lit-table> 77 `; 78 } 79 80 sortByColumn(detail) { 81 function compare(property, sort, type) { 82 return function (a: SelectionData, b: SelectionData) { 83 if (type === 'number') { 84 return sort === 2 ? parseFloat(b[property]) - parseFloat(a[property]) : parseFloat(a[property]) - parseFloat(b[property]); 85 } else { 86 if (b[property] > a[property]) { 87 return sort === 2 ? 1 : -1; 88 } else if (b[property] == a[property]) { 89 return 0; 90 } else { 91 return sort === 2 ? -1 : 1; 92 } 93 } 94 } 95 } 96 97 this.source.sort(compare(detail.key, detail.sort, 'string')) 98 this.tbl!.dataSource = this.source; 99 } 100 101}