Visual Console Refactor: bugfixes

Former-commit-id: fc04eb9c6e6df024859e2b13034188ddaf1528ed

pandora_console/include/rest-api/models/VisualConsole/Items/DonutGraph.php

@@ -153,10 +153,13 @@ final class DonutGraph extends Item
         if ($isString === true) {
             $graphData = \get_donut_module_data($moduleId);
 
+            $width = (int) $data['width'] > 0 ? (int) $data['width'] : 500;
+            $height = (int) $data['height'] > 0 ? (int) $data['height'] : 500;
+
             $data['html'] = \d3_donut_graph(
                 (int) $data['id'],
-                (int) $data['width'],
-                (int) $data['width'],
+                $width,
+                $height,
                 $graphData,
                 $legendBackGroundColor
             );

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

@@ -82,4 +82,4 @@
   animation: rotate-second 60s infinite linear;
 }
 
-/*# sourceMappingURL=vc.main.65e9c886.css.map*/
+/*# sourceMappingURL=vc.main.959e6e64.css.map*/

pandora_console/include/visual-console-client/vc.main.959e6e64.css.map

@@ -1 +1 @@
-{"version":3,"sources":["webpack:///main.css","webpack:///styles.css"],"names":[],"mappings":"AAAA;EACE,gBAAgB;EAChB,kBAAkB;EAClB,4BAA4B;EAC5B,wBAAwB;AAC1B;;AAEA;EACE,kBAAkB;EAClB,oBAAa;EAAb,oBAAa;EAAb,aAAa;EACb,2BAAuB;EAAvB,8BAAuB;MAAvB,2BAAuB;UAAvB,uBAAuB;EACvB,qBAAqB;EACrB,yBAAmB;MAAnB,sBAAmB;UAAnB,mBAAmB;AACrB;;ACbA;EACE,wBAAwB;EACxB,kCAA2B;AAC7B;;AAEA,kBAAkB;;AAElB;EACE,oBAAa;EAAb,oBAAa;EAAb,aAAa;EACb,4BAAsB;EAAtB,6BAAsB;MAAtB,0BAAsB;UAAtB,sBAAsB;EACtB,wBAAuB;MAAvB,qBAAuB;UAAvB,uBAAuB;EACvB,qBAAqB;EACrB,0BAAqB;MAArB,qBAAqB;EACrB,yBAAmB;MAAnB,sBAAmB;UAAnB,mBAAmB;AACrB;;AAEA;EACE,6DAA6D;EAC7D,eAAe;;EAEf,0BAA0B;EAC1B,mCAAmC;EACnC,kCAAkC;EAClC,kCAAkC;EAClC,wCAAwC;AAC1C;;AAEA;EACE,eAAe;AACjB;;AAEA;EACE,eAAe;AACjB;;AAEA,iBAAiB;;AAEjB;EACE,qDAA6C;UAA7C,6CAA6C;AAC/C;;AAEA;EACE,sDAA8C;UAA9C,8CAA8C;AAChD;;AAEA;EACE,oDAA4C;UAA5C,4CAA4C;AAC9C","file":"vc.main.65e9c886.css","sourcesContent":["#visual-console-container {\n  margin: 0px auto;\n  position: relative;\n  background-repeat: no-repeat;\n  background-size: contain;\n}\n\n.visual-console-item {\n  position: absolute;\n  display: flex;\n  flex-direction: initial;\n  justify-items: center;\n  align-items: center;\n}\n","@font-face {\n  font-family: Alarm Clock;\n  src: url(./alarm-clock.ttf);\n}\n\n/* Digital clock */\n\n.visual-console-item .digital-clock {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  justify-items: center;\n  align-content: center;\n  align-items: center;\n}\n\n.visual-console-item .digital-clock > span {\n  font-family: \"Alarm Clock\", \"Courier New\", Courier, monospace;\n  font-size: 50px;\n\n  /* To improve legibility */\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-rendering: optimizeLegibility;\n  text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;\n}\n\n.visual-console-item .digital-clock > span.date {\n  font-size: 25px;\n}\n\n.visual-console-item .digital-clock > span.timezone {\n  font-size: 25px;\n}\n\n/* Analog clock */\n\n.visual-console-item .analogic-clock .hour-hand {\n  animation: rotate-hour 43200s infinite linear;\n}\n\n.visual-console-item .analogic-clock .minute-hand {\n  animation: rotate-minute 3600s infinite linear;\n}\n\n.visual-console-item .analogic-clock .second-hand {\n  animation: rotate-second 60s infinite linear;\n}\n"],"sourceRoot":""}
+{"version":3,"sources":["webpack:///main.css","webpack:///styles.css"],"names":[],"mappings":"AAAA;EACE,gBAAgB;EAChB,kBAAkB;EAClB,4BAA4B;EAC5B,wBAAwB;AAC1B;;AAEA;EACE,kBAAkB;EAClB,oBAAa;EAAb,oBAAa;EAAb,aAAa;EACb,2BAAuB;EAAvB,8BAAuB;MAAvB,2BAAuB;UAAvB,uBAAuB;EACvB,qBAAqB;EACrB,yBAAmB;MAAnB,sBAAmB;UAAnB,mBAAmB;AACrB;;ACbA;EACE,wBAAwB;EACxB,kCAA2B;AAC7B;;AAEA,kBAAkB;;AAElB;EACE,oBAAa;EAAb,oBAAa;EAAb,aAAa;EACb,4BAAsB;EAAtB,6BAAsB;MAAtB,0BAAsB;UAAtB,sBAAsB;EACtB,wBAAuB;MAAvB,qBAAuB;UAAvB,uBAAuB;EACvB,qBAAqB;EACrB,0BAAqB;MAArB,qBAAqB;EACrB,yBAAmB;MAAnB,sBAAmB;UAAnB,mBAAmB;AACrB;;AAEA;EACE,6DAA6D;EAC7D,eAAe;;EAEf,0BAA0B;EAC1B,mCAAmC;EACnC,kCAAkC;EAClC,kCAAkC;EAClC,wCAAwC;AAC1C;;AAEA;EACE,eAAe;AACjB;;AAEA;EACE,eAAe;AACjB;;AAEA,iBAAiB;;AAEjB;EACE,qDAA6C;UAA7C,6CAA6C;AAC/C;;AAEA;EACE,sDAA8C;UAA9C,8CAA8C;AAChD;;AAEA;EACE,oDAA4C;UAA5C,4CAA4C;AAC9C","file":"vc.main.959e6e64.css","sourcesContent":["#visual-console-container {\n  margin: 0px auto;\n  position: relative;\n  background-repeat: no-repeat;\n  background-size: contain;\n}\n\n.visual-console-item {\n  position: absolute;\n  display: flex;\n  flex-direction: initial;\n  justify-items: center;\n  align-items: center;\n}\n","@font-face {\n  font-family: Alarm Clock;\n  src: url(./alarm-clock.ttf);\n}\n\n/* Digital clock */\n\n.visual-console-item .digital-clock {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  justify-items: center;\n  align-content: center;\n  align-items: center;\n}\n\n.visual-console-item .digital-clock > span {\n  font-family: \"Alarm Clock\", \"Courier New\", Courier, monospace;\n  font-size: 50px;\n\n  /* To improve legibility */\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-rendering: optimizeLegibility;\n  text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;\n}\n\n.visual-console-item .digital-clock > span.date {\n  font-size: 25px;\n}\n\n.visual-console-item .digital-clock > span.timezone {\n  font-size: 25px;\n}\n\n/* Analog clock */\n\n.visual-console-item .analogic-clock .hour-hand {\n  animation: rotate-hour 43200s infinite linear;\n}\n\n.visual-console-item .analogic-clock .minute-hand {\n  animation: rotate-minute 3600s infinite linear;\n}\n\n.visual-console-item .analogic-clock .second-hand {\n  animation: rotate-second 60s infinite linear;\n}\n"],"sourceRoot":""}

