webui: Update services pages

* Update services page

- Bring services overview page in line with the rest of the interface
using bootstrap classes, panels, colors etc.
- Getting rid of most of the tables using bootstrap's grid classes.

Device services page might need a bit more work but I'm not ready yet.

* Fix style check issues

* Bigger status labels
This commit is contained in:
Florian Beer
2017-02-23 00:53:17 +01:00
committed by Neil Lathwood
parent a8691680ab
commit ad58af6e6c
3 changed files with 53 additions and 46 deletions

View File

@@ -358,7 +358,6 @@ A.purple:visited, a.purple, .purple { color: #740074; }
.box-desc {
font-size: 12px;
font-style: italic;
}
.interface-desc {

View File

@@ -53,35 +53,32 @@ if (count($services) > '0') {
<?php
foreach ($services as $service) {
$service['service_ds'] = htmlspecialchars_decode($service['service_ds']);
if ($service['service_status'] == 0) {
$status = "<span class='green'>Ok</span>";
} elseif ($service['service_status'] == 1) {
$status = "<span class='red'>Warning</span>";
} elseif ($service['service_status'] == 2) {
$status = "<span class='red'>Critical</span>";
if ($service['service_status'] == '2') {
$status = "<span class='col-sm-12 label label-danger label-border'><b>".$service['service_type']."</b></span>";
} elseif ($service['service_status'] == '1') {
$status = "<span class='col-sm-12 label label-warning label-border'><b>".$service['service_type']."</b></span>";
} elseif ($service['service_status'] == '0') {
$status = "<span class='col-sm-12 label label-success label-border'><b>".$service['service_type']."</b></span>";
} else {
$status = "<span class='grey'>Unknown</span>";
$status = "<span class='col-sm-12 label label-info label-border'><b>".$service['service_type']."</b></span>";
}
?>
<tr id="row_<?php echo $service['service_id']?>">
<td>
<div class="col-sm-12">
<div class="col-sm-2"><?php echo $service['service_type']?></div>
<div class="col-sm-6"><?php echo $service['service_desc']?></div>
<div class="col-sm-2"><?php echo $status?></div>
<div class="pull-right">
<td class="col-sm-12">
<div class="col-sm-1"><?php echo $status?></div>
<div class="col-sm-2 text-muted"><?php echo formatUptime(time() - $service['service_changed'])?></div>
<div class="col-sm-2 text-muted"><?php echo $service['service_desc']?></div>
<div class="col-sm-5"><?php echo nl2br(trim($service['service_message']))?></div>
<div class="col-sm-2">
<div class="pull-right">
<?php
if (is_admin() === true) {
echo "<button type='button' class='btn btn-primary btn-sm' aria-label='Edit' data-toggle='modal' data-target='#create-service' data-service_id='{$service['service_id']}' name='edit-service'><i class='fa fa-pencil' aria-hidden='true'></i></button>
<button type='button' class='btn btn-danger btn-sm' aria-label='Delete' data-toggle='modal' data-target='#confirm-delete' data-service_id='{$service['service_id']}' name='delete-service'><i class='fa fa-trash' aria-hidden='true'></i></button";
}
?>
</div>
</div>
<div class="col-sm-12">
<div class="col-sm-8"><?php echo nl2br(trim($service['service_message']))?></div>
<div class="col-sm-4"><?php echo formatUptime(time() - $service['service_changed'])?></div>
</div>
</div>
<?php
if ($vars['view'] == 'details') {
// if we have a script for this check, use it.
@@ -102,18 +99,18 @@ if ($vars['view'] == 'details') {
$graph_array['service'] = $service['service_id'];
$graph_array['ds'] = $k;
?>
<tr><td colspan="5">
<div class="col-sm-12">
<?php
include 'includes/print-graphrow.inc.php';
?>
</div>
</td></tr>
<?php
}
}
}
?>
</td>
</tr>
</table>
<?php
} else {

View File

@@ -2,6 +2,11 @@
$pagetitle[] = 'Services';
?>
<div class="container-fluid">
<div class="row">
<?php
print_optionbar_start();
require_once 'includes/modal/new_service.inc.php';
@@ -88,15 +93,6 @@ if (isset($state)) {
?>
<div class="row col-sm-12"><span id="message"></span></div>
<table class="table table-hover table-condensed table-striped">
<tr>
<th>Device</th>
<th>Service</th>
<th>Changed</th>
<th>Message</th>
<th>Description</th>
<th>&nbsp;</th>
</tr>
<?php
if ($_SESSION['userlevel'] >= '5') {
$host_sql = 'SELECT `D`.`device_id`,`D`.`hostname` FROM devices AS D, services AS S WHERE D.device_id = S.device_id GROUP BY `D`.`hostname`, `D`.`device_id` ORDER BY D.hostname';
@@ -118,34 +114,49 @@ foreach (dbFetchRows($host_sql, $host_par) as $device) {
$sql_param[0] = $device_id;
}
foreach (dbFetchRows("SELECT * FROM `services` WHERE `device_id` = ? $where", $sql_param) as $service) {
$head=true;
foreach (dbFetchRows("SELECT * FROM `services` WHERE `device_id` = ? $where ORDER BY service_type", $sql_param) as $service) {
if ($service['service_status'] == '2') {
$status = "<span class='red'><b>".$service['service_type']."</b></span>";
$status = "<span class='col-sm-12 label label-danger threeqtr-width'><b>".$service['service_type']."</b></span>";
} elseif ($service['service_status'] == '1') {
$status = "<span class='col-sm-12 label label-warning threeqtr-width'><b>".$service['service_type']."</b></span>";
} elseif ($service['service_status'] == '0') {
$status = "<span class='green'><b>".$service['service_type']."</b></span>";
$status = "<span class='col-sm-12 label label-success threeqtr-width'><b>".$service['service_type']."</b></span>";
} else {
$status = "<span class='grey'><b>".$service['service_type']."</b></span>";
$status = "<span class='col-sm-12 label label-info threeqtr-width'><b>".$service['service_type']."</b></span>";
}
if ($head) {
echo '
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">'.$devlink.'</h3>
</div>
<div class="panel-body">
';
}
$head=false;
?>
<tr id="row_<?php echo $service['service_id']?>">
<td><?php echo $devlink?></td>
<td><?php echo $status?></td>
<td><?php echo formatUptime(time() - $service['service_changed'])?></td>
<td><span class='box-desc'><?php echo nl2br(display($service['service_message']))?></span></td>
<td><span class='box-desc'><?php echo nl2br(display($service['service_desc']))?></span></td>
<td>
<div class="row">
<div class="col-md-1"><h4><?php echo $status?></h4></div>
<div class="col-md-2"><div class="text-muted"><?php echo formatUptime(time() - $service['service_changed'])?></div></div>
<div class="col-md-3"><div class="text-muted"><span class='box-desc'><?php echo nl2br(display($service['service_desc']))?></div></span></div>
<div class="col-md-5"><span class='box-desc'><?php echo nl2br(display($service['service_message']))?></span></div>
<div class="col-md-1">
<?php
if (is_admin() === true) {
echo "<button type='button' class='btn btn-primary btn-sm' aria-label='Edit' data-toggle='modal' data-target='#create-service' data-service_id='{$service['service_id']}' name='edit-service'><i class='fa fa-pencil' aria-hidden='true'></i></button>
<button type='button' class='btn btn-danger btn-sm' aria-label='Delete' data-toggle='modal' data-target='#confirm-delete' data-service_id='{$service['service_id']}' name='delete-service'><i class='fa fa-trash' aria-hidden='true'></i></button>";
<button type='button' class='btn btn-danger btn-sm' aria-label='Delete' data-toggle='modal' data-target='#confirm-delete' data-service_id='{$service['service_id']}' name='delete-service'><i class='fa fa-trash' aria-hidden='true'></i></button>";
}
?>
</td>
</tr>
</div>
</div>
<div class="row"><div class="col-sm-12">&nbsp;</div></div>
<?php
}//end foreach
echo "</div></div>";
unset($samehost);
}//end foreach
?>
</table>
</div>
</div>