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