Merge branch 'ent-8677-app-android-consolas-visuales' into 'develop'

Ent 8677 app android consolas visuales

See merge request artica/pandorafms!4748

pandora_console/ajax.php

@@ -107,24 +107,33 @@ $auth_class = io_safe_output(
     get_parameter('auth_class', 'PandoraFMS\User')
 );
 
+$page = (string) get_parameter('page');
+$page = safe_url_extraclean($page);
+$page .= '.php';
 $public_hash = get_parameter('auth_hash', false);
 $public_login = false;
-// Check user.
-if (class_exists($auth_class) === false || $public_hash === false) {
-    check_login();
-} else {
-    if ($auth_class::validatePublicHash($public_hash) === false) {
-        db_pandora_audit(
-            AUDIT_LOG_USER_REGISTRATION,
-            'Trying to access public dashboard (Invalid public hash)'
-        );
-        include 'general/noaccess.php';
-        exit;
-    }
 
-    // OK. Simulated user log in. If you want to use your own auth_class
+
-    // remember to set $config['force_instant_logout'] to true to avoid
+if (false === ((bool) get_parameter('doLogin', false) === true
-    // persistent user login.
+    && $page === 'include/rest-api/index.php')
+) {
+    // Check user.
+    if (class_exists($auth_class) === false || $public_hash === false) {
+        check_login();
+    } else {
+        if ($auth_class::validatePublicHash($public_hash) === false) {
+            db_pandora_audit(
+                AUDIT_LOG_USER_REGISTRATION,
+                'Trying to access public dashboard (Invalid public hash)'
+            );
+            include 'general/noaccess.php';
+            exit;
+        }
+
+        // OK. Simulated user log in. If you want to use your own auth_class
+        // remember to set $config['force_instant_logout'] to true to avoid
+        // persistent user login.
+    }
 }
 
 ob_start();
@@ -136,9 +145,6 @@ if (file_exists(ENTERPRISE_DIR.'/load_enterprise.php') === true) {
 
 $config['remote_addr'] = $_SERVER['REMOTE_ADDR'];
 
-$page = (string) get_parameter('page');
-$page = safe_url_extraclean($page);
-$page .= '.php';
 $config['id_user'] = $_SESSION['id_usuario'];
 $isFunctionSkins = enterprise_include_once('include/functions_skins.php');
 if ($isFunctionSkins !== ENTERPRISE_NOT_HOOK) {

pandora_console/include/lib/User.php

@@ -95,6 +95,7 @@ class User implements PublicLogin
                 );
                 if ($user_in_db !== false) {
                     $config['id_usuario'] = $user_in_db;
+                    $config['id_user'] = $user_in_db;
 
                     // Originally at api.php.
                     if (session_status() === PHP_SESSION_NONE) {
@@ -116,6 +117,25 @@ class User implements PublicLogin
     }
 
 
+    /**
+     * Process login
+     *
+     * @param array|null $data Data.
+     *
+     * @return boolean
+     */
+    public static function login(?array $data)
+    {
+        $user = new self($data);
+
+        if ($user === null) {
+            return false;
+        }
+
+        return true;
+    }
+
+
     /**
      * Generates a hash to authenticate in public views.
      *

pandora_console/include/rest-api/index.php

@@ -16,6 +16,7 @@ enterprise_include('include/functions_metaconsole.php');
 use Models\VisualConsole\Container as VisualConsole;
 use Models\VisualConsole\View as Viewer;
 use Models\VisualConsole\Item as Item;
+use PandoraFMS\User;
 
 $method = get_parameter('method');
 if ($method) {
@@ -35,6 +36,7 @@ if ($method) {
 $visualConsoleId = (int) get_parameter('visualConsoleId');
 $getVisualConsole = (bool) get_parameter('getVisualConsole');
 $getVisualConsoleItems = (bool) get_parameter('getVisualConsoleItems');
+$doLogin = (bool) get_parameter('doLogin');
 $updateVisualConsoleItem = (bool) get_parameter('updateVisualConsoleItem');
 $createVisualConsoleItem = (bool) get_parameter('createVisualConsoleItem');
 $getVisualConsoleItem = (bool) get_parameter('getVisualConsoleItem');
@@ -53,6 +55,31 @@ $loadtabs = (bool) get_parameter('loadtabs');
 
 ob_clean();
 
+if ($doLogin === true) {
+    $id_user = get_parameter('id_user', '');
+    $password = get_parameter('password', '');
+
+    if (User::login(
+        [
+            'id_usuario' => $id_user,
+            'password'   => $password,
+        ]
+    ) === true
+    ) {
+        echo json_encode(['auth_hash' => User::generatePublicHash()]);
+    } else {
+        db_pandora_audit(
+            AUDIT_LOG_ACL_VIOLATION,
+            'Trying to login using invalid credentials'
+        );
+        http_response_code(403);
+        return;
+    }
+
+    return;
+}
+
+
 if ($visualConsoleId) {
     // Retrieve the visual console.
     $visualConsole = VisualConsole::fromDB(['id' => $visualConsoleId], $ratio);

pandora_console/include/rest-api/readme.md

@@ -0,0 +1,154 @@
+# Documentación de la api.
+
+path = `http://localhost/pandora_console/ajax.php`
+
+# Los metodos son:
+
+- ## Pedir token:
+
+- **data:**
+
+```json
+{
+  "page": include / rest - api / index,
+  "doLogin": 1,
+  "id_user": xxxxxx,
+  "password": xxxxx
+}
+```
+
+- **ejemplo resultado:**
+
+```
+ce015de2941dac933621d23d3f32ac5ead8254b7ea3f390494cfcf586d38de27
+```
+
+- **ejemplo peticion:**
+
+```
+curl "http://localhost/pandora_console/ajax.php?page=include/rest-api/index&doLogin=1&id_user=admin&password=pandora"
+```
+
+- ## Traer todos los elementos de una CV.
+
+- **data:**
+
+```javascript
+{
+	page: include/rest-api/index,
+	id_user: XXX,
+	getVisualConsoleItems: 1
+	visualConsoleId: XX,
+	size: [
+		widht => XXX,
+		height => YYY
+	],
+	widthScreen: xxx
+}
+```
+
+- **ejemplo resultado:**
+
+```javascript
+[
+	{
+		"aclGroupId":0,
+		"agentDisabled":false,
+		"cacheExpiration":0,
+		"colorStatus":"#B2B2B2",
+		"height":132,
+		"id":180,
+		"image":"worldmap",
+		"imageSrc":"http:\/\/localhost\/pandora_console\/images\/console\/icons\/worldmap.png",
+		"isLinkEnabled":true,
+		"isOnTop":false,"label":"",
+		"labelPosition":"down",
+		"link":"http:\/\/localhost\/pandora_console\/index.php?sec=network&sec2=operation%2Fvisual_console%2Fview&id=3&pure=0",
+		"linkedLayoutId":3,
+		"linkedLayoutNodeId":0,"linkedLayoutStatusType":"default","moduleDisabled":false,
+		"parentId":0,
+		"type":5,
+		"width":200,
+		"x":1675,
+		"y":184
+	},
+	{
+		"aclGroupId":0,
+		"agentDisabled":false,
+		"cacheExpiration":0,
+		"colorStatus":"#B2B2B2","height":132,"id":181,"image":"europemap","imageSrc":"http:\/\/localhost\/pandora_console\/images\/console\/icons\/europemap.png",
+		"isLinkEnabled":true,
+		"isOnTop":false,
+		"label":"",
+		"labelPosition":"down",
+		"link":"http:\/\/localhost\/pandora_console\/index.php?sec=network&sec2=operation%2Fvisual_console%2Fview&id=4&pure=0",
+		"linkedLayoutId":4,
+		"linkedLayoutNodeId":0,"linkedLayoutStatusType":"default","moduleDisabled":false,
+		"parentId":0,
+		"type":5,
+		"width":200,
+		"x":1673,
+		"y":340
+	}
+	...
+]
+```
+
+- **ejemplo peticion:**
+
+```
+curl "http://localhost/pandora_console/ajax.php?page=include/rest-api/index&getVisualConsoleItems=1&auth_hash=ce015de2941dac933621d23d3f32ac5ead8254b7ea3f390494cfcf586d38de27&visualConsoleId=7&id_user=admin"
+```
+
+- ## Traer los datos del propio item.
+
+- **data:**
+
+```javascript
+{
+page: include/rest-api/index,
+,
+getVisualConsoleItem: 1,
+visualConsoleId: XX,
+visualConsoleItemId: XX
+}
+```
+
+- **ejemplo resultado:**
+
+```javascript
+{
+	"aclGroupId":0,
+	"agentDisabled":false,
+	"cacheExpiration":0,
+	"clockFormat":"time",
+	"clockTimezone":"Europe\/Madrid",
+	"clockTimezoneOffset":3600,
+	"clockType":"digital",
+	"color":"#FFFFFF",
+	"colorStatus":"#B2B2B2",
+	"height":50,
+	"id":212,
+	"isLinkEnabled":true,
+	"isOnTop":false,
+	"label":"",
+	"labelPosition":"down",
+	"link":null,
+	"linkedLayoutId":0,
+	"linkedLayoutNodeId":0,
+	"linkedLayoutStatusType":"default",
+	"moduleDisabled":false,
+	"parentId":0,
+	"showClockTimezone":true,
+	"type":19,
+	"width":100,
+	"x":848
+	"y":941
+}
+```
+
+- **ejemplo peticion:**
+
+```
+curl "http://localhost/pandora_console/ajax.php?page=include/rest-api/index&getVisualConsoleItem=1&auth_hash=ce015de2941dac933621d23d3f32ac5ead8254b7ea3f390494cfcf586d38de27&visualConsoleId=7&visualConsoleItemId=212&id_user=admin"
+```

visual_console_client/playground/index.html

@@ -10,6 +10,11 @@
   <style>
     body {
       margin: 0;
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+      height: 100vh;
     }
   </style>
   <body>
@@ -31,6 +36,29 @@
         isFavorite: false
       };
 
+      var size = {
+        width: screen.width,
+        height: screen.height
+      };
+
+      var ratio_visualconsole = props.height / props.width;
+      var ratio_t = size.width / props.width;
+      var radio_h = size.height / props.height;
+
+      props.width = size.width;
+      props.height = size.width * ratio_visualconsole;
+
+      if (props.height > size.height) {
+        ratio_t = radio_h;
+
+        props.height = size.height;
+        props.width = size.height / ratio_visualconsole;
+      }
+
+      //ratio_t = 1;
+      //props.height = 400;
+      //props.width = 1000;
+
       var staticGraphRawProps = {
         // Generic props.
         id: 1,
@@ -41,11 +69,11 @@
         parentId: null,
         aclGroupId: null,
         // Position props.
-        x: 100,
+        x: 100 * ratio_t,
-        y: 50,
+        y: 50 * ratio_t,
         // Size props.
-        width: 70,
+        width: 70 * ratio_t,
-        height: 70,
+        height: 70 * ratio_t,
         // Agent props.
         agentId: null,
         agentName: null,
@@ -55,7 +83,8 @@
         // Custom props.
         imageSrc:
           "http://localhost/pandora_console/images/console/icons/bridge_ok.png",
-        showLastValueTooltip: "default"
+        showLastValueTooltip: "default",
+        receivedAt: 1646846155
       };
 
       var colorCloudRawProps = {
@@ -70,11 +99,11 @@
         aclGroupId: null,
         link: "https://google.es",
         // Position props.
-        x: 300,
+        x: 300 * ratio_t,
-        y: 50,
+        y: 50 * ratio_t,
         // Size props.
-        width: 150,
+        width: 150 * ratio_t,
-        height: 150,
+        height: 150 * ratio_t,
         // Agent props.
         agentId: null,
         agentName: null,
@@ -82,7 +111,8 @@
         moduleId: null,
         moduleName: null,
         // Custom props.
-        color: "rgb(100, 50, 245)"
+        color: "rgb(100, 50, 245)",
+        receivedAt: 1646846155
       };
 
       var digitalClockRawProps = {
@@ -95,18 +125,19 @@
         parentId: null,
         aclGroupId: null,
         // Position props.
-        x: 60,
+        x: 60 * ratio_t,
-        y: 150,
+        y: 150 * ratio_t,
         // Size props.
-        width: 300,
+        width: 300 * ratio_t,
-        height: 150,
+        height: 150 * ratio_t,
         // Custom props.
         clockType: "digital",
         clockFormat: "datetime",
         clockTimezone: "Madrid",
         clockTimezoneOffset: 60,
         showClockTimezone: true,
-        color: "white"
+        color: "white",
+        receivedAt: 1646846155
       };
 
       var digitalClockRawProps2 = {
@@ -119,18 +150,19 @@
         parentId: null,
         aclGroupId: null,
         // Position props.
-        x: 10,
+        x: 10 * ratio_t,
-        y: 250,
+        y: 250 * ratio_t,
         // Size props.
-        width: 100,
+        width: 100 * ratio_t,
-        height: 50,
+        height: 50 * ratio_t,
         // Custom props.
         clockType: "digital",
         clockFormat: "datetime",
         clockTimezone: "Madrid",
         clockTimezoneOffset: 60,
         showClockTimezone: true,
-        color: "#82B92E"
+        color: "#82B92E",
+        receivedAt: 1646846155
       };
 
       var analogicClockRawProps = {
@@ -144,17 +176,18 @@
         parentId: null,
         aclGroupId: null,
         // Position props.
-        x: 500,
+        x: 500 * ratio_t,
-        y: 50,
+        y: 50 * ratio_t,
         // Size props.
-        width: 200,
+        width: 200 * ratio_t,
-        height: 200,
+        height: 200 * ratio_t,
         // Custom props.
         clockType: "analogic",
         clockFormat: "datetime",
         clockTimezone: "Copenhagen",
         clockTimezoneOffset: 60,
-        showClockTimezone: true
+        showClockTimezone: true,
+        receivedAt: 1646846155
       };
 
       var boxRawProps = {
@@ -162,15 +195,16 @@
         id: 6,
         type: 12, // Box = 12
         // Position props.
-        x: 720,
+        x: 720 * ratio_t,
-        y: 20,
+        y: 20 * ratio_t,
         // Size props.
-        width: 50,
+        width: 50 * ratio_t,
-        height: 50,
+        height: 50 * ratio_t,
         // Custom props.
         borderWidth: 10,
         borderColor: "white",
-        fillColor: "black"
+        fillColor: "black",
+        receivedAt: 1646846155
       };
 
       var lineRawProps = {
@@ -178,18 +212,19 @@
         id: 7,
         type: 13, // Line = 13
         // Position props.
-        x: 720,
+        x: 720 * ratio_t,
-        y: 20,
+        y: 20 * ratio_t,
         // Size props.
-        width: 50,
+        width: 50 * ratio_t,
-        height: 50,
+        height: 50 * ratio_t,
         // Custom props.
         startX: 200,
         startY: 100,
         endX: 350,
         endY: 30,
         lineWidth: 2,
-        color: "white"
+        color: "white",
+        receivedAt: 1646846155
       };
 
       var labelRawProps = {
@@ -202,11 +237,12 @@
         parentId: null,
         aclGroupId: null,
         // Position props.
-        x: 410,
+        x: 410 * ratio_t,
-        y: 0,
+        y: 0 * ratio_t,
         // Size props.
-        width: 200,
+        width: 200 * ratio_t,
-        height: 200
+        height: 200 * ratio_t,
+        receivedAt: 1646846155
       };
 
       var simpleValueRawProps = {
@@ -219,15 +255,16 @@
         parentId: null,
         aclGroupId: null,
         // Position props.
-        x: 10,
+        x: 10 * ratio_t,
-        y: 10,
+        y: 10 * ratio_t,
         // Size props.
-        width: 50,
+        width: 50 * ratio_t,
-        height: 50,
+        height: 50 * ratio_t,
         // Custom props.
         valueType: "string",
         value: "10",
-        processValue: "none"
+        processValue: "none",
+        receivedAt: 1646846155
       };
 
       var percentileRawProps = {
@@ -240,11 +277,11 @@
         parentId: null,
         aclGroupId: null,
         // Position props.
-        x: 790,
+        x: 790 * ratio_t,
-        y: 10,
+        y: 10 * ratio_t,
         // Size props.
-        width: 200,
+        width: 200 * ratio_t,
-        height: 40,
+        height: 40 * ratio_t,
         // Custom props.
         percentileType: "progress-bar",
         valueType: "percent",
@@ -253,7 +290,8 @@
         color: null,
         labelColor: "#82B92E",
         value: 245,
-        unit: "seconds"
+        unit: "seconds",
+        receivedAt: 1646846155
       };
 
       var percentileBubbleRawProps = {
@@ -266,11 +304,11 @@
         parentId: 1,
         aclGroupId: null,
         // Position props.
-        x: 830,
+        x: 830 * ratio_t,
-        y: 60,
+        y: 60 * ratio_t,
         // Size props.
-        width: 100,
+        width: 100 * ratio_t,
-        height: 100,
+        height: 100 * ratio_t,
         // Custom props.
         percentileType: "bubble",
         valueType: "value",
@@ -279,7 +317,8 @@
         color: null,
         labelColor: "#82B92E",
         value: 245,
-        unit: "seconds"
+        unit: "seconds",
+        receivedAt: 1646846155
       };
 
       var percentileDonutRawProps = {
@@ -292,11 +331,11 @@
         parentId: 1,
         aclGroupId: null,
         // Position props.
-        x: 830,
+        x: 830 * ratio_t,
-        y: 170,
+        y: 170 * ratio_t,
         // Size props.
-        width: 100,
+        width: 100 * ratio_t,
-        height: 100,
+        height: 100 * ratio_t,
         // Custom props.
         percentileType: "circular-progress-bar",
         valueType: "value",
@@ -305,7 +344,8 @@
         color: null,
         labelColor: "#82B92E",
         value: 245,
-        unit: "seconds"
+        unit: "seconds",
+        receivedAt: 1646846155
       };
 
       var percentileDonutAltRawProps = {
@@ -318,11 +358,11 @@
         parentId: 1,
         aclGroupId: null,
         // Position props.
-        x: 830,
+        x: 830 * ratio_t,
-        y: 280,
+        y: 280 * ratio_t,
         // Size props.
-        width: 100,
+        width: 100 * ratio_t,
-        height: 100,
+        height: 100 * ratio_t,
         // Custom props.
         percentileType: "circular-progress-bar-alt",
         valueType: "value",
@@ -331,7 +371,8 @@
         color: null,
         labelColor: "#82B92E",
         value: 245,
-        unit: "seconds"
+        unit: "seconds",
+        receivedAt: 1646846155
       };
 
       var items = [
@@ -354,6 +395,295 @@
         var visualConsole = new VisualConsole(container, props, items);
         console.log(visualConsole);
 
+        //visualConsole.enableEditMode();
+
+        // VC Item clicked.
+        visualConsole.onItemClick(function(e) {
+          var data = e.item.props || {};
+          var meta = e.item.meta || {};
+
+          if (meta.editMode) {
+            // Item selection.
+            if (meta.isSelected) {
+              visualConsole.unSelectItem(data.id);
+            } else {
+              // Unselect the rest of the elements if the
+              var isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0;
+              visualConsole.selectItem(
+                data.id,
+                isMac ? !e.nativeEvent.metaKey : !e.nativeEvent.ctrlKey
+              );
+            }
+          } else if (
+            !meta.editMode &&
+            data.linkedLayoutId != null &&
+            data.linkedLayoutId > 0 &&
+            data.link != null &&
+            data.link.length > 0 &&
+            (data.linkedLayoutAgentId == null ||
+              data.linkedLayoutAgentId === 0) &&
+            data.linkedLayoutNodeId === 0 &&
+            e.nativeEvent.metaKey === false
+          ) {
+            // Override the link to another VC if it isn't on remote console.
+            // Stop the current link behavior.
+            e.nativeEvent.preventDefault();
+            // Fetch and update the old VC with the new.
+            updateVisualConsole(data.linkedLayoutId, updateInterval);
+          }
+        });
+        // VC Item double clicked.
+        visualConsole.onItemDblClick(function(e) {
+          e.nativeEvent.preventDefault();
+          e.nativeEvent.stopPropagation();
+
+          var item = e.item || {};
+          var meta = item.meta || {};
+
+          if (meta.editMode && !meta.isUpdating) {
+            createOrUpdateVisualConsoleItem(
+              visualConsole,
+              asyncTaskManager,
+              baseUrl,
+              item
+            );
+          } else if (meta.lineMode && item.props.type == 21) {
+            load_modal({
+              url: baseUrl + "/ajax.php",
+              modal: {
+                title: "NetworkLink information",
+                ok: "Ok"
+              },
+              extradata: [
+                {
+                  name: "from",
+                  value: item.props.linkedStart
+                },
+                {
+                  name: "to",
+                  value: item.props.linkedEnd
+                }
+              ],
+              onshow: {
+                page: "include/rest-api/index",
+                method: "networkLinkPopup"
+              }
+            });
+            // confirmDialog({
+            //   title: "todo",
+            //   message:
+            //     "<pre>" +
+            //     item.props.labelStart +
+            //     "</pre><br><pre>" +
+            //     item.props.labelEnd +
+            //     "</pre>"
+            // });
+          }
+        });
+        // VC Item moved.
+        visualConsole.onItemMoved(function(e) {
+          var id = e.item.props.id;
+          var data = {
+            x: e.newPosition.x,
+            y: e.newPosition.y,
+            type: e.item.props.type
+          };
+          if (e.item.props.type === 13 || e.item.props.type === 21) {
+            var startIsLeft =
+              e.item.props.startPosition.x - e.item.props.endPosition.x <= 0;
+            var startIsTop =
+              e.item.props.startPosition.y - e.item.props.endPosition.y <= 0;
+
+            data = {
+              startX: startIsLeft
+                ? e.newPosition.x
+                : e.item.props.width + e.newPosition.x,
+              startY: startIsTop
+                ? e.newPosition.y
+                : e.item.props.height + e.newPosition.y,
+              endX: startIsLeft
+                ? e.item.props.width + e.newPosition.x
+                : e.newPosition.x,
+              endY: startIsTop
+                ? e.item.props.height + e.newPosition.y
+                : e.newPosition.y,
+              type: e.item.props.type
+            };
+          }
+
+          if (e.item.props.processValue != undefined) {
+            data.processValue = e.item.props.processValue;
+          }
+
+          if (e.item.props.percentileType != undefined) {
+            data.percentileType = e.item.props.percentileType;
+          }
+
+          var taskId = "visual-console-item-update-" + id;
+
+          // Persist the new position.
+          asyncTaskManager
+            .add(taskId, function(done) {
+              var abortable = updateVisualConsoleItem(
+                baseUrl,
+                visualConsole.props.id,
+                id,
+                data,
+                function(error, data) {
+                  // if (!error && !data) return;
+                  if (error || !data) {
+                    console.log(
+                      "[ERROR]",
+                      "[VISUAL-CONSOLE-CLIENT]",
+                      "[API]",
+                      error ? error.message : "Invalid response"
+                    );
+
+                    // Move the element to its initial position.
+                    e.item.move(e.prevPosition.x, e.prevPosition.y);
+                  }
+
+                  done();
+                }
+              );
+
+              return {
+                cancel: function() {
+                  abortable.abort();
+                }
+              };
+            })
+            .init();
+        });
+        // VC Line Item moved.
+        visualConsole.onLineMoved(function(e) {
+          var id = e.item.props.id;
+          var data = {
+            startX: e.startPosition.x,
+            startY: e.startPosition.y,
+            endX: e.endPosition.x,
+            endY: e.endPosition.y
+          };
+
+          var taskId = "visual-console-item-update-" + id;
+
+          // Persist the new position.
+          asyncTaskManager
+            .add(taskId, function(done) {
+              var abortable = updateVisualConsoleItem(
+                baseUrl,
+                visualConsole.props.id,
+                id,
+                data,
+                function(error, data) {
+                  if (!error && !data) return;
+
+                  try {
+                    var decoded_data = JSON.parse(data);
+                    visualConsole.updateElement(decoded_data);
+                  } catch (error) {
+                    console.error(error);
+                  }
+                  done();
+                }
+              );
+
+              return {
+                cancel: function() {
+                  abortable.abort();
+                }
+              };
+            })
+            .init();
+        });
+
+        // VC Item resized.
+        visualConsole.onItemResized(function(e) {
+          var item = e.item;
+          var id = item.props.id;
+          var data = {
+            width: e.newSize.width,
+            height: e.newSize.height,
+            type: item.props.type
+          };
+
+          // Trick, to allow the percentile item to reuse the height field to save the max value,
+          // it is very ugly, change some year.
+          if (item.props.type === 3) {
+            data = {
+              width: e.newSize.width,
+              type: item.props.type
+            };
+          }
+
+          if (item.props.processValue != undefined) {
+            data.processValue = item.props.processValue;
+          }
+
+          if (item.props.percentileType != undefined) {
+            data.percentileType = item.props.percentileType;
+          }
+
+          var taskId = "visual-console-item-update-" + id;
+          // Persist the new size.
+          asyncTaskManager
+            .add(taskId, function(done) {
+              var abortable = updateVisualConsoleItem(
+                baseUrl,
+                visualConsole.props.id,
+                id,
+                data,
+                function(error, data) {
+                  if (error || !data) {
+                    console.log(
+                      "[ERROR]",
+                      "[VISUAL-CONSOLE-CLIENT]",
+                      "[API]",
+                      error ? error.message : "Invalid response"
+                    );
+
+                    // Resize the element to its initial Size.
+                    item.resize(e.prevSize.width, e.prevSize.height);
+                    item.setMeta({ isUpdating: false });
+                    done();
+                    return; // Stop task execution.
+                  }
+
+                  if (typeof data === "string") {
+                    try {
+                      data = JSON.parse(data);
+                    } catch (error) {
+                      console.log(
+                        "[ERROR]",
+                        "[VISUAL-CONSOLE-CLIENT]",
+                        "[API]",
+                        error ? error.message : "Invalid response"
+                      );
+
+                      // Resize the element to its initial Size.
+                      item.resize(e.prevSize.width, e.prevSize.height);
+                      item.setMeta({ isUpdating: false });
+                      done();
+                      return; // Stop task execution.
+                    }
+                  }
+
+                  visualConsole.updateElement(data);
+                  item.setMeta({ isUpdating: false });
+
+                  done();
+                }
+              );
+
+              return {
+                cancel: function() {
+                  abortable.abort();
+                }
+              };
+            })
+            .init();
+        });
+
         visualConsole.onClick(function(e) {
           console.log("[CLICK]", e);
         });