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 {getTabPaneFrequencySampleData} from "../../../../database/SqlLite.js"; 20import {LitProgressBar} from "../../../../../base-ui/progress-bar/LitProgressBar.js"; 21import {Utils} from "../../base/Utils.js"; 22import {ColorUtils} from "../../base/ColorUtils.js"; 23 24@element('tabpane-frequency-sample') 25export class TabPaneFrequencySample 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 progressEL:LitProgressBar | null | undefined; 31 private loadingPage:any; 32 private loadingList:number[] = []; 33 private source:any[] = [] 34 private sortKey: string = "counter"; 35 private sortType: number = 0; 36 37 set data(val: SelectionParam | any) { 38 if(val == this.selectionParam){ 39 return; 40 } 41 this.progressEL!.loading = true 42 this.loadingPage.style.visibility = "visible" 43 this.selectionParam = val; 44 // @ts-ignore 45 this.tbl!.shadowRoot!.querySelector(".table").style.height = (this.parentElement!.clientHeight - 25) + "px" 46 this.queryDataByDB(val) 47 } 48 49 initElements(): void { 50 this.progressEL = this.shadowRoot!.querySelector<LitProgressBar>('.progress') 51 this.loadingPage = this.shadowRoot!.querySelector('.loading'); 52 this.tbl = this.shadowRoot!.querySelector<LitTable>('#tb-states'); 53 this.tbl!.addEventListener('column-click', (evt) => { 54 // @ts-ignore 55 this.sortKey = evt.detail.key 56 // @ts-ignore 57 this.sortType = evt.detail.sort 58 // @ts-ignore 59 this.sortTable(evt.detail.key,evt.detail.sort) 60 }) 61 } 62 63 connectedCallback() { 64 super.connectedCallback(); 65 new ResizeObserver((entries) => { 66 if (this.parentElement!.clientHeight != 0) { 67 // @ts-ignore 68 this.tbl!.shadowRoot!.querySelector(".table").style.height = (this.parentElement!.clientHeight - 25) + "px" 69 this.tbl!.reMeauseHeight() 70 this.loadingPage.style.height = (this.parentElement!.clientHeight - 24) + "px" 71 } 72 }).observe(this.parentElement!); 73 } 74 75 queryDataByDB(val: SelectionParam | any) { 76 this.loadingList.push(1) 77 this.progressEL!.loading = true 78 this.loadingPage.style.visibility = "visible"; 79 80 getTabPaneFrequencySampleData(val.leftNs + val.recordStartNs, val.rightNs + val.recordStartNs, val.cpuFreqFilterIds).then((result) => { 81 this.loadingList.splice(0,1) 82 if(this.loadingList.length == 0) { 83 this.progressEL!.loading = false 84 this.loadingPage.style.visibility = "hidden" 85 } 86 let sampleMap = new Map<any,any>() 87 val.cpuFreqFilterIds.forEach((a:number)=>{ 88 this.getInitTime(result.filter((f) => f.filterId == a),sampleMap,val) 89 }) 90 91 let dataList:Array<any> = []; 92 sampleMap.forEach(a=>{a.timeStr = Utils.getProbablyTime(a.time);dataList.push(a);}); 93 this.source = dataList; 94 this.sortTable(this.sortKey,this.sortType) 95 }) 96 } 97 98 getInitTime(result:Array<any>,sampleMap:Map<any,any>,val:SelectionParam){ 99 let leftNs = val.leftNs + val.recordStartNs; 100 let rightNs = val.rightNs + val.recordStartNs; 101 if (result.length == 0) return; 102 let idx = result.findIndex((a)=> a.ts >= (leftNs)); 103 if (idx !== 0) { 104 result = result.slice(idx==-1?result.length-1:idx - 1, result.length); 105 } 106 if (result[0].ts < leftNs && idx !== 0) result[0].ts = leftNs; 107 result.forEach((item,idx)=>{ 108 if ((idx + 1) == result.length) { 109 item.time = (rightNs) - item.ts; 110 }else { 111 item.time = result[idx+1].ts - item.ts; 112 } 113 if (sampleMap.has(item.filterId+"-"+item.value)) { 114 let obj = sampleMap.get(item.filterId+"-"+item.value); 115 obj.time += item.time; 116 }else { 117 sampleMap.set(item.filterId+"-"+item.value,{ 118 ...item, 119 counter:"Cpu "+item.cpu, 120 valueStr:ColorUtils.formatNumberComma(item.value)+" kHz", 121 }) 122 } 123 }); 124 } 125 126 sortTable(key: string,type:number){ 127 if(type == 0){ 128 this.tbl!.recycleDataSource = this.source 129 }else{ 130 let arr = Array.from(this.source) 131 arr.sort((a,b):number=>{ 132 if(key == "timeStr"){ 133 if(type == 1){ 134 return a.time - b.time ; 135 }else{ 136 return b.time - a.time ; 137 } 138 }else if(key == "counter"){ 139 if (a.counter > b.counter) { 140 return type === 2 ? -1 : 1; 141 } else if (a.counter == b.counter) { 142 return 0; 143 } else { 144 return type === 2 ? 1 : -1; 145 } 146 }else if(key == "valueStr"){ 147 if(type == 1){ 148 return a.value - b.value ; 149 }else{ 150 return b.value - a.value ; 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="counter" key="counter" align="flex-start" order> 187 </lit-table-column> 188 <lit-table-column width="1fr" title="Time" data-index="timeStr" key="timeStr" align="flex-start" order> 189 </lit-table-column> 190 <lit-table-column width="1fr" title="Value" data-index="valueStr" key="valueStr" align="flex-start" order> 191 </lit-table-column> 192 </lit-table> 193 <lit-progress-bar class="progress"></lit-progress-bar> 194 <div class="loading"></div> 195 `; 196 } 197} 198