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 SpMetricsHtml = `
17<style>
18:host{
19    width: 100%;
20    height: 100%;
21    background-color: var(--dark-background5,#F6F6F6);
22    margin: 0;
23    padding: 0;
24    font-size:16px;
25}
26.metric{
27    display: flex;
28    flex-direction: column;
29    position: absolute;
30    top: 0;
31    bottom: 0;
32    left: 0;
33    right: 0;
34    background-color: var(--dark-background5,#F6F6F6);
35}
36.metric-select{
37    color: #121212;
38    border-radius: 16px;
39    background-color: var(--dark-background3,#FFFFFF);
40    padding: 1% 2%;
41    margin: 2% 2.5% 0 2.5%;
42    grid-row-gap: 30px;
43}
44.request{
45    min-height: 15vh;
46    overflow: auto;
47    position: relative;
48}
49.sql-select{
50    font-family: Helvetica,serif;
51    color: var(--dark-color1,#212121);
52    font-size:0.875em;
53    line-height: 16px;
54    font-weight: 400;
55    text-align: left;
56    width: 50%;
57    height: 32px;
58    flex-wrap: wrap;
59    margin-top: 1%;
60    border: 1px solid var(--dark-color1,#4D4D4D);
61    border-radius: 16px;
62    padding: 5px 10px 5px 10px;
63    -webkit-appearance: none;
64    background: url('img/down.png') no-repeat 98% center var(--dark-background3,#FFFFFF);
65}
66button{
67    border-radius: 16px;
68    flex-grow: 1;
69    background-color: #0A59F7;
70    height: 32px;
71    width: 96px;
72    font-size: 0.875em;
73    color: var(--dark-background3,#FFFFFF);
74    text-align: center;
75    line-height: 20px;
76    font-weight: 400;
77    border:0 solid;
78    margin-left: 2%;
79    opacity: 0.6;
80    cursor:pointer;
81}
82.response{
83    flex-grow: 1;
84    margin-bottom: 1%;
85}
86.response-json{
87    background-color: var(--dark-background3,#FFFFFF);
88    border-radius: 16px;
89    display: table-cell;
90    font-family: Helvetica,serif;
91    color: var(--dark-color1,#212121);
92    font-size:0.875em;
93    line-height: 20px;
94    font-weight: 400;
95    text-align: left;
96    height: 90%;
97    width: 100%;
98    border: none;
99    outline:none;
100    resize:none;
101}
102p{
103     display: table-cell;
104     padding: 20% 0;
105     color: #999999;
106     font-size:0.875em;
107     line-height: 20px;
108     font-weight: 400;
109     text-align: left;
110     width: 100%;
111}
112::-webkit-scrollbar-thumb{
113  background-color: var(--dark-background7,rgba(0,0,0,0.1));
114  border-radius: 6px;
115}
116.sp-load-metric{
117    width: 95%;
118    bottom: 0;
119}
120::-webkit-scrollbar{
121  background-color: var(--dark-background3,#FFFFFF);
122  width: 8px;
123}
124</style>
125<div class="metric">
126    <div class="metric-select request">
127        <p>Select a metric</p>
128        <select class="sql-select">
129          <option>trace_mem</option>
130          <option>trace_mem_top10</option>
131          <option>trace_mem_unagg</option>
132          <option>trace_task_names</option>
133          <option>trace_stats</option>
134          <option>trace_metadata</option>
135          <option>sys_calls</option>
136        </select>
137        <button class="sql-select-button">&nbsp;&nbsp; Run &nbsp;&nbsp;</button>
138        <lit-progress-bar class="sp-load-metric"></lit-progress-bar>
139    </div>
140    <div class="metric-select response">
141         <textarea class="response-json" readonly>
142         </textarea>
143    </div>
144</div>
145`;
146