| /** |
| * Licensed to the Apache Software Foundation (ASF) under one |
| * or more contributor license agreements. See the NOTICE file |
| * distributed with this work for additional information |
| * regarding copyright ownership. The ASF licenses this file |
| * to you under the Apache License, Version 2.0 (the |
| * "License"); you may not use this file except in compliance |
| * with the License. You may obtain a copy of the License at |
| * |
| * http://www.apache.org/licenses/LICENSE-2.0 |
| * |
| * Unless required by applicable law or agreed to in writing, software |
| * distributed under the License is distributed on an "AS IS" BASIS, |
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| * See the License for the specific language governing permissions and |
| * limitations under the License. |
| */ |
| |
| @import 'common.less'; |
| |
| #hosts { |
| |
| .alerts-crit-count, .alerts-warn-count { |
| float: right; |
| } |
| |
| .bulk-menu { |
| a { |
| &.disabled { |
| color: gray; |
| } |
| } |
| } |
| |
| .filters-label { |
| display: block; |
| float: left; |
| padding-right: 10px; |
| } |
| |
| #hosts-table { |
| margin-top: 10px; |
| margin-bottom: 10px; |
| |
| .set-rack-id { |
| text-decoration: none; |
| } |
| |
| .host-select-all { |
| margin-bottom: -1px ; |
| } |
| tbody > tr > td { |
| vertical-align: middle; |
| } |
| .alerts-crit-count, |
| .alerts-warn-count { |
| margin-top: 2px; |
| } |
| } |
| |
| .health-status-HEALTHY, |
| .health-status-LIVE, |
| .health-status-DEAD-RED, |
| .health-status-DEAD-ORANGE, |
| .health-status-DEAD-YELLOW { |
| background-position: center; |
| background-repeat: no-repeat; |
| height: 20px; |
| width: 13px; |
| display: inline !important; |
| float: none !important; |
| margin-right: 1px; |
| margin-left: 1px; |
| } |
| .icon-exclamation-sign, |
| .glyphicon-refresh { |
| margin-right: 1px; |
| margin-left: 1px; |
| } |
| |
| .passive-state { |
| color: #000; |
| } |
| .alerts-status { |
| padding: 1px 6px !important; |
| &:before { |
| content: "!"; |
| } |
| } |
| .host-name-search { |
| position: relative; |
| top: 0; |
| left: 10px; |
| } |
| .host-name-pos { |
| position: relative; |
| top: 10px; |
| } |
| .progress { |
| margin-bottom: 0; |
| } |
| .filter-input-width{ |
| width: ~"calc(100% - 20px)"; |
| |
| &.rack-input { |
| width: 85%; |
| } |
| } |
| .table { |
| input[type="checkbox"] + label { |
| top: 1px; |
| } |
| th { |
| padding-left: 6px; |
| } |
| .col1, |
| .col0, |
| td:first-child, |
| th:first-child, |
| td:last-child, |
| th:last-child, |
| td:first-child + td, |
| th:first-child + th { |
| padding-left: 4px!important; |
| padding-right: 1px!important; |
| padding-right: 10px\9!important; |
| width: 1.5%; |
| width: 13px\9!important; |
| input { |
| vertical-align: middle; |
| } |
| } |
| .col2, |
| td:first-child + td + td, |
| th:first-child + th + th { |
| width: 20%; |
| padding-right: 1px; |
| } |
| .col3, .col4, |
| td:first-child + td + td + td, |
| th:first-child + th + th + th, |
| td:first-child + td + td + td + td, |
| th:first-child + th + th + th + th { |
| padding-left: 1px!important; |
| padding-right: 1px!important; |
| width: 1.5%; |
| width: 13px\9!important; |
| } |
| .col5, |
| td:first-child + td + td + td + td + td, |
| th:first-child + th + th + th + th + th { |
| width: 10%!important; |
| } |
| .col6, |
| td:first-child + td + td + td + td + td + td, |
| th:first-child + th + th + th + th + th + th { |
| width: 13%!important; |
| } |
| .col7, |
| td:first-child + td + td + td + td + td + td + td, |
| th:first-child + th + th + th + th + th + th + th { |
| width: 5%!important; |
| } |
| |
| .col8, |
| td:first-child + td + td + td + td + td + td + td + td, |
| th:first-child + th + th + th + th + th + th + th + th { |
| width: 6%!important; |
| } |
| |
| .col9, |
| td:first-child + td + td + td + td + td + td + td + td + td, |
| th:first-child + th + th + th + th + th + th + th + th + th { |
| width: 9%!important; |
| } |
| |
| .col10, |
| td:first-child + td + td + td + td + td + td + td + td + td + td, |
| th:first-child + th + th + th + th + th + th + th + th + th + th { |
| width: 9%!important; |
| } |
| |
| .col11, |
| td:first-child + td + td + td + td + td + td + td + td + td + td + td, |
| th:first-child + th + th + th + th + th + th + th + th + th + th + th { |
| width: 11%!important; |
| a { |
| word-wrap: break-word; |
| } |
| } |
| |
| td.name { |
| overflow: inherit; |
| overflow-wrap: break-word; |
| white-space: nowrap; |
| } |
| td.name .trim_hostname{ |
| .ellipsis-overflow-nowrap; |
| display: block; |
| float: left; |
| width: 86%!important; |
| } |
| td.health label { |
| padding-top: 3px; |
| } |
| td.health .icon-medkit { |
| margin: 3px 0 0 0; |
| } |
| ul.filter-components { |
| padding: 5px 0; |
| background: #777; |
| color: #fff; |
| font-weight: normal; |
| font-size: 12px; |
| label { |
| font-size: 12px; |
| } |
| li.active-filter { |
| background-color: #777; |
| } |
| li { |
| display: block; |
| padding: 3px 0 3px 5px; |
| line-height: 20px; |
| label.checkbox { |
| padding-left: 3px; |
| } |
| input[type="checkbox"] { |
| margin: 4px 4px 2px 2px; |
| } |
| } |
| select { |
| width: 150px; |
| } |
| ul { |
| margin-left: 10px; |
| } |
| &>li { |
| &>ul { |
| height: 150px; |
| margin-left: 0; |
| overflow-y: scroll; |
| } |
| } |
| } |
| |
| div.view-wrapper { |
| input[type="checkbox"], .btn-group { |
| margin-bottom: 9px; |
| } |
| } |
| } |
| |
| .open-group > .dropdown-menu { |
| display: block; |
| } |
| .nav-pills li.disabled { |
| display: block; |
| margin: 2px 0; |
| padding: 8px 12px; |
| line-height: 14px; |
| } |
| .box-footer .footer-pagination { |
| float: right; |
| .nav { |
| margin-bottom: 0; |
| } |
| .dropdown { |
| margin-top: 3px; |
| } |
| .dropdown select { |
| width: 60px; |
| } |
| } |
| .collapsed-list { |
| padding-left: 10px; |
| } |
| .host-table-versions { |
| div.collapsed-list { |
| padding-left: 17px; |
| } |
| } |
| } |
| |
| #host-warnings { |
| .notice { |
| padding-bottom: 20px; |
| } |
| .code-snippet { |
| margin: 10px 0; |
| white-space: normal; |
| } |
| .warnings-list { |
| .panel { |
| padding: 0; |
| .panel-heading { |
| i { |
| margin-right: 5px; |
| position: relative; |
| top: 0; |
| &.panel-toggle { |
| font-size: 16px; |
| color: #1491c1; |
| } |
| } |
| a, a:visited, a:focus { |
| color: black; |
| text-decoration: none; |
| } |
| } |
| } |
| table { |
| width: 100%; |
| td, th { |
| text-align: left; |
| padding-left: 15px; |
| } |
| thead tr:first-child th { |
| font-weight: normal; |
| } |
| } |
| margin-top: 10px; |
| .panel-heading { |
| i { |
| line-height: 19px; |
| } |
| } |
| } |
| .glyphicon-warning-sign { |
| color: @health-status-yellow; |
| } |
| } |
| |
| .host-checks-update { |
| button { |
| margin-left: 5px; |
| } |
| .update-progress { |
| width: 230px; |
| .progress { |
| margin-bottom: 0; |
| } |
| } |
| } |
| |
| #host-details { |
| |
| |
| .status-info { |
| .host-title { |
| font-size: 18px; |
| font-weight: 700; |
| background-position: 0 center; |
| padding-left: 17px; |
| } |
| .host-maintenance-notice { |
| background-color: #E4E4E4; |
| border: 1px solid #D4D4D4; |
| color: #333; |
| padding: 8px 35px 8px 14px; |
| border-radius: 4px; |
| } |
| } |
| |
| .caret { |
| border-top-color: #000; |
| border-bottom-color: #000; |
| } |
| |
| .components-health.glyphicon-arrow-up { |
| color:@health-status-red; |
| } |
| |
| .health-status-started, .health-status-starting, .health-status-LIVE, |
| .health-status-installed, .health-status-stopping, .health-status-DEAD-RED, |
| .health-status-unknown, .health-status-DEAD-YELLOW, |
| .health-status-DEAD-ORANGE { |
| background-repeat: no-repeat; |
| height: 13px; |
| width: 13px; |
| display: inline !important; |
| float: none !important; |
| } |
| |
| .host-details-summary-list { |
| .summary-label { |
| text-align: right; |
| font-weight: 700; |
| } |
| } |
| |
| .host-metrics { |
| .chart-container { |
| .chart-x-axis { |
| left: 30%; |
| width: 40%; |
| } |
| } |
| } |
| |
| .namenode-metrics { |
| .span2p4 { |
| width: 46%; |
| .img-thumbnail { |
| width: 100%; |
| } |
| } |
| } |
| |
| .host-components { |
| padding: 10px; |
| .status-icons { |
| width: 70px; |
| } |
| .component-name-block { |
| white-space: normal; |
| word-wrap: break-word; |
| display: table-cell; |
| vertical-align: middle; |
| } |
| .dropdown-menu { |
| max-height: 450px; |
| overflow-y: scroll; |
| .disabled { |
| pointer-events: none; |
| color: #808080; |
| cursor: default; |
| } |
| .allow-tooltip { |
| pointer-events: auto; |
| } |
| } |
| .table > tbody > tr > td { |
| vertical-align: middle; |
| } |
| } |
| |
| .status-icons span { |
| padding-right: 2px; |
| } |
| |
| .action-icon { |
| padding: 2px 5px 0 5px; |
| top: 2px; |
| font-size: 16px; |
| } |
| |
| .host-stack-version-status { |
| .label { |
| font-size: 14px; |
| } |
| } |
| |
| .logs-tab-content { |
| padding: 0 10px; |
| background-color: #ffffff; |
| a.external-link { |
| font-size: @smaller-font-size; |
| } |
| .table { |
| table-layout: auto; |
| td:first-child, |
| th:first-child { |
| width: 20%; |
| } |
| td:first-child + td, |
| th:first-child + th { |
| width: 30%; |
| } |
| td:first-child + td + td, |
| th:first-child + th + th { |
| width: 50%; |
| } |
| } |
| } |
| .nav { |
| .alerts-crit-count, |
| .alerts-warn-count { |
| padding: .4em .5em; |
| display: inline-block; |
| vertical-align: top; |
| } |
| } |
| } |
| |
| .host-breadcrumb { |
| max-width: 50%; |
| display: inline-block; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| overflow: hidden; |
| vertical-align: bottom; |
| } |
| |
| #host-alerts { |
| padding: 0 10px; |
| background-color: #ffffff; |
| } |
| |
| @media all and (max-width: 2560px) { |
| #hosts { |
| .table { |
| .col2, |
| td:first-child + td + td, |
| th:first-child + th + th { |
| width: 15% !important; |
| |
| .filter-input-width { |
| width: 75%; |
| } |
| } |
| |
| .col4, |
| td:first-child + td + td + td + td, |
| th:first-child + th + th + th + th { |
| width: 1.4%; |
| } |
| |
| .col5, |
| td:first-child + td + td + td + td + td, |
| th:first-child + th + th + th + th + th { |
| width: 11.7% !important; |
| } |
| |
| .col6, |
| td:first-child + td + td + td + td + td + td, |
| th:first-child + th + th + th + th + th + th { |
| width: 9% !important; |
| } |
| |
| .col7, |
| td:first-child + td + td + td + td + td + td + td, |
| th:first-child + th + th + th + th + th + th + th { |
| width: 9% !important; |
| } |
| |
| .col8, |
| td:first-child + td + td + td + td + td + td + td + td, |
| th:first-child + th + th + th + th + th + th + th + th { |
| width: 9% !important; |
| } |
| .col9, |
| td:first-child + td + td + td + td + td + td + td + td + td, |
| th:first-child + th + th + th + th + th + th + th + th + th { |
| width: 9% !important; |
| } |
| .col11, |
| .col12, |
| td:first-child + td + td + td + td + td + td + td + td + td + td + td, |
| th:first-child + th + th + th + th + th + th + th + th + th + th + th, |
| td:first-child + td + td + td + td + td + td + td + td + td + td + td + td, |
| th:first-child + th + th + th + th + th + th + th + th + th + th + th + th { |
| width: 11.2% !important; |
| } |
| td.name .trim_hostname { |
| width: 82% !important; |
| } |
| } |
| } |
| } |
