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 { SystemNetworkSummary } from '../../../../bean/AbilityMonitor'; 20import { Utils } from '../../base/Utils'; 21import { ColorUtils } from '../../base/ColorUtils'; 22import { log } from '../../../../../log/Log'; 23import { resizeObserver } from '../SheetUtils'; 24import { getTabNetworkAbilityData } from '../../../../database/sql/Ability.sql'; 25 26@element('tabpane-network-ability') 27export class TabPaneNetworkAbility extends BaseElement { 28 private networkAbilityTbl: LitTable | null | undefined; 29 private networkAbilitySource: Array<SystemNetworkSummary> = []; 30 private float: HTMLDivElement | null | undefined; 31 private queryResult: Array<SystemNetworkSummary> = []; 32 private search: HTMLInputElement | undefined | null; 33 34 set data(networkAbilityValue: SelectionParam | unknown) { 35 if (this.networkAbilityTbl) { 36 // @ts-ignore 37 this.networkAbilityTbl.shadowRoot?.querySelector('.table').style.height = `${ 38 this.parentElement!.clientHeight - 45 39 }px`; 40 } 41 this.queryDataByDB(networkAbilityValue); 42 } 43 44 initElements(): void { 45 this.networkAbilityTbl = this.shadowRoot?.querySelector<LitTable>('#tb-network-ability'); 46 this.networkAbilityTbl!.addEventListener('column-click', (evt): void => { 47 // @ts-ignore 48 this.sortByColumn(evt.detail); 49 }); 50 } 51 52 connectedCallback(): void { 53 super.connectedCallback(); 54 resizeObserver(this.parentElement!, this.networkAbilityTbl!); 55 } 56 57 filterData(): void { 58 if (this.queryResult.length > 0) { 59 let filterNetwork = this.queryResult.filter((item): boolean => { 60 let array = this.toNetWorkAbilityArray(item); // @ts-ignore 61 let isInclude = array.filter((value) => value.indexOf(this.search!.value) > -1); 62 return isInclude.length > 0; 63 }); 64 if (filterNetwork.length > 0) { 65 this.networkAbilitySource = filterNetwork; 66 this.networkAbilityTbl!.recycleDataSource = this.networkAbilitySource; 67 } else { 68 this.networkAbilitySource = []; 69 this.networkAbilityTbl!.recycleDataSource = []; 70 } 71 } 72 } 73 74 toNetWorkAbilityArray(systemNetworkSummary: SystemNetworkSummary): unknown[] { 75 let array: Array<string> = []; 76 array.push(systemNetworkSummary.startTimeStr); 77 array.push(systemNetworkSummary.durationStr); 78 array.push(systemNetworkSummary.dataReceivedStr); 79 array.push(systemNetworkSummary.dataReceivedSecStr); 80 array.push(systemNetworkSummary.dataSendSecStr); 81 array.push(systemNetworkSummary.dataSendStr); 82 array.push(systemNetworkSummary.packetsIn.toString()); 83 array.push(systemNetworkSummary.packetsOut.toString()); 84 array.push(systemNetworkSummary.packetsOutSec.toString()); 85 return array; 86 } 87 88 queryDataByDB(val: SelectionParam | unknown): void { 89 // @ts-ignore 90 getTabNetworkAbilityData(val.leftNs, val.rightNs).then((item): void => { 91 log(`getTabNetworkAbilityData result size : ${item.length}`); 92 if (item.length !== null && item.length > 0) { 93 for (const systemNetworkSummary of item) { 94 if (systemNetworkSummary.startTime === 0) { 95 systemNetworkSummary.startTimeStr = '0:000.000.000'; 96 } else { 97 systemNetworkSummary.startTimeStr = Utils.getTimeStampHMS(systemNetworkSummary.startTime); 98 } 99 systemNetworkSummary.durationStr = Utils.getDurString(systemNetworkSummary.duration); 100 systemNetworkSummary.dataReceivedStr = Utils.getBinaryByteWithUnit(systemNetworkSummary.dataReceived); 101 systemNetworkSummary.dataReceivedSecStr = Utils.getBinaryByteWithUnit(systemNetworkSummary.dataReceivedSec); 102 systemNetworkSummary.dataSendStr = Utils.getBinaryByteWithUnit(systemNetworkSummary.dataSend); 103 systemNetworkSummary.dataSendSecStr = Utils.getBinaryByteWithUnit(systemNetworkSummary.dataSendSec); 104 systemNetworkSummary.packetsInStr = ColorUtils.formatNumberComma(systemNetworkSummary.packetsIn); 105 systemNetworkSummary.packetsInSecStr = systemNetworkSummary.packetsInSec.toFixed(2); 106 systemNetworkSummary.packetsOutStr = ColorUtils.formatNumberComma(systemNetworkSummary.packetsOut); 107 systemNetworkSummary.packetsOutSecStr = systemNetworkSummary.packetsOutSec.toFixed(2); 108 } 109 this.networkAbilitySource = item; 110 this.queryResult = item; 111 this.networkAbilityTbl!.recycleDataSource = this.networkAbilitySource; 112 } else { 113 this.networkAbilitySource = []; 114 this.queryResult = []; 115 this.networkAbilityTbl!.recycleDataSource = []; 116 } 117 }); 118 } 119 120 initHtml(): string { 121 return ` 122<style> 123.network-ability-table{ 124 height: auto; 125} 126:host{ 127 padding: 10px 10px; 128 display: flex; 129 flex-direction: column; 130} 131</style> 132<lit-table id="tb-network-ability" class="network-ability-table"> 133 <lit-table-column order width="1fr" title="StartTime" data-index="startTimeStr" key="startTimeStr" align="flex-start"></lit-table-column> 134 <lit-table-column order width="1fr" title="Duration" data-index="durationStr" key="durationStr" align="flex-start" ></lit-table-column> 135 <lit-table-column order width="1fr" title="Data Received" data-index="dataReceivedStr" key="dataReceivedStr" align="flex-start" ></lit-table-column> 136 <lit-table-column order width="1fr" title="Data Received/sec" data-index="dataReceivedSecStr" key="dataReceivedSecStr" align="flex-start" ></lit-table-column> 137 <lit-table-column order width="1fr" title="Data Send" data-index="dataSendStr" key="dataSendStr" align="flex-start" ></lit-table-column> 138 <lit-table-column order width="1fr" title="Data Send/sec" data-index="dataSendSecStr" key="dataSendSecStr" align="flex-start" ></lit-table-column> 139 <lit-table-column order width="1fr" title="Packets In" data-index="packetsInStr" key="packetsInStr" align="flex-start" ></lit-table-column> 140 <lit-table-column order width="1fr" title="Packets In/sec" data-index="packetsInSecStr" key="packetsInSecStr" align="flex-start" ></lit-table-column> 141 <lit-table-column order width="1fr" title="Packets Out" data-index="packetsOutStr" key="packetsOutStr" align="flex-start" ></lit-table-column> 142 <lit-table-column order width="1fr" title="Packets Out/sec" data-index="packetsOutSecStr" key="packetsOutSecStr" align="flex-start" ></lit-table-column> 143</lit-table> 144 `; 145 } 146 147 compare(property: string, sort: number, type: string): unknown { 148 let getProperty = this.getPropertyByType(property, type); 149 return this.compareFunction(sort, getProperty); 150 } 151 152 compareFunction = 153 (sort: number, getProperty: (data: SystemNetworkSummary) => number | string) => 154 (networkAbilityLeftData: SystemNetworkSummary, networkAbilityRightData: SystemNetworkSummary): number => { 155 let leftValue = getProperty(networkAbilityLeftData); 156 let rightValue = getProperty(networkAbilityRightData); 157 let result = 0; 158 if (leftValue > rightValue) { 159 result = sort === 2 ? -1 : 1; 160 } else if (leftValue < rightValue) { 161 result = sort === 2 ? 1 : -1; 162 } 163 return result; 164 }; 165 166 getPropertyByType = 167 (property: string, type: string) => 168 (data: SystemNetworkSummary): number | string => { 169 let typeMap = { 170 // @ts-ignore 171 number: parseFloat(data[property]), 172 durationStr: data.duration, 173 dataReceivedStr: data.dataReceived, 174 dataReceivedSecStr: data.dataReceivedSec, 175 dataSendStr: data.dataSend, 176 dataSendSecStr: data.dataSendSec, 177 packetsInStr: data.packetsIn, 178 packetsInSecStr: data.packetsInSec, 179 packetsOutStr: data.packetsOut, 180 packetsOutSecStr: data.packetsOutSec, 181 }; 182 // @ts-ignore 183 return typeMap[type] || data[property]; 184 }; 185 186 sortByColumn(detail: unknown): void { 187 // @ts-ignore 188 if (detail.key === 'startTime') { 189 // @ts-ignore 190 this.networkAbilitySource.sort(this.compare(detail.key, detail.sort, 'string')); // @ts-ignore 191 } else if (detail.key === 'durationStr') { 192 // @ts-ignore 193 this.networkAbilitySource.sort(this.compare(detail.key, detail.sort, 'durationStr')); // @ts-ignore 194 } else if (detail.key === 'dataReceivedStr') { 195 // @ts-ignore 196 this.networkAbilitySource.sort(this.compare(detail.key, detail.sort, 'dataReceivedStr')); // @ts-ignore 197 } else if (detail.key === 'dataReceivedSecStr') { 198 // @ts-ignore 199 this.networkAbilitySource.sort(this.compare(detail.key, detail.sort, 'dataReceivedSecStr')); // @ts-ignore 200 } else if (detail.key === 'dataSendStr') { 201 // @ts-ignore 202 this.networkAbilitySource.sort(this.compare(detail.key, detail.sort, 'dataSendStr')); // @ts-ignore 203 } else if (detail.key === 'dataSendSecStr') { 204 // @ts-ignore 205 this.networkAbilitySource.sort(this.compare(detail.key, detail.sort, 'dataSendSecStr')); // @ts-ignore 206 } else if (detail.key === 'packetsInStr') { 207 // @ts-ignore 208 this.networkAbilitySource.sort(this.compare(detail.key, detail.sort, 'packetsInStr')); // @ts-ignore 209 } else if (detail.key === 'packetsInSecStr') { 210 // @ts-ignore 211 this.networkAbilitySource.sort(this.compare(detail.key, detail.sort, 'packetsInSecStr')); // @ts-ignore 212 } else if (detail.key === 'packetsOutStr') { 213 // @ts-ignore 214 this.networkAbilitySource.sort(this.compare(detail.key, detail.sort, 'packetsOutStr')); // @ts-ignore 215 } else if (detail.key === 'packetsOutSecStr') { 216 // @ts-ignore 217 this.networkAbilitySource.sort(this.compare(detail.key, detail.sort, 'packetsOutSecStr')); 218 } else { 219 // @ts-ignore 220 this.networkAbilitySource.sort(this.compare(detail.key, detail.sort, 'number')); 221 } 222 this.networkAbilityTbl!.recycleDataSource = this.networkAbilitySource; 223 } 224} 225