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