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 {getTabPaneCounterSampleData,} from "../../../../database/SqlLite.js"; 20import {LitProgressBar} from "../../../../../base-ui/progress-bar/LitProgressBar.js"; 21import {Utils} from "../../base/Utils.js"; 22 23@element('tabpane-counter-sample') 24export class TabPaneCounterSample extends BaseElement { 25 private tbl: LitTable | null | undefined; 26 private range: HTMLLabelElement | null | undefined; 27 private loadDataInCache: boolean = true; 28 private selectionParam:SelectionParam | null | undefined; 29 private progressEL:LitProgressBar | null | undefined; 30 private loadingPage:any; 31 private loadingList:number[] = []; 32 private source:any[] = [] 33 private sortKey: string = "counter"; 34 private sortType: number = 0; 35 36 set data(val: SelectionParam | any) { 37 if(val == this.selectionParam){ 38 return; 39 } 40 this.progressEL!.loading = true 41 this.loadingPage.style.visibility = "visible" 42 this.selectionParam = val; 43 // @ts-ignore 44 this.tbl!.shadowRoot!.querySelector(".table").style.height = (this.parentElement!.clientHeight - 25) + "px" 45 this.queryDataByDB(val) 46 } 47 48 initElements(): void { 49 this.progressEL = this.shadowRoot!.querySelector<LitProgressBar>('.progress') 50 this.loadingPage = this.shadowRoot!.querySelector('.loading'); 51 this.tbl = this.shadowRoot!.querySelector<LitTable>('#tb-states'); 52 this.tbl!.addEventListener('column-click', (evt) => { 53 // @ts-ignore 54 this.sortKey = evt.detail.key 55 // @ts-ignore 56 this.sortType = evt.detail.sort 57 // @ts-ignore 58 this.sortTable(evt.detail.key,evt.detail.sort) 59 }) 60 } 61 62 connectedCallback() { 63 super.connectedCallback(); 64 new ResizeObserver((entries) => { 65 if (this.parentElement!.clientHeight != 0) { 66 // @ts-ignore 67 this.tbl!.shadowRoot!.querySelector(".table").style.height = (this.parentElement!.clientHeight - 25) + "px" 68 this.tbl!.reMeauseHeight() 69 this.loadingPage.style.height = (this.parentElement!.clientHeight - 24) + "px" 70 } 71 }).observe(this.parentElement!); 72 } 73 74 queryDataByDB(val: SelectionParam | any) { 75 this.loadingList.push(1) 76 this.progressEL!.loading = true 77 this.loadingPage.style.visibility = "visible"; 78 79 getTabPaneCounterSampleData(val.leftNs + val.recordStartNs, val.rightNs + val.recordStartNs, val.cpuStateFilterIds).then((result) => { 80 this.loadingList.splice(0,1) 81 if(this.loadingList.length == 0) { 82 this.progressEL!.loading = false 83 this.loadingPage.style.visibility = "hidden" 84 } 85 let sampleMap = new Map<any,any>() 86 val.cpuStateFilterIds.forEach((a:number)=>{ 87 this.getInitTime(result.filter((f) => f.filterId == a),sampleMap,val) 88 }) 89 let dataList:Array<any> = []; 90 sampleMap.forEach(a=>{a.timeStr = Utils.getProbablyTime(a.time);dataList.push(a);}); 91 this.source = dataList; 92 this.sortTable(this.sortKey,this.sortType) 93 }) 94 } 95 96 getInitTime(result:Array<any>,sampleMap:Map<any,any>,val:SelectionParam){ 97 let leftNs = val.leftNs + val.recordStartNs; 98 let rightNs = val.rightNs + val.recordStartNs; 99 if (result.length == 0) return; 100 let idx = result.findIndex((a)=> a.ts >= (leftNs)); 101 if (idx !== 0) { 102 result = result.slice(idx==-1?result.length-1:idx - 1, result.length); 103 } 104 if (result[0].ts < leftNs && idx !== 0) result[0].ts = leftNs; 105 result.forEach((item,idx)=>{ 106 if ((idx + 1) == result.length) { 107 item.time = (rightNs) - item.ts; 108 }else { 109 item.time = result[idx+1].ts - item.ts; 110 } 111 if (sampleMap.has(item.filterId+"-"+item.value)) { 112 let obj = sampleMap.get(item.filterId+"-"+item.value); 113 obj.time += item.time; 114 }else { 115 sampleMap.set(item.filterId+"-"+item.value,{ 116 ...item, 117 counter:"Cpu "+item.cpu, 118 }) 119 } 120 }); 121 } 122 123 sortTable(key: string,type:number){ 124 if(type == 0){ 125 this.tbl!.recycleDataSource = this.source 126 }else{ 127 let arr = Array.from(this.source) 128 arr.sort((a,b):number=>{ 129 if(key == "timeStr"){ 130 if(type == 1){ 131 return a.time - b.time ; 132 }else{ 133 return b.time - a.time ; 134 } 135 }else if(key == "counter"){ 136 if (a.counter > b.counter) { 137 return type === 2 ? -1 : 1; 138 } else if (a.counter == b.counter) { 139 return 0; 140 } else { 141 return type === 2 ? 1 : -1; 142 } 143 }else if(key == "value"){ 144 if(type == 1){ 145 return a.value - b.value ; 146 }else{ 147 return b.value - a.value ; 148 } 149 }else{ 150 return 0; 151 } 152 }) 153 this.tbl!.recycleDataSource = arr; 154 } 155 } 156 157 initHtml(): string { 158 return ` 159 <style> 160 :host{ 161 display: flex; 162 flex-direction: column; 163 padding: 10px 10px; 164 } 165 .progress{ 166 bottom: 5px; 167 position: absolute; 168 height: 1px; 169 left: 0; 170 right: 0; 171 } 172 .loading{ 173 bottom: 0; 174 position: absolute; 175 left: 0; 176 right: 0; 177 width:100%; 178 background:transparent; 179 z-index: 999999; 180 } 181 </style> 182 <lit-table id="tb-states" style="height: auto" > 183 <lit-table-column width="20%" title="Cpu" data-index="counter" key="counter" align="flex-start" order> 184 </lit-table-column> 185 <lit-table-column width="1fr" title="Time" data-index="timeStr" key="timeStr" align="flex-start" order> 186 </lit-table-column> 187 <lit-table-column width="1fr" title="Value" data-index="value" key="value" align="flex-start" order> 188 </lit-table-column> 189 </lit-table> 190 <lit-progress-bar class="progress"></lit-progress-bar> 191 <div class="loading"></div> 192 `; 193 } 194} 195