add news input group

visual_console_client/src/Item.ts

@@ -253,7 +253,7 @@ class SizeInputGroup extends InputGroup<Partial<ItemProps>> {
 
 /**
  * Class to add item to the general items form
- * This item consists of a label and a color type select.
+ * This item consists of a label and a Parent select.
  * Parent is stored in the parentId property
  */
 class ParentInputGroup extends InputGroup<Partial<ItemProps>> {
@@ -298,7 +298,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.
+ * This item consists of a label and a Acl Group type select.
  * Acl is stored in the aclGroupId property
  */
 class AclGroupInputGroup extends InputGroup<Partial<ItemProps>> {
@@ -386,7 +386,7 @@ class CacheExpirationInputGroup extends InputGroup<Partial<ItemProps>> {
 
 /**
  * Class to add item to the general items form
- * This item consists of a label and a color type select.
+ * This item consists of a label and a Link console type select.
  * Parent is stored in the parentId property
  */
 export class LinkConsoleInputGroup extends InputGroup<
@@ -424,18 +424,18 @@ export class LinkConsoleInputGroup extends InputGroup<
         );
       }
 
+      // 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);
+
       // 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;
@@ -520,6 +520,10 @@ export class LinkConsoleInputGroup extends InputGroup<
           )
         );
         container.appendChild(lvcTypeContainer);
+      } else {
+        // Add principal select to label.
+        linkConsoleLabel.appendChild(linkConsoleSelect);
+        container.appendChild(linkConsoleLabel);
       }
     });
 
