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 TabPaneHiSysEventsHtml = ` 17 <style> 18 :host{ 19 padding: 10px 10px; 20 display: flex; 21 flex-direction: column; 22 } 23 .sys-detail-progress{ 24 bottom: 33px; 25 position: absolute; 26 height: 1px; 27 left: 0; 28 right: 0; 29 } 30 .title-content { 31 display: flex; 32 flex-wrap: wrap; 33 width: 100%; 34 align-items: center; 35 justify-content: space-between; 36 border-bottom: 1px solid #D5D5D5; 37 padding-bottom: 10px; 38 padding-left: 10px; 39 } 40 .detail-content { 41 display: flex; 42 flex-wrap: wrap; 43 width: 100%; 44 padding-left: 20px; 45 align-items: center; 46 justify-content: right; 47 border-bottom: 1px solid #D5D5D5; 48 padding-bottom: 10px; 49 } 50 .level-content { 51 margin-right: 20px; 52 } 53 #level-filter { 54 padding: 1px 12px; 55 opacity: 0.6; 56 font-size: 14px; 57 line-height: 20px; 58 font-weight: 400; 59 } 60 select { 61 border: 1px solid rgba(0,0,0,0.60); 62 border-radius: 10px; 63 margin-bottom: 4px; 64 } 65 option { 66 font-weight: 400; 67 font-size: 14px; 68 } 69 .change-input { 70 width: 40%; 71 line-height: 16px; 72 margin-right: 20px; 73 padding: 3px 12px; 74 height: 16px; 75 } 76 .filter-input { 77 line-height: 16px; 78 margin-right: 20px; 79 padding: 3px 12px; 80 height: 16px; 81 margin-bottom: 4px; 82 } 83 input { 84 background: #FFFFFF; 85 font-size: 14px; 86 color: #212121; 87 text-align: left; 88 line-height: 16px; 89 font-weight: 400; 90 text-indent: 2%; 91 border: 1px solid #979797; 92 border-radius: 10px; 93 } 94 .tagElement { 95 display: flex; 96 background-color: #0A59F7; 97 align-items: center; 98 margin-right: 5px; 99 border-radius: 10px; 100 font-size: 14px; 101 height: 22px; 102 margin-bottom: 4px; 103 } 104 .tag { 105 line-height: 14px; 106 padding: 4px 8px; 107 color: #FFFFFF; 108 } 109 #tb-hisysevent-data { 110 height: auto; 111 width: auto; 112 border-left: 1px solid var(--dark-border1,#e2e2e2); 113 display:flex; 114 } 115 </style> 116 <div style="display: flex;flex-direction: row"> 117 <div class="box-details" style="width: auto"> 118 <div class="title-content"> 119 <label id="event-title">HisysEvents [0, 0] / 0</label> 120 <div style="display: flex;flex-wrap: wrap;"> 121 <div style="display: flex;"> 122 <div id="domainTagFilter" style='display: flex;width: auto; height: 100%;flex-wrap: wrap;'> 123 </div> 124 <input type="text" id="domain-filter" class="filter-input" placeholder="Filter by Domain…"> 125 </div> 126 <div style="display: flex;"> 127 <div id="eventNameTagFilter" style='display: flex;width: auto; height: 100%;flex-wrap: wrap;'> 128 </div> 129 <input type="text" id="event-name-filter" class="filter-input" placeholder="Filter by eventname…"> 130 </div> 131 <div class="level-content"> 132 <select id="level-filter"> 133 <option>ALL</option> 134 <option>MINOR</option> 135 <option>CRITICAL</option> 136 </select> 137 </div> 138 <input type="text" id="contents-filter" class="filter-input" placeholder="Filter by contents…"> 139 </div> 140 </div> 141 <lit-page-table id="tb-hisysevent" style="height: auto"> 142 <lit-table-column title="id" width="0.5fr" data-index="id" key="id" align="flex-start" order> 143 </lit-table-column> 144 <lit-table-column title="domain" width="1.5fr" data-index="domain" key="domain" align="flex-start" > 145 </lit-table-column> 146 <lit-table-column title="eventname" width="3fr" data-index="eventName" key="eventName" align="flex-start" > 147 </lit-table-column> 148 <lit-table-column title="type" width="0.5fr" data-index="eventType" key="eventType" align="flex-start" > 149 </lit-table-column> 150 <lit-table-column title="time" width="1.5fr" data-index="startTs" key="startTs" align="flex-start" order> 151 </lit-table-column> 152 <lit-table-column title="pid" width="1fr" data-index="pid" key="pid" align="flex-start" order > 153 </lit-table-column> 154 <lit-table-column title="tid" width="1fr" data-index="tid" key="tid" align="flex-start" order > 155 </lit-table-column> 156 <lit-table-column title="uid" width="1fr" data-index="uid" key="uid" align="flex-start" order > 157 </lit-table-column> 158 <lit-table-column title="info" width="1fr" data-index="info" key="info" align="flex-start" > 159 </lit-table-column> 160 <lit-table-column title="level" width="1fr" data-index="level" key="level" align="flex-start" > 161 </lit-table-column> 162 <lit-table-column title="seq" width="1fr" data-index="seq" key="seq" align="flex-start" > 163 </lit-table-column> 164 <lit-table-column title="contents" width="5fr" data-index="contents" key="contents" align="flex-start"> 165 </lit-table-column> 166 </lit-page-table> 167 </div> 168 <lit-slicer-track></lit-slicer-track> 169 <div class="detail-box" style="flex-grow: 1;" > 170 <div class="detail-content"> 171 <input type="text" id="contents-change" class="change-input" placeholder="base time"> 172 </div> 173 <lit-table id="tb-hisysevent-data" no-head hideDownload> 174 <lit-table-column class="sys-detail-column" width="50%" title="key" 175 data-index="key" key="key" align="flex-start" style="flex: 1"> 176 </lit-table-column> 177 <lit-table-column class="sys-detail-column" width="50%" 178 title="value" data-index="value" key="value" align="flex-start" style="flex: 1"> 179 </lit-table-column> 180 </lit-table> 181 </div> 182 </div>`; 183