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 TabPerfProfileHtml = ` 17<style> 18tab-pane-filter { 19 position: fixed; 20 bottom: 0; 21 width: 100%; 22 border: solid rgb(216,216,216) 1px; 23 float: left; 24} 25:host{ 26 display: flex; 27 flex-direction: column; 28 padding: 10px 10px 0 10px; 29 height: calc(100% - 20px); 30} 31.perf-profile-progress{ 32 bottom: 33px; 33 position: absolute; 34 height: 1px; 35 left: 0; 36 right: 0; 37} 38selector{ 39 display: none; 40} 41.perf-profile-loading{ 42 bottom: 0; 43 position: absolute; 44 left: 0; 45 right: 0; 46 width:100%; 47 background:transparent; 48 z-index: 999999; 49} 50.show{ 51 display: flex; 52 flex: 1; 53} 54</style> 55<div class="perf-profile-content" style="display: flex;flex-direction: column"> 56<lit-headline class="titleBox"></lit-headline> 57<selector id='show_table' class="show"> 58 <lit-slicer style="width:100%"> 59 <div id="left_table" style="width: 65%"> 60 <tab-native-data-modal id="modal"></tab-native-data-modal> 61 <lit-table id="tb-perf-profile" style="height: auto" tree> 62 <lit-table-column width="50%" title="Call Stack" data-index="symbol" key="symbol" 63 align="flex-start" retract></lit-table-column> 64 <lit-table-column width="1fr" title="Local" data-index="selfDur" key="selfDur" 65 align="flex-start" order></lit-table-column> 66 <lit-table-column width="1fr" title="Sample Count" data-index="weight" key="weight" 67 align="flex-start" order></lit-table-column> 68 <lit-table-column width="1fr" title="%" data-index="weightPercent" key="weightPercent" 69 align="flex-start" order></lit-table-column> 70 <lit-table-column width="1fr" title="Event Count" data-index="eventCount" key="eventCount" 71 align="flex-start" order></lit-table-column> 72 <lit-table-column width="1fr" title="%" data-index="eventPercent" key="eventPercent" 73 align="flex-start" order></lit-table-column> 74 </lit-table> 75 76 </div> 77 <lit-slicer-track ></lit-slicer-track> 78 <lit-table id="tb-perf-list" no-head hideDownload 79 style="height: auto;border-left: 1px solid var(--dark-border1,#e2e2e2)"> 80 <span slot="head">Heaviest Stack Trace</span> 81 <lit-table-column width="60px" title="" data-index="type" key="type" align="flex-start" > 82 <template> 83 <img src="img/library.png" size="20" v-if=" type == 1 "> 84 <img src="img/function.png" size="20" v-if=" type == 0 "> 85 </template> 86 </lit-table-column> 87 <lit-table-column width="1fr" title="" data-index="symbol" key="symbol" 88 align="flex-start"></lit-table-column> 89 </lit-table> 90 </div> 91 </lit-slicer> 92 </selector> 93 <tab-pane-filter id="filter" input inputLeftText icon tree perf></tab-pane-filter> 94 <lit-progress-bar class="progress perf-profile-progress"></lit-progress-bar> 95<selector id='show_chart'> 96 <tab-framechart id='framechart' style='width: 100%;height: auto'> </tab-framechart> 97</selector> 98<div class="loading perf-profile-loading"></div> 99</div>`; 100
