render('list/components/selectioninfo.phtml'); ?>
@@ -54,7 +54,7 @@ if (count($hosts) === 0) {
iconImage()->host($host) ?>
- hostFlags($host)) ?>
+ hostFlags($host)) ?>
qlink(
$host->host_display_name,
$hostLink,
diff --git a/modules/monitoring/application/views/scripts/list/services.phtml b/modules/monitoring/application/views/scripts/list/services.phtml
index f3b28bb5e..15f702d10 100644
--- a/modules/monitoring/application/views/scripts/list/services.phtml
+++ b/modules/monitoring/application/views/scripts/list/services.phtml
@@ -5,16 +5,16 @@ use Icinga\Module\Monitoring\Object\Service;
$selfUrl = 'monitoring/list/services';
if (! $this->compact): ?>
-
- tabs; ?>
+
+ tabs ?>
- render('list/components/selectioninfo.phtml'); ?>
- render('list/components/servicesummary.phtml'); ?>
+ render('list/components/selectioninfo.phtml') ?>
+ render('list/components/servicesummary.phtml') ?>
- sortBox; ?>
- limiter; ?>
- paginator; ?>
- filterEditor; ?>
+ sortBox ?>
+ limiter ?>
+ paginator ?>
+ filterEditor ?>
@@ -48,7 +48,7 @@ if (count($services) === 0) {
?>
- service_state, true); ?>
+ service_state, true) ?>
service_state !== 99): ?>
timeSince($service->service_last_state_change, $this->compact) ?>
@@ -60,25 +60,29 @@ if (count($services) === 0) {
|
- perfdata($service->service_perfdata, true, 5) ?>
iconImage()->service($service) ?>
- serviceFlags($service)); ?>
- qlink(
- $service->service_display_name,
- $serviceLink,
- null,
- array('title' => sprintf(
- $this->translate('Show detailed information for service %s on host %s'),
- $service->service_display_name,
- $service->host_display_name
- ))
- ); ?>showHost): ?> on qlink(
+ serviceFlags($service)) ?>
+showHost): ?>qlink(
$service->host_display_name . ($service->host_state != 0 ? ' (' . Host::getStateText($service->host_state, true) . ')' : ''),
$hostLink,
null,
array('title' => sprintf($this->translate('Show detailed information for host %s'), $service->host_display_name))
- ); ?>
- escape($this->ellipsis($service->service_output, 10000)); ?>
+ ) ?>:
+qlink(
+ $service->service_display_name,
+ $serviceLink,
+ null,
+ array(
+ 'title' => sprintf(
+ $this->translate('Show detailed information for service %s on host %s'),
+ $service->service_display_name,
+ $service->host_display_name
+ ),
+ 'class' => 'rowaction'
+ )
+) ?>
+ perfdata($service->service_perfdata, true, 5) ?>
+ escape($this->ellipsis($service->service_output, 10000)) ?>
|
addColumns as $col): ?>
escape($service->$col) ?> |
diff --git a/modules/monitoring/application/views/scripts/partials/comment/comment-detail.phtml b/modules/monitoring/application/views/scripts/partials/comment/comment-detail.phtml
index 46de949d2..8583bfc59 100644
--- a/modules/monitoring/application/views/scripts/partials/comment/comment-detail.phtml
+++ b/modules/monitoring/application/views/scripts/partials/comment/comment-detail.phtml
@@ -1,9 +1,9 @@
objecttype === 'service'): ?>
icon('service', $this->translate('Service')); ?>
translate('%s on %s', 'Service running on host'),
- $comment->service_display_name,
- $comment->host_display_name
+ '%s: %s',
+ $comment->host_display_name,
+ $comment->service_display_name
) ?>
icon('host', $this->translate('Host')); ?>
diff --git a/modules/monitoring/application/views/scripts/partials/host/servicesummary.phtml b/modules/monitoring/application/views/scripts/partials/host/servicesummary.phtml
index b69682e1b..be146acbe 100644
--- a/modules/monitoring/application/views/scripts/partials/host/servicesummary.phtml
+++ b/modules/monitoring/application/views/scripts/partials/host/servicesummary.phtml
@@ -13,7 +13,7 @@ function urlAddFilterOptional($url, $filter, $optional) {
}
$selfUrl = Url::fromPath('monitoring/list/services', array('host' => $object->host_name));
-?>compact ? ' data-base-target="col1"' : ''; ?>>
+?> compact ? ' data-base-target="col1"' : ''; ?>>
stats->services_total): ?>
qlink(
sprintf(
@@ -147,4 +147,4 @@ foreach (array(2 => 'critical', 3 => 'unknown', 1 => 'warning') as $stateId => $
-
+
diff --git a/modules/monitoring/application/views/scripts/partials/service/objects-header.phtml b/modules/monitoring/application/views/scripts/partials/service/objects-header.phtml
index 176c43d92..ff39bcf22 100644
--- a/modules/monitoring/application/views/scripts/partials/service/objects-header.phtml
+++ b/modules/monitoring/application/views/scripts/partials/service/objects-header.phtml
@@ -18,9 +18,8 @@ $i = 0;
iconImage()->service($service) ?>
serviceFlags($service)) ?>
- escape($service->getName()); ?>
- translate('on') ?>
- escape($service->getHost()->getName()); ?>
+ escape($service->getHost()->getName()); ?>:
+ escape($service->getName()); ?>
escape($service->service_output) ?>
diff --git a/modules/monitoring/application/views/scripts/service/show.phtml b/modules/monitoring/application/views/scripts/service/show.phtml
index 43dc77030..57e42d842 100644
--- a/modules/monitoring/application/views/scripts/service/show.phtml
+++ b/modules/monitoring/application/views/scripts/service/show.phtml
@@ -1,4 +1,4 @@
-
+
compact): ?>
tabs; ?>
diff --git a/modules/monitoring/application/views/scripts/show/components/comments.phtml b/modules/monitoring/application/views/scripts/show/components/comments.phtml
index c4b947e3c..ded9d3836 100644
--- a/modules/monitoring/application/views/scripts/show/components/comments.phtml
+++ b/modules/monitoring/application/views/scripts/show/components/comments.phtml
@@ -1,62 +1,90 @@
-
- | translate('Comments'); ?> |
-
- hasPermission('monitoring/command/comment/add')) {
- /** @var \Icinga\Module\Monitoring\Object\MonitoredObject $object */
- if ($object->getType() === $object::TYPE_HOST) {
- echo $this->qlink(
- $this->translate('Add comment'),
- 'monitoring/host/add-comment',
- array('host' => $object->getName()),
- array(
- 'icon' => 'comment',
- 'data-base-target' => '_self',
- 'title' => $this->translate('Add a new comment to this host')
- )
- );
- } else {
- echo $this->qlink(
- $this->translate('Add comment'),
- 'monitoring/service/add-comment',
- array('host' => $object->getHost()->getName(), 'service' => $object->getName()),
- array(
- 'icon' => 'comment',
- 'data-base-target' => '_self',
- 'title' => $this->translate('Add a new comment to this service')
- )
- );
- }
- } else {
- echo '-';
- } ?>
- |
-
-
comments as $comment) {
- // Ticket hook sample
- $commentText = $this->tickets ? preg_replace_callback(
- $this->tickets->getPattern(),
- array($this->tickets, 'createLink'),
- $this->escape($comment->comment)
- ) : $this->escape($comment->comment);
+$addLink = '';
- ?>
-
- | escape($comment->author); ?> (timeAgo($comment->timestamp); ?>) |
-
- populate(
- array(
- 'comment_id' => $comment->id,
- 'comment_is_service' => isset($comment->service_description)
- )
- );
- echo $delCommentForm;
- } ?>
- (translate('Comment'); ?>): ', $commentText); ?>
- |
-
-
+if ($this->hasPermission('monitoring/command/comment/add')) {
+ /** @var \Icinga\Module\Monitoring\Object\MonitoredObject $object */
+ if ($object->getType() === $object::TYPE_HOST) {
+ $addLink = $this->qlink(
+ $this->translate('Add comment'),
+ 'monitoring/host/add-comment',
+ array('host' => $object->getName()),
+ array(
+ 'icon' => 'comment',
+ 'data-base-target' => '_self',
+ 'title' => $this->translate('Add a new comment to this host')
+ )
+ );
+ } else {
+ $addLink = $this->qlink(
+ $this->translate('Add comment'),
+ 'monitoring/service/add-comment',
+ array('host' => $object->getHost()->getName(), 'service' => $object->getName()),
+ array(
+ 'icon' => 'comment',
+ 'data-base-target' => '_self',
+ 'title' => $this->translate('Add a new comment to this service')
+ )
+ );
+ }
+}
+
+if (empty($object->comments) && ! $addLink) {
+ return;
+}
+
+?>
+
+ translate('Comments');
+
+ if (! empty($object->comments) && $addLink) {
+ echo '
' . $addLink;
+ }
+
+ ?> |
+
+comments)): ?>
+
+
+
+
+
+ |
+
diff --git a/modules/monitoring/application/views/scripts/show/components/contacts.phtml b/modules/monitoring/application/views/scripts/show/components/contacts.phtml
index f445e10d1..641efb597 100644
--- a/modules/monitoring/application/views/scripts/show/components/contacts.phtml
+++ b/modules/monitoring/application/views/scripts/show/components/contacts.phtml
@@ -13,9 +13,8 @@ if (! empty($object->contacts)) {
}
printf(
- "| %s | %s %s |
|---|
\n",
+ "| %s | %s |
|---|
\n",
$this->translate('Contacts'),
- $this->icon('user'),
implode(', ', $list)
);
@@ -33,9 +32,8 @@ if (! empty($object->contactgroups)) {
}
printf(
- "| %s | %s %s |
|---|
\n",
+ "| %s | %s |
|---|
\n",
$this->translate('Contactgroups'),
- $this->icon('users'),
implode(', ', $list)
);
diff --git a/modules/monitoring/application/views/scripts/show/components/customvars.phtml b/modules/monitoring/application/views/scripts/show/components/customvars.phtml
index 50b82dbef..b3e4c334b 100644
--- a/modules/monitoring/application/views/scripts/show/components/customvars.phtml
+++ b/modules/monitoring/application/views/scripts/show/components/customvars.phtml
@@ -1,6 +1,7 @@
+customvars)) return; ?>
- translate('Custom variables') ?>
+ translate('Custom variables') ?>
|
- translate('Downtimes'); ?> |
-
- hasPermission('monitoring/command/downtime/schedule')) {
- /** @var \Icinga\Module\Monitoring\Object\MonitoredObject $object */
- if ($object->getType() === $object::TYPE_HOST) {
- echo $this->qlink(
- $this->translate('Schedule downtime'),
- 'monitoring/host/schedule-downtime',
- array('host' => $object->getName()),
- array(
- 'icon' => 'plug',
- 'data-base-target' => '_self',
- 'title' => $this->translate(
- 'Schedule a downtime to suppress all problem notifications within a specific period of time'
- )
- )
- );
- } else {
- echo $this->qlink(
- $this->translate('Schedule downtime'),
- 'monitoring/service/schedule-downtime',
- array('host' => $object->getHost()->getName(), 'service' => $object->getName()),
- array(
- 'icon' => 'plug',
- 'data-base-target' => '_self',
- 'title' => $this->translate(
- 'Schedule a downtime to suppress all problem notifications within a specific period of time'
- )
- )
- );
- }
- } else {
- echo '-';
- } ?>
- |
-
-
downtimes as $downtime) {
+$addLink = '';
+
+if ($this->hasPermission('monitoring/command/downtime/schedule')) {
+ /** @var \Icinga\Module\Monitoring\Object\MonitoredObject $object */
+ if ($object->getType() === $object::TYPE_HOST) {
+ $addLink = $this->qlink(
+ $this->translate('Schedule downtime'),
+ 'monitoring/host/schedule-downtime',
+ array('host' => $object->getName()),
+ array(
+ 'icon' => 'plug',
+ 'data-base-target' => '_self',
+ 'title' => $this->translate(
+ 'Schedule a downtime to suppress all problem notifications within a specific period of time'
+ )
+ )
+ );
+ } else {
+ $addLink = $this->qlink(
+ $this->translate('Schedule downtime'),
+ 'monitoring/service/schedule-downtime',
+ array('host' => $object->getHost()->getName(), 'service' => $object->getName()),
+ array(
+ 'icon' => 'plug',
+ 'data-base-target' => '_self',
+ 'title' => $this->translate(
+ 'Schedule a downtime to suppress all problem notifications within a specific period of time'
+ )
+ )
+ );
+ }
+}
+
+if (empty($object->comments) && ! $addLink) {
+ return;
+}
+
+?>
+
+
+ translate('Downtimes');
+
+ if (! empty($object->downtimes) && $addLink) {
+ echo '
' . $addLink;
+ }
+
+ ?> |
+
+downtimes)): ?>
+
+
+
+
+
+ |
+
diff --git a/modules/monitoring/application/views/scripts/show/components/output.phtml b/modules/monitoring/application/views/scripts/show/components/output.phtml
index 52b4c9a56..82230beae 100644
--- a/modules/monitoring/application/views/scripts/show/components/output.phtml
+++ b/modules/monitoring/application/views/scripts/show/components/output.phtml
@@ -1,5 +1,5 @@
- translate('Plugin Output') ?>
+ translate('Plugin Output') ?>
pluginOutput($object->output) ?>
pluginOutput($object->long_output) ?>
diff --git a/modules/monitoring/application/views/scripts/show/components/perfdata.phtml b/modules/monitoring/application/views/scripts/show/components/perfdata.phtml
index 086ee1235..0c59693ac 100644
--- a/modules/monitoring/application/views/scripts/show/components/perfdata.phtml
+++ b/modules/monitoring/application/views/scripts/show/components/perfdata.phtml
@@ -1,7 +1,11 @@
perfdata) return ?>
-
- | translate('Performance data') ?> |
-
- perfdata($object->perfdata) ?>
- |
+
+
+ translate('Performance data') ?>
+ |
+
+
+ |
+ perfdata($object->perfdata) ?>
+ |
diff --git a/modules/monitoring/public/css/module.less b/modules/monitoring/public/css/module.less
index c64f24b84..c6dc3d18e 100644
--- a/modules/monitoring/public/css/module.less
+++ b/modules/monitoring/public/css/module.less
@@ -1,67 +1,37 @@
/*! Icinga Web 2 | (c) 2013-2015 Icinga Development Team | GPLv2+ */
-h1 {
- font-size: 1em;
-}
-
-h2 {
- font-size: 1em;
-}
-
-h3 {
- font-size: 1em;
-}
-
-table.action.comments td p, table.action.downtimes td p {
- margin: 0;
- font-size: 0.8em;
-}
-
-table.action.comments td a, table.action.downtimes td a {
- font-weight: bold;
-}
-
.content.processinfo table.avp th {
width: 16em;
}
p.pluginoutput {
- font-size: 0.9em;
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: black;
+ color: #888;
margin-bottom: 1em;
padding: 0.2em;
}
-div.pluginoutput h4 {
- font-size: 0.875em;
- margin: 0em;
-}
-
-div.pluginoutput pre{
+div.pluginoutput pre {
white-space: pre-wrap;
-}
-
-table.objecthistory td {
- font-size: 0.8em;
-}
-
-table.objecthistory td.state {
- font-size: 0.7em;
-}
-
-table.objectstate {
- font-size: 0.8em;
+ 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 {
- font-size: 0.92em;
- line-height: 1.8em;
padding-top: 0.5em;
padding-bottom: 0.5em;
}
@@ -91,10 +61,6 @@ div.contacts div.notification-periods {
}
.tinystatesummary {
- .page-header();
- font-size: 1em;
- margin-bottom: 0.5em;
-
.badges {
display: inline-block;
margin-bottom: 4px;
@@ -104,7 +70,7 @@ div.contacts div.notification-periods {
.state > a {
color: white;
- font-size: 0.8em;
+ font-size: 0.857em;
padding: 2px 5px;
}
}
@@ -123,7 +89,6 @@ span.state.active {
}
span.state span.state {
- font-size: 1em;
margin: 0 -3px 0 5px;
}
@@ -189,6 +154,48 @@ table.avp form.object-features div.header h4 {
margin: 0;
}
+table.avp {
+ th {
+ font-weight: normal;
+ font-size: 0.857em;
+ padding-top: 0.2em;
+ padding-bottom: 0.3em;
+ }
+
+ td {
+ color: #666;
+ padding-bottom: 0.3em;
+ th, td {
+ padding: 0;
+ }
+ }
+
+ a, button.link-like {
+ color: @mainLayoutColor;
+ }
+
+ .go-ahead {
+ a, button.link-like {
+ color: #222;
+ }
+ }
+
+ .autosubmit-warning {
+ display: none;
+ }
+
+ .object-features {
+ label {
+ font-weight: normal;
+ margin-right: 0;
+ }
+
+ input {
+ margin: 0;
+ }
+ }
+}
+
table.avp .customvar ul {
list-style-type: none;
margin: 0;
@@ -200,7 +207,7 @@ div.selection-info {
padding-top: 0.4em;
float: right;
cursor: help;
- font-size: 0.8em;
+ font-size: 0.857em;
}
.optionbox {
@@ -242,3 +249,998 @@ td.state {
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;
+}
+
+table.action td.timesince {
+ width: 3.5em;
+}
+
+
+/* State row behaviour */
+
+tr.state img.icon {
+ margin-right: 2px;
+}
+
+tr.state a {
+ color: #222;
+}
+
+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 caption */
+.boxview div.box h2 {
+ margin-top: 0;
+ margin-bottom: 0.6em;
+ font-size: 0.8em;
+ color: @colorTextDefault;
+}
+
+.boxview div.box h2:first-child {
+ margin-top: 0.2em;
+ padding-bottom: 0.5em;
+ font-size: inherit;
+ color: @colorTextDefault;
+ border-bottom: 1px solid #d9d9d9;
+}
+
+.boxview div.box h2 > a {
+ color: inherit;
+ margin-bottom: 0.2em;
+}
+
+.boxview div.box h2 > a:hover {
+ text-decoration: underline;
+}
+
+.boxview div.box h2:first-child > a:hover {
+}
+
+.boxview div.box h3 {
+ line-height: 1.5em;
+ font-size: 0.9em;
+ color: #555;
+ border-bottom: 1px solid #d9d9d9;
+}
+
+/* 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;
+ }
+}
+
+table.pivot {
+ a {
+ text-decoration: none;
+ color: black;
+
+ &:hover {
+ color: @colorTextDefault;
+ }
+ }
+
+ & > thead {
+ th {
+ height: 6em;
+
+ div {
+ margin-right: -1.5em;
+ padding-left: 1.3em;
+
+ span {
+ width: 1.5em;
+ margin-right: 0.25em;
+ margin-top: 4em;
+ line-height: 2em;
+ white-space: nowrap;
+ display: block;
+ float: left;
+
+ transform: rotate(-45deg);
+ transform-origin: bottom left;
+ -o-transform: rotate(-45deg);
+ -o-transform-origin: bottom left;
+ -ms-transform: rotate(-45deg);
+ -ms-transform-origin: bottom left;
+ -moz-transform: rotate(-45deg);
+ -moz-transform-origin: bottom left;
+ -webkit-transform: rotate(-45deg);
+ -webkit-transform-origin: bottom left;
+ //filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
+
+ abbr {
+ border: 0; // Remove highlighting in firefox
+ font-size: 0.8em;
+ }
+ }
+ }
+ }
+ }
+
+ & > tbody {
+ th {
+ padding: 0 14px 0 0;
+ white-space: nowrap;
+
+ a {
+ font-size: 0.8em;
+ }
+ }
+
+ td {
+ padding: 2px;
+ min-width: 1.5em;
+ line-height: 1.5em;
+ text-align: center;
+
+ a {
+ width: 1.5em;
+ height: 1.5em;
+ display: block;
+ border-radius: 0.5em;
+
+ &.state_ok {
+ background-color: @colorOk;
+ }
+
+ &.state_pending {
+ background-color: @colorPending;
+ }
+
+ &.state_warning {
+ background-color: @colorWarning;
+
+ &.handled {
+ background-color: @colorWarningHandled;
+ }
+ }
+
+ &.state_critical {
+ background-color: @colorCritical;
+
+ &.handled {
+ background-color: @colorCriticalHandled;
+ }
+ }
+
+ &.state_unknown {
+ background-color: @colorUnknown;
+
+ &.handled {
+ background-color: @colorUnknownHandled;
+ }
+ }
+ }
+ }
+ }
+}
+
+/* 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: 0.9em;
+ text-align: left;
+ white-space: nowrap;
+ }
+
+ 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;
+ }
+
+ span.timesince {
+ 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;
+ border-left: 4px solid #d8d8d8;
+}
+
+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/public/css/icinga/defaults.less b/public/css/icinga/defaults.less
index e3e033eff..f2db2ad50 100644
--- a/public/css/icinga/defaults.less
+++ b/public/css/icinga/defaults.less
@@ -1,22 +1,22 @@
/*! Icinga Web 2 | (c) 2013-2015 Icinga Development Team | GPLv2+ */
/* Color definitions */
+@colorMainLayout: #049baf;
+@colorMainBackground: #fff;
+@colorMainForeground: #666;
+@colorMainLink: #222;
+@colorSecondary: #f9f9f9;
+
+
@colorGray: #f9f9f9;
@colorLinkDefault: #049baf;
-@colorTextDefault: #666;
+@colorTextDefault: @colorMainForeground;
@colorTextDarkDefault: #555;
-@colorPetrol: #049baf;
@colorOk: #44bb77;
@colorWarning: #ffaa44;
@colorWarningHandled: #ffcc66;
@colorCritical: #ff5566;
@colorCriticalHandled: #ff99aa;
-/*
-@colorUnknown: #dd66ff;
-@colorUnknownHandled: #ee99ff;
-@colorUnreachable: #dd66ff;
-@colorUnreachableHandled: #ee99ff;
-*/
@colorUnknown: #aa44ff;
@colorUnknownHandled: #cc77ff;
@colorUnreachable: #aa44ff;
@@ -27,20 +27,8 @@
@colorFormNotificationWarning: #ffaa44;
@colorFormNotificationError: #ff5566;
-/* Mixins */
-
-.page-header(@borderSize: 2px; @fontSize: 2em; @textColor: @colorTextDarkDefault) {
- font-size: @fontSize;
- color: @textColor;
- border-bottom: @borderSize solid @colorPetrol;
- a {
- text-decoration: none;
- color: inherit;
- &:hover {
- text-decoration: underline;
- }
- }
-}
+/* deprecated */
+@colorPetrol: @colorMainLayout;
/*** Base rules ***/
* {
@@ -81,44 +69,21 @@ body {
}
a {
- color: #333;
- text-decoration: underline;
-}
+ @colorMainLink;
+ text-decoration: none;
-a:hover {
- color: black;
- text-decoration: underline;
-}
-
-/* W3C Recommendation (except h4) */
-h1 {
- .page-header();
-}
-
-h2 {
- font-size: 1.5em;
- color: @colorPetrol;
-}
-
-h3 {
- .page-header(1px, 1.17em);
-}
-
-h4 {
- font-size: 1em;
- color: @colorPetrol;
-}
-
-h5 {
- .page-header(1px, .83em);
-}
-
-h6 {
- font-size: .75em;
- color: @colorPetrol;
+ :hover {
+ text-decoration: underline;
+ }
}
h1, h2, h3, h4, h5, h6 {
+ font-size: 1em;
+ padding: 0.3em 0em;
+ margin: 0.7em 0 0.5em 0;
+ color: @textColor;
+ border-bottom: 1px dotted #aaa;
+
a {
text-decoration: none;
color: inherit;
@@ -129,6 +94,31 @@ h1, h2, h3, h4, h5, h6 {
}
}
+h5 {
+ font-size: 0.83em;
+}
+
+h6 {
+ font-size: 0.75em;
+}
+
+h1 {
+ border-bottom: 3px solid #666;
+ font-variant: small-caps;
+ font-weight: bold;
+}
+
+h2 {
+ border-bottom: 1px solid #888;
+ font-variant: small-caps;
+ font-weight: normal;
+}
+
+h3 {
+ font-weight: normal;
+ border-bottom: 1px solid #aaa;
+}
+
button {
font-family: inherit;
}
@@ -141,4 +131,4 @@ button {
position: absolute;
top: -2em;
}
-/*** END of Base rules */
\ No newline at end of file
+/*** END of Base rules */
diff --git a/public/css/icinga/forms.less b/public/css/icinga/forms.less
index 99ea074df..2c45b476f 100644
--- a/public/css/icinga/forms.less
+++ b/public/css/icinga/forms.less
@@ -260,9 +260,3 @@ form ul.descriptions {
}
}
}
-
-form > div.header {
- h1, h2, h3, h4, h5, h6 {
- display: inline-block;
- }
-}
diff --git a/public/css/icinga/header-elements.less b/public/css/icinga/header-elements.less
index 560fada6f..4ecfb0823 100644
--- a/public/css/icinga/header-elements.less
+++ b/public/css/icinga/header-elements.less
@@ -1,12 +1,5 @@
/*! Icinga Web 2 | (c) 2013-2015 Icinga Development Team | GPLv2+ */
-#header div.user {
- font-size: 1.1em;
- margin-top: 0.8em;
- margin-right: 2em;
- float: right;
-}
-
#logo {
height: 3.6em;
width: 13em;
diff --git a/public/css/icinga/layout-structure.less b/public/css/icinga/layout-structure.less
index 587ddac5e..7d1c415f6 100644
--- a/public/css/icinga/layout-structure.less
+++ b/public/css/icinga/layout-structure.less
@@ -112,6 +112,7 @@ html {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
+ font-size: 0.875em;
width: 100%;
height: 100%;
overflow: auto;
@@ -139,6 +140,11 @@ html {
z-index: 100;
}
+.container .controls.separated {
+ box-shadow: 0 3px 4px -4px rgba(0, 0, 0, 0.2);
+ padding-bottom: 0.5em;
+}
+
.container .fake-controls {
padding: 1em 1em 0;
}
@@ -152,7 +158,6 @@ html {
}
.dashboard > div.container {
- font-size: 0.9em;
vertical-align: top;
width: 48.5%;
display: inline-block;
@@ -161,10 +166,6 @@ html {
margin-left: 1%;
}
-.content h3 {
- font-size: 0.9em;
-}
-
.container .controls .pagination {
margin-left: 1.2em;
}
diff --git a/public/css/icinga/main-content.less b/public/css/icinga/main-content.less
index 635c1628f..4464ab189 100644
--- a/public/css/icinga/main-content.less
+++ b/public/css/icinga/main-content.less
@@ -36,7 +36,6 @@ table.avp {
color: @colorTextDarkDefault;
table-layout: auto;
width: 100%;
- font-size: 0.9em;
}
table.avp a {
@@ -62,7 +61,7 @@ table.avp > tbody > tr > td {
}
table.avp.newsection, table.avp tr.newsection {
- border-top: 1px solid #d9d9d9;
+ margin-top: 1em;
}
.content table.avp dd, .content table.avp dd {
@@ -70,10 +69,6 @@ table.avp.newsection, table.avp tr.newsection {
padding: 0;
}
-table.avp {
- font-size: 0.8em;
-}
-
table.avp a {
color: @colorLinkDefault;
text-decoration: none;
@@ -83,76 +78,12 @@ table.avp a:hover {
text-decoration: underline;
}
-/* Definitively monitoring-only: */
-table.objectstate {
- border-collapse: separate;
- border-spacing: 1px;
-}
-
-table.objectstate td {
- font-size: 1.2em;
- line-height: 1.5em;
- padding-left: 1em;
-}
-
-table.objectstate tr.state td.state {
- font-size: 1em;
- width: 9em;
- text-align: center;
- padding-left: 0;
- border-radius: 0;
-}
-
-table.objectstate tr.state.handled td.state {
-}
-
-table.perfdata {
- min-width: 24em;
- font-size: 0.9em;
-}
-
-table.perfdata.perfdata-piecharts {
- left: -2.6em;
- position: relative;
-}
-
-table.perfdata th {
- padding: 0;
- text-align: left;
- padding-right: 0.5em;
-}
-
-table.perfdata td {
- white-space: nowrap;
- padding-right: 0.5em;
-}
-
-table.objectlist {
- min-width: 28em;
- th {
- text-align: left;
- }
-}
-
table.benchmark {
margin: 1em 1% 1em 1%;
font-family: monospace;
- font-size: 1em;
width: 96%;
}
-.dashboard h1 {
- font-size: 1em;
-}
-
-.dashboard h2 {
- font-size: 1em;
-}
-
-.dashboard h3 {
- font-size: 1em;
-}
-
.dashboard table.benchmark {
font-size: 0.9em;
}
@@ -167,6 +98,7 @@ table.benchmark {
[class^="icon-"]:before, [class*=" icon-"]:before {
text-decoration: none;
+ margin-left: 0;
}
.info-box {
@@ -175,6 +107,86 @@ table.benchmark {
background-color: #fbfcc5;
}
+/* Action table */
+table.action {
+ border-collapse: separate;
+ border-spacing: 1px;
+ width: 100%;
+ table-layout: fixed !important;
+ margin: 0;
+ color: @colorTextDefault;
+}
+
+table.action th {
+ text-align: left;
+ overflow: hidden;
+}
+
+table.action.wide td {
+ line-height: 2.5em;
+}
+
+table.action td {
+ padding: 0.3em 0.5em 0.3em 0.5em;
+ line-height: 1.5em;
+ overflow: hidden;
+}
+
+.dashboard table.action td {
+ line-height: 1.2em;
+ padding: 0.2 0.4em 0.2em 0.5em;
+}
+
+table.action td a {
+ color: inherit;
+ text-decoration: none;
+}
+
+table.action td a:hover {
+ text-decoration: underline;
+}
+
+/* END of Action table */
+
+/* Table behaviour */
+
+tr[href] {
+ cursor: pointer;
+}
+
+tr[href].active {
+ background-color: #eee;
+ color: black;
+}
+
+table.alternating {
+ tr[href].active:nth-child(even), tr[href].active:nth-child(odd) {
+ background-color: #E5E5E5;
+ color: black;
+ }
+ tr[href]:nth-child(even) {
+ background-color: #FDFDFD;
+ }
+ tr[href]:nth-child(odd) {
+ background-color: #f5f5f5;
+ }
+ tr[href]:hover {
+ color: black;
+ background-color: #DDDDDD;
+ }
+}
+/* End of table behaviour */
+
+
+/* HOVER colors */
+
+tr[href]:hover {
+ color: black;
+ background-color: #DDDDDD;
+}
+/* END of HOVER colors */
+
+/* TODO: get rid of most if not all styles below this line */
div.content.users {
table.user-list {
th.user-remove {
@@ -198,19 +210,6 @@ div.content.users {
}
}
-div.controls div.user-header {
- .user-name {
- display: inline-block;
- margin: 0 0 0.3em;
- font-size: 2em;
- }
-
- .user-state, .user-created, .user-modified {
- margin: 0 0 0.2em;
- font-size: 0.8em;
- }
-}
-
div.content.memberships {
table.membership-list {
th.membership-cancel {
diff --git a/public/css/icinga/monitoring-colors.less b/public/css/icinga/monitoring-colors.less
deleted file mode 100644
index 7f1499f02..000000000
--- a/public/css/icinga/monitoring-colors.less
+++ /dev/null
@@ -1,964 +0,0 @@
-/*! Icinga Web 2 | (c) 2013-2015 Icinga Development Team | GPLv2+ */
-
-/* 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;
-}
-
-/* Action table */
-table.action {
- font-size: 0.9em;
- border-collapse: separate;
- border-spacing: 1px;
- width: 100%;
- table-layout: fixed !important;
- margin: 0;
- color: @colorTextDefault;
-}
-
-table.action th {
- text-align: left;
- overflow: hidden;
-}
-
-table.action.wide td {
- line-height: 2.5em;
-}
-
-table.action td {
- padding: 0.3em 0.5em 0.3em 0.5em;
- line-height: 1.5em;
- overflow: hidden;
-}
-
-.dashboard table.action td {
- line-height: 1.2em;
- padding: 0.2 0.4em 0.2em 0.5em;
-}
-
-table.action td .pluginoutput {
- font-size: 0.8em;
- line-height: 1.2em;
- padding: 0;
- margin: 0;
-}
-
-table.action td a {
- color: inherit;
- text-decoration: none;
-}
-
-table.action td a:hover {
- text-decoration: underline;
-}
-
-/* END of Action table */
-
-
-/* Table behaviour */
-
-tr[href] {
- cursor: pointer;
-}
-
-/* End of table behaviour */
-
-
-table.action td.state {
- font-size: 0.7em;
- text-align: center;
-}
-
-table.action td.timesince {
- width: 3.5em;
-}
-
-
-/* State row behaviour */
-
-tr.state img.icon {
- margin-right: 2px;
-}
-
-tr.state a {
- font-weight: bold;
-}
-
-tr.state a.active {
-}
-
-tr.state.new td.state {
- font-weight: bold;
-}
-
-tr.state td.state strong {
- font-size: 1.2em;
-}
-
-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[href].active {
- background-color: #eee;
- color: black;
-}
-
-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[href]:hover {
- color: black;
- background-color: #eee;
-}
-
-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;
-}
-
-tr.state.warning.handled[href]:hover {
- background-color: @colorWarningHandled;
-}
-
-tr.state.critical[href]:hover, tr.state.down[href]:hover {
- background-color: @colorCritical;
-}
-
-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;
-}
-
-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;
-}
-
-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 caption */
-.boxview div.box h2 {
- margin-top: 0;
- margin-bottom: 0.6em;
- font-size: 0.8em;
- color: @colorTextDefault;
-}
-
-.boxview div.box h2:first-child {
- margin-top: 0.2em;
- padding-bottom: 0.5em;
- font-size: inherit;
- color: @colorTextDefault;
- border-bottom: 1px solid #d9d9d9;
-}
-
-.boxview div.box h2 > a {
- color: inherit;
- margin-bottom: 0.2em;
-}
-
-.boxview div.box h2 > a:hover {
- text-decoration: underline;
-}
-
-.boxview div.box h2:first-child > a:hover {
-}
-
-.boxview div.box h3 {
- line-height: 1.5em;
- font-size: 0.9em;
- color: #555;
- border-bottom: 1px solid #d9d9d9;
-}
-
-/* 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;
- }
-}
-
-table.pivot {
- a {
- text-decoration: none;
- color: black;
-
- &:hover {
- color: @colorTextDefault;
- }
- }
-
- & > thead {
- th {
- height: 6em;
-
- div {
- margin-right: -1.5em;
- padding-left: 1.3em;
-
- span {
- width: 1.5em;
- margin-right: 0.25em;
- margin-top: 4em;
- line-height: 2em;
- white-space: nowrap;
- display: block;
- float: left;
-
- transform: rotate(-45deg);
- transform-origin: bottom left;
- -o-transform: rotate(-45deg);
- -o-transform-origin: bottom left;
- -ms-transform: rotate(-45deg);
- -ms-transform-origin: bottom left;
- -moz-transform: rotate(-45deg);
- -moz-transform-origin: bottom left;
- -webkit-transform: rotate(-45deg);
- -webkit-transform-origin: bottom left;
- //filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
-
- abbr {
- border: 0; // Remove highlighting in firefox
- font-size: 0.8em;
- }
- }
- }
- }
- }
-
- & > tbody {
- th {
- padding: 0 14px 0 0;
- white-space: nowrap;
-
- a {
- font-size: 0.8em;
- }
- }
-
- td {
- padding: 2px;
- min-width: 1.5em;
- line-height: 1.5em;
- text-align: center;
-
- a {
- width: 1.5em;
- height: 1.5em;
- display: block;
- border-radius: 0.5em;
-
- &.state_ok {
- background-color: @colorOk;
- }
-
- &.state_pending {
- background-color: @colorPending;
- }
-
- &.state_warning {
- background-color: @colorWarning;
-
- &.handled {
- background-color: @colorWarningHandled;
- }
- }
-
- &.state_critical {
- background-color: @colorCritical;
-
- &.handled {
- background-color: @colorCriticalHandled;
- }
- }
-
- &.state_unknown {
- background-color: @colorUnknown;
-
- &.handled {
- background-color: @colorUnknownHandled;
- }
- }
- }
- }
- }
-}
-
-/* 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: 0.9em;
- text-align: left;
- white-space: nowrap;
- }
-
- 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;
- }
-
- span.timesince {
- 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;
- }
-}
-
diff --git a/public/js/icinga/events.js b/public/js/icinga/events.js
index 5e49fbda9..775b99eff 100644
--- a/public/js/icinga/events.js
+++ b/public/js/icinga/events.js
@@ -42,10 +42,15 @@
// Set first links href in a action table tr as row href:
$('table.action tr', el).each(function(idx, el) {
- var $a = $('a[href]', el).first();
+ var $a = $('a[href].rowaction', el).first();
if ($a.length) {
// TODO: Find out whether we leak memory on IE with this:
$(el).attr('href', $a.attr('href'));
+ return;
+ }
+ $a = $('a[href]', el).first();
+ if ($a.length) {
+ $(el).attr('href', $a.attr('href'));
}
});
|