• 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 { SelectionData, SelectionParam } from '../../../../bean/BoxSelection';
19import { log } from '../../../../../log/Log';
20import { Utils } from '../../base/Utils';
21import { resizeObserver } from '../SheetUtils';
22import { getTabCpuByProcess } from '../../../../database/sql/Cpu.sql';
23
24@element('tabpane-cpu-process')
25export class TabPaneCpuByProcess extends BaseElement {
26  private cpuByProcessTbl: LitTable | null | undefined;
27  private cpuByProcessRange: HTMLLabelElement | null | undefined;
28  private cpuByProcessSource: Array<SelectionData> = [];
29  private currentSelectionParam: SelectionParam | undefined;
30
31  set data(cpuByProcessValue: SelectionParam) {
32    if (this.currentSelectionParam === cpuByProcessValue) {
33      return;
34    }
35    // @ts-ignore
36    this.currentSelectionParam = cpuByProcessValue;
37    this.cpuByProcessRange!.textContent = `Selected range: ${parseFloat(
38      ((cpuByProcessValue.rightNs - cpuByProcessValue.leftNs) / 1000000.0).toFixed(5)
39    )} ms`;
40    if (this.cpuByProcessTbl) {
41      // @ts-ignore
42      this.cpuByProcessTbl.shadowRoot!.querySelector('.table').style.height = `${
43        this.parentElement!.clientHeight - 50
44      }px`;
45    }
46    this.cpuByProcessTbl!.recycleDataSource = [];
47    this.cpuByProcessTbl!.loading = true;
48    // @ts-ignore
49    getTabCpuByProcess(cpuByProcessValue.cpus, cpuByProcessValue.leftNs, // @ts-ignore
50      cpuByProcessValue.rightNs, cpuByProcessValue.traceId).then((result): void => {
51      this.cpuByProcessTbl!.loading = false;
52      if (result !== null && result.length > 0) {
53        log(`getTabCpuByProcess size :${result.length}`);
54        let sumWall = 0.0;
55        let sumOcc = 0;
56        for (let e of result) {
57          //@ts-ignore
58          let process = Utils.getInstance().getProcessMap(cpuByProcessValue.traceId).get(e.pid); //@ts-ignore
59          e.process = !process || process.length === 0 ? '[NULL]' : process; //@ts-ignore
60          sumWall += e.wallDuration; //@ts-ignore
61          sumOcc += e.occurrences; //@ts-ignore
62          e.wallDuration = parseFloat((e.wallDuration / 1000000.0).toFixed(5)); //@ts-ignore
63          e.avgDuration = parseFloat((parseFloat(e.avgDuration) / 1000000.0).toFixed(5)).toString();
64        }
65        let count = new SelectionData();
66        count.process = ' ';
67        count.wallDuration = parseFloat((sumWall / 1000000.0).toFixed(5));
68        count.occurrences = sumOcc;
69        result.splice(0, 0, count); //@ts-ignore
70        this.cpuByProcessSource = result;
71        this.cpuByProcessTbl!.recycleDataSource = result;
72      } else {
73        this.cpuByProcessSource = [];
74        this.cpuByProcessTbl!.recycleDataSource = this.cpuByProcessSource;
75      }
76    });
77  }
78
79  initElements(): void {
80    this.cpuByProcessTbl = this.shadowRoot?.querySelector<LitTable>('#tb-cpu-process');
81    this.cpuByProcessRange = this.shadowRoot?.querySelector('#cpu-process-time-range');
82    this.cpuByProcessTbl!.addEventListener('column-click', (evt): void => {
83      // @ts-ignore
84      this.sortByColumn(evt.detail);
85    });
86  }
87
88  connectedCallback(): void {
89    super.connectedCallback();
90    resizeObserver(this.parentElement!, this.cpuByProcessTbl!);
91  }
92
93  initHtml(): string {
94    return `
95        <style>
96        .cpu-process-label{
97            font-size: 10pt;
98            margin-bottom: 5px;
99            text-align: end;
100        }
101        :host{
102            border: 0;
103            padding: 10px 10px;
104            display: flex;
105            flex-direction: column;
106        }
107        </style>
108        <label id="cpu-process-time-range" class="cpu-process-label" style="width: 100%;height: 20px;">Selected range:0.0 ms</label>
109        <lit-table id="tb-cpu-process" style="height: auto">
110            <lit-table-column class="cpu-process-column" order width="30%" title="Process" data-index="process" key="process" align="flex-start" order>
111            </lit-table-column>
112            <lit-table-column class="cpu-process-column" order width="1fr" title="PID" data-index="pid" key="pid" align="flex-start" order>
113            </lit-table-column>
114            <lit-table-column class="cpu-process-column" order width="1fr" title="Wall duration(ms)" data-index="wallDuration" key="wallDuration" align="flex-start" order>
115            </lit-table-column>
116            <lit-table-column class="cpu-process-column" order width="1fr" title="Avg Wall duration(ms)" data-index="avgDuration" key="avgDuration" align="flex-start" order>
117            </lit-table-column>
118            <lit-table-column class="cpu-process-column" order width="1fr" title="Occurrences" data-index="occurrences" key="occurrences" align="flex-start" order>
119            </lit-table-column>
120        </lit-table>
121        `;
122  }
123
124  sortByColumn(cpuByProcessDetail: unknown): void {
125    // @ts-ignore
126    function compare(property, sort, type) {
127      return function (cpuByProcessLeftData: SelectionData, cpuByProcessRightData: SelectionData): number {
128        if (cpuByProcessLeftData.process === ' ' || cpuByProcessRightData.process === ' ') {
129          return 0;
130        }
131        if (type === 'number') {
132          return sort === 2 // @ts-ignore
133            ? parseFloat(cpuByProcessRightData[property]) - parseFloat(cpuByProcessLeftData[property]) // @ts-ignore
134            : parseFloat(cpuByProcessLeftData[property]) - parseFloat(cpuByProcessRightData[property]);
135        } else {
136          // @ts-ignore
137          if (cpuByProcessRightData[property] > cpuByProcessLeftData[property]) {
138            return sort === 2 ? 1 : -1;
139          } else {
140            // @ts-ignore
141            if (cpuByProcessRightData[property] === cpuByProcessLeftData[property]) {
142              return 0;
143            } else {
144              return sort === 2 ? -1 : 1;
145            }
146          }
147        }
148      };
149    }
150
151    if (
152      // @ts-ignore
153      cpuByProcessDetail.key === 'pid' ||
154      // @ts-ignore
155      cpuByProcessDetail.key === 'wallDuration' ||
156      // @ts-ignore
157      cpuByProcessDetail.key === 'avgDuration' ||
158      // @ts-ignore
159      cpuByProcessDetail.key === 'occurrences'
160    ) {
161      // @ts-ignore
162      this.cpuByProcessSource.sort(compare(cpuByProcessDetail.key, cpuByProcessDetail.sort, 'number'));
163    } else {
164      // @ts-ignore
165      this.cpuByProcessSource.sort(compare(cpuByProcessDetail.key, cpuByProcessDetail.sort, 'string'));
166    }
167    this.cpuByProcessTbl!.recycleDataSource = this.cpuByProcessSource;
168  }
169}
170