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 { TableNoData } from '../TableNoData';
21import '../TableNoData';
22import { LitProgressBar } from '../../../../base-ui/progress-bar/LitProgressBar';
23import '../../../../base-ui/progress-bar/LitProgressBar';
24import { LitChartColumn } from '../../../../base-ui/chart/column/LitChartColumn';
25import '../../../../base-ui/chart/column/LitChartColumn';
26import { Utils } from '../../trace/base/Utils';
27
28@element('top10-longest-runtime-process')
29export class Top10LongestRunTimeProcess extends BaseElement {
30  traceChange: boolean = false;
31  private processRunTimeTbl: LitTable | null | undefined;
32  private threadRunTimeTbl: LitTable | null | undefined;
33  private processRunTimeProgress: LitProgressBar | null | undefined;
34  private nodataPro: TableNoData | null | undefined;
35  private processRunTimeData: Array<Top10RunTimeData> = [];
36  private threadRunTimeData: Array<Top10RunTimeData> = [];
37  private processSwitchCountChart: LitChartColumn | null | undefined;
38  private threadSwitchCountChart: LitChartColumn | null | undefined;
39  private nodataThr: TableNoData | null | undefined;
40  private display_pro: HTMLDivElement | null | undefined;
41  private display_thr: HTMLDivElement | null | undefined;
42  private processId: number | undefined;
43  private display_flag: boolean = true;
44  private back: HTMLDivElement | null | undefined;
45  private processMap: Map<number, string> = new Map();
46  private threadMap: Map<number, string> = new Map();
47
48  /**
49   * 初始化操作，若trace发生改变，将所有变量设置为默认值并重新请求数据。若trace未改变，跳出初始化
50   */
51  init(): void {
52    if (!this.traceChange) {
53      if (this.processRunTimeTbl!.recycleDataSource.length > 0) {
54        this.processRunTimeTbl?.reMeauseHeight();
55      }
56      return;
57    }
58    this.traceChange = false;
59    this.processRunTimeProgress!.loading = true;
60    this.display_flag = true;
61    this.display_pro!.style.display = 'block';
62    this.display_thr!.style.display = 'none';
63    this.processMap = Utils.getInstance().getProcessMap();
64    this.threadMap = Utils.getInstance().getThreadMap();
65    this.queryLogicWorker(
66      'scheduling-Process Top10RunTime',
67      'query Process Top10 Run Time Analysis Time:',
68      this.callBack.bind(this)
69    );
70  }
71
72  /**
73   * 清除已存储数据
74   */
75  clearData(): void {
76    this.traceChange = true;
77    this.processSwitchCountChart!.dataSource = [];
78    this.processRunTimeTbl!.recycleDataSource = [];
79    this.threadSwitchCountChart!.dataSource = [];
80    this.threadRunTimeTbl!.recycleDataSource = [];
81    this.processRunTimeData = [];
82    this.threadRunTimeData = [];
83    this.processMap = new Map();
84    this.threadMap = new Map();
85  }
86
87  /**
88   * 提交worker线程，进行数据库查询
89   * @param option 操作的key值，用于找到并执行对应方法
90   * @param log 日志打印内容
91   * @param handler 结果回调函数
92   * @param pid 需要查询某一进程下线程数据的进程id
93   */
94  queryLogicWorker(option: string, log: string, handler: (res: Array<Top10RunTimeData>) => void, pid?: number): void {
95    let processThreadCountTime = new Date().getTime();
96    procedurePool.submitWithName('logic0', option, { pid: pid }, undefined, handler);
97    let durTime = new Date().getTime() - processThreadCountTime;
98    info(log, durTime);
99  }
100
101  /**
102   * 提交worker线程，进行数据库查询
103   * @param option 操作的key值，用于找到并执行对应方法
104   * @param log 日志打印内容
105   * @param handler 结果回调函数
106   * @param pid 需要查询某一进程下线程数据的进程id
107   */
108  organizationData(arr: Array<Top10RunTimeData>): Array<Top10RunTimeData> {
109    let result: Array<Top10RunTimeData> = [];
110    for (let i = 0; i < arr.length; i++) {
111      const pStr: string | null = this.processMap.get(arr[i].pid!)!;
112      const tStr: string | null = this.threadMap.get(arr[i].tid!)!;
113      result.push({
114        no: i + 1,
115        pid: arr[i].pid || this.processId,
116        pName: pStr === null ? 'Process ' : pStr,
117        dur: arr[i].dur,
118        tid: arr[i].tid,
119        tName: tStr === null ? 'Thread ' : tStr
120      });
121    }
122    return result;
123  }
124
125  /**
126   * 提交线程后，结果返回后的回调函数
127   * @param res 数据库查询结果
128   */
129  callBack(res: Array<Top10RunTimeData>): void {
130    let result: Array<Top10RunTimeData> = this.organizationData(res);
131    if (this.display_flag === true) {
132      this.processCallback(result);
133    } else {
134      this.threadCallback(result);
135    }
136    this.processRunTimeProgress!.loading = false;
137  }
138
139  /**
140   * 大函数块拆解分为两部分，此部分为Top10进程数据
141   * @param result 需要显示在表格中的数据
142   */
143  processCallback(result: Array<Top10RunTimeData>): void {
144    this.nodataPro!.noData = result === undefined || result.length === 0;
145    this.processRunTimeTbl!.recycleDataSource = result;
146    this.processRunTimeTbl!.reMeauseHeight();
147    this.processRunTimeData = result;
148    this.processSwitchCountChart!.config = {
149      data: result,
150      appendPadding: 10,
151      xField: 'pid',
152      yField: 'dur',
153      seriesField: 'size',
154      color: (a): string => {
155        return '#0a59f7';
156      },
157      hoverHandler: (no): void => {
158        let data: unknown = result.find((it) => it.no === no);
159        if (data) {
160          // @ts-ignore
161          data.isHover = true;
162          this.processRunTimeTbl!.setCurrentHover(data);
163        } else {
164          this.processRunTimeTbl!.mouseOut();
165        }
166      },
167      tip: (obj): string => {
168        return `
169          <div>
170            <div>Process_Id:${
171          // @ts-ignore
172          obj[0].obj.pid}</div> 
173            <div>Process_Name:${
174          // @ts-ignore
175          obj[0].obj.pName}</div> 
176            <div>Run_Time:${
177          // @ts-ignore
178          obj[0].obj.dur}</div> 
179          </div>
180        `;
181      },
182      label: null,
183    };
184  }
185
186  /**
187   * 大函数块拆解分为两部分，此部分为Top10线程数据
188   * @param result 需要显示在表格中的数据
189   */
190  threadCallback(result: Array<Top10RunTimeData>): void {
191    this.nodataThr!.noData = result === undefined || result.length === 0;
192    this.threadRunTimeTbl!.recycleDataSource = result;
193    this.threadRunTimeTbl!.reMeauseHeight();
194    this.threadRunTimeData = result;
195    this.threadSwitchCountChart!.config = {
196      data: result,
197      appendPadding: 10,
198      xField: 'tid',
199      yField: 'dur',
200      seriesField: 'size',
201      color: (a): string => {
202        return '#0a59f7';
203      },
204      hoverHandler: (no): void => {
205        let data: unknown = result.find((it) => it.no === no);
206        if (data) {
207          // @ts-ignore
208          data.isHover = true;
209          this.threadRunTimeTbl!.setCurrentHover(data);
210        } else {
211          this.threadRunTimeTbl!.mouseOut();
212        }
213      },
214      tip: (obj): string => {
215        return `
216          <div>
217            <div>Process_Id:${
218          // @ts-ignore
219          obj[0].obj.pid}</div> 
220            <div>Thread_Id:${
221          // @ts-ignore
222          obj[0].obj.tid}</div> 
223            <div>Thread_Name:${
224          // @ts-ignore
225          obj[0].obj.tName}</div> 
226            <div>Run_Time:${
227          // @ts-ignore
228          obj[0].obj.dur}</div> 
229          </div>
230        `;
231      },
232      label: null,
233    };
234  }
235
236  /**
237   * 元素初始化，将html节点与内部变量进行绑定
238   */
239  initElements(): void {
240    this.processRunTimeProgress = this.shadowRoot!.querySelector<LitProgressBar>('#loading');
241    this.nodataPro = this.shadowRoot!.querySelector<TableNoData>('#nodata_Pro');
242    this.processRunTimeTbl = this.shadowRoot!.querySelector<LitTable>('#tb-process-run-time');
243    this.processSwitchCountChart = this.shadowRoot!.querySelector<LitChartColumn>('#chart_pro');
244    this.nodataThr = this.shadowRoot!.querySelector<TableNoData>('#nodata_Thr');
245    this.threadRunTimeTbl = this.shadowRoot!.querySelector<LitTable>('#tb-thread-run-time');
246    this.threadSwitchCountChart = this.shadowRoot!.querySelector<LitChartColumn>('#chart_thr');
247    this.display_pro = this.shadowRoot!.querySelector<HTMLDivElement>('#display_pro');
248    this.display_thr = this.shadowRoot!.querySelector<HTMLDivElement>('#display_thr');
249    this.back = this.shadowRoot!.querySelector<HTMLDivElement>('#back');
250    this.clickEventListener();
251    this.hoverEventListener();
252  }
253
254  /**
255   * 点击监听事件函数块
256   */
257  clickEventListener(): void {
258    // @ts-ignore
259    this.processRunTimeTbl!.addEventListener('row-click', (evt: CustomEvent) => {
260      this.display_flag = false;
261      let data = evt.detail.data;
262      this.processId = data.pid;
263      this.display_thr!.style.display = 'block';
264      this.display_pro!.style.display = 'none';
265      this.queryLogicWorker(
266        'scheduling-Process Top10RunTime',
267        'query Thread Top10 Run Time Analysis Time:',
268        this.callBack.bind(this),
269        data.pid
270      );
271    });
272    this.processRunTimeTbl!.addEventListener('column-click', (evt) => {
273      // @ts-ignore
274      this.sortByColumn(evt.detail, this.processRunTimeData);
275      this.processRunTimeTbl!.recycleDataSource = this.processRunTimeData;
276    });
277    this.threadRunTimeTbl!.addEventListener('column-click', (evt) => {
278      // @ts-ignore
279      this.sortByColumn(evt.detail, this.threadRunTimeData);
280      this.threadRunTimeTbl!.recycleDataSource = this.threadRunTimeData;
281    });
282    this.processRunTimeTbl!.addEventListener('contextmenu', (ev) => { 
283      ev.preventDefault();
284    });
285    this.threadRunTimeTbl!.addEventListener('contextmenu', (ev) => {
286      ev.preventDefault();
287    });
288    this.back?.addEventListener('click', (event) => {
289      this.display_flag = true;
290      this.display_pro!.style.display = 'block';
291      this.display_thr!.style.display = 'none';
292    });
293  }
294
295  /**
296   * 移入事件监听函数块
297   */
298  hoverEventListener(): void {
299    // @ts-ignore
300    this.processRunTimeTbl!.addEventListener('row-hover', (evt: CustomEvent) => {
301      if (evt.detail.data) {
302        let data = evt.detail.data;
303        data.isHover = true;
304        if (evt.detail.callBack) {
305          evt.detail.callBack(true);
306        }
307        this.processSwitchCountChart?.showHoverColumn(data.no);
308      }
309    });
310    // @ts-ignore
311    this.threadRunTimeTbl!.addEventListener('row-hover', (evt: CustomEvent) => {
312      if (evt.detail.data) {
313        let data = evt.detail.data;
314        data.isHover = true;
315        if (evt.detail.callBack) {
316          evt.detail.callBack(true);
317        }
318        this.threadSwitchCountChart?.showHoverColumn(data.no);
319      }
320    });
321  }
322
323  /**
324   * 表格数据排序
325   * @param detail 点击的列名，以及排序状态0 1 2分别代表不排序、升序排序、降序排序
326   * @param data 表格中需要排序的数据
327   */
328  sortByColumn(detail: unknown, data: Array<Top10RunTimeData>): void {
329    // @ts-ignore
330    function compare(processThreadCountProperty, sort, type) {
331      return function (a: unknown, b: unknown) {
332        if (type === 'number') {
333          // @ts-ignore
334          return sort === 2
335          // @ts-ignore
336            ? parseFloat(b[processThreadCountProperty]) -
337            // @ts-ignore
338            parseFloat(a[processThreadCountProperty])
339            // @ts-ignore
340            : parseFloat(a[processThreadCountProperty]) -
341            // @ts-ignore
342            parseFloat(b[processThreadCountProperty]);
343        } else {
344          if (sort === 2) {
345            // @ts-ignore
346            return b[processThreadCountProperty]
347              .toString()
348              // @ts-ignore
349              .localeCompare(a[processThreadCountProperty].toString());
350          } else {
351            // @ts-ignore
352            return a[processThreadCountProperty]
353              .toString()
354              // @ts-ignore
355              .localeCompare(b[processThreadCountProperty].toString());
356          }
357        }
358      };
359    }
360    // @ts-ignore
361    if (detail.key === 'pName' || detail.key === 'tName') {
362      data.sort(
363        // @ts-ignore
364        compare(detail.key, detail.sort, 'string')
365      );
366    } else {
367      data.sort(
368        // @ts-ignore
369        compare(detail.key, detail.sort, 'number')
370      );
371    }
372  }
373
374  /**
375   * 用于将元素节点挂载，大函数块拆分为样式、节点
376   * @returns 返回字符串形式的元素节点
377   */
378  initHtml(): string {
379    return this.initStyleHtml() + this.initTagHtml();
380  }
381
382  /**
383   * 样式html代码块
384   * @returns 返回样式代码块字符串
385   */
386  initStyleHtml(): string {
387    return `
388      <style>
389        .content_grid{
390            display: grid;
391            padding: 15px;
392            grid-column-gap: 15px;
393            grid-row-gap: 15px;
394            grid-template-columns: 1fr 1fr;
395            background-color: var(--dark-background,#FFFFFF);
396        }
397        .chart_div{
398            display: flex;
399            flex-direction: column;
400            background-color: var(--dark-background,#FFFFFF);
401            align-items: center;
402            height: 370px;
403            padding-left: 5px;
404            padding-right: 5px;
405            border-radius: 5px
406        }
407        :host {
408            width: 100%;
409            height: 100%;
410            background: var(--dark-background5,#F6F6F6);
411        }
412        .tb_run_time{
413            overflow: auto;
414            background-color: var(--dark-background,#FFFFFF);
415            border-radius: 5px;
416            border: solid 1px var(--dark-border1,#e0e0e0);
417            display: flex;
418        }
419        .bg{
420            background-color: var(--dark-background,#FFFFFF);
421            padding-left: 10px;
422        }
423        .labels{
424            display: flex;
425            flex-direction: row;
426            align-items: center;
427            justify-content: center;
428            font-size: 9pt;
429            padding-right: 15px;
430        }
431      </style>
432    `;
433  }
434
435  /**
436   * 节点html代码块
437   * @returns 返回节点代码块字符串
438   */
439  initTagHtml(): string {
440    return `
441      <lit-progress-bar id="loading" style="height: 1px;width: 100%"></lit-progress-bar>
442      <div id='display_pro'>
443        <table-no-data id="nodata_Pro" contentHeight="500px">
444          <div class="root">
445            <div style="width:100%;height: 45px;"></div>
446            <div class="content_grid" id="total">
447              <div class="chart_div">
448                <div style="line-height: 40px;height: 40px;width: 100%;text-align: center;">Top10运行超长进程</div>
449                <lit-chart-column id="chart_pro" style="width:100%;height:300px"></lit-chart-column>
450              </div>
451              <div class="tb_run_time" >
452                <lit-table id='tb-process-run-time' hideDownload style='height: auto'>
453                  <lit-table-column width='1fr' title='NO' data-index='no' key='no' align='flex-start' order></lit-table-column>
454                  <lit-table-column width='1fr' title='Process_Id' data-index='pid' key='pid' align='flex-start' order></lit-table-column>
455                  <lit-table-column width='1fr' title='Process_Name' data-index='pName' key='pName' align='flex-start' order></lit-table-column>
456                  <lit-table-column width='1fr' title='Run_Time(ns)' data-index='dur' key='dur' align='flex-start' order></lit-table-column>        
457                </lit-table>
458              </div>
459            </div>
460          </div>
461        </table-no-data>
462      </div>
463      <div id='display_thr' style='display: none'>
464        <table-no-data id="nodata_Thr" contentHeight="500px">
465          <div class="root">
466            <div class="bg" style="display: flex;flex-direction: row;">
467              <div id="back" style="height: 45px;display: flex;flex-direction: row;align-items: center;cursor: pointer" title="Back Previous Level">
468                <span style="width: 10px"></span>Previous Level<span style="width: 10px"></span><lit-icon name="vertical-align-top" size="20"></lit-icon>
469              </div>
470            </div>
471            <div class="content_grid" id="total">
472              <div class="chart_div">
473                <div style="line-height: 40px;height: 40px;width: 100%;text-align: center;">Top10运行超长线程</div>
474                <lit-chart-column id="chart_thr" style="width:100%;height:300px"></lit-chart-column>
475              </div>
476              <div class="tb_run_time" >
477                <lit-table id='tb-thread-run-time' hideDownload style='height: auto'>
478                  <lit-table-column width='1fr' title='NO' data-index='no' key='no' align='flex-start' order></lit-table-column>
479                  <lit-table-column width='1fr' title='Process_Id' data-index='pid' key='pid' align='flex-start' order></lit-table-column>
480                  <lit-table-column width='1fr' title='Thread_Id' data-index='tid' key='tid' align='flex-start' order></lit-table-column>
481                  <lit-table-column width='1fr' title='Thread_Name' data-index='tName' key='tName' align='flex-start' order></lit-table-column>
482                  <lit-table-column width='1fr' title='Run_Time(ns)' data-index='dur' key='dur' align='flex-start' order></lit-table-column>        
483                </lit-table>
484              </div>
485            </div>
486          </div>
487        </table-no-data>
488      </div>
489    `;
490  }
491}
492
493interface Top10RunTimeData {
494  no?: number,
495  pid?: number,
496  tid?: number,
497  pName?: string,
498  tName?: string,
499  switchCount?: number,
500  dur?: number
501}