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#head-tips{ 64 display: flex; 65 justify-content: space-between; 66 width: 100%; 67 height: 20px; 68} 69@keyframes textGrowth { 70 0% { 71 font-size: 16px; 72 transform: scale(0.9); 73 } 74 100% { 75 font-size: 18px; 76 transform: scale(1.0); 77 } 78} 79#SO-err-tips{ 80 color:red; 81 animation: textGrowth 2.0s ease-in-out infinite alternate; 82 will-change: transform, font-size; 83 transform: translateZ(0); 84} 85</style> 86<div id="head-tips"> 87 <div id="SO-err-tips"></div> 88 <label id="time-range" style="height: 20px;text-align: end;font-size: 10pt;margin-bottom: 5px">Selected range:0.0 ms</label> 89</div> 90<div style="display: flex; flex-direction: row;" class="d-box"> 91 <lit-progress-bar class="perf-progress"></lit-progress-bar> 92 <div id="left_table" style="width: 40%;height:auto;"> 93 <div style="display: flex;margin-bottom: 10px"> 94 <div class="perf-go-back"> 95 <div class="perf-back-box"> 96 <lit-icon name="arrowleft"></lit-icon> 97 </div> 98 </div> 99 <div class="title"></div> 100 </div> 101 <div class="perf-subheading"></div> 102 <lit-chart-pie id="perf-chart-pie"></lit-chart-pie> 103 </div> 104 <div class="perf-table-box" style="height:auto;overflow: auto"> 105 <lit-table id="tb-process-usage" style="display: none;min-height: 380px" > 106 <lit-table-column width="1fr" title="ProcessName" data-index="tableName" key="tableName" 107 align="flex-start" order></lit-table-column> 108 <lit-table-column width="1fr" title="Sample Count" data-index="count" key="count" 109 align="flex-start" order></lit-table-column> 110 <lit-table-column width="1fr" title="%" data-index="percent" key="percent" 111 align="flex-start" order></lit-table-column> 112 <lit-table-column width="1fr" title="Event Count" data-index="eventCount" key="eventCount" 113 align="flex-start" order></lit-table-column> 114 <lit-table-column width="1fr" title="%" data-index="eventPercent" key="eventPercent" 115 align="flex-start" order></lit-table-column> 116 </lit-table> 117 <lit-table id="tb-thread-usage" style="display: none;min-height: 380px" hideDownload> 118 <lit-table-column width="1fr" title="ThreadName" data-index="tableName" key="tableName" 119 align="flex-start" order></lit-table-column> 120 <lit-table-column width="1fr" title="Sample Count" data-index="count" key="count" 121 align="flex-start" order></lit-table-column> 122 <lit-table-column width="1fr" title="%" data-index="percent" key="percent" 123 align="flex-start" order></lit-table-column> 124 <lit-table-column width="1fr" title="Event Count" data-index="eventCount" key="eventCount" 125 align="flex-start" order></lit-table-column> 126 <lit-table-column width="1fr" title="%" data-index="eventPercent" key="eventPercent" 127 align="flex-start" order></lit-table-column> 128 </lit-table> 129 <lit-table id="tb-so-usage" style="display: none;min-height: 380px" hideDownload> 130 <lit-table-column width="1fr" title="Library" data-index="tableName" key="tableName" align="flex-start" order></lit-table-column> 131 <lit-table-column width="1fr" title="Sample Count" data-index="count" key="count" align="flex-start" order></lit-table-column> 132 <lit-table-column width="1fr" title="%" data-index="percent" key="percent" align="flex-start" order></lit-table-column> 133 <lit-table-column width="1fr" title="Event Count" data-index="eventCount" key="eventCount" align="flex-start" order></lit-table-column> 134 <lit-table-column width="1fr" title="%" data-index="eventPercent" key="eventPercent" align="flex-start" order></lit-table-column> 135 </lit-table> 136 <lit-table id="tb-function-usage" style="display: none;min-height: 380px" hideDownload> 137 <lit-table-column width="1fr" title="Function" data-index="tableName" key="tableName" align="flex-start" order></lit-table-column> 138 <lit-table-column width="1fr" title="Sample Count" data-index="count" key="count" align="flex-start" order></lit-table-column> 139 <lit-table-column width="1fr" title="%" data-index="percent" key="percent" align="flex-start" order></lit-table-column> 140 <lit-table-column width="1fr" title="Event Count" data-index="eventCount" key="eventCount" align="flex-start" order></lit-table-column> 141 <lit-table-column width="1fr" title="%" data-index="eventPercent" key="eventPercent" align="flex-start" order></lit-table-column> 142 </lit-table> 143 </div> 144</div> 145<tab-pane-filter id="filter" options></tab-pane-filter> 146`; 147