Add images input

pandora_console/include/javascript/pandora_visual_console.js

@@ -410,7 +410,6 @@ function createVisualConsole(
           type = 0;
       }
 
-      console.log("data1: " + type);
       createOrUpdateVisualConsoleItem(
         visualConsole,
         asyncTaskManager,
@@ -1272,69 +1271,6 @@ function getAllVisualConsole(baseUrl, vcId, callback) {
   };
 }
 
-/**
- * Fetch groups access user.
- * @param {string} baseUrl Base URL to build the API path.
- * @param {number} vcId Identifier of the Visual Console.
- * @param {function} callback Function to be executed on request success or fail.
- * @return {Object} Cancellable. Object which include and .abort([statusText]) function.
- */
-// eslint-disable-next-line no-unused-vars
-function getImagesVisualConsole(baseUrl, vcId, callback) {
-  var apiPath = baseUrl + "/ajax.php";
-  var jqXHR = null;
-
-  // Cancel the ajax requests.
-  var abort = function(textStatus) {
-    if (textStatus == null) textStatus = "abort";
-
-    // -- XMLHttpRequest.readyState --
-    // Value	State	  Description
-    // 0	    UNSENT	Client has been created. open() not called yet.
-    // 4	    DONE   	The operation is complete.
-
-    if (jqXHR.readyState !== 0 && jqXHR.readyState !== 4)
-      jqXHR.abort(textStatus);
-  };
-
-  // Failed request handler.
-  var handleFail = function(jqXHR, textStatus, errorThrown) {
-    abort();
-    // Manually aborted or not.
-    if (textStatus === "abort") {
-      callback();
-    } else {
-      var error = new Error(errorThrown);
-      error.request = jqXHR;
-      callback(error);
-    }
-  };
-
-  // Function which handle success case.
-  var handleSuccess = function(data) {
-    callback(null, data);
-  };
-
-  // Visual Console container request.
-  jqXHR = jQuery
-    .get(
-      apiPath,
-      {
-        page: "include/rest-api/index",
-        getImagesVisualConsole: 1,
-        visualConsoleId: vcId
-      },
-      "json"
-    )
-    .done(handleSuccess)
-    .fail(handleFail);
-
-  // Abortable.
-  return {
-    abort: abort
-  };
-}
-
 /**
  * Copy an item.
  * @param {string} baseUrl Base URL to build the API path.
@@ -1438,7 +1374,6 @@ function createOrUpdateVisualConsoleItem(
     url: baseUrl + "ajax.php",
     ajax_callback: function(response) {
       var data = JSON.parse(response); //handleFormResponse(response);
-      console.log(data);
 
       if (data == false) {
         // Error.
@@ -2161,6 +2096,197 @@ function createOrUpdateVisualConsoleItem(
   */
 }
 
