Merge pull request #1853 from QuxLabs/issue-1847

2026-07-12 16:06:25 +02:00 · 2015-09-06 15:45:39 +02:00
parent 329ac37294 64f1f3a636
commit 2fb8b1021b
9 changed files with 304 additions and 80 deletions
@@ -30,20 +30,30 @@ $type = mres($_POST['type']);
 if ($type == 'placeholder') {
    $output = 'Please add a Widget to get started';
    $status = 'ok';
+    $title = 'Placeholder';
 }
 elseif (is_file('includes/common/'.$type.'.inc.php')) {

-    $results_limit = 10;
-    $no_form = true;
+    $results_limit     = 10;
+    $no_form           = true;
+    $title             = ucfirst($type);
+    $unique_id         = str_replace(array("-","."),"_",uniqid($type,true));
+    $widget_id         = mres($_POST['id']);
+    $widget_settings   = json_decode(dbFetchCell('select settings from users_widgets where user_widget_id = ?',array($widget_id)),true);
+    $widget_dimensions = $_POST['dimensions'];
+    if( !empty($_POST['settings']) ) {
+        define('show_settings',true);
+    }
    include 'includes/common/'.$type.'.inc.php';
    $output = implode('', $common_output);
    $status = 'ok';
-
+    $title  = $widget_settings['title'] ?: $title;
 }

 $response = array(
                  'status' => $status,
                  'html' => $output,
+                  'title' => $title,
                 );

 echo _json_encode($response);
