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'; 17import { LitTable } from '../../../../../base-ui/table/lit-table'; 18import { SelectionParam } from '../../../../bean/BoxSelection'; 19import { SystemCpuSummary } from '../../../../bean/AbilityMonitor'; 20import { Utils } from '../../base/Utils'; 21import { ColorUtils } from '../../base/ColorUtils'; 22import { log } from '../../../../../log/Log'; 23import { resizeObserver } from '../SheetUtils'; 24import { getTabCpuAbilityData } from '../../../../database/sql/Ability.sql'; 25import { NUM_2 } from '../../../../bean/NumBean'; 26 27@element('tabpane-cpu-ability') 28export class TabPaneCpuAbility extends BaseElement { 29 private cpuAbilityTbl: LitTable | null | undefined; 30 private cpuAbilitySource: Array<SystemCpuSummary> = []; 31 private queryCpuResult: Array<SystemCpuSummary> = []; 32 private search: HTMLInputElement | undefined | null; 33 34 set data(cpuAbilityValue: SelectionParam) { 35 if (this.cpuAbilityTbl) { 36 // @ts-ignore 37 this.cpuAbilityTbl.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 45 + 'px'; 38 } 39 this.queryDataByDB(cpuAbilityValue); 40 } 41 42 initElements(): void { 43 this.cpuAbilityTbl = this.shadowRoot?.querySelector<LitTable>('#tb-cpu-ability'); 44 this.cpuAbilityTbl!.addEventListener('column-click', (evt) => { 45 // @ts-ignore 46 this.sortByColumn(evt.detail); 47 }); 48 } 49 50 connectedCallback(): void { 51 super.connectedCallback(); 52 resizeObserver(this.parentElement!, this.cpuAbilityTbl!); 53 } 54 55 filterData(): void { 56 if (this.queryCpuResult.length > 0) { 57 let filterCpu = this.queryCpuResult.filter((item) => { 58 let array = this.toCpuAbilityArray(item); 59 let isInclude = array.filter((value) => value.indexOf(this.search!.value) > -1); 60 return isInclude.length > 0; 61 }); 62 if (filterCpu.length > 0) { 63 this.cpuAbilitySource = filterCpu; 64 this.cpuAbilityTbl!.recycleDataSource = this.cpuAbilitySource; 65 } else { 66 this.cpuAbilitySource = []; 67 this.cpuAbilityTbl!.recycleDataSource = []; 68 } 69 } 70 } 71 72 toCpuAbilityArray(systemCpuSummary: SystemCpuSummary): string[] { 73 let array: Array<string> = []; 74 array.push(systemCpuSummary.startTimeStr); 75 array.push(systemCpuSummary.durationStr); 76 array.push(systemCpuSummary.totalLoadStr); 77 array.push(systemCpuSummary.userLoadStr); 78 array.push(systemCpuSummary.systemLoadStr); 79 array.push(systemCpuSummary.threadsStr); 80 return array; 81 } 82 83 queryDataByDB(val: SelectionParam): void { 84 getTabCpuAbilityData(val.leftNs, val.rightNs).then((result) => { 85 log('getTabCpuAbilityData size :' + result.length); 86 if (result.length !== null && result.length > 0) { 87 for (const systemCpuSummary of result) { 88 if (systemCpuSummary.startTime === 0) { 89 systemCpuSummary.startTimeStr = '0:000.000.000'; 90 } else { 91 systemCpuSummary.startTimeStr = Utils.getTimeStampHMS(systemCpuSummary.startTime); 92 } 93 systemCpuSummary.durationStr = Utils.getDurString(systemCpuSummary.duration); 94 systemCpuSummary.totalLoadStr = systemCpuSummary.totalLoad.toFixed(NUM_2) + '%'; 95 systemCpuSummary.userLoadStr = systemCpuSummary.userLoad.toFixed(NUM_2) + '%'; 96 systemCpuSummary.systemLoadStr = systemCpuSummary.systemLoad.toFixed(NUM_2) + '%'; 97 systemCpuSummary.threadsStr = ColorUtils.formatNumberComma(systemCpuSummary.threads); 98 } 99 this.cpuAbilitySource = result; 100 this.queryCpuResult = result; 101 this.cpuAbilityTbl!.recycleDataSource = this.cpuAbilitySource; 102 } else { 103 this.cpuAbilitySource = []; 104 this.queryCpuResult = []; 105 this.cpuAbilityTbl!.recycleDataSource = []; 106 } 107 }); 108 } 109 110 initHtml(): string { 111 return ` 112 <style> 113 .cpu-ability{ 114 height: auto; 115 } 116 :host{ 117 padding: 10px 10px; 118 flex-direction: column; 119 display: flex; 120 } 121 </style> 122 <lit-table id="tb-cpu-ability" class="cpu-ability"> 123 <lit-table-column order width="1fr" 124 title="Start Time" data-index="startTimeStr" key="startTimeStr" align="flex-start" > 125 </lit-table-column> 126 <lit-table-column order width="1fr" 127 title="Duration" data-index="durationStr" key="durationStr" align="flex-start"> 128 </lit-table-column> 129 <lit-table-column order width="1fr" 130 title="TotalLoad %" data-index="totalLoadStr" key="totalLoadStr" align="flex-start"> 131 </lit-table-column> 132 <lit-table-column order width="1fr" 133 title="UserLoad %" data-index="userLoadStr" key="userLoadStr" align="flex-start"> 134 </lit-table-column> 135 <lit-table-column order width="1fr" 136 title="SystemLoad %" data-index="systemLoadStr" key="systemLoadStr" align="flex-start"> 137 </lit-table-column> 138 <lit-table-column order width="1fr" 139 title="Process" data-index="threadsStr" key="threadsStr" align="flex-start" > 140 </lit-table-column> 141 </lit-table> 142 `; 143 } 144 145 getPropertyByType = 146 (property: string, type: string) => 147 (data: SystemCpuSummary): number | string => { 148 switch (type) { 149 case 'number': 150 // @ts-ignore 151 return parseFloat(data[property]); 152 case 'durationStr': 153 return data.duration; 154 case 'totalLoadStr': 155 return data.totalLoad; 156 case 'userLoadStr': 157 return data.userLoad; 158 case 'systemLoadStr': 159 return data.systemLoad; 160 default: 161 // @ts-ignore 162 return data[property]; 163 } 164 }; 165 166 compareFunction = 167 (sort: number, getProperty: (data: SystemCpuSummary) => number | string) => 168 (cpuAbilityLeftData: SystemCpuSummary, cpuAbilityRightData: SystemCpuSummary): number => { 169 let leftValue = getProperty(cpuAbilityLeftData); 170 let rightValue = getProperty(cpuAbilityRightData); 171 let result = 0; 172 if (leftValue > rightValue) { 173 result = sort === 2 ? -1 : 1; 174 } else if (leftValue < rightValue) { 175 result = sort === 2 ? 1 : -1; 176 } 177 return result; 178 }; 179 180 compare = ( 181 property: string, 182 sort: number, 183 type: string 184 ): ((cpuAbilityLeftData: SystemCpuSummary, cpuAbilityRightData: SystemCpuSummary) => number) => { 185 let getProperty = this.getPropertyByType(property, type); 186 return this.compareFunction(sort, getProperty); 187 }; 188 189 sortByColumn(detail: unknown): void { 190 let typeMaping: { [key: string]: string } = { 191 startTime: 'string', 192 durationStr: 'durationStr', 193 totalLoadStr: 'totalLoadStr', 194 userLoadStr: 'userLoadStr', 195 systemLoadStr: 'systemLoadStr', 196 }; // @ts-ignore 197 let type = typeMaping[detail.key] || 'number'; // @ts-ignore 198 this.cpuAbilitySource.sort(this.compare(detail.key, detail.sort, type)); 199 this.cpuAbilityTbl!.recycleDataSource = this.cpuAbilitySource; 200 } 201} 202