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 TabCpuAnalysisHtml = `
16        <style>
17        :host {
18            width: 100%;
19            height: 100%;
20            background-color: var(--dark-background,#FFFFFF);
21        }
22        .cpu_usage{
23            display: flex;
24            flex-direction: row;
25            box-sizing: border-box;
26            padding: 15px;
27            background-color: var(--dark-background,#FFFFFF);
28        }
29        .usage_item{
30            height: 50px;
31            line-height: 50px;
32            text-align: center;
33            border: solid 1px var(--dark-border1,#f0f0f0);
34        }
35        .usage_item_box{
36            border: solid 1px var(--dark-border1,#f0f0f0);
37            flex: 1;
38        }
39        .usage_chart{
40            height: 360px;
41            color: var(--dark-color1,#252525);
42            background-color: var(--dark-background,#FFFFFF);
43        }
44        .pie-chart{
45            display: flex;
46            box-sizing: border-box;
47            height: 300px;
48        }
49        .grid_usage{
50            display: grid;
51            width: 100%;
52            box-sizing: border-box;
53            grid-template-columns: repeat(4,calc((100% - 30px) / 4));
54            grid-column-gap: 10px;
55            grid-row-gap: 10px;
56            padding: 10px;
57            background-color: var(--dark-background5,#F6F6F6);
58        }
59        .cpu-statistics{
60            height: 50px;
61            display: flex;
62            flex-direction: row;
63            justify-content: space-between;
64            align-items: center;
65            padding:0px 15px;
66            background-color: var(--dark-background,#FFFFFF);
67        }
68        </style>
69        <div style="display: flex;flex-direction: column;overflow-x: hidden;overflow-y: auto;height: 100%">
70            <lit-progress-bar id="loading" style="height: 1px;width: 100%"></lit-progress-bar>
71            <div class="cpu_usage" id="cpu_usage_table"></div>
72            <div class="cpu-statistics">
73                <div>CPU Statistics By Duration</div>
74                <lit-select default-value="1" id="scheduling_select" tabselect>
75                    <lit-select-option value="1">CPU Idle</lit-select-option>
76                    <lit-select-option value="2">CPU Frequency</lit-select-option>
77                    <lit-select-option value="3">CPU Irq</lit-select-option>
78                </lit-select>
79            </div>
80            <div class="grid_usage" id="cpu_usage_chart"></div>
81        </div>
82        <lit-drawer id="drawer-right" drawer-title="CPU：0" content-width="65vw" placement="right" style="position: fixed" fixed mask mask-closeable closeable content-padding="0">
83            <drawer-cpu-tabs id="drawer-cpu-tabs"></drawer-cpu-tabs>
84        </lit-drawer>
85        `;
86