@@ -0,0 +1,122 @@
+<?php
+/* Copyright (C) 2015 Daniel Preussker, QuxLabs UG <preussker@quxlabs.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.
+ * 
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.See the
+ * GNU General Public License for more details.
+ * 
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>. */
+
+/**
+ * Generic Graph Widget
+ * @author Daniel Preussker
+ * @copyright 2015 Daniel Preussker, QuxLabs UG
+ * @license GPL
+ * @package LibreNMS
+ * @subpackage Widgets
+ */
+
+if( defined('show_settings') || empty($widget_settings) ) {
+    $common_output[] = '
+<form class="form" onsubmit="widget_settings(this); return false;">
+  <div class="form-group">
+    <label for="device_id" class="col-sm-2 control-label">Device: </label>
+    <div class="col-sm-10">
+      <input type="text" class="form-control input-sm widget-device-input-'.$unique_id.'" name="graph_device" placeholder="Device Name" value="'.$widget_settings['graph_device'].'">
+    </div>
+  </div>
+  <div class="form-group">
+    <label for="graph_type" class="col-sm-2 control-label">Graph: </label>
+    <div class="col-sm-8">
+      <select class="form-control input-sm" name="graph_type">';
+    foreach (get_graph_subtypes('device') as $avail_type) {
+        $common_output[] = '<option value="device_'.$avail_type.'"';
+        if ('device_'.$avail_type == $widget_settings['graph_type']) {
+            $common_output[] = " selected";
+        }
+        $display_type = is_mib_graph('device', $avail_type) ? $avail_type : nicecase($avail_type);
+        $common_output[] = '>'.$display_type.'</option>';
+    }
+    $common_output[] = '
+      </select>
+    </div>
+    <div class="col-sm-offset-10 col-sm-2">
+      <div class="checkbox input-sm">
+        <label>
+          <input type="checkbox" name="graph_legend" class="widget_setting" value="1" '.($widget_settings['graph_legend'] ? 'checked' : '').'> Legend
+        </label>
+      </div>
+    </div>
+  </div>
+  <button type="submit" class="btn btn-default">Set</button>
+</form>
+<style>
+.twitter-typeahead {
+  width: 100%;
+}
+</style>
+<script>
+function '.$unique_id.'() {
+  var '.$unique_id.' = new Bloodhound({
+    datumTokenizer: Bloodhound.tokenizers.obj.whitespace("name"),
+    queryTokenizer: Bloodhound.tokenizers.whitespace,
+    remote: {
+      url: "ajax_search.php?search=%QUERY&type=device&map=1",
+        filter: function (output) {
+            return $.map(output, function (item) {
+                return {
+                    name: item.name,
+                };
+            });
+        },
+      wildcard: "%QUERY"
+    }
+  });
+  '.$unique_id.'.initialize();
+  $(".widget-device-input-'.$unique_id.'").typeahead({
+    hint: true,
+    highlight: true,
+    minLength: 1,
+    classNames: {
+        menu: "typeahead-left"
+    }
+  },
+  {
+    source: '.$unique_id.'.ttAdapter(),
+    async: true,
+    displayKey: "name",
+    valueKey: "name",
+    templates: {
+      header: "<h5><strong>&nbsp;Devices</strong></h5>",
+      suggestion: Handlebars.compile("<p>&nbsp;{{name}}</p>")
+    }
+  });
+}
+</script>
+<script>
+$(function() { '.$unique_id.'(); });
+</script>';
+}
+else {
+    $widget_settings['device_id'] = dbFetchCell('select device_id from devices where hostname = ?',array($widget_settings['graph_device']));
+    $widget_settings['title']     = $widget_settings['graph_device']." / ".$widget_settings['graph_type'];
+    $common_output[]              = generate_minigraph_image(
+                                        array('device_id'=>(int) $widget_settings['device_id']),
+                                        $config['time']['day'],
+                                        $config['time']['now'],
+                                        $widget_settings['graph_type'],
+                                        $widget_settings['graph_legend'] == 1 ? 'yes' : 'no',
+                                        $widget_dimensions['x'],
+                                        $widget_dimensions['y'],
+                                        '&',
+                                        'minigraph-image',
+                                        1
+                                    );
+}
+
@@ -20,22 +20,14 @@ elseif ($sub_type == 'remove-all') {
    }
 }
 elseif ($sub_type == 'add' && is_numeric($widget_id)) {
-    $dupe_check = dbFetchCEll('SELECT `user_widget_id` FROM `users_widgets` WHERE `user_id`=? AND `widget_id`=?',array($_SESSION['user_id'],$widget_id));
-
-    if (is_numeric($dupe_check)) {
-        $message = 'This widget has already been added';
-    }
-    else {
-
-        $widget = dbFetchRow('SELECT * FROM `widgets` WHERE `widget_id`=?', array($widget_id));
-        if (is_array($widget)) {
-            list($x,$y) = explode(',',$widget['base_dimensions']);
-            $item_id = dbInsert(array('user_id'=>$_SESSION['user_id'],'widget_id'=>$widget_id, 'col'=>1,'row'=>1,'refresh'=>60,'title'=>$widget['widget_title'],'size_x'=>$x,'size_y'=>$y),'users_widgets');
-            if (is_numeric($item_id)) {
-                $extra = array('widget_id'=>$item_id,'title'=>$widget['widget_title'],'widget'=>$widget['widget'],'size_x'=>$x,'size_y'=>$y);
-                $status = 'ok';
-                $message = '';
-            }
+    $widget = dbFetchRow('SELECT * FROM `widgets` WHERE `widget_id`=?', array($widget_id));
+    if (is_array($widget)) {
+        list($x,$y) = explode(',',$widget['base_dimensions']);
+        $item_id = dbInsert(array('user_id'=>$_SESSION['user_id'],'widget_id'=>$widget_id, 'col'=>1,'row'=>1,'refresh'=>60,'title'=>$widget['widget_title'],'size_x'=>$x,'size_y'=>$y),'users_widgets');
+        if (is_numeric($item_id)) {
+            $extra = array('user_widget_id'=>$item_id,'widget_id'=>$item_id,'title'=>$widget['widget_title'],'widget'=>$widget['widget'],'refresh'=>60,'size_x'=>$x,'size_y'=>$y);
+            $status = 'ok';
+            $message = '';
        }
    }
 }
@@ -0,0 +1,51 @@
+<?php
+/* Copyright (C) 2015 Daniel Preussker, QuxLabs UG <preussker@quxlabs.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.
+ * 
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.See the
+ * GNU General Public License for more details.
+ * 
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>. */
+
+/**
+ * Store per-widget settings
+ * @author Daniel Preussker
+ * @copyright 2015 Daniel Preussker, QuxLabs UG
+ * @license GPL
+ * @package LibreNMS
+ * @subpackage Widgets
+ */
+
+$status    = 'error';
+$message   = 'unknown error';
+$widget_id = (int) $_REQUEST['id'];
+
+if ($widget_id < 1) {
+    $status  = 'error';
+    $message = 'ERROR: malformed widget ID.';
+}
+else {
+    $widget_settings = $_REQUEST['settings'];
+    if (!is_array($widget_settings)) {
+        $widget_settings = array();
+    }
+    if (dbUpdate(array('settings'=>json_encode($widget_settings)),'users_widgets','user_widget_id=?',array($widget_id))) {
+        $status  = 'ok';
+        $message = 'Updated';
+    }
+    else {
+        $status  = 'error';
+        $message = 'ERROR: Could not update';
+    }
+}
+
+die(json_encode(array(
+    'status'  => $status,
+    'message' => $message
+)));
@@ -181,8 +181,8 @@ function get_percentage_colours($percentage) {
 }//end get_percentage_colours()


-function generate_minigraph_image($device, $start, $end, $type, $legend='no', $width=275, $height=100, $sep='&amp;', $class='minigraph-image') {
-    return '<img class="'.$class.'" src="graph.php?'.implode($sep, array('device='.$device['device_id'], "from=$start", "to=$end", "width=$width", "height=$height", "type=$type", "legend=$legend")).'">';
+function generate_minigraph_image($device, $start, $end, $type, $legend='no', $width=275, $height=100, $sep='&amp;', $class='minigraph-image',$absolute_size=0) {
+    return '<img class="'.$class.'" src="graph.php?'.implode($sep, array('device='.$device['device_id'], "from=$start", "to=$end", "width=$width", "height=$height", "type=$type", "legend=$legend", "absolute=$absolute_size")).'">';

 }//end generate_minigraph_image()

@@ -103,3 +103,7 @@ else {
 }

 $rrd_options .= ' --font-render-mode normal';
+
+if (isset($_GET['absolute']) && $_GET['absolute'] == "1") {
+    $rrd_options .= ' --full-size-mode';
+}
@@ -18,7 +18,7 @@

 $no_refresh = true;

-foreach (dbFetchRows('SELECT * FROM `users_widgets` LEFT JOIN `widgets` ON `widgets`.`widget_id`=`users_widgets`.`widget_id` WHERE `user_id`=?',array($_SESSION['user_id'])) as $items) {
+foreach (dbFetchRows('SELECT user_widget_id,users_widgets.widget_id,title,widget,col,row,size_x,size_y,refresh FROM `users_widgets` LEFT JOIN `widgets` ON `widgets`.`widget_id`=`users_widgets`.`widget_id` WHERE `user_id`=?',array($_SESSION['user_id'])) as $items) {
    $data[] = $items;
 }

@@ -96,38 +96,32 @@ foreach (dbFetchRows("SELECT * FROM `widgets` ORDER BY `widget_title`") as $widg
            widget_margins: [5, 5],
            avoid_overlapped_widgets: true,
            draggable: {
-                handle: 'header',
+                handle: 'header, span',
                stop: function(e, ui, $widget) {
                    updatePos(gridster);
                },
            },
            resize: {
                enabled: true,
-                stop: function(e, ui, $widget) {
+                stop: function(e, ui, widget) {
                    updatePos(gridster);
+                    widget_reload(widget.attr('id'),widget.data('type'));
                }
            },
-            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 
+            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.user_widget_id+'">'+
-                '\<script\>var timeout'+this.user_widget_id+' = grab_data('+this.user_widget_id+','+this.refresh+',\''+this.widget+'\');\<\/script\>'+
-                '<header class="widget_header">'+this.title+'<button style="color: #ffffff" type="button" class="close close-widget" data-widget-id="'+this.user_widget_id+'" aria-label="Close"><span aria-hidden="true">&times;</span></button></header>'+
-                '<div class="widget_body" id="widget_body_'+this.user_widget_id+'">'+this.widget+'</div>'+
-                '</li>',
-                parseInt(this.size_x), parseInt(this.size_y), parseInt(this.col), parseInt(this.row)
-            );
+            widget_dom(this);
        });

        $(document).on('click','#clear_widgets', function() {
@@ -160,19 +154,7 @@ foreach (dbFetchRows("SELECT * FROM `widgets` ORDER BY `widget_title`") as $widg
                dataType: "json",
                success: function (data) {
                    if (data.status == 'ok') {
-                        var widget_id = data.extra.widget_id;
-                        var title = data.extra.title;
-                        var widget = data.extra.widget;
-                        var size_x = data.extra.size_x;
-                        var size_y = data.extra.size_y;
-                        gridster.add_widget(
-                            '<li id="'+widget_id+'">'+
-                            '\<script\>var timeout'+widget_id+' = grab_data('+widget_id+',60,\''+widget+'\');\<\/script\>'+
-                            '<header class="widget_header">'+title+'<button type="button" class="close close-widget" data-widget-id="'+widget_id+'" aria-label="Close"><span aria-hidden="true">&times;</span></button></header>'+
-                            '<div class="widget_body" id="widget_body_'+widget_id+'">'+widget+'</div>'+
-                            '</li>',
-                            parseInt(size_x), parseInt(size_y)
-                        );
+                        widget_dom(data.extra);
                        updatePos(gridster);
                    }
                    else {
@@ -207,33 +189,96 @@ foreach (dbFetchRows("SELECT * FROM `widgets` ORDER BY `widget_title`") as $widg
            });
        });

+        $(document).on("click",".edit-widget",function() {
+            obj = $(this).parent().parent();
+            if( obj.data('settings') == 1 ) {
+                obj.data('settings','0');
+            } else {
+                obj.data('settings','1');
+            }
+            widget_reload(obj.attr('id'),obj.data('type'));
+        });
+
   });

-   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') {
-                   $("#widget_body_"+id).html(data.html);
-               }
-               else {
-                   $("#widget_body_"+id).html('<div class="alert alert-info">' + data.message + '</div>');
-               }
-           },
-           error: function () {
-               $("#widget_body_"+id).html('<div class="alert alert-info">Problem with backend</div>');
-           }
-       });
-     
-       setTimeout(function() {
-           grab_data(id,refresh,data_type);
-       },
-       new_refresh);
-   }
-$('#new-widget').popover();
+    function widget_dom(data) {
+        dom = '<li id="'+data.user_widget_id+'" data-type="'+data.widget+'">'+
+              '<header class="widget_header"><span id="widget_title_'+data.user_widget_id+'">'+data.title+'</span>'+
+              '<button style="color: #ffffff;" type="button" class="fa fa-times close close-widget" data-widget-id="'+data.user_widget_id+'" aria-label="Close">&nbsp;</button>'+
+              '<button style="color: #ffffff;" type="button" class="fa fa-pencil-square-o close edit-widget" data-widget-id="'+data.user_widget_id+'" aria-label="Settings">&nbsp;</button>'+
+              '</header>'+
+              '<div class="widget_body" id="widget_body_'+data.user_widget_id+'" style="height: 100%; width:100%;">'+data.widget+'</div>'+
+              '\<script\>var timeout'+data.user_widget_id+' = grab_data('+data.user_widget_id+','+data.refresh+',\''+data.widget+'\');\<\/script\>'+
+              '</li>';
+        if (data.hasOwnProperty('col') && data.hasOwnProperty('row')) {
+            gridster.add_widget(dom, parseInt(data.size_x), parseInt(data.size_y), parseInt(data.col), parseInt(data.row));
+        } else {
+            gridster.add_widget(dom, parseInt(data.size_x), parseInt(data.size_y));
+        }
+    }

