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 TabPaneHangHtml = ` 17<style> 18:host{ 19 padding: 10px 10px; 20 display: flex; 21 flex-direction: column; 22} 23.hangs-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#hang-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="hangs-title-content"> 87 <label id="hang-title">Hang [0, 0] / 0</label> 88 <div style="display: flex;flex-wrap: wrap;"> 89 <div class="level-content"> 90 <select id="level-filter"> 91 <option>Instant</option> 92 <option>Circumstantial</option> 93 <option>Micro</option> 94 <option>Severe</option> 95 </select> 96 </div> 97 <input type="text" id="process-filter" class="filter-input" placeholder="Search process..."> 98 <input type="text" id="search-filter" class="filter-input" placeholder="Search sender..."> 99 </div> 100</div> 101<lit-progress-bar class="progress"></lit-progress-bar> 102<lit-page-table id="tb-hang"> 103 <lit-table-column order title="StartTime" width="15%" data-index="startTime" key="startTime"> 104 </lit-table-column> 105 <lit-table-column order title="Duration" width="1fr" data-index="durStr" key="durStr"> 106 </lit-table-column> 107 <lit-table-column order title="Hang type" width="1fr" data-index="type" key="type"> 108 </lit-table-column> 109 <lit-table-column order title="Process" width="1fr" data-index="pname" key="pname"> 110 </lit-table-column> 111 <lit-table-column order title="Sender tid" width="1fr" data-index="sendEventTid" key="sendEventTid"> 112 </lit-table-column> 113 <lit-table-column order title="Send time" width="1fr" data-index="sendTime" key="sendTime"> 114 </lit-table-column> 115 <lit-table-column order title="Expect handle time" width="1fr" data-index="expectHandleTime" key="expectHandleTime"> 116 </lit-table-column> 117 <lit-table-column order title="Task name/Id" width="1fr" data-index="taskNameId" key="taskNameId"> 118 </lit-table-column> 119 <lit-table-column order title="Prio" width="5%" data-index="prio" key="prio"> 120 </lit-table-column> 121 <lit-table-column order title="Sender" width="15%" data-index="caller" key="caller"> 122 </lit-table-column> 123</lit-page-table> 124`; 125