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.js'; 17import './TabCpuDetailsFrequency.js'; 18import './TabCpuDetailsIdle.js'; 19import './TabCpuDetailsIrq.js'; 20import { TabCpuDetailsFrequency } from './TabCpuDetailsFrequency.js'; 21import { TabCpuDetailsIdle } from './TabCpuDetailsIdle.js'; 22import { LitTabs } from '../../../base-ui/tabs/lit-tabs.js'; 23import { TabCpuDetailsIrq } from './TabCpuDetailsIrq.js'; 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: any) => { 40 if (e.detail.key == '1') { 41 this.tabCpuDetailsIdle?.init(this.cpuNumber); 42 } else if (e.detail.key == '2') { 43 this.tabCpuDetailsFrequency?.init(this.cpuNumber); 44 } else if (e.detail.key == '3') { 45 this.tabCpuDetailsIrq?.init(this.cpuNumber); 46 } 47 }; 48 } 49 50 init(cpu: number, value: string) { 51 this.tabs!.activekey = value; 52 this.cpuNumber = cpu; 53 if (value == '1') { 54 this.tabCpuDetailsIdle?.init(this.cpuNumber); 55 } else if (value == '2') { 56 this.tabCpuDetailsFrequency?.init(this.cpuNumber); 57 } else if (value == '3') { 58 this.tabCpuDetailsIrq?.init(this.cpuNumber); 59 } 60 } 61 62 clearData() { 63 this.tabCpuDetailsFrequency!.clearData(); 64 this.tabCpuDetailsIdle!.clearData(); 65 this.tabCpuDetailsIrq!.clearData(); 66 } 67 68 initHtml(): string { 69 return ` 70 <style> 71 :host { 72 width: 100%; 73 height: 100%; 74 background: var(--dark-background5,#F6F6F6); 75 } 76 77 #tabs{ 78 width: 100%; 79 height: calc(100% - 55px); 80 background-color: var(--dark-background5,#F6F6F6); 81 } 82 .tab-pane{ 83 background-color: var(--dark-background,#FFFFFF); 84 } 85 </style> 86 <div > 87 <lit-tabs id="tabs" position="top-left" activekey="1" mode="card" > 88 <lit-tabpane key="1" tab="CPU Idle" class="tab-pane"> 89 <tab-cpu-details-idle id="tab-cpu-details-idle"></tab-cpu-details-idle> 90 </lit-tabpane> 91 <lit-tabpane key="2" tab="CPU Frequency" class="tab-pane"> 92 <tab-cpu-details-frequency id="tab-cpu-details-frequency"></tab-cpu-details-frequency> 93 </lit-tabpane> 94 <lit-tabpane key="3" tab="CPU Irq" class="tab-pane"> 95 <tab-cpu-details-irq id="tab-cpu-details-irq"></tab-cpu-details-irq> 96 </lit-tabpane> 97 </lit-tabs> 98 </div> 99 `; 100 } 101} 102