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'; 17import { LitTable } from '../../../../../base-ui/table/lit-table'; 18import { SelectionData, SelectionParam } from '../../../../bean/BoxSelection'; 19import { initSort, resizeObserver } from '../SheetUtils'; 20import { queryIrqDataBoxSelect, querySoftIrqDataBoxSelect } from '../../../../database/sql/Irq.sql'; 21 22@element('tabpane-irq-counter') 23export class TabPaneIrqCounter extends BaseElement { 24 private irqCounterTbl: LitTable | null | undefined; 25 private irqRange: HTMLLabelElement | null | undefined; 26 private irqCounterSource: Array<SelectionData> = []; 27 private sortColumn: string = 'wallDurationFormat'; 28 private sortType: number = 2; 29 30 set data(irqParam: SelectionParam | any) { 31 if (this.irqCounterTbl) { 32 //@ts-ignore 33 this.irqCounterTbl.shadowRoot.querySelector('.table').style.height = `${this.parentElement!.clientHeight - 45 34 }px`; 35 } 36 this.irqRange!.textContent = `Selected range: ${parseFloat( 37 ((irqParam.rightNs - irqParam.leftNs) / 1000000.0).toFixed(5) 38 )} ms`; 39 let dataSource: Array<SelectionData> = []; 40 Promise.all([ 41 queryIrqDataBoxSelect(irqParam.irqCallIds, irqParam.leftNs, irqParam.rightNs), 42 querySoftIrqDataBoxSelect(irqParam.softIrqCallIds, irqParam.leftNs, irqParam.rightNs), 43 ]).then((resArr) => { 44 resArr.forEach((res) => { 45 res.forEach((item) => { 46 let selectData = new SelectionData(); 47 selectData.name = item.irqName; 48 selectData.count = item.count; 49 selectData.wallDuration = item.wallDuration; 50 selectData.wallDurationFormat = (item.wallDuration / 1000).toFixed(2); 51 selectData.maxDuration = item.wallDuration; 52 selectData.maxDurationFormat = (item.maxDuration / 1000).toFixed(2); 53 selectData.avgDuration = (item.avgDuration / 1000).toFixed(2); 54 dataSource.push(selectData); 55 }); 56 }); 57 initSort(this.irqCounterTbl!, this.sortColumn, this.sortType); 58 this.irqCounterSource = dataSource; 59 this.irqCounterTbl!.recycleDataSource = dataSource; 60 this.sortByColumn(this.sortColumn, this.sortType); 61 }); 62 } 63 64 initElements(): void { 65 this.irqCounterTbl = this.shadowRoot?.querySelector<LitTable>('#tb-irq-counter'); 66 this.irqRange = this.shadowRoot?.querySelector('#time-range'); 67 this.irqCounterTbl!.addEventListener('column-click', (event) => { 68 // @ts-ignore 69 this.sortByColumn(event.detail.key, event.detail.sort); 70 }); 71 } 72 73 connectedCallback(): void { 74 super.connectedCallback(); 75 resizeObserver(this.parentElement!, this.irqCounterTbl!); 76 } 77 78 initHtml(): string { 79 return ` 80 <style> 81 .irq-counter-label{ 82 font-size: 10pt; 83 } 84 :host{ 85 display: flex; 86 flex-direction: column; 87 padding: 10px 10px; 88 } 89 </style> 90 <label id="time-range" class="irq-counter-label" style="width: 100%;height: 20px;text-align: end;margin-bottom: 5px;">Selected range:0.0 ms</label> 91 <lit-table id="tb-irq-counter" style="height: auto"> 92 <lit-table-column width="30%" title="Name" data-index="name" key="name" align="flex-start" order> 93 </lit-table-column> 94 <lit-table-column width="1fr" title="Duration(μs)" data-index="wallDurationFormat" key="wallDurationFormat" align="flex-start" order > 95 </lit-table-column> 96 <lit-table-column width="1fr" title="Max Duration(μs)" data-index="maxDurationFormat" key="maxDurationFormat" align="flex-start" order > 97 </lit-table-column> 98 <lit-table-column width="1fr" title="Average Duration(μs)" data-index="avgDuration" key="avgDuration" align="flex-start" order > 99 </lit-table-column> 100 <lit-table-column width="1fr" title="Occurrences" data-index="count" key="count" align="flex-start" order > 101 </lit-table-column> 102 </lit-table> 103 `; 104 } 105 106 sortByColumn(sortColumn: string, sortType: number): void { 107 let key = sortColumn; 108 let type = sortType; 109 let arr = Array.from(this.irqCounterSource); 110 arr.sort((irqCounterLeftData, irqCounterRightData): number => { 111 if (key === 'wallDurationFormat' || type === 0) { 112 return (type === 1 ? 1 : -1) * (irqCounterLeftData.wallDuration - irqCounterRightData.wallDuration); 113 } else if (key === 'count') { 114 return (type === 1 ? 1 : -1) * 115 (parseInt(irqCounterLeftData.count) - parseInt(irqCounterRightData.count)); 116 } else if (key === 'maxDurationFormat') { 117 return (type === 1 ? 1 : -1) * (irqCounterLeftData.maxDuration - irqCounterRightData.maxDuration); 118 } else if (key === 'avgDuration') { 119 const avgDiff = 120 irqCounterLeftData.wallDuration / parseInt(irqCounterLeftData.count) - 121 irqCounterRightData.wallDuration / parseInt(irqCounterRightData.count); 122 return (type === 1 ? 1 : -1) * avgDiff; 123 } else if (key === 'name') { 124 const nameDiff = irqCounterLeftData.name.localeCompare(irqCounterRightData.name); 125 return (type === 2 ? -1 : 1) * nameDiff; 126 } else { 127 return 0; 128 } 129 }); 130 this.irqCounterTbl!.recycleDataSource = arr; 131 } 132} 133