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