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