ambari-web/app/styles/alerts.less - ambari - Git at Google

 /**
  * 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';

 .alert-state-OK {
   background-color: @health-status-green;
 }

 .alert-state-WARNING {
   background-color: @health-status-orange;
 }

 .alert-state-CRITICAL {
   background-color: @health-status-red;
 }

 .alert-state-DISABLED {
   color: #000;
 }

 .alert-state-UNKNOWN {
   background-color: @health-status-yellow;
 }

 .alert-state-PENDING {
   background-color: #999;
 }

 .alert-state-single-host {
   display: inline-block;
   width: 115px;
   text-align: center;
   line-height: 20px;
   margin-bottom: 4px;
 }

 .groups-filter {
   .ui-icon-circle-close {
     display: none;
   }
 }

 .alert-definition-enable {
   color: @health-status-green;
 }

 .alert-definition-disable {
   color: gray;
 }

 .alerts-table {

   margin-top: 10px;
   margin-bottom: 10px;
   font-size: 13px \9;

   .filter-row {
     th {
       padding: 0;
       padding-left: 4px;
     }
   }
   thead {
     background: none repeat scroll 0 0 #F8F8F8;
     th {
       padding: 8px;
     }
   }
 }

 .alert-definition-review {
   height: 400px;
   overflow: scroll;
 }

 #alert-definitions-table {
   a {
     &.disabled {
       color: #000;
     }
   }

   .col0,
   td:first-child,
   th:first-child {
     width: 35%;
   }

   .col1,
   td:first-child + td,
   th:first-child + th {
     width: 15%;
     .filter-input-width {
       width: 80%;
     }
   }

   .col2,
   td:first-child + td + td,
   th:first-child + th + th {
     width: 20%;
     .filter-input-width {
       width: 80%;
     }
   }
   .col3,
   td:first-child + td + td + td,
   th:first-child + th + th + th {
     width: 15%;
     .filter-input-width {
       width: 80%;
     }
   }

   .col4,
   td:first-child + td + td + td + td,
   th:first-child + th + th + th + th {
     width: 15%;
     .filter-input-width {
       width: 80%;
     }
   }

   .col5,
   td:first-child + td + td + td + td + td,
   th:first-child + th + th + th + th + th {
     width: 10%;
     .filter-input-width {
       width: 80%;
     }
   }

   .type-icon {
     margin-right: 5px;
     width: 10px;
     display: inline-block;
   }
 }

 #alert-instances-table {
   .col0,
   td:first-child,
   th:first-child {
     width: 10%;
   }

   .col1,
   td:first-child + td,
   th:first-child + th {
     width: 20%;
   }

   .col2,
   td:first-child + td + td,
   th:first-child + th + th {
     width: 23%;
   }

   .col3,
   td:first-child + td + td + td,
   th:first-child + th + th + th {
     width: 7%;
   }

   .col4,
   td:first-child + td + td + td + td,
   th:first-child + th + th + th + th {
     width: 40%;
   }

   .alert-text {
     overflow: hidden;
     float: left;
     text-overflow: ellipsis;
     white-space: nowrap;
     width: 100%;
   }
 }

 #alert-definition-details {
   .alert-definition-details-header {
     margin-bottom: 30px;
   }
   .box {
     .box-header {
       .edit-link {
         margin: 5px;
       }
     }
     margin-bottom: 0;
   }
   .definition-details-block {
     margin-top: 30px;
     .multiline-text {
       padding-top: 4px;
       height: 60px;
     }
   }
   hr {
     margin: 10px 0 0 0;
   }
   .edit-description-button {
     font-size: 14px;
   }
   .edit-description-button:hover {
     text-decoration: none;
   }

   .status {
     text-align: right;
     .label {
       font-size: 14px;
       padding: 5px 8px;
     }
   }

   .right-column {
     button {
       margin-top: 10px;
       width: 100%;
     }
     .properties-list {
       padding: 10px;
       text-align: left;
       .property-name {
         font-weight: bold;
       }
       ul {
         list-style: none;
         margin: 0;
       }
     }
   }
   .definition-name, .definition-name input {
     font-size: 20px;
     font-weight: bold;
   }

   .definition-name {
     .name-text-field{
       margin-left: 2px;
       margin-bottom: 0;
       input {
         width: 99%;
         margin-bottom: 0;
         margin-top: -4px;
         margin-left: -5px;
       }
     }
     .edit-buttons {
       margin-bottom: 0;
       margin-top: -4px;
       float: left;
       margin-left: 7px;
     }
   }

   .error-msg {
       color: #b94a48;
   }

   .edit-buttons {
     text-align: right;
     margin-bottom: 10px;
     margin-right: 10px;
   }

   .text-area-edit {
     textarea {
       width: 99%;
       height: 100px;
       margin-left: -5px;
     }
   }

   .edit-link {
     cursor: pointer;
   }

   .box .box-header h4 {
     color: #333;
     font-size: 16px;
     font-weight: 500;
   }
 }

 .alert-configs {

   label.shifted {
     width: 170px;
   }

   .stuck-left {
     margin-left: 0!important;
   }

   .controls.shifted {
     margin-left: 190px;
   }

   margin-top: 20px;

   .alert-config-text-area {
     height: 100px;
   }

   .alert-text-input {
     input {
       width: 98%;
     }
   }

   .input-append {
     padding-right: 13px;
   }

   .alert-interval-input {
     input {
       width: 20%;
     }
   }

   .alert-port-input {
     input {
       width: 30%;
     }
   }

   .badge-container {
     height: 26px;
     .alert-threshold-badge,
     .alert-parameter-badge {
       line-height: 26px;
       height: 26px;
     }
   }

   .control-group.error{
     .alert-text-input input{
       color: #555555;
       border-color: #ccc;
     }
   }
   .error-message {
     color: #b94a48;
   }


 }

 #host-alerts-table {
   a {
     &.disabled {
       color: #000;
     }
   }

   .col0,
   td:first-child,
   th:first-child {
     width: 15%;
     .filter-input-width {
       width: 80%;
     }
   }

   .col1,
   td:first-child + td,
   th:first-child + th {
     width: 30%;
     .filter-input-width {
       width: 90%;
     }
   }

   .col2,
   td:first-child + td + td,
   th:first-child + th + th {
     width: 20%;
     .filter-input-width {
       width: inherit;
     }
   }
   .col3,
   td:first-child + td + td + td,
   th:first-child + th + th + th {
     width: 35%;
   }

   .alert-text {
     overflow: hidden;
     float: left;
     text-overflow: ellipsis;
     white-space: nowrap;
     width: 100%;
   }
 }

 #manage-alert-notification-content {
   .notification-info .global-info .global-checkbox {
     margin: 0;
   }
   .input-label {
     font-weight: bold;
   }
 }

 #manage-alert-notifications-error {
   margin-bottom: 20px
 }

 .notification-description {
   .input-value {
     white-space: pre;
   }
 }

 #create-edit-alert-notification {
   .form-horizontal {
     .controls {
       margin-left: 140px;
     }
     .control-label {
       font-weight: bold;
     }
     .error-msg {
       color: #b94a48;
     }
   }
   label {
     width: 115px;
     &.checkbox {
       width: inherit;
     }
   }

   .icon-minus-sign {
     color: #FF4B4B;
   }

   .add-custom-property {
     margin-left: 140px;
   }

   a {
     &.disabled {
       cursor: default;
       color: gray;
       &:hover {
         text-decoration: none;
       }
     }
   }

 }

 .create-edit-alert-notification-popup {
   .modal {
     margin-top: 0;
     top: 5%;
     width: 600px;
   }
 }

 .service-block .summary-box-header {
   .alerts-crit-count, .alerts-warn-count, .no-alerts-label {
     padding: 4px 5px;
     margin: 4px;
     font-size: 14px;
   }
 }

 .alerts-crit-count, .alerts-warn-count, .no-alerts-label {
   cursor: pointer;
 }

 .alerts-crit-count {
   background: @health-status-red;
 }
 .alerts-warn-count {
   background: @health-status-orange;
 }
 .no-alerts-label {
   background: @health-status-green;
 }

 #summary-alerts-popup {
   .alert-list-wrap {
     padding: 10px 5px;
     .status-icon {
       padding-right: 5px;
       min-width: 20px;
     }
   }
 }

 /*****start styles for manage alerts popup*****/
 .sixty-percent-width-modal.manage-alert-group-popup {
   .modal{
     max-height: 650px;
   }
   .modal-body {
     max-height: 500px;
   }
   .group-select {
     width: 100%;
     height: 250px;
   }
   .btn-toolbar {
     margin-top: 0;
   }
   .manage-configuration-group-content {
     margin-bottom: 0;
   }
   .notification-editable-list {
     .title {
       font-weight: bold;
     }
   }
   a {
     i {
       cursor: inherit;
     }
   }
 }

 .forty-percent-width-modal {
   .modal {
     width: 40%;

     .definition-latest-text {
       overflow-x: auto;
       text-overflow: inherit;
       white-space: normal;
     }
   }
 }

 .sixty-percent-width-modal {
   .definition-latest-text {
     overflow-x: auto;
     text-overflow: inherit;
     white-space: normal;
   }
 }

 /*****end styles for manage alerts popup*****/

 /*****start styles for alerts popup*****/
 .alerts-popup {
   .modal-body, .modal-footer, .modal-header {
     min-width: 600px;
   }
   #alert-info {
     .alert-list-wrap:hover {
       background-color: #e6e6e6;
     }
   }
 }

 .service-alerts {
   max-height: 400px;
 }

 .instance-text {
   font-size: 0.8em;
   width: 95%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }

 .definition-latest-text {
   font-size: 0.8em;
   width: 95%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }

 .alerts-popup-wrap {
   .trim_hostname{
     display: block;
     overflow: hidden;
     text-overflow: ellipsis;
   }
   .top-wrap {
     width: 100%;
     border-bottom: 1px solid #CCC;
     text-align: center;
     font-size: 15px;
     padding: 0 0 20px 0;
     height: 20px;
     .name-top {
       width: 32%;
       padding-left: 10px;
     }
     .service-top {
       width: 31%;
       padding-left: 10px;
     }
     .status-top,.name-top,.service-top,.last-triggered-top {
       float: left;
       text-align: left;
     }
   }
   #alert-info{
     overflow: auto;
     max-height: 340px;
     width: 100%;
     .alert-list-wrap {
       padding: 10px 5px;
       border-top: 1px solid #CCC;
       border-bottom: 1px solid #CCC;
     }
     .alert-list-line-cursor{
       width: 100%;
       min-height: 20px;
       .status-icon {
         padding-right: 5px;
         min-width: 20px;
       }
       .name-text {
         float: left;
         width: 33%;
       }
       .service-text {
         padding-left: 5px;
         width: 33%;
         float: left;
         .na-text {
           color: #808080;
         }
       }
     }
     .alert-list-line-cursor:before,.alert-list-line-cursor:after {
       display: table;
       line-height: 0;
       content: "";
     }
     .alert-list-line-cursor:after {
       clear: both;
     }
     .show-more {
       width: 98.8%;
       min-height: 20px;
       cursor: pointer;
       border-top: 1px solid #CCC;
       text-align: center;
       padding: 10px 10px 10px 0;
       font-size: 16px;
     }
   }
 }
 /*****end styles for alert popup*****/
 .enable-disable-button::before {
   font-family: FontAwesome;
   content: "\f011";
 }

 .alert-definition-filter-list {
   max-height: 200px;
   overflow-y: scroll;
 }
	/**
	* 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';

	.alert-state-OK {
	background-color: @health-status-green;
	}

	.alert-state-WARNING {
	background-color: @health-status-orange;
	}

	.alert-state-CRITICAL {
	background-color: @health-status-red;
	}

	.alert-state-DISABLED {
	color: #000;
	}

	.alert-state-UNKNOWN {
	background-color: @health-status-yellow;
	}

	.alert-state-PENDING {
	background-color: #999;
	}

	.alert-state-single-host {
	display: inline-block;
	width: 115px;
	text-align: center;
	line-height: 20px;
	margin-bottom: 4px;
	}

	.groups-filter {
	.ui-icon-circle-close {
	display: none;
	}
	}

	.alert-definition-enable {
	color: @health-status-green;
	}

	.alert-definition-disable {
	color: gray;
	}

	.alerts-table {

	margin-top: 10px;
	margin-bottom: 10px;
	font-size: 13px \9;

	.filter-row {
	th {
	padding: 0;
	padding-left: 4px;
	}
	}
	thead {
	background: none repeat scroll 0 0 #F8F8F8;
	th {
	padding: 8px;
	}
	}
	}

	.alert-definition-review {
	height: 400px;
	overflow: scroll;
	}

	#alert-definitions-table {
	a {
	&.disabled {
	color: #000;
	}
	}

	.col0,
	td:first-child,
	th:first-child {
	width: 35%;
	}

	.col1,
	td:first-child + td,
	th:first-child + th {
	width: 15%;
	.filter-input-width {
	width: 80%;
	}
	}

	.col2,
	td:first-child + td + td,
	th:first-child + th + th {
	width: 20%;
	.filter-input-width {
	width: 80%;
	}
	}
	.col3,
	td:first-child + td + td + td,
	th:first-child + th + th + th {
	width: 15%;
	.filter-input-width {
	width: 80%;
	}
	}

	.col4,
	td:first-child + td + td + td + td,
	th:first-child + th + th + th + th {
	width: 15%;
	.filter-input-width {
	width: 80%;
	}
	}

	.col5,
	td:first-child + td + td + td + td + td,
	th:first-child + th + th + th + th + th {
	width: 10%;
	.filter-input-width {
	width: 80%;
	}
	}

	.type-icon {
	margin-right: 5px;
	width: 10px;
	display: inline-block;
	}
	}

	#alert-instances-table {
	.col0,
	td:first-child,
	th:first-child {
	width: 10%;
	}

	.col1,
	td:first-child + td,
	th:first-child + th {
	width: 20%;
	}

	.col2,
	td:first-child + td + td,
	th:first-child + th + th {
	width: 23%;
	}

	.col3,
	td:first-child + td + td + td,
	th:first-child + th + th + th {
	width: 7%;
	}

	.col4,
	td:first-child + td + td + td + td,
	th:first-child + th + th + th + th {
	width: 40%;
	}

	.alert-text {
	overflow: hidden;
	float: left;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 100%;
	}
	}

	#alert-definition-details {
	.alert-definition-details-header {
	margin-bottom: 30px;
	}
	.box {
	.box-header {
	.edit-link {
	margin: 5px;
	}
	}
	margin-bottom: 0;
	}
	.definition-details-block {
	margin-top: 30px;
	.multiline-text {
	padding-top: 4px;
	height: 60px;
	}
	}
	hr {
	margin: 10px 0 0 0;
	}
	.edit-description-button {
	font-size: 14px;
	}
	.edit-description-button:hover {
	text-decoration: none;
	}

	.status {
	text-align: right;
	.label {
	font-size: 14px;
	padding: 5px 8px;
	}
	}

	.right-column {
	button {
	margin-top: 10px;
	width: 100%;
	}
	.properties-list {
	padding: 10px;
	text-align: left;
	.property-name {
	font-weight: bold;
	}
	ul {
	list-style: none;
	margin: 0;
	}
	}
	}
	.definition-name, .definition-name input {
	font-size: 20px;
	font-weight: bold;
	}

	.definition-name {
	.name-text-field{
	margin-left: 2px;
	margin-bottom: 0;
	input {
	width: 99%;
	margin-bottom: 0;
	margin-top: -4px;
	margin-left: -5px;
	}
	}
	.edit-buttons {
	margin-bottom: 0;
	margin-top: -4px;
	float: left;
	margin-left: 7px;
	}
	}

	.error-msg {
	color: #b94a48;
	}

	.edit-buttons {
	text-align: right;
	margin-bottom: 10px;
	margin-right: 10px;
	}

	.text-area-edit {
	textarea {
	width: 99%;
	height: 100px;
	margin-left: -5px;
	}
	}

	.edit-link {
	cursor: pointer;
	}

	.box .box-header h4 {
	color: #333;
	font-size: 16px;
	font-weight: 500;
	}
	}

	.alert-configs {

	label.shifted {
	width: 170px;
	}

	.stuck-left {
	margin-left: 0!important;
	}

	.controls.shifted {
	margin-left: 190px;
	}

	margin-top: 20px;

	.alert-config-text-area {
	height: 100px;
	}

	.alert-text-input {
	input {
	width: 98%;
	}
	}

	.input-append {
	padding-right: 13px;
	}

	.alert-interval-input {
	input {
	width: 20%;
	}
	}

	.alert-port-input {
	input {
	width: 30%;
	}
	}

	.badge-container {
	height: 26px;
	.alert-threshold-badge,
	.alert-parameter-badge {
	line-height: 26px;
	height: 26px;
	}
	}

	.control-group.error{
	.alert-text-input input{
	color: #555555;
	border-color: #ccc;
	}
	}
	.error-message {
	color: #b94a48;
	}


	}

	#host-alerts-table {
	a {
	&.disabled {
	color: #000;
	}
	}

	.col0,
	td:first-child,
	th:first-child {
	width: 15%;
	.filter-input-width {
	width: 80%;
	}
	}

	.col1,
	td:first-child + td,
	th:first-child + th {
	width: 30%;
	.filter-input-width {
	width: 90%;
	}
	}

	.col2,
	td:first-child + td + td,
	th:first-child + th + th {
	width: 20%;
	.filter-input-width {
	width: inherit;
	}
	}
	.col3,
	td:first-child + td + td + td,
	th:first-child + th + th + th {
	width: 35%;
	}

	.alert-text {
	overflow: hidden;
	float: left;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 100%;
	}
	}

	#manage-alert-notification-content {
	.notification-info .global-info .global-checkbox {
	margin: 0;
	}
	.input-label {
	font-weight: bold;
	}
	}

	#manage-alert-notifications-error {
	margin-bottom: 20px
	}

	.notification-description {
	.input-value {
	white-space: pre;
	}
	}

	#create-edit-alert-notification {
	.form-horizontal {
	.controls {
	margin-left: 140px;
	}
	.control-label {
	font-weight: bold;
	}
	.error-msg {
	color: #b94a48;
	}
	}
	label {
	width: 115px;
	&.checkbox {
	width: inherit;
	}
	}

	.icon-minus-sign {
	color: #FF4B4B;
	}

	.add-custom-property {
	margin-left: 140px;
	}

	a {
	&.disabled {
	cursor: default;
	color: gray;
	&:hover {
	text-decoration: none;
	}
	}
	}

	}

	.create-edit-alert-notification-popup {
	.modal {
	margin-top: 0;
	top: 5%;
	width: 600px;
	}
	}

	.service-block .summary-box-header {
	.alerts-crit-count, .alerts-warn-count, .no-alerts-label {
	padding: 4px 5px;
	margin: 4px;
	font-size: 14px;
	}
	}

	.alerts-crit-count, .alerts-warn-count, .no-alerts-label {
	cursor: pointer;
	}

	.alerts-crit-count {
	background: @health-status-red;
	}
	.alerts-warn-count {
	background: @health-status-orange;
	}
	.no-alerts-label {
	background: @health-status-green;
	}

	#summary-alerts-popup {
	.alert-list-wrap {
	padding: 10px 5px;
	.status-icon {
	padding-right: 5px;
	min-width: 20px;
	}
	}
	}

	/***start styles for manage alerts popup***/
	.sixty-percent-width-modal.manage-alert-group-popup {
	.modal{
	max-height: 650px;
	}
	.modal-body {
	max-height: 500px;
	}
	.group-select {
	width: 100%;
	height: 250px;
	}
	.btn-toolbar {
	margin-top: 0;
	}
	.manage-configuration-group-content {
	margin-bottom: 0;
	}
	.notification-editable-list {
	.title {
	font-weight: bold;
	}
	}
	a {
	i {
	cursor: inherit;
	}
	}
	}

	.forty-percent-width-modal {
	.modal {
	width: 40%;

	.definition-latest-text {
	overflow-x: auto;
	text-overflow: inherit;
	white-space: normal;
	}
	}
	}

	.sixty-percent-width-modal {
	.definition-latest-text {
	overflow-x: auto;
	text-overflow: inherit;
	white-space: normal;
	}
	}

	/***end styles for manage alerts popup***/

	/***start styles for alerts popup***/
	.alerts-popup {
	.modal-body, .modal-footer, .modal-header {
	min-width: 600px;
	}
	#alert-info {
	.alert-list-wrap:hover {
	background-color: #e6e6e6;
	}
	}
	}

	.service-alerts {
	max-height: 400px;
	}

	.instance-text {
	font-size: 0.8em;
	width: 95%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	}

	.definition-latest-text {
	font-size: 0.8em;
	width: 95%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	}

	.alerts-popup-wrap {
	.trim_hostname{
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	}
	.top-wrap {
	width: 100%;
	border-bottom: 1px solid #CCC;
	text-align: center;
	font-size: 15px;
	padding: 0 0 20px 0;
	height: 20px;
	.name-top {
	width: 32%;
	padding-left: 10px;
	}
	.service-top {
	width: 31%;
	padding-left: 10px;
	}
	.status-top,.name-top,.service-top,.last-triggered-top {
	float: left;
	text-align: left;
	}
	}
	#alert-info{
	overflow: auto;
	max-height: 340px;
	width: 100%;
	.alert-list-wrap {
	padding: 10px 5px;
	border-top: 1px solid #CCC;
	border-bottom: 1px solid #CCC;
	}
	.alert-list-line-cursor{
	width: 100%;
	min-height: 20px;
	.status-icon {
	padding-right: 5px;
	min-width: 20px;
	}
	.name-text {
	float: left;
	width: 33%;
	}
	.service-text {
	padding-left: 5px;
	width: 33%;
	float: left;
	.na-text {
	color: #808080;
	}
	}
	}
	.alert-list-line-cursor:before,.alert-list-line-cursor:after {
	display: table;
	line-height: 0;
	content: "";
	}
	.alert-list-line-cursor:after {
	clear: both;
	}
	.show-more {
	width: 98.8%;
	min-height: 20px;
	cursor: pointer;
	border-top: 1px solid #CCC;
	text-align: center;
	padding: 10px 10px 10px 0;
	font-size: 16px;
	}
	}
	}
	/***end styles for alert popup***/
	.enable-disable-button::before {
	font-family: FontAwesome;
	content: "\f011";
	}

	.alert-definition-filter-list {
	max-height: 200px;
	overflow-y: scroll;
	}