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 Top20FrequencyThreadHtml = `
16        <style>
17        :host {
18            width: 100%;
19            height: 100%;
20            background-color: var(--dark-background5,#F6F6F6);
21        }
22        .tb_thread_count{
23            width: calc(100% - 100px);
24            border-radius: 5px;
25            border: solid 1px var(--dark-border1,#e0e0e0);
26            margin: 15px;
27            padding: 5px 15px
28        }
29        .pie-chart{
30            display: flex;
31            box-sizing: border-box;
32            width: 80%;
33            height: 500px;
34        }
35        .root{
36            width: 100%;
37            height: 100%;
38            display: flex;
39            flex-direction: row;
40            overflow-x: hidden;
41            overflow-y: auto;
42            box-sizing: border-box;
43        }
44        </style>
45        <lit-progress-bar id="loading" style="height: 1px;width: 100%" loading></lit-progress-bar>
46        <div style="padding: 15px">
47                    Thread Search
48                    <lit-select default-value="1" id="thread_select" placement="bottom" tabselect></lit-select>
49        </div>
50        <table-no-data id="nodata" contentHeight="500px">
51        <div class="root">
52            <div style="width: 40%;padding: 15px;display: flex;flex-direction: column;align-items: center">
53                <div>Statistics By Duration</div>
54                <lit-chart-pie id="pie" class="pie-chart"></lit-chart-pie>
55            </div>
56            <div style="flex: 1;display: flex;flex-direction: column;align-items: center;padding-top: 15px;height: 60vh">
57                <div id="current_thread" style="font-weight: bold;height: 40px"></div>
58                <div id="tb_vessel" class="tb_thread_count">
59                    <lit-table id="tb-process-thread-count" hideDownload style="height: calc(60vh - 60px)">
60                        <lit-table-column width="1fr" title="NO" data-index="no" key="no" align="flex-start" order></lit-table-column>
61                        <lit-table-column width="1fr" title="cpu" data-index="cpu" key="cpu" align="flex-start" order></lit-table-column>
62                        <lit-table-column width="1fr" title="frequency" data-index="freq" key="freq" align="flex-start" order></lit-table-column>
63                        <lit-table-column width="1fr" title="duration" data-index="timeStr" key="timeStr" align="flex-start" order></lit-table-column>
64                        <lit-table-column width="1fr" title="%" data-index="ratio" key="ratio" align="flex-start" order></lit-table-column>        
65                    </lit-table>
66                </div>
67            </div>
68        </div>
69        </table-no-data>
70        `;
71