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 {querySelectTraceStats, queryTraceMetaData,} from "../database/SqlLite.js"; 18import {LitTable} from "../../base-ui/table/lit-table.js"; 19import "../../base-ui/table/lit-table.js"; 20import {info} from "../../log/Log.js"; 21import {LitProgressBar} from "../../base-ui/progress-bar/LitProgressBar.js"; 22 23@element('sp-info-and-stats') 24export class SpInfoAndStats extends BaseElement { 25 private metaData: Array<MetaDataTable> = []; 26 private infoData: Array<InfoDataTable> = []; 27 private metaTableEl: LitTable | undefined; 28 private infoTableEl: LitTable | undefined; 29 private th: HTMLElement | undefined; 30 private backgroundMetaTable: HTMLDivElement | undefined; 31 private backgroundInfoTable: HTMLDivElement | undefined; 32 private progressLoad: LitProgressBar | undefined; 33 34 static get observedAttributes() { 35 return [] 36 } 37 38 initElements(): void { 39 this.progressLoad = this.shadowRoot?.querySelector(".load-metric") as LitProgressBar; 40 this.metaTableEl = this.shadowRoot!.querySelector<LitTable>('#metaData-table') as LitTable; 41 this.infoTableEl = this.shadowRoot!.querySelector<LitTable>('#stats-table') as LitTable; 42 43 this.infoTableEl.style.overflow = 'visible' 44 this.metaTableEl.style.overflow = 'visible' 45 this.infoTableEl.style.width = 'auto' 46 this.metaTableEl.style.width = 'auto' 47 this.th = this.shadowRoot!.querySelector('.th') as HTMLElement; 48 } 49 50 initInfoAndStatsData() { 51 this.progressLoad!.loading = true 52 let time = new Date().getTime(); 53 this.initMetricItemData().then(() => { 54 let durTime = new Date().getTime() - time; 55 info("InfoAndStatsData query time is: " + durTime + "ms") 56 if (this.metaData.length > 0) { 57 this.metaTableEl!.recycleDataSource = this.metaData; 58 } else { 59 this.metaTableEl!.recycleDataSource = []; 60 } 61 new ResizeObserver(() => { 62 if (this.parentElement?.clientHeight != 0) { 63 this.metaTableEl!.style.height = '100%' 64 this.metaTableEl!.reMeauseHeight() 65 } 66 }).observe(this.parentElement!) 67 info("metaData(metric) size is: ", this.metaData.length) 68 if (this.infoData.length > 0) { 69 this.infoTableEl!.recycleDataSource = this.infoData; 70 } else { 71 this.infoTableEl!.recycleDataSource = [] 72 } 73 new ResizeObserver(() => { 74 if (this.parentElement?.clientHeight != 0) { 75 this.infoTableEl!.reMeauseHeight() 76 } 77 }).observe(this.parentElement!) 78 info("infoData(metric) size is: ", this.infoData.length) 79 let metaDataStyle: HTMLDivElement | undefined | null = this.shadowRoot?.querySelector('#metaData-table')?.shadowRoot?.querySelector('div.body') as HTMLDivElement 80 let metaDataHeadStyle: HTMLDivElement | undefined | null = this.shadowRoot?.querySelector('#metaData-table')?.shadowRoot?.querySelector('div.thead') as HTMLDivElement 81 let statsStyle: HTMLDivElement | undefined | null = this.shadowRoot?.querySelector('#stats-table')?.shadowRoot?.querySelector('div.body') as HTMLDivElement 82 let statsHeadStyle: HTMLDivElement | undefined | null = this.shadowRoot?.querySelector('#stats-table')?.shadowRoot?.querySelector('div.thead') as HTMLDivElement 83 84 setTimeout(()=>{ 85 this.initDataTableStyle(metaDataStyle!); 86 this.initDataTableStyle(metaDataHeadStyle!); 87 this.initDataTableStyle(statsStyle!); 88 this.initDataTableStyle(statsHeadStyle!); 89 }, 20) 90 91 this.progressLoad!.loading = false 92 }); 93 } 94 95 initDataTableStyle(styleTable: HTMLDivElement): void { 96 for (let index = 0; index < styleTable.children.length; index++) { 97 // @ts-ignore 98 styleTable.children[index].style.backgroundColor = 'var(--dark-background5,#F6F6F6)' 99 } 100 this.metaTableEl!.style.height = 'auto' 101 this.metaTableEl!.style.minHeight = '80%' 102 this.metaTableEl!.style.borderRadius = '16' 103 this.infoTableEl!.style.height = 'auto' 104 this.infoTableEl!.style.minHeight = '80%' 105 this.infoTableEl!.style.borderRadius = '16' 106 } 107 108 async initMetricItemData() { 109 this.metaData = [] 110 this.infoData = [] 111 let mete = await queryTraceMetaData(); 112 if (mete) { 113 for (let index = 0; index < mete.length; index++) { 114 this.metaData.push({name: mete[index].name, value: mete[index].valueText}) 115 } 116 } 117 let info = await querySelectTraceStats(); 118 if (info) { 119 for (let index = 0; index < info.length; index++) { 120 this.infoData.push({ 121 event_name: info[index].event_name, 122 stat_type: info[index].stat_type, 123 count: info[index].count 124 }) 125 } 126 } 127 } 128 129 connectedCallback() { 130 } 131 132 disconnectedCallback() { 133 } 134 135 attributeChangedCallback(name: string, oldValue: string, newValue: string) { 136 } 137 138 initHtml(): string { 139 return ` 140 <style> 141 :host{ 142 width: 100%; 143 background-color: var(--dark-background5,#F6F6F6); 144 margin: 0; 145 padding: 0; 146 } 147 148 .info-stats{ 149 display: flex; 150 flex-direction: column; 151 background-color: var(--dark-background5,#F6F6F6); 152 position: absolute; 153 top: 0; 154 bottom: 0; 155 left: 0; 156 right: 0; 157 grid-row-gap: 30px; 158 } 159 160 .metadata{ 161 width: 90%; 162 color: #121212; 163 padding: 1% 2% 0 2%; 164 margin: 1% 2.5% 0 2.5%; 165 border-radius: 16px; 166 background-color: var(--dark-background3,#FFFFFF); 167 position: relative; 168 } 169 170 #metaData-table{ 171 background-color: var(--dark-background5,#F6F6F6); 172 margin-left: 10px; 173 min-height: inherit; 174 max-height: inherit; 175 padding: 10px; 176 } 177 178 #stats-table{ 179 margin-bottom: 2%; 180 margin-left: 10px; 181 padding: 10px; 182 } 183 184 #dataValueResult{ 185 overflow-y: auto; 186 background-color: var(--dark-background5,#F6F6F6); 187 border-radius: 16px; 188 min-height: inherit; 189 max-height: inherit; 190 margin-bottom: 1%; 191 } 192 193 #dataKeyResult{ 194 overflow-y: auto; 195 background-color: var(--dark-background5,#F6F6F6); 196 border-radius: 16px; 197 min-height: inherit; 198 max-height: inherit; 199 margin-bottom: 2%; 200 } 201 202 p{ 203 display: table-cell; 204 padding: 7px 10px 20px 10px; 205 color: #999999; 206 font-size:14px; 207 line-height: 20px; 208 font-weight: 400; 209 text-align: left; 210 } 211 212 .stats{ 213 flex-grow: 1; 214 height: min-content; 215 margin-bottom: 1%; 216 max-height: 37vh; 217 min-height: inherit; 218 display: flex; 219 flex-direction: column; 220 } 221 222 .info{ 223 max-height: inherit; 224 min-height: inherit; 225 } 226 227 .tr{ 228 background-color: var(--dark-background5,#F6F6F6); 229 } 230 231 .load-metric{ 232 width: 95%; 233 bottom: 0; 234 } 235 236 </style> 237 238 <div class="info-stats"> 239 <div class="metadata info"> 240 <p>System info and metadata</p> 241 <div id="dataKeyResult"> 242 <lit-table id="metaData-table"> 243 <lit-table-column title="name" data-index="name" key="name" align="flex-start"> 244 </lit-table-column> 245 <lit-table-column title="value" data-index="value" key="value" align="flex-start"> 246 </lit-table-column> 247 </lit-table> 248 </div> 249 <lit-progress-bar class="load-metric"></lit-progress-bar> 250 </div> 251 <div class="metadata stats"> 252 <p>Debugging stats</p> 253 <div id="dataValueResult"> 254 <lit-table id="stats-table"> 255 <lit-table-column title="name" data-index="event_name" key="name" align="flex-start"> 256 </lit-table-column> 257 <lit-table-column title="value" data-index="count" key="value" align="flex-start"> 258 </lit-table-column> 259 <lit-table-column title="type" data-index="stat_type" key="type" align="flex-start"> 260 </lit-table-column> 261 </lit-table> 262 </div> 263 </div> 264 </div> 265 `; 266 } 267} 268 269export class MetaDataTable { 270 name: string | undefined; 271 value: string | undefined; 272 type?: string | undefined; 273} 274 275export class InfoDataTable { 276 event_name: string | undefined; 277 stat_type: string | undefined; 278 count: number | undefined; 279 source?: string | undefined; 280 serverity?: string | undefined; 281} 282