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