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 '../../base-ui/table/lit-table';
19import { info } from '../../log/Log';
20import { LitProgressBar } from '../../base-ui/progress-bar/LitProgressBar';
21import { querySelectTraceStats, queryTraceMetaData } from '../database/sql/SqlLite.sql';
22import { SpInfoAndStatHtml } from './SpInfoAndStas.html';
23
24@element('sp-info-and-stats')
25export class SpInfoAndStats extends BaseElement {
26  private metaData: Array<MetaDataTable> = [];
27  private infoData: Array<InfoDataTable> = [];
28  private metaTableEl: LitTable | undefined;
29  private infoTableEl: LitTable | undefined;
30
31  initElements(): void {
32    this.metaTableEl = this.shadowRoot!.querySelector<LitTable>('#metaData-table') as LitTable;
33    this.infoTableEl = this.shadowRoot!.querySelector<LitTable>('#stats-table') as LitTable;
34  }
35
36  initInfoAndStatsData(): void {
37    let progressLoad = this.shadowRoot?.querySelector('.load-metric') as LitProgressBar;
38    progressLoad!.loading = true;
39    let time = new Date().getTime();
40    this.initMetricItemData().then(() => {
41      let durTime = new Date().getTime() - time;
42      info(`InfoAndStatsData query time is: ${durTime}ms`);
43      if (this.metaData.length > 0) {
44        this.metaTableEl!.recycleDataSource = this.metaData;
45      } else {
46        this.metaTableEl!.recycleDataSource = [];
47      }
48      info('metaData(metric) size is: ', this.metaData.length);
49      if (this.infoData.length > 0) {
50        this.infoTableEl!.recycleDataSource = this.infoData;
51      } else {
52        this.infoTableEl!.recycleDataSource = [];
53      }
54      new ResizeObserver(() => {
55        if (this.parentElement?.clientHeight !== 0) {
56          this.metaTableEl!.style.height = '100%';
57          this.metaTableEl!.reMeauseHeight();
58          this.infoTableEl!.reMeauseHeight();
59        }
60      }).observe(this.parentElement!);
61      info('infoData(metric) size is: ', this.infoData.length);
62      let metaDataStyle: HTMLDivElement | undefined | null = this.metaTableEl!.shadowRoot?.querySelector(
63        'div.body'
64      ) as HTMLDivElement;
65      let metaDataHeadStyle: HTMLDivElement | undefined | null = this.metaTableEl!.shadowRoot?.querySelector(
66        'div.thead'
67      ) as HTMLDivElement;
68      let statsStyle: HTMLDivElement | undefined | null = this.infoTableEl!.shadowRoot?.querySelector(
69        'div.body'
70      ) as HTMLDivElement;
71      let statsHeadStyle: HTMLDivElement | undefined | null = this.infoTableEl!.shadowRoot?.querySelector(
72        'div.thead'
73      ) as HTMLDivElement;
74      let timeOutTs = 20;
75      setTimeout(() => {
76        this.initDataTableStyle(metaDataStyle!);
77        this.initDataTableStyle(metaDataHeadStyle!);
78        this.initDataTableStyle(statsStyle!);
79        this.initDataTableStyle(statsHeadStyle!);
80      }, timeOutTs);
81      progressLoad!.loading = false;
82    });
83  }
84
85  initDataTableStyle(styleTable: HTMLDivElement): void {
86    for (let index = 0; index < styleTable.children.length; index++) {
87      // @ts-ignore
88      styleTable.children[index].style.backgroundColor = 'var(--dark-background5,#F6F6F6)';
89    }
90    this.metaTableEl!.style.height = 'auto';
91    this.metaTableEl!.style.minHeight = '80%';
92    this.metaTableEl!.style.borderRadius = '16';
93    this.infoTableEl!.style.height = '300px';
94    this.infoTableEl!.style.minHeight = '80%';
95    this.infoTableEl!.style.borderRadius = '16';
96  }
97
98  async initMetricItemData(): Promise<void> {
99    this.metaData = [];
100    this.infoData = [];
101    let mete = await queryTraceMetaData();
102    if (mete) {
103      for (let index = 0; index < mete.length; index++) {
104        this.metaData.push({
105          name: mete[index].name,
106          value: mete[index].valueText,
107        });
108      }
109    }
110    let info = await querySelectTraceStats();
111    if (info) {
112      for (let index = 0; index < info.length; index++) {
113        this.infoData.push({
114          eventName: info[index].event_name,
115          statType: info[index].stat_type,
116          count: info[index].count,
117        });
118      }
119    }
120  }
121
122  initHtml(): string {
123    return SpInfoAndStatHtml;
124  }
125}
126
127export class MetaDataTable {
128  name: string | undefined;
129  value: string | undefined;
130  type?: string | undefined;
131}
132
133export class InfoDataTable {
134  eventName: string | undefined;
135  statType: string | undefined;
136  count: number | undefined;
137  source?: string | undefined;
138  serverity?: string | undefined;
139}
140