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 { SelectionParam } from '../../../../bean/BoxSelection'; 19import { log } from '../../../../../log/Log'; 20import { getProbablyTime } from '../../../../database/logic-worker/ProcedureLogicWorkerCommon'; 21import { resizeObserver } from '../SheetUtils'; 22import { Utils } from '../../base/Utils'; 23import { MemoryConfig } from '../../../../bean/MemoryConfig'; 24import { queryGpuDataTab } from '../../../../database/sql/Gpu.sql'; 25 26interface Graph { 27 startTs: number; 28 startTsStr?: string; 29 size: number; 30 sizeStr?: string; 31} 32 33@element('tabpane-gpu-graph') 34export class TabPaneGpuGraph extends BaseElement { 35 private graphTbl: LitTable | null | undefined; 36 private range: HTMLLabelElement | null | undefined; 37 private graphSource: Array<Graph> = []; 38 private currentSelectionParam: SelectionParam | undefined; 39 40 set data(graphParam: SelectionParam | unknown) { 41 if (this.currentSelectionParam === graphParam) { 42 return; 43 } 44 // @ts-ignore 45 this.currentSelectionParam = graphParam; 46 //@ts-ignore 47 this.graphTbl?.shadowRoot?.querySelector('.table')?.style?.height = this.parentElement!.clientHeight - 45 + 'px'; 48 this.range!.textContent = 49 // @ts-ignore 50 'Selected range: ' + ((graphParam.rightNs - graphParam.leftNs) / 1000000.0).toFixed(5) + ' ms'; 51 this.graphTbl!.loading = true; 52 queryGpuDataTab( 53 MemoryConfig.getInstance().iPid, 54 // @ts-ignore 55 graphParam.leftNs, 56 // @ts-ignore 57 graphParam.rightNs, 58 MemoryConfig.getInstance().snapshotDur, 59 "'mem.graph_pss'" 60 ).then((result) => { 61 this.graphTbl!.loading = false; 62 log('queryGpuDataTab result size : ' + result.length); 63 if (result.length > 0) { 64 result.forEach((it: Graph) => { 65 it.startTsStr = getProbablyTime(it.startTs); 66 it.sizeStr = Utils.getBinaryByteWithUnit(it.size); 67 }); 68 this.graphSource = result; 69 this.graphTbl!.recycleDataSource = this.graphSource; 70 } else { 71 this.graphSource = []; 72 this.graphTbl!.recycleDataSource = []; 73 } 74 }); 75 } 76 77 initElements(): void { 78 this.graphTbl = this.shadowRoot?.querySelector<LitTable>('#tb-graph'); 79 this.range = this.shadowRoot?.querySelector('#graph-time-range'); 80 } 81 82 connectedCallback(): void { 83 super.connectedCallback(); 84 resizeObserver(this.parentElement!, this.graphTbl!); 85 } 86 87 initHtml(): string { 88 return ` 89 <style> 90 .graph-table{ 91 flex-direction: row; 92 margin-bottom: 5px; 93 } 94 :host{ 95 display: flex; 96 flex-direction: column; 97 padding: 10px 10px; 98 } 99 </style> 100 <div class="graph-table" style="display: flex;height: 20px;align-items: center;flex-direction: row;margin-bottom: 5px"> 101 <div style="flex: 1"></div> 102 <label id="graph-time-range" style="width: auto;text-align: end;font-size: 10pt;">Selected range:0.0 ms</label> 103 </div> 104 <div style="overflow: auto"> 105 <lit-table id="tb-graph" style="height: auto" tree> 106 <lit-table-column width="600px" title="Timestamp" data-index="startTsStr" key="startTsStr" align="flex-start" > 107 </lit-table-column> 108 <lit-table-column width="200px" title="GraphPSS" data-index="sizeStr" key="sizeStr" align="flex-start"> 109 </lit-table-column> 110 </lit-table> 111 </div> 112 `; 113 } 114} 115