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 './TabCpuDetailsFrequency'; 18import './TabCpuDetailsIdle'; 19import './TabCpuDetailsIrq'; 20import { TabCpuDetailsFrequency } from './TabCpuDetailsFrequency'; 21import { TabCpuDetailsIdle } from './TabCpuDetailsIdle'; 22import { LitTabs } from '../../../base-ui/tabs/lit-tabs'; 23import { TabCpuDetailsIrq } from './TabCpuDetailsIrq'; 24 25@element('drawer-cpu-tabs') 26export class DrawerCpuTabs extends BaseElement { 27 private cpuNumber: number = 0; 28 private tabs: LitTabs | null | undefined; 29 private tabCpuDetailsFrequency: TabCpuDetailsFrequency | null | undefined; 30 private tabCpuDetailsIdle: TabCpuDetailsIdle | null | undefined; 31 private tabCpuDetailsIrq: TabCpuDetailsIrq | null | undefined; 32 33 initElements(): void { 34 this.tabs = this.shadowRoot?.querySelector<LitTabs>('#tabs'); 35 this.tabCpuDetailsFrequency = this.shadowRoot?.querySelector<TabCpuDetailsFrequency>('#tab-cpu-details-frequency'); 36 this.tabCpuDetailsIdle = this.shadowRoot?.querySelector<TabCpuDetailsIdle>('#tab-cpu-details-idle'); 37 this.tabCpuDetailsIrq = this.shadowRoot?.querySelector<TabCpuDetailsIrq>('#tab-cpu-details-irq'); 38 39 this.tabs!.onTabClick = (e: unknown): void => { 40 //@ts-ignore 41 if (e.detail.key === '1') { 42 //@ts-ignore 43 this.tabCpuDetailsIdle?.init(this.cpuNumber); //@ts-ignore 44 } else if (e.detail.key === '2') { 45 this.tabCpuDetailsFrequency?.init(this.cpuNumber); //@ts-ignore 46 } else if (e.detail.key === '3') { 47 this.tabCpuDetailsIrq?.init(this.cpuNumber); 48 } 49 }; 50 } 51 52 init(cpu: number, value: string): void { 53 this.tabs!.activekey = value; 54 this.cpuNumber = cpu; 55 if (value === '1') { 56 this.tabCpuDetailsIdle?.init(this.cpuNumber); 57 } else if (value === '2') { 58 this.tabCpuDetailsFrequency?.init(this.cpuNumber); 59 } else if (value === '3') { 60 this.tabCpuDetailsIrq?.init(this.cpuNumber); 61 } 62 } 63 64 clearData(): void { 65 this.tabCpuDetailsFrequency!.clearData(); 66 this.tabCpuDetailsIdle!.clearData(); 67 this.tabCpuDetailsIrq!.clearData(); 68 } 69 70 initHtml(): string { 71 return ` 72 <style> 73 :host { 74 width: 100%; 75 height: 100%; 76 background: var(--dark-background5,#F6F6F6); 77 } 78 79 #tabs{ 80 width: 100%; 81 height: calc(100% - 55px); 82 background-color: var(--dark-background5,#F6F6F6); 83 } 84 .tab-pane{ 85 background-color: var(--dark-background,#FFFFFF); 86 } 87 </style> 88 <div > 89 <lit-tabs id="tabs" position="top-left" activekey="1" mode="card" > 90 <lit-tabpane key="1" tab="CPU Idle" class="tab-pane"> 91 <tab-cpu-details-idle id="tab-cpu-details-idle"></tab-cpu-details-idle> 92 </lit-tabpane> 93 <lit-tabpane key="2" tab="CPU Frequency" class="tab-pane"> 94 <tab-cpu-details-frequency id="tab-cpu-details-frequency"></tab-cpu-details-frequency> 95 </lit-tabpane> 96 <lit-tabpane key="3" tab="CPU Irq" class="tab-pane"> 97 <tab-cpu-details-irq id="tab-cpu-details-irq"></tab-cpu-details-irq> 98 </lit-tabpane> 99 </lit-tabs> 100 </div> 101 `; 102 } 103} 104