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 './Top20ThreadCpuUsage.js'; 18import './Top20ThreadRunTime.js'; 19import './Top20ProcessSwitchCount.js'; 20import './Top20ProcessThreadCount.js'; 21import './Top20FrequencyThread.js'; 22import { Top20ThreadCpuUsage } from './Top20ThreadCpuUsage.js'; 23import { Top20ThreadRunTime } from './Top20ThreadRunTime.js'; 24import { Top20ProcessThreadCount } from './Top20ProcessThreadCount.js'; 25import { Top20ProcessSwitchCount } from './Top20ProcessSwitchCount.js'; 26import { Top20FrequencyThread } from './Top20FrequencyThread.js'; 27import { SpStatisticsHttpUtil } from '../../../statistics/util/SpStatisticsHttpUtil.js'; 28 29@element('tab-thread-analysis') 30export class TabThreadAnalysis extends BaseElement { 31 private currentTabID: string | undefined; 32 private currentTab: BaseElement | undefined; 33 private contentDiv: HTMLDivElement | null | undefined; 34 private tab1: HTMLDivElement | null | undefined; 35 private tab2: HTMLDivElement | null | undefined; 36 private tab3: HTMLDivElement | null | undefined; 37 private tab4: HTMLDivElement | null | undefined; 38 private tab5: HTMLDivElement | null | undefined; 39 private top20ThreadCpuUsage: Top20ThreadCpuUsage | undefined | null; 40 private top20ThreadRunTime: Top20ThreadRunTime | undefined | null; 41 private top20ProcessThreadCount: Top20ProcessThreadCount | undefined | null; 42 private top20ProcessSwitchCount: Top20ProcessSwitchCount | undefined | null; 43 private top20FrequencyThread: Top20FrequencyThread | undefined | null; 44 45 initElements(): void { 46 this.contentDiv = this.shadowRoot!.querySelector<HTMLDivElement>('#content'); 47 this.tab1 = this.shadowRoot!.querySelector<HTMLDivElement>('#tab1'); 48 this.tab2 = this.shadowRoot!.querySelector<HTMLDivElement>('#tab2'); 49 this.tab3 = this.shadowRoot!.querySelector<HTMLDivElement>('#tab3'); 50 this.tab4 = this.shadowRoot!.querySelector<HTMLDivElement>('#tab4'); 51 this.tab5 = this.shadowRoot!.querySelector<HTMLDivElement>('#tab5'); 52 this.top20ThreadCpuUsage = this.shadowRoot!.querySelector<Top20ThreadCpuUsage>('#top20_thread_cpu_usage'); 53 this.top20ThreadRunTime = this.shadowRoot!.querySelector<Top20ThreadRunTime>('#top20_thread_run_time'); 54 this.top20ProcessThreadCount = 55 this.shadowRoot!.querySelector<Top20ProcessThreadCount>('#top20_process_thread_count'); 56 this.top20ProcessSwitchCount = 57 this.shadowRoot!.querySelector<Top20ProcessSwitchCount>('#top20_process_switch_count'); 58 this.top20FrequencyThread = this.shadowRoot!.querySelector<Top20FrequencyThread>('#top20_frequency_thread'); 59 60 this.tab1!.addEventListener('click', (event) => { 61 this.setClickTab(this.tab1!, this.top20ThreadCpuUsage!); 62 }); 63 this.tab2!.addEventListener('click', (event) => { 64 this.setClickTab(this.tab2!, this.top20ThreadRunTime!); 65 }); 66 this.tab3!.addEventListener('click', (event) => { 67 this.setClickTab(this.tab3!, this.top20ProcessThreadCount!); 68 }); 69 this.tab4!.addEventListener('click', (event) => { 70 this.setClickTab(this.tab4!, this.top20ProcessSwitchCount!); 71 }); 72 this.tab5!.addEventListener('click', (event) => { 73 this.setClickTab(this.tab5!, this.top20FrequencyThread!); 74 }); 75 } 76 77 init() { 78 this.top20FrequencyThread!.clearData(); 79 this.top20ThreadCpuUsage!.clearData(); 80 this.top20ThreadRunTime!.clearData(); 81 this.top20ProcessSwitchCount!.clearData(); 82 this.top20ProcessThreadCount!.clearData(); 83 this.hideCurrentTab(); 84 this.currentTabID = undefined; 85 this.setClickTab(this.tab1!, this.top20ThreadCpuUsage!, true); 86 } 87 88 hideCurrentTab() { 89 if (this.currentTabID) { 90 let clickTab = this.shadowRoot!.querySelector<HTMLDivElement>(`#${this.currentTabID}`); 91 if (clickTab) { 92 clickTab.className = 'tag_bt'; 93 } 94 } 95 if (this.currentTab) { 96 this.currentTab.style.display = 'none'; 97 } 98 } 99 100 setClickTab( 101 tab: HTMLDivElement, 102 showContent: 103 | Top20ThreadCpuUsage 104 | Top20ThreadRunTime 105 | Top20ProcessSwitchCount 106 | Top20ProcessThreadCount 107 | Top20FrequencyThread, 108 isInit: boolean = false 109 ) { 110 if (!isInit) { 111 let event = showContent.id 112 .replace(/_/g, ' ') 113 .toLowerCase() 114 .replace(/( |^)[a-z]/g, (L) => L.toUpperCase()); 115 SpStatisticsHttpUtil.addOrdinaryVisitAction({ 116 event: event, 117 action: 'scheduling_analysis', 118 }); 119 } 120 if (this.currentTabID) { 121 let clickTab = this.shadowRoot!.querySelector<HTMLDivElement>(`#${this.currentTabID}`); 122 if (clickTab) { 123 clickTab.className = 'tag_bt'; 124 } 125 } 126 tab.className = 'tab_click'; 127 if (tab.id !== this.currentTabID) { 128 this.currentTabID = tab.id; 129 if (this.currentTab) { 130 this.currentTab.style.display = 'none'; 131 } 132 this.currentTab = showContent; 133 showContent.style.display = 'inline'; 134 showContent.init(); 135 } 136 } 137 138 initHtml(): string { 139 return ` 140 <style> 141 .tag_bt{ 142 height: 45px; 143 border-radius: 10px; 144 border: solid 1px var(--dark-border1,#e0e0e0); 145 line-height: 45px; 146 text-align: center; 147 color: var(--dark-color,#000000); 148 background-color: var(--dark-background5,#FFFFFF); 149 cursor: pointer; 150 } 151 :host { 152 width: 100%; 153 height: 100%; 154 background: var(--dark-background5,#F6F6F6); 155 } 156 .tab_click{ 157 height: 45px; 158 border-radius: 10px; 159 border: solid 1px var(--dark-border1,#e0e0e0); 160 line-height: 45px; 161 text-align: center; 162 color: #FFFFFF; 163 background-color: #0d47a1; 164 cursor: pointer; 165 } 166 #content{ 167 background-color: var(--dark-background,#FFFFFF); 168 } 169 .grid-box{ 170 display: grid;grid-template-columns: auto auto auto auto auto;grid-column-gap: 15px;padding: 10px; 171 background-color: var(--dark-background,#FFFFFF); 172 } 173 </style> 174 <div class="grid-box"> 175 <div class="tag_bt" id="tab1">Top20线程大中小核占用率</div> 176 <div class="tag_bt" id="tab5">单个线程频点分布</div> 177 <div class="tag_bt" id="tab2">Top20单次运行超长线程</div> 178 <div class="tag_bt" id="tab3">Top20进程线程数</div> 179 <div class="tag_bt" id="tab4">Top20切换次数线程</div> 180 </div> 181 <div id="content"> 182 <top20-thread-cpu-usage id="top20_thread_cpu_usage" style="display: none"></top20-thread-cpu-usage> 183 <top20-thread-run-time id="top20_thread_run_time" style="display: none"></top20-thread-run-time> 184 <top20-process-thread-count id="top20_process_thread_count" style="display: none"></top20-process-thread-count> 185 <top20-process-switch-count id="top20_process_switch_count" style="display: none"></top20-process-switch-count> 186 <top20-frequency-thread id="top20_frequency_thread" style="display: none"></top20-frequency-thread> 187 </div> 188 `; 189 } 190} 191