continue VC

pandora_console/include/javascript/pandora_visual_console.js

@@ -238,6 +238,56 @@ function createVisualConsole(
                 })
                 .init();
               break;
+            case "custom-graph-list":
+              asyncTaskManager
+                .add(identifier + "-" + params.id, function(doneAsyncTask) {
+                  var abortable = getCustomGraphVisualConsoleItem(
+                    baseUrl,
+                    visualConsole.props.id,
+                    function(error, data) {
+                      if (error || !data) {
+                        console.log(
+                          "[ERROR]",
+                          "[VISUAL-CONSOLE-CLIENT]",
+                          "[API]",
+                          error ? error.message : "Invalid response"
+                        );
+
+                        done(error);
+                        doneAsyncTask();
+                        return;
+                      }
+
+                      if (typeof data === "string") {
+                        try {
+                          data = JSON.parse(data);
+                        } catch (error) {
+                          console.log(
+                            "[ERROR]",
+                            "[VISUAL-CONSOLE-CLIENT]",
+                            "[API]",
+                            error ? error.message : "Invalid response"
+                          );
+
+                          done(error);
+                          doneAsyncTask();
+                          return; // Stop task execution.
+                        }
+                      }
+
+                      done(null, data);
+                      doneAsyncTask();
+                    }
+                  );
+
+                  return {
+                    cancel: function() {
+                      abortable.abort();
+                    }
+                  };
+                })
+                .init();
+              break;
             case "link-console":
               asyncTaskManager
                 .add(identifier + "-" + params.id, function(doneAsyncTask) {
@@ -1308,6 +1358,69 @@ function getGroupsVisualConsoleItem(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 getCustomGraphVisualConsoleItem(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",
+        getCustomGraphVisualConsoleItem: 1,
+        visualConsoleId: vcId
+      },
+      "json"
+    )
+    .done(handleSuccess)
+    .fail(handleFail);
+
+  // Abortable.
+  return {
+    abort: abort
+  };
+}
+
 /**
  * Fetch groups access user.
  * @param {string} baseUrl Base URL to build the API path.

pandora_console/include/rest-api/index.php

@@ -18,11 +18,21 @@ $updateVisualConsoleItem = (bool) get_parameter('updateVisualConsoleItem');
 $getVisualConsoleItem = (bool) get_parameter('getVisualConsoleItem');
 $removeVisualConsoleItem = (bool) get_parameter('removeVisualConsoleItem');
 $copyVisualConsoleItem = (bool) get_parameter('copyVisualConsoleItem');
-$getGroupsVisualConsoleItem = (bool) get_parameter('getGroupsVisualConsoleItem');
+$getGroupsVisualConsoleItem = (bool) get_parameter(
+    'getGroupsVisualConsoleItem'
+);
 $getAllVisualConsole = (bool) get_parameter('getAllVisualConsole');
 $getImagesVisualConsole = (bool) get_parameter('getImagesVisualConsole');
-$autocompleteAgentsVisualConsole = (bool) get_parameter('autocompleteAgentsVisualConsole');
+$autocompleteAgentsVisualConsole = (bool) get_parameter(
-$autocompleteModuleVisualConsole = (bool) get_parameter('autocompleteModuleVisualConsole');
+    'autocompleteAgentsVisualConsole'
+);
+$autocompleteModuleVisualConsole = (bool) get_parameter(
+    'autocompleteModuleVisualConsole'
+);
+
+$getCustomGraphVisualConsoleItem = (bool) get_parameter(
+    'getCustomGraphVisualConsoleItem'
+);
 
 ob_clean();
 
@@ -456,6 +466,33 @@ if ($getVisualConsole === true) {
         );
     }
 
+    echo json_encode($result);
+    return;
+} else if ($getCustomGraphVisualConsoleItem) {
+    include_once 'include/functions_custom_graphs.php';
+    enterprise_include_once('include/functions_metaconsole.php');
+    $data = [];
+    if (is_metaconsole()) {
+        $data = metaconsole_get_custom_graphs();
+    } else {
+        $data = custom_graphs_get_user(
+            $config['id_user'],
+            false,
+            true,
+            'RR'
+        );
+    }
+
+    $result = array_map(
+        function ($id) use ($data) {
+            return [
+                'value' => $id,
+                'text'  => is_metaconsole() ? io_safe_output($data[$id]) : io_safe_output($data[$id]['name']),
+            ];
+        },
+        array_keys($data)
+    );
+
     echo json_encode($result);
     return;
 }

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

@@ -138,6 +138,14 @@ form.visual-console-item-edition > input[type="submit"] {
   right: 15px;
 }
 
+.show-elements {
+  visibility: visible;
+}
+
+.hide-elements {
+  visibility: hidden;
+}
+
 /* Styles for the solid icons */
 
 .fa {
@@ -210,7 +218,7 @@ form.visual-console-item-edition > input[type="submit"] {
   border-bottom: none;
   border-top: none;
   /*position the autocomplete items to be the same width as the container:*/
-  position: fixed;
+  position: absolute;
   z-index: 1;
   overflow: auto;
   max-height: 150px;

visual_console_client/src/items/ColorCloud.ts

@@ -409,6 +409,9 @@ export default class ColorCloud extends Item<ColorCloudProps> {
    */
   public getFormContainer(): FormContainer {
     const formContainer = super.getFormContainer();
+    formContainer.addInputGroup(
+      new AgentModuleInputGroup("agent-autocomplete", this.props)
+    );
     formContainer.addInputGroup(
       new LinkConsoleInputGroup("link-console", this.props)
     );
@@ -416,9 +419,7 @@ export default class ColorCloud extends Item<ColorCloudProps> {
     formContainer.addInputGroup(
       new RangesInputGroup("ranges-cloud", this.props)
     );
-    formContainer.addInputGroup(
+
-      new AgentModuleInputGroup("agent-aoutocomplete", this.props)
-    );
     return formContainer;
   }
 }

visual_console_client/src/items/EventsHistory.ts

@@ -6,7 +6,12 @@ import {
   stringIsEmpty,
   t
 } from "../lib";
-import Item, { ItemType, ItemProps, itemBasePropsDecoder } from "../Item";
+import Item, {
+  ItemType,
+  ItemProps,
+  itemBasePropsDecoder,
+  AgentModuleInputGroup
+} from "../Item";
 import { InputGroup, FormContainer } from "../Form";
 
 export type EventsHistoryProps = {
@@ -129,10 +134,14 @@ export default class EventsHistory extends Item<EventsHistoryProps> {
    * @override function to add or remove inputsGroups those that are not necessary.
    * Add to:
    * MaxTimeInputGroup
+   * AgentModuleInputGroup
    */
   public getFormContainer(): FormContainer {
     const formContainer = super.getFormContainer();
     formContainer.addInputGroup(new MaxTimeInputGroup("max-time", this.props));
+    formContainer.addInputGroup(
+      new AgentModuleInputGroup("agent-autocomplete", this.props)
+    );
 
     return formContainer;
   }

visual_console_client/src/items/ModuleGraph.ts

@@ -16,9 +16,15 @@ import Item, {
   ItemType,
   ItemProps,
   itemBasePropsDecoder,
-  LinkConsoleInputGroup
+  LinkConsoleInputGroup,
+  AgentModuleInputGroup
 } from "../Item";
 import { FormContainer, InputGroup } from "../Form";
+import fontAwesomeIcon from "../lib/FontAwesomeIcon";
+import {
+  faCircleNotch,
+  faExclamationCircle
+} from "@fortawesome/free-solid-svg-icons";
 
 export type ModuleGraphProps = {
   type: ItemType.MODULE_GRAPH;
@@ -140,6 +146,138 @@ class BackgroundTypeInputGroup extends InputGroup<Partial<ModuleGraphProps>> {
 }
 
 /**
+ * Class to add item to the Module graph item form
+ * This item consists of a radio buttons.
+ */
+class ChooseTypeInputGroup extends InputGroup<Partial<ModuleGraphProps>> {
+  protected createContent(): HTMLElement | HTMLElement[] {
+    const divContainer = document.createElement("div");
+    const radioButtonModuleLabel = document.createElement("label");
+    radioButtonModuleLabel.textContent = t("Module Graph");
+
+    divContainer.appendChild(radioButtonModuleLabel);
+
+    const radioButtonModule = document.createElement("input");
+    radioButtonModule.type = "radio";
+    radioButtonModule.name = "type-graph";
+    radioButtonModule.value = "module";
+    radioButtonModule.required = true;
+
+    divContainer.appendChild(radioButtonModule);
+
+    radioButtonModule.addEventListener("change", event => {
+      const show = document.getElementsByClassName(
+        "input-group-agent-autocomplete"
+      );
+      for (let i = 0; i < show.length; i++) {
+        show[i].classList.add("show-elements");
+        show[i].classList.remove("hide-elements");
+      }
+    });
+
+    const radioButtonCustomLabel = document.createElement("label");
+    radioButtonCustomLabel.textContent = t("Custom Graph");
+
+    divContainer.appendChild(radioButtonCustomLabel);
+
+    const radioButtonCustom = document.createElement("input");
+    radioButtonCustom.type = "radio";
+    radioButtonCustom.name = "type-graph";
+    radioButtonCustom.value = "module";
+    radioButtonCustom.required = true;
+
+    divContainer.appendChild(radioButtonCustom);
+
+    radioButtonCustom.addEventListener("change", event => {
+      const show = document.getElementsByClassName(
+        "input-group-agent-autocomplete"
+      );
+      for (let i = 0; i < show.length; i++) {
+        show[i].classList.add("hide-elements");
+        show[i].classList.remove("show-elements");
+      }
+    });
+
+    /*
+      backgroundTypeSelect.value =
+        this.currentData.backgroundType ||
+        this.initialData.backgroundType ||
+        "default";
+
+      backgroundTypeSelect.addEventListener("change", event => {
+        this.updateData({
+          backgroundType: parseBackgroundType(
+            (event.target as HTMLSelectElement).value
+          )
+        });
+      });
+    */
+
+    return divContainer;
+  }
+}
+
+/**
+ * Class to add item to the general items form
+ * This item consists of a label and a Acl Group type select.
+ * Acl is stored in the aclGroupId property
+ */
+class CustomGraphInputGroup extends InputGroup<Partial<ItemProps>> {
+  protected createContent(): HTMLElement | HTMLElement[] {
+    const customGraphLabel = document.createElement("label");
+    customGraphLabel.textContent = t("Custom graph");
+
+    const spinner = fontAwesomeIcon(faCircleNotch, t("Spinner"), {
+      size: "small",
+      spin: true
+    });
+    customGraphLabel.appendChild(spinner);
+
+    this.requestData("custom-graph-list", {}, (error, data) => {
+      // Remove Spinner.
+      spinner.remove();
+
+      if (error) {
+        customGraphLabel.appendChild(
+          fontAwesomeIcon(faExclamationCircle, t("Error"), {
+            size: "small",
+            color: "#e63c52"
+          })
+        );
+      }
+
+      if (data instanceof Array) {
+        const customGraphSelect = document.createElement("select");
+        customGraphSelect.required = true;
+
+        data.forEach(option => {
+          const optionElement = document.createElement("option");
+          optionElement.value = option.value;
+          optionElement.textContent = option.text;
+          customGraphSelect.appendChild(optionElement);
+        });
+
+        /*
+        customGraphSelect.addEventListener("change", event => {
+          this.updateData({
+            aclGroupId: parseIntOr((event.target as HTMLSelectElement).value, 0)
+          });
+        });
+
+        customGraphSelect.value = `${this.currentData.aclGroupId ||
+          this.initialData.aclGroupId ||
+          0}`;
+          */
+
+        customGraphLabel.appendChild(customGraphSelect);
+      }
+    });
+
+    return customGraphLabel;
+  }
+}
+
+/*
  * Class to add item to the Module graph item form
  * This item consists of a label and select type graph.
  * Show type is stored in the  property.
@@ -293,6 +431,15 @@ export default class ModuleGraph extends Item<ModuleGraphProps> {
     formContainer.addInputGroup(
       new LinkConsoleInputGroup("link-console", this.props)
     );
+    formContainer.addInputGroup(
+      new ChooseTypeInputGroup("show-type-graph", this.props)
+    );
+    formContainer.addInputGroup(
+      new AgentModuleInputGroup("agent-autocomplete", this.props)
+    );
+    formContainer.addInputGroup(
+      new CustomGraphInputGroup("custom-graph-list", this.props)
+    );
     return formContainer;
   }
 }

visual_console_client/src/items/SimpleValue.ts

@@ -15,7 +15,8 @@ import Item, {
   ItemType,
   ItemProps,
   itemBasePropsDecoder,
-  LinkConsoleInputGroup
+  LinkConsoleInputGroup,
+  AgentModuleInputGroup
 } from "../Item";
 import { FormContainer, InputGroup } from "../Form";
 
@@ -271,6 +272,7 @@ export default class SimpleValue extends Item<SimpleValueProps> {
    * Add to:
    * LinkConsoleInputGroup
    * ProcessInputGroup
+   * AgentModuleInputGroup
    */
   public getFormContainer(): FormContainer {
     const formContainer = super.getFormContainer();
@@ -280,6 +282,9 @@ export default class SimpleValue extends Item<SimpleValueProps> {
     formContainer.addInputGroup(
       new ProcessInputGroup("process-operation", this.props)
     );
+    formContainer.addInputGroup(
+      new AgentModuleInputGroup("agent-autocomplete", this.props)
+    );
     return formContainer;
   }
 }

visual_console_client/src/lib/autocomplete.css

@@ -11,7 +11,7 @@
   border-bottom: none;
   border-top: none;
   /*position the autocomplete items to be the same width as the container:*/
-  position: fixed;
+  position: absolute;
   z-index: 1;
   overflow: auto;
   max-height: 150px;

visual_console_client/src/main.css

@@ -101,3 +101,11 @@ form.visual-console-item-edition > input[type="submit"] {
   bottom: 5px;
   right: 15px;
 }
+
+.show-elements {
+  visibility: visible;
+}
+
+.hide-elements {
+  visibility: hidden;
+}