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 { LitChartPie } from '../../../base-ui/chart/pie/LitChartPie';
18import { procedurePool } from '../../database/Procedure';
19import { SpSchedulingAnalysis } from './SpSchedulingAnalysis';
20import { info } from '../../../log/Log';
21import { LitTable } from '../../../base-ui/table/lit-table';
22import '../../../base-ui/progress-bar/LitProgressBar';
23import { LitProgressBar } from '../../../base-ui/progress-bar/LitProgressBar';
24import { getDataNo } from './utils/Utils';
25import './TableNoData';
26import { TableNoData } from './TableNoData';
27import { TabCpuDetailsIrqHtml } from './TabCpuDetailsIrq.html';
28
29@element('tab-cpu-details-irq')
30export class TabCpuDetailsIrq extends BaseElement {
31  private tableNoData: TableNoData | null | undefined;
32  private cpuDetailsLrqUsageTbl: LitTable | null | undefined;
33  private cpuDetailsLrqProgress: LitProgressBar | null | undefined;
34  traceChange: boolean = false;
35  private cpuDetailsLrqPie: LitChartPie | null | undefined;
36  private cpuDetailsLrqData: Array<unknown> = [];
37  private cpuDetailsLrqSortColumn: string = '';
38  private sortType: number = 0;
39
40  initElements(): void {
41    this.tableNoData = this.shadowRoot!.querySelector<TableNoData>('#table-no-data');
42    this.cpuDetailsLrqProgress = this.shadowRoot!.querySelector<LitProgressBar>('#loading');
43    this.cpuDetailsLrqPie = this.shadowRoot!.querySelector<LitChartPie>('#chart-pie');
44    this.cpuDetailsLrqUsageTbl = this.shadowRoot!.querySelector<LitTable>('#tb-cpu-irq');
45
46    this.cpuDetailsLrqUsageTbl!.addEventListener('row-click', (evt: unknown) => {
47      // @ts-ignore
48      let data = evt.detail.data;
49      data.isSelected = true;
50      // @ts-ignore
51      if ((evt.detail as unknown).callBack) {
52        // @ts-ignore
53        (evt.detail as unknown).callBack(true);
54      }
55    });
56
57    this.cpuDetailsLrqUsageTbl!.addEventListener('column-click', (evt: unknown) => {
58      //@ts-ignore
59      this.cpuDetailsLrqSortColumn = evt.detail.key; //@ts-ignore
60      this.sortType = evt.detail.sort;
61      // @ts-ignore
62      this.sortByColumn(evt.detail);
63    });
64    this.cpuDetailsLrqUsageTbl!.addEventListener('row-hover', (evt: unknown) => {
65      //@ts-ignore
66      if (evt.detail.data) {
67        //@ts-ignore
68        let data = evt.detail.data;
69        data.isHover = true; //@ts-ignore
70        if ((evt.detail as unknown).callBack) {
71          //@ts-ignore
72          (evt.detail as unknown).callBack(true);
73        }
74      }
75      this.cpuDetailsLrqPie?.showHover();
76    });
77  }
78
79  init(cpu: number): void {
80    this.queryPieChartDataByType('CPU Irq', cpu);
81  }
82
83  queryPieChartDataByType(type: string, cpu: number): void {
84    if (this.traceChange) {
85      return;
86    }
87    this.cpuDetailsLrqProgress!.loading = true;
88    this.queryLoginWorker(`scheduling-${type}`, 'query Cpu Frequency Analysis Time:', (res) => {
89      this.traceChange = true;
90      this.cpuDetailsLrqProgress!.loading = false; //@ts-ignore
91      this.cpuDetailsLrqData = res.get(cpu) || [];
92      this.cpuDetailsLrqData = getDataNo(this.cpuDetailsLrqData);
93      this.tableNoData!.noData = this.cpuDetailsLrqData.length === 0;
94      this.noData(this.cpuDetailsLrqData.length === 0);
95      this.setLrqPieConfig();
96      if (this.cpuDetailsLrqSortColumn !== '') {
97        this.sortByColumn({
98          key: this.cpuDetailsLrqSortColumn,
99          sort: this.sortType,
100        });
101      } else {
102        this.cpuDetailsLrqUsageTbl!.recycleDataSource = this.cpuDetailsLrqData;
103      }
104      this.cpuDetailsLrqUsageTbl?.reMeauseHeight();
105    });
106  }
107
108  private setLrqPieConfig(): void {
109    this.cpuDetailsLrqPie!.config = {
110      appendPadding: 0,
111      data: this.cpuDetailsLrqData,
112      angleField: 'sum',
113      colorField: 'value',
114      radius: 1,
115      label: {
116        type: 'outer',
117      },
118      tip: (irqObj): string => {
119        return `<div>
120                                <div>block:${
121                                  // @ts-ignore
122                                  irqObj.obj.block
123                                }</div> 
124                                <div>name:${
125                                  // @ts-ignore
126                                  irqObj.obj.value
127                                }</div>
128                                <div>min:${
129                                  // @ts-ignore
130                                  irqObj.obj.min
131                                }</div>
132                                <div>max:${
133                                  // @ts-ignore
134                                  irqObj.obj.max
135                                }</div>
136                                <div>average:${
137                                  // @ts-ignore
138                                  irqObj.obj.avg
139                                }</div>
140                                <div>duration:${
141                                  // @ts-ignore
142                                  irqObj.obj.sumTimeStr
143                                }</div>
144                                <div>ratio:${
145                                  // @ts-ignore
146                                  irqObj.obj.ratio
147                                }%</div>
148                            </div>
149                                `;
150      },
151      hoverHandler: (data): void => {
152        if (data) {
153          this.cpuDetailsLrqUsageTbl!.setCurrentHover(data);
154        } else {
155          this.cpuDetailsLrqUsageTbl!.mouseOut();
156        }
157      },
158      interactions: [
159        {
160          type: 'element-active',
161        },
162      ],
163    };
164  }
165
166  noData(value: boolean): void {
167    this.shadowRoot!.querySelector<HTMLDivElement>('.irq-chart-box')!.style.display = value ? 'none' : 'block';
168    this.shadowRoot!.querySelector<HTMLDivElement>('.table-box')!.style.width = value ? '100%' : '60%';
169  }
170
171  clearData(): void {
172    this.traceChange = false;
173    this.cpuDetailsLrqPie!.dataSource = [];
174    this.cpuDetailsLrqUsageTbl!.recycleDataSource = [];
175    this.noData(false);
176  }
177
178  queryLoginWorker(irqType: string, log: string, handler: (res: unknown) => void): void {
179    let cpuDetailsLrqTime = new Date().getTime();
180    procedurePool.submitWithName(
181      'logic0',
182      irqType,
183      {
184        endTs: SpSchedulingAnalysis.endTs,
185        total: SpSchedulingAnalysis.totalDur,
186      },
187      undefined,
188      handler
189    );
190    let durTime = new Date().getTime() - cpuDetailsLrqTime;
191    info(log, durTime);
192  }
193
194  sortByColumn(detail: unknown): void {
195    // @ts-ignore
196    function compare(cpuDetailsLrqProperty, sort, type) {
197      return function (a: unknown, b: unknown) {
198        if (type === 'number') {
199          return sort === 2
200            ? // @ts-ignore
201              parseFloat(b[cpuDetailsLrqProperty]) - parseFloat(a[cpuDetailsLrqProperty]) //@ts-ignore
202            : parseFloat(a[cpuDetailsLrqProperty]) - parseFloat(b[cpuDetailsLrqProperty]);
203        } else {
204          if (sort === 2) {
205            //@ts-ignore
206            return b[cpuDetailsLrqProperty].toString().localeCompare(a[cpuDetailsLrqProperty].toString());
207          } else {
208            //@ts-ignore
209            return a[cpuDetailsLrqProperty].toString().localeCompare(b[cpuDetailsLrqProperty].toString());
210          }
211        }
212      };
213    }
214
215    //@ts-ignore
216    if (detail.key === 'min') {
217      //@ts-ignore
218      detail.key = 'minValue'; //@ts-ignore
219      this.cpuDetailsLrqData.sort(compare(detail.key, detail.sort, 'number')); //@ts-ignore
220    } else if (detail.key === 'max') {
221      //@ts-ignore
222      detail.key = 'maxValue'; //@ts-ignore
223      this.cpuDetailsLrqData.sort(compare(detail.key, detail.sort, 'number')); //@ts-ignore
224    } else if (detail.key === 'avg') {
225      //@ts-ignore
226      detail.key = 'avgValue'; //@ts-ignore
227      this.cpuDetailsLrqData.sort(compare(detail.key, detail.sort, 'number')); //@ts-ignore
228    } else if (detail.key === 'sumTimeStr') {
229      //@ts-ignore
230      detail.key = 'sum'; //@ts-ignore
231      this.cpuDetailsLrqData.sort(compare(detail.key, detail.sort, 'number')); //@ts-ignore
232    } else if (detail.key === 'ratio' || detail.key === 'index') {
233      //@ts-ignore
234      this.cpuDetailsLrqData.sort(compare(detail.key, detail.sort, 'number'));
235    } else {
236      //@ts-ignore
237      this.cpuDetailsLrqData.sort(compare(detail.key, detail.sort, 'string'));
238    }
239    this.cpuDetailsLrqUsageTbl!.recycleDataSource = this.cpuDetailsLrqData;
240  }
241
242  initHtml(): string {
243    return TabCpuDetailsIrqHtml;
244  }
245}
246