tyler.durden/icingaweb2
1
0
Fork 0
mirror of https://github.com/Icinga/icingaweb2.git synced 2025-07-26 23:34:08 +02:00
Code Issues Packages Projects Releases Wiki Activity

CSS: col layout overviews and timeline

Browse Source
This commit is contained in:
Bernd Erk 2015-10-01 08:34:20 +02:00
parent 3f867437c4
commit 73d8153b59
9 changed files with 113 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
modules/monitoring/application/views/scripts/health/info.phtml
View File

@ -8,9 +8,9 @@ if (! $this->compact): ?>
</div> </div>
<?php endif ?> <?php endif ?>
<div class="content processinfo"> <div class="content processinfo grid">
<div class="boxview"> <div class="boxview">
<div class="box process"> <div class="box process col-1-2">
<h2><?= $this->translate('Process Info') ?></h2> <h2><?= $this->translate('Process Info') ?></h2>
<table class="avp"> <table class="avp">
<tbody> <tbody>
@ -75,7 +75,7 @@ if (! $this->compact): ?>
</div> </div>
<?php endif ?> <?php endif ?>
</div> </div>
<div class="box features"> <div class="box features col-1-2">
<?= $this->toggleFeaturesForm; ?> <?= $this->toggleFeaturesForm; ?>
</div> </div>
</div> </div>

4
modules/monitoring/application/views/scripts/health/stats.phtml
View File

@ -8,9 +8,9 @@ if (! $this->compact): ?>
</div> </div>
<?php endif ?> <?php endif ?>
<div class="content stats"> <div class="content stats grid">
<div class="boxview"> <div class="boxview">
<div class="box stats"> <div class="box stats col-1-2">
<h3><?= $this->unhandledProblems ?> <?= $this->translate('Unhandled Problems:') ?> <h3><?= $this->unhandledProblems ?> <?= $this->translate('Unhandled Problems:') ?>
<span class="badge badge-critical"> <?= $this->unhandledProblems ?> </span> <span class="badge badge-critical"> <?= $this->unhandledProblems ?> </span>
</h3> </h3>

2
modules/monitoring/application/views/scripts/tactical/components/hostservicechecks.phtml
View File

@ -1,4 +1,4 @@
<div class="box hostservicechecks"> <div class="box hostservicechecks col-1-2">
<div class="box header"> <div class="box header">
<h2><?= $this->translate('Host and Service Checks'); ?></h2> <h2><?= $this->translate('Host and Service Checks'); ?></h2>
</div> </div>

2
modules/monitoring/application/views/scripts/tactical/components/monitoringfeatures.phtml
View File

@ -1,4 +1,4 @@
<div class="box monitoringfeatures"> <div class="box monitoringfeatures col-1-2">
<div class="box header"> <div class="box header">
<h2><?= $this->translate('Monitoring Features'); ?></h2> <h2><?= $this->translate('Monitoring Features'); ?></h2>
</div> </div>

2
modules/monitoring/application/views/scripts/tactical/components/ok_hosts.phtml
View File