@@ -790,7 +794,7 @@ export class LinkConsoleInputGroup extends InputGroup<
 
 /**
  * Class to add item to the static Graph item form
- * This item consists of a label and a color type select.
+ * This item consists of a label and a Image select.
  * Show Last Value is stored in the showLastValueTooltip property
  */
 export class ImageInputGroup extends InputGroup<Partial<ImageInputGroupProps>> {

visual_console_client/src/items/BarsGraph.ts

@@ -1,13 +1,169 @@
 import { AnyObject, WithModuleProps } from "../lib/types";
-import { modulePropsDecoder, decodeBase64, stringIsEmpty } from "../lib";
+import { modulePropsDecoder, decodeBase64, stringIsEmpty, t } from "../lib";
 import Item, { ItemType, ItemProps, itemBasePropsDecoder } from "../Item";
+import { InputGroup, FormContainer } from "../Form";
 
 export type BarsGraphProps = {
   type: ItemType.BARS_GRAPH;
   html: string;
+  backgroundColor: "white" | "black" | "transparent";
+  typeGraph: "horizontal" | "vertical";
+  gridColor: string;
 } & ItemProps &
   WithModuleProps;
 
+/**
+ * Extract a valid enum value from a raw unknown value.
+ * @param BarsGraphProps Raw value.
+ */
+const parseBarsGraphProps = (
+  backgroundColor: unknown
+): BarsGraphProps["backgroundColor"] => {
+  switch (backgroundColor) {
+    case "white":
+    case "black":
+    case "transparent":
+      return backgroundColor;
+    default:
+      return "transparent";
+  }
+};
+
+/**
+ * Extract a valid enum value from a raw unknown value.
+ * @param typeGraph Raw value.
+ */
+const parseTypeGraph = (typeGraph: unknown): BarsGraphProps["typeGraph"] => {
+  switch (typeGraph) {
+    case "horizontal":
+    case "vertical":
+      return typeGraph;
+    default:
+      return "vertical";
+  }
+};
+
+/**
+ * Class to add item to the Bars graph item form
+ * This item consists of a label and select background.
+ * Show background is stored in the backgroundType property.
+ */
+class BackgroundColorInputGroup extends InputGroup<Partial<BarsGraphProps>> {
+  protected createContent(): HTMLElement | HTMLElement[] {
+    const backgroundTypeLabel = document.createElement("label");
+    backgroundTypeLabel.textContent = t("Background color");
+
+    const options: {
+      value: BarsGraphProps["backgroundColor"];
+      text: string;
+    }[] = [
+      { value: "white", text: t("White") },
+      { value: "black", text: t("Black") },
+      { value: "transparent", text: t("Transparent") }
+    ];
+
+    const backgroundTypeSelect = document.createElement("select");
+    backgroundTypeSelect.required = true;
+
+    options.forEach(option => {
+      const optionElement = document.createElement("option");
+      optionElement.value = option.value;
+      optionElement.textContent = option.text;
+      backgroundTypeSelect.appendChild(optionElement);
+    });
+
+    backgroundTypeSelect.value =
+      this.currentData.backgroundColor ||
+      this.initialData.backgroundColor ||
+      "default";
+
+    backgroundTypeSelect.addEventListener("change", event => {
+      this.updateData({
+        backgroundColor: parseBarsGraphProps(
+          (event.target as HTMLSelectElement).value
+        )
+      });
+    });
+
+    backgroundTypeLabel.appendChild(backgroundTypeSelect);
+
+    return backgroundTypeLabel;
+  }
+}
+
+/**
+ * Class to add item to the Bars graph item form
+ * This item consists of a label and select type graph.
+ * Show type is stored in the typeGraph property.
+ */
+class TypeGraphInputGroup extends InputGroup<Partial<BarsGraphProps>> {
+  protected createContent(): HTMLElement | HTMLElement[] {
+    const graphTypeLabel = document.createElement("label");
+    graphTypeLabel.textContent = t("Graph Type");
+
+    const options: {
+      value: BarsGraphProps["typeGraph"];
+      text: string;
+    }[] = [
+      { value: "horizontal", text: t("Horizontal") },
+      { value: "vertical", text: t("Vertical") }
+    ];
+
+    const graphTypeSelect = document.createElement("select");
+    graphTypeSelect.required = true;
+
+    options.forEach(option => {
+      const optionElement = document.createElement("option");
+      optionElement.value = option.value;
+      optionElement.textContent = option.text;
+      graphTypeSelect.appendChild(optionElement);
+    });
+
+    graphTypeSelect.value =
+      this.currentData.typeGraph || this.initialData.typeGraph || "vertical";
+
+    graphTypeSelect.addEventListener("change", event => {
+      this.updateData({
+        typeGraph: parseTypeGraph((event.target as HTMLSelectElement).value)
+      });
+    });
+
+    graphTypeLabel.appendChild(graphTypeSelect);
+
+    return graphTypeLabel;
+  }
+}
+
+/**
+ * Class to add item to the BarsGraph item form
+ * This item consists of a label and a color type input.
+ * Element grid color is stored in the gridColor property
+ */
+class GridColorInputGroup extends InputGroup<Partial<BarsGraphProps>> {
+  protected createContent(): HTMLElement | HTMLElement[] {
+    const gridLabel = document.createElement("label");
+    gridLabel.textContent = t("Grid color");
+
+    const gridInput = document.createElement("input");
+    gridInput.type = "color";
+    gridInput.required = true;
+
+    gridInput.value = `${this.currentData.gridColor ||
+      this.initialData.gridColor ||
+      "#000000"}`;
+
+    gridInput.addEventListener("change", e => {
+      this.updateData({
+        gridColor: (e.target as HTMLInputElement).value
+      });
+    });
+
+    gridLabel.appendChild(gridInput);
+
+    return gridLabel;
+  }
+}
+
 /**
  * Build a valid typed object from a raw object.
  * This will allow us to ensure the type safety.
@@ -28,6 +184,9 @@ export function barsGraphPropsDecoder(data: AnyObject): BarsGraphProps | never {
     html: !stringIsEmpty(data.html)
       ? data.html
       : decodeBase64(data.encodedHtml),
+    backgroundColor: parseBarsGraphProps(data.backgroundColor),
+    typeGraph: parseTypeGraph(data.typeGraph),
+    gridColor: stringIsEmpty(data.gridColor) ? "#000000" : data.gridColor,
     ...modulePropsDecoder(data) // Object spread. It will merge the properties of the two objects.
   };
 }
@@ -62,4 +221,26 @@ export default class BarsGraph extends Item<BarsGraphProps> {
       }
     }
   }
+
+  /**
+   * @override function to add or remove inputsGroups those that are not necessary.
+   * Add to:
+   * BackgroundColorInputGroup
+   * GridColorInputGroup
+   * TypeGraphInputGroup
+   */
+  public getFormContainer(): FormContainer {
+    const formContainer = super.getFormContainer();
+    formContainer.addInputGroup(
+      new BackgroundColorInputGroup("backgroundColor-type", this.props)
+    );
+    formContainer.addInputGroup(
+      new TypeGraphInputGroup("type-graph", this.props)
+    );
+    formContainer.addInputGroup(
+      new GridColorInputGroup("grid-color", this.props)
+    );
+
+    return formContainer;
+  }
 }

