cloud.css 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711
  1. /*
  2. Licensed to the Apache Software Foundation (ASF) under one or more
  3. contributor license agreements. See the NOTICE file distributed with
  4. this work for additional information regarding copyright ownership.
  5. The ASF licenses this file to You under the Apache License, Version 2.0
  6. (the "License"); you may not use this file except in compliance with
  7. the License. You may obtain a copy of the License at
  8. http://www.apache.org/licenses/LICENSE-2.0
  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. #content #cloud
  16. {
  17. position: relative;
  18. }
  19. #content #cloud .loader
  20. {
  21. background-position: 0 50%;
  22. padding-left: 21px;
  23. }
  24. #content #cloud #error
  25. {
  26. background-color: #f00;
  27. background-image: url( ../../img/ico/construction.png );
  28. background-position: 10px 12px;
  29. color: #fff;
  30. font-weight: bold;
  31. margin-bottom: 20px;
  32. padding: 10px;
  33. padding-left: 35px;
  34. }
  35. #content #cloud #error .msg
  36. {
  37. font-style: italic;
  38. font-weight: normal;
  39. margin-top: 10px;
  40. }
  41. #content #cloud #debug
  42. {
  43. background-color: #fff;
  44. box-shadow: 0px 0px 10px #c0c0c0;
  45. -moz-box-shadow: 0px 0px 10px #c0c0c0;
  46. -webkit-box-shadow: 0px 0px 10px #c0c0c0;
  47. padding: 20px;
  48. position: absolute;
  49. left: 50px;
  50. top: 10px;
  51. }
  52. #content #cloud #debug ul
  53. {
  54. margin-bottom: 5px;
  55. }
  56. #content #cloud #debug ul a
  57. {
  58. background-position: 4px 50%;
  59. border-right: 0;
  60. display: block;
  61. padding: 2px 4px;
  62. padding-left: 25px;
  63. }
  64. #content #cloud #debug ul a:hover,
  65. #content #cloud #debug ul a.hover
  66. {
  67. background-color: #f0f0f0;
  68. }
  69. #content #cloud #debug .clipboard
  70. {
  71. float: left;
  72. position: relative;
  73. }
  74. #content #cloud #debug .clipboard a
  75. {
  76. background-image: url( ../../img/ico/clipboard-paste.png );
  77. z-index: 98;
  78. }
  79. #content #cloud #debug .clipboard a:hover,
  80. #content #cloud #debug .clipboard a.hover,
  81. #content #cloud #debug .clipboard.copied a
  82. {
  83. background-image: url( ../../img/ico/clipboard-paste-document-text.png );
  84. }
  85. #content #cloud #debug .close
  86. {
  87. float: right;
  88. }
  89. #content #cloud #debug .close a
  90. {
  91. background-image: url( ../../img/ico/cross-0.png );
  92. padding-left: 21px;
  93. }
  94. #content #cloud #debug .close a:hover
  95. {
  96. background-image: url( ../../img/ico/cross-1.png );
  97. }
  98. #content #cloud #debug .debug
  99. {
  100. border: 1px solid #f0f0f0;
  101. max-height: 350px;
  102. overflow: auto;
  103. padding: 5px;
  104. width: 500px;
  105. }
  106. #content #cloud #debug .debug .loader
  107. {
  108. background-position: 5px 50%;
  109. display: block;
  110. padding: 10px 26px;
  111. }
  112. #content #cloud .content
  113. {
  114. padding-left: 0;
  115. padding-right: 0;
  116. }
  117. #content #cloud .content.show
  118. {
  119. background-image: url( ../../img/div.gif );
  120. background-repeat: repeat-y;
  121. background-position: 31% 0;
  122. }
  123. #content #cloud #tree
  124. {
  125. float: left;
  126. width: 30%;
  127. }
  128. #content #cloud .show #tree
  129. {
  130. overflow: hidden;
  131. }
  132. #content #cloud #file-content
  133. {
  134. float: right;
  135. position: relative;
  136. width: 68%;
  137. min-height: 100px
  138. }
  139. #content #cloud .show #file-content
  140. {
  141. display: block;
  142. }
  143. #content #cloud #file-content .close
  144. {
  145. background-image: url( ../../img/ico/cross-0.png );
  146. background-position: 50% 50%;
  147. display: block;
  148. height: 20px;
  149. position: absolute;
  150. right: 0;
  151. top: 0;
  152. width: 20px;
  153. }
  154. #content #cloud #file-content .close:hover
  155. {
  156. background-image: url( ../../img/ico/cross-1.png );
  157. }
  158. #content #cloud #file-content #toggle.plus
  159. {
  160. font-style: italic;
  161. padding-left: 17px;
  162. background-image: url( ../../img/ico/toggle-small-expand.png );
  163. }
  164. #content #cloud #file-content #toggle.minus
  165. {
  166. font-style: italic;
  167. padding-left: 17px;
  168. background-image: url( ../../img/ico/toggle-small.png );
  169. }
  170. #content #cloud #file-content #data
  171. {
  172. border-top: 1px solid #c0c0c0;
  173. margin-top: 10px;
  174. padding-top: 10px;
  175. }
  176. #content #cloud #file-content #data pre
  177. {
  178. display: block;
  179. max-height: 600px;
  180. overflow: auto;
  181. }
  182. #content #cloud #file-content #data em
  183. {
  184. color: #4d4d4d;
  185. }
  186. #content #cloud #file-content #prop
  187. {
  188. }
  189. #content #cloud #file-content li
  190. {
  191. padding-top: 3px;
  192. padding-bottom: 3px;
  193. }
  194. #content #cloud #file-content li.odd
  195. {
  196. background-color: #F8F8F8;
  197. }
  198. #content #cloud #file-content li dt
  199. {
  200. float: left;
  201. width: 19%;
  202. }
  203. #content #cloud #file-content li dd
  204. {
  205. float: right;
  206. width: 80%;
  207. }
  208. /* tree */
  209. #content #cloud #legend
  210. {
  211. border: 1px solid #f0f0f0;
  212. padding: 10px;
  213. position: absolute;
  214. right: 0;
  215. bottom: 0;
  216. }
  217. #content #cloud #legend li
  218. {
  219. padding-left: 15px;
  220. position: relative;
  221. }
  222. #content #cloud #legend li svg
  223. {
  224. position: absolute;
  225. left: 0;
  226. top: 2px;
  227. }
  228. #content #graph-content
  229. {
  230. min-height: 400px;
  231. }
  232. #content #graph-content .node
  233. {
  234. fill: #333;
  235. }
  236. #content #cloud #legend circle,
  237. #content #graph-content .node circle
  238. {
  239. fill: #fff;
  240. stroke: #c0c0c0;
  241. stroke-width: 1.5px;
  242. }
  243. #content #graph-content .node.lvl-3 text
  244. {
  245. cursor: pointer;
  246. }
  247. #content #graph-content .node.lvl-3:hover circle
  248. {
  249. stroke: #000 !important;
  250. }
  251. #content #graph-content .node.lvl-3:hover text
  252. {
  253. fill: #000 !important;
  254. }
  255. #content #graph-content .link
  256. {
  257. fill: none;
  258. stroke: #e0e0e0;
  259. stroke-width: 1.5px;
  260. }
  261. #content #cloud #legend .gone circle,
  262. #content #graph-content .node.gone circle,
  263. #content #graph-content .link.gone
  264. {
  265. stroke: #f0f0f0;
  266. }
  267. #content #graph-content .node.gone text
  268. {
  269. fill: #f0f0f0;
  270. }
  271. #content #cloud #legend ul .gone
  272. {
  273. color: #e0e0e0;
  274. }
  275. #content #cloud #legend .recovery_failed,
  276. #content #cloud #legend .recovery_failed circle,
  277. #content #graph-content .node.recovery_failed circle
  278. {
  279. color: #C43C35;
  280. stroke: #C43C35;
  281. font-style: italic;
  282. }
  283. #content #graph-content .node.recovery_failed text
  284. {
  285. fill: #C43C35;
  286. font-style: italic;
  287. }
  288. #content #cloud #legend .down,
  289. #content #cloud #legend .down circle,
  290. #content #graph-content .node.down circle
  291. {
  292. color: #c48f00;
  293. stroke: #c48f00;
  294. }
  295. #content #graph-content .node.down text
  296. {
  297. fill: #c48f00;
  298. }
  299. #content #cloud #legend .recovering,
  300. #content #cloud #legend .recovering circle,
  301. #content #graph-content .node.recovering circle
  302. {
  303. color: #d5dd00;
  304. stroke: #d5dd00;
  305. font-style: italic;
  306. }
  307. #content #graph-content .node.recovering text
  308. {
  309. fill: #d5dd00;
  310. font-style: italic;
  311. }
  312. #content #cloud #legend .active,
  313. #content #cloud #legend .active circle,
  314. #content #graph-content .node.active circle
  315. {
  316. color: #57A957;
  317. stroke: #57A957;
  318. }
  319. #content #graph-content .node.active text
  320. {
  321. fill: #57A957;
  322. }
  323. #content #cloud #legend .leader circle,
  324. #content #graph-content .node.leader circle
  325. {
  326. fill: #000;
  327. }
  328. #content #cloud #legend .leader circle
  329. {
  330. stroke: #fff;
  331. }
  332. #content #graph-content .link.lvl-2,
  333. #content #graph-content .link.leader
  334. {
  335. stroke: #c0c0c0;
  336. }
  337. #content #cloud #legend .leader,
  338. #content #graph-content .leader text
  339. {
  340. font-weight: bold;
  341. }
  342. #content #graph-content .node.lvl-0 circle
  343. {
  344. stroke: #fff;
  345. }
  346. #content #graph-content .link.lvl-1
  347. {
  348. stroke: #fff;
  349. }
  350. #cloudGraphPaging
  351. {
  352. display: inline-block;
  353. padding-top: 15px;
  354. padding-bottom: 15px;
  355. }
  356. #nodesPaging
  357. {
  358. padding-top: 5px;
  359. padding-bottom: 5px;
  360. }
  361. #content #cloud #legend .shard-inactive,
  362. #content #cloud #legend .shard-inactive li,
  363. #content #cloud #legend .shard-inactive li text,
  364. #content #graph-content .shard-inactive text
  365. {
  366. text-decoration: line-through;
  367. }
  368. #content #cloud #legend .shard-inactive circle,
  369. #content #graph-content .shard-inactive circle,
  370. #content #graph-content .link.shard-inactive
  371. {
  372. stroke: #e9e9e9;
  373. }
  374. #content #cloud #legend .replicatype,
  375. #content #cloud #legend .replicatype rect,
  376. #content #graph-content .node.replicatype rect
  377. {
  378. color: #007BA7;
  379. stroke: #007BA7;
  380. fill:rgb(0,123,167);
  381. }
  382. #content #graph-content .node.replicatype text
  383. {
  384. fill: #007BA7;
  385. }
  386. /* Nodes tab */
  387. #nodes-table {
  388. border-collapse: collapse;
  389. }
  390. #nodes-table td, #nodes-table th {
  391. border: 1px solid #ddd;
  392. padding: 8px;
  393. vertical-align: top;
  394. }
  395. #nodes-table th {
  396. font-weight: bolder;
  397. font-stretch: extra-expanded;
  398. background: #F8F8F8;
  399. }
  400. #content #cloud #nodes-content #nodes-table
  401. {
  402. border-top: 1px solid #c0c0c0;
  403. margin-top: 10px;
  404. padding-top: 10px;
  405. }
  406. #content #cloud #nodes-content .host-name,
  407. #content #cloud #nodes-content .node-name a
  408. {
  409. font-weight: bold;
  410. font-size: larger;
  411. }
  412. #content #cloud #nodes-content a,
  413. #content #cloud #nodes-content a:hover,
  414. #content #cloud #nodes-content a.hover
  415. {
  416. text-decoration: underline;
  417. text-decoration-style: dotted;
  418. text-decoration-color: #beebff;
  419. }
  420. #content #cloud #nodes-content a:hover,
  421. #content #cloud #nodes-content a.hover
  422. {
  423. background-color: #beebff;
  424. }
  425. #content #cloud #nodes-content .host-spec,
  426. #content #cloud #nodes-content .node-spec,
  427. #content #cloud #nodes-content .node-spec a
  428. {
  429. font-style: italic;
  430. }
  431. #content #cloud #nodes-content .node-uptime
  432. {
  433. font-weight: bolder;
  434. font-size: 20px;
  435. }
  436. #content #cloud #nodes-content .node-load,
  437. #content #cloud #nodes-content .node-cpu,
  438. #content #cloud #nodes-content .node-heap,
  439. #content #cloud #nodes-content .node-disk
  440. {
  441. font-weight: bolder;
  442. font-size: 20px;
  443. }
  444. #content #cloud #nodes-content .pct-normal
  445. {
  446. color: darkgreen;
  447. }
  448. #content #cloud #nodes-content .pct-warn
  449. {
  450. color: orange;
  451. }
  452. #content #cloud #nodes-content .pct-critical
  453. {
  454. color: red;
  455. }
  456. /* Styling of reload and details buttons */
  457. #content #cloud #controls,
  458. #content #cloud #frame #zk-status-content #zk-controls
  459. {
  460. display: block;
  461. height: 30px;
  462. }
  463. #content #cloud .reload
  464. {
  465. background-image: url( ../../img/ico/arrow-circle.png );
  466. padding-left: 21px;
  467. float: left;
  468. }
  469. #content #cloud .reload.loader
  470. {
  471. padding-left: 0;
  472. }
  473. #content #cloud .details-button
  474. {
  475. background-image: url(../../img/ico/ui-check-box-uncheck.png);
  476. background-position: 0 50%;
  477. color: #8D8D8D;
  478. margin-top: 7px;
  479. margin-left: 10px;
  480. padding-left: 21px;
  481. width: 30px;
  482. }
  483. #content #cloud .details-button.on
  484. {
  485. background-image: url( ../../img/ico/ui-check-box.png );
  486. color: #333;
  487. }
  488. #content #cloud #nodes-content .more
  489. {
  490. font-style: italic;
  491. text-underline: #0000fa;
  492. }
  493. /* Disk usage details d3 chart bars style */
  494. .chart {
  495. background: #eee;
  496. padding: 1px;
  497. }
  498. .chart div {
  499. width:90%;
  500. }
  501. .chart div div {
  502. display:inline-block;
  503. }
  504. .chart div div.rect {
  505. transition: all 0.5s ease-out;
  506. -moz-transition: all 0.5s ease-out;
  507. -webkit-transition: all 0.5s ease-out;
  508. width:0;
  509. font: 10px sans-serif;
  510. background-color: #4CAF50;
  511. text-align: left;
  512. padding: 3px;
  513. margin: 2px;
  514. color: #000000;
  515. box-shadow: 1px 1px 1px #666;
  516. }
  517. #content #nodes-content .leader
  518. {
  519. font-weight: bold;
  520. }
  521. #content #nodes-content .scroll-height-250
  522. {
  523. max-height: 250px;
  524. overflow-scrolling: auto;
  525. overflow: auto;
  526. /*overflow-y: auto;*/
  527. }
  528. #content #nodes-content .min-width-150
  529. {
  530. min-width: 150px;
  531. }
  532. #content #cloud #nodes-content .node-cores
  533. {
  534. min-width: 150px;
  535. }
  536. #content #nodes-content .core-details
  537. {
  538. padding-left: 21px;
  539. }
  540. ::-webkit-scrollbar {
  541. -webkit-appearance: none;
  542. width: 7px;
  543. }
  544. ::-webkit-scrollbar-thumb {
  545. border-radius: 4px;
  546. background-color: rgba(0,0,0,.5);
  547. -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
  548. }
  549. #content #cloud #zk-table td,
  550. #content #cloud #zk-table th
  551. {
  552. border: 0px solid #ddd;
  553. border-bottom: 0.50px solid #eee;
  554. padding-right: 5px;
  555. padding-left: 5px;
  556. }
  557. #content #cloud #zk-table th
  558. {
  559. border-bottom: 1px solid #ddd;
  560. border-top: 1px solid #ddd;
  561. font-weight: bolder;
  562. font-stretch: extra-expanded;
  563. background: #F8F8F8;
  564. }
  565. #content #cloud #zk-table
  566. {
  567. border-top: 1px solid #c0c0c0;
  568. margin-top: 10px;
  569. border-collapse: collapse;
  570. font-weight: bold;
  571. }
  572. #content #cloud #zk-table #detail-divider
  573. {
  574. background-color: #f8f8f8;
  575. height: 10px;
  576. }
  577. .zookeeper-status
  578. {
  579. font-size: large;
  580. }
  581. .zookeeper-errors
  582. {
  583. background-color: lightpink;
  584. padding: 10px;
  585. border: 1px;
  586. margin-top: 10px;
  587. margin-bottom: 10px;
  588. }
  589. .zookeeper-errors li::before
  590. {
  591. content: "- ";
  592. }
  593. .zkstatus-green
  594. {
  595. color: darkgreen;
  596. }
  597. .zkstatus-yellow
  598. {
  599. color: orange;
  600. }
  601. .zkstatus-red
  602. {
  603. color: red;
  604. }