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
16export const SpInfoAndStatHtml = `<style>
17:host{
18  width: 100%;
19  background-color: var(--dark-background5,#F6F6F6);
20  margin: 0;
21  padding: 0;
22}
23.info-stats{
24  display: flex;
25  flex-direction: column;
26  background-color: var(--dark-background5,#F6F6F6);
27  position: absolute;
28  top: 0;
29  bottom: 0;
30  left: 0;
31  right: 0;
32  grid-row-gap: 30px;
33}
34.metadata{
35  width: 90%;
36  color: #121212;
37  padding: 1% 2% 0 2%;
38  margin: 1% 2.5% 0 2.5%;
39  border-radius: 16px;
40  background-color: var(--dark-background3,#FFFFFF);
41  position: relative;
42}
43#metaData-table{
44  background-color: var(--dark-background5,#F6F6F6);
45  margin-left: 10px;
46  min-height: inherit;
47  max-height: inherit;
48  padding: 10px;
49  overflow: visible;
50  width: auto;
51}
52#stats-table{
53  margin-bottom: 2%;
54  margin-left: 10px;
55  padding: 10px;
56  overflow: visible;
57  width: auto;
58}
59#dataValueResult{
60  background-color: var(--dark-background5,#F6F6F6);
61  border-radius: 16px;
62  min-height: inherit;
63  max-height: inherit;
64  margin-bottom: 1%;
65}
66
67#dataKeyResult{
68  overflow-y: auto;
69  background-color: var(--dark-background5,#F6F6F6);
70  border-radius: 16px;
71  min-height: inherit;
72  max-height: inherit;
73  margin-bottom: 2%;
74}
75p{
76  display: table-cell;
77  padding: 7px 10px 20px 10px;
78  color: #999999;
79  font-size:14px;
80  line-height: 20px;
81  font-weight: 400;
82  text-align: left;
83}
84.stats{
85  flex-grow: 1;
86  height: min-content;
87  margin-bottom: 1%;
88  max-height: 37vh;
89  min-height: inherit;
90  display: flex;
91  flex-direction: column;
92}
93.info{
94  max-height: inherit;
95  min-height: inherit;
96}
97.tr{
98  background-color: var(--dark-background5,#F6F6F6); 
99}
100.load-metric{
101  width: 95%;
102  bottom: 0;
103}
104</style>
105<div class="info-stats">
106    <div class="metadata info">
107        <p>System info and metadata</p>
108        <div id="dataKeyResult">
109            <lit-table id="metaData-table" hideDownload>
110                    <lit-table-column title="name" data-index="name" key="name" align="flex-start">
111                    </lit-table-column>
112                    <lit-table-column title="value" data-index="value" key="value" align="flex-start">
113                    </lit-table-column>
114            </lit-table>
115        </div>
116        <lit-progress-bar class="load-metric"></lit-progress-bar>
117    </div>
118    <div class="metadata stats">
119        <p>Debugging stats</p>
120        <div id="dataValueResult">
121            <lit-table id="stats-table" hideDownload>
122                    <lit-table-column title="name" data-index="eventName" key="eventName" align="flex-start">
123                    </lit-table-column>
124                    <lit-table-column title="value" data-index="count" key="count" align="flex-start">
125                    </lit-table-column>
126                    <lit-table-column title="type" data-index="statType" key="statType" align="flex-start">
127                    </lit-table-column>
128            </lit-table>
129        </div>
130    </div>
131</div>
132`;
133