Merge branch 'ent-8621-copiando-a-grafana-4-color-tabs-como-widget-en-dashboard' into 'develop'

add new widget color tabs module pandora_enterprise#8621

See merge request artica/pandorafms!4896

pandora_console/include/functions_graph.php

@@ -3015,7 +3015,7 @@ function graph_sla_slicebar(
         true,
         $ttl,
         false,
-        false,
+        true,
         $date
     );
 }
@@ -3959,7 +3959,7 @@ function graph_graphic_agentevents(
         EVENT_CRIT_CRITICAL => COL_CRITICAL,
     ];
 
-    // Draw slicebar graph
+    // Draw slicebar graph.
     $out = flot_slicesbar_graph(
         $data,
         $period,
@@ -3978,6 +3978,7 @@ function graph_graphic_agentevents(
         $not_interactive,
         1,
         $widgets,
+        true,
         $server_id
     );
 

pandora_console/include/functions_html.php

@@ -983,6 +983,14 @@ function html_print_select(
         if ($select2_multiple_enable === true
             && $select2_multiple_enable_all === true
         ) {
+            $output .= 'if($("#'.$id.' > option").length !== $("#'.$id.' > option:selected").length) {
+                checked = false;
+            } else {
+                checked = true;
+            }
+
+            $("#checkbox-'.$id.'-check-all").prop("checked", checked);';
+
             $output .= '$("#'.$id.'").on("change", function(e) {
                 var checked = false;
                 if(e.target.length !== $("#'.$id.' > option:selected").length) {
@@ -994,8 +1002,6 @@ function html_print_select(
                 $("#checkbox-'.$id.'-check-all").prop("checked", checked);
             });';
 
-            $output .= '$("#'.$id.'").trigger("change");';
-
             $output .= 'var count_shift_'.$id.' = 0;';
             $output .= 'var shift_array_'.$id.' = [];';
             $output .= 'var options_selecteds_'.$id.' = [];';
@@ -5449,6 +5455,108 @@ function html_print_input($data, $wrapper='div', $input_only=false)
             );
         break;
 
+        case 'select_multiple_modules_filtered_select2':
+            $output .= '<li class="agents_select2">';
+            $output .= html_print_label(__('Agents'), '', true);
+            $output .= html_print_select(
+                $data['agent_values'],
+                $data['agent_name'],
+                $data['agent_ids'],
+                'agent_multiple_change(this, \''.base64_encode(json_encode($data)).'\')',
+                '',
+                0,
+                true,
+                true,
+                true,
+                '',
+                false,
+                'min-width: 150px; max-height: 100px',
+                false,
+                false,
+                false,
+                '',
+                false,
+                false,
+                false,
+                false,
+                true,
+                true,
+                true
+            );
+            $output .= '</li>';
+
+            // $output .= html_print_input_hidden(
+            // 'id_agents2-multiple-text',
+            // json_encode($agents_select)
+            // );
+            $selection = [
+                0 => __('Show common modules'),
+                1 => __('Show all modules'),
+            ];
+
+            $output .= '<li>';
+            $output .= html_print_label(__('Type'), '', true);
+            $output .= html_print_select(
+                $selection,
+                $data['selectionModulesNameId'],
+                $data['selectionModules'],
+                'selection_multiple_change(\''.base64_encode(json_encode($data)).'\')',
+                '',
+                0,
+                true,
+                false,
+                true,
+                '',
+                false,
+                'min-width: 180px'
+            );
+            $output .= '</li>';
+
+            $all_modules = [];
+            if (empty($data['agent_ids']) === false) {
+                $all_modules = get_modules_agents(
+                    0,
+                    $data['agent_ids'],
+                    $data['selectionModules'],
+                    true
+                );
+            }
+
+            $output .= '<li class="modules_select2">';
+            $output .= html_print_label(__('Modules'), '', true);
+            $output .= html_print_select(
+                $all_modules,
+                $data['modules_name'],
+                $data['modules_ids'],
+                '',
+                '',
+                0,
+                true,
+                true,
+                true,
+                '',
+                false,
+                'min-width: 150px; max-width: 500px; max-height: 100px',
+                false,
+                false,
+                false,
+                '',
+                false,
+                false,
+                false,
+                false,
+                true,
+                true,
+                true
+            );
+            $output .= '</li>';
+
+            // $output .= html_print_input_hidden(
+            // 'module-multiple-text',
+            // json_encode($agents_select)
+            // );
+        break;
+
         default:
             // Ignore.
         break;

pandora_console/include/functions_modules.php

@@ -2820,6 +2820,40 @@ function modules_get_color_status($status, $force_module=false)
 }
 
 
