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