nicolas/librenms
1
0
Fork 0
mirror of https://github.com/stylersnico/librenms.git synced 2026-07-12 16:06:25 +02:00
Code Issues Packages Projects Releases Wiki Activity

Initial dashboard, code formatting is bad + lots needs tidying up

Browse Source
This commit is contained in:
laf
2015-07-21 23:01:57 +01:00
parent 1e323cdf80
commit 2f9dcc8fbd
11 changed files with 555 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Makefile
+3
View File
@@ -46,3 +46,6 @@ vis:
typeahead:
$(GIT_SUBTREE) -- prefix=lib/typeahead https://github.com/twitter/typeahead.js.git master
gridster:
$(GIT_SUBTREE) --prefix=lib/gridster https://github.com/ducksboard/gridster.js.git master
html/ajax_dash.php
+54
View File
@@ -0,0 +1,54 @@
<?php
/*
* LibreNMS
*
* Copyright (c) 2014 Neil Lathwood <https://github.com/laf/ http://www.lathwood.co.uk/fa>
*
* This program is free software: you can redistribute it and/or modify it
* under the terms of the GNU General Public License as published by the
* Free Software Foundation, either version 3 of the License, or (at your
* option) any later version. Please see LICENSE.txt at the top level of
* the source code distribution for details.
*/
if (isset($_REQUEST['debug'])) {
ini_set('display_errors', 1);
ini_set('display_startup_errors', 0);
ini_set('log_errors', 0);
ini_set('allow_url_fopen', 0);
ini_set('error_reporting', E_ALL);
}
require_once '../includes/defaults.inc.php';
require_once '../config.php';
require_once '../includes/definitions.inc.php';
require_once 'includes/functions.inc.php';
require_once '../includes/functions.php';
require_once 'includes/authenticate.inc.php';
if (!$_SESSION['authenticated']) {
echo 'unauthenticated';
exit;
}
$type = mres($_POST['type']);
if ($type == 'placeholder') {
$output = 'Please add a Widget to get started';
$status = 'ok';
}
elseif (is_file('includes/common/'.$type.'.inc.php')) {
include 'includes/common/'.$type.'.inc.php';
$output = implode('', $common_output);
$status = 'ok';
}
$response = array(
'status' => $status,
'html' => $output,
);
echo _json_encode($response);
html/css/jquery.gridster.min.css
Vendored Symlink
+1
View File
@@ -0,0 +1 @@
../../lib/gridster/dist/jquery.gridster.min.css
html/css/styles.css
+62
View File
@@ -1654,3 +1654,65 @@ tr.search:nth-child(odd) {
color: #FFFFFF;
}
.gridster * {
margin:0;
}
.grid ul {
list-style-type: none;
}
.gridster li {
font-size: 1em;
font-weight: bold;
text-align: center;
line-height: 100%;
}
.gridster {
margin: 0 auto;
opacity: .8;
-webkit-transition: opacity .6s;
-moz-transition: opacity .6s;
-o-transition: opacity .6s;
-ms-transition: opacity .6s;
transition: opacity .6s;
}
.gridster .gs-w {
background: #ffffff;
box-shadow: inset 0 0 2px #000;
color: 000000
cursor: pointer;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.gridster .player {
background: #BBB;
}
.gridster .preview-holder {
border: none!important;
background: red!important;
}
.tile_header {
padding: 0.8em;
background-color: #000000;
color: #ffffff;
-webkit-border-top-left-radius: 4px;
-moz-border-top-right-radius: 4px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.tile_body {
padding: 0.8em;
}
html/forms/update-dashboard-config.inc.php
+45
View File
@@ -0,0 +1,45 @@
<?php
$status = 'error';
$message = 'Error updating user dashboard config';
$data = json_decode($_POST['data'],true);
$sub_type = mres($_POST['sub_type']);
$tile_id = mres($_POST['tile_id']);
if ($sub_type == 'remove' && is_numeric($tile_id)) {
if ($tile_id == 0 || dbDelete('dashboard_items','`user_id`=? AND `dashboard_item_id`=?', array($_SESSION['user_id'],$tile_id))) {
$status = 'ok';
$message = '';
}
}
elseif ($sub_type == 'add' && is_numeric($tile_id)) {
$tile = dbFetchRow('SELECT * FROM `tiles` WHERE `tile_id`=?', array($tile_id));
if (is_array($tile)) {
list($x,$y) = explode(',',$tile['base_dimensions']);
$item_id = dbInsert(array('user_id'=>$_SESSION['user_id'],'widget_id'=>$tile_id,'title'=>$tile['tile_title'],'content'=>$tile['tile'],'size_x'=>$x,'size_y'=>$y),'dashboard_items');
if (is_numeric($item_id)) {
$extra = array('item_id'=>$item_id,'title'=>$tile['tile_title'],'content'=>$tile['tile'],'size_x'=>$x,'size_y'=>$y);
$status = 'ok';
$message = '';
}
}
}
else {
$status = 'ok';
$message = '';
foreach ($data as $line) {
if (is_array($line)) {
$update = array('col'=>$line['col'],'row'=>$line['row'],'size_x'=>$line['size_x'],'size_y'=>$line['size_y']);
dbUpdate($update, 'dashboard_items', '`dashboard_item_id`=?', array($line['id']));
}
}
}
$response = array(
'status' => $status,
'message' => $message,
'extra' => $extra,
);
echo _json_encode($response);
html/includes/common/alerts.inc.php
+89
View File
@@ -0,0 +1,89 @@
<?php
$common_output[] = '
<div class="row">
<div class="col-sm-12">
<span id="message"></span>
</div>
</div>
<div class="table-responsive">
<table id="alerts" class="table table-hover table-condensed alerts">
<thead>
<tr>
<th data-column-id="status" data-formatter="status" data-sortable="false">Status</th>
<th data-column-id="rule">Rule</th>
<th data-column-id="details" data-sortable="false">&nbsp;</th>
<th data-column-id="hostname">Hostname</th>
<th data-column-id="timestamp">Timestamp</th>
<th data-column-id="severity">Severity</th>
<th data-column-id="ack" data-formatter="ack" data-sortable="false">Acknowledge</th>
</tr>
</thead>
</table>
</div>
<script>
var grid = $("#alerts").bootgrid({
ajax: true,
post: function ()
{
return {
id: "alerts",
device_id: \'' . $device['device_id'] .'\'
};
},
url: "/ajax_table.php",
formatters: {
"status": function(column,row) {
return "<h4><span class=\'label label-"+row.extra+" threeqtr-width\'>" + row.msg + "</span></h4>";
},
"ack": function(column,row) {
return "<button type=\'button\' class=\'btn btn-"+row.ack_col+" btn-sm command-ack-alert\' data-target=\'#ack-alert\' data-state=\'"+row.state+"\' data-alert_id=\'"+row.alert_id+"\' name=\'ack-alert\' id=\'ack-alert\' data-extra=\'"+row.extra+"\'><span class=\'glyphicon glyphicon-"+row.ack_ico+"\'aria-hidden=\'true\'></span></button>";
}
},
templates: {
}
}).on("loaded.rs.jquery.bootgrid", function() {
grid.find(".incident-toggle").each( function() {
$(this).parent().addClass(\'incident-toggle-td\');
}).on("click", function(e) {
var target = $(this).data("target");
$(target).collapse(\'toggle\');
$(this).toggleClass(\'glyphicon-plus glyphicon-minus\');
});
grid.find(".incident").each( function() {
$(this).parent().addClass(\'col-lg-4 col-md-4 col-sm-4 col-xs-4\');
$(this).parent().parent().on("mouseenter", function() {
$(this).find(".incident-toggle").fadeIn(200);
}).on("mouseleave", function() {
$(this).find(".incident-toggle").fadeOut(200);
}).on("click", "td:not(.incident-toggle-td)", function() {
var target = $(this).parent().find(".incident-toggle").data("target");
if( $(this).parent().find(".incident-toggle").hasClass(\'glyphicon-plus\') ) {
$(this).parent().find(".incident-toggle").toggleClass(\'glyphicon-plus glyphicon-minus\');
$(target).collapse(\'toggle\');
}
});
});
grid.find(".command-ack-alert").on("click", function(e) {
e.preventDefault();
var alert_id = $(this).data("alert_id");
var state = $(this).data("state");
$.ajax({
type: "POST",
url: "/ajax_form.php",
data: { type: "ack-alert", alert_id: alert_id, state: state },
success: function(msg){
$("#message").html(\'<div class="alert alert-info">\'+msg+\'</div>\');
if(msg.indexOf("ERROR:") <= -1) {
location.reload();
}
},
error: function(){
$("#message").html(\'<div class="alert alert-info">An error occurred acking this alert.</div>\');
}
});
});
});
</script>';
html/includes/common/availability-map.inc.php
+45
View File
@@ -0,0 +1,45 @@
<?php
/*
* LibreNMS
*
* Copyright (c) 2015 Søren Friis Rosiak <sorenrosiak@gmail.com>
* This program is free software: you can redistribute it and/or modify it
* under the terms of the GNU General Public License as published by the
* Free Software Foundation, either version 3 of the License, or (at your
* option) any later version. Please see LICENSE.txt at the top level of
* the source code distribution for details.
*/
$sql = "SELECT `D`.`hostname`,`D`.`device_id`,`D`.`status`,`D`.`uptime` FROM `devices` AS `D`";
if (is_admin() === false && is_read() === false) {
$sql .= " , `devices_perms` AS P WHERE D.`device_id` = P.`device_id` AND P.`user_id` = ? AND";
$param = array($_SESSION['user_id']);
}
else {
$sql .= " WHERE";
}
$sql .= " `D`.`ignore` = '0' AND `D`.`disabled` = '0' ORDER BY `hostname`";
$temp_output = array();
foreach(dbFetchRows($sql,$param) as $device) {
if ($device['status'] == '1') {
$btn_type = 'btn-success';
if ($device['uptime'] < $config['uptime_warning']) {
$btn_type = 'btn-warning';
}
}
else {
$btn_type = 'btn-danger';
}
$temp_output[] = "<a href='" .generate_url(array('page' => 'device', 'device' => $device['device_id'])). "' role='button' class='btn " . $btn_type . " btn-xs' title='" . $device['hostname'] . "' style='min-height:25px; min-width:25px; border-radius:0px; border:0px; margin:0; padding:0;'></a>";
}
$temp_rows = count($temp_output);
$temp_output[] = "</div>";
$temp_header = array("<div style='margin-left:auto; margin-right:auto;'><center><h3>All Devices(" . $temp_rows . ")</h3></center>");
$common_output = array_merge($temp_header,$temp_output);
html/includes/common/device-summary-horiz.inc.php
+52
View File
@@ -0,0 +1,52 @@
<?php
require_once 'includes/object-cache.inc.php';
$temp_output = '
<div class="panel panel-default panel-condensed table-responsive">
<table class="table table-hover table-condensed table-striped">
<thead>
<tr class="info">
<th>&nbsp;</th>
<th>Total</th>
<th>Up</th>
<th>Down</th>
<th>Ignored</th>
<th>Disabled</th>
</tr>
</thead>
<tbody>
<tr class="active">
<td><a href="devices/">Devices</a></td>
<td><a href="devices/"><span>'.$devices['count'].'</span></a></td>
<td><a href="devices/state=up/format=list_detail/"><span class="green"> '.$devices['up'].' up</span></a></td>
<td><a href="devices/state=down/format=list_detail/"><span class="red"> '.$devices['down'].' down</span></a></td>
<td><a href="devices/ignore=1/format=list_detail/"><span class="grey"> '.$devices['ignored'].' ignored </span></a></td>
<td><a href="devices/disabled=1/format=list_detail/"><span class="black"> '.$devices['disabled'].' disabled</span></a></td>
</tr>
<tr class="active">
<td><a href="ports/">Ports</a></td>
<td><a href="ports/"><span>'.$ports['count'].'</span></a></td>
<td><a href="ports/format=list_detail/state=up/"><span class="green"> '.$ports['up'].' up </span></a></td>
<td><a href="ports/format=list_detail/state=down/"><span class="red"> '.$ports['down'].' down </span></a></td>
<td><a href="ports/format=list_detail/ignore=1/"><span class="grey"> '.$ports['ignored'].' ignored </span></a></td>
<td><a href="ports/format=list_detail/state=admindown/"><span class="black"> '.$ports['shutdown'].' shutdown</span></a></td>
</tr>';
if ($config['show_services']) {
$temp_output .= '
<tr class="active">
<td><a href="services/">Services</a></td>
<td><a href="services/"><span>'.$services['count'].'</span></a></td>
<td><a href="services/state=up/view=details/"><span class="green">'.$services['up'].' up</span></a></td>
<td><a href="services/state=down/view=details/"><span class="red"> '.$services['down'].' down</span></a></td>
<td><a href="services/ignore=1/view=details/"><span class="grey"> '.$services['ignored'].' ignored</span></a></td>
<td><a href="services/disabled=1/view=details/"><span class="black"> '.$services['disabled'].' disabled</span></a></td>
</tr>';
}
$temp_output .= '
</tbody>
</table>
</div>
';
$common_output[] = $temp_output;
html/index.php
+1
View File
@@ -138,6 +138,7 @@ else {
<link href="css/mktree.css" rel="stylesheet" type="text/css" />
<link href="css/vis.min.css" rel="stylesheet" type="text/css" />
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="css/jquery.gridster.min.css" rel="stylesheet" type="text/css" />
<link href="<?php echo($config['stylesheet']); ?>" rel="stylesheet" type="text/css" />
<link href="css/<?php echo $config['site_style']; ?>.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.min.js"></script>
html/js/jquery.gridster.min.js
Vendored Symlink
+1
View File
@@ -0,0 +1 @@
../../lib/gridster/dist/jquery.gridster.min.js
html/pages/front/tiles.php
+202
View File
@@ -0,0 +1,202 @@
<?php
$no_refresh = true;
foreach (dbFetchRows("SELECT * FROM `dashboard_items` WHERE `user_id`=?",array($_SESSION['user_id'])) as $items) {
$data[] = $items;
}
if (!is_array($data)) {
$data[] = array('dashboard_item_id'=>'0','widget_id'=>1,'title'=>'Add a widget','content'=>'placeholder','col'=>1,'row'=>1,'size_x'=>1,'size_y'=>1,'refresh'=>60);
}
$data = serialize(_json_encode($data));
$dash_config = unserialize(stripslashes($data));
$new_tile = '
<select id="tile_id" name="tile_id" class="form-control">
<option value="" disabled selected></option>
';
foreach (dbFetchRows("SELECT * FROM `tiles` ORDER BY `tile_title`") as $tiles) {
$new_tile .= '<option value="'. $tiles['tile_id'] .'">'. $tiles['tile_title'] .'</option>';
}
$new_title .= '
</select>
';
?>
<button type='button' id='new-tile' class='btn btn-primary btn-sm' name='new-dashboard-tile' data-html='true' data-container='body' data-toggle='popover' data-placement='right' data-content='<a href="#">
<?php
echo $new_tile;
?>
</a>'><span class='glyphicon glyphicon-plus' aria-hidden='true'></span></button>
<script>
$('#new-tile').popover();
</script>
<script src="js/jquery.gridster.min.js"></script>
<span class="message" id="message"></span>
<div class="row">
<div class="col-sm-12">
<div class="gridster grid">
<ul>
</ul>
</div>
</div>
<script type="text/javascript">
var gridster;
// same object than generated with gridster.serialize() method
var serialization = <?php echo $dash_config; ?>;
// sort serialization
serialization = Gridster.sort_by_row_and_col_asc(serialization);
function updatePos(gridster) {
var s = JSON.stringify(gridster.serialize());
$.ajax({
type: 'POST',
url: '/ajax_form.php',
data: {type: "update-dashboard-config", data: s},
dataType: "json",
success: function (data) {
if (data.status == 'ok') {
} else {
$("#message").html('<div class="alert alert-info">' + data.message + '</div>');
}
},
error: function () {
$("#message").html('<div class="alert alert-info">An error occurred.</div>');
}
});
}
$(function(){
gridster = $(".gridster ul").gridster({
widget_base_dimensions: [200, 200],
widget_margins: [5, 5],
autogrow_cols: true,
min_cols: 1,
min_rows: 2,
draggable: {
handle: 'header',
stop: function(e, ui, $widget) {
updatePos(gridster);
},
},
resize: {
enabled: true,
stop: function(e, ui, $widget) {
updatePos(gridster);
}
},
serialize_params: function($w, wgd) {
return {
id: $($w).attr('id'),
col: wgd.col,
row: wgd.row,
size_x: wgd.size_x,
size_y: wgd.size_y
};
}
}).data('gridster');
gridster.remove_all_widgets();
$.each(serialization, function() {
gridster.add_widget(
'<li id="'+this.dashboard_item_id+'">'+
'\<script\>var timeout'+this.dashboard_item_id+' = grab_data('+this.dashboard_item_id+','+this.refresh+',\''+this.content+'\');\<\/script\>'+
'<header class="tile_header">'+this.title+'<button type="button" class="close" data-tile-id="'+this.dashboard_item_id+'" aria-label="Close"><span aria-hidden="true">&times;</span></button></header>'+
'<div class="tile_body" id="tile_body_'+this.dashboard_item_id+'">'+this.content+'</div>'+
'</li>',
this.size_x, this.size_y, this.col, this.row);
});
var gridster = $('.gridster ul').gridster().data('gridster');
$(document).on( "click", ".close", function() {
var tile_id = $(this).data('tile-id');
$.ajax({
type: 'POST',
url: '/ajax_form.php',
data: {type: "update-dashboard-config", sub_type: 'remove', tile_id: tile_id},
dataType: "json",
success: function (data) {
if (data.status == 'ok') {
gridster.remove_widget($('#'+tile_id));
updatePos(gridster);
} else {
$("#message").html('<div class="alert alert-info">' + data.message + '</div>');
}
},
error: function () {
$("#message").html('<div class="alert alert-info">An error occurred.</div>');
}
});
});
$(document).on('change','#tile_id',function(){
var tile_id = $(this).val();
$.ajax({
type: 'POST',
url: '/ajax_form.php',
data: {type: "update-dashboard-config", sub_type: 'add', tile_id: tile_id},
dataType: "json",
success: function (data) {
if (data.status == 'ok') {
var item_id = data.extra.item_id;
var title = data.extra.title;
var content = data.extra.content;
var size_x = data.extra.size_x;
var size_y = data.extra.size_y;
gridster.add_widget(
'<li id="'+item_id+'">'+
'\<script\>var timeout'+item_id+' = grab_data('+item_id+',60,\''+content+'\');\<\/script\>'+
'<header class="tile_header">'+title+'<button type="button" class="close" data-tile-id="'+item_id+'" aria-label="Close"><span aria-hidden="true">&times;</span></button></header>'+
'<div class="tile_body" id="tile_body_'+item_id+'">'+content+'</div>'+
'</li>',
size_x, size_y);
$('#new-tile').popover('hide')
updatePos(gridster);
} else {
$("#message").html('<div class="alert alert-info">' + data.message + '</div>');
}
},
error: function () {
$("#message").html('<div class="alert alert-info">An error occurred.</div>');
}
});
});
});
function grab_data(id,refresh,data_type) {
new_refresh = refresh * 1000;
$.ajax({
type: 'POST',
url: '/ajax_dash.php',
data: {type: data_type},
dataType: "json",
success: function (data) {
if (data.status == 'ok') {
$("#tile_body_"+id).html(data.html);
} else {
$("#tile_body_"+id).html('<div class="alert alert-info">' + data.message + '</div>');
}
},
error: function () {
$("#tile_body_"+id).html('<div class="alert alert-info">Problem with backend</div>');
}
});
setTimeout(function() {
grab_data(id,refresh,data_type);
}, new_refresh);
}
</script>