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 {SelectionData, SelectionParam} from "../../../bean/BoxSelection.js"; 20import {getTabCpuByThread} from "../../../database/SqlLite.js"; 21 22@element('tabpane-cpu-thread') 23export class TabPaneCpuByThread extends BaseElement { 24 private tbl: LitTable | null | undefined; 25 private range: HTMLLabelElement | null | undefined; 26 private source: Array<SelectionData> = [] 27 28 set data(val: SelectionParam | any) { 29 this.range!.textContent = "Selected range: " + parseFloat(((val.rightNs - val.leftNs) / 1000000.0).toFixed(5)) + " ms" 30 getTabCpuByThread(val.cpus, val.leftNs, val.rightNs).then((result) => { 31 if (result != null && result.length > 0) { 32 let sumWall = 0.0; 33 let sumOcc = 0; 34 for (let e of result) { 35 e.process = e.process == null || e.process.length == 0 ? "[NULL]" : e.process 36 e.thread = e.thread == null || e.thread.length == 0 ? "[NULL]" : e.thread 37 sumWall += e.wallDuration 38 sumOcc += e.occurrences 39 e.wallDuration = parseFloat((e.wallDuration / 1000000.0).toFixed(5)); 40 e.avgDuration = parseFloat((e.avgDuration / 1000000.0).toFixed(5)); 41 } 42 let count = new SelectionData() 43 count.process = " " 44 count.wallDuration = parseFloat((sumWall / 1000000.0).toFixed(7)); 45 count.occurrences = sumOcc; 46 result.splice(0, 0, count) 47 this.source = result 48 this.tbl!.dataSource = result 49 } else { 50 this.source = []; 51 this.tbl!.dataSource = this.source 52 } 53 }) 54 } 55 56 initElements(): void { 57 this.tbl = this.shadowRoot?.querySelector<LitTable>('#tb-cpu-thread'); 58 this.range = this.shadowRoot?.querySelector('#time-range'); 59 this.tbl!.addEventListener('column-click', (evt) => { 60 this.sortByColumn(evt.detail) 61 }); 62 63 } 64 65 initHtml(): string { 66 return ` 67<style> 68:host{ 69 display: flex; 70 flex-direction: column; 71 padding: 10px 10px; 72} 73</style> 74<label id="time-range" style="width: 100%;height: 20px;text-align: end;font-size: 10pt;margin-bottom: 5px">Selected range:0.0 ms</label> 75<lit-table id="tb-cpu-thread" style="height:calc( 30vh - 25px )"> 76 <lit-table-column order width="25%" title="Process" data-index="process" key="process" align="flex-start" order ></lit-table-column> 77 <lit-table-column order width="1fr" title="PID" data-index="pid" key="pid" align="flex-start" order ></lit-table-column> 78 <lit-table-column order width="25%" title="Thread" data-index="thread" key="thread" align="flex-start" order ></lit-table-column> 79 <lit-table-column order width="1fr" title="TID" data-index="tid" key="tid" align="flex-start" order ></lit-table-column> 80 <lit-table-column order width="1fr" title="Wall duration(ms)" data-index="wallDuration" key="wallDuration" align="flex-start" order ></lit-table-column> 81 <lit-table-column order width="1fr" title="Avg Wall duration(ms)" data-index="avgDuration" key="avgDuration" align="flex-start" order ></lit-table-column> 82 <lit-table-column order width="1fr" title="Occurrences" data-index="occurrences" key="occurrences" align="flex-start" order ></lit-table-column> 83</lit-table> 84 `; 85 } 86 87 sortByColumn(detail) { 88 function compare(property, sort, type) { 89 return function (a: SelectionData, b: SelectionData) { 90 if (a.process == " " || b.process == " ") { 91 return 0; 92 } 93 if (type === 'number') { 94 return sort === 2 ? parseFloat(b[property]) - parseFloat(a[property]) : parseFloat(a[property]) - parseFloat(b[property]); 95 } else { 96 if (b[property] > a[property]) { 97 return sort === 2 ? 1 : -1; 98 } else if (b[property] == a[property]) { 99 return 0; 100 } else { 101 return sort === 2 ? -1 : 1; 102 } 103 } 104 } 105 } 106 107 if (detail.key === 'pid' || detail.key == "tid" || detail.key === 'wallDuration' || detail.key === 'avgDuration' || detail.key === 'occurrences') { 108 this.source.sort(compare(detail.key, detail.sort, 'number')) 109 } else { 110 this.source.sort(compare(detail.key, detail.sort, 'string')) 111 } 112 this.tbl!.dataSource = this.source; 113 } 114 115}