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 TabPaneNMStatisticAnalysisHtml = ` 17 <style> 18 :host { 19 flex-direction: column; 20 display: flex; 21 } 22 #nm-chart-pie{ 23 height: 300px; 24 margin-bottom: 31px; 25 } 26 .nm-table-box{ 27 width: 60%; 28 border-left: solid 1px var(--dark-border1,#e0e0e0); 29 border-radius: 5px; 30 padding: 10px; 31 margin-bottom: 31px; 32 } 33 .nm-go-back{ 34 display:flex; 35 align-items: center; 36 cursor: pointer; 37 margin-left: 20px; 38 visibility: hidden; 39 } 40 .nm-back-box{ 41 background-color: var(--bark-expansion,#0C65D1); 42 border-radius: 5px; 43 color: #fff; 44 display: flex; 45 margin-right: 10px; 46 width: 40px; 47 height: 20px; 48 justify-content: center; 49 align-items: center; 50 } 51 .nm-subheading{ 52 font-weight: bold; 53 text-align: center; 54 } 55 .nm-progress{ 56 position: absolute; 57 height: 1px; 58 left: 0; 59 right: 0; 60 } 61 lit-table{ 62 min-height: 380px; 63 } 64 #filter{ 65 position: absolute; 66 bottom: 0; 67 } 68 </style> 69 <label id="time-range" 70 style="width: 100%;height: 20px;text-align: end;font-size: 10pt;margin-bottom: 5px">Selected range:0.0 ms 71 </label> 72 <div style="display: flex;flex-direction: row;" class="d-box"> 73 <lit-progress-bar class="nm-progress"></lit-progress-bar> 74 <div id="left_table" style="width: 40%; height:auto;"> 75 <div style="display: flex; margin-bottom: 10px"> 76 <div class="nm-go-back"> 77 <div class="nm-back-box"> 78 <lit-icon name="arrowleft"></lit-icon> 79 </div> 80 </div> 81 <div class="title"></div> 82 </div> 83 <div class="nm-subheading"></div> 84 <lit-chart-pie id="nm-chart-pie"></lit-chart-pie> 85 </div> 86 <div class="nm-table-box" style="height:auto;"> 87 <lit-table id="tb-eventtype-usage"> 88 <lit-table-column width="250px" class="event-class" title="Memory Type" 89 data-index="tableName" key="tableName" align="flex-start" order></lit-table-column> 90 <lit-table-column width="100px" class="event-class" title="Existing" 91 data-index="existSizeFormat" key="existSizeFormat" align="flex-start" order></lit-table-column> 92 <lit-table-column width="100px" class="event-class" title="%" 93 data-index="existSizePercent" key="existSizePercent" align="flex-start" order></lit-table-column> 94 <lit-table-column width="100px" class="event-class" title="# Existing" 95 data-index="existCount" key="existCount" align="flex-start" order></lit-table-column> 96 <lit-table-column width="100px" class="event-class" title="%" 97 data-index="existCountPercent" key="existCountPercent" align="flex-start" order></lit-table-column> 98 <lit-table-column width="100px" class="event-class" title="Total Bytes" 99 data-index="applySizeFormat" key="applySizeFormat" align="flex-start" order></lit-table-column> 100 <lit-table-column width="100px" class="event-class" title="%" 101 data-index="applySizePercent" key="applySizePercent" align="flex-start" order></lit-table-column> 102 <lit-table-column width="100px" class="event-class" title="# Total" 103 data-index="applyCount" key="applyCount" align="flex-start" order></lit-table-column> 104 <lit-table-column width="100px" class="event-class" title="%" 105 data-index="applyCountPercent" key="applyCountPercent" align="flex-start" order></lit-table-column> 106 <lit-table-column width="100px" class="event-class" title="Transient" 107 data-index="releaseSizeFormat" key="releaseSizeFormat" align="flex-start" order></lit-table-column> 108 <lit-table-column width="100px" class="event-class" title="%" 109 data-index="releaseSizePercent" key="releaseSizePercent" align="flex-start" order> 110 </lit-table-column> 111 <lit-table-column width="100px" class="event-class" title="# Transient" 112 data-index="releaseCount" key="releaseCount" align="flex-start" order></lit-table-column> 113 <lit-table-column width="100px" class="event-class" title="%" 114 data-index="releaseCountPercent" key="releaseCountPercent" align="flex-start" order> 115 </lit-table-column> 116 </lit-table> 117 <lit-table id="tb-thread-usage" style="display: none;" hideDownload> 118 <lit-table-column width="250px" class="thread-class" title="Thread" 119 data-index="tableName" key="tableName" align="flex-start" order></lit-table-column> 120 <lit-table-column width="100px" class="thread-class" title="Existing" 121 data-index="existSizeFormat" key="existSizeFormat" align="flex-start" order></lit-table-column> 122 <lit-table-column width="100px" class="thread-class" title="%" data-index="existSizePercent" 123 key="existSizePercent" align="flex-start" order></lit-table-column> 124 <lit-table-column width="100px" class="thread-class" title="# Existing" data-index="existCount" 125 key="existCount" align="flex-start" order></lit-table-column> 126 <lit-table-column width="100px" class="thread-class" title="%" data-index="existCountPercent" 127 key="existCountPercent" align="flex-start" order></lit-table-column> 128 <lit-table-column width="100px" class="thread-class" title="Total Bytes" 129 data-index="applySizeFormat" 130 key="applySizeFormat" align="flex-start" order></lit-table-column> 131 <lit-table-column width="100px" class="thread-class" title="%" data-index="applySizePercent" 132 key="applySizePercent" align="flex-start" order></lit-table-column> 133 <lit-table-column width="100px" class="thread-class" title="# Total" data-index="applyCount" 134 key="applyCount" align="flex-start" order></lit-table-column> 135 <lit-table-column width="100px" class="thread-class" title="%" data-index="applyCountPercent" 136 key="applyCountPercent" align="flex-start" order></lit-table-column> 137 <lit-table-column width="100px" class="thread-class" title="Transient" 138 data-index="releaseSizeFormat" 139 key="releaseSizeFormat" align="flex-start" order></lit-table-column> 140 <lit-table-column width="100px" class="thread-class" title="%" data-index="releaseSizePercent" 141 key="releaseSizePercent" align="flex-start" order></lit-table-column> 142 <lit-table-column width="100px" class="thread-class" title="# Transient" data-index="releaseCount" 143 key="releaseCount" align="flex-start" order></lit-table-column> 144 <lit-table-column width="100px" class="thread-class" title="%" data-index="releaseCountPercent" 145 key="releaseCountPercent" align="flex-start" order></lit-table-column> 146 </lit-table> 147 <lit-table id="tb-so-usage" style="display: none;" hideDownload> 148 <lit-table-column width="250px" class="so-class" title="Library" data-index="tableName" 149 key="tableName" align="flex-start" order></lit-table-column> 150 <lit-table-column width="100px" class="so-class" title="Existing" data-index="existSizeFormat" 151 key="existSizeFormat" align="flex-start" order></lit-table-column> 152 <lit-table-column width="100px" class="so-class" title="%" data-index="existSizePercent" 153 key="existSizePercent" align="flex-start" order></lit-table-column> 154 <lit-table-column width="100px" class="so-class" title="# Existing" data-index="existCount" 155 key="existCount" align="flex-start" order></lit-table-column> 156 <lit-table-column width="100px" class="so-class" title="%" data-index="existCountPercent" 157 key="existCountPercent" align="flex-start" order></lit-table-column> 158 <lit-table-column width="100px" class="so-class" title="Total Bytes" data-index="applySizeFormat" 159 key="applySizeFormat" align="flex-start" order></lit-table-column> 160 <lit-table-column width="100px" class="so-class" title="%" data-index="applySizePercent" 161 key="applySizePercent" align="flex-start" order></lit-table-column> 162 <lit-table-column width="100px" class="so-class" title="# Total" data-index="applyCount" 163 key="applyCount" align="flex-start" order></lit-table-column> 164 <lit-table-column width="100px" class="so-class" title="%" data-index="applyCountPercent" 165 key="applyCountPercent" align="flex-start" order></lit-table-column> 166 <lit-table-column width="100px" class="so-class" title="Transient" data-index="releaseSizeFormat" 167 key="releaseSizeFormat" align="flex-start" order></lit-table-column> 168 <lit-table-column width="100px" class="so-class" title="%" data-index="releaseSizePercent" 169 key="releaseSizePercent" align="flex-start" order></lit-table-column> 170 <lit-table-column width="100px" class="so-class" title="# Transient" data-index="releaseCount" 171 key="releaseCount" align="flex-start" order></lit-table-column> 172 <lit-table-column width="100px" class="so-class" title="%" data-index="releaseCountPercent" 173 key="releaseCountPercent" align="flex-start" order></lit-table-column> 174 </lit-table> 175 <lit-table id="tb-function-usage" style="display: none;" hideDownload> 176 <lit-table-column width="250px" class="function-class" title="Function" data-index="tableName" 177 key="tableName" align="flex-start" order></lit-table-column> 178 <lit-table-column width="100px" class="function-class" title="Existing" 179 data-index="existSizeFormat" 180 key="existSizeFormat" align="flex-start" order></lit-table-column> 181 <lit-table-column width="100px" class="function-class" title="%" data-index="existSizePercent" 182 key="existSizePercent" align="flex-start" order></lit-table-column> 183 <lit-table-column width="100px" class="function-class" title="# Existing" data-index="existCount" 184 key="existCount" align="flex-start" order></lit-table-column> 185 <lit-table-column width="100px" class="function-class" title="%" data-index="existCountPercent" 186 key="existCountPercent" align="flex-start" order></lit-table-column> 187 <lit-table-column width="100px" class="function-class" title="Total Bytes" 188 data-index="applySizeFormat" 189 key="applySizeFormat" align="flex-start" order></lit-table-column> 190 <lit-table-column width="100px" class="function-class" title="%" data-index="applySizePercent" 191 key="applySizePercent" align="flex-start" order></lit-table-column> 192 <lit-table-column width="100px" class="function-class" title="# Total" data-index="applyCount" 193 key="applyCount" align="flex-start" order></lit-table-column> 194 <lit-table-column width="100px" class="function-class" title="%" data-index="applyCountPercent" 195 key="applyCountPercent" align="flex-start" order></lit-table-column> 196 <lit-table-column width="100px" class="function-class" title="Transient" 197 data-index="releaseSizeFormat" 198 key="releaseSizeFormat" align="flex-start" order></lit-table-column> 199 <lit-table-column width="100px" class="function-class" title="%" data-index="releaseSizePercent" 200 key="releaseSizePercent" align="flex-start" order></lit-table-column> 201 <lit-table-column width="100px" class="function-class" title="# Transient" 202 data-index="releaseCount" 203 key="releaseCount" align="flex-start" order></lit-table-column> 204 <lit-table-column width="100px" class="function-class" title="%" data-index="releaseCountPercent" 205 key="releaseCountPercent" align="flex-start" order></lit-table-column> 206 </lit-table> 207 </div> 208 </div> 209 <tab-pane-filter id="filter" options></tab-pane-filter> 210`; 211