pandora_console/operation/visual_console/public_view.php

@@ -113,14 +113,16 @@ if (!users_can_manage_group_all('AR')) {
     $aclUserGroups = array_keys(users_get_groups(false, 'AR'));
 }
 
+ui_require_javascript_file('pandora_visual_console');
+include_javascript_d3();
+visual_map_load_client_resources();
+
 // Load Visual Console Items.
 $visualConsoleItems = VisualConsole::getItemsFromDB(
     $visualConsoleId,
     $aclUserGroups
 );
 
-ui_require_javascript_file('pandora_visual_console');
-visual_map_load_client_resources();
 ?>
 
 <style type="text/css">

pandora_console/operation/visual_console/view.php

@@ -207,14 +207,15 @@ if (!users_can_manage_group_all('AR')) {
     $aclUserGroups = array_keys(users_get_groups(false, 'AR'));
 }
 
+ui_require_javascript_file('pandora_visual_console');
+include_javascript_d3();
+visual_map_load_client_resources();
+
 // Load Visual Console Items.
 $visualConsoleItems = VisualConsole::getItemsFromDB(
     $visualConsoleId,
     $aclUserGroups
 );
-
-ui_require_javascript_file('pandora_visual_console');
-visual_map_load_client_resources();
 ?>
 
 <script type="text/javascript">

