add new input group parent linked

pandora_console/include/javascript/pandora_visual_console.js

@@ -168,22 +168,36 @@ function createVisualConsole(
         visualConsole.selectItem(props.id, true);
 
         var formContainer = item.getFormContainer();
-        // var formContainer = VisualConsole.items[props.type].getFormContainer(
-        //   props
-        // );
-        var formElement = formContainer.getFormElement();
-        var $formElement = jQuery(formElement);
-
         formContainer.onInputGroupDataRequested(function(e) {
           var identifier = e.identifier;
           var params = e.params;
           var done = e.done;
 
           switch (identifier) {
+            case "parent":
+              var options = visualConsole.elements
+                .filter(function(item) {
+                  return item.props.id !== params.id;
+                })
+                .map(function(item) {
+                  return {
+                    value: item.props.id,
+                    text: VisualConsole.itemDescriptiveName(item)
+                  };
+                });
+
+              done(null, options);
+              break;
             default:
               done(new Error("identifier not found"));
           }
         });
+        // var formContainer = VisualConsole.items[props.type].getFormContainer(
+        //   props
+        // );
+        var formElement = formContainer.getFormElement();
+        var $formElement = jQuery(formElement);
+
         formContainer.onSubmit(function(e) {
           // Send the update.
           var id = props.id;

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

@@ -836,6 +836,10 @@ class Item extends CachedModel
      */
     protected static function fetchAgentDataFromDB(array $itemData): array
     {
+        // Load side libraries.
+        global $config;
+        include_once $config['homedir'].'/include/functions_io.php';
+
         $agentData = [];
 
         // We should add the metaconsole Id if we can.
@@ -887,7 +891,7 @@ class Item extends CachedModel
         $agentData['agentDescription'] = $agent['comentarios'];
         $agentData['agentAddress'] = $agent['direccion'];
 
-        return $agentData;
+        return \io_safe_output($agentData);
     }
 
 
@@ -903,6 +907,10 @@ class Item extends CachedModel
      */
     protected static function fetchModuleDataFromDB(array $itemData): array
     {
+        // Load side libraries.
+        global $config;
+        include_once $config['homedir'].'/include/functions_io.php';
+
         // Load side libraries.
         if (\is_metaconsole()) {
             \enterprise_include_once('include/functions_metaconsole.php');
@@ -961,7 +969,7 @@ class Item extends CachedModel
         $moduleData['moduleName'] = $moduleName['nombre'];
         $moduleData['moduleDescription'] = $moduleName['descripcion'];
 
-        return $moduleData;
+        return \io_safe_output($moduleData);
     }
 
 

visual_console_client/src/Form.ts

@@ -1,11 +1,11 @@
 import TypedEvent, { Listener, Disposable } from "./lib/TypedEvent";
-import { AnyObject } from "./lib/types";
+import { AnyObject, UnknownObject } from "./lib/types";
 import { t } from "./lib";
 
-interface InputGroupDataRequestedEvent<T> {
+interface InputGroupDataRequestedEvent {
   identifier: string;
-  params: AnyObject;
+  params: UnknownObject;
-  done: (error: Error | null, data?: T | null) => void;
+  done: (error: Error | null, data?: unknown) => void;
 }
 
 // TODO: Document
@@ -16,7 +16,7 @@ export abstract class InputGroup<Data extends {} = {}> {
   protected currentData: Partial<Data> = {};
   // Event manager for data requests.
   private readonly dataRequestedEventManager = new TypedEvent<
-    InputGroupDataRequestedEvent<Partial<Data>>
+    InputGroupDataRequestedEvent
   >();
 
   public constructor(name: string, initialData: Data) {
@@ -70,14 +70,14 @@ export abstract class InputGroup<Data extends {} = {}> {
 
   protected requestData(
     identifier: string,
-    params: AnyObject,
+    params: UnknownObject,
-    done: (error: Error | null, data?: Partial<Data> | null) => void
+    done: (error: Error | null, data?: unknown) => void
   ): void {
     this.dataRequestedEventManager.emit({ identifier, params, done });
   }
 
   public onDataRequested(
-    listener: Listener<InputGroupDataRequestedEvent<Partial<Data>>>
+    listener: Listener<InputGroupDataRequestedEvent>
   ): Disposable {
     return this.dataRequestedEventManager.on(listener);
   }
@@ -101,7 +101,7 @@ export class FormContainer {
   private readonly submitEventManager = new TypedEvent<SubmitFormEvent>();
   // Event manager for item data requests.
   private readonly itemDataRequestedEventManager = new TypedEvent<
-    InputGroupDataRequestedEvent<Partial<{}>>
+    InputGroupDataRequestedEvent
   >();
   private handleItemDataRequested = this.itemDataRequestedEventManager.emit;
 
@@ -253,7 +253,7 @@ export class FormContainer {
   }
 
   public onInputGroupDataRequested(
-    listener: Listener<InputGroupDataRequestedEvent<Partial<{}>>>
+    listener: Listener<InputGroupDataRequestedEvent>
   ): Disposable {
     return this.itemDataRequestedEventManager.on(listener);
   }

visual_console_client/src/Item.ts

@@ -22,6 +22,7 @@ import {
 } from "./lib";
 import TypedEvent, { Listener, Disposable } from "./lib/TypedEvent";
 import { FormContainer, InputGroup } from "./Form";
+import { isObject } from "util";
 
 // Enum: https://www.typescriptlang.org/docs/handbook/enums.html.
 export const enum ItemType {
@@ -238,6 +239,51 @@ class SizeInputGroup extends InputGroup<Partial<ItemProps>> {
   }
 }
 
+/**
+ * Class to add item to the static Graph item form
+ * This item consists of a label and a color type select.
+ * Show Last Value is stored in the showLastValueTooltip property
+ */
+class ParentInputGroup extends InputGroup<Partial<ItemProps>> {
+  protected createContent(): HTMLElement | HTMLElement[] {
+    const parentLabel = document.createElement("label");
+    parentLabel.textContent = t("Parent");
+
+    const parentSelect = document.createElement("select");
+    parentSelect.required = true;
+
+    this.requestData("parent", { id: this.initialData.id }, (error, data) => {
+      const optionElement = document.createElement("option");
+      optionElement.value = "0";
+      optionElement.textContent = t("None");
+      parentSelect.appendChild(optionElement);
+
+      if (data instanceof Array) {
+        data.forEach(option => {
+          const optionElement = document.createElement("option");
+          optionElement.value = option.value;
+          optionElement.textContent = option.text;
+          parentSelect.appendChild(optionElement);
+        });
+      }
+
+      parentSelect.addEventListener("change", event => {
+        this.updateData({
+          parentId: parseIntOr((event.target as HTMLSelectElement).value, 0)
+        });
+      });
+
+      parentSelect.value = `${this.currentData.parentId ||
+        this.initialData.parentId ||
+        0}`;
+    });
+
+    parentLabel.appendChild(parentSelect);
+
+    return parentLabel;
+  }
+}
+
 /**
  * Extract a valid enum value from a raw label position value.
  * @param labelPosition Raw value.
@@ -1137,9 +1183,10 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
         new PositionInputGroup("position", this.props),
         new SizeInputGroup("size", this.props),
         new LinkInputGroup("link", this.props),
-        new OnTopInputGroup("show-on-top", this.props)
+        new OnTopInputGroup("show-on-top", this.props),
+        new ParentInputGroup("parent", this.props)
       ],
-      ["position", "size", "link", "show-on-top"]
+      ["position", "size", "link", "show-on-top", "parent"]
     );
 
     //return VisualConsoleItem.getFormContainer(this.props);
@@ -1153,9 +1200,10 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
         new PositionInputGroup("position", props),
         new SizeInputGroup("size", props),
         new LinkInputGroup("link", props),
-        new OnTopInputGroup("show-on-top", props)
+        new OnTopInputGroup("show-on-top", props),
+        new ParentInputGroup("parent", props)
       ],
-      ["position", "size", "link", "show-on-top"]
+      ["position", "size", "link", "show-on-top", "parent"]
     );
   }
 }

visual_console_client/src/VisualConsole.ts

@@ -1,10 +1,12 @@
-import { AnyObject, Size, Position } from "./lib/types";
+import { AnyObject, Size, Position, WithModuleProps } from "./lib/types";
 import {
   parseBoolean,
   sizePropsDecoder,
   parseIntOr,
   notEmptyStringOr,
-  itemMetaDecoder
+  itemMetaDecoder,
+  t,
+  ellipsize
 } from "./lib";
 import Item, {
   ItemType,
@@ -908,4 +910,75 @@ export default class VisualConsole {
     [ItemType.CLOCK]: Clock,
     [ItemType.COLOR_CLOUD]: ColorCloud
   };
+
+  /**
+   * Relying type item and srcimg and agent and module
+   * name convert name item representative.
+   *
+   * @param item Instance item from extract name.
+   *
+   * @return Name item.
+   */
+  public static itemDescriptiveName(item: Item<ItemProps>): string {
+    let text: string;
+    switch (item.props.type) {
+      case ItemType.STATIC_GRAPH:
+        text = `${t("Static graph")} - ${(item as StaticGraph).props.imageSrc}`;
+        break;
+      case ItemType.MODULE_GRAPH:
+        text = t("Module graph");
+        break;
+      case ItemType.CLOCK:
+        text = t("Clock");
+        break;
+      case ItemType.BARS_GRAPH:
+        text = t("Bars graph");
+        break;
+      case ItemType.AUTO_SLA_GRAPH:
+        text = t("Auto SLA Graph");
+        break;
+      case ItemType.PERCENTILE_BAR:
+        text = t("Percentile bar");
+        break;
+      case ItemType.CIRCULAR_PROGRESS_BAR:
+        text = t("Circular progress bar");
+        break;
+      case ItemType.CIRCULAR_INTERIOR_PROGRESS_BAR:
+        text = t("Circular progress bar (interior)");
+        break;
+      case ItemType.SIMPLE_VALUE:
+        text = t("Simple Value");
+        break;
+      case ItemType.LABEL:
+        text = t("Label");
+        break;
+      case ItemType.GROUP_ITEM:
+        text = t("Group");
+        break;
+      case ItemType.COLOR_CLOUD:
+        text = t("Color cloud");
+        break;
+      case ItemType.ICON:
+        text = `${t("Icon")} - ${(item as Icon).props.imageSrc}`;
+        break;
+      default:
+        text = t("Item");
+        break;
+    }
+
+    const linkedAgentAndModuleProps = item.props as Partial<WithModuleProps>;
+    if (
+      linkedAgentAndModuleProps.agentAlias != null &&
+      linkedAgentAndModuleProps.moduleName != null
+    ) {
+      text += ` (${ellipsize(
+        linkedAgentAndModuleProps.agentAlias,
+        18
+      )} - ${ellipsize(linkedAgentAndModuleProps.moduleName, 25)})`;
+    } else if (linkedAgentAndModuleProps.agentAlias != null) {
+      text += ` (${ellipsize(linkedAgentAndModuleProps.agentAlias, 25)})`;
+    }
+
+    return text;
+  }
 }

visual_console_client/src/items/Percentile.ts

@@ -347,7 +347,7 @@ class ValueColorInputGroup extends InputGroup<Partial<PercentileProps>> {
 /**
  * Class to add item to the percentile item form
  * This item consists of a label and a color type input.
- * label is stored in the unit property
+ * label is stored in the label property
  */
 class LabelPercentileInputGroup extends InputGroup<Partial<PercentileProps>> {
   protected createContent(): HTMLElement | HTMLElement[] {
@@ -358,13 +358,13 @@ class LabelPercentileInputGroup extends InputGroup<Partial<PercentileProps>> {
     labelPercentileInput.type = "text";
     labelPercentileInput.required = true;
 
-    labelPercentileInput.value = `${this.currentData.unit ||
+    labelPercentileInput.value = `${this.currentData.label ||
-      this.currentData.unit ||
+      this.currentData.label ||
       ""} `;
 
     labelPercentileInput.addEventListener("change", e => {
       this.updateData({
-        unit: (e.target as HTMLInputElement).value
+        label: (e.target as HTMLInputElement).value
       });
     });
 

visual_console_client/src/lib/index.ts

@@ -765,3 +765,19 @@ export function helpTip(text: string): HTMLElement {
 
   return container;
 }
+
+/**
+ * Cuts the text if their length is greater than the selected max length
+ * and applies the selected ellipse to the result text.
+ * @param {string} str Text to cut
+ * @param {number} max Maximum length after cutting the text
+ * @param {string} ellipse String to be added to the cutted text
+ * @returns {string} Full text or text cutted with the ellipse
+ */
+export function ellipsize(
+  str: string,
+  max: number = 140,
+  ellipse: string = "…"
+): string {
+  return str.trim().length > max ? str.substr(0, max).trim() + ellipse : str;
+}