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 TabPaneHiSysEventSummaryHtml = `<style> 17 :host{ 18 padding: 10px 10px; 19 display: flex; 20 flex-direction: column; 21 } 22 .tree-row-tr { 23 display: flex; 24 height: 30px; 25 line-height: 30px; 26 align-items: center; 27 background-color: white; 28 width: 100%; 29 } 30 .tab-summary-head { 31 display: grid; 32 grid-template-columns: 69% 25%; 33 height: 30px; 34 line-height: 30px; 35 align-items: center; 36 background-color: white; 37 } 38 .head-label, .head-count { 39 white-space: nowrap; 40 overflow: hidden; 41 } 42 .head-label, .head-count { 43 font-weight: bold; 44 } 45 .tree-row-tr:hover { 46 background-color: #DEEDFF; 47 } 48 .tree-row-tr:nth-last-child(1):hover { 49 background-color: white; 50 } 51 .row-name-td { 52 height: 30px; 53 white-space: nowrap; 54 display: inline-block; 55 overflow-y: hidden; 56 margin-right: 15px; 57 } 58 tr { 59 height: 30px; 60 } 61 .row-name-td::-webkit-scrollbar { 62 display: none; 63 } 64 .event-tree-table { 65 display: grid; 66 overflow: hidden; 67 grid-template-rows: repeat(auto-fit, 30px); 68 position: sticky; 69 top: 0; 70 } 71 .event-tree-table:hover{ 72 overflow: auto hidden; 73 } 74 </style> 75 <div class="tab-summary-head"> 76 <div style="justify-content: flex-start; display: flex"> 77 <div class="expansion-div" style="display: grid;"> 78 <lit-icon class="expansion-up-icon" name="up"></lit-icon> 79 <lit-icon class="expansion-down-icon" name="down"></lit-icon> 80 </div> 81 <label class="head-label" style="cursor: pointer;">Level</label> 82 <label class="head-label" style="cursor: pointer;">/Domain</label> 83 <label class="head-label" style="cursor: pointer;">/EventName</label> 84 </div> 85 <label class="head-count">Count</label> 86 </div> 87 <div id="tab-summary" style="overflow: auto;display: grid; grid-template-columns: 70% 25%;"></div> 88 <lit-table id="tb-event-summary" style="display: none" tree> 89 <lit-table-column title="Level/Domain/EventName" data-index="summaryName" key="summaryName"> 90 </lit-table-column> 91 <lit-table-column title="Count" data-index="count" key="count"></lit-table-column> 92 </lit-table> 93 `; 94