visual_console_client/src/Item.ts

@@ -203,6 +203,14 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
     return element;
   }
 
+  /**
+   * To update the content element.
+   * @return Item.
+   */
+  protected updateDomElement(element: HTMLElement): void {
+    element.innerHTML = this.createDomElement().innerHTML;
+  }
+
   /**
    * Public accessor of the `props` property.
    * @return Properties.
@@ -249,7 +257,7 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
    * @param prevProps If exists it will be used to only perform DOM updates instead of a full replace.
    */
   public render(prevProps: Props | null = null): void {
-    this.childElementRef.innerHTML = this.createDomElement().innerHTML;
+    this.updateDomElement(this.childElementRef);
 
     // Move box.
     if (!prevProps || this.positionChanged(prevProps, this.props)) {

visual_console_client/src/items/BarsGraph.ts

@@ -37,8 +37,31 @@ export function barsGraphPropsDecoder(
 export default class BarsGraph extends Item<BarsGraphProps> {
   protected createDomElement(): HTMLElement {
     const element = document.createElement("div");
+    element.className = "bars-graph";
     element.innerHTML = this.props.html;
 
+    // Hack to execute the JS after the HTML is added to the DOM.
+    const scripts = element.getElementsByTagName("script");
+    for (let i = 0; i < scripts.length; i++) {
+      setTimeout(() => {
+        if (scripts[i].src.length === 0) eval(scripts[i].innerHTML.trim());
+      }, 0);
+    }
+
     return element;
   }
+
+  protected updateDomElement(element: HTMLElement): void {
+    element.innerHTML = this.props.html;
+
+    // Hack to execute the JS after the HTML is added to the DOM.
+    const aux = document.createElement("div");
+    aux.innerHTML = this.props.html;
+    const scripts = aux.getElementsByTagName("script");
+    for (let i = 0; i < scripts.length; i++) {
+      if (scripts[i].src.length === 0) {
+        eval(scripts[i].innerHTML.trim());
+      }
+    }
+  }
 }

visual_console_client/src/items/DonutGraph.ts

@@ -46,10 +46,45 @@ export function donutGraphPropsDecoder(
 }
 
 export default class DonutGraph extends Item<DonutGraphProps> {
+  /**
+   * @override Item.resizeElement
+   * Resize the DOM content container.
+   * @param width
+   * @param height
+   */
+  protected resizeElement(width: number, height: number): void {
+    if (width <= 0) width = 200;
+    if (height <= 0) height = 200;
+    super.resizeElement(width, height);
+  }
+
   protected createDomElement(): HTMLElement {
     const element = document.createElement("div");
+    element.className = "donut-graph";
     element.innerHTML = this.props.html;
 
+    // Hack to execute the JS after the HTML is added to the DOM.
+    const scripts = element.getElementsByTagName("script");
+    for (let i = 0; i < scripts.length; i++) {
+      setTimeout(() => {
+        if (scripts[i].src.length === 0) eval(scripts[i].innerHTML.trim());
+      }, 0);
+    }
+
     return element;
   }
+
+  protected updateDomElement(element: HTMLElement): void {
+    element.innerHTML = this.props.html;
+
+    // Hack to execute the JS after the HTML is added to the DOM.
+    const aux = document.createElement("div");
+    aux.innerHTML = this.props.html;
+    const scripts = aux.getElementsByTagName("script");
+    for (let i = 0; i < scripts.length; i++) {
+      if (scripts[i].src.length === 0) {
+        eval(scripts[i].innerHTML.trim());
+      }
+    }
+  }
 }

visual_console_client/src/items/EventsHistory.ts

@@ -44,8 +44,35 @@ export function eventsHistoryPropsDecoder(
 export default class EventsHistory extends Item<EventsHistoryProps> {
   protected createDomElement(): HTMLElement {
     const element = document.createElement("div");
+    element.className = "events-history";
     element.innerHTML = this.props.html;
 
+    // Hack to execute the JS after the HTML is added to the DOM.
+    const scripts = element.getElementsByTagName("script");
+    for (let i = 0; i < scripts.length; i++) {
+      if (scripts[i].src.length === 0) {
+        setTimeout(() => {
+          try {
+            eval(scripts[i].innerHTML.trim());
+          } catch (ignored) {} // eslint-disable-line no-empty
+        }, 0);
+      }
+    }
+
     return element;
   }
+
+  protected updateDomElement(element: HTMLElement): void {
+    element.innerHTML = this.props.html;
+
+    // Hack to execute the JS after the HTML is added to the DOM.
+    const aux = document.createElement("div");
+    aux.innerHTML = this.props.html;
+    const scripts = aux.getElementsByTagName("script");
+    for (let i = 0; i < scripts.length; i++) {
+      if (scripts[i].src.length === 0) {
+        eval(scripts[i].innerHTML.trim());
+      }
+    }
+  }
 }

visual_console_client/src/items/ModuleGraph.ts

@@ -48,8 +48,59 @@ export function moduleGraphPropsDecoder(
 export default class ModuleGraph extends Item<ModuleGraphProps> {
   protected createDomElement(): HTMLElement {
     const element = document.createElement("div");
+    element.className = "module-graph";
     element.innerHTML = this.props.html;
 
+    // Remove the overview graph.
+    const legendP = element.getElementsByTagName("p");
+    for (let i = 0; i < legendP.length; i++) {
+      legendP[i].style.margin = "0px";
+    }
+
+    // Remove the overview graph.
+    const overviewGraphs = element.getElementsByClassName("overview_graph");
+    for (let i = 0; i < overviewGraphs.length; i++) {
+      overviewGraphs[i].remove();
+    }
+
+    // Hack to execute the JS after the HTML is added to the DOM.
+    const scripts = element.getElementsByTagName("script");
+    for (let i = 0; i < scripts.length; i++) {
+      if (scripts[i].src.length === 0) {
+        setTimeout(() => {
+          try {
+            eval(scripts[i].innerHTML.trim());
+          } catch (ignored) {} // eslint-disable-line no-empty
+        }, 0);
+      }
+    }
+
     return element;
   }
+
+  protected updateDomElement(element: HTMLElement): void {
+    element.innerHTML = this.props.html;
+
+    // Remove the overview graph.
+    const legendP = element.getElementsByTagName("p");
+    for (let i = 0; i < legendP.length; i++) {
+      legendP[i].style.margin = "0px";
+    }
+
+    // Remove the overview graph.
+    const overviewGraphs = element.getElementsByClassName("overview_graph");
+    for (let i = 0; i < overviewGraphs.length; i++) {
+      overviewGraphs[i].remove();
+    }
+
+    // Hack to execute the JS after the HTML is added to the DOM.
+    const aux = document.createElement("div");
+    aux.innerHTML = this.props.html;
+    const scripts = aux.getElementsByTagName("script");
+    for (let i = 0; i < scripts.length; i++) {
+      if (scripts[i].src.length === 0) {
+        eval(scripts[i].innerHTML.trim());
+      }
+    }
+  }
 }