+/**
+ * Onchange input type module graph or custom graph.
+ * @param {string} type Type graph.
+ * @return {void}
+ */
+// eslint-disable-next-line no-unused-vars
+function typeModuleGraph(type) {
+  $("#MGautoCompleteAgent").removeClass("hidden");
+  $("#MGautoCompleteModule").removeClass("hidden");
+  $("#MGcustomGraph").removeClass("hidden");
+  if (type == "module") {
+    $("#MGautoCompleteAgent").show();
+    $("#MGautoCompleteModule").show();
+    $("#MGcustomGraph").hide();
+    $("#customGraphId").val(0);
+  } else if (type == "custom") {
+    $("#MGautoCompleteAgent").hide();
+    $("#MGautoCompleteModule").hide();
+    $("#MGcustomGraph").show();
+  }
+}
+
+/**
+ * Onchange input Linked visual console.
+ * @return {void}
+ */
+// eslint-disable-next-line no-unused-vars
+function linkedVisualConsoleChange() {
+  $("#li-linkedLayoutStatusType").removeClass("hidden");
+  if ($("#getAllVisualConsole :selected").val() != 0) {
+    $("#li-linkedLayoutStatusType").show();
+  } else {
+    $("#li-linkedLayoutStatusType").hide();
+    $("#li-linkedLayoutStatusTypeWeight").removeClass("hidden");
+    $("#li-linkedLayoutStatusTypeCriticalThreshold").removeClass("hidden");
+    $("#li-linkedLayoutStatusTypeWarningThreshold").removeClass("hidden");
+    $("#li-linkedLayoutStatusTypeCriticalThreshold").hide();
+    $("#li-linkedLayoutStatusTypeWarningThreshold").hide();
+    $("#li-linkedLayoutStatusTypeWeight").hide();
+  }
+
+  var linkedLayoutExtract = $("#getAllVisualConsole :selected")
+    .val()
+    .split("|");
+
+  var linkedLayoutNodeId = 0;
+  var linkedLayoutId = 0;
+  if (linkedLayoutExtract instanceof Array) {
+    linkedLayoutId = linkedLayoutExtract[0] ? linkedLayoutExtract[0] : 0;
+    linkedLayoutNodeId = linkedLayoutExtract[1] ? linkedLayoutExtract[1] : 0;
+  }
+
+  $("#hidden-linkedLayoutId").val(linkedLayoutId);
+  $("#hidden-linkedLayoutNodeId").val(linkedLayoutNodeId);
+}
+
+/**
+ * Onchange input type Linked visual console.
+ * @return {void}
+ */
+// eslint-disable-next-line no-unused-vars
+function linkedVisualConsoleTypeChange() {
+  $("#li-linkedLayoutStatusTypeWeight").removeClass("hidden");
+  $("#li-linkedLayoutStatusTypeCriticalThreshold").removeClass("hidden");
+  $("#li-linkedLayoutStatusTypeWarningThreshold").removeClass("hidden");
+  if ($("#linkedLayoutStatusType :selected").val() == "service") {
+    $("#li-linkedLayoutStatusTypeCriticalThreshold").show();
+    $("#li-linkedLayoutStatusTypeWarningThreshold").show();
+    $("#li-linkedLayoutStatusTypeWeight").hide();
+  } else if ($("#linkedLayoutStatusType :selected").val() == "weight") {
+    $("#li-linkedLayoutStatusTypeCriticalThreshold").hide();
+    $("#li-linkedLayoutStatusTypeWarningThreshold").hide();
+    $("#li-linkedLayoutStatusTypeWeight").show();
+  } else {
+    $("#li-linkedLayoutStatusTypeCriticalThreshold").hide();
+    $("#li-linkedLayoutStatusTypeWarningThreshold").hide();
+    $("#li-linkedLayoutStatusTypeWeight").hide();
+  }
+}
+
+/**
+ * Onchange input image.
+ * @return {void}
+ */
+// eslint-disable-next-line no-unused-vars
+function imageVCChange(baseUrl, vcId, only) {
+  var nameImg = document.getElementById("imageSrc").value;
+  if (!only) {
+    only = 0;
+  }
+  var fncallback = function(error, data) {
+    if (error || !data) {
+      console.log(
+        "[ERROR]",
+        "[VISUAL-CONSOLE-CLIENT]",
+        "[API]",
+        error ? error.message : "Invalid response"
+      );
+
+      return;
+    }
+
+    if (typeof data === "string") {
+      try {
+        data = JSON.parse(data);
+      } catch (error) {
+        console.log(
+          "[ERROR]",
+          "[VISUAL-CONSOLE-CLIENT]",
+          "[API]",
+          error ? error.message : "Invalid response"
+        );
+
+        return; // Stop task execution.
+      }
+    }
+
+    $("#li-image-item label").empty();
+    $("#li-image-item label").append(data);
+    return;
+  };
+
+  getImagesVisualConsole(baseUrl, vcId, nameImg, only, fncallback);
+}
+
+/**
+ * Fetch groups access user.
+ * @param {string} baseUrl Base URL to build the API path.
+ * @param {int} vcId Identifier of the Visual Console.
+ * @param {string} nameImg Name img.
+ * @param {function} callback Function to be executed on request success or fail.
+ * @return {Object} Cancellable. Object which include and .abort([statusText]) function.
+ */
+// eslint-disable-next-line no-unused-vars
+function getImagesVisualConsole(baseUrl, vcId, nameImg, only, callback) {
+  var apiPath = baseUrl + "/ajax.php";
+  var jqXHR = null;
+
+  // Cancel the ajax requests.
+  var abort = function(textStatus) {
+    if (textStatus == null) textStatus = "abort";
+
+    // -- XMLHttpRequest.readyState --
+    // Value	State	  Description
+    // 0	    UNSENT	Client has been created. open() not called yet.
+    // 4	    DONE   	The operation is complete.
+
+    if (jqXHR.readyState !== 0 && jqXHR.readyState !== 4)
+      jqXHR.abort(textStatus);
+  };
+
+  // Failed request handler.
+  var handleFail = function(jqXHR, textStatus, errorThrown) {
+    abort();
+    // Manually aborted or not.
+    if (textStatus === "abort") {
+      callback();
+    } else {
+      var error = new Error(errorThrown);
+      error.request = jqXHR;
+      callback(error);
+    }
+  };
+
+  // Function which handle success case.
+  var handleSuccess = function(data) {
+    callback(null, data);
+  };
+
+  // Visual Console container request.
+  jqXHR = jQuery
+    .get(
+      apiPath,
+      {
+        page: "include/rest-api/index",
+        getImagesVisualConsole: 1,
+        visualConsoleId: vcId,
+        nameImg: nameImg,
+        only: only
+      },
+      "json"
+    )
+    .done(handleSuccess)
+    .fail(handleFail);
+
+  // Abortable.
+  return {
+    abort: abort
+  };
+}
+
 // TODO: Delete the functions below when you can.
 /**************************************
  These functions require jQuery library

pandora_console/include/rest-api/index.php

@@ -11,6 +11,7 @@ require_once $config['homedir'].'/vendor/autoload.php';
 
 use Models\VisualConsole\Container as VisualConsole;
 use Models\VisualConsole\View as Viewer;
+use Models\VisualConsole\Item as Item;
 
 $method = get_parameter('method');
 if ($method) {
@@ -264,7 +265,11 @@ if ($getVisualConsole === true) {
 } else if ($getAllVisualConsole === true) {
     // TODO: Remove.
 } else if ($getImagesVisualConsole) {
-    // TODO: Remove.
+    $img = get_parameter('nameImg', 'appliance');
+    $only = (bool) get_parameter('only', 0);
+    $count = Item::imagesElementsVC($img, $only);
+    echo json_encode($count);
+    return;
 } else if ($autocompleteAgentsVisualConsole) {
     $params = (array) get_parameter('data', []);
 

pandora_console/include/rest-api/models/VisualConsole/Item.php

@@ -2307,4 +2307,46 @@ class Item extends CachedModel
     }
 
 
+    /**
+     * Return html images.
+     *
+     * @param string       $image Name image.
+     * @param boolean|null $only  Only normal image.
+     *
+     * @return string Html images.
+     */
+    static function imagesElementsVC(string $image, ?bool $only=false):string
+    {
+        $type_image = [''];
+        if ($only === false) {
+            $type_image = [
+                'bad',
+                'ok',
+                'warning',
+                '',
+            ];
+        }
+
+        $images = '';
+        foreach ($type_image as $k => $v) {
+            $type = '';
+            if ($v !== '') {
+                $type = '_'.$v;
+            }
+
+            $images .= html_print_image(
+                'images/console/icons/'.$image.$type.'.png',
+                true,
+                [
+                    'title' => __('Image Vc'),
+                    'alt'   => __('Image Vc'),
+                    'style' => 'max-width:70px; max-height:70px;',
+                ]
+            );
+        }
+
+        return $images;
+    }
+
+
 }

