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, RedrawTreeForm } from '../../../../../base-ui/table/lit-table'; 18import { SelectionParam } from '../../../../bean/BoxSelection'; 19import { SliceGroup } from '../../../../bean/StateProcessThread'; 20import { resizeObserver } from '../SheetUtils'; 21import { Utils } from '../../base/Utils'; 22import { sliceSPTSender } from '../../../../database/data-trafic/SliceSender'; 23 24@element('tabpane-spt') 25export class TabPaneSPT extends BaseElement { 26 private sptTbl: LitTable | null | undefined; 27 private range: HTMLLabelElement | null | undefined; 28 private selectionParam: SelectionParam | null | undefined; 29 30 set data(sptValue: SelectionParam | unknown) { 31 if (sptValue === this.selectionParam) { 32 return; 33 } 34 // @ts-ignore 35 this.selectionParam = sptValue; 36 if (this.sptTbl) { 37 // @ts-ignore 38 this.sptTbl.shadowRoot.querySelector('.table').style.height = `${this.parentElement!.clientHeight - 45}px`; 39 } 40 this.range!.textContent = 41 // @ts-ignore 42 `Selected range: ${parseFloat(((sptValue.rightNs - sptValue.leftNs) / 1000000.0).toFixed(5))} ms`; 43 // @ts-ignore 44 this.getDataBySPT(sptValue.leftNs, sptValue.rightNs, sptValue.cpus, sptValue.traceId); 45 } 46 47 initElements(): void { 48 this.sptTbl = this.shadowRoot?.querySelector<LitTable>('#spt-tbl'); 49 this.range = this.shadowRoot?.querySelector('#spt-time-range'); 50 this.sptTbl!.itemTextHandleMap.set('title', Utils.transferPTSTitle); 51 } 52 53 connectedCallback(): void { 54 super.connectedCallback(); 55 resizeObserver(this.parentElement!, this.sptTbl!); 56 } 57 58 getDataBySPT(leftNs: number, rightNs: number, cpus: Array<number>, traceId?: string): void { 59 this.sptTbl!.loading = true; 60 sliceSPTSender(leftNs, rightNs, cpus, 'spt-getSPT', traceId).then((res): void => { 61 this.sptTbl!.loading = false; 62 this.sptTbl!.recycleDataSource = res; 63 //@ts-ignore 64 this.theadClick(res); 65 }); 66 } 67 68 private theadClick(data: Array<SliceGroup>): void { 69 let labels = this.sptTbl?.shadowRoot?.querySelector('.th > .td')!.querySelectorAll('label'); 70 if (labels) { 71 for (let i = 0; i < labels.length; i++) { 72 let label = labels[i].innerHTML; 73 labels[i].addEventListener('click', (): void => { 74 if (label.includes('State') && i === 0) { 75 this.sptTbl!.setStatus(data, false); 76 this.sptTbl!.recycleDs = this.sptTbl!.meauseTreeRowElement(data, RedrawTreeForm.Retract); 77 } else if (label.includes('Process') && i === 1) { 78 this.sptTbl!.setStatus(data, false, 0, 1); 79 this.sptTbl!.recycleDs = this.sptTbl!.meauseTreeRowElement(data, RedrawTreeForm.Retract); 80 } else if (label.includes('Thread') && i === 2) { 81 this.sptTbl!.setStatus(data, true); 82 this.sptTbl!.recycleDs = this.sptTbl!.meauseTreeRowElement(data, RedrawTreeForm.Expand); 83 } 84 }); 85 } 86 } 87 } 88 89 initHtml(): string { 90 return ` 91 <style> 92 :host{ 93 padding: 10px 10px; 94 display: flex; 95 flex-direction: column; 96 } 97 </style> 98 <label id="spt-time-range" style="width: 100%;height: 20px;text-align: end;font-size: 10pt;margin-bottom: 5px">Selected range:0.0 ms</label> 99 <lit-table id="spt-tbl" style="height: auto" tree> 100 <lit-table-column class="spt-column" width="27%" data-index="title" key="title" align="flex-start" title="State/Process/Thread" retract> 101 </lit-table-column> 102 <lit-table-column class="spt-column" width="1fr" data-index="count" key="count" align="flex-start" title="Count" tdJump> 103 </lit-table-column> 104 <lit-table-column class="spt-column" width="1fr" data-index="wallDuration" key="wallDuration" align="flex-start" title="Duration(ns)"> 105 </lit-table-column> 106 <lit-table-column class="spt-column" width="1fr" data-index="minDuration" key="minDuration" align="flex-start" title="Min Duration(ns)"> 107 </lit-table-column> 108 <lit-table-column class="spt-column" width="1fr" data-index="avgDuration" key="avgDuration" align="flex-start" title="Avg Duration(ns)"> 109 </lit-table-column> 110 <lit-table-column class="spt-column" width="1fr" data-index="maxDuration" key="maxDuration" align="flex-start" title="Max Duration(ns)"> 111 </lit-table-column> 112 </lit-table> 113 `; 114 } 115} 116