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 {LitTable} from "../../../../../base-ui/table/lit-table.js"; 18import {SelectionParam} from "../../../../bean/BoxSelection.js"; 19import {LitProgressBar} from "../../../../../base-ui/progress-bar/LitProgressBar.js"; 20import {Utils} from "../../base/Utils.js"; 21import {ColorUtils} from "../../base/ColorUtils.js"; 22import {CpuFreqLimitsStruct} from "../../../../database/ui-worker/ProcedureWorkerCpuFreqLimits.js"; 23 24@element('tabpane-cpu-freq-limits') 25export class TabPaneCpuFreqLimits extends BaseElement { 26 private tbl: LitTable | null | undefined; 27 private range: HTMLLabelElement | null | undefined; 28 private loadDataInCache: boolean = true; 29 private selectionParam:SelectionParam | null | undefined; 30 private source:CpuFreqLimit[] = [] 31 private sortKey: string = "cpu"; 32 private sortType: number = 0; 33 34 set data(val: SelectionParam | any) { 35 if(val == this.selectionParam){ 36 return; 37 } 38 this.selectionParam = val; 39 // @ts-ignore 40 this.tbl!.shadowRoot!.querySelector(".table").style.height = (this.parentElement!.clientHeight - 25) + "px" 41 let list:any[] = [] 42 val.cpuFreqLimitDatas.forEach((limitRowDatas:any)=>{ 43 for (let i = 0, len = limitRowDatas.length; i < len; i++) { 44 let it = limitRowDatas[i]; 45 if(it.startNs > val.rightNs){ 46 break; 47 } 48 if (i === limitRowDatas.length - 1) { 49 it.dur = (val.rightNs || 0) - (it.startNs || 0) 50 } else { 51 it.dur = (limitRowDatas[i + 1].startNs || 0) - (it.startNs || 0) 52 } 53 list.push(it) 54 } 55 }) 56 this.formatData(list,val.leftNs,val.rightNs) 57 } 58 59 initElements(): void { 60 this.tbl = this.shadowRoot!.querySelector<LitTable>('#tb-states'); 61 this.tbl!.addEventListener('column-click', (evt) => { 62 // @ts-ignore 63 this.sortKey = evt.detail.key 64 // @ts-ignore 65 this.sortType = evt.detail.sort 66 // @ts-ignore 67 this.sortTable(evt.detail.key,evt.detail.sort) 68 }) 69 } 70 71 connectedCallback() { 72 super.connectedCallback(); 73 new ResizeObserver((entries) => { 74 if (this.parentElement!.clientHeight != 0) { 75 // @ts-ignore 76 this.tbl!.shadowRoot!.querySelector(".table").style.height = (this.parentElement!.clientHeight - 25) + "px" 77 this.tbl!.reMeauseHeight() 78 } 79 }).observe(this.parentElement!); 80 } 81 82 formatData(list:CpuFreqLimitsStruct[],start:number,end:number){ 83 let limitsMap = new Map<string,CpuFreqLimit>(); 84 let groupMapData = (time:number,id:string,item:CpuFreqLimitsStruct) => { 85 if (limitsMap.has(id)) { 86 limitsMap.get(id)!.time += (time) 87 }else { 88 let isMax = id.endsWith("max"); 89 let limit = new CpuFreqLimit(); 90 limit.cpu = `Cpu ${item.cpu}`; 91 limit.time = time; 92 limit.type = isMax?"Max Freqency":"Min Frequency" 93 limit.value = isMax?item.max!:item.min!; 94 limitsMap.set(id,limit) 95 } 96 } 97 list.forEach((item)=>{ 98 if(item.startNs!>end){ 99 return 100 } 101 let max = Math.max(item.startNs||0,start) 102 let min = Math.min((item.startNs||0)+item.dur,end) 103 if(max < min){ 104 let maxId = `${item.cpu}-${item.max}-max` 105 let minId = `${item.cpu}-${item.min}-min` 106 groupMapData(min - max,maxId,item) 107 groupMapData(min - max,minId,item) 108 } 109 }) 110 this.source = Array.from(limitsMap.values()).map((item) => { 111 item.timeStr = Utils.getProbablyTime(item.time); 112 item.valueStr = `${ColorUtils.formatNumberComma(item.value!)} kHz` 113 return item 114 }) 115 this.sortTable(this.sortKey,this.sortType) 116 } 117 118 sortTable(key: string,type:number){ 119 if(type == 0){ 120 this.tbl!.recycleDataSource = this.source 121 }else{ 122 let arr = Array.from(this.source) 123 arr.sort((a,b):number=>{ 124 if(key == "timeStr"){ 125 if(type == 1){ 126 return a.time - b.time ; 127 }else{ 128 return b.time - a.time ; 129 } 130 }else if(key == "valueStr"){ 131 if(type == 1){ 132 return a.value - b.value ; 133 }else{ 134 return b.value - a.value ; 135 } 136 }else if(key == "cpu"){ 137 if (a.cpu > b.cpu) { 138 return type === 2 ? -1 : 1; 139 } else if (a.cpu == b.cpu) { 140 return 0; 141 } else { 142 return type === 2 ? 1 : -1; 143 } 144 }else if(key == "type"){ 145 if (a.type > b.type) { 146 return type === 2 ? 1 : -1; 147 } else if (a.type == b.type) { 148 return 0; 149 } else { 150 return type === 2 ? -1 : 1; 151 } 152 }else{ 153 return 0; 154 } 155 }) 156 this.tbl!.recycleDataSource = arr; 157 } 158 } 159 160 initHtml(): string { 161 return ` 162 <style> 163 :host{ 164 display: flex; 165 flex-direction: column; 166 padding: 10px 10px; 167 } 168 .progress{ 169 bottom: 5px; 170 position: absolute; 171 height: 1px; 172 left: 0; 173 right: 0; 174 } 175 .loading{ 176 bottom: 0; 177 position: absolute; 178 left: 0; 179 right: 0; 180 width:100%; 181 background:transparent; 182 z-index: 999999; 183 } 184 </style> 185 <lit-table id="tb-states" style="height: auto" > 186 <lit-table-column width="20%" title="Cpu" data-index="cpu" key="cpu" align="flex-start" order> 187 </lit-table-column> 188 <lit-table-column width="1fr" title="Type" data-index="type" key="type" align="flex-start" order> 189 </lit-table-column> 190 <lit-table-column width="1fr" title="Time" data-index="timeStr" key="timeStr" align="flex-start" order> 191 </lit-table-column> 192 <lit-table-column width="1fr" title="Value" data-index="valueStr" key="valueStr" align="flex-start" order> 193 </lit-table-column> 194 </lit-table> 195 `; 196 } 197} 198 199class CpuFreqLimit{ 200 cpu:string = ""; 201 type:string = ""; 202 time:number = 0; 203 value:number = 0; 204 timeStr:string = ""; 205 valueStr:string = ""; 206 207} 208