pandora_console/include/rest-api/models/VisualConsole/Items/Group.php

@@ -469,7 +469,12 @@ final class Group extends Item
 
         if ($values['tabSelected'] === 'specific') {
             // List images VC.
-            // TODO: Show images.
+            if (isset($values['imageSrc']) === false) {
+                $values['imageSrc'] = 'appliance';
+            }
+
+            $baseUrl = ui_get_full_url('/', false, false, false);
+
             $inputs[] = [
                 'label'     => __('Image'),
                 'arguments' => [
@@ -477,10 +482,22 @@ final class Group extends Item
                     'fields'   => self::getListImagesVC(),
                     'name'     => 'imageSrc',
                     'selected' => $values['imageSrc'],
+                    'script'   => 'imageVCChange(\''.$baseUrl.'\',\''.$values['vCId'].'\')',
                     'return'   => true,
                 ],
             ];
 
+            $images = self::imagesElementsVC($values['imageSrc']);
+
+            $inputs[] = [
+                'block_id'      => 'image-item',
+                'class'         => 'flex-row flex-end w100p',
+                'direct'        => 1,
+                'block_content' => [
+                    ['label' => $images],
+                ],
+            ];
+
             // Show statistics.
             $inputs[] = [
                 'label'     => __('Show statistics'),

pandora_console/include/rest-api/models/VisualConsole/Items/Icon.php

@@ -151,7 +151,20 @@ final class Icon extends Item
 
         if ($values['tabSelected'] === 'specific') {
             // List images VC.
-            // TODO: Show images.
+            if (isset($values['imageSrc']) === false) {
+                $values['imageSrc'] = 'appliance';
+            } else {
+                $explode_url = explode('/', $values['imageSrc']);
+                $total = count($explode_url);
+                $values['imageSrc'] = substr(
+                    $explode_url[($total - 1)],
+                    0,
+                    -4
+                );
+            }
+
+            $baseUrl = ui_get_full_url('/', false, false, false);
+
             $inputs[] = [
                 'label'     => __('Image'),
                 'arguments' => [
@@ -159,10 +172,22 @@ final class Icon extends Item
                     'fields'   => self::getListImagesVC(),
                     'name'     => 'imageSrc',
                     'selected' => $values['imageSrc'],
+                    'script'   => 'imageVCChange(\''.$baseUrl.'\',\''.$values['vCId'].'\',1)',
                     'return'   => true,
                 ],
             ];
 
+            $images = self::imagesElementsVC($values['imageSrc'], true);
+
+            $inputs[] = [
+                'block_id'      => 'image-item',
+                'class'         => 'flex-row flex-end w100p',
+                'direct'        => 1,
+                'block_content' => [
+                    ['label' => $images],
+                ],
+            ];
+
             // Inputs LinkedVisualConsole.
             $inputsLinkedVisualConsole = self::inputsLinkedVisualConsole(
                 $values

pandora_console/include/rest-api/models/VisualConsole/Items/StaticGraph.php

@@ -263,7 +263,12 @@ final class StaticGraph extends Item
 
         if ($values['tabSelected'] === 'specific') {
             // List images VC.
-            // TODO: Show images.
+            if (isset($values['imageSrc']) === false) {
+                $values['imageSrc'] = 'appliance';
+            }
+
+            $baseUrl = ui_get_full_url('/', false, false, false);
+
             $inputs[] = [
                 'label'     => __('Image'),
                 'arguments' => [
@@ -271,10 +276,22 @@ final class StaticGraph extends Item
                     'fields'   => self::getListImagesVC(),
                     'name'     => 'imageSrc',
                     'selected' => $values['imageSrc'],
+                    'script'   => 'imageVCChange(\''.$baseUrl.'\',\''.$values['vCId'].'\')',
                     'return'   => true,
                 ],
             ];
 
+            $images = self::imagesElementsVC($values['imageSrc']);
+
+            $inputs[] = [
+                'block_id'      => 'image-item',
+                'class'         => 'flex-row flex-end w100p',
+                'direct'        => 1,
+                'block_content' => [
+                    ['label' => $images],
+                ],
+            ];
+
             // Autocomplete agents.
             $inputs[] = [
                 'label'     => __('Agent'),

pandora_console/include/rest-api/models/VisualConsole/View.php

@@ -177,79 +177,6 @@ class View extends \HTML
             true
         );
 
-        // TODO:XXX very ugly.
-        $jsforms = '<script>';
-        $jsforms .= "function typeModuleGraph(type){
-                $('#MGautoCompleteAgent').removeClass('hidden');
-                $('#MGautoCompleteModule').removeClass('hidden');
-                $('#MGcustomGraph').removeClass('hidden');
-                if (type == 'module') {
-                    $('#MGautoCompleteAgent').show();
-                    $('#MGautoCompleteModule').show();
-                    $('#MGcustomGraph').hide();
-                    $('#customGraphId').val(0);
-                }
-                else if (type == 'custom') {
-                    $('#MGautoCompleteAgent').hide();
-                    $('#MGautoCompleteModule').hide();
-                    $('#MGcustomGraph').show();
-                }
-            }";
-
-        $jsforms .= 'function linkedVisualConsoleChange(){
-            $("#li-linkedLayoutStatusType").removeClass("hidden");
-            if ($("#getAllVisualConsole :selected").val() != 0) {
-                $("#li-linkedLayoutStatusType").show();
-            } else {
-                $("#li-linkedLayoutStatusType").hide();
-                $("#li-linkedLayoutStatusTypeWeight").removeClass("hidden");
-                $("#li-linkedLayoutStatusTypeCriticalThreshold")
-                    .removeClass("hidden");
-                $("#li-linkedLayoutStatusTypeWarningThreshold")
-                    .removeClass("hidden");
-                $("#li-linkedLayoutStatusTypeCriticalThreshold").hide();
-                $("#li-linkedLayoutStatusTypeWarningThreshold").hide();
-                $("#li-linkedLayoutStatusTypeWeight").hide();
-            }
-
-            var linkedLayoutExtract = $("#getAllVisualConsole :selected")
-                .val()
-                .split("|");
-
-            var linkedLayoutNodeId = 0;
-            var linkedLayoutId = 0;
-            if (linkedLayoutExtract instanceof Array) {
-                linkedLayoutId = (linkedLayoutExtract[0]) ? linkedLayoutExtract[0] : 0;
-                linkedLayoutNodeId = (linkedLayoutExtract[1]) ? linkedLayoutExtract[1] : 0;
-            }
-
-            $("#hidden-linkedLayoutId").val(linkedLayoutId);
-            $("#hidden-linkedLayoutNodeId").val(linkedLayoutNodeId);
-        }';
-
-        $jsforms .= 'function linkedVisualConsoleTypeChange(){
-            $("#li-linkedLayoutStatusTypeWeight").removeClass("hidden");
-            $("#li-linkedLayoutStatusTypeCriticalThreshold")
-                .removeClass("hidden");
-            $("#li-linkedLayoutStatusTypeWarningThreshold")
-                .removeClass("hidden");
-            if ($("#linkedLayoutStatusType :selected").val() == "service") {
-                $("#li-linkedLayoutStatusTypeCriticalThreshold").show();
-                $("#li-linkedLayoutStatusTypeWarningThreshold").show();
-                $("#li-linkedLayoutStatusTypeWeight").hide();
-            } else if ($("#linkedLayoutStatusType :selected").val() == "weight") {
-                $("#li-linkedLayoutStatusTypeCriticalThreshold").hide();
-                $("#li-linkedLayoutStatusTypeWarningThreshold").hide();
-                $("#li-linkedLayoutStatusTypeWeight").show();
-            } else {
-                $("#li-linkedLayoutStatusTypeCriticalThreshold").hide();
-                $("#li-linkedLayoutStatusTypeWarningThreshold").hide();
-                $("#li-linkedLayoutStatusTypeWeight").hide();
-            }
-        }';
-
-        $jsforms .= '</script>';
-
         return $form.$jsforms;
 
     }

pandora_console/include/visual-console-client/vc.main.css

@@ -499,4 +499,14 @@ li#li-position-item > label:not(:first-child) {
   margin-left: 15px;
 }
 
+li#li-image-item label {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+}
+
+li#li-image-item label img {
+  flex: initial;
+}
+
 /*# sourceMappingURL=vc.main.css.map*/