+/**
+ * Text color status.
+ *
+ * @param string $status Type status.
+ *
+ * @return string Color.
+ */
+function modules_get_textcolor_status($status)
+{
+    $result = '#ffffff';
+    switch ($status) {
+        case AGENT_MODULE_STATUS_WARNING:
+        case AGENT_MODULE_STATUS_CRITICAL_ALERT:
+        case AGENT_MODULE_STATUS_WARNING_ALERT:
+        case AGENT_MODULE_STATUS_NORMAL_ALERT:
+            $result = '#000000';
+        break;
+
+        case AGENT_MODULE_STATUS_CRITICAL_BAD:
+        case AGENT_MODULE_STATUS_NOT_NORMAL:
+        case AGENT_MODULE_STATUS_NO_DATA:
+        case AGENT_MODULE_STATUS_NOT_INIT:
+        case AGENT_MODULE_STATUS_NORMAL:
+        case AGENT_MODULE_STATUS_ALL:
+        case AGENT_MODULE_STATUS_UNKNOWN:
+        default:
+            $result = '#ffffff';
+        break;
+    }
+
+    return $result;
+}
+
+
 /**
  * Gets a module status an modify the status and title reference variables
  *
@@ -3630,7 +3664,7 @@ function get_modules_agents($id_module_group, $id_agents, $selection, $select_mo
             }
         }
 
-        if (!$selection) {
+        if (!$selection && $useName === true) {
             // Common modules.
             $final_modules = [];
             $nodes_consulted = count($modules);
@@ -3732,6 +3766,10 @@ function get_same_modules($agents, array $modules=[])
         return [];
     }
 
+    if (is_array($modules) === false || empty($modules) === true) {
+        return [];
+    }
+
     $name_modules = modules_get_agentmodule_name_array_data(
         array_values($modules)
     );

pandora_console/include/functions_reporting.php

@@ -14623,6 +14623,16 @@ function reporting_module_histogram_graph($report, $content, $pdf=0)
         );
     }
 
+    $showLabelTicks = true;
+    if (isset($content['showLabelTicks']) === true) {
+        $showLabelTicks = $content['showLabelTicks'];
+    }
+
+    $height_graph = 80;
+    if (isset($content['height_graph']) === true) {
+        $height_graph = $content['height_graph'];
+    }
+
     $return['title'] = $title;
     $return['landscape'] = $content['landscape'];
     $return['pagebreak'] = $content['pagebreak'];
@@ -14871,7 +14881,6 @@ function reporting_module_histogram_graph($report, $content, $pdf=0)
     ];
 
     $width_graph  = 100;
-    $height_graph = 80;
     if (empty($array_result) === false) {
         $return['chart'] = flot_slicesbar_graph(
             $array_result,
@@ -14882,7 +14891,7 @@ function reporting_module_histogram_graph($report, $content, $pdf=0)
             $colors,
             $config['fontpath'],
             $config['round_corner'],
-            $homeurl,
+            $config['homeurl'],
             '',
             '',
             false,
@@ -14891,7 +14900,7 @@ function reporting_module_histogram_graph($report, $content, $pdf=0)
             true,
             $ttl,
             $content['sizeForTicks'],
-            true,
+            $showLabelTicks,
             $report['datetime']
         );
     } else {

pandora_console/include/functions_reporting_html.php

@@ -5967,7 +5967,7 @@ function reporting_get_event_histogram($events, $text_header_event=false)
             true,
             1,
             false,
-            false
+            true
         );
 
         $table->data[0][0] = $slicebar;
@@ -6126,7 +6126,7 @@ function reporting_get_event_histogram_meta($width, $events)
             true,
             1,
             false,
-            false
+            true
         );
 
         $table->data[0][0] = $slicebar;

pandora_console/include/functions_treeview.php

@@ -817,7 +817,7 @@ function treeview_printTable($id_agente, $server_data=[], $no_head=false)
     $events_graph .= graph_graphic_agentevents(
         $id_agente,
         '340px;margin:0',
-        '130px',
+        '60px',
         SECONDS_1DAY,
         '',
         true,

pandora_console/include/graphs/flot/pandora.flot.js

@@ -816,13 +816,13 @@ function pandoraFlotSlicebar(
       }
     },
     grid: {
-      borderWidth: 1,
+      borderWidth: 0,
-      borderColor: "#C1C1C1",
+      borderColor: "transparent",
       tickColor: "#fff"
     },
     xaxes: [
       {
-        show: true,
+        show: show_date,
         tickFormatter: xFormatter,
         color: "",
         tickSize: intervaltick,

pandora_console/include/javascript/pandora.js

@@ -1,4 +1,4 @@
-/* global $ */
+/* global $ jQuery */
 /* exported load_modal */
 
 var ENTERPRISE_DIR = "enterprise";
@@ -2020,6 +2020,7 @@ function progressBarSvg(option) {
   return svg;
 }
 
