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 SpInfoAndStatHtml = `<style> 17:host{ 18 width: 100%; 19 background-color: var(--dark-background5,#F6F6F6); 20 margin: 0; 21 padding: 0; 22} 23.info-stats{ 24 display: flex; 25 flex-direction: column; 26 background-color: var(--dark-background5,#F6F6F6); 27 position: absolute; 28 top: 0; 29 bottom: 0; 30 left: 0; 31 right: 0; 32 grid-row-gap: 30px; 33} 34.metadata{ 35 width: 90%; 36 color: #121212; 37 padding: 1% 2% 0 2%; 38 margin: 1% 2.5% 0 2.5%; 39 border-radius: 16px; 40 background-color: var(--dark-background3,#FFFFFF); 41 position: relative; 42} 43#metaData-table{ 44 background-color: var(--dark-background5,#F6F6F6); 45 margin-left: 10px; 46 min-height: inherit; 47 max-height: inherit; 48 padding: 10px; 49 overflow: visible; 50 width: auto; 51} 52#stats-table{ 53 margin-bottom: 2%; 54 margin-left: 10px; 55 padding: 10px; 56 overflow: visible; 57 width: auto; 58} 59#dataValueResult{ 60 overflow-y: auto; 61 background-color: var(--dark-background5,#F6F6F6); 62 border-radius: 16px; 63 min-height: inherit; 64 max-height: inherit; 65 margin-bottom: 1%; 66} 67 68#dataKeyResult{ 69 overflow-y: auto; 70 background-color: var(--dark-background5,#F6F6F6); 71 border-radius: 16px; 72 min-height: inherit; 73 max-height: inherit; 74 margin-bottom: 2%; 75} 76p{ 77 display: table-cell; 78 padding: 7px 10px 20px 10px; 79 color: #999999; 80 font-size:14px; 81 line-height: 20px; 82 font-weight: 400; 83 text-align: left; 84} 85.stats{ 86 flex-grow: 1; 87 height: min-content; 88 margin-bottom: 1%; 89 max-height: 37vh; 90 min-height: inherit; 91 display: flex; 92 flex-direction: column; 93} 94.info{ 95 max-height: inherit; 96 min-height: inherit; 97} 98.tr{ 99 background-color: var(--dark-background5,#F6F6F6); 100} 101.load-metric{ 102 width: 95%; 103 bottom: 0; 104} 105</style> 106<div class="info-stats"> 107 <div class="metadata info"> 108 <p>System info and metadata</p> 109 <div id="dataKeyResult"> 110 <lit-table id="metaData-table" hideDownload> 111 <lit-table-column title="name" data-index="name" key="name" align="flex-start"> 112 </lit-table-column> 113 <lit-table-column title="value" data-index="value" key="value" align="flex-start"> 114 </lit-table-column> 115 </lit-table> 116 </div> 117 <lit-progress-bar class="load-metric"></lit-progress-bar> 118 </div> 119 <div class="metadata stats"> 120 <p>Debugging stats</p> 121 <div id="dataValueResult"> 122 <lit-table id="stats-table" hideDownload> 123 <lit-table-column title="name" data-index="eventName" key="eventName" align="flex-start"> 124 </lit-table-column> 125 <lit-table-column title="value" data-index="count" key="count" align="flex-start"> 126 </lit-table-column> 127 <lit-table-column title="type" data-index="statType" key="statType" align="flex-start"> 128 </lit-table-column> 129 </lit-table> 130 </div> 131 </div> 132</div> 133` 134