From 3e02d5aff85babc3ffbfcf52313f2108e313aa23 Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Sat, 13 Apr 2024 13:46:43 +0200 Subject: Adding upstream version 2.12.1. Signed-off-by: Daniel Baumann --- modules/monitoring/public/css/event-grid.less | 9 + modules/monitoring/public/css/module.less | 1922 +++++++++++++++++++++++ modules/monitoring/public/css/service-grid.less | 75 + modules/monitoring/public/css/tables.less | 282 ++++ modules/monitoring/public/js/module.js | 84 + 5 files changed, 2372 insertions(+) create mode 100644 modules/monitoring/public/css/event-grid.less create mode 100644 modules/monitoring/public/css/module.less create mode 100644 modules/monitoring/public/css/service-grid.less create mode 100644 modules/monitoring/public/css/tables.less create mode 100644 modules/monitoring/public/js/module.js (limited to 'modules/monitoring/public') diff --git a/modules/monitoring/public/css/event-grid.less b/modules/monitoring/public/css/event-grid.less new file mode 100644 index 0000000..45c4188 --- /dev/null +++ b/modules/monitoring/public/css/event-grid.less @@ -0,0 +1,9 @@ +.event-grid { + width: 33.5em; + + .vertical { + display: inline-block; + vertical-align: top; + margin: 0.5em; + } +} diff --git a/modules/monitoring/public/css/module.less b/modules/monitoring/public/css/module.less new file mode 100644 index 0000000..5755f1f --- /dev/null +++ b/modules/monitoring/public/css/module.less @@ -0,0 +1,1922 @@ +/*! Icinga Web 2 | (c) 2014 Icinga Development Team | GPLv2+ */ + +.monitoring-statusbar { + position: relative; + background-color: @body-bg-color; + border-top: 1px solid @gray-lighter; + padding: .25em @gutter; + line-height: 1.3; + + .services-summary, + .hosts-summary { + float: right; + margin-bottom: 0; + } + + .selection-info { + float: left; + margin-top: 0.182em; + } +} + +// Hostgroup- and servicegroup-grid styles + +.grid-toggle-link { + display: inline-block; + margin-left: 1em; + text-decoration: none; + vertical-align: middle; + + > i { + font-size: 1.25em; + + &.-active { + color: @icinga-blue; + } + + &.-inactive { + color: @gray-light; + } + } +} + +.group-grid { + display: grid; + grid-gap: 1em 3em; + grid-template-columns: repeat(auto-fit, 14em); + + .group-grid-cell > a:last-child { + display: inline-block; + max-width: 10em; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + text-align: center; + vertical-align: middle; + } + + .group-grid-cell > a:first-child, + .group-grid-cell > div.state-none { + .bg-stateful(); + .rounded-corners(); + + display: inline-block; + margin-right: 1em; + padding: .5em; + height: 2.5em; + width: 2.5em; + text-align: center; + vertical-align: middle; + color: white; + } + .group-grid-cell > div.state-none { + background-color: @gray-light; + } +} + +// Styles for the icon displayed if a check result is late +.check-result-late { + &:before { + // Remove right margin because the check now form may be displayed right next to the icon and we already have a gap + // because of inline-blocks + margin-right: 0; + } +} + +// Show more and load more links in overviews +.action-links { + text-align: right; +} + +.actions .nav { + li > a, + li > span { + display: inline-block; + } +} + +// State summary badges +.state-badges { + display: inline-block; + vertical-align: middle; + + > ul > li { + padding-right: @vertical-padding; + + &:last-child { + padding-right: 0; + } + } + + .state-badge-group li { + margin-right: 1px; + } + + .state-badge-group li:last-child { + margin-right: 0; + } + + .state-badge-group .badge { + border-radius: 0; + } + + .state-badge-group li:first-child > .badge { + border-top-left-radius: 0.4em; + border-bottom-left-radius: 0.4em; + } + + .state-badge-group li:last-child > .badge { + border-top-right-radius: 0.4em; + border-bottom-right-radius: 0.4em; + } +} + +// Performance data pie charts +.inline-pie { + display: inline-block; + height: 14/12em; + margin-right: 0.1em; + position: relative; + top: 0.1em; + width: 14/12em; +} + +// Host and service summaries in detail and list views +.hosts-summary, +.services-summary { + display: inline-block; + margin-bottom: 0.5em; + + > .hosts-link, + > .services-link, + > .state-badges { + vertical-align: middle; + } +} + +.service-on { + color: @text-color-light; + + > a { + color: @text-color; + letter-spacing: normal; + font-weight: bold; + } +} + +// State table in the host and service multi-selection and detail views +.host-detail-state, +.service-detail-state { + margin-bottom: 0.5em; +} + +.grid { + .hosts-summary, + .services-summary { + float: left; + } +} + +// Quick actions +.quick-actions { + margin: 0 -.5em; + + &:last-child { + margin-bottom: -.25em; + } + + li { + color: @icinga-blue; + } + + a, + button { + .rounded-corners(); + padding: .25em .5em; + + &:hover { + background-color: @gray-lighter; + text-decoration: none; + } + } +} + +/* Generic box element */ + +.boxview > div.box { + text-align: center; + vertical-align: top; + display: inline-block; + padding: 20px; +} + + + +/* Box body of contents */ + +.boxview div.box.contents { + padding-top: 20px; +} + +.boxview div.box.contents table { + width: 100%; +} + +.boxview div.box.contents td { + vertical-align: top; +} + +/* Box entry */ + +/* Any line of a box entry */ +.boxview div.box.entry a { + display: block; +} + +.boxview div.box.badge { + padding: 5px; +} + + +/* First line of a box entry */ +.boxview div.box.entry a:first-child { +} + +/* End of generic box element */ + +/* Tactical overview element styles */ + +.tactical > .boxview > div.box { + min-height: 45em; + padding: 0px; +} + +.tactical div.box.header { + margin: 10px; + min-height: 8em; + color: @text-color-inverted; + font-size: @font-size-dashboard; +} + +.tactical div.box.badge { + border-radius: 0.0em; +} + +div.box.ok_hosts.state_up { + background-color: @color-ok; + border: 1px solid white; +} + +div.box.problem_hosts.state_down { + background-color: @color-critical; + border: 1px solid white; +} + +div.box.ok_hosts div.box.entry, div.box.problem_hosts div.box.entry { + min-width: 8em; + min-height: 4em; +} + +.tactical div.box.contents { + background-color: white; + min-height: 13em; + font-size: @font-size-dashboard-small; + text-align: left; +} + +div.box.monitoringfeatures { + border: 1px solid @gray-lighter; + border-left: 15px @gray; +} + +div.box.monitoringfeatures div.box-separator { + color: white; + background-color: @color-ok; +} + +div.box.monitoringfeatures div.feature-highlight { + background-color: @color-critical; +} + +div.box.monitoringfeatures a.feature-highlight { +} + +div.box.hostservicechecks { + border: 1px solid @gray-lighter; + border-left: 15px @gray; +} + +div.box.hostservicechecks th { + padding-bottom: 20px; +} + +/* Monitoring health - PROCESS - element styles */ + +div.box.process { + width: 100%; + max-width: 50em; + border: 1px solid @gray-lighter; + border-left: 15px @gray; + margin-bottom: 1em; + margin-right: 1em; +} + +.process div.box.header { + min-height: 5em; + border-bottom: 1px solid @gray-lighter; +} + +.process > .boxview > div.box { + min-height: 30em; +} + +.process h2 { + margin-top: 0; + margin-bottom: 1em; + padding-bottom: 1em; + border-bottom: 1px solid @gray-lighter; +} + +.process th { + width: 50%; + text-align: right; +} + +.process td { + width: 50%; + padding-left: 2em; + text-align: left; +} + +div.backend-running { + background: @color-ok; + color: white; + text-align: center; + margin-top: 1em; + padding: 0.5em; + + &.span { + color: white; + } +} + +div.backend-not-running { + background: @color-critical; + color: white; + text-align: center; + padding: 0.1em; +} + + +/* Monitoring health - FEATURE - element styles */ + +div.box.features { + width: 100%; + max-width: 50em; + border: 1px solid @gray-lighter; + border-left: 15px @gray; +} + +.features div.box.header { + min-height: 5em; + border-bottom: 1px solid @gray-lighter; +} + +.features > .boxview > div.box { + min-height: 30em; +} + +.features h2 { + margin-top: 0; + margin-bottom: 1em; + padding-bottom: 1em; + border-bottom: 1px solid @gray-lighter; +} + + +/* Monitoring health - STATS - element styles */ + +div.box.stats { + width: 100%; + max-width: 50em; + border: 1px solid @gray-lighter; + border-left: 15px @gray; + color: @text-color; +} + +.stats > .boxview > div.box { + min-height: 30em; +} + +.stats > .name-value-table { + table-layout: fixed; + text-align: left; +} + +.stats > table > thead { + color: @gray; +} + +.stats > h2 { + text-align: left; + border-bottom: 1px solid @gray-lighter; + + > .hosts-summary, + > .services-summary { + width: 100%; + > .state-badges { + float: right; + } + } +} + +.tinystatesummary .badge { + font-weight: normal; +} + +/* Monitoring timeline styles */ + +div.timeline-legend { + padding: 0.5em; + margin-top: 2em; + border: 1px solid @gray-lighter; + border-left-width: 15px; + + h2 { + margin: 0; + margin-left: 0.5em; + line-height: 1.1em; + } + + & > span { + display: inline-block; + padding: 0.5em; + margin: 0.5em; + + span { + white-space: nowrap; + min-width: 25px; + font-family: tahoma, verdana, sans-serif; + font-weight: @font-weight-bold; + font-size: 11px; + text-align: center; + color: @text-color-inverted; + padding-left: 5px; + padding-right: 5px; + padding-top: 2px; + padding-bottom: 2px; + } + } +} + +div.timeline { + div.timeframe { + height: 7em; + margin-bottom: 1em; + clear: left; + + span { + width: 8em; + margin-top: 2.3em; + margin-right: 1.5em; + display: block; + float: left; + text-align: center; + + a { + font-weight: bold; + white-space: nowrap; + } + } + + div.circle-box { + // width: inline-style; + height: 100%; + margin-right: 0.5em; + position: relative; + float: left; + + div.outer-circle { + // width: inline-style; + // height: inline-style; + position: absolute; + top: 50%; + // margin-top: inline-style; + + &.extrapolated { + border-width: 2px; + border-style: dotted; + //border-color: inline-style; + border-radius: 100%; + // background-color: inline-style; + } + + a.inner-circle { + // width: inline-style; + // height: inline-style; + display: block; + position: absolute; + top: 50%; + left: 50%; + // margin-top: inline-style; + // margin-left: inline-style; + border-radius: 100%; + // background-color: inline-style; + } + } + } + } + + hr { + border: 0; + height: 1px; + background-image: linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.3), rgba(0,0,0,0)); + background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.3), rgba(0,0,0,0)); + background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.3), rgba(0,0,0,0)); + background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.3), rgba(0,0,0,0)); + background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.3), rgba(0,0,0,0)); + } +} + +@timeline-notification-color: #3a71ea; +@timeline-hard-state-color: #ff7000; +@timeline-comment-color: #79bdba; +@timeline-ack-color: #a2721d; +@timeline-downtime-start-color: #8e8e8e; +@timeline-downtime-end-color: #d5d6ad; + +.timeline-notification { + background-color: @timeline-notification-color; + + &.extrapolated { + background-color: lighten(@timeline-notification-color, 20%); + } +} + +.timeline-hard-state { + background-color: @timeline-hard-state-color; + + &.extrapolated { + background-color: lighten(@timeline-hard-state-color, 20%); + } +} + +.timeline-comment { + background-color: @timeline-comment-color; + + &.extrapolated { + background-color: lighten(@timeline-comment-color, 20%); + } +} + +.timeline-ack { + background-color: @timeline-ack-color; + + &.extrapolated { + background-color: lighten(@timeline-ack-color, 20%); + } +} + +.timeline-downtime-start { + background-color: @timeline-downtime-start-color; + + &.extrapolated { + background-color: lighten(@timeline-downtime-start-color, 20%); + } +} + +.timeline-downtime-end { + background-color: @timeline-downtime-end-color; + + &.extrapolated { + background-color: lighten(@timeline-downtime-end-color, 20%); + } +} + +/* End of monitoring timeline styles */ + +/* Object features */ + +form.instance-features span.description, form.object-features span.description { + text-align: left; +} + +.object-features { + .control-label-group { + text-align: left; + margin-right: 0; + width: @name-value-table-name-width; + color: @text-color-light; + + label { + font-size: inherit; + } + } + + .control-group { + margin-top: 0; + margin-bottom: 0; + + &.indeterminate { + justify-content: flex-start; + + .control-label-group { + flex: 0 1 auto; + } + + select { + width: auto; + flex: 0 1 auto; + + & + span.hint { + flex: 0 1 auto; + } + } + } + } + + .toggle-switch { + margin-left: @table-column-padding; + } + + select { + margin-right: .5em; + margin-left: @table-column-padding; + + & + span.hint { + margin: .35em; + color: @gray-light; + font-style: italic; + } + } +} + +.plugin-output { + border-left: 5px solid @gray-lighter; + padding: 0.66em 0.33em; + .output-table { + font-size: 0.75em; + } + + .state-critical { + background-color: @color-critical; + color: @body-bg-color; + padding: 0.2em; + } + + .state-ok { + background-color: @color-ok; + color: @body-bg-color; + padding: 0.2em; + } + + .state-unknown { + background-color: @color-unknown; + color: @body-bg-color; + padding: 0.2em; + } + + .state-warning { + background-color: @color-warning; + color: @body-bg-color; + padding: 0.2em; + } + + .state-down { + background-color: @color-down; + color: @body-bg-color; + padding: 0.2em; + } + + .state-up { + background-color: @color-up; + color: @body-bg-color; + padding: 0.2em; + } +} + +.go-ahead, +.markdown, +.plugin-output { + a { + border-bottom: 1px dotted @gray-light; + + &:hover { + border-bottom: 1px solid @text-color; + text-decoration: none; + } + } +} + +.event-details { + .badge { + font-size: 0.6em; + margin-right: 0.5em; + } + + .state-label { + vertical-align: middle; + } +} + +/* Object customvars */ +.custom-var-table { + .level-1 th { + padding-left: .5em; + } + + .level-2 th { + padding-left: 1em; + } + + .level-3 th { + padding-left: 1.5em; + } + + .level-4 th { + padding-left: 2em; + } + + .level-5 th { + padding-left: 2.5em; + } + + .level-6 th { + padding-left: 3em; + } + + .empty { + color: @gray-semilight; + } + + thead th { + padding-left: 0; + text-align: left; + font-weight: bold; + font-size: 1.167em; + + > span { + :nth-child(1), + :nth-child(2) { + display: none; + } + } + } + + &[data-can-collapse] thead th > span { + :nth-child(1) { + display: none; + } + + :nth-child(2) { + display: inline-block; + } + } + + &.collapsed thead th > span { + :nth-child(1) { + display: inline-block; + } + + :nth-child(2) { + display: none; + } + } +} + +//p.pluginoutput { +// width: 100%; +// white-space: pre-wrap; +// font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', 'DejaVu Sans Mono', 'Courier New', Courier, monospace; +//} +// +//table.action td .pluginoutput { +// font-size: 0.875em; +// line-height: 1.2em; +// padding: 0; +// margin: 0; +//} +// +//div.pluginoutput { +// overflow: auto; +// color: #888; +// margin-bottom: 1em; +// padding: 0.2em; +//} +// +//div.pluginoutput pre { +// white-space: pre-wrap; +// border-left: 4px solid #d8d8d8; +// padding: 0.3em 0 0.3em 1em; +// font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', 'DejaVu Sans Mono', 'Courier New', Courier, monospace; +//} +// +//table.objectstate td.state { +// padding-top: 0.5em; +// padding-bottom: 0.5em; +//} +// +//div.contacts div.contact { +// background-color: #eee; +// padding: 0.5em; +// border: 1px solid #d9d9d9; +// overflow: hidden; +// margin: 0.125em; +// float: left; +//} +// +//div.contacts div.contact a{ +// color: @colorTextDefault; +//} +// +//div.contacts div.contact > img { +// width: 80px; +// height: 80px; +// margin-right: 8px; +// float: left; +//} +// +//div.contacts div.notification-periods { +// margin-top: 0.5em; +//} +// +//.tinystatesummary { +// .badges { +// display: inline-block; +// margin-bottom: 4px; +// margin-left: 1em; +// height: auto; +// } +// +// .state > a { +// color: white; +// font-size: 0.857em; +// padding: 2px 5px; +// } +//} +// +///* State badges */ +//span.state { +// font-weight: bold; +// color: white; +// font-weight: bold; +// padding: 2px 3px; +// margin-right: 5px; +//} +// +//span.state.active { +// border: 2px solid #555; +// padding: 2px 4px; +// margin-right: 4px; +//} +// +//span.state span.state { +// margin: 0 -6px 0 5px; +//} +// +//span.state.ok { +// background: @colorOk; +//} +// +//span.state.up { +// background: @colorOk; +//} +// +//span.state.critical { +// background: @colorCritical; +//} +// +//span.state.down { +// background: @colorCritical; +//} +// +//span.state.handled.critical { +// background: @colorCriticalHandled; +//} +// +//span.state.handled.down { +// background: @colorCriticalHandled; +//} +// +//span.state.warning { +// background: @colorWarning; +//} +// +//span.state.handled.warning { +// background: @colorWarningHandled; +//} +// +//span.state.unknown { +// background: @colorUnknown; +//} +// +//span.state.handled.unknown { +// background: @colorUnknownHandled; +//} +// +//span.state.pending { +// background: @colorPending; +//} +// +//form.instance-features span.description, form.object-features span.description { +// display: inline; +//} +// +//.boxview div.box form.instance-features div.header { +// border-bottom: 1px solid #d9d9d9; +// margin-bottom: 0.5em; +// +// h2 { +// border: 0; +// padding-bottom: 0; +// } +//} +// +//table.avp form.object-features div.header h4 { +// margin: 0; +//} +// +//table.avp { +// th { +// font-weight: normal; +// font-size: 0.875em; +// padding-top: 0.25em; +// } +// +// h2 { +// font-size: 0.875em; +// line-height: 1.2em; +// padding-bottom: 0.1em; +// } +// +// td { +// color: #666; +// padding-bottom: 0.3em; +// line-height: 1.5em; +// th, td { +// padding: 0; +// } +// } +// +// .badge a[href] { +// color: @colorGray; +// } +// +// .go-ahead { +// a, button.link-like { +// color: #222; +// } +// } +// +// .object-features { +// label { +// font-weight: normal; +// margin-right: 0; +// width: 14em; +// font-size: 0.875em; +// } +// +// input { +// margin: 0; +// } +// } +//} +// +//table.avp .customvar ul { +// list-style-type: none; +// margin: 0; +// padding: 0; +// padding-left: 1.5em; +//} +// +//div.selection-info { +// padding-top: 0.4em; +// float: right; +// cursor: help; +// font-size: 0.857em; +//} +// +//.optionbox { +// margin-left: 0em; +// margin-right: 3em; +//} +// +//.optionbox label { +// max-width: 6.5em; +// text-align: left; +// vertgical-align: middle; +// margin-right: 0em; +//} +// +//.optionbox input { +// vertical-align: middle; +//} +// +//.object-command form h1, .objects-command form h1 { +// border: none; +//} +// +//hr.command-separator { +// border: none; +// border-bottom: 2px solid @colorPetrol; +//} +// +//div.backend-not-running { +// background: @colorCritical; +// color: white; +// text-align: center; +// padding: 0.1em; +//} +// +//td.state { +// .time-ago, +// .time-since, +// .time-until { +// text-transform: capitalize; +// } +//} +// +//.inline-comments { +// padding: 0; +// margin: 0; +// font-size: 0.857em; +// +// .time-ago { +// font-style: italic; +// color: #919191; +// } +// +// li { +// list-style-type: none; +// margin-bottom: 8px; +// } +// +// h3 { +// border: none; +// border-bottom: 1px solid gray; +// font-weight: normal; +// font-size: inherit; +// color: inherit; +// margin: 0; +// padding-bottom: 0.1em; +// } +// +// h3 .author { +// font-weight: bold; +// } +// +// h3 form { +// display: none; +// } +// +// h3 form { +// float: right; +// } +// +// li:hover h3 { +// background: #F9F9F9; +// position: relative; +// +// form { +// display: inline; +// } +// } +// +// p { +// margin: 0; +// +// a { +// color: #222; +// } +// } +//} +// +///* Special tables and states */ +// +//table.colors { +// font-size: 0.8em; +// width: 98%; +// margin: 0 1%; +//} +// +//table.colors td { +// text-align: center; +// vertical-align: middle; +// width: 10%; +// height: 1.6em; +// font-weight: normal; +// border: 0.079em solid white; +//} +// +//table.action td.state, table.objectstate td.state { +// font-size: 0.857em; +// text-align: center; +//} +// +// +///* State row behaviour */ +// +//tr.state img.icon { +// margin-right: 2px; +//} +// +///* Hostgroup badge quickfix */ +//tr.state span a { +// color: white; +// font-size: 0.857em; +// padding: 2px 5px; +//} +// +//tr.state:hover a { +// color: inherit; +//} +// +//tr.state a.active { +//} +// +//tr.state.new td.state { +// font-weight: bold; +//} +// +//tr.state td.state { +// width: 9em; +// color: white; +// border-bottom: none; +//} +// +//tr.state.handled td.state, tr.state.ok td.state, tr.state.up td.state, tr.state.pending td.state { +// border-left-style: solid; +// border-left-width: 1.5em; +// padding-left: 0em; +// padding-right: 0.5em; +// color: black; +// background-color: transparent; +//} +// +//tr.state.ok td.state, tr.state.up td.state { +// border-left-color: @colorOk; +//} +// +//tr.state.warning td.state { +// background-color: @colorWarning; +//} +// +//tr.state.warning.handled td.state { +// border-left-color: @colorWarningHandled; +//} +// +//tr.state.critical td.state, tr.state.down td.state { +// background-color: @colorCritical; +//} +// +//tr.state.critical.handled td.state, tr.state.down.handled td.state { +// border-left-color: @colorCriticalHandled; +//} +// +//tr.state.unreachable td.state { +// background-color: @colorUnreachable; +//} +// +//tr.state.unreachable.handled td.state { +// border-left-color: @colorUnreachableHandled; +//} +// +//tr.state.unknown td.state { +// background-color: @colorUnknown; +//} +// +//tr.state.unknown.handled td.state { +// border-left-color: @colorUnknownHandled; +//} +// +//tr.state.pending td.state { +// border-left-color: @colorPending; +//} +// +//tr.state.invalid td.state { +// background-color: @colorInvalid; +//} +// +//tr.state.unreachable td.state { +// background-color: @colorUnreachable; +//} +// +//tr.state.unreachable.handled td.state { +// border-left-color: @colorUnreachableHandled; +//} +// +//tr.state.handled td.state { +// color: inherit; +// background-color: transparent !important; +//} +// +///* HOVER colors */ +// +//tr.state[href]:hover td.state { +// background-color: #eee; +//} +// +//tr.state.ok[href]:hover, tr.state.up[href]:hover { +// background-color: @colorOk; +//} +// +//tr.state.handled[href]:hover, tr.state.handled[href]:hover td.state { +// color: #121212 !important; +//} +// +//tr.state.warning[href]:hover { +// background-color: @colorWarning; +// color: white; +//} +// +//tr.state.warning.handled[href]:hover { +// background-color: @colorWarningHandled; +//} +// +//tr.state.critical[href]:hover, tr.state.down[href]:hover { +// background-color: @colorCritical; +// color: white; +//} +// +//tr.state.critical.handled[href]:hover, tr.state.down.handled[href]:hover { +// background-color: @colorCriticalHandled; +// color: #333; +//} +// +//tr.state.unknown[href]:hover { +// background-color: @colorUnknown; +// color: white; +//} +// +//tr.state.unknown.handled[href]:hover { +// background-color: @colorUnknownHandled; +//} +// +//tr.state.pending[href]:hover { +// background-color: @colorPending; +//} +// +//tr.state.invalid[href]:hover { +// background-color: @colorInvalid; +// color: white; +//} +// +//tr.state.unreachable[href]:hover { +// background-color: @colorUnreachable; +//} +// +//tr.state.unreachable.handled[href]:hover { +// background-color: @colorUnreachableHandled; +//} +// +//tr.state[href]:hover td.state { +// background-color: inherit !important; +//} +// +///* END of HOVER colors */ +// +///* END of special tables and states */ +// +// +///* Generic colors */ +// +//a.critical { +// color: @colorCritical; +//} +// +///* END of Generic colors */ +// +// +///* Generic box element */ +// +//.boxview a { +// text-decoration: none; +//} +// +//.boxview > div.box { +// text-align: center; +// vertical-align: top; +// display: inline-block; +// padding: 0.4em; +// margin: 0.4em; +// border: 1px solid #d9d9d9; +// background: #eee; +//} +// +///* Box header */ +//.boxview div.box.header { +// padding-bottom: 0.5em; +// margin-bottom: 0.5em; +// border-bottom: 1px solid #888; +//} +// +//.boxview div.box.header h2 { +// margin-top: 0.1em; +// margin-bottom: 0; +// font-size: 0.8em; +// border-bottom: none; +// color: @colorTextDefault; +//} +// +//.boxview div.box.header h2:first-child { +// margin-top: 0.2em; +// font-size: inherit; +// color: @colorTextDefault; +//} +// +//.boxview div.box.header h2 > a { +// color: inherit; +//} +// +//.boxview div.box.header h2 > a:hover { +// text-decoration: underline; +//} +// +//.boxview div.box.header h3 { +// line-height: 1.5em; +// font-size: 0.9em; +// color: #555; +//} +// +///* Box body of contents */ +//.boxview div.box.contents { +// padding: 0.2em; +//} +// +//.boxview div.box.contents table { +// width: 100%; +//} +// +//.boxview div.box.contents td { +// width: 13em; +// vertical-align: top; +//} +// +///* Box separator */ +//.boxview div.box-separator:first-child { +// border-top-width: 0; +//} +// +//.boxview div.box-separator { +// font-size: 0.8em; +// padding: 0.4em 0 0.4em; +// border: 1px solid #d9d9d9; +// +// font-weight: bold; +// letter-spacing: 0.1em; +//} +// +///* Box entry */ +//.boxview div.box.entry { +// min-height: 2.7em; +// margin: 0.2em; +// font-size: 0.9em; +// white-space: nowrap; +// +// color: @colorTextDefault; +//} +// +///* Any line of a box entry */ +//.boxview div.box.entry a { +// display: block; +// +// color: inherit; +//} +// +//.boxview div.box.entry a:hover { +// color: @colorTextDefault; +//} +// +///* First line of a box entry */ +//.boxview div.box.entry a:first-child { +// font-size: 1em; +//} +// +///* End of generic box element */ +// +// +///* Monitoring box element styles */ +// +///* Host- and Servicegroup element styles */ +// +//div.box.entry.state_up, div.box.entry.state_ok { +// border: 1px solid @colorOk; +// border-left: 1em solid @colorOk; +//} +// +//div.box.entry.state_pending { +// border: 1px solid @colorPending; +// border-left: 1em solid @colorPending; +//} +// +//div.box.entry.state_down, div.box.entry.state_critical { +// border: 1px solid @colorCritical; +// border-left: 1em solid @colorCritical; +// background-color: @colorCritical; +// color: white; +//} +// +//div.box.entry.state_down a:hover, div.box.entry.state_critical a:hover { +// color: #dcdcdc; +//} +// +//div.box.entry.state_warning { +// border: 1px solid @colorWarning; +// border-left: 1em solid @colorWarning; +// background-color: @colorWarning; +// color: white; +//} +// +//div.box.entry.state_warning a:hover { +// color: #dcdcdc; +//} +// +//div.box.entry.state_unreachable, div.box.entry.state_unknown { +// border: 1px solid @colorUnknown; +// border-left: 1em solid @colorUnknown; +// background-color: @colorUnknown; +// color: white; +//} +// +//div.box.entry.state_unreachable a:hover, div.box.entry.state_unknown a:hover { +// color: #dcdcdc; +//} +// +//div.box.entry.handled { +// background-color: transparent; +// color: inherit; +//} +// +//div.box.entry.handled a:hover { +// color: @colorTextDefault; +//} +// +/* Tactical overview element styles */ +// +//.tactical > .boxview > div.box { +// min-height: 20em; +// min-width: 12.1em; +//} +// +//.tactical div.box.contents { +// min-height: 14.5em; +//} +// +//div.box.contents.zero { +// min-width: 11.1em; +// +// background-color: transparent; +//} +// +//div.box.contents.zero span { +// font-weight: bold; +// line-height: 2em; +// +// color: #666; +//} +// +//div.box.contents.zero h3 { +// margin: 0; +// font-size: 12em; +// line-height: 1em; +// +// color: #666; +//} +// +//div.box.ok_hosts.state_up { +// border: 5px solid @colorOk; +//} +// +//div.box.ok_hosts.state_pending { +// background-color: @colorPending; +//} +// +//div.box.problem_hosts.state_down { +// border: 5px solid @colorCritical; +//} +// +//div.box.problem_hosts.state_down.handled { +// background-color: @colorCriticalHandled; +//} +// +//div.box.problem_hosts.state_unreachable { +// background-color: @colorUnreachable; +//} +// +//div.box.problem_hosts.state_unreachable.handled { +// background-color: @colorUnreachableHandled; +//} +// +//div.box.ok_hosts div.box.entry, div.box.problem_hosts div.box.entry { +// min-width: 11.1em; +//} +// +//div.box.monitoringfeatures div.box.contents { +// padding: 0 2 0em; +//} +// +//div.box.monitoringfeatures { +// border: 5px solid #d9d9d9; +//} +// +//div.box.monitoringfeatures div.box-separator { +// color: white; +// background-color: @colorOk; +//} +// +//div.box.monitoringfeatures div.feature-highlight { +// background-color: @colorCritical; +//} +// +//div.box.monitoringfeatures a.feature-highlight { +// font-weight: bold; +//} +// +//div.box.hostservicechecks { +// border: 5px solid #d9d9d9; +//} +// +///* Contactgroup element styles */ +// +//div.box.contactgroup { +// width: 18em; +// padding: 0.8em; +//} +// +//div.box.contactgroup div.box.contents { +// padding: 0.6em; +//} +// +//div.box.contactgroup div.box.entry { +// overflow: hidden; +// clear: left; +//} +// +//div.box.contactgroup div.box.entry img { +// width: 80px; +// height: 80px; +// float: left; +// +//} +// +//div.box.contactgroup div.box.entry a { +// margin-top: 0.4em; +// +// font-weight: bold; +//} +// +//div.box.contactgroup div.box.entry p { +// margin: 0.4em 0 0; +//} +// +//div.circular { +// margin-top: 0.5em; +// margin-left: 2em; +// margin-right: 1em; +// width: 80px; +// height: 80px; +// float: left; +// background-size: 100% 100%; +//} +// +///* End of monitoring box element styles */ +// +// +///* Monitoring pivot table styles */ +// +//div.pivot-pagination { +// margin: 1em; +// +// table { +// table-layout: fixed; +// border-spacing: 1px; +// border-collapse: separate; +// border: 1px solid LightGrey; +// border-radius: 0.3em; +// +// td { +// width: 16px; +// height: 16px; +// padding: 0; +// background-color: #fbfbfb; +// +// &:hover, &.active { +// background-color: #e5e5e5; +// } +// +// a { +// width: 16px; +// height: 16px; +// display: block; +// } +// } +// } +//} +// +//table.joystick-pagination { +// margin-top: -1.5em; +// +// td { +// width: 1.25em; +// height: 1.3em; +// } +//} +// +///* End of monitoring pivot table styles */ +// +///* Monitoring timeline styles */ +// +//div.timeline-legend { +// float: left; +// padding: 0.5em; +// border: 1px solid #d9d9d9; +// background-color: #eee; +// +// h2 { +// margin: 0; +// margin-left: 0.5em; +// line-height: 1.1em; +// } +// +// & > span { +// display: inline-block; +// padding: 0.5em; +// margin: 0.5em; +// +// span { +// color: white; +// font-size: 0.8em; +// font-weight: bold; +// white-space: nowrap; +// } +// } +//} +// +//div.timeline { +// div.timeframe { +// height: 7em; +// margin-bottom: 1em; +// clear: left; +// +// span { +// width: 8em; +// margin-top: 2.3em; +// margin-right: 1.5em; +// display: block; +// float: left; +// text-align: center; +// +// a { +// color: @colorTextDefault; +// font-size: 0.8em; +// font-weight: bold; +// text-decoration: none; +// white-space: nowrap; +// +// &:hover { +// color: @colorTextDefault; +// text-decoration: underline; +// +// } +// } +// } +// +// div.circle-box { +// // width: inline-style; +// height: 100%; +// margin-right: 0.5em; +// position: relative; +// float: left; +// +// div.outer-circle { +// // width: inline-style; +// // height: inline-style; +// position: absolute; +// top: 50%; +// // margin-top: inline-style; +// +// &.extrapolated { +// border-width: 2px; +// border-style: dotted; +// //border-color: inline-style; +// border-radius: 100%; +// // background-color: inline-style; +// } +// +// a.inner-circle { +// // width: inline-style; +// // height: inline-style; +// display: block; +// position: absolute; +// top: 50%; +// left: 50%; +// // margin-top: inline-style; +// // margin-left: inline-style; +// border-radius: 100%; +// // background-color: inline-style; +// } +// } +// } +// } +// +// hr { +// border: 0; +// height: 1px; +// background-image: linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.3), rgba(0,0,0,0)); +// background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.3), rgba(0,0,0,0)); +// background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.3), rgba(0,0,0,0)); +// background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.3), rgba(0,0,0,0)); +// background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.3), rgba(0,0,0,0)); +// } +//} +// +///* End of monitoring timeline styles */ +// +///* Monitoring groupsummary styles */ +// +//.dashboard table.groupview { +// margin-top: 0; +//} +// +//table.groupview { +// width: 100%; +// margin-top: 1em; +// border-collapse: separate; +// border-spacing: 0.1em; +// +// th { +// font-size: 1.0em; +// font-weight: normal; +// text-align: center; +// white-space: nowrap; +// border-bottom: 2px solid @gray-light; +// } +// +// td { +// &.groupname { +// width: 60%; +// +// a { +// color: inherit; +// text-decoration: none; +// +// &:hover { +// text-decoration: underline; +// } +// } +// } +// +// &.total { +// width: 10%; +// } +// +// &.state { +// width: 20%; +// white-space: nowrap; +// +// &.change { +// width: 10%; +// text-align: center; +// border-left-width: 1.5em; +// border-left-style: solid; +// padding: 0.3em 0.5em 0.3em 0.5em; +// +// strong { +// font-size: 0.8em; +// } +// +// &.ok { +// border-color: @colorOk; +// } +// +// &.pending { +// border-color: @colorPending; +// } +// +// &.warning { +// border-color: @colorWarningHandled; +// +// &.unhandled { +// color: white; +// border-left-width: 0; +// background-color: @colorWarning; +// } +// } +// +// &.unknown { +// border-color: @colorUnknownHandled; +// +// &.unhandled { +// color: white; +// border-left-width: 0; +// background-color: @colorUnknown; +// } +// } +// +// &.critical { +// border-color: @colorCriticalHandled; +// +// &.unhandled { +// color: white; +// border-left-width: 0; +// background-color: @colorCritical; +// } +// } +// } +// +// span.state { +// &.handled { +// margin-right: 2px; +// } +// +// a { +// font-size: 0.9em; +// color: white; +// text-decoration: none; +// +// &:hover { +// text-decoration: underline; +// } +// } +// } +// } +// } +//} +// +///* End of monitoring groupsummary styles */ +// +///* compact table */ +//table.statesummary { +// text-align: left; +// width: auto; +// border-collapse: separate; +// +// tr.state td.state { +// width: auto; +// font-weight: bold; +// } +// +// td { +// font-size: 0.9em; +// line-height: 1.2em; +// padding-left: 0.2em; +// margin: 0; +// } +// +// td.state { +// padding: 0.2em; +// min-width: 75px; +// font-size: 0.75em; +// text-align: center; +// } +// +// td.name { +// font-weight: bold; +// } +// +// td a { +// color: inherit; +// text-decoration: none; +// } +//} +// +//table.action .objectflags { +// float: right; +//} +// +//table.objectstate { +// border-collapse: separate; +// border-spacing: 1px; +//} +// +//table.objectstate td { +// padding-left: 1em; +//} +// +//table.objectstate tr.state td.state { +// width: 9em; +// text-align: center; +// padding-left: 0; +// border-radius: 0; +//} +// +//table.avp td.performance-data { +// padding: 0.3em 0 0.3em 1em; +//} +// +//table.perfdata { +// min-width: 24em; +// font-size: 0.9em; +// width: 100%; +//} +// +//table.perfdata th { +// padding: 0; +// text-align: left; +// padding-right: 0.5em; +//} +// +//table.perfdata td { +// white-space: nowrap; +// padding-right: 0.5em; +//} diff --git a/modules/monitoring/public/css/service-grid.less b/modules/monitoring/public/css/service-grid.less new file mode 100644 index 0000000..fd22097 --- /dev/null +++ b/modules/monitoring/public/css/service-grid.less @@ -0,0 +1,75 @@ +/*! Icinga Web 2 | (c) 2015 Icinga Development Team | GPLv2+ */ + +.service-grid-table { + width: 0; + white-space: nowrap; + + td { + color: @gray-light; + padding: 0.2em; + text-align: center; + width: 1em; + } + + .rotate-45 { + height: 8em; + + div { + .transform(translate(0.4em, 2.8em) rotate(315deg)); + width: 1.5em; + } + } + + .service-grid-table-more { + text-align: center; + a { + display: inline; + } + } +} + +.joystick-pagination { + margin: 0 auto; + font-size: 130%; + + a { + color: @text-color; + outline: none; + + &:hover { + color: @text-color-light; + } + &:focus, &:active { + color: @icinga-blue; + } + } + + i { + display: block; + height: 1.5em; + width: 1.5em; + } +} + +.service-grid-link { + .bg-stateful(); + .rounded-corners(); + + display: inline-block; + height: 1.5em; + vertical-align: middle; + width: 1.5em; +} + +form.filter-toggle { + label:not(.toggle-switch) { + display: inline-block; + vertical-align: top; + margin-left: .5em; + color: @gray-light; + } + + input[type="checkbox"]:checked ~ label { + color: inherit; + } +} diff --git a/modules/monitoring/public/css/tables.less b/modules/monitoring/public/css/tables.less new file mode 100644 index 0000000..c5b5f27 --- /dev/null +++ b/modules/monitoring/public/css/tables.less @@ -0,0 +1,282 @@ +/*! Icinga Web 2 | (c) 2015 Icinga Development Team | GPLv2+ */ + +@border-left-width: 6px; + +// Icon images in list and detail views +.host-icon-image, +.service-icon-image { + max-width: 2em; + vertical-align: middle; +} + +// Check source reachable information in the host and service detail views +.check-source-meta { + font-size: @font-size-small; +} + +// Object link and comment author in the comment overview +.comment-author { + margin-bottom: 0.25em; + + > a { + font-weight: bold; + } +} + +// Comment icons, e.g. persistent in the comment overview +.comment-icons { + float: right; +} + +.caption { + height: 3em; + text-overflow: ellipsis; + overflow: hidden; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + + img { + max-height: 1em; + } +} + +// Type information for backends in the monitoring config +.config-label-meta { + font-size: @font-size-small; +} + +// Column for counts, e.g. host group members +.count-col { + width: 4em; +} + +// Custom variables in the host and service detail view +.custom-variables > ul { + list-style-type: none; + margin: 0; +} + +// Host name and IP addresses in the host and service detail view +.host-meta { + color: @text-color-light; + font-size: @font-size-small; +} + +// Notification recipient in the notifications overview +.notification-recipient { + color: @text-color-light; + float: right; + font-size: @font-size-small; +} + + +// Container for plugin output and performance data in overviews +.overview-plugin-output-container { + .clearfix(); +} + +// Performance data pies in overviews +.overview-performance-data { + float: right; + font-size: @font-size-small; +} + +// Plugin output in detail views +.plugin-output, +// Plugin output in overviews +.overview-plugin-output { + -webkit-hyphens: auto; + -moz-hyphens: auto; + -ms-hyphens: auto; + hyphens: auto; + + overflow-wrap: break-word; + word-wrap: break-word; +} + +// Plugin output in overviews +.overview-plugin-output { + color: @text-color-light; + font-family: @font-family-fixed; + font-size: @font-size-small; + margin: 0; + white-space: pre-wrap; + // Long text in table cells overflows the table's width if the table's layout is not fixed. + // Thus overflow-wrap will not have any effect. But w/ the following we set a width of any value + // plus a min-width of 100% to consume the full width nonetheless which seems to always + // instruct browsers to not overflow the table. Ridiculous. + min-width: 100%; + width: 1em; +} + +// Table for performance data in detail views +.performance-data-table { + display: block; + overflow-x: auto; + position: relative; + + > thead > tr > th { + text-align: left; + } + + > thead > tr > th:first-child, + > tbody > tr > td:first-child { + // Reset base padding + padding-left: 0; + } + + > thead > tr > th, + > tbody > tr > td { + white-space: nowrap; + } +} + +// Performance data table column for sparkline pie charts in detail views +.sparkline-col { + width: 2em; +} + +// Service description if in the service detail view +.service-meta { + color: @text-color-light; + font-size: @font-size-small; +} + +// State column for label and duration in overviews +.state-col { + &.state-ok, + &.state-up { + border-left: @border-left-width solid @color-ok; + } + + &.state-pending { + border-left: @border-left-width solid @color-pending; + } + + &.state-critical, + &.state-down { + background-color: @color-critical; + color: @text-color-inverted; + + &.handled { + background-color: inherit; + color: inherit; + border-left: @border-left-width solid @color-critical-handled; + } + } + + &.state-warning { + background-color: @color-warning; + color: @text-color-inverted; + + &.handled { + background-color: inherit; + color: inherit; + border-left: @border-left-width solid @color-warning-handled; + } + } + + &.state-unknown { + background-color: @color-unknown; + color: @text-color-inverted; + + &.handled { + background-color: inherit; + color: inherit; + border-left: @border-left-width solid @color-unknown-handled; + } + } + + &.state-unreachable { + background-color: @color-unreachable; + color: @text-color-inverted; + + &.handled { + background-color: inherit; + color: inherit; + border-left: @border-left-width solid @color-unreachable-handled; + } + } + + // State class for history events + &.state-no-state { + border-left: @border-left-width solid @text-color-light; + } + + * { + color: inherit; + } + + text-align: center; + width: 8em; +} + +// Wraps links, icons and meta in overviews +.state-header { + .clearfix(); + + > a { + font-weight: bold; + } +} + +// State icons, e.g. acknowledged in overviews +.state-icons { + float: right; +} + +// State labels in overviews +.state-label { + font-family: @font-family-wide; + font-size: @font-size-small; + letter-spacing: 1px; +} + +// State duration and state type information in overviews +.state-meta { + font-size: @font-size-small; +} + +.state-table { + border-collapse: separate; + border-spacing: 0 1px; + width: 100%; + + tr[href] { + -webkit-transform: translate3d(0,0,0); /* Without this, hovering in Safari is broken in history table rows */ + -moz-transform: none; /* Firefox collapses border spacing due to the above */ + } + + tr[href].active { + background-color: @tr-active-color; + } + + tr[href]:hover { + background-color: @tr-hover-color; + cursor: pointer; + } + + tr[href].state-outdated:not(:hover):not(.active) td:not(.state-col) { + opacity: 0.7; + } +} + +// Event history +.history-message-container { + display: flex; + align-items: center; + justify-content: center; + + > .history-message-icon { + padding: 0.25em; + } + + > .history-message-output { + flex: 1; + + > a { + font-weight: bold; + } + } +} diff --git a/modules/monitoring/public/js/module.js b/modules/monitoring/public/js/module.js new file mode 100644 index 0000000..d665e6b --- /dev/null +++ b/modules/monitoring/public/js/module.js @@ -0,0 +1,84 @@ +/*! Icinga Web 2 | (c) 2014 Icinga Development Team | GPLv2+ */ + +(function(Icinga) { + + var Monitoring = function(module) { + /** + * The Icinga.Module instance + */ + this.module = module; + + /** + * The observer used to handle the timeline's infinite loading + */ + this.scrollCheckTimer = null; + + /** + * Whether to skip the timeline's scroll-check + */ + this.skipScrollCheck = false; + + this.initialize(); + }; + + Monitoring.prototype = { + + initialize: function() + { + this.module.on('rendered', this.enableScrollCheck); + this.module.icinga.logger.debug('Monitoring module loaded'); + }, + + /** + * Enable the timeline's scroll-check + */ + enableScrollCheck: function() + { + /** + * Re-enable the scroll-check in case the timeline has just been extended + */ + if (this.skipScrollCheck) { + this.skipScrollCheck = false; + } + + /** + * Prepare the timer to handle the timeline's infinite loading + */ + var $timeline = $('div.timeline'); + if ($timeline.length && !$timeline.closest('.dashboard').length) { + if (this.scrollCheckTimer === null) { + this.scrollCheckTimer = this.module.icinga.timer.register( + this.checkTimelinePosition, + this, + 800 + ); + this.module.icinga.logger.debug('Enabled timeline scroll-check'); + } + } + }, + + /** + * Check whether the user scrolled to the end of the timeline + */ + checkTimelinePosition: function() + { + if (!$('div.timeline').length) { + this.module.icinga.timer.unregister(this.scrollCheckTimer); + this.scrollCheckTimer = null; + this.module.icinga.logger.debug('Disabled timeline scroll-check'); + } else if (!this.skipScrollCheck && this.module.icinga.utils.isVisible('#end')) { + this.skipScrollCheck = true; + this.module.icinga.loader.loadUrl( + $('#end').remove().attr('href'), + $('div.timeline'), + undefined, + undefined, + 'append' + ).addToHistory = false; + } + } + }; + + Icinga.availableModules.monitoring = Monitoring; + +}(Icinga)); -- cgit v1.2.3