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 TabPaneHiLogsHtml = ` 17<style> 18:host{ 19 padding: 10px 10px; 20 display: flex; 21 flex-direction: column; 22} 23.logs-title-content { 24 display: flex; 25 flex-wrap: wrap; 26 width: 100%; 27 align-items: center; 28 justify-content: space-between; 29 border-bottom: 1px solid #D5D5D5; 30 padding: 10px 0px; 31} 32#log-title { 33 flex-grow: 1; 34} 35.filter-input { 36 line-height: 16px; 37 margin-right: 20px; 38 padding: 3px 12px; 39 height: 16px; 40} 41.level-content { 42 margin-right: 20px; 43} 44input { 45 background: #FFFFFF; 46 font-size: 14px; 47 color: #212121; 48 text-align: left; 49 line-height: 16px; 50 font-weight: 400; 51 text-indent: 2%; 52 border: 1px solid #979797; 53 border-radius: 10px; 54} 55select { 56 border: 1px solid rgba(0,0,0,0.60); 57 border-radius: 10px; 58} 59option { 60 font-weight: 400; 61 font-size: 14px; 62} 63.tagElement { 64 display: flex; 65 background-color: #0A59F7; 66 align-items: center; 67 margin-right: 5px; 68 border-radius: 10px; 69 font-size: 14px; 70 height: 22px; 71 margin-bottom: 5px; 72} 73.tag { 74 line-height: 14px; 75 padding: 4px 8px; 76 color: #FFFFFF; 77} 78#level-filter { 79 padding: 1px 12px; 80 opacity: 0.6; 81 font-size: 14px; 82 line-height: 20px; 83 font-weight: 400; 84} 85</style> 86<div class="logs-title-content"> 87 <label id="log-title">Hilogs [0, 0] / 0</label> 88 <div style="display: flex;flex-wrap: wrap;"> 89 <div class="level-content"> 90 <select id="level-filter"> 91 <option>Debug</option> 92 <option>Info</option> 93 <option>Warn</option> 94 <option>Error</option> 95 <option>Fatal</option> 96 </select> 97 </div> 98 <div style="display: flex;"> 99 <div id="tagFilter" style='display: flex;width: auto; height: 100%;flex-wrap: wrap;'></div> 100 <input type="text" id="tag-filter" class="filter-input" placeholder="Filter by tag..."> 101 </div> 102 <input type="text" id="process-filter" class="filter-input" placeholder="Search process name..."> 103 <input type="text" id="search-filter" class="filter-input" placeholder="Search message..."> 104 </div> 105 </div> 106<lit-progress-bar class="progress"></lit-progress-bar> 107<lit-page-table id="tb-hilogs"> 108 <lit-table-column title="Timestamp" width="10%" data-index="startTs" key="startTs"> 109 </lit-table-column> 110 <lit-table-column title="Time" width="10%" data-index="originTime" key="originTime"> 111 </lit-table-column> 112 <lit-table-column title="Level" width="5%" data-index="level" key="level"> 113 </lit-table-column> 114 <lit-table-column title="Tag" width="15%" data-index="tag" key="tag"> 115 </lit-table-column> 116 <lit-table-column title="Process Name" width="12%" data-index="processName" key="processName"> 117 </lit-table-column> 118 <lit-table-column title="Message" width="44%" data-index="context" key="context"> 119 </lit-table-column> 120</lit-page-table> 121`; 122