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 */
15export const Top20ThreadCpuUsageHtml = `
16        <style>
17        .content_grid{
18            display: grid;
19            padding: 15px;
20            grid-column-gap: 15px;
21            grid-row-gap: 15px;
22            grid-template-columns: 1fr 1fr;
23            background-color: var(--dark-background5,#F6F6F6);
24        }
25        .chart_div{
26            display: flex;
27            flex-direction: column;
28            background-color: var(--dark-background,#FFFFFF);
29            align-items: center;
30            height: 370px;
31            padding-left: 5px;
32            padding-right: 5px;
33            border-radius: 5px
34        }
35        :host {
36            width: 100%;
37            height: 100%;
38            background: var(--dark-background5,#F6F6F6);
39        }
40        .tb_cpu_usage{
41             overflow: auto;
42             background-color: var(--dark-background,#FFFFFF);
43             border-radius: 5px;
44             border: solid 1px var(--dark-border1,#e0e0e0);
45             display: flex;
46        }
47        .root{
48            overflow-y: auto;height: 80vh;background-color: var(--dark-background5,#F6F6F6)
49        }
50        .bg{
51            background-color: var(--dark-background5,#F6F6F6);
52            padding-left: 10px;
53        }
54        .labels{
55            display: flex;
56            flex-direction: row;
57            align-items: center;
58            justify-content: center;
59            font-size: 9pt;
60            padding-right: 15px;
61        }
62        
63        </style>
64        
65        <lit-progress-bar id="loading" style="height: 1px;width: 100%"></lit-progress-bar>
66        <table-no-data id="nodata" contentHeight="500px">
67        <div class="root">
68            <div class="bg" style="display: flex;flex-direction: row;">
69                <div id="setting" style="height: 45px;display: flex;flex-direction: row;align-items: center;cursor: pointer">
70                    CPU Setting
71                    <span style="width: 10px"></span>
72                    <lit-icon name="setting" size="20"></lit-icon>
73                </div>
74            </div>
75            <check-cpu-setting id="cpu_setting" style="display: none"></check-cpu-setting>
76            <div class="content_grid" id="total">
77                <div class="chart_div">
78                    <div style="line-height: 40px;height: 40px;width: 100%;text-align: center;">Top20线程大中小核占用率</div>
79                    <lit-chart-column id="chart_total" style="width:100%;height:300px"></lit-chart-column>
80                    <div style="height: 30px;width: 100%;display: flex;flex-direction: row;align-items: center;justify-content: center">
81                        <div class="labels"><div style="width: 20px;height: 10px;background-color: #2f72f8;margin-right: 5px"></div>big</div>
82                        <div class="labels"><div style="width: 20px;height: 10px;background-color: #ffab67;margin-right: 5px"></div>mid</div>
83                        <div class="labels"><div style="width: 20px;height: 10px;background-color: #a285d2;margin-right: 5px"></div>small</div>
84                    </div>
85                </div>
86                <div class="tb_cpu_usage" >
87                    <lit-table id="tb-thread-usage" hideDownload style="height: 360px;margin: 5px 15px"></lit-table>
88                </div>
89            </div>
90            <div class="content_grid" id="small">
91                <div class="chart_div">
92                    <div style="line-height: 40px;height: 40px;width: 100%;text-align: center;">Top20线程小核占用率</div>
93                    <lit-chart-column id="chart_2" style="width:100%;height:300px"></lit-chart-column>
94                    <div style="height: 30px;width: 100%;display: flex;flex-direction: row;align-items: center;justify-content: center">
95                        <div class="labels"><div style="width: 20px;height: 10px;background-color: #0a59f7;margin-right: 5px"></div>small</div>
96                    </div>
97                </div>
98                <div  class="tb_cpu_usage">
99                    <lit-table id="tb-thread-small" hideDownload style="height: 360px;margin: 5px 15px "></lit-table>
100                </div>
101            </div>
102            <div class="content_grid" id="mid">
103                <div class="chart_div">
104                    <div style="line-height: 40px;height: 40px;width: 100%;text-align: center;">Top20线程中核占用率</div>
105                    <lit-chart-column id="chart_3" style="width:100%;height:300px"></lit-chart-column>
106                    <div style="height: 30px;width: 100%;display: flex;flex-direction: row;align-items: center;justify-content: center">
107                        <div class="labels"><div style="width: 20px;height: 10px;background-color: #0a59f7;margin-right: 5px"></div>mid</div>
108                    </div>
109                </div>
110                <div  class="tb_cpu_usage">
111                    <lit-table id="tb-thread-mid" hideDownload style="height: 360px;margin: 5px 15px"></lit-table>
112                </div>
113            </div>
114            <div class="content_grid" id="big">
115                <div class="chart_div">
116                    <div style="line-height: 40px;height: 40px;width: 100%;text-align: center;">Top20线程大核占用率</div>
117                    <lit-chart-column id="chart_4" style="width:100%;height:300px"></lit-chart-column>
118                    <div style="height: 30px;width: 100%;display: flex;flex-direction: row;align-items: center;justify-content: center">
119                        <div class="labels"><div style="width: 20px;height: 10px;background-color: #0a59f7;margin-right: 5px"></div>big</div>
120                    </div>
121                </div>
122                <div class="tb_cpu_usage">
123                    <lit-table id="tb-thread-big" hideDownload style="height: 360px;margin: 5px 15px"></lit-table>
124                </div>
125            </div>
126        </div>
127        </table-no-data>
128        
129        `;
130