+    function widget_settings(data) {
+        var widget_settings = {};
+        var widget_id = 0;
+        datas = $(data).serializeArray();
+        for( var field in datas ) {
+            widget_settings[datas[field].name] = datas[field].value;
+        }
+        $('.gridster').find('div[id^=widget_body_]').each(function() {
+            if(this.contains(data)) {
+                widget_id = $(this).parent().attr('id');
+                widget_type = $(this).parent().data('type');
+                $(this).parent().data('settings','0');
+            }
+        });
+        if( widget_id > 0 && widget_settings != {} ) {
+            $.ajax({
+                type: 'POST',
+                url: 'ajax_form.php',
+                data: {type: 'widget-settings', id: widget_id, settings: widget_settings},
+                dataType: "json",
+                success: function (data) {
+                    if( data.status == "ok" ) {
+                        widget_reload(widget_id,widget_type);
+                    }
+                }
+            });
+        }
+    }
+
+    function widget_reload(id,data_type) {
+        if( $("#widget_body_"+id).parent().data('settings') == 1 ) {
+            settings = 1;
+        } else {
+            settings = 0;
+        }
+        $.ajax({
+            type: 'POST',
+            url: 'ajax_dash.php',
+            data: {type: data_type, id: id, dimensions: {x:$("#widget_body_"+id).innerWidth()-50, y:$("#widget_body_"+id).innerHeight()-50}, settings:settings},
+            dataType: "json",
+            success: function (data) {
+                if (data.status == 'ok') {
+                    $("#widget_title_"+id).html(data.title);
+                    $("#widget_body_"+id).html(data.html);
+                }
+                else {
+                    $("#widget_body_"+id).html('<div class="alert alert-info">' + data.message + '</div>');
+                }
+            },
+            error: function () {
+                $("#widget_body_"+id).html('<div class="alert alert-info">Problem with backend</div>');
+            }
+        });
+    }
+
+    function grab_data(id,refresh,data_type) {
+        new_refresh = refresh * 1000;
+        widget_reload(id,data_type);
+        setTimeout(function() {
+            grab_data(id,refresh,data_type);
+        },
+        new_refresh);
+    }
+    $('#new-widget').popover();
 </script>
@@ -693,9 +693,7 @@ function get_graph_subtypes($type) {

    // find the MIB subtypes
    foreach ($config['graph_types'] as $type => $unused1) {
-        print_r($type);
        foreach ($config['graph_types'][$type] as $subtype => $unused2) {
-            print_r($subtype);
            if (is_mib_graph($type, $subtype)) {
                $types[] = $subtype;
            }
@@ -0,0 +1,2 @@
+alter table users_widgets add column `settings` text not null;
+insert into widgets values(null,'Graph','generic-graph','6,2');