alerts.less 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388
  1. /**
  2. * Licensed to the Apache Software Foundation (ASF) under one
  3. * or more contributor license agreements. See the NOTICE file
  4. * distributed with this work for additional information
  5. * regarding copyright ownership. The ASF licenses this file
  6. * to you under the Apache License, Version 2.0 (the
  7. * "License"); you may not use this file except in compliance
  8. * with the License. You may obtain a copy of the License at
  9. *
  10. * http://www.apache.org/licenses/LICENSE-2.0
  11. *
  12. * Unless required by applicable law or agreed to in writing, software
  13. * distributed under the License is distributed on an "AS IS" BASIS,
  14. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  15. * See the License for the specific language governing permissions and
  16. * limitations under the License.
  17. */
  18. @import 'common.less';
  19. .alert-state-OK {
  20. color: @health-status-green;
  21. }
  22. .alert-state-WARNING {
  23. color: @health-status-red;
  24. }
  25. .alert-state-CRITICAL {
  26. color: @health-status-red;
  27. }
  28. .alert-state-DISABLED {
  29. color: #000;
  30. }
  31. .alert-state-UNKNOWN {
  32. color: @health-status-yellow;
  33. }
  34. .groups-filter {
  35. .ui-icon-circle-close {
  36. display: none;
  37. }
  38. }
  39. .alerts-table {
  40. margin-top: 10px;
  41. margin-bottom: 10px;
  42. font-size: 13px \9;
  43. .filter-row {
  44. th {
  45. padding: 0px;
  46. padding-left: 4px;
  47. }
  48. }
  49. thead {
  50. background: none repeat scroll 0 0 #F8F8F8;
  51. th {
  52. padding: 8px;
  53. }
  54. }
  55. }
  56. #alert-definitions-table {
  57. a {
  58. &.disabled {
  59. color: #000;
  60. }
  61. }
  62. .col0,
  63. td:first-child,
  64. th:first-child {
  65. width: 30%;
  66. }
  67. .col1,
  68. td:first-child + td,
  69. th:first-child + th {
  70. width: 18%;
  71. .filter-input-width {
  72. width: 80%;
  73. }
  74. }
  75. .col2,
  76. td:first-child + td + td,
  77. th:first-child + th + th {
  78. width: 17%;
  79. .filter-input-width {
  80. width: 80%;
  81. }
  82. }
  83. .col3,
  84. td:first-child + td + td + td,
  85. th:first-child + th + th + th {
  86. width: 20%;
  87. .filter-input-width {
  88. width: 80%;
  89. }
  90. }
  91. .col4,
  92. td:first-child + td + td + td + td,
  93. th:first-child + th + th + th + th {
  94. width: 13%;
  95. .filter-input-width {
  96. width: 80%;
  97. }
  98. }
  99. }
  100. #alert-instances-table {
  101. .col0,
  102. td:first-child,
  103. th:first-child {
  104. width: 10%;
  105. }
  106. .col1,
  107. td:first-child + td,
  108. th:first-child + th {
  109. width: 45%;
  110. }
  111. .col2,
  112. td:first-child + td + td,
  113. th:first-child + th + th {
  114. width: 20%;
  115. }
  116. .col3,
  117. td:first-child + td + td + td,
  118. th:first-child + th + th + th {
  119. width: 10%
  120. }
  121. .col4,
  122. td:first-child + td + td + td + td,
  123. th:first-child + th + th + th + th {
  124. width: 15%;
  125. }
  126. }
  127. #alert-definition-details {
  128. .definition-details-block {
  129. margin-top: 30px;
  130. .multiline-text {
  131. padding-top: 4px;
  132. }
  133. }
  134. hr {
  135. margin: 10px 0 0 0;
  136. }
  137. .edit-description-button:hover {
  138. text-decoration: none;
  139. }
  140. .service-name {
  141. margin-bottom: 30px;
  142. }
  143. .right-column {
  144. text-align: right;
  145. button {
  146. margin-top: 10px;
  147. width: 100%;
  148. }
  149. .properties-list {
  150. margin-top: 50px;
  151. text-align: left;
  152. }
  153. }
  154. .instances-label {
  155. color: #0088cc;
  156. }
  157. .definition-name, .definition-name input {
  158. font-size: 20px;
  159. font-weight: bold;
  160. }
  161. .definition-name input {
  162. width: 99%;
  163. margin-bottom: 0px;
  164. margin-top: -4px;
  165. margin-left: -5px;
  166. }
  167. .edit-buttons {
  168. text-align: right;
  169. margin-bottom: 20px;
  170. }
  171. .text-area-edit {
  172. textarea {
  173. width: 99%;
  174. height: 100px;
  175. margin-left: -5px;
  176. }
  177. }
  178. .edit-link {
  179. cursor: pointer;
  180. }
  181. }
  182. .alert-configs {
  183. margin-top: 20px;
  184. .alert-config-text-area {
  185. height: 100px;
  186. }
  187. .alert-text-input {
  188. input {
  189. width: 98%;
  190. }
  191. }
  192. .alert-interval-input {
  193. input {
  194. width: 20%;
  195. }
  196. }
  197. .alert-port-input {
  198. input {
  199. width: 30%;
  200. }
  201. }
  202. }
  203. #host-alerts-table {
  204. a {
  205. &.disabled {
  206. color: #000;
  207. }
  208. }
  209. .col0,
  210. td:first-child,
  211. th:first-child {
  212. width: 30%;
  213. }
  214. .col1,
  215. td:first-child + td,
  216. th:first-child + th {
  217. width: 10%;
  218. .filter-input-width {
  219. width: 90%;
  220. }
  221. }
  222. .col2,
  223. td:first-child + td + td,
  224. th:first-child + th + th {
  225. width: 20%;
  226. .filter-input-width {
  227. width: 90%;
  228. }
  229. }
  230. .col3,
  231. td:first-child + td + td + td,
  232. th:first-child + th + th + th {
  233. width: 20%
  234. }
  235. .col4,
  236. td:first-child + td + td + td + td,
  237. th:first-child + th + th + th + th {
  238. width: 20%;
  239. }
  240. }
  241. #manage-alert-notifications-error {
  242. margin-bottom: 20px
  243. }
  244. #create-edit-alert-notification {
  245. .form-horizontal {
  246. .controls {
  247. margin-left: 140px;
  248. }
  249. }
  250. label {
  251. width: 115px;
  252. &.checkbox {
  253. width: inherit;
  254. }
  255. }
  256. }
  257. /*****start styles for alerts popup*****/
  258. .alerts-popup {
  259. .modal-body, .modal-footer, .modal-header {
  260. min-width: 600px;
  261. }
  262. #alert-info {
  263. .log-list-wrap:hover {
  264. background-color: #e6e6e6;
  265. }
  266. }
  267. }
  268. .alerts-popup-wrap {
  269. .top-wrap {
  270. width: 100%;
  271. border-bottom: 1px solid #CCC;
  272. text-align: center;
  273. font-size: 15px;
  274. padding: 0 0 20px 0;
  275. height: 20px;
  276. .status-top {
  277. width: 10%;
  278. padding-left: 20px;
  279. }
  280. .name-top {
  281. width: 40%;
  282. padding-left: 110px;
  283. }
  284. .service-top {
  285. width: 15%;
  286. padding-left: 5px;
  287. }
  288. .last-triggered-top {
  289. width: 20%;
  290. padding-left: 5px;
  291. }
  292. .status-top,.name-top,.service-top,.last-triggered-top {
  293. float: left;
  294. text-align: left;
  295. }
  296. .select-wrap {
  297. float: right;
  298. margin-top: -8px;
  299. select {
  300. width: 140px;
  301. }
  302. }
  303. }
  304. #alert-info{
  305. overflow: auto;
  306. max-height: 340px;
  307. width: 100%;
  308. .alert-list-wrap {
  309. padding: 10px 10px 10px 20px;
  310. border-top: 1px solid #CCC;
  311. border-bottom: 1px solid #CCC;
  312. }
  313. .alert-list-line-cursor{
  314. width: 100%;
  315. min-height: 20px;
  316. .status-icon {
  317. padding-left: 5px;
  318. float: left;
  319. width: 10%;
  320. min-width: 30px;
  321. }
  322. .name-text {
  323. padding-left: 10px;
  324. width: 40%;
  325. float: left;
  326. }
  327. .service-text {
  328. padding-left: 5px;
  329. width: 15%;
  330. float: left;
  331. }
  332. .last-triggered-text {
  333. padding-left: 5px;
  334. color: #808080;
  335. font-size: 12px;
  336. }
  337. }
  338. .show-more {
  339. width: 98.8%;
  340. min-height: 20px;
  341. cursor: pointer;
  342. border-top: 1px solid #CCC;
  343. text-align: center;
  344. padding: 10px 10px 10px 0px;
  345. font-size: 16px;
  346. }
  347. }
  348. }
  349. /*****end styles for alert popup*****/