+// eslint-disable-next-line no-unused-vars
 function inArray(needle, haystack) {
   var length = haystack.length;
   for (var i = 0; i < length; i++) {
@@ -2028,6 +2029,65 @@ function inArray(needle, haystack) {
   return false;
 }
 
+// eslint-disable-next-line no-unused-vars
+function agent_multiple_change(e, info) {
+  info = JSON.parse(atob(info));
+  jQuery.post(
+    "ajax.php",
+    {
+      page: "operation/agentes/ver_agente",
+      get_modules_group_json: 1,
+      selection: $("#" + info.selectionModulesNameId).val(),
+      id_agents: $("#" + info.agent_name.replace("[]", "")).val(),
+      select_mode: 1
+    },
+    function(data) {
+      var name = info.modules_name.replace("[]", "");
+      $("#" + name).html("");
+      $("#checkbox-" + name + "-check-all").prop("checked", false);
+      if (data) {
+        jQuery.each(data, function(id, value) {
+          var option = $("<option></option>")
+            .attr("value", id)
+            .html(value);
+          $("#" + name).append(option);
+        });
+      }
+    },
+    "json"
+  );
+}
+
+// eslint-disable-next-line no-unused-vars
+function selection_multiple_change(info) {
+  info = JSON.parse(atob(info));
+  jQuery.post(
+    "ajax.php",
+    {
+      page: "operation/agentes/ver_agente",
+      get_modules_group_json: 1,
+      id_agents: $("#" + info.agent_name.replace("[]", "")).val(),
+      selection: $("#" + info.selectionModulesNameId).val(),
+      select_mode: 1
+    },
+    function(data) {
+      var name = info.modules_name.replace("[]", "");
+      $("#" + name).html("");
+      // Check module all.
+      $("#checkbox-" + name + "-check-all").prop("checked", false);
+      if (data) {
+        jQuery.each(data, function(id, value) {
+          var option = $("<option></option>")
+            .attr("value", id)
+            .html(value);
+          $("#" + name).append(option);
+        });
+      }
+    },
+    "json"
+  );
+}
+
 /*
  *  Creates a progressbar.
  *  @param id the id of the div we want to transform in a progressbar.

pandora_console/include/lib/Dashboard/Widget.php

@@ -416,6 +416,11 @@ class Widget
                     $className .= '\OsQuickReportWidget';
                 break;
 
+                case 'ColorModuleTabs':
+                case 'BlockHistogram':
+                    $className .= '\\'.$name;
+                break;
+
                 default:
                     $className = false;
                 break;

pandora_console/include/lib/Dashboard/Widgets/BlockHistogram.php

@@ -0,0 +1,663 @@
+<?php
+/**
+ * Widget block histogram modules Pandora FMS Console
+ *
+ * @category   Console Class
+ * @package    Pandora FMS
+ * @subpackage Widget
+ * @version    1.0.0
+ * @license    See below
+ *
+ *    ______                 ___                    _______ _______ ________
+ *   |   __ \.-----.--.--.--|  |.-----.----.-----. |    ___|   |   |     __|
+ *  |    __/|  _  |     |  _  ||  _  |   _|  _  | |    ___|       |__     |
+ * |___|   |___._|__|__|_____||_____|__| |___._| |___|   |__|_|__|_______|
+ *
+ * ============================================================================
+ * Copyright (c) 2005-2022 Artica Soluciones Tecnologicas
+ * Please see http://pandorafms.org for full contribution list
+ * 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 for version 2.
+ * 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.
+ * ============================================================================
+ */
+
+namespace PandoraFMS\Dashboard;
+
+use PandoraFMS\Enterprise\Metaconsole\Node;
+
+global $config;
+
+/**
+ * URL Widgets
+ */
+class BlockHistogram extends Widget
+{
+
+    /**
+     * Name widget.
+     *
+     * @var string
+     */
+    protected $name;
+
+    /**
+     * Title widget.
+     *
+     * @var string
+     */
+    protected $title;
+
+    /**
+     * Page widget;
+     *
+     * @var string
+     */
+    protected $page;
+
+    /**
+     * Class name widget.
+     *
+     * @var [type]
+     */
+    protected $className;
+
+    /**
+     * Values options for each widget.
+     *
+     * @var [type]
+     */
+    protected $values;
+
+    /**
+     * Configuration required.
+     *
+     * @var boolean
+     */
+    protected $configurationRequired;
+
+    /**
+     * Error load widget.
+     *
+     * @var boolean
+     */
+    protected $loadError;
+
+    /**
+     * Width.
+     *
+     * @var integer
+     */
+    protected $width;
+
+    /**
+     * Heigth.
+     *
+     * @var integer
+     */
+    protected $height;
+
+    /**
+     * Grid Width.
+     *
+     * @var integer
+     */
+    protected $gridWidth;
+
+    /**
+     * Cell ID.
+     *
+     * @var integer
+     */
+    protected $cellId;
+
+
+    /**
+     * Construct.
+     *
+     * @param integer      $cellId      Cell ID.
+     * @param integer      $dashboardId Dashboard ID.
+     * @param integer      $widgetId    Widget ID.
+     * @param integer|null $width       New width.
+     * @param integer|null $height      New height.
+     * @param integer|null $gridWidth   Grid width.
+     */
+    public function __construct(
+        int $cellId,
+        int $dashboardId=0,
+        int $widgetId=0,
+        ?int $width=0,
+        ?int $height=0,
+        ?int $gridWidth=0
+    ) {
+        global $config;
+
+        // WARNING: Do not edit. This chunk must be in the constructor.
+        parent::__construct(
+            $cellId,
+            $dashboardId,
+            $widgetId
+        );
+
+        // Width.
+        $this->width = $width;
+
+        // Height.
+        $this->height = $height;
+
+        // Grid Width.
+        $this->gridWidth = $gridWidth;
+
+        // Cell Id.
+        $this->cellId = $cellId;
+
+        // Options.
+        $this->values = $this->decoders($this->getOptionsWidget());
+
+        // Positions.
+        $this->position = $this->getPositionWidget();
+
+        // Page.
+        $this->page = basename(__FILE__);
+
+        // ClassName.
+        $class = new \ReflectionClass($this);
+        $this->className = $class->getShortName();
+
+        // Title.
+        $this->title = __('Block histogram');
+
+        // Name.
+        if (empty($this->name) === true) {
+            $this->name = 'single_graph';
+        }
+
+        // This forces at least a first configuration.
+        $this->configurationRequired = false;
+        if (empty($this->values['moduleBlockHistogram']) === true) {
+            $this->configurationRequired = true;
+        }
+
+        $this->overflow_scrollbars = false;
+    }
+
+
+    /**
+     * Decoders hack for retrocompability.
+     *
+     * @param array $decoder Values.
+     *
+     * @return array Returns the values ​​with the correct key.
+     */
+    public function decoders(array $decoder): array
+    {
+        $values = [];
+        // Retrieve global - common inputs.
+        $values = parent::decoders($decoder);
+
+        $values['agentsBlockHistogram'] = [];
+        if (isset($decoder['agentsBlockHistogram']) === true) {
+            if (isset($decoder['agentsBlockHistogram'][0]) === true
+                && empty($decoder['agentsBlockHistogram']) === false
+            ) {
+                $values['agentsBlockHistogram'] = explode(
+                    ',',
+                    $decoder['agentsBlockHistogram'][0]
+                );
+            }
+        }
+
+        if (isset($decoder['selectionBlockHistogram']) === true) {
+            $values['selectionBlockHistogram'] = $decoder['selectionBlockHistogram'];
+        }
+
+        $values['moduleBlockHistogram'] = [];
+        if (isset($decoder['moduleBlockHistogram']) === true) {
+            if (empty($decoder['moduleBlockHistogram']) === false) {
+                $values['moduleBlockHistogram'] = $decoder['moduleBlockHistogram'];
+            }
+        }
+
+        if (isset($decoder['period']) === true) {
+            $values['period'] = $decoder['period'];
+        }
+
+        if (isset($decoder['fontColor']) === true) {
+            $values['fontColor'] = $decoder['fontColor'];
+        }
+
+        $values['label'] = 'module';
+        if (isset($decoder['label']) === true) {
+            $values['label'] = $decoder['label'];
+        }
+
+        return $values;
+    }
+
+
+    /**
+     * Generates inputs for form (specific).
+     *
+     * @return array Of inputs.
+     *
+     * @throws Exception On error.
+     */
+    public function getFormInputs(): array
+    {
+        $values = $this->values;
+
+        // Retrieve global - common inputs.
+        $inputs = parent::getFormInputs();
+
+        // Default values.
+        if (isset($values['period']) === false) {
+            $values['period'] = SECONDS_1DAY;
+        }
+
+        if (empty($values['fontColor']) === true) {
+            $values['fontColor'] = '#2c3e50';
+        }
+
+        $inputs[] = [
+            'label'     => __('Font color'),
+            'arguments' => [
+                'wrapper' => 'div',
+                'name'    => 'fontColor',
+                'type'    => 'color',
+                'value'   => $values['fontColor'],
+                'return'  => true,
+            ],
+        ];
+
+        // Type Label.
+        $fields = [
+            'module'       => __('Module'),
+            'agent'        => __('Agent'),
+            'agent_module' => __('Agent / module'),
+        ];
+
+        $inputs[] = [
+            'label'     => __('Label'),
+            'arguments' => [
+                'type'     => 'select',
+                'fields'   => $fields,
+                'name'     => 'label',
+                'selected' => $values['label'],
+                'return'   => true,
+            ],
+        ];
+
+        // Periodicity.
+        $inputs[] = [
+            'label'     => __('Interval'),
+            'arguments' => [
+                'name'          => 'period',
+                'type'          => 'interval',
+                'value'         => $values['period'],
+                'nothing'       => __('None'),
+                'nothing_value' => 0,
+                'style_icon'    => 'flex-grow: 0',
+
+            ],
+        ];
+
+        $inputs[] = [
+            'arguments' => [
+                'type'                   => 'select_multiple_modules_filtered_select2',
+                'agent_values'           => agents_get_agents_selected(0),
+                'agent_name'             => 'agentsBlockHistogram[]',
+                'agent_ids'              => $values['agentsBlockHistogram'],
+                'selectionModules'       => $values['selectionBlockHistogram'],
+                'selectionModulesNameId' => 'selectionBlockHistogram',
+                'modules_ids'            => $values['moduleBlockHistogram'],
+                'modules_name'           => 'moduleBlockHistogram[]',
+            ],
+        ];
+
+        return $inputs;
+    }
+
+
+    /**
+     * Get Post for widget.
+     *
+     * @return array
+     */
+    public function getPost():array
+    {
+        // Retrieve global - common inputs.
+        $values = parent::getPost();
+
+        $values['agentsBlockHistogram'] = \get_parameter(
+            'agentsBlockHistogram',
+            []
+        );
+        $values['selectionBlockHistogram'] = \get_parameter(
+            'selectionBlockHistogram',
+            0
+        );
+
+        $values['moduleBlockHistogram'] = \get_parameter(
+            'moduleBlockHistogram'
+        );
+
+        $agColor = [];
+        if (isset($values['agentsBlockHistogram'][0]) === true
+            && empty($values['agentsBlockHistogram'][0]) === false
+        ) {
+            $agColor = explode(',', $values['agentsBlockHistogram'][0]);
+        }
+
+        $agModule = [];
+        if (isset($values['moduleBlockHistogram'][0]) === true
+            && empty($values['moduleBlockHistogram'][0]) === false
+        ) {
+            $agModule = explode(',', $values['moduleBlockHistogram'][0]);
+        }
+
+        $values['moduleBlockHistogram'] = get_same_modules_all(
+            $agColor,
+            $agModule
+        );
+
+        $values['period'] = \get_parameter('period', 0);
+
+        $values['fontColor'] = \get_parameter('fontColor', '#2c3e50');
+
+        $values['label'] = \get_parameter('label', 'agent');
+        return $values;
+    }
+
+
+    /**
+     * Draw widget.
+     *
+     * @return string;
+     */
+    public function load()
+    {
+        global $config;
+
+        $size = parent::getSize();
+
+        $output = '';
+
+        if (is_metaconsole() === true) {
+                $modules_nodes = array_reduce(
+                    $this->values['moduleBlockHistogram'],
+                    function ($carry, $item) {
+                        $explode = explode('|', $item);
+                        $carry[$explode[0]][] = $explode[1];
+                        return $carry;
+                    },
+                    []
+                );
+
+                $modules = [];
+            foreach ($modules_nodes as $n => $mod) {
+                try {
+                    $node = new Node((int) $n);
+                    $node->connect();
+                    $node_mods = $this->getInfoModules($mod);
+                    if (empty($node_mods) === false) {
+                        foreach ($node_mods as $value) {
+                            $value['id_node'] = $n;
+                            $value['server_name'] = $node->toArray()['server_name'];
+                            $modules[] = $value;
+                        }
+                    }
+
+                    $node->disconnect();
+                } catch (\Exception $e) {
+                    // Unexistent agent.
+                    $node->disconnect();
+                }
+            }
+        } else {
+            $modules = $this->getInfoModules(
+                $this->values['moduleBlockHistogram']
+            );
+        }
+
+        if ($modules !== false && empty($modules) === false) {
+            $total_modules = count($modules);
+            $output .= '<div class="container-histograms" style="width: '.$size['width'].'px;">';
+            $output .= '<table class="table-container-histograms" style="color:'.$this->values['fontColor'].'">';
+            foreach ($modules as $key => $module) {
+                $last = false;
+                if (($total_modules - 1)  === $key) {
+                    $last = true;
+                }
+
+                if (is_metaconsole() === true) {
+                    try {
+                        $node = new Node((int) $module['id_node']);
+                        $node->connect();
+                        $output .= $this->drawHistograms($module, $last);
+
+                        $node->disconnect();
+                    } catch (\Exception $e) {
+                        // Unexistent agent.
+                        $node->disconnect();
+                    }
+                } else {
+                    $output .= $this->drawHistograms($module, $last);
+                }
+            }
+
+            $output .= '</table>';
+            $output .= '</div>';
+        } else {
+            $output .= '<div class="container-center">';
+            $output .= \ui_print_info_message(
+                __('Not found modules'),
+                '',
+                true
+            );
+            $output .= '</div>';
+        }
+
+        return $output;
+    }
+
+
+    /**
+     * Get info modules.
+     *
+     * @param array $modules Modules.
+     *
+     * @return array Data.
+     */
+    private function getInfoModules(array $modules): array
+    {
+        $where = sprintf(
+            'tagente_modulo.id_agente_modulo IN (%s)',
+            implode(',', $modules)
+        );
+
+        $sql = sprintf(
+            'SELECT tagente_modulo.id_agente_modulo AS `id`,
+                tagente_modulo.nombre AS `name`,
+                tagente_modulo.unit AS `unit`,
+                tagente.alias AS `agent_alias`,
+                tagente.id_agente AS `agent_id`
+            FROM tagente_modulo
+            INNER JOIN tagente
+                ON tagente_modulo.id_agente = tagente.id_agente
+            WHERE %s',
+            $where
+        );
+
+        $modules = db_get_all_rows_sql($sql);
+
+        if ($modules === false) {
+            $modules = [];
+        }
+
+        return $modules;
+    }
+
+
+    /**
+     * Draw histogram module.
+     *
+     * @param array   $data Info module.
+     * @param boolean $last Last histogram.
+     *
+     * @return string
+     */
+    private function drawHistograms(array $data, bool $last):string
+    {
+        global $config;
+
+        $size = parent::getSize();
+
+        // Desactive scroll bars only this item.
+        $id_agent = $data['agent_id'];
+        $id_module = $data['id'];
+        $period = $this->values['period'];
+        switch ($this->values['label']) {
+            case 'module':
+                $label = ui_print_truncate_text(
+                    $data['name'],
+                    25,
+                    false,
+                    true,
+                    true,
+                    '[&hellip;]',
+                    ''
+                );
+            break;
+
+            case 'agent_module':
+                $label = ui_print_truncate_text(
+                    $data['agent_alias'].' / '.$data['name'],
+                    25,
+                    false,
+                    true,
+                    true,
+                );
+            break;
+
+            default:
+            case 'agent':
+                $label = ui_print_truncate_text(
+                    $data['agent_alias'],
+                    25,
+                    false,
+                    true,
+                    true,
+                    '[&hellip;]',
+                    ''
+                );
+            break;
+        }
+
+        $size_label = 10;
+
+        $id_group = \agents_get_agent_group($id_agent);
+
+        $height_graph = 30;
+        if ($last === true) {
+            if ($period > 86500) {
+                $height_graph = 60;
+            } else {
+                $height_graph = 50;
+            }
+        }
+
+        $content = [
+            'id_agent_module' => $id_module,
+            'period'          => $period,
+            'time_from'       => '00:00:00',
+            'time_to'         => '00:00:00',
+            'id_group'        => $id_group,
+            'sizeForTicks'    => ($size['width'] - 200),
+            'showLabelTicks'  => ($last === true) ? true : false,
+            'height_graph'    => $height_graph,
+            [
+                ['id_agent_module' => $id_module],
+            ]
+        ];
+
+        $graph = \reporting_module_histogram_graph(
+            ['datetime' => time()],
+            $content
+        );
+
+        $style = 'min-width:200px;';
+        if ($last === false) {
+            if ($period > 86500) {
+                $style .= 'width:calc(100% - 24px); margin-left: 12px;';
+            } else {
+                $style .= 'width:calc(100% - 16px); margin-left: 8px;';
+            }
+        } else {
+            $style .= 'height:60px;';
+        }
+
+        $st = 'font-size:'.$size_label.'px;';
+        if (is_metaconsole() === false) {
+            $st .= 'height: 28px;';
+        }
+
+        $output = '<tr>';
+            $output .= '<td style="width: 170px; vertical-align: initial;">';
+            $output .= '<div class="widget-histogram-label" style="'.$st.'">';
+                $output .= $label;
+            $output .= '</div>';
+            $output .= '</td>';
+            $output .= '<td>';
+            $output .= '<div class="widget-histogram-chart" style="'.$style.'">';
+                $output .= $graph['chart'];
+            $output .= '</div>';
+            $output .= '</td>';
+        $output .= '</tr>';
+
+        return $output;
+    }
+
+
+    /**
+     * Get description.
+     *
+     * @return string.
+     */
+    public static function getDescription()
+    {
+        return __('Block histogram');
+    }
+
+
+    /**
+     * Get Name.
+     *
+     * @return string.
+     */
+    public static function getName()
+    {
+        return 'BlockHistogram';
+    }
+
+
+    /**
+     * Get size Modal Configuration.
+     *
+     * @return array
+     */
+    public function getSizeModalConfiguration(): array
+    {
+        $size = [
+            'width'  => (is_metaconsole() === true) ? 700 : 500,
+            'height' => 670,
+        ];
+
+        return $size;
+    }
+
+
+}

pandora_console/include/lib/Dashboard/Widgets/ColorModuleTabs.php

@@ -0,0 +1,567 @@
+<?php
+/**
+ * Widget Color tabs modules Pandora FMS Console
+ *
+ * @category   Console Class
+ * @package    Pandora FMS
+ * @subpackage Widget
+ * @version    1.0.0
+ * @license    See below
+ *
+ *    ______                 ___                    _______ _______ ________
+ *   |   __ \.-----.--.--.--|  |.-----.----.-----. |    ___|   |   |     __|
+ *  |    __/|  _  |     |  _  ||  _  |   _|  _  | |    ___|       |__     |
+ * |___|   |___._|__|__|_____||_____|__| |___._| |___|   |__|_|__|_______|
+ *
+ * ============================================================================
+ * Copyright (c) 2005-2022 Artica Soluciones Tecnologicas
+ * Please see http://pandorafms.org for full contribution list
+ * 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 for version 2.
+ * 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.
+ * ============================================================================
+ */
+
+namespace PandoraFMS\Dashboard;
+
+use PandoraFMS\Enterprise\Metaconsole\Node;
+
+global $config;
+
+/**
+ * URL Widgets
+ */
+class ColorModuleTabs extends Widget
+{
+
+    /**
+     * Name widget.
+     *
+     * @var string
+     */
+    protected $name;
+
+    /**
+     * Title widget.
+     *
+     * @var string
+     */
+    protected $title;
+
+    /**
+     * Page widget;
+     *
+     * @var string
+     */
+    protected $page;
+
+    /**
+     * Class name widget.
+     *
+     * @var [type]
+     */
+    protected $className;
+
+    /**
+     * Values options for each widget.
+     *
+     * @var [type]
+     */
+    protected $values;
+
+    /**
+     * Configuration required.
+     *
+     * @var boolean
+     */
+    protected $configurationRequired;
+
+    /**
+     * Error load widget.
+     *
+     * @var boolean
+     */
+    protected $loadError;
+
+    /**
+     * Width.
+     *
+     * @var integer
+     */
+    protected $width;
+
+    /**
+     * Heigth.
+     *
+     * @var integer
+     */
+    protected $height;
+
+    /**
+     * Grid Width.
+     *
+     * @var integer
+     */
+    protected $gridWidth;
+
+    /**
+     * Cell ID.
+     *
+     * @var integer
+     */
+    protected $cellId;
+
+
+    /**
+     * Construct.
+     *
+     * @param integer      $cellId      Cell ID.
+     * @param integer      $dashboardId Dashboard ID.
+     * @param integer      $widgetId    Widget ID.
+     * @param integer|null $width       New width.
+     * @param integer|null $height      New height.
+     * @param integer|null $gridWidth   Grid width.
+     */
+    public function __construct(
+        int $cellId,
+        int $dashboardId=0,
+        int $widgetId=0,
+        ?int $width=0,
+        ?int $height=0,
+        ?int $gridWidth=0
+    ) {
+        global $config;
+
+        // WARNING: Do not edit. This chunk must be in the constructor.
+        parent::__construct(
+            $cellId,
+            $dashboardId,
+            $widgetId
+        );
+
+        // Width.
+        $this->width = $width;
+
+        // Height.
+        $this->height = $height;
+
+        // Grid Width.
+        $this->gridWidth = $gridWidth;
+
+        // Cell Id.
+        $this->cellId = $cellId;
+
+        // Options.
+        $this->values = $this->decoders($this->getOptionsWidget());
+
+        // Positions.
+        $this->position = $this->getPositionWidget();
+
+        // Page.
+        $this->page = basename(__FILE__);
+
+        // ClassName.
+        $class = new \ReflectionClass($this);
+        $this->className = $class->getShortName();
+
+        // Title.
+        $this->title = __('Color tabs modules');
+
+        // Name.
+        if (empty($this->name) === true) {
+            $this->name = 'single_graph';
+        }
+
+        // This forces at least a first configuration.
+        $this->configurationRequired = false;
+        if (empty($this->values['moduleColorModuleTabs']) === true) {
+            $this->configurationRequired = true;
+        }
+
+        $this->overflow_scrollbars = false;
+    }
+
+
+    /**
+     * Decoders hack for retrocompability.
+     *
+     * @param array $decoder Values.
+     *
+     * @return array Returns the values ​​with the correct key.
+     */
+    public function decoders(array $decoder): array
+    {
+        $values = [];
+        // Retrieve global - common inputs.
+        $values = parent::decoders($decoder);
+
+        $values['agentsColorModuleTabs'] = [];
+        if (isset($decoder['agentsColorModuleTabs']) === true) {
+            if (isset($decoder['agentsColorModuleTabs'][0]) === true
+                && empty($decoder['agentsColorModuleTabs']) === false
+            ) {
+                $values['agentsColorModuleTabs'] = explode(
+                    ',',
+                    $decoder['agentsColorModuleTabs'][0]
+                );
+            }
+        }
+
+        if (isset($decoder['selectionColorModuleTabs']) === true) {
+            $values['selectionColorModuleTabs'] = $decoder['selectionColorModuleTabs'];
+        }
+
+        $values['moduleColorModuleTabs'] = [];
+        if (isset($decoder['moduleColorModuleTabs']) === true) {
+            if (empty($decoder['moduleColorModuleTabs']) === false) {
+                $values['moduleColorModuleTabs'] = $decoder['moduleColorModuleTabs'];
+            }
+        }
+
+        if (isset($decoder['formatData']) === true) {
+            $values['formatData'] = $decoder['formatData'];
+        }
+
+        $values['label'] = 'module';
+        if (isset($decoder['label']) === true) {
+            $values['label'] = $decoder['label'];
+        }
+
+        return $values;
+    }
+
+
+    /**
+     * Generates inputs for form (specific).
+     *
+     * @return array Of inputs.
+     *
+     * @throws Exception On error.
+     */
+    public function getFormInputs(): array
+    {
+        $values = $this->values;
+
+        // Retrieve global - common inputs.
+        $inputs = parent::getFormInputs();
+
+        // Type Label.
+        $fields = [
+            'module'       => __('Module'),
+            'agent'        => __('Agent'),
+            'agent_module' => __('Agent / module'),
+        ];
+
+        $inputs[] = [
+            'label'     => __('Label'),
+            'arguments' => [
+                'type'     => 'select',
+                'fields'   => $fields,
+                'name'     => 'label',
+                'selected' => $values['label'],
+                'return'   => true,
+            ],
+        ];
+
+        $inputs[] = [
+            'arguments' => [
+                'type'                   => 'select_multiple_modules_filtered_select2',
+                'agent_values'           => agents_get_agents_selected(0),
+                'agent_name'             => 'agentsColorModuleTabs[]',
+                'agent_ids'              => $values['agentsColorModuleTabs'],
+                'selectionModules'       => $values['selectionColorModuleTabs'],
+                'selectionModulesNameId' => 'selectionColorModuleTabs',
+                'modules_ids'            => $values['moduleColorModuleTabs'],
+                'modules_name'           => 'moduleColorModuleTabs[]',
+            ],
+        ];
+
+        // Format Data.
+        $inputs[] = [
+            'label'     => __('Format Data'),
+            'arguments' => [
+                'name'  => 'formatData',
+                'id'    => 'formatData',
+                'type'  => 'switch',
+                'value' => $values['formatData'],
+            ],
+        ];
+
+        return $inputs;
+    }
+
+
+    /**
+     * Get Post for widget.
+     *
+     * @return array
+     */
+    public function getPost():array
+    {
+        // Retrieve global - common inputs.
+        $values = parent::getPost();
+
+        $values['agentsColorModuleTabs'] = \get_parameter(
+            'agentsColorModuleTabs',
+            []
+        );
+        $values['selectionColorModuleTabs'] = \get_parameter(
+            'selectionColorModuleTabs',
+            0
+        );
+
+        $values['moduleColorModuleTabs'] = \get_parameter(
+            'moduleColorModuleTabs'
+        );
+
+        $agColor = [];
+        if (isset($values['agentsColorModuleTabs'][0]) === true
+            && empty($values['agentsColorModuleTabs'][0]) === false
+        ) {
+            $agColor = explode(',', $values['agentsColorModuleTabs'][0]);
+        }
+
+        $agModule = [];
+        if (isset($values['moduleColorModuleTabs'][0]) === true
+            && empty($values['moduleColorModuleTabs'][0]) === false
+        ) {
+            $agModule = explode(',', $values['moduleColorModuleTabs'][0]);
+        }
+
+        $values['moduleColorModuleTabs'] = get_same_modules_all(
+            $agColor,
+            $agModule
+        );
+
+        $values['formatData'] = \get_parameter_switch('formatData', 0);
+
+        $values['label'] = \get_parameter('label', 'module');
+
+        return $values;
+    }
+
+
+    /**
+     * Draw widget.
+     *
+     * @return string;
+     */
+    public function load()
+    {
+        global $config;
+
+        $size = parent::getSize();
+
+        $output = '';
+
+        if (is_metaconsole() === true) {
+            $modules_nodes = array_reduce(
+                $this->values['moduleColorModuleTabs'],
+                function ($carry, $item) {
+                    $explode = explode('|', $item);
+                    $carry[$explode[0]][] = $explode[1];
+                    return $carry;
+                },
+                []
+            );
+
+            $modules = [];
+            foreach ($modules_nodes as $n => $mod) {
+                try {
+                    $node = new Node((int) $n);
+                    $node->connect();
+                    $node_mods = $this->getInfoModules($mod);
+                    if (empty($node_mods) === false) {
+                        foreach ($node_mods as $value) {
+                            $value['id_node'] = $n;
+                            $value['server_name'] = $node->toArray()['server_name'];
+                            $modules[] = $value;
+                        }
+                    }
+
+                    $node->disconnect();
+                } catch (\Exception $e) {
+                    // Unexistent agent.
+                    $node->disconnect();
+                }
+            }
+        } else {
+            $modules = $this->getInfoModules(
+                $this->values['moduleColorModuleTabs']
+            );
+        }
+
+        if ($modules !== false && empty($modules) === false) {
+            $output .= '<div class="container-tabs">';
+            foreach ($modules as $module) {
+                $output .= $this->drawTabs($module);
+            }
+
+            $output .= '</div>';
+        } else {
+            $output .= '<div class="container-center">';
+            $output .= \ui_print_info_message(
+                __('Not found modules'),
+                '',
+                true
+            );
+            $output .= '</div>';
+        }
+
+        return $output;
+    }
+
+
+    /**
+     * Get info modules.
+     *
+     * @param array $modules Modules.
+     *
+     * @return array Data.
+     */
+    private function getInfoModules(array $modules): array
+    {
+        $where = sprintf(
+            'tagente_modulo.id_agente_modulo IN (%s)',
+            implode(',', $modules)
+        );
+
+        $sql = sprintf(
+            'SELECT tagente_modulo.id_agente_modulo AS `id`,
+                tagente_modulo.nombre AS `name`,
+                tagente_modulo.unit AS `unit`,
+                tagente_estado.datos AS `data`,
+                tagente_estado.timestamp AS `timestamp`,
+                tagente_estado.estado AS `status`,
+                tagente.alias
+            FROM tagente_modulo
+            LEFT JOIN tagente_estado
+                ON tagente_modulo.id_agente_modulo = tagente_estado.id_agente_modulo
+            LEFT JOIN tagente
+                ON tagente_modulo.id_agente = tagente.id_agente
+            WHERE %s',
+            $where
+        );
+
+        $modules = db_get_all_rows_sql($sql);
+
+        if ($modules === false) {
+            $modules = [];
+        }
+
+        return $modules;
+    }
+
+
+    /**
+     * Draw tab module.
+     *
+     * @param array $data Info module.
+     *
+     * @return string Output.
+     */
+    private function drawTabs(array $data):string
+    {
+        global $config;
+
+        $background = modules_get_color_status($data['status'], true);
+        $color = modules_get_textcolor_status($data['status']);
+
+        $style = 'background-color:'.$background.'; color:'.$color.';';
+        $output = '<div class="widget-module-tabs" style="'.$style.'">';
+        $output .= '<span class="widget-module-tabs-title">';
+        if (is_metaconsole() === true) {
+            $output .= $data['server_name'];
+            $output .= '<br>';
+        }
+
+        $name = '';
+        switch ($this->values['label']) {
+            case 'agent':
+                $name = $data['alias'];
+            break;
+
+            case 'agent_module':
+                $name = $data['alias'].' / '.$data['name'];
+            break;
+
+            default:
+            case 'module':
+                $name = $data['name'];
+            break;
+        }
+
+        $output .= $name;
+        $output .= '</span>';
+        $output .= '<span class="widget-module-tabs-data">';
+        if ($data['data'] !== null && $data['data'] !== '') {
+            if (isset($this->values['formatData']) === true
+                && (bool) $this->values['formatData'] === true
+            ) {
+                $output .= format_for_graph(
+                    $data['data'],
+                    $config['graph_precision']
+                );
+            } else {
+                $output .= sla_truncate(
+                    $data['data'],
+                    $config['graph_precision']
+                );
+            }
+        } else {
+            $output .= '--';
+        }
+
+        $output .= '<span class="widget-module-tabs-unit">';
+        $output .= ' '.$data['unit'];
+        $output .= '</span>';
+        $output .= '</span>';
+        $output .= '</div>';
+
+        return $output;
+    }
+
+
+    /**
+     * Get description.
+     *
+     * @return string.
+     */
+    public static function getDescription()
+    {
+        return __('Color tabs modules');
+    }
+
+
+    /**
+     * Get Name.
+     *
+     * @return string.
+     */
+    public static function getName()
+    {
+        return 'ColorModuleTabs';
+    }
+
+
+    /**
+     * Get size Modal Configuration.
+     *
+     * @return array
+     */
+    public function getSizeModalConfiguration(): array
+    {
+        $size = [
+            'width'  => (is_metaconsole() === true) ? 700 : 600,
+            'height' => 610,
+        ];
+
+        return $size;
+    }
+
+
+}

pandora_console/include/lib/Dashboard/Widgets/single_graph.php

@@ -1,10 +1,10 @@
 <?php
 /**
- * Widget URL Pandora FMS Console
+ * Widget Simple graph Pandora FMS Console
  *
  * @category   Console Class
  * @package    Pandora FMS
- * @subpackage Widget URL
+ * @subpackage Widget
  * @version    1.0.0
  * @license    See below
  *
@@ -14,7 +14,7 @@
  * |___|   |___._|__|__|_____||_____|__| |___._| |___|   |__|_|__|_______|
  *
  * ============================================================================
- * Copyright (c) 2005-2021 Artica Soluciones Tecnologicas
+ * Copyright (c) 2005-2022 Artica Soluciones Tecnologicas
  * Please see http://pandorafms.org for full contribution list
  * This program is free software; you can redistribute it and/or
  * modify it under the terms of the GNU General Public License
@@ -279,7 +279,6 @@ class SingleGraphWidget extends Widget
             'label'     => __('Module'),
             'arguments' => [
                 'type'           => 'autocomplete_module',
-                'fields'         => $fields,
                 'name'           => 'moduleId',
                 'selected'       => $values['moduleId'],
                 'return'         => true,
@@ -353,8 +352,8 @@ class SingleGraphWidget extends Widget
         include_once $config['homedir'].'/include/functions_agents.php';
         include_once $config['homedir'].'/include/functions_modules.php';
 
-        $module_name = \modules_get_agentmodule_name($id_module);
+        $module_name = \modules_get_agentmodule_name($this->values['moduleId']);
-        $units_name = \modules_get_unit($id_module);
+        $units_name = \modules_get_unit($this->values['moduleId']);
 
         $trickHight = 10;
         if ($this->values['showLegend'] === 1) {

pandora_console/include/styles/dashboards.css

@@ -573,6 +573,91 @@ div#main_pure {
   margin: 0;
 }
 
+form.modal-dashboard ul.wizard li label {
+  max-width: 30%;
+}
+
+form.modal-dashboard ul.wizard li.agents_select2,
+form.modal-dashboard ul.wizard li.modules_select2 {
+  align-items: center;
+  justify-content: center;
+}
+
+form.modal-dashboard
+  ul.wizard
+  li.agents_select2
+  div.flex-row-center
+  div.flex-column,
+form.modal-dashboard
+  ul.wizard
+  li.modules_select2
+  div.flex-row-center
+  div.flex-column {
+  flex: 0;
+  height: 45px;
+}
+
+.ui-dialog .ui-dialog-title {
+  top: -3px !important;
+}
+
+.select2-container--default
+  .select2-selection--multiple
+  .select2-selection__choice {
+  margin: 0px;
+}
+
+.container-tabs {
+  width: 100%;
+  height: calc(100% + 80px);
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+}
+
+.widget-module-tabs {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  min-width: 100px;
+  min-height: 95px;
+  margin: 2px;
+  padding: 5px;
+}
+
+.widget-module-tabs-title {
+  word-break: break-word;
+}
+
+.widget-module-tabs-data {
+  font-size: 1.5em;
+  font-weight: bolder;
+}
+
+.widget-module-tabs-unit {
+  font-size: smaller;
+  font-style: italic;
+}
+
+.container-histograms {
+  min-width: 400px;
+}
+.table-container-histograms {
+  width: 100%;
+}
+
+.container-histograms .widget-histogram-chart {
+  height: 28px;
+}
+
+.container-histograms .widget-histogram-label {
+  padding-top: 10px;
+  text-align: initial;
+}
+
 .content-widget .dataTables_wrapper {
   width: 98%;
   margin-top: 5px;
@@ -591,3 +676,7 @@ div#main_pure {
   margin-top: 0px !important;
   padding: 0.5em 1em 0em 0em !important;
 }
+
+.select2-selection__rendered {
+  max-height: 75px !important;
+}