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 {getTabSlices} from "../../../database/SqlLite.js"; 21 22@element('tabpane-slices') 23export class TabPaneSlices 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 getTabSlices(val.funTids, 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.name = e.name == null ? "" : e.name 36 sumWall += e.wallDuration 37 sumOcc += e.occurrences 38 e.wallDuration = parseFloat((e.wallDuration / 1000000.0).toFixed(5)); 39 e.avgDuration = parseFloat((e.avgDuration / 1000000.0).toFixed(5)); 40 } 41 let count = new SelectionData() 42 count.process = " "; 43 count.wallDuration = parseFloat((sumWall / 1000000.0).toFixed(5)); 44 count.occurrences = sumOcc; 45 result.splice(0, 0, count) 46 this.source = result 47 this.tbl!.dataSource = result 48 } else { 49 this.source = []; 50 this.tbl!.dataSource = this.source; 51 } 52 }); 53 } 54 55 initElements(): void { 56 this.tbl = this.shadowRoot?.querySelector<LitTable>('#tb-slices'); 57 this.range = this.shadowRoot?.querySelector('#time-range'); 58 this.tbl!.addEventListener('column-click', (evt) => { 59 this.sortByColumn(evt.detail) 60 }); 61 } 62 63 initHtml(): string { 64 return ` 65<style> 66:host{ 67 display: flex; 68 flex-direction: column; 69 padding: 10px 10px; 70} 71</style> 72<label id="time-range" style="width: 100%;height: 20px;text-align: end;font-size: 10pt;margin-bottom: 5px">Selected range:0.0 ms</label> 73<lit-table id="tb-slices" style="height: auto"> 74 <lit-table-column title="Name" width="500px" data-index="name" key="name" align="flex-start" order></lit-table-column> 75 <lit-table-column title="Wall duration(ms)" width="1fr" data-index="wallDuration" key="wallDuration" align="flex-start" order ></lit-table-column> 76 <lit-table-column title="Avg Wall duration(ms)" width="1fr" data-index="avgDuration" key="avgDuration" align="flex-start" order ></lit-table-column> 77 <lit-table-column title="Occurrences" width="1fr" data-index="occurrences" key="occurrences" align="flex-start" order ></lit-table-column> 78</lit-table> 79 `; 80 } 81 82 sortByColumn(detail) { 83 function compare(property, sort, type) { 84 return function (a: SelectionData, b: SelectionData) { 85 if (a.process == " " || b.process == " ") { 86 return 0; 87 } 88 if (type === 'number') { 89 return sort === 2 ? parseFloat(b[property]) - parseFloat(a[property]) : parseFloat(a[property]) - parseFloat(b[property]); 90 } else { 91 if (b[property] > a[property]) { 92 return sort === 2 ? 1 : -1; 93 } else if (b[property] == a[property]) { 94 return 0; 95 } else { 96 return sort === 2 ? -1 : 1; 97 } 98 } 99 } 100 } 101 102 if (detail.key === "name") { 103 this.source.sort(compare(detail.key, detail.sort, 'string')) 104 } else { 105 this.source.sort(compare(detail.key, detail.sort, 'number')) 106 } 107 this.tbl!.dataSource = this.source; 108 } 109 110}