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