visual_console_client/src/items/DonutGraph.ts

@@ -7,7 +7,8 @@ import {
   linkedVCPropsDecoder,
   modulePropsDecoder,
   decodeBase64,
-  stringIsEmpty
+  stringIsEmpty,
+  t
 } from "../lib";
 import Item, {
   ItemType,
@@ -15,11 +16,12 @@ import Item, {
   itemBasePropsDecoder,
   LinkConsoleInputGroup
 } from "../Item";
-import { FormContainer } from "../Form";
+import { FormContainer, InputGroup } from "../Form";
 
 export type DonutGraphProps = {
   type: ItemType.DONUT_GRAPH;
   html: string;
+  legendBackgroundColor: string;
 } & ItemProps &
   WithModuleProps &
   LinkedVisualConsoleProps;
@@ -46,11 +48,46 @@ export function donutGraphPropsDecoder(
     html: !stringIsEmpty(data.html)
       ? data.html
       : decodeBase64(data.encodedHtml),
+    legendBackgroundColor: stringIsEmpty(data.legendBackgroundColor)
+      ? "#000000"
+      : data.legendBackgroundColor,
     ...modulePropsDecoder(data), // Object spread. It will merge the properties of the two objects.
     ...linkedVCPropsDecoder(data) // Object spread. It will merge the properties of the two objects.
   };
 }
 
+/**
+ * Class to add item to the DonutsGraph item form
+ * This item consists of a label and a color type input.
+ * Element color is stored in the legendBackgroundColor property
+ */
+class LegendBackgroundColorInputGroup extends InputGroup<
+  Partial<DonutGraphProps>
+> {
+  protected createContent(): HTMLElement | HTMLElement[] {
+    const legendBackgroundLabel = document.createElement("label");
+    legendBackgroundLabel.textContent = t("Resume data color");
+
+    const legendBackgroundInput = document.createElement("input");
+    legendBackgroundInput.type = "color";
+    legendBackgroundInput.required = true;
+
+    legendBackgroundInput.value = `${this.currentData.legendBackgroundColor ||
+      this.initialData.legendBackgroundColor ||
+      "#000000"}`;
+
+    legendBackgroundInput.addEventListener("change", e => {
+      this.updateData({
+        legendBackgroundColor: (e.target as HTMLInputElement).value
+      });
+    });
+
+    legendBackgroundLabel.appendChild(legendBackgroundInput);
+
+    return legendBackgroundLabel;
+  }
+}
+
 export default class DonutGraph extends Item<DonutGraphProps> {
   protected createDomElement(): HTMLElement {
     const element = document.createElement("div");
@@ -92,6 +129,9 @@ export default class DonutGraph extends Item<DonutGraphProps> {
     formContainer.addInputGroup(
       new LinkConsoleInputGroup("link-console", this.props)
     );
+    formContainer.addInputGroup(
+      new LegendBackgroundColorInputGroup("legend-background-color", this.props)
+    );
     return formContainer;
   }
 }

visual_console_client/src/items/EventsHistory.ts

@@ -3,9 +3,11 @@ import {
   modulePropsDecoder,
   parseIntOr,
   decodeBase64,
-  stringIsEmpty
+  stringIsEmpty,
+  t
 } from "../lib";
 import Item, { ItemType, ItemProps, itemBasePropsDecoder } from "../Item";
+import { InputGroup, FormContainer } from "../Form";
 
 export type EventsHistoryProps = {
   type: ItemType.AUTO_SLA_GRAPH;
@@ -14,6 +16,53 @@ export type EventsHistoryProps = {
 } & ItemProps &
   WithModuleProps;
 
+/**
+ * Class to add item to the Event History item form
+ * This item consists of a label and select time.
+ * Show time is stored in the maxTime property.
+ */
+class MaxTimeInputGroup extends InputGroup<Partial<EventsHistoryProps>> {
+  protected createContent(): HTMLElement | HTMLElement[] {
+    const maxTimeLabel = document.createElement("label");
+    maxTimeLabel.textContent = t("Max. Time");
+
+    const options: {
+      value: string;
+      text: string;
+    }[] = [
+      { value: "86400", text: "24h" },
+      { value: "43200", text: "12h" },
+      { value: "28800", text: "8h" },
+      { value: "7200", text: "2h" },
+      { value: "3600", text: "1h" }
+    ];
+
+    const maxTimeSelect = document.createElement("select");
+    maxTimeSelect.required = true;
+
+    options.forEach(option => {
+      const optionElement = document.createElement("option");
+      optionElement.value = option.value;
+      optionElement.textContent = option.text;
+      maxTimeSelect.appendChild(optionElement);
+    });
+
+    maxTimeSelect.value = `${this.currentData.maxTime ||
+      this.initialData.maxTime ||
+      "86400"}`;
+
+    maxTimeSelect.addEventListener("change", event => {
+      this.updateData({
+        maxTime: parseIntOr((event.target as HTMLSelectElement).value, 0)
+      });
+    });
+
+    maxTimeLabel.appendChild(maxTimeSelect);
+
+    return maxTimeLabel;
+  }
+}
+
 /**
  * Build a valid typed object from a raw object.
  * This will allow us to ensure the type safety.
@@ -75,4 +124,16 @@ export default class EventsHistory extends Item<EventsHistoryProps> {
       }
     }
   }
+
+  /**
+   * @override function to add or remove inputsGroups those that are not necessary.
+   * Add to:
+   * MaxTimeInputGroup
+   */
+  public getFormContainer(): FormContainer {
+    const formContainer = super.getFormContainer();
+    formContainer.addInputGroup(new MaxTimeInputGroup("max-time", this.props));
+
+    return formContainer;
+  }
 }

visual_console_client/src/items/ModuleGraph.ts

@@ -7,7 +7,10 @@ import {
   linkedVCPropsDecoder,
   modulePropsDecoder,
   decodeBase64,
-  stringIsEmpty
+  stringIsEmpty,
+  t,
+  parseIntOr,
+  periodSelector
 } from "../lib";
 import Item, {
   ItemType,
@@ -15,15 +18,49 @@ import Item, {
   itemBasePropsDecoder,
   LinkConsoleInputGroup
 } from "../Item";
-import { FormContainer } from "../Form";
+import { FormContainer, InputGroup } from "../Form";
 
 export type ModuleGraphProps = {
   type: ItemType.MODULE_GRAPH;
   html: string;
+  backgroundType: "white" | "black" | "transparent";
+  graphType: "line" | "area";
+  period: number | null;
 } & ItemProps &
   WithModuleProps &
   LinkedVisualConsoleProps;
 
+/**
+ * Extract a valid enum value from a raw unknown value.
+ * @param backgroundType Raw value.
+ */
+const parseBackgroundType = (
+  backgroundType: unknown
+): ModuleGraphProps["backgroundType"] => {
+  switch (backgroundType) {
+    case "white":
+    case "black":
+    case "transparent":
+      return backgroundType;
+    default:
+      return "transparent";
+  }
+};
+
+/**
+ * Extract a valid enum value from a raw unknown value.
+ * @param graphType Raw value.
+ */
+const parseGraphType = (graphType: unknown): ModuleGraphProps["graphType"] => {
+  switch (graphType) {
+    case "line":
+    case "area":
+      return graphType;
+    default:
+      return "line";
+  }
+};
+
 /**
  * Build a valid typed object from a raw object.
  * This will allow us to ensure the type safety.
@@ -46,11 +83,137 @@ export function moduleGraphPropsDecoder(
     html: !stringIsEmpty(data.html)
       ? data.html
       : decodeBase64(data.encodedHtml),
+    backgroundType: parseBackgroundType(data.backgroundType),
+    period: parseIntOr(data.period, null),
+    graphType: parseGraphType(data.graphType),
     ...modulePropsDecoder(data), // Object spread. It will merge the properties of the two objects.
     ...linkedVCPropsDecoder(data) // Object spread. It will merge the properties of the two objects.
   };
 }
 
+/**
+ * Class to add item to the Module graph item form
+ * This item consists of a label and select background.
+ * Show background is stored in the backgroundType property.
+ */
+class BackgroundTypeInputGroup extends InputGroup<Partial<ModuleGraphProps>> {
+  protected createContent(): HTMLElement | HTMLElement[] {
+    const backgroundTypeLabel = document.createElement("label");
+    backgroundTypeLabel.textContent = t("Background color");
+
+    const options: {
+      value: ModuleGraphProps["backgroundType"];
+      text: string;
+    }[] = [
+      { value: "white", text: t("White") },
+      { value: "black", text: t("Black") },
+      { value: "transparent", text: t("Transparent") }
+    ];
+
+    const backgroundTypeSelect = document.createElement("select");
+    backgroundTypeSelect.required = true;
+
+    options.forEach(option => {
+      const optionElement = document.createElement("option");
+      optionElement.value = option.value;
+      optionElement.textContent = option.text;
+      backgroundTypeSelect.appendChild(optionElement);
+    });
+
+    backgroundTypeSelect.value =
+      this.currentData.backgroundType ||
+      this.initialData.backgroundType ||
+      "default";
+
+    backgroundTypeSelect.addEventListener("change", event => {
+      this.updateData({
+        backgroundType: parseBackgroundType(
+          (event.target as HTMLSelectElement).value
+        )
+      });
+    });
+
+    backgroundTypeLabel.appendChild(backgroundTypeSelect);
+
+    return backgroundTypeLabel;
+  }
+}
+
+/**
+ * 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.
+ */
+class GraphTypeInputGroup extends InputGroup<Partial<ModuleGraphProps>> {
+  protected createContent(): HTMLElement | HTMLElement[] {
+    const graphTypeLabel = document.createElement("label");
+    graphTypeLabel.textContent = t("Graph Type");
+
+    const options: {
+      value: ModuleGraphProps["graphType"];
+      text: string;
+    }[] = [
+      { value: "line", text: t("Line") },
+      { value: "area", text: t("Area") }
+    ];
+
+    const graphTypeSelect = document.createElement("select");
+    graphTypeSelect.required = true;
+
+    options.forEach(option => {
+      const optionElement = document.createElement("option");
+      optionElement.value = option.value;
+      optionElement.textContent = option.text;
+      graphTypeSelect.appendChild(optionElement);
+    });
+
+    graphTypeSelect.value =
+      this.currentData.graphType || this.initialData.graphType || "line";
+
+    graphTypeSelect.addEventListener("change", event => {
+      this.updateData({
+        graphType: parseGraphType((event.target as HTMLSelectElement).value)
+      });
+    });
+
+    graphTypeLabel.appendChild(graphTypeSelect);
+
+    return graphTypeLabel;
+  }
+}
+
+// TODO: Document
+class PeriodInputGroup extends InputGroup<Partial<ModuleGraphProps>> {
+  protected createContent(): HTMLElement | HTMLElement[] {
+    const periodLabel = document.createElement("label");
+    periodLabel.textContent = t("Period");
+
+    const periodControl = periodSelector(
+      this.currentData.period || this.initialData.period || 300,
+      null,
+      [
+        { text: t("5 minutes"), value: 300 },
+        { text: t("30 minutes"), value: 1800 },
+        { text: t("6 hours"), value: 21600 },
+        { text: t("1 day"), value: 86400 },
+        { text: t("1 week"), value: 604800 },
+        { text: t("15 days"), value: 1296000 },
+        { text: t("1 month"), value: 2592000 },
+        { text: t("3 months"), value: 7776000 },
+        { text: t("6 months"), value: 15552000 },
+        { text: t("1 year"), value: 31104000 },
+        { text: t("2 years"), value: 62208000 },
+        { text: t("3 years"), value: 93312000 }
+      ],
+      value => this.updateData({ period: value })
+    );
+
+    periodLabel.appendChild(periodControl);
+
+    return periodLabel;
+  }
+}
+
 export default class ModuleGraph extends Item<ModuleGraphProps> {
   protected createDomElement(): HTMLElement {
     const element = document.createElement("div");
@@ -112,9 +275,21 @@ export default class ModuleGraph extends Item<ModuleGraphProps> {
    * @override function to add or remove inputsGroups those that are not necessary.
    * Add to:
    * LinkConsoleInputGroup
+   * PeriodInputGroup
+   * GraphTypeInputGroup
+   * BackgroundTypeInputGroup
    */
   public getFormContainer(): FormContainer {
     const formContainer = super.getFormContainer();
+    formContainer.addInputGroup(
+      new BackgroundTypeInputGroup("background-type", this.props)
+    );
+    formContainer.addInputGroup(
+      new GraphTypeInputGroup("graph-type", this.props)
+    );
+    formContainer.addInputGroup(
+      new PeriodInputGroup("period-graph", this.props)
+    );
     formContainer.addInputGroup(
       new LinkConsoleInputGroup("link-console", this.props)
     );

visual_console_client/src/items/Percentile.ts

@@ -204,7 +204,7 @@ class MaxValueInputGroup extends InputGroup<Partial<PercentileProps>> {
 class TypePercentileInputGroup extends InputGroup<Partial<PercentileProps>> {
   protected createContent(): HTMLElement | HTMLElement[] {
     const typeLabel = document.createElement("label");
-    typeLabel.textContent = t("Max Value");
+    typeLabel.textContent = t("Type");
 
     const options: {
       value: PercentileProps["percentileType"];
@@ -225,11 +225,6 @@ class TypePercentileInputGroup extends InputGroup<Partial<PercentileProps>> {
     const typeSelect = document.createElement("select");
     typeSelect.required = true;
 
-    typeSelect.value =
-      this.currentData.percentileType ||
-      this.initialData.percentileType ||
-      "progress-bar";
-
     options.forEach(option => {
       const optionElement = document.createElement("option");
       optionElement.value = option.value;
@@ -237,6 +232,11 @@ class TypePercentileInputGroup extends InputGroup<Partial<PercentileProps>> {
       typeSelect.appendChild(optionElement);
     });
 
+    typeSelect.value =
+      this.currentData.percentileType ||
+      this.initialData.percentileType ||
+      "progress-bar";
+
     typeSelect.addEventListener("change", event => {
       this.updateData({
         percentileType: extractPercentileType(

visual_console_client/src/items/SimpleValue.ts

@@ -7,7 +7,9 @@ import {
   linkedVCPropsDecoder,
   parseIntOr,
   modulePropsDecoder,
-  replaceMacros
+  replaceMacros,
+  t,
+  periodSelector
 } from "../lib";
 import Item, {
   ItemType,
@@ -15,7 +17,7 @@ import Item, {
   itemBasePropsDecoder,
   LinkConsoleInputGroup
 } from "../Item";
-import { FormContainer } from "../Form";
+import { FormContainer, InputGroup } from "../Form";
 
 export type SimpleValueProps = {
   type: ItemType.SIMPLE_VALUE;
@@ -65,6 +67,139 @@ const parseProcessValue = (
   }
 };
 
+/**
+ * Class to add item to the Simple value item form
+ * This item consists of a label and select Process.
+ * Show process is stored in the processValue property.
+ */
+class ProcessInputGroup extends InputGroup<Partial<SimpleValueProps>> {
+  protected createContent(): HTMLElement | HTMLElement[] {
+    const processLabel = document.createElement("label");
+
+    const container = document.createElement("div");
+    processLabel.textContent = t("Process");
+
+    const options: {
+      value: SimpleValueProps["processValue"];
+      text: string;
+    }[] = [
+      { value: "none", text: t("None") },
+      { value: "avg", text: t("Avg Value") },
+      { value: "max", text: t("Max Value") },
+      { value: "min", text: t("Min Value") }
+    ];
+
+    const processSelect = document.createElement("select");
+    processSelect.required = true;
+
+    options.forEach(option => {
+      const optionElement = document.createElement("option");
+      optionElement.value = option.value;
+      optionElement.textContent = option.text;
+      processSelect.appendChild(optionElement);
+    });
+
+    const valueProcess =
+      this.currentData.processValue || this.initialData.processValue || "none";
+
+    switch (valueProcess) {
+      case "avg":
+      case "max":
+      case "min":
+        container.appendChild(this.getPeriodSelector());
+        break;
+      case "none":
+      default:
+        break;
+    }
+
+    processSelect.value = valueProcess;
+
+    processSelect.addEventListener("change", event => {
+      const value = (event.target as HTMLSelectElement).value;
+      container.childNodes.forEach(n => n.remove());
+
+      switch (value) {
+        case "avg":
+        case "max":
+        case "min":
+          container.appendChild(this.getPeriodSelector());
+          this.updateData({
+            processValue: value
+          });
+          break;
+        case "none":
+        default:
+          this.updateData({
+            processValue: "none"
+          });
+          break;
+      }
+    });
+
+    processLabel.appendChild(processSelect);
+    processLabel.appendChild(container);
+
+    return processLabel;
+  }
+
+  private getPeriodSelector = (): HTMLElement => {
+    const periodLabel = document.createElement("label");
+    periodLabel.textContent = t("Period");
+
+    let period = 300;
+    {
+      this.currentData as SimpleValueProps;
+      this.initialData as SimpleValueProps;
+
+      if (
+        (this.currentData.processValue === "avg" ||
+          this.currentData.processValue === "max" ||
+          this.currentData.processValue === "min") &&
+        this.currentData.period != null
+      ) {
+        period = this.currentData.period;
+      } else if (
+        (this.initialData.processValue === "avg" ||
+          this.initialData.processValue === "max" ||
+          this.initialData.processValue === "min") &&
+        this.initialData.period != null
+      ) {
+        period = this.initialData.period;
+      }
+    }
+
+    const periodControl = periodSelector(
+      period,
+      { text: t("None"), value: 0 },
+      [
+        { text: t("5 minutes"), value: 300 },
+        { text: t("30 minutes"), value: 1800 },
+        { text: t("1 hours"), value: 3600 },
+        { text: t("6 hours"), value: 21600 },
+        { text: t("12 hours"), value: 43200 },
+        { text: t("1 day"), value: 86400 },
+        { text: t("1 week"), value: 604800 },
+        { text: t("15 days"), value: 1296000 },
+        { text: t("1 month"), value: 2592000 },
+        { text: t("3 months"), value: 7776000 },
+        { text: t("6 months"), value: 15552000 },
+        { text: t("1 year"), value: 31104000 },
+        { text: t("2 years"), value: 62208000 },
+        { text: t("3 years"), value: 93312000 }
+      ],
+      value =>
+        this.updateData({
+          period: value
+        })
+    );
+
+    periodLabel.appendChild(periodControl);
+
+    return periodLabel;
+  };
+}
+
 /**
  * Build a valid typed object from a raw object.
  * This will allow us to ensure the type safety.
@@ -135,12 +270,16 @@ export default class SimpleValue extends Item<SimpleValueProps> {
    * @override function to add or remove inputsGroups those that are not necessary.
    * Add to:
    * LinkConsoleInputGroup
+   * ProcessInputGroup
    */
   public getFormContainer(): FormContainer {
     const formContainer = super.getFormContainer();
     formContainer.addInputGroup(
       new LinkConsoleInputGroup("link-console", this.props)
     );
+    formContainer.addInputGroup(
+      new ProcessInputGroup("process-operation", this.props)
+    );
     return formContainer;
   }
 }

visual_console_client/src/items/StaticGraph.ts

@@ -75,7 +75,7 @@ export function staticGraphPropsDecoder(
 
 /**
  * Class to add item to the static Graph item form
- * This item consists of a label and a color type select.
+ * This item consists of a label and a Show last value select.
  * Show Last Value is stored in the showLastValueTooltip property
  */
 class ShowLastValueInputGroup extends InputGroup<Partial<StaticGraphProps>> {
@@ -145,6 +145,7 @@ export default class StaticGraph extends Item<StaticGraphProps> {
   /**
    * @override function to add or remove inputsGroups those that are not necessary.
    * Add to:
+   * ImageInputGroup
    * ShowLastValueInputGroup
    * LinkConsoleInputGroup
    */
@@ -153,12 +154,13 @@ export default class StaticGraph extends Item<StaticGraphProps> {
     formContainer.addInputGroup(
       new ImageInputGroup("image-console", this.props)
     );
-    formContainer.addInputGroup(
-      new ShowLastValueInputGroup("show-last-value", this.props)
-    );
     formContainer.addInputGroup(
       new LinkConsoleInputGroup("link-console", this.props)
     );
+    formContainer.addInputGroup(
+      new ShowLastValueInputGroup("show-last-value", this.props)
+    );
+
     return formContainer;
   }
 }