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 { SpStatisticsHttpUtil } from '../../../../statistics/util/SpStatisticsHttpUtil';
18import './Top10LongestRunTimeProcess.ts';
19import './Top10ProcessSwitchCount.ts';
20import { Top10LongestRunTimeProcess } from './Top10LongestRunTimeProcess';
21import { Top10ProcessSwitchCount } from './Top10ProcessSwitchCount';
22
23@element('tab-process-analysis')
24export class TabProcessAnalysis extends BaseElement {
25  private currentTabID: string | undefined;
26  private currentTab: BaseElement | undefined;
27  private btn1: HTMLDivElement | null | undefined;
28  private btn2: HTMLDivElement | null | undefined;
29  private Top10LongestRunTimeProcess: Top10LongestRunTimeProcess | undefined | null;
30  private Top10ProcessSwitchCount: Top10ProcessSwitchCount | undefined | null;
31
32  /**
33   * 元素初始化，将html节点与内部变量进行绑定
34   */
35  initElements(): void {
36    this.btn1 = this.shadowRoot!.querySelector<HTMLDivElement>('#btn1');
37    this.btn2 = this.shadowRoot!.querySelector<HTMLDivElement>('#btn2');
38    this.Top10LongestRunTimeProcess = this.shadowRoot!.querySelector<Top10LongestRunTimeProcess>('#top10_process_runTime');
39    this.Top10ProcessSwitchCount = this.shadowRoot!.querySelector<Top10ProcessSwitchCount>('#top10_process_switchCount');
40    this.btn1!.addEventListener('click', (event) => {
41      this.setClickTab(this.btn1!, this.Top10ProcessSwitchCount!);
42    });
43    this.btn2!.addEventListener('click', (event) => {
44      this.setClickTab(this.btn2!, this.Top10LongestRunTimeProcess!);
45    });
46  }
47
48  /**
49   * 初始化操作，清空该标签页下所有面板数据，只有首次导入新trace后执行一次
50   */
51  init(): void {
52    this.Top10ProcessSwitchCount?.clearData();
53    this.Top10LongestRunTimeProcess?.clearData();
54    this.hideCurrentTab();
55    this.currentTabID = undefined;
56    this.setClickTab(this.btn1!, this.Top10ProcessSwitchCount!);
57  }
58
59  /**
60   * 隐藏当前面板，将按钮样式设置为未选中状态
61   */
62  hideCurrentTab(): void {
63    if (this.currentTabID) {
64      let clickTab = this.shadowRoot!.querySelector<HTMLDivElement>(`#${this.currentTabID}`);
65      if (clickTab) {
66        clickTab.className = 'tag_bt';
67      }
68    }
69    if (this.currentTab) {
70      this.currentTab.style.display = 'none';
71    }
72  }
73
74  /**
75   * 
76   * @param btn 当前点击的数据类型按钮
77   * @param showContent 需要展示的面板对象
78   */
79  setClickTab(btn: HTMLDivElement, showContent: Top10ProcessSwitchCount | Top10LongestRunTimeProcess): void {
80    // 将前次点击的按钮样式设置为未选中样式状态
81    if (this.currentTabID) {
82      let clickTab = this.shadowRoot!.querySelector<HTMLDivElement>(`#${this.currentTabID}`);
83      if (clickTab) {
84        clickTab.className = 'tag_bt';
85      }
86    }
87    // 切换当前点击按钮的类名，应用点击样式
88    btn.className = 'tab_click';
89    // 切换记录的好的当前点击面板id，并设置其显隐
90    if (btn.id !== this.currentTabID) {
91      this.currentTabID = btn.id;
92      if (this.currentTab) {
93        this.currentTab.style.display = 'none';
94      }
95      this.currentTab = showContent;
96      showContent.style.display = 'inline';
97      showContent.init();
98    }
99  }
100
101  /**
102   * 用于将元素节点挂载
103   * @returns 返回字符串形式的元素节点
104   */
105  initHtml(): string {
106    return `
107    <style>
108    .tag_bt{
109        height: 45px;
110        border-radius: 10px;
111        border: solid 1px var(--dark-border1,#e0e0e0);
112        line-height: 45px;
113        text-align: center;
114        color: var(--dark-color,#000000);
115        background-color: var(--dark-background5,#FFFFFF);
116        cursor: pointer;
117    }
118    :host {
119        width: 100%;
120        height: 100%;
121        background: var(--dark-background5,#F6F6F6);
122    }
123    .tab_click{
124        height: 45px;
125        border-radius: 10px;
126        border: solid 1px var(--dark-border1,#e0e0e0);
127        line-height: 45px;
128        text-align: center;
129        color: #FFFFFF;
130        background-color: #0d47a1;
131        cursor: pointer;
132    }
133    #content{
134        background-color: var(--dark-background,#FFFFFF);
135    }
136    .grid-box{
137        display: grid;grid-template-columns: auto auto auto auto auto;grid-column-gap: 15px;padding: 10px;
138        background-color: var(--dark-background,#FFFFFF);
139    }
140    </style>
141    <div class="grid-box">
142        <div class="tag_bt" id="btn1">Top10切换次数进程</div>
143        <div class="tag_bt" id="btn2">Top10运行超长进程</div>
144    </div>
145    <div id="content">
146        <top10-process-switch-count id="top10_process_switchCount" style="display: none"></top10-process-switch-count>
147        <top10-longest-runtime-process id="top10_process_runTime" style="display: none"></top10-longest-runtime-process>
148    </div>
149    `;
150  }
151}