upstream/icingaweb2-module-businessprocess
1
0
Fork 0
mirror of https://github.com/Icinga/icingaweb2-module-businessprocess.git synced 2026-01-05 13:19:35 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

test/layout: first experiments with new structure

Browse source
This commit is contained in:
Thomas Gelf 2014-10-20 19:01:32 +02:00
parent d759fec27b
commit ad6475d618
2 changed files with 196 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

66
application/views/scripts/test/layout.phtml
View file

@ -1,3 +1,69 @@
<?php
$bp = (object) [
'operator' => 'or',
'status' => 'ok',
'handled' => false,
'children' => [
'DNS Service' => (object) [
'status' => 'ok',
'handled' => false,
'children' => [],
],
'Exchange' => (object) [
'operator' => 'and',
'status' => 'critical',
'handled' => false,
'children' => [
'Exchange 1' => (object) [
'status' => 'critical',
'handled' => false,
'children' => [],
],
'Exchange 2' => (object) [
'status' => 'warning',
'handled' => true,
'children' => [],
],
'Exchange 3' => (object) [
'status' => 'ok',
'handled' => false,
'children' => [],
]
],
]
]
];
function renderProcess($name, $process)
{
$html = sprintf('<table class="bp %s%s%s">
<tbody>
<tr><th%s><a href="#">%s</a></th><td><a href="#">%s</a></td></tr>
',
$process->status,
$process->handled ? ' handled' : '',
empty($process->children) ? '' : ' operator',
empty($process->children) ? ' class="service"' : sprintf(' rowspan="%d"', count($process->children) + 1),
empty($process->children) ? '&nbsp;' : $process->operator,
$name
);
if (! empty($process->children)) {
// $html .= '<tbody>
//';
foreach ($process->children as $name => $child) {
$html .= '<tr><td>' . renderProcess($name, $child) . '</td></tr>';
}
// $html .= '</tbody>';
}
$html .= '</tbody></table>';
return $html;
}
?>
<div class="content">
<h1>Testlayout</h1>
<?= renderProcess('Mail Process', $bp) ?>
</div>

130
public/css/module.less
View file

@ -190,3 +190,133 @@ span.collapsible {
color: transparent;
}
table.bp {
width: 100%;
}
table.bp td {
margin-bottom: 2px;
}
table.bp {
border-collapse: collapse;
border-spacing: 0;
}
/*
// TEST BORDER
table.bp {
border-collapse: separate;
border-spacing: 2px;
}
table.bp th {
border: 3px solid black;
}
table.bp td {
border: 1px solid black;
}
*/
table.bp {
margin: 0;
padding: 0;
}
table.bp table.bp {
margin-top: 0.5em;
margin-bottom: 0.2em;
margin-left: 0.2em;
}
table.bp td {
padding: 0;
}
table.bp > tbody > tr > th.service {
width: 1em;
}
table.bp th > a, table.bp td > a {
display: block;
text-decoration: none;
border: 1px solid transparent;
}
table.bp th > a {
width: 2em;
min-height: 1.6em;
}
table.bp td > a {
line-height: 1.6em;
padding-left: 0.2em;
}
table.bp th > a:hover, table.bp td > a:hover {
text-decoration: none;
display: block;
border: 1px solid black;
}
table.bp > tbody > tr > th {
color: white;
background-color: @colorUnknown;
border-left: 3px solid transparent;
width: 2em;
}
table.bp.ok > tbody > tr > th {
border-color: @colorOk;
background-color: transparent;
}
table.bp.warning > tbody > tr > th {
border-color: @colorWarning;
background-color: @colorWarning;
}
table.bp.critical > tbody > tr > th {
border-color: @colorCritical;
background-color: @colorCritical;
}
table.bp.handled > tbody > tr > th {
background-color: transparent;
}
table.bp > tbody > tr:first-child > * {
border-top: 3px solid transparent;
}
table.bp > tbody > tr > th {
border-left: 3px solid transparent;
border-bottom: 3px solid transparent;
}
table.bp.operator > tbody > tr > th {
border-bottom: none;
}
table.bp.ok.operator > tbody > tr:first-child > * {
border-color: @colorOk;
}
table.bp.warning.operator > tbody > tr:first-child > * {
border-color: @colorWarning;
}
table.bp.critical.operator > tbody > tr:first-child > * {
border-color: @colorCritical;
}
.service {
background-image: url('../img/icons/host.png');
background-repeat: no-repeat;
background-position: 0.5em 0.5em;
}