• 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 '../../../../base-ui/select/LitSelect';
18import '../../../../base-ui/select/LitSelectOption';
19import { SelectionParam } from '../../../bean/BoxSelection';
20import { LitSelect } from '../../../../base-ui/select/LitSelect';
21import { TabPaneSchedSwitch } from './schedswitch/TabPaneSchedSwitch';
22import { TabPaneBinderDataCut } from './binder/TabPaneBinderDataCut';
23import { TabPaneFreqDataCut } from './frequsage/TabPaneFreqDataCut';
24import { TabPaneFreqStatesDataCut } from './states/TabPaneFreqStatesDataCut';
25import { TabPaneGpufreqDataCut } from './gpufreq/TabPaneGpufreqDataCut';
26import { TraceSheet } from '../base/TraceSheet';
27import { LitTabs } from '../../../../base-ui/tabs/lit-tabs';
28import { LitTabpane } from '../../../../base-ui/tabs/lit-tabpane';
29
30@element('tabpane-datacut')
31export class TabPaneDataCut extends BaseElement {
32  private currentSelection: SelectionParam | undefined;
33  private tabSelector: LitSelect | undefined | null;
34  private tabContainer: HTMLDivElement | undefined | null;
35  private currentTabKey: string | undefined;
36  private currentTabPane: any;
37  private tabMap: Map<string, any> = new Map<string, any>();
38  private traceSheetEl: TraceSheet | undefined | null;
39
40  set data(dataCutSelection: SelectionParam | any) {
41    if (dataCutSelection === this.currentSelection || dataCutSelection === undefined || dataCutSelection == null) {
42      return;
43    }
44    this.currentSelection = dataCutSelection;
45    this.initTabSelectorOptions();
46    this.showTabPane();
47  }
48
49  initTabSheetEl(traceSheet: TraceSheet): void {
50    this.traceSheetEl = traceSheet;
51  }
52
53  showTabPane(): void {
54    if (this.currentTabPane) {
55      this.tabContainer?.removeChild(this.currentTabPane);
56    }
57    if (this.currentTabKey && this.currentSelection) {
58      if (this.tabMap.has(this.currentTabKey)) {
59        this.currentTabPane = this.tabMap.get(this.currentTabKey);
60      } else {
61        let tab = this.createTabBySelector();
62        if (tab) {
63          this.currentTabPane = tab;
64          this.tabMap.set(this.currentTabKey, tab);
65        }
66      }
67      if (this.currentTabPane) {
68        this.tabContainer?.appendChild(this.currentTabPane);
69        this.currentTabPane.data = this.currentSelection;
70      }
71      let tabs = document.querySelector('body > sp-application')?.shadowRoot?.querySelector('#sp-system-trace')?.shadowRoot?.querySelector('div > trace-sheet')?.shadowRoot?.querySelector('#tabs') as LitTabs;
72      let pane = document.querySelector('body > sp-application')?.shadowRoot?.querySelector('#sp-system-trace')?.shadowRoot?.querySelector('div > trace-sheet')?.shadowRoot?.querySelector('#tabpane-datacut') as LitTabpane;
73      tabs.activeByKey(pane.key);
74    }
75  }
76
77  createTabBySelector(): any {
78    switch (this.currentTabKey) {
79      case 'Sched Switch':
80        return new TabPaneSchedSwitch();
81      case 'Thread Binder':
82        return new TabPaneBinderDataCut();
83      case 'Cpu Freq':
84        return new TabPaneFreqDataCut();
85      case 'Thread States':
86        let tab = new TabPaneFreqStatesDataCut();
87        tab.initTabSheetEl(this.traceSheetEl!);
88        return tab;
89      case 'Gpu Freq':
90        return new TabPaneGpufreqDataCut();
91      default:
92        return undefined;
93    }
94  }
95
96  initTabSelectorOptions(): void {
97    let options = [];
98    if (this.currentSelection!.threadIds.length > 0) {
99      options.push(
100        ...[
101          {
102            name: 'Sched Switch',
103          },
104          {
105            name: 'Thread Binder',
106          },
107          {
108            name: 'Cpu Freq',
109          },
110          {
111            name: 'Thread States',
112          },
113        ]
114      );
115    }
116    if (
117      this.currentSelection!.clockMapData.size > 0 &&
118      this.currentSelection!.clockMapData.has('gpufreq Frequency') === true
119    ) {
120      options.push({
121        name: 'Gpu Freq',
122      });
123    }
124    this.currentTabKey = options[0].name;
125    this.tabSelector!.defaultValue = this.currentTabKey || '';
126    this.tabSelector!.value = this.currentTabKey || '';
127    this.tabSelector!.dataSource = options;
128  }
129
130  initElements(): void {
131    this.tabContainer = this.shadowRoot?.querySelector<HTMLDivElement>('#data_cut_tabpane_container');
132    this.tabSelector = this.shadowRoot?.querySelector<LitSelect>('#tab-select');
133    this.tabSelector!.onchange = () => {
134      this.currentTabKey = this.tabSelector!.value;
135      this.showTabPane();
136    };
137  }
138
139  connectedCallback() {
140    super.connectedCallback();
141  }
142
143  initHtml(): string {
144    return `
145        <style>
146        :host{
147            display: flex;
148            flex-direction: column;
149            height: 100%;
150        }
151        .bottom_filter{
152            height: 30px;
153            background: var(--dark-background4,#F2F2F2);
154            border-top: 1px solid var(--dark-border1,#c9d0da);
155            display: flex;
156            align-items: center;
157        }
158        </style>
159        <div id="data_cut_tabpane_container" style="flex-grow: 1"></div>
160        <div class="bottom_filter">
161            <lit-select id="tab-select" style="margin-left: 10px" placeholder="please choose" tabselect></lit-select>
162        </div>
163        `;
164  }
165}
166