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 TabPaneFilesystemStatisticsAnalysisHtml = ` 16 <style> 17 :host { 18 display: flex; 19 flex-direction: column; 20 } 21 #fs-chart-pie{ 22 height: 300px; 23 margin-bottom: 31px; 24 } 25 .fs-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 .fs-go-back{ 33 display:flex; 34 align-items: center; 35 cursor: pointer; 36 margin-left: 20px; 37 visibility: hidden; 38 } 39 .fs-back-box{ 40 width: 40px; 41 height: 20px; 42 background-color: var(--bark-expansion,#0C65D1); 43 border-radius: 5px; 44 color: #fff; 45 display: flex; 46 margin-right: 10px; 47 justify-content: center; 48 align-items: center; 49 } 50 .fs-subheading{ 51 font-weight: bold; 52 text-align: center; 53 } 54 .fs-stat-analysis-progress{ 55 left: 0; 56 right: 0; 57 position: absolute; 58 height: 1px; 59 } 60 #filter{ 61 bottom: 0px; 62 position: absolute; 63 } 64 </style> 65 <label id="time-range" style="width: 100%;height: 20px;text-align: end;font-size: 10pt;margin-bottom: 5px">Selected range:0.0 ms</label> 66 <div style="display: flex;flex-direction: row;" class="d-box"> 67 <lit-progress-bar class="progress fs-stat-analysis-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="fs-go-back"> 71 <div class="fs-back-box"> 72 <lit-icon class="file-analysis" name="arrowleft"></lit-icon> 73 </div> 74 </div> 75 <div class="title"></div> 76 </div> 77 <div class="fs-subheading"></div> 78 <lit-chart-pie id="fs-chart-pie"></lit-chart-pie> 79 </div> 80 <div class="fs-table-box" style="height:auto;overflow: auto"> 81 <lit-table id="tb-process-usage"class="file-analysis" 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="file-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="file-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="file-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="file-analysis" style="max-height:565px;display: none;min-height: 350px"hideDownload> 102 <lit-table-column width="1fr" key="tableName" align="flex-start" order title="Function" data-index="tableName"></lit-table-column> 103 <lit-table-column width="1fr" data-index="durFormat" key="durFormat" align="flex-start" order title="Duration"></lit-table-column> 104 <lit-table-column width="1fr" align="flex-start" order title="%" data-index="percent" key="percent"></lit-table-column> 105 </lit-table> 106 </div> 107 </div> 108 <tab-pane-filter id="filter" options></tab-pane-filter> 109`; 110