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 TabCpuDetailsThreadsHtml = `
16        <style>
17        :host {
18            width: 100%;
19            height: 100%;
20            background-color: var(--dark-background,#FFFFFF);
21            display: none;
22        }
23        .cpu-thread-d-box{
24            display: flex;
25            margin: 20px;
26            height: calc(100vh - 165px);
27        }
28        .cpu-thread-chart-box{
29            width: 40%;
30        }
31        .cpu-thread-subheading{
32            font-weight: bold;
33        }
34        #tb-cpu-usage{
35            height: 100%;
36        }
37        .cpu-thread-back-box{
38            color: #fff;
39            background-color: var(--bark-expansion,#0C65D1);
40            border-radius: 5px;
41            display: flex;
42            margin-right: 10px;
43            justify-content: center;
44            align-items: center;
45            width: 40px;
46            height: 20px;
47        }
48        .cpu-thread-table-box{
49            width: 60%;
50            max-height: calc(100vh - 165px);
51            border: solid 1px var(--dark-border1,#e0e0e0);
52            border-radius: 5px;
53            padding: 10px;
54        }
55        #cpu-thread-chart-pie{
56            height: 360px;
57        }
58        .cpu-thread-go-back{
59            display:flex;
60            align-items: center;
61            cursor: pointer;
62        }
63        </style>
64        <lit-progress-bar id="loading" style="height: 1px;width: 100%"></lit-progress-bar>
65        <div class="cpu-thread-d-box">
66            <div class="cpu-thread-chart-box">
67                <div class="cpu-thread-go-back">
68                    <div class="cpu-thread-back-box">
69                        <lit-icon name="arrowleft"></lit-icon>
70                    </div>
71                    <!--<lit-icon name="arrowleft"></lit-icon>-->
72                    <div class="cpu-thread-subheading">Threads in Freq</div>
73                </div>
74                <div style="margin-top:15px;text-align: center">Statistics By Duration</div>
75                <lit-chart-pie  id="cpu-thread-chart-pie"></lit-chart-pie>
76            </div>
77            <div class="cpu-thread-table-box">
78                <table-no-data id="table-no-data">
79                    <lit-table id="tb-cpu-usage" hideDownload>
80                        <lit-table-column width="100px" title="No" data-index="index" key="index" align="flex-start" order></lit-table-column>
81                        <lit-table-column width="200px" title="t_name" data-index="tName" key="tName" align="flex-start" order></lit-table-column>
82                        <lit-table-column width="100px" title="tid" data-index="tid" key="tid" align="flex-start" order></lit-table-column>
83                        <lit-table-column width="200px" title="p_name" data-index="pName" key="pName" align="flex-start" order></lit-table-column>
84                        <lit-table-column width="100px" title="p_pid" data-index="pid" key="pid" align="flex-start" order></lit-table-column>
85                        <lit-table-column width="100px" title="duration" data-index="durStr" key="durStr" align="flex-start" order></lit-table-column>
86                        <lit-table-column width="100px" title="%" data-index="ratio" key="ratio" align="flex-start" order></lit-table-column>
87                    </lit-table>
88                </table-no-data>
89            </div>
90        </div>
91        `;
92