• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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 GL {
27  startTs: number;
28  startTsStr?: string;
29  size: number;
30  sizeStr?: string;
31}
32
33@element('tabpane-gpu-gl')
34export class TabPaneGpuGL extends BaseElement {
35  private glTbl: LitTable | null | undefined;
36  private range: HTMLLabelElement | null | undefined;
37  private glSource: Array<GL> = [];
38  private currentSelectionParam: SelectionParam | undefined;
39
40  set data(glParam: SelectionParam | unknown) {
41    if (this.currentSelectionParam === glParam) {
42      return;
43    }
44    // @ts-ignore
45    this.currentSelectionParam = glParam;
46    //@ts-ignore
47    this.glTbl?.shadowRoot?.querySelector('.table')?.style?.height = this.parentElement!.clientHeight - 45 + 'px';
48    // @ts-ignore
49    this.range!.textContent = 'Selected range: ' + ((glParam.rightNs - glParam.leftNs) / 1000000.0).toFixed(5) + ' ms';
50    this.glTbl!.loading = true;
51    queryGpuDataTab(
52      MemoryConfig.getInstance().iPid,
53      // @ts-ignore
54      glParam.leftNs,
55      // @ts-ignore
56      glParam.rightNs,
57      MemoryConfig.getInstance().snapshotDur,
58      "'mem.gl_pss'"
59    ).then((result) => {
60      this.glTbl!.loading = false;
61      log('queryGpuDataTab result size : ' + result.length);
62      if (result.length > 0) {
63        result.forEach((it: GL) => {
64          it.startTsStr = getProbablyTime(it.startTs);
65          it.sizeStr = Utils.getBinaryByteWithUnit(it.size);
66        });
67        this.glSource = result;
68        this.glTbl!.recycleDataSource = this.glSource;
69      } else {
70        this.glSource = [];
71        this.glTbl!.recycleDataSource = [];
72      }
73    });
74  }
75
76  initElements(): void {
77    this.glTbl = this.shadowRoot?.querySelector<LitTable>('#tb-gl');
78    this.range = this.shadowRoot?.querySelector('#gl-time-range');
79    this.glTbl!.addEventListener('column-click', (evt: unknown) => {
80      // @ts-ignore
81      this.sortByColumn(evt.detail);
82    });
83  }
84
85  connectedCallback(): void {
86    super.connectedCallback();
87    resizeObserver(this.parentElement!, this.glTbl!);
88  }
89
90  initHtml(): string {
91    return `
92        <style>
93        .gl-table{
94          flex-direction: row;
95          margin-bottom: 5px;
96        }
97        :host{
98            display: flex;
99            flex-direction: column;
100            padding: 10px 10px;
101        }
102        </style>
103        <div class="gl-table" style="display: flex;height: 20px;align-items: center;flex-direction: row;margin-bottom: 5px">
104            <div style="flex: 1"></div>
105            <label id="gl-time-range"  style="width: auto;text-align: end;font-size: 10pt;">Selected range:0.0 ms</label>
106        </div>
107        <div style="overflow: auto">
108            <lit-table id="tb-gl" style="height: auto">
109                <lit-table-column width="600px" title="Timestamp"  data-index="startTsStr" key="startTsStr"  align="flex-start" order>
110                </lit-table-column>
111                <lit-table-column width="200px" title="GL_PSS" data-index="sizeStr" key="sizeStr"  align="flex-start" order>
112                </lit-table-column>
113            </lit-table>
114        </div>
115        `;
116  }
117  sortByColumn(detail: { key: string; sort: number }): void {
118    this.glSource.sort((gpuA, gpuB) => {
119      if (detail.sort === 0) {
120        return gpuA.startTs - gpuB.startTs;
121      } else {
122        let key = detail.key.replace('Str', '');
123        // @ts-ignore
124        let valueA = (gpuA as unknown)[key];
125        // @ts-ignore
126        let valueB = (gpuB as unknown)[key];
127        return detail.sort === 1 ? valueA - valueB : valueB - valueA;
128      }
129    });
130    this.glTbl!.recycleDataSource = this.glSource;
131  }
132}
133