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 { LitChartPie } from '../../../base-ui/chart/pie/LitChartPie.js'; 18import { procedurePool } from '../../database/Procedure.js'; 19import { SpSchedulingAnalysis } from './SpSchedulingAnalysis.js'; 20import { info } from '../../../log/Log.js'; 21import { LitTable } from '../../../base-ui/table/lit-table.js'; 22import '../../../base-ui/progress-bar/LitProgressBar.js'; 23import { LitProgressBar } from '../../../base-ui/progress-bar/LitProgressBar.js'; 24import { getDataNo } from './utils/Utils.js'; 25import './TableNoData.js'; 26import { TableNoData } from './TableNoData.js'; 27 28@element('tab-cpu-details-irq') 29export class TabCpuDetailsIrq extends BaseElement { 30 private tableNoData: TableNoData | null | undefined; 31 private cpuDetailsLrqUsageTbl: LitTable | null | undefined; 32 private cpuDetailsLrqProgress: LitProgressBar | null | undefined; 33 traceChange: boolean = false; 34 private cpuDetailsLrqPie: LitChartPie | null | undefined; 35 private cpuDetailsLrqData: Array<any> = []; 36 private cpuDetailsLrqSortColumn: string = ''; 37 private sortType: number = 0; 38 39 initElements(): void { 40 this.tableNoData = this.shadowRoot!.querySelector<TableNoData>('#table-no-data'); 41 this.cpuDetailsLrqProgress = this.shadowRoot!.querySelector<LitProgressBar>('#loading'); 42 this.cpuDetailsLrqPie = this.shadowRoot!.querySelector<LitChartPie>('#chart-pie'); 43 this.cpuDetailsLrqUsageTbl = this.shadowRoot!.querySelector<LitTable>('#tb-cpu-irq'); 44 45 this.cpuDetailsLrqUsageTbl!.addEventListener('row-click', (evt: any) => { 46 // @ts-ignore 47 let data = evt.detail.data; 48 data.isSelected = true; 49 // @ts-ignore 50 if ((evt.detail as any).callBack) { 51 // @ts-ignore 52 (evt.detail as any).callBack(true); 53 } 54 }); 55 56 this.cpuDetailsLrqUsageTbl!.addEventListener('column-click', (evt: any) => { 57 this.cpuDetailsLrqSortColumn = evt.detail.key; 58 this.sortType = evt.detail.sort; 59 // @ts-ignore 60 this.sortByColumn(evt.detail); 61 }); 62 this.cpuDetailsLrqUsageTbl!.addEventListener('row-hover', (evt: any) => { 63 if (evt.detail.data) { 64 let data = evt.detail.data; 65 data.isHover = true; 66 if ((evt.detail as any).callBack) { 67 (evt.detail as any).callBack(true); 68 } 69 } 70 this.cpuDetailsLrqPie?.showHover(); 71 }); 72 } 73 74 init(cpu: number) { 75 this.queryPieChartDataByType('CPU Irq', cpu); 76 } 77 78 queryPieChartDataByType(type: string, cpu: number) { 79 if (this.traceChange) { 80 return; 81 } 82 this.cpuDetailsLrqProgress!.loading = true; 83 this.queryLoginWorker(`scheduling-${type}`, 'query Cpu Frequency Analysis Time:', (res) => { 84 this.traceChange = true; 85 this.cpuDetailsLrqProgress!.loading = false; 86 this.cpuDetailsLrqData = res.get(cpu) || []; 87 this.cpuDetailsLrqData = getDataNo(this.cpuDetailsLrqData); 88 this.tableNoData!.noData = this.cpuDetailsLrqData.length == 0; 89 this.noData(this.cpuDetailsLrqData.length == 0); 90 this.cpuDetailsLrqPie!.config = { 91 appendPadding: 0, 92 data: this.cpuDetailsLrqData, 93 angleField: 'sum', 94 colorField: 'value', 95 radius: 1, 96 label: { 97 type: 'outer', 98 }, 99 tip: (irqObj) => { 100 return `<div> 101 <div>block:${irqObj.obj.block}</div> 102 <div>name:${irqObj.obj.value}</div> 103 <div>min:${irqObj.obj.min}</div> 104 <div>max:${irqObj.obj.max}</div> 105 <div>average:${irqObj.obj.avg}</div> 106 <div>duration:${irqObj.obj.sumTimeStr}</div> 107 <div>ratio:${irqObj.obj.ratio}%</div> 108 </div> 109 `; 110 }, 111 hoverHandler: (data) => { 112 if (data) { 113 this.cpuDetailsLrqUsageTbl!.setCurrentHover(data); 114 } else { 115 this.cpuDetailsLrqUsageTbl!.mouseOut(); 116 } 117 }, 118 interactions: [ 119 { 120 type: 'element-active', 121 }, 122 ], 123 }; 124 if (this.cpuDetailsLrqSortColumn != '') { 125 this.sortByColumn({ 126 key: this.cpuDetailsLrqSortColumn, 127 sort: this.sortType, 128 }); 129 } else { 130 this.cpuDetailsLrqUsageTbl!.recycleDataSource = this.cpuDetailsLrqData; 131 } 132 this.cpuDetailsLrqUsageTbl?.reMeauseHeight(); 133 }); 134 } 135 136 noData(value: boolean) { 137 this.shadowRoot!.querySelector<HTMLDivElement>('.irq-chart-box')!.style.display = value ? 'none' : 'block'; 138 this.shadowRoot!.querySelector<HTMLDivElement>('.table-box')!.style.width = value ? '100%' : '60%'; 139 } 140 141 clearData() { 142 this.traceChange = false; 143 this.cpuDetailsLrqPie!.dataSource = []; 144 this.cpuDetailsLrqUsageTbl!.recycleDataSource = []; 145 this.noData(false); 146 } 147 148 queryLoginWorker(irqType: string, log: string, handler: (res: any) => void) { 149 let cpuDetailsLrqTime = new Date().getTime(); 150 procedurePool.submitWithName( 151 'logic1', 152 irqType, 153 { 154 endTs: SpSchedulingAnalysis.endTs, 155 total: SpSchedulingAnalysis.totalDur, 156 }, 157 undefined, 158 handler 159 ); 160 let durTime = new Date().getTime() - cpuDetailsLrqTime; 161 info(log, durTime); 162 } 163 164 sortByColumn(detail: any) { 165 // @ts-ignore 166 function compare(cpuDetailsLrqProperty, sort, type) { 167 return function (a: any, b: any) { 168 if (type === 'number') { 169 // @ts-ignore 170 return sort === 2 171 ? parseFloat(b[cpuDetailsLrqProperty]) - parseFloat(a[cpuDetailsLrqProperty]) 172 : parseFloat(a[cpuDetailsLrqProperty]) - parseFloat(b[cpuDetailsLrqProperty]); 173 } else { 174 if (sort === 2) { 175 return b[cpuDetailsLrqProperty].toString().localeCompare(a[cpuDetailsLrqProperty].toString()); 176 } else { 177 return a[cpuDetailsLrqProperty].toString().localeCompare(b[cpuDetailsLrqProperty].toString()); 178 } 179 } 180 }; 181 } 182 183 if (detail.key === 'min') { 184 detail.key = 'minValue'; 185 this.cpuDetailsLrqData.sort(compare(detail.key, detail.sort, 'number')); 186 } else if (detail.key === 'max') { 187 detail.key = 'maxValue'; 188 this.cpuDetailsLrqData.sort(compare(detail.key, detail.sort, 'number')); 189 } else if (detail.key === 'avg') { 190 detail.key = 'avgValue'; 191 this.cpuDetailsLrqData.sort(compare(detail.key, detail.sort, 'number')); 192 } else if (detail.key === 'sumTimeStr') { 193 detail.key = 'sum'; 194 this.cpuDetailsLrqData.sort(compare(detail.key, detail.sort, 'number')); 195 } else if (detail.key === 'ratio' || detail.key === 'index') { 196 this.cpuDetailsLrqData.sort(compare(detail.key, detail.sort, 'number')); 197 } else { 198 this.cpuDetailsLrqData.sort(compare(detail.key, detail.sort, 'string')); 199 } 200 this.cpuDetailsLrqUsageTbl!.recycleDataSource = this.cpuDetailsLrqData; 201 } 202 203 initHtml(): string { 204 return ` 205 <style> 206 .irq-box{ 207 display: flex; 208 margin: 20px; 209 height: calc(100vh - 165px); 210 } 211 .irq-chart-box{ 212 width: 40%; 213 } 214 #tb-cpu-irq{ 215 height: 100%; 216 } 217 .table-box{ 218 border: solid 1px var(--dark-border1,#e0e0e0); 219 border-radius: 5px; 220 width: 60%; 221 max-height: calc(100vh - 165px); 222 padding: 10px; 223 } 224 :host { 225 width: 100%; 226 height: 100%; 227 background-color: var(--dark-background,#FFFFFF); 228 } 229 #chart-pie{ 230 height: 360px; 231 } 232 </style> 233 <lit-progress-bar id="loading" style="height: 1px;width: 100%"></lit-progress-bar> 234 <div class="irq-box"> 235 <div class="irq-chart-box"> 236 <div style="text-align: center">Statistics By Duration</div> 237 <lit-chart-pie id="chart-pie"></lit-chart-pie> 238 </div> 239 <div class="table-box"> 240 <table-no-data id="table-no-data"> 241 <lit-table id="tb-cpu-irq" hideDownload> 242 <lit-table-column width="100px" title="No" data-index="index" key="index" align="flex-start" order></lit-table-column> 243 <lit-table-column width="150px" title="block" data-index="block" key="block" align="flex-start" order></lit-table-column> 244 <!--<lit-table-column width="100px" title="id" data-index="id" key="id" align="flex-start" order></lit-table-column>--> 245 <lit-table-column title="name" data-index="value" key="value" align="flex-start" order width="150px"></lit-table-column> 246 <lit-table-column title="min" data-index="min" key="min" align="flex-start" order width="100px"></lit-table-column> 247 <lit-table-column title="max" data-index="max" key="max" align="flex-start" order width="100px"></lit-table-column> 248 <lit-table-column title="average" data-index="avg" key="avg" align="flex-start" order width="100px"></lit-table-column> 249 <lit-table-column title="duration" data-index="sumTimeStr" key="sumTimeStr" align="flex-start" order width="100px"></lit-table-column> 250 <lit-table-column title="%" data-index="ratio" key="ratio" align="flex-start" order width="100px"></lit-table-column> 251 </lit-table> 252 </table-no-data> 253 </div> 254 </div> 255 `; 256 } 257} 258