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 { procedurePool } from '../../database/Procedure';
19import { info } from '../../../log/Log';
20import { LitChartPie } from '../../../base-ui/chart/pie/LitChartPie';
21import '../../../base-ui/progress-bar/LitProgressBar';
22import { LitProgressBar } from '../../../base-ui/progress-bar/LitProgressBar';
23import './TableNoData';
24import { TableNoData } from './TableNoData';
25
26@element('top20-process-switch-count')
27export class Top20ProcessSwitchCount extends BaseElement {
28  traceChange: boolean = false;
29  private processSwitchCountTbl: LitTable | null | undefined;
30  private processSwitchCountPie: LitChartPie | null | undefined;
31  private processSwitchCountProgress: LitProgressBar | null | undefined;
32  private nodata: TableNoData | null | undefined;
33  private processSwitchCountData: Array<unknown> = [];
34
35  initElements(): void {
36    this.nodata = this.shadowRoot!.querySelector<TableNoData>('#nodata');
37    this.processSwitchCountProgress = this.shadowRoot!.querySelector<LitProgressBar>('#loading');
38    this.processSwitchCountTbl = this.shadowRoot!.querySelector<LitTable>('#tb-process-switch-count');
39    this.processSwitchCountPie = this.shadowRoot!.querySelector<LitChartPie>('#pie');
40
41    this.processSwitchCountTbl!.addEventListener('row-click', (evt: unknown): void => {
42      //@ts-ignore
43      let data = evt.detail.data;
44      data.isSelected = true;
45      // @ts-ignore
46      if ((evt.detail as unknown).callBack) {
47        // @ts-ignore
48        (evt.detail as unknown).callBack(true);
49      }
50    });
51
52    this.processSwitchCountTbl!.addEventListener('column-click', (evt): void => {
53      // @ts-ignore
54      this.sortByColumn(evt.detail);
55    });
56    this.processSwitchCountTbl!.addEventListener('row-hover', (evt: unknown): void => {
57      //@ts-ignore
58      if (evt.detail.data) {
59        //@ts-ignore
60        let data = evt.detail.data;
61        data.isHover = true; //@ts-ignore
62        if ((evt.detail as unknown).callBack) {
63          //@ts-ignore
64          (evt.detail as unknown).callBack(true);
65        }
66      }
67      this.processSwitchCountPie?.showHover();
68    });
69  }
70
71  init(): void {
72    if (!this.traceChange) {
73      if (this.processSwitchCountTbl!.recycleDataSource.length > 0) {
74        this.processSwitchCountTbl?.reMeauseHeight();
75      }
76      return;
77    }
78    this.traceChange = false;
79    this.processSwitchCountProgress!.loading = true;
80    this.queryLogicWorker(
81      'scheduling-Process SwitchCount',
82      'query Process Switch Count Analysis Time:',
83      (res): void => {
84        //@ts-ignore
85        this.nodata!.noData = res === undefined || res.length === 0; //@ts-ignore
86        this.processSwitchCountTbl!.recycleDataSource = res; //@ts-ignore
87        this.processSwitchCountData = res;
88        this.processSwitchCountTbl?.reMeauseHeight();
89        this.processSwitchCountPie!.config = {
90          appendPadding: 10, //@ts-ignore
91          data: res,
92          angleField: 'switchCount',
93          colorField: 'pid',
94          radius: 0.8,
95          tip: (obj): string => {
96            return `<div>
97                             <div>pid:${
98                               // @ts-ignore
99                               obj.obj.tid
100                             }</div> 
101                             <div>p_name:${
102                               // @ts-ignore
103                               obj.obj.tName
104                             }</div> 
105                             <div>sched_switch count:${
106                               // @ts-ignore
107                               obj.obj.switchCount
108                             }</div> 
109                        </div>
110                `;
111          },
112          label: {
113            type: 'outer',
114          },
115          hoverHandler: (data): void => {
116            if (data) {
117              this.processSwitchCountTbl!.setCurrentHover(data);
118            } else {
119              this.processSwitchCountTbl!.mouseOut();
120            }
121          },
122          interactions: [
123            {
124              type: 'element-active',
125            },
126          ],
127        };
128        this.processSwitchCountProgress!.loading = false;
129      }
130    );
131  }
132
133  clearData(): void {
134    this.traceChange = true;
135    this.processSwitchCountPie!.dataSource = [];
136    this.processSwitchCountTbl!.recycleDataSource = [];
137  }
138
139  queryLogicWorker(option: string, log: string, handler: (res: unknown) => void): void {
140    let processSwitchCountTime = new Date().getTime();
141    procedurePool.submitWithName('logic0', option, {}, undefined, handler);
142    let durTime = new Date().getTime() - processSwitchCountTime;
143    info(log, durTime);
144  }
145
146  sortByColumn(detail: unknown): void {
147    // @ts-ignore
148    function compare(processSwitchCountProperty, sort, type) {
149      return function (a: unknown, b: unknown) {
150        if (type === 'number') {
151          return sort === 2
152            ? // @ts-ignore
153              parseFloat(b[processSwitchCountProperty]) - parseFloat(a[processSwitchCountProperty])
154            : //@ts-ignore
155              parseFloat(a[processSwitchCountProperty]) - parseFloat(b[processSwitchCountProperty]);
156        } else {
157          if (sort === 2) {
158            //@ts-ignore
159            return b[processSwitchCountProperty].toString().localeCompare(a[processSwitchCountProperty].toString());
160          } else {
161            //@ts-ignore
162            return a[processSwitchCountProperty].toString().localeCompare(b[processSwitchCountProperty].toString());
163          }
164        }
165      };
166    }
167
168    //@ts-ignore
169    if (detail.key === 'NO' || detail.key === 'pid' || detail.key === 'switchCount' || detail.key === 'tid') {
170      //@ts-ignore
171      this.processSwitchCountData.sort(compare(detail.key, detail.sort, 'number'));
172    } else {
173      //@ts-ignore
174      this.processSwitchCountData.sort(compare(detail.key, detail.sort, 'string'));
175    }
176    this.processSwitchCountTbl!.recycleDataSource = this.processSwitchCountData;
177  }
178
179  initHtml(): string {
180    return `
181        <style>
182        :host {
183            width: 100%;
184            height: 100%;
185            background-color: var(--dark-background5,#F6F6F6);
186        }
187        .top-process-tb-switch-count{
188            flex: 1;        
189            overflow: auto ;
190            border-radius: 5px;
191            border: solid 1px var(--dark-border1,#e0e0e0);
192            margin: 15px;
193            padding: 5px 15px
194        }
195        .top-process-pie-chart{
196            display: flex;
197            box-sizing: border-box;
198            width: 500px;
199            height: 500px;
200        }
201        .top-process-switch-root{
202            display: flex;
203            flex-direction: row;
204            box-sizing: border-box;
205            width: 100%;
206            height: 100%;
207        }
208        </style>
209        <lit-progress-bar id="loading" style="height: 1px;width: 100%" loading></lit-progress-bar>
210        <table-no-data id="nodata" contentHeight="500px">
211        <div class="top-process-switch-root">
212            <div style="display: flex;flex-direction: column;align-items: center">
213                <div>Statistics By Sched_Switch Count</div>
214                <lit-chart-pie id="pie" class="top-process-pie-chart"></lit-chart-pie>
215            </div>
216            <div class="top-process-tb-switch-count" >
217                <lit-table id="tb-process-switch-count" hideDownload style="height: auto">
218                    <lit-table-column width="1fr" title="NO" data-index="NO" key="NO" align="flex-start" order></lit-table-column>
219                    <lit-table-column width="1fr" title="tid" data-index="tid" key="tid" align="flex-start" order></lit-table-column>
220                    <lit-table-column width="1fr" title="t_name" data-index="tName" key="tName" align="flex-start" order></lit-table-column>
221                    <lit-table-column width="1fr" title="pid" data-index="pid" key="pid" align="flex-start" order></lit-table-column>
222                    <lit-table-column width="1fr" title="p_name" data-index="pName" key="pName" align="flex-start" order></lit-table-column>
223                    <lit-table-column width="1fr" title="sched_switch count" data-index="switchCount" key="switchCount" align="flex-start" order></lit-table-column>        
224                </lit-table>
225            </div>
226        </div>
227        </table-no-data>
228        `;
229  }
230}
231