1// @ts-nocheck 2/* 3 * Copyright (C) 2022 Huawei Device Co., Ltd. 4 * Licensed under the Apache License, Version 2.0 (the "License"); 5 * you may not use this file except in compliance with the License. 6 * You may obtain a copy of the License at 7 * 8 * http://www.apache.org/licenses/LICENSE-2.0 9 * 10 * Unless required by applicable law or agreed to in writing, software 11 * distributed under the License is distributed on an "AS IS" BASIS, 12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 * See the License for the specific language governing permissions and 14 * limitations under the License. 15 */ 16 17import {BaseElement, element} from "../../../../base-ui/BaseElement.js"; 18import {LitTable} from "../../../../base-ui/table/lit-table.js"; 19import {SelectionParam} from "../../../bean/BoxSelection.js"; 20import {getTabCpuFreq, getTabCpuUsage} from "../../../database/SqlLite.js"; 21import {CpuUsage, Freq} from "../../../bean/CpuUsage.js"; 22 23@element('tabpane-cpu-usage') 24export class TabPaneCpuUsage extends BaseElement { 25 private tbl: LitTable | null | undefined; 26 private range: HTMLLabelElement | null | undefined; 27 private orderByOldList: any[]; 28 29 set data(val: SelectionParam | any) { 30 this.range!.textContent = "Selected range: " + parseFloat(((val.rightNs - val.leftNs) / 1000000.0).toFixed(5)) + " ms" 31 Promise.all([getTabCpuUsage(val.cpus, val.leftNs, val.rightNs), getTabCpuFreq(val.cpus, val.leftNs, val.rightNs)]).then((result) => { 32 let usages = result[0]; 33 let freqMap = this.groupByCpuToMap(result[1]) 34 let data = []; 35 let range = val.rightNs - val.leftNs; 36 for (let cpu of val.cpus) { 37 let usage = new CpuUsage(); 38 usage.cpu = cpu; 39 let u = usages.find((e) => e.cpu == cpu); 40 if (u != undefined && u != null) { 41 usage.usage = u.usage 42 } else { 43 usage.usage = 0; 44 } 45 if (usage.usage > 1) { 46 usage.usage = 1; 47 } 48 usage.usageStr = (usage.usage * 100.0).toFixed(2) + "%" 49 let arr = []; 50 if (freqMap.has(usage.cpu)) { 51 let freqList = freqMap.get(usage.cpu) 52 let list = [] 53 for (let i = 0; i < freqList.length; i++) { 54 let freq = freqList[i]; 55 if (i == freqList.length - 1) { 56 freq.dur = val.rightNs - freq.startNs 57 } else { 58 freq.dur = freqList[i + 1].startNs - freq.startNs 59 } 60 if (freq.startNs + freq.dur > val.leftNs) { 61 list.push(freq); 62 } 63 } 64 if (list.length > 0) { 65 if (list[0].startNs < val.leftNs) { 66 list[0].dur = list[0].startNs + list[0].dur - val.leftNs 67 list[0].startNs = val.leftNs; 68 } 69 } 70 arr = this.sortFreq(list); 71 this.getFreqTop3(usage, arr[0], arr[1], arr[2], range) 72 } 73 data.push(usage) 74 } 75 this.tbl!.dataSource = data; 76 this.orderByOldList = [...data] 77 }) 78 } 79 80 initElements(): void { 81 this.tbl = this.shadowRoot?.querySelector<LitTable>('#tb-cpu-usage'); 82 this.range = this.shadowRoot?.querySelector('#time-range') 83 this.tbl?.addEventListener("column-click", event => { 84 let orderType = event.detail; 85 if (orderType.sort == 1) { 86 this.sortTable(this.tbl!.dataSource, orderType.key, false) 87 } else if (orderType.sort == 2) { 88 this.sortTable(this.tbl!.dataSource, orderType.key, true) 89 } else { 90 this.tbl!.dataSource = [...this.orderByOldList]; 91 } 92 console.log(orderType); 93 }) 94 } 95 96 sortTable(arr: any[], key: string, sort: boolean) { 97 this.tbl!.dataSource = arr.sort((item1, item2) => { 98 let value1 = Number(item1[key].toString().replace("%", "")); 99 let value2 = Number(item2[key].toString().replace("%", "")); 100 if (value1 > value2) { 101 return sort ? -1 : 1 102 } else if (value1 < value2) { 103 return sort ? 1 : -1 104 } else { 105 return 0 106 } 107 }); 108 } 109 110 sortFreq(arr: Array<Freq>): Array<Array<number>> { 111 let map = new Map<number, number>(); 112 for (let freq of arr) { 113 if (map.has(freq.value)) { 114 let sumDur = map.get(freq.value) + freq.dur; 115 map.set(freq.value, sumDur) 116 } else { 117 map.set(freq.value, freq.dur); 118 } 119 } 120 let array = Array.from(map); 121 array.sort((a, b) => b[1] - a[1]) 122 return array 123 } 124 125 getFreqTop3(usage: CpuUsage, top1: Array<number>, top2: Array<number>, top3: Array<number>, range: number) { 126 usage.top1 = top1 == undefined ? '-' : top1[0] 127 usage.top1Percent = top1 == undefined ? 0 : top1[1] * 1.0 / range; 128 usage.top1PercentStr = top1 == undefined ? "-" : (usage.top1Percent * 100).toFixed(2) + "%" 129 130 usage.top2 = top2 == undefined ? '-' : top2[0] 131 usage.top2Percent = top2 == undefined ? 0 : top2[1] * 1.0 / range; 132 usage.top2PercentStr = top2 == undefined ? "-" : (usage.top2Percent * 100).toFixed(2) + "%" 133 134 usage.top3 = top3 == undefined ? '-' : top3[0] 135 usage.top3Percent = top3 == undefined ? 0 : top3[1] * 1.0 / range; 136 usage.top3PercentStr = top3 == undefined ? "-" : (usage.top3Percent * 100).toFixed(2) + "%" 137 } 138 139 groupByCpuToMap(arr: Array<Freq>): Map<number, Array<Freq>> { 140 let map = new Map<string, Array<Freq>>(); 141 for (let spt of arr) { 142 if (map.has(spt.cpu)) { 143 map.get(spt.cpu)!.push(spt); 144 } else { 145 let list: Array<Freq> = []; 146 list.push(spt); 147 map.set(spt.cpu, list); 148 } 149 } 150 return map; 151 } 152 153 initHtml(): string { 154 return ` 155<style> 156:host{ 157 display: flex; 158 flex-direction: column; 159 padding: 10px 10px; 160} 161</style> 162<label id="time-range" style="width: 100%;height: 20px;text-align: end;font-size: 10pt;margin-bottom: 5px">Selected range:0.0 ms</label> 163<lit-table id="tb-cpu-usage" style="height: auto"> 164 <lit-table-column order width="1fr" title="CPU" data-index="cpu" key="cpu" align="flex-start"></lit-table-column> 165 <lit-table-column order width="1fr" title="Usage" data-index="usageStr" key="usageStr" align="flex-start" ></lit-table-column> 166 <lit-table-column order width="1fr" title="CPU Freq Top1(M)" data-index="top1" key="top1" align="flex-start" ></lit-table-column> 167 <lit-table-column order width="1fr" title="Top1 percent(%)" data-index="top1PercentStr" key="top1PercentStr" align="flex-start" ></lit-table-column> 168 <lit-table-column order width="1fr" title="CPU Freq Top2(M)" data-index="top2" key="top2" align="flex-start" ></lit-table-column> 169 <lit-table-column order width="1fr" title="Top2 percent(%)" data-index="top2PercentStr" key="top2PercentStr" align="flex-start" ></lit-table-column> 170 <lit-table-column order width="1fr" title="CPU Freq Top3(M)" data-index="top3" key="top3" align="flex-start" ></lit-table-column> 171 <lit-table-column order width="1fr" title="Top3 percent(%)" data-index="top3PercentStr" key="top3PercentStr" align="flex-start" ></lit-table-column> 172</lit-table> 173 `; 174 } 175 176}