Add new input group visual console linked

pandora_console/include/javascript/pandora_visual_console.js

@@ -238,6 +238,56 @@ function createVisualConsole(
                 })
                 .init();
               break;
+            case "link-console":
+              asyncTaskManager
+                .add(identifier + "-" + params.id, function(doneAsyncTask) {
+                  var abortable = getAllVisualConsole(
+                    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;
             default:
               done(new Error("identifier not found"));
           }
@@ -923,6 +973,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 getAllVisualConsole(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",
+        getAllVisualConsole: 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.

pandora_console/include/rest-api/index.php

@@ -19,6 +19,7 @@ $getVisualConsoleItem = (bool) get_parameter('getVisualConsoleItem');
 $removeVisualConsoleItem = (bool) get_parameter('removeVisualConsoleItem');
 $copyVisualConsoleItem = (bool) get_parameter('copyVisualConsoleItem');
 $getGroupsVisualConsoleItem = (bool) get_parameter('getGroupsVisualConsoleItem');
+$getAllVisualConsole = (bool) get_parameter('getAllVisualConsole');
 
 ob_clean();
 
@@ -188,6 +189,58 @@ if ($getVisualConsole === true) {
 
     echo json_encode($result);
     return;
+} else if ($getAllVisualConsole === true) {
+    // Extract all VC except own.
+    $result = db_get_all_rows_filter(
+        'tlayout',
+        'id != '.(int) $visualConsole,
+        [
+            'id',
+            'name',
+        ]
+    );
+
+    // Extract all VC for each node.
+    if (is_metaconsole() === true) {
+        enterprise_include_once('include/functions_metaconsole.php');
+        $meta_servers = metaconsole_get_servers();
+        foreach ($meta_servers as $server) {
+            if (metaconsole_load_external_db($server) !== NOERR) {
+                metaconsole_restore_db();
+                continue;
+            }
+
+            $node_visual_maps = db_get_all_rows_filter(
+                'tlayout',
+                [],
+                [
+                    'id',
+                    'name',
+                ]
+            );
+
+            if (isset($node_visual_maps) === true
+                && is_array($node_visual_maps) === true
+            ) {
+                foreach ($node_visual_maps as $node_visual_map) {
+                    // Add nodeID.
+                    $node_visual_map['nodeId'] = (int) $server['id'];
+
+                    // Name = vc_name - (node).
+                    $node_visual_map['name'] = $node_visual_map['name'];
+                    $node_visual_map['name'] .= ' - (';
+                    $node_visual_map['name'] .= $server['server_name'].')';
+
+                    $result[] = $node_visual_map;
+                }
+            }
+
+            metaconsole_restore_db();
+        }
+    }
+
+    echo json_encode(io_safe_output($result));
+    return;
 }
 
 exit;

visual_console_client/src/Item.ts

@@ -3,7 +3,8 @@ import {
   Size,
   AnyObject,
   WithModuleProps,
-  ItemMeta
+  ItemMeta,
+  LinkedVisualConsoleProps
 } from "./lib/types";
 import {
   sizePropsDecoder,
@@ -292,7 +293,7 @@ class ParentInputGroup extends InputGroup<Partial<ItemProps>> {
 /**
  * Class to add item to the general items form
  * This item consists of a label and a color type select.
- * Parent is stored in the parentId property
+ * Acl is stored in the aclGroupId property
  */
 class AclGroupInputGroup extends InputGroup<Partial<ItemProps>> {
   protected createContent(): HTMLElement | HTMLElement[] {
@@ -350,6 +351,410 @@ class AclGroupInputGroup extends InputGroup<Partial<ItemProps>> {
   }
 }
 
+/**
+ * Class to add item to the general items form
+ * This item consists of a label and a color type select.
+ * Parent is stored in the parentId property
+ */
+export class LinkConsoleInputGroup extends InputGroup<
+  Partial<ItemProps & LinkedVisualConsoleProps>
+> {
+  protected createContent(): HTMLElement | HTMLElement[] {
+    // Create div container.
+    const container = document.createElement("div");
+    const lvcTypeContainer = document.createElement("div");
+
+    // Create Principal element label - select.
+    const linkConsoleLabel = document.createElement("label");
+    linkConsoleLabel.textContent = t("Linked visual console	");
+
+    // Create element Spinner.
+    const spinner = fontAwesomeIcon(faCircleNotch, t("Spinner"), {
+      size: "small",
+      spin: true
+    });
+    linkConsoleLabel.appendChild(spinner);
+
+    // Init request
+    this.requestData("link-console", {}, (error, data) => {
+      // Remove Spinner.
+      spinner.remove();
+
+      // Check errors.
+      if (error) {
+        // Add img error.
+        linkConsoleLabel.appendChild(
+          fontAwesomeIcon(faExclamationCircle, t("Error"), {
+            size: "small",
+            color: "#e63c52"
+          })
+        );
+      }
+
+      // Check data is array
+      if (data instanceof Array) {
+        // Create principal element select
+        const linkConsoleSelect = document.createElement("select");
+        linkConsoleSelect.required = true;
+
+        // Default option principal select.
+        const defaultOptionElement = document.createElement("option");
+        defaultOptionElement.value = "0";
+        defaultOptionElement.textContent = t("none");
+        linkConsoleSelect.appendChild(defaultOptionElement);
+
+        // Create other options for principal select.
+        data.forEach(option => {
+          let id = option.id;
+          // Check if metaconsole save id|nodeID.
+          if (option.nodeId) {
+            id = `${option.id}|${option.nodeId}`;
+          }
+
+          // Create option
+          const optionElement = document.createElement("option");
+          optionElement.value = id;
+          optionElement.textContent = option.name;
+          linkConsoleSelect.appendChild(optionElement);
+        });
+
+        // Set values.
+        // Principal values .
+        // Convert current data to string if meta id|idNode or only id if node.
+        let currentValue: string | undefined;
+        if (typeof this.currentData.linkedLayoutId !== "undefined") {
+          currentValue =
+            typeof this.currentData.linkedLayoutNodeId !== "undefined" &&
+            this.currentData.linkedLayoutNodeId !== 0
+              ? `${this.currentData.linkedLayoutId}|${
+                  this.currentData.linkedLayoutNodeId
+                }`
+              : `${this.currentData.linkedLayoutId}`;
+        }
+
+        // Convert Initial data to string if meta id|idNode or only id if node.
+        let initialValue: string | undefined;
+        if (typeof this.initialData.linkedLayoutId !== "undefined") {
+          initialValue =
+            typeof this.initialData.linkedLayoutNodeId !== "undefined" &&
+            this.initialData.linkedLayoutNodeId !== 0
+              ? `${this.initialData.linkedLayoutId}|${
+                  this.initialData.linkedLayoutNodeId
+                }`
+              : `${this.initialData.linkedLayoutId}`;
+        }
+
+        linkConsoleSelect.value = `${currentValue || initialValue || 0}`;
+
+        // Listener event change select principal.
+        linkConsoleSelect.addEventListener("change", event => {
+          // Convert value to insert data.
+          const linkedLayoutExtract = (event.target as HTMLSelectElement).value.split(
+            "|"
+          );
+
+          let linkedLayoutNodeId = 0;
+          let linkedLayoutId = 0;
+          if (linkedLayoutExtract instanceof Array) {
+            linkedLayoutId = parseIntOr(linkedLayoutExtract[0], 0);
+            linkedLayoutNodeId = parseIntOr(linkedLayoutExtract[1], 0);
+          }
+
+          // Update data element.
+          this.updateData({
+            linkedLayoutId: linkedLayoutId,
+            linkedLayoutNodeId: linkedLayoutNodeId,
+            linkedLayoutStatusType: "default"
+          });
+
+          // Add containerType to container.
+          lvcTypeContainer.childNodes.forEach(n => n.remove());
+          lvcTypeContainer.appendChild(
+            this.getLinkedVisualConsoleTypeSelector(linkedLayoutId)
+          );
+        });
+
+        // Add principal select to label.
+        linkConsoleLabel.appendChild(linkConsoleSelect);
+
+        // Add weight warning field.
+        container.appendChild(linkConsoleLabel);
+
+        // Add containerType to container.
+        lvcTypeContainer.appendChild(
+          this.getLinkedVisualConsoleTypeSelector(
+            parseIntOr(this.initialData.linkedLayoutId, 0)
+          )
+        );
+        container.appendChild(lvcTypeContainer);
+      }
+    });
+
+    return container;
+  }
+
+  private getLinkedVisualConsoleTypeSelector = (
+    linkedLayoutId: number
+  ): HTMLElement => {
+    // Create div container Type.
+    const containerType = document.createElement("div");
+
+    const lvcTypeContainerChild = document.createElement("div");
+
+    // Check id visual console for show label type.
+    if (linkedLayoutId === 0) return containerType;
+
+    // Select type link console appears when selecting a visual console
+    // from the main select.
+    // Label type link.
+    const typeLinkConsoleLabel = document.createElement("label");
+    typeLinkConsoleLabel.textContent = t(
+      "Type of the status calculation of the linked visual console"
+    );
+
+    // Select type link.
+    const typeLinkConsoleSelect = document.createElement("select");
+    typeLinkConsoleSelect.required = false;
+
+    // Array types for Linked. default | weight | service.
+    const arrayTypeLinked = [
+      { value: "default", text: t("By default") },
+      { value: "weight", text: t("By status weight") },
+      { value: "service", text: t("By critical elements") }
+    ];
+
+    // Create options select type link.
+    arrayTypeLinked.forEach(option => {
+      const typeOptionElement = document.createElement("option");
+      typeOptionElement.value = option.value;
+      typeOptionElement.textContent = option.text;
+      typeLinkConsoleSelect.appendChild(typeOptionElement);
+    });
+
+    // Set values undef is default.
+    let value: LinkedVisualConsoleProps["linkedLayoutStatusType"];
+    value =
+      typeof this.currentData.linkedLayoutStatusType === "undefined"
+        ? typeof this.initialData.linkedLayoutStatusType === "undefined"
+          ? "default"
+          : this.initialData.linkedLayoutStatusType
+        : this.currentData.linkedLayoutStatusType;
+
+    typeLinkConsoleSelect.value = value;
+
+    // Add select type link.
+    typeLinkConsoleLabel.appendChild(typeLinkConsoleSelect);
+
+    // Add type link.
+    containerType.appendChild(typeLinkConsoleLabel);
+
+    switch (value) {
+      case "weight":
+        // Add Chil container with weight.
+        lvcTypeContainerChild.appendChild(
+          this.getLinkedVisualConsoleTypeWeihtInput()
+        );
+        break;
+      case "service":
+        // Add Chil container with weight.
+        lvcTypeContainerChild.appendChild(
+          this.getLinkedVisualConsoleTypeServiceInput()
+        );
+        break;
+      default:
+        break;
+    }
+
+    // Add types.
+    containerType.appendChild(lvcTypeContainerChild);
+
+    // Listener event change select type link.
+    typeLinkConsoleSelect.addEventListener("change", event => {
+      // Convert value to insert data.
+      let value = (event.target as HTMLSelectElement).value;
+      let linkedLayoutStatusType: LinkedVisualConsoleProps["linkedLayoutStatusType"] =
+        value !== "weight" && value !== "service" ? "default" : value;
+
+      lvcTypeContainerChild.childNodes.forEach(n => n.remove());
+
+      switch (linkedLayoutStatusType) {
+        case "weight":
+          // Update data element.
+          this.updateData({
+            linkedLayoutStatusType,
+            linkedLayoutStatusTypeWeight: 0
+          });
+
+          // Add Chil container with weight.
+          lvcTypeContainerChild.appendChild(
+            this.getLinkedVisualConsoleTypeWeihtInput()
+          );
+          break;
+        case "service":
+          // Update data element.
+          this.updateData({
+            linkedLayoutStatusType,
+            linkedLayoutStatusTypeWarningThreshold: 0,
+            linkedLayoutStatusTypeCriticalThreshold: 0
+          });
+
+          // Add Chil container with weight.
+          lvcTypeContainerChild.appendChild(
+            this.getLinkedVisualConsoleTypeServiceInput()
+          );
+          break;
+        default:
+          // Update data element.
+          this.updateData({
+            linkedLayoutStatusType
+          });
+          break;
+      }
+    });
+
+    return containerType;
+  };
+
+  private getLinkedVisualConsoleTypeWeihtInput = (): HTMLElement => {
+    // Crete div container child type.
+    const containerChildType = document.createElement("div");
+
+    // Input selected type = weight.
+    // from the select type.
+    // Label.
+    const weightLabel = document.createElement("label");
+    weightLabel.textContent = t("Linked visual console weight");
+
+    // Input.
+    const weightInput = document.createElement("input");
+    weightInput.type = "number";
+    weightInput.min = "0";
+    weightInput.required = true;
+
+    let currentValueWeight: number | undefined;
+    if (this.currentData.linkedLayoutStatusType === "weight") {
+      currentValueWeight = this.currentData.linkedLayoutStatusTypeWeight;
+    }
+
+    let initialValueWeight: number | undefined;
+    if (this.initialData.linkedLayoutStatusType === "weight") {
+      initialValueWeight = this.initialData.linkedLayoutStatusTypeWeight;
+    }
+
+    weightInput.value = `${currentValueWeight || initialValueWeight || 0}`;
+
+    weightInput.addEventListener("change", e =>
+      this.updateData({
+        linkedLayoutStatusTypeWeight: parseIntOr(
+          (e.target as HTMLInputElement).value,
+          0
+        )
+      })
+    );
+
+    // Add input weight.
+    weightLabel.appendChild(weightInput);
+
+    // Add label weight.
+    containerChildType.appendChild(weightLabel);
+
+    return containerChildType;
+  };
+
+  private getLinkedVisualConsoleTypeServiceInput = (): HTMLElement => {
+    // Crete div container child type.
+    const containerChildType = document.createElement("div");
+
+    // Input selected type = services.
+    // from the select type.
+    // Label.
+    const criticalWeightLabel = document.createElement("label");
+    criticalWeightLabel.textContent = t("Critical weight");
+
+    //Input.
+    const criticalWeightInput = document.createElement("input");
+    criticalWeightInput.type = "number";
+    criticalWeightInput.min = "0";
+    criticalWeightInput.required = true;
+
+    let currentValueCritical: number | undefined;
+    if (this.currentData.linkedLayoutStatusType === "service") {
+      currentValueCritical = this.currentData
+        .linkedLayoutStatusTypeCriticalThreshold;
+    }
+
+    let initialValueCritical: number | undefined;
+    if (this.initialData.linkedLayoutStatusType === "service") {
+      initialValueCritical = this.initialData
+        .linkedLayoutStatusTypeCriticalThreshold;
+    }
+
+    criticalWeightInput.value = `${currentValueCritical ||
+      initialValueCritical ||
+      0}`;
+
+    criticalWeightInput.addEventListener("change", e =>
+      this.updateData({
+        linkedLayoutStatusTypeCriticalThreshold: parseIntOr(
+          (e.target as HTMLInputElement).value,
+          0
+        )
+      })
+    );
+
+    // Input selected type = services.
+    // from the select type.
+    // Label.
+    const warningWeightLabel = document.createElement("label");
+    warningWeightLabel.textContent = t("Warning weight");
+
+    //Input.
+    const warningWeightInput = document.createElement("input");
+    warningWeightInput.type = "number";
+    warningWeightInput.min = "0";
+    warningWeightInput.required = true;
+
+    let currentValueWarning: number | undefined;
+    if (this.currentData.linkedLayoutStatusType === "service") {
+      currentValueWarning = this.currentData
+        .linkedLayoutStatusTypeWarningThreshold;
+    }
+
+    let initialValueWarning: number | undefined;
+    if (this.initialData.linkedLayoutStatusType === "service") {
+      initialValueWarning = this.initialData
+        .linkedLayoutStatusTypeWarningThreshold;
+    }
+
+    warningWeightInput.value = `${currentValueWarning ||
+      initialValueWarning ||
+      0}`;
+
+    warningWeightInput.addEventListener("change", e =>
+      this.updateData({
+        linkedLayoutStatusTypeWarningThreshold: parseIntOr(
+          (e.target as HTMLInputElement).value,
+          0
+        )
+      })
+    );
+
+    // Add input weight warning.
+    warningWeightLabel.appendChild(warningWeightInput);
+
+    // Add label warning field.
+    containerChildType.appendChild(warningWeightLabel);
+
+    // Add input crital weight.
+    criticalWeightLabel.appendChild(criticalWeightInput);
+
+    // Add label weight critical.
+    containerChildType.appendChild(criticalWeightLabel);
+
+    return containerChildType;
+  };
+}
+
 /**
  * Extract a valid enum value from a raw label position value.
  * @param labelPosition Raw value.

visual_console_client/src/items/ColorCloud.ts

@@ -4,7 +4,13 @@ import {
   AnyObject
 } from "../lib/types";
 import { modulePropsDecoder, linkedVCPropsDecoder } from "../lib";
-import Item, { itemBasePropsDecoder, ItemType, ItemProps } from "../Item";
+import Item, {
+  itemBasePropsDecoder,
+  ItemType,
+  ItemProps,
+  LinkConsoleInputGroup
+} from "../Item";
+import { FormContainer } from "../Form";
 
 export type ColorCloudProps = {
   type: ItemType.COLOR_CLOUD;
@@ -101,4 +107,17 @@ export default class ColorCloud extends Item<ColorCloudProps> {
 
     return svg;
   }
+
+  /**
+   * @override function to add or remove inputsGroups those that are not necessary.
+   * Add to:
+   * LinkConsoleInputGroup
+   */
+  public getFormContainer(): FormContainer {
+    const formContainer = super.getFormContainer();
+    formContainer.addInputGroup(
+      new LinkConsoleInputGroup("link-console", this.props)
+    );
+    return formContainer;
+  }
 }

visual_console_client/src/items/DonutGraph.ts

@@ -9,7 +9,13 @@ import {
   decodeBase64,
   stringIsEmpty
 } from "../lib";
-import Item, { ItemType, ItemProps, itemBasePropsDecoder } from "../Item";
+import Item, {
+  ItemType,
+  ItemProps,
+  itemBasePropsDecoder,
+  LinkConsoleInputGroup
+} from "../Item";
+import { FormContainer } from "../Form";
 
 export type DonutGraphProps = {
   type: ItemType.DONUT_GRAPH;
@@ -75,4 +81,17 @@ export default class DonutGraph extends Item<DonutGraphProps> {
       }
     }
   }
+
+  /**
+   * @override function to add or remove inputsGroups those that are not necessary.
+   * Add to:
+   * LinkConsoleInputGroup
+   */
+  public getFormContainer(): FormContainer {
+    const formContainer = super.getFormContainer();
+    formContainer.addInputGroup(
+      new LinkConsoleInputGroup("link-console", this.props)
+    );
+    return formContainer;
+  }
 }

visual_console_client/src/items/Group.ts

@@ -7,7 +7,13 @@ import {
   decodeBase64,
   parseBoolean
 } from "../lib";
-import Item, { ItemProps, itemBasePropsDecoder, ItemType } from "../Item";
+import Item, {
+  ItemProps,
+  itemBasePropsDecoder,
+  ItemType,
+  LinkConsoleInputGroup
+} from "../Item";
+import { FormContainer } from "../Form";
 
 export type GroupProps = {
   type: ItemType.GROUP_ITEM;
@@ -77,4 +83,17 @@ export default class Group extends Item<GroupProps> {
 
     return element;
   }
+
+  /**
+   * @override function to add or remove inputsGroups those that are not necessary.
+   * Add to:
+   * LinkConsoleInputGroup
+   */
+  public getFormContainer(): FormContainer {
+    const formContainer = super.getFormContainer();
+    formContainer.addInputGroup(
+      new LinkConsoleInputGroup("link-console", this.props)
+    );
+    return formContainer;
+  }
 }

visual_console_client/src/items/Icon.ts

@@ -1,6 +1,12 @@
 import { LinkedVisualConsoleProps, AnyObject } from "../lib/types";
 import { linkedVCPropsDecoder } from "../lib";
-import Item, { ItemType, ItemProps, itemBasePropsDecoder } from "../Item";
+import Item, {
+  ItemType,
+  ItemProps,
+  itemBasePropsDecoder,
+  LinkConsoleInputGroup
+} from "../Item";
+import { FormContainer } from "../Form";
 
 export type IconProps = {
   type: ItemType.ICON;
@@ -40,4 +46,17 @@ export default class Icon extends Item<IconProps> {
 
     return element;
   }
+
+  /**
+   * @override function to add or remove inputsGroups those that are not necessary.
+   * Add to:
+   * LinkConsoleInputGroup
+   */
+  public getFormContainer(): FormContainer {
+    const formContainer = super.getFormContainer();
+    formContainer.addInputGroup(
+      new LinkConsoleInputGroup("link-console", this.props)
+    );
+    return formContainer;
+  }
 }

visual_console_client/src/items/Label.ts

@@ -1,6 +1,12 @@
 import { LinkedVisualConsoleProps, AnyObject } from "../lib/types";
 import { linkedVCPropsDecoder } from "../lib";
-import Item, { ItemType, ItemProps, itemBasePropsDecoder } from "../Item";
+import Item, {
+  ItemType,
+  ItemProps,
+  itemBasePropsDecoder,
+  LinkConsoleInputGroup
+} from "../Item";
+import { FormContainer } from "../Form";
 
 export type LabelProps = {
   type: ItemType.LABEL;
@@ -44,4 +50,17 @@ export default class Label extends Item<LabelProps> {
     // Always return an empty label.
     return element;
   }
+
+  /**
+   * @override function to add or remove inputsGroups those that are not necessary.
+   * Add to:
+   * LinkConsoleInputGroup
+   */
+  public getFormContainer(): FormContainer {
+    const formContainer = super.getFormContainer();
+    formContainer.addInputGroup(
+      new LinkConsoleInputGroup("link-console", this.props)
+    );
+    return formContainer;
+  }
 }

visual_console_client/src/items/ModuleGraph.ts

@@ -9,7 +9,13 @@ import {
   decodeBase64,
   stringIsEmpty
 } from "../lib";
-import Item, { ItemType, ItemProps, itemBasePropsDecoder } from "../Item";
+import Item, {
+  ItemType,
+  ItemProps,
+  itemBasePropsDecoder,
+  LinkConsoleInputGroup
+} from "../Item";
+import { FormContainer } from "../Form";
 
 export type ModuleGraphProps = {
   type: ItemType.MODULE_GRAPH;
@@ -101,4 +107,17 @@ export default class ModuleGraph extends Item<ModuleGraphProps> {
       }
     }
   }
+
+  /**
+   * @override function to add or remove inputsGroups those that are not necessary.
+   * Add to:
+   * LinkConsoleInputGroup
+   */
+  public getFormContainer(): FormContainer {
+    const formContainer = super.getFormContainer();
+    formContainer.addInputGroup(
+      new LinkConsoleInputGroup("link-console", this.props)
+    );
+    return formContainer;
+  }
 }

visual_console_client/src/items/Percentile.ts

@@ -13,7 +13,12 @@ import {
   parseFloatOr,
   t
 } from "../lib";
-import Item, { ItemType, ItemProps, itemBasePropsDecoder } from "../Item";
+import Item, {
+  ItemType,
+  ItemProps,
+  itemBasePropsDecoder,
+  LinkConsoleInputGroup
+} from "../Item";
 import { InputGroup, FormContainer } from "../Form";
 
 export type PercentileProps = {
@@ -174,7 +179,7 @@ class MaxValueInputGroup extends InputGroup<Partial<PercentileProps>> {
     maxValueInput.required = true;
 
     maxValueInput.value = `${this.currentData.maxValue ||
-      this.currentData.minValue ||
+      this.initialData.maxValue ||
       0}`;
 
     maxValueInput.addEventListener("change", e => {
@@ -301,7 +306,7 @@ class ElementColorInputGroup extends InputGroup<Partial<PercentileProps>> {
     elementColorInput.required = true;
 
     elementColorInput.value = `${this.currentData.color ||
-      this.currentData.color}`;
+      this.initialData.color}`;
 
     elementColorInput.addEventListener("change", e => {
       this.updateData({
@@ -330,7 +335,7 @@ class ValueColorInputGroup extends InputGroup<Partial<PercentileProps>> {
     valueColorInput.required = true;
 
     valueColorInput.value = `${this.currentData.labelColor ||
-      this.currentData.labelColor}`;
+      this.initialData.labelColor}`;
 
     valueColorInput.addEventListener("change", e => {
       this.updateData({
@@ -359,7 +364,7 @@ class LabelPercentileInputGroup extends InputGroup<Partial<PercentileProps>> {
     labelPercentileInput.required = true;
 
     labelPercentileInput.value = `${this.currentData.label ||
-      this.currentData.label ||
+      this.initialData.label ||
       ""} `;
 
     labelPercentileInput.addEventListener("change", e => {
@@ -558,6 +563,7 @@ export default class Percentile extends Item<PercentileProps> {
    * ElementColorInputGroup,
    * ValueColorInputGroup,
    * LabelPercentileInputGroup
+   * LinkConsoleInputGroup
    * are removed:
    * inputgrouplabel
    * size
@@ -592,6 +598,9 @@ export default class Percentile extends Item<PercentileProps> {
     formContainer.addInputGroup(
       new LabelPercentileInputGroup("label-percentile", this.props)
     );
+    formContainer.addInputGroup(
+      new LinkConsoleInputGroup("link-console", this.props)
+    );
     return formContainer;
   }
 }

visual_console_client/src/items/SimpleValue.ts

@@ -9,7 +9,13 @@ import {
   modulePropsDecoder,
   replaceMacros
 } from "../lib";
-import Item, { ItemType, ItemProps, itemBasePropsDecoder } from "../Item";
+import Item, {
+  ItemType,
+  ItemProps,
+  itemBasePropsDecoder,
+  LinkConsoleInputGroup
+} from "../Item";
+import { FormContainer } from "../Form";
 
 export type SimpleValueProps = {
   type: ItemType.SIMPLE_VALUE;
@@ -124,4 +130,17 @@ export default class SimpleValue extends Item<SimpleValueProps> {
     // Always return an empty label.
     return element;
   }
+
+  /**
+   * @override function to add or remove inputsGroups those that are not necessary.
+   * Add to:
+   * LinkConsoleInputGroup
+   */
+  public getFormContainer(): FormContainer {
+    const formContainer = super.getFormContainer();
+    formContainer.addInputGroup(
+      new LinkConsoleInputGroup("link-console", this.props)
+    );
+    return formContainer;
+  }
 }

visual_console_client/src/items/StaticGraph.ts

@@ -10,7 +10,12 @@ import {
   notEmptyStringOr,
   t
 } from "../lib";
-import Item, { ItemType, ItemProps, itemBasePropsDecoder } from "../Item";
+import Item, {
+  ItemType,
+  ItemProps,
+  itemBasePropsDecoder,
+  LinkConsoleInputGroup
+} from "../Item";
 import { InputGroup, FormContainer } from "../Form";
 
 export type StaticGraphProps = {
@@ -140,12 +145,16 @@ export default class StaticGraph extends Item<StaticGraphProps> {
    * @override function to add or remove inputsGroups those that are not necessary.
    * Add to:
    * ShowLastValueInputGroup
+   * LinkConsoleInputGroup
    */
   public getFormContainer(): FormContainer {
     const formContainer = super.getFormContainer();
     formContainer.addInputGroup(
       new ShowLastValueInputGroup("show-last-value", this.props)
     );
+    formContainer.addInputGroup(
+      new LinkConsoleInputGroup("link-console", this.props)
+    );
     return formContainer;
   }
 }