@ -8,7 +8,7 @@ $service_problems = (
$this->statusSummary->services_unknown_unhandled_on_ok_hosts $this->statusSummary->services_unknown_unhandled_on_ok_hosts
); );
?> ?>
<div class="box ok_hosts state_<?= $this->statusSummary->hosts_up ? 'up' : 'pending'; ?>"> <div class="box ok_hosts state_<?= $this->statusSummary->hosts_up ? 'up' : 'pending'; ?> col-1-2">
<div class="box header"> <div class="box header">
<?php if ($this->statusSummary->hosts_up): ?> <?php if ($this->statusSummary->hosts_up): ?>
<h2><?= $this->qlink( <h2><?= $this->qlink(

2
modules/monitoring/application/views/scripts/tactical/components/problem_hosts.phtml
View File

@ -3,7 +3,7 @@
if (!$this->statusSummary->hosts_down_unhandled && !$this->statusSummary->hosts_unreachable_unhandled) { if (!$this->statusSummary->hosts_down_unhandled && !$this->statusSummary->hosts_unreachable_unhandled) {
echo ' handled'; echo ' handled';
} }
?>"> ?> col-1-2">
<div class="box header"> <div class="box header">
<?php if ($this->statusSummary->hosts_down): ?> <?php if ($this->statusSummary->hosts_down): ?>
<h2><?= $this->qlink( <h2><?= $this->qlink(

2
modules/monitoring/application/views/scripts/tactical/index.phtml
View File

@ -3,7 +3,7 @@
<?= $this->tabs ?> <?= $this->tabs ?>
</div> </div>
<?php endif ?> <?php endif ?>
<div class="content tactical"> <div class="content tactical grid">
<div class="boxview" data-base-target="_next"> <div class="boxview" data-base-target="_next">
<?php if ($this->statusSummary->hosts_down || $this->statusSummary->hosts_unreachable): ?> <?php if ($this->statusSummary->hosts_down || $this->statusSummary->hosts_unreachable): ?>
<?= $this->render('tactical/components/problem_hosts.phtml'); ?> <?= $this->render('tactical/components/problem_hosts.phtml'); ?>

4
modules/monitoring/application/views/scripts/timeline/index.phtml
View File

@ -8,10 +8,10 @@ $firstRow = ! $beingExtended;
if (! $beingExtended && !$this->compact): ?> if (! $beingExtended && !$this->compact): ?>
<div class="controls"> <div class="controls">
<?= $this->tabs; ?> <?= $this->tabs; ?>
<div style="float: right;" class="dontprint"> <div class="dontprint">
<?= $intervalBox; ?> <?= $intervalBox; ?>
</div> </div>
<div style="margin: 1em;" class="timeline-legend"> <div class="timeline-legend">
<h2><?= $this->translate('Legend'); ?></h2> <h2><?= $this->translate('Legend'); ?></h2>
<?php foreach ($groupInfo as $labelAndColor): ?> <?php foreach ($groupInfo as $labelAndColor): ?>
<span style="background-color: <?= $labelAndColor['color']; ?>;"> <span style="background-color: <?= $labelAndColor['color']; ?>;">

104
modules/monitoring/public/css/module.less
View File

@ -23,7 +23,6 @@
vertical-align: top; vertical-align: top;
display: inline-block; display: inline-block;
padding: 20px; padding: 20px;
margin: 0.5em;
} }
@ -67,7 +66,6 @@
.tactical > .boxview > div.box { .tactical > .boxview > div.box {
min-height: 30em; min-height: 30em;
min-width: 30em;
} }
.tactical div.box.header { .tactical div.box.header {
@ -206,7 +204,6 @@ div.box.stats {
.stats > .boxview > div.box { .stats > .boxview > div.box {
min-height: 30em; min-height: 30em;
width:95%;
} }
.stats > .avp > tbody { .stats > .avp > tbody {
@ -232,6 +229,107 @@ div.box.stats {
padding-bottom: 15px; padding-bottom: 15px;
} }
/* Monitoring timeline styles */
div.timeline-legend {
padding: 0.5em;
margin-top: 2em;
border: 1px solid @gray-lighter;
border-left: 15px solid @gray;
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;
text-decoration: none;
white-space: nowrap;
&:hover {
text-decoration: underline;
}
}
}
div.circle-box {
height: 100%;
margin-right: 0.5em;
position: relative;
float: left;
div.outer-circle {
position: absolute;
top: 50%;
&.extrapolated {
border-width: 2px;
border-style: dotted;
border-radius: 100%;
}
a.inner-circle {
display: block;
position: absolute;
top: 50%;
left: 50%;
border-radius: 100%;
}
}
}
}
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 */
//p.pluginoutput { //p.pluginoutput {
// width: 100%; // width: 100%;