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 TabPanePerfAnalysisHtml = ` 17<style> 18:host { 19 display: flex; 20 flex-direction: column; 21} 22#perf-chart-pie{ 23 height: 300px; 24} 25.perf-table-box{ 26 width: 60%; 27 border-left: solid 1px var(--dark-border1,#e0e0e0); 28 border-radius: 5px; 29 padding: 10px; 30} 31.perf-go-back{ 32 display:flex; 33 align-items: center; 34 cursor: pointer; 35 margin-left: 20px; 36 visibility: hidden; 37} 38.perf-back-box{ 39 background-color: var(--bark-expansion,#0C65D1); 40 border-radius: 5px; 41 color: #fff; 42 display: flex; 43 margin-right: 10px; 44 width: 40px; 45 height: 20px; 46 justify-content: center; 47 align-items: center; 48} 49.perf-subheading{ 50 font-weight: bold; 51 text-align: center; 52} 53.perf-progress{ 54 position: absolute; 55 height: 1px; 56 left: 0; 57 right: 0; 58} 59#filter{ 60 position: absolute; 61 bottom: 0px; 62} 63</style> 64<label id="time-range" style="width: 100%;height: 20px;text-align: end;font-size: 10pt;margin-bottom: 5px">Selected range:0.0 ms</label> 65<div style="display: flex; flex-direction: row;" class="d-box"> 66 <lit-progress-bar class="perf-progress"></lit-progress-bar> 67 <div id="left_table" style="width: 40%;height:auto;"> 68 <div style="display: flex;margin-bottom: 10px"> 69 <div class="perf-go-back"> 70 <div class="perf-back-box"> 71 <lit-icon name="arrowleft"></lit-icon> 72 </div> 73 </div> 74 <div class="title"></div> 75 </div> 76 <div class="perf-subheading"></div> 77 <lit-chart-pie id="perf-chart-pie"></lit-chart-pie> 78 </div> 79 <div class="perf-table-box" style="height:auto;overflow: auto"> 80 <lit-table id="tb-process-usage" style="display: none;min-height: 380px" > 81 <lit-table-column width="1fr" title="ProcessName" data-index="tableName" key="tableName" 82 align="flex-start" order></lit-table-column> 83 <lit-table-column width="1fr" title="Sample Count" data-index="count" key="count" 84 align="flex-start" order></lit-table-column> 85 <lit-table-column width="1fr" title="%" data-index="percent" key="percent" 86 align="flex-start" order></lit-table-column> 87 <lit-table-column width="1fr" title="Event Count" data-index="eventCount" key="eventCount" 88 align="flex-start" order></lit-table-column> 89 <lit-table-column width="1fr" title="%" data-index="eventPercent" key="eventPercent" 90 align="flex-start" order></lit-table-column> 91 </lit-table> 92 <lit-table id="tb-thread-usage" style="display: none;min-height: 380px" hideDownload> 93 <lit-table-column width="1fr" title="ThreadName" data-index="tableName" key="tableName" 94 align="flex-start" order></lit-table-column> 95 <lit-table-column width="1fr" title="Sample Count" data-index="count" key="count" 96 align="flex-start" order></lit-table-column> 97 <lit-table-column width="1fr" title="%" data-index="percent" key="percent" 98 align="flex-start" order></lit-table-column> 99 <lit-table-column width="1fr" title="Event Count" data-index="eventCount" key="eventCount" 100 align="flex-start" order></lit-table-column> 101 <lit-table-column width="1fr" title="%" data-index="eventPercent" key="eventPercent" 102 align="flex-start" order></lit-table-column> 103 </lit-table> 104 <lit-table id="tb-so-usage" style="display: none;min-height: 380px" hideDownload> 105 <lit-table-column width="1fr" title="Library" data-index="tableName" key="tableName" align="flex-start" order></lit-table-column> 106 <lit-table-column width="1fr" title="Sample Count" data-index="count" key="count" align="flex-start" order></lit-table-column> 107 <lit-table-column width="1fr" title="%" data-index="percent" key="percent" align="flex-start" order></lit-table-column> 108 <lit-table-column width="1fr" title="Event Count" data-index="eventCount" key="eventCount" align="flex-start" order></lit-table-column> 109 <lit-table-column width="1fr" title="%" data-index="eventPercent" key="eventPercent" align="flex-start" order></lit-table-column> 110 </lit-table> 111 <lit-table id="tb-function-usage" style="display: none;min-height: 380px" hideDownload> 112 <lit-table-column width="1fr" title="Function" data-index="tableName" key="tableName" align="flex-start" order></lit-table-column> 113 <lit-table-column width="1fr" title="Sample Count" data-index="count" key="count" align="flex-start" order></lit-table-column> 114 <lit-table-column width="1fr" title="%" data-index="percent" key="percent" align="flex-start" order></lit-table-column> 115 <lit-table-column width="1fr" title="Event Count" data-index="eventCount" key="eventCount" align="flex-start" order></lit-table-column> 116 <lit-table-column width="1fr" title="%" data-index="eventPercent" key="eventPercent" align="flex-start" order></lit-table-column> 117 </lit-table> 118 </div> 119</div> 120<tab-pane-filter id="filter" options></tab-pane-filter> 121`; 122