continue VC

pandora_console/include/javascript/pandora_visual_console.js

@@ -1,5 +1,5 @@
 // TODO: Add Artica ST header.
-/* globals jQuery, VisualConsole, AsyncTaskManager */
+/* globals jQuery, VisualConsole, AsyncTaskManager, tinymce */
 
 /*
  * *********************
@@ -560,6 +560,12 @@ function createVisualConsole(
           // Send the update.
           var id = props.id;
           var data = e.data;
+
+          // Content tiny.
+          var content = tinymce.get("tinyMCE_editor").getContent();
+          // Pass the content.
+          data.label = content;
+
           var taskId = "visual-console-item-update-" + id;
 
           // Show updating state.
@@ -628,7 +634,56 @@ function createVisualConsole(
         });
 
         $formElement.dialog({
-          title: formContainer.title
+          title: formContainer.title,
+          modal: true,
+          resizable: true,
+          draggable: true,
+          height: 300,
+          width: 500,
+          open: function() {
+            tinymce.init({
+              selector: "#tinyMCE_editor",
+              theme: "advanced",
+              content_css: baseUrl + "include/styles/pandora.css",
+              theme_advanced_font_sizes:
+                "4pt=.visual_font_size_4pt, " +
+                "6pt=.visual_font_size_6pt, " +
+                "8pt=.visual_font_size_8pt, " +
+                "10pt=.visual_font_size_10pt, " +
+                "12pt=.visual_font_size_12pt, " +
+                "14pt=.visual_font_size_14pt, " +
+                "18pt=.visual_font_size_18pt, " +
+                "24pt=.visual_font_size_24pt, " +
+                "28pt=.visual_font_size_28pt, " +
+                "36pt=.visual_font_size_36pt, " +
+                "48pt=.visual_font_size_48pt, " +
+                "60pt=.visual_font_size_60pt, " +
+                "72pt=.visual_font_size_72pt, " +
+                "84pt=.visual_font_size_84pt, " +
+                "96pt=.visual_font_size_96pt, " +
+                "116pt=.visual_font_size_116pt, " +
+                "128pt=.visual_font_size_128pt, " +
+                "140pt=.visual_font_size_140pt, " +
+                "154pt=.visual_font_size_154pt, " +
+                "196pt=.visual_font_size_196pt",
+              theme_advanced_toolbar_location: "top",
+              theme_advanced_toolbar_align: "left",
+              theme_advanced_buttons1:
+                "bold,italic, |, justifyleft, justifycenter, justifyright, |, undo, redo, |, image, link, |, fontselect, forecolor, fontsizeselect, |,code",
+              theme_advanced_buttons2: "",
+              theme_advanced_buttons3: "",
+              theme_advanced_statusbar_location: "none",
+              width: "400",
+              height: "200"
+            });
+          },
+          beforeClose: function() {
+            //Remove tinyMCE.
+            tinymce.remove("#tinyMCE_editor");
+
+            //Danguerous empty form if necessary for cleaned IDs.
+            $formElement.empty();
+          }
         });
         // TODO: Add submit and reset button.
       }

pandora_console/include/rest-api/index.php

@@ -500,7 +500,6 @@ if ($getVisualConsole === true) {
     echo json_encode($result);
     return;
 } else if ($serviceListVisualConsole) {
-    // Services_get_services_no_ancestors_meta.
     if (!enterprise_installed()) {
         echo json_encode(false);
         return;

pandora_console/operation/visual_console/view.php

@@ -260,6 +260,7 @@ if (!users_can_manage_group_all('AR')) {
 }
 
 $ignored_params['refr'] = '';
+ui_require_javascript_file('tiny_mce', 'include/javascript/tiny_mce/');
 ui_require_javascript_file('pandora_visual_console');
 include_javascript_d3();
 visual_map_load_client_resources();

visual_console_client/src/Item.ts

@@ -249,6 +249,28 @@ class SizeInputGroup extends InputGroup<Partial<ItemProps>> {
   }
 }
 
+// TODO: Document
+class LabelInputGroup extends InputGroup<Partial<ItemProps>> {
+  protected createContent(): HTMLElement | HTMLElement[] {
+    const label = document.createElement("label");
+    label.textContent = t("Label");
+
+    //TODO: help.
+    label.appendChild(helpTip(t("add help")));
+
+    const labelInput = document.createElement("textarea");
+    labelInput.id = "tinyMCE_editor";
+
+    labelInput.value = `${this.currentData.label ||
+      this.initialData.label ||
+      ""}`;
+
+    label.appendChild(labelInput);
+
+    return label;
+  }
+}
+
 /**
  * Class to add item to the general items form
  * This item consists of a label and a Parent select.
@@ -2076,11 +2098,87 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
     return disposable;
   }
 
+  //TODO: Document
+  public titleItem(id: number): string {
+    let title = "";
+    switch (id) {
+      case ItemType.STATIC_GRAPH:
+        title = t("Static image");
+        break;
+      case ItemType.MODULE_GRAPH:
+        title = t("Module graph");
+        break;
+      case ItemType.SIMPLE_VALUE:
+        title = t("Simple value");
+        break;
+      case ItemType.PERCENTILE_BAR:
+        title = t("Percentile item");
+        break;
+      case ItemType.LABEL:
+        title = t("Label");
+        break;
+      case ItemType.ICON:
+        title = t("Icon");
+        break;
+      case ItemType.SIMPLE_VALUE_MAX:
+        title = t("Simple value");
+        break;
+      case ItemType.SIMPLE_VALUE_MIN:
+        title = t("Simple value");
+        break;
+      case ItemType.SIMPLE_VALUE_AVG:
+        title = t("Simple value");
+        break;
+      case ItemType.PERCENTILE_BUBBLE:
+        title = t("Percentile item");
+        break;
+      case ItemType.SERVICE:
+        title = t("Service");
+        break;
+      case ItemType.GROUP_ITEM:
+        title = t("Group");
+        break;
+      case ItemType.BOX_ITEM:
+        title = t("Box");
+        break;
+      case ItemType.LINE_ITEM:
+        title = t("Line");
+        break;
+      case ItemType.AUTO_SLA_GRAPH:
+        title = t("Auto SLA graph");
+        break;
+      case ItemType.CIRCULAR_PROGRESS_BAR:
+        title = t("Percentile item");
+        break;
+      case ItemType.CIRCULAR_INTERIOR_PROGRESS_BAR:
+        title = t("Percentile item");
+        break;
+      case ItemType.DONUT_GRAPH:
+        title = t("Serialized pie graph");
+        break;
+      case ItemType.BARS_GRAPH:
+        title = t("Bars graph");
+        break;
+      case ItemType.CLOCK:
+        title = t("Clock");
+        break;
+      case ItemType.COLOR_CLOUD:
+        title = t("Color cloud");
+        break;
+      default:
+        title = t("Item");
+        break;
+    }
+
+    return title;
+  }
+
   // TODO: Document
   public getFormContainer(): FormContainer {
     return new FormContainer(
-      t("Item"),
+      this.titleItem(this.props.type),
       [
+        new LabelInputGroup("label", this.props),
         new PositionInputGroup("position", this.props),
         new SizeInputGroup("size", this.props),
         new LinkInputGroup("link", this.props),
@@ -2090,6 +2188,7 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
         new CacheExpirationInputGroup("cache-expiration", this.props)
       ],
       [
+        "label",
         "position",
         "size",
         "link",
@@ -2108,6 +2207,7 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
     return new FormContainer(
       t("Item"),
       [
+        new LabelInputGroup("label", props),
         new PositionInputGroup("position", props),
         new SizeInputGroup("size", props),
         new LinkInputGroup("link", props),
@@ -2117,6 +2217,7 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
         new CacheExpirationInputGroup("cache-expiration", props)
       ],
       [
+        "label",
         "position",
         "size",
         "link",

visual_console_client/src/items/Service.ts

@@ -110,14 +110,8 @@ class ServiceListInputGroup extends InputGroup<Partial<ServiceProps>> {
         serviceListSelect.addEventListener("change", event => {
           if (typeof (event.target as HTMLSelectElement).value === "string") {
             const id = (event.target as HTMLSelectElement).value.split("|")[0];
-            /*
-            const metaconsoleId = (event.target as HTMLSelectElement).value.split(
-              "|"
-            )[1];
-            */
             this.updateData({
               serviceId: parseIntOr(id, 0)
-              //metaconsoleId: parseIntOr(metaconsoleId, 0)
             });
           } else {
             this.updateData({