MACF-7: Add generic action so that custom flows can be seen and edited

app.js

@@ -1153,8 +1153,9 @@ define(function(require) {
 					action = self.actions[actionName] || {};
 
 				this.id = -1;
-				this.actionName = actionName;
-				this.module = action.module;
+				//set actionName to json_editor[] and module to their current module for non supported actions
+				this.actionName = _.isEmpty(action) ? 'json_editor[]' : actionName;
+				this.module = action.module ? action.module : actionName.replace(/\[(.*?)\]/g, '');
 				this.key = '_';
 				this.parent = null;
 				this.children = [];

i18n/en-US.json

@@ -1229,6 +1229,20 @@
 				"label": "Custom data (optional)",
 				"help": "These properties will be added to the event and will overwrite existing values"
 			}
+		},
+		"jsonEditor": {
+			"title": "Json Editor",
+			"popupTitle": "Add/Edit json action",
+			"name": "Name",
+			"placeholder": {
+				"name": "Action Name"
+			},
+			"editor": {
+				"label": "Json data",
+				"errorMessages": {
+					"jsonEditor": "Invalid Content"
+				}
+			}
 		}
 	},
 	"oldCallflows": {

submodules/misc/misc.js

@@ -20,6 +20,10 @@ define(function(require) {
 						post: 'POST',
 						put: 'PUT'
 					}
+				},
+				jsonEditor: {
+					unsupportedCallflowsList: {},
+					callflowsListSchema: {}
 				}
 			}
 		},
@@ -1271,6 +1275,48 @@ define(function(require) {
 					edit: function(node, callback) {
 						self.miscRenderEditWebhook(node, callback);
 					}
+				},
+				'json_editor[]': {
+					name: self.i18n.active().callflows.jsonEditor.title,
+					icon: 'pencil',	//graph2
+					category: self.i18n.active().oldCallflows.advanced_cat,
+					module: 'jsonEditor',
+					tip: self.i18n.active().callflows.jsonEditor.tip,
+					data: {},
+					rules: [],
+					isUsable: 'true',
+					weight: 170,
+					caption: function(node) {
+						return node.module !== 'jsonEditor' ? node.module : '';
+					},
+					edit: function(node, callback) {
+						if (_.isEmpty(self.appFlags.misc.jsonEditor.unsupportedCallflowsList)) {
+							self.miscSchemasList(function(data) {
+								var supportedModules = _
+										.chain(monster.apps.callflows.actions)
+										.map('module')
+										.uniq()
+										.filter(_.isString)
+										.value(),
+									getCallflowModules = _
+										.chain(data)
+										.filter(function(module) {
+											return module.startsWith('callflows.');
+										})
+										.map(function(module) {
+											return module.replace('callflows.', '');
+										})
+										.value();
+									unsupportedModules = _.difference(getCallflowModules, supportedModules);
+
+								self.appFlags.misc.jsonEditor.unsupportedCallflowsList = unsupportedModules;
+								self.miscRenderEditJson(node, callback);
+							});
+						} else {
+							self.miscRenderEditJson(node, callback);
+						}
+					}
+
 				}
 			});
 		},
@@ -1552,6 +1598,143 @@ define(function(require) {
 			});
 		},
 
+		miscRenderEditJson: function(node, callback) {
+			var self = this,
+				popup,
+				initTemplate = function() {
+					var $template = $(self.getTemplate({
+							name: 'json_editor',
+							data: {
+								name: node.caption ? node.caption : '',
+								unsupportedCallflowsList: self.appFlags.misc.jsonEditor.unsupportedCallflowsList
+							},
+							submodule: 'misc'
+						})),
+						$target = $template.find('#jsoneditor'),
+						options = {
+							mode: 'code',
+							modes: ['code', 'text'],
+							onValidate: function(json) {
+								var errors = [];
+
+								if (_.isEmpty(json)) {
+									errors.push({
+										path: ['empty'],
+										message: 'Required json properties are missing.'
+									});
+								}
+
+								return errors;
+							},
+							onValidationError: function (errors) {
+								if (_.isEmpty(errors)) {
+									$template
+										.find('#save')
+											.removeClass('disabled');
+								} else {
+									//disable save button when there are errors
+									$template
+										.find('#save')
+											.addClass('disabled');
+								}
+							}
+						},
+						jsoneditor = monster.ui.jsoneditor($target, options, node.data.data);
+
+					jsoneditor.set(node.data.data, {});
+					self.miscSetSchema($template, jsoneditor, callback);
+
+					$template.find('#save').on('click', function(e) {
+						e.preventDefault();
+
+						//do nothing when button is disabled
+						if ($(this).hasClass('disabled')) {
+							return;
+						}
+
+						var selectedOption = $template.find('#name').val();
+							content = jsoneditor.get();
+
+						node.caption = selectedOption;
+						node.module = selectedOption;
+
+						_.each(content, function(value, key) {
+							node.setMetadata(key, value);
+						});
+
+						popup.dialog('close');
+					});
+
+					$template.find('#name').on('change', function(e) {
+						e.preventDefault();
+
+						self.miscSetSchema($template, jsoneditor, callback);
+
+					});
+
+					return $template;
+				};
+
+			popup = monster.ui.dialog(initTemplate(), {
+				title: self.i18n.active().callflows.jsonEditor.popupTitle,
+				width: 500,
+				beforeClose: function() {
+					if (_.isFunction(callback)) {
+						callback();
+					}
+				}
+			});
+		},
+
+		miscSetSchema: function(template, jsoneditor, callback) {
+			var self = this,
+				$template = template,
+				selectedOption = $template.find('#name').val(),
+				callflowSchema = self.appFlags.misc.jsonEditor.callflowsListSchema[selectedOption];
+
+			if (callflowSchema) {
+				jsoneditor.setSchema(callflowSchema);
+			} else {
+				//disable save button and select options until schema is set for validation
+				$template
+					.find('#save')
+						.addClass('disabled');
+
+				$template
+					.find('#name')
+						.prop('disabled', true);
+
+				//get schema from API if it's not stored locally and set it in jsoneditor
+				self.miscGetSchema({
+					data: {
+						schemaId: 'callflows.' + selectedOption
+					},
+					success: function(data) {
+						//validate if schema has references to othe subschemas
+						var refList = self.miscValidateSubSchema(data)
+
+						/*if refList is true, fetch subschemas and set them in jsoneditor,
+						otherwise set schema directly*/
+						refList ? self.miscGetSubSchema(refList,data,jsoneditor) : jsoneditor.setSchema(data);
+
+						//set schema in local storage
+						self.appFlags.misc.jsonEditor.callflowsListSchema[selectedOption] = data;
+
+						//enable save button and select options after schema is set
+						$template
+							.find('#save')
+								.removeClass('disabled');
+
+						$template
+							.find('#name')
+								.prop('disabled', false);
+
+						callback(null, data);
+					}
+				});
+			}
+		},
+
 		/* API helpers */
 		miscDeviceList: function(callback) {
 			var self = this;
@@ -1619,7 +1802,76 @@ define(function(require) {
 					callback && callback(data.data);
 				}
 			});
-		}
+		},
+
+		miscSchemasList: function(callback) {
+			var self = this;
+
+			self.callApi({
+				resource: 'schemas.list',
+				success: function(data, status) {
+					callback && callback(data.data);
+				}
+			});
+		},
+
+		miscGetSchema: function(args) {
+			var self = this,
+				data = args.data;
+
+			self.callApi({
+				resource: 'schemas.get',
+				data: {
+					schemaId: data.schemaId
+				},
+				success: function(data, status) {
+					args.hasOwnProperty('success') && args.success(data.data);
+				},
+				error: function(parsedError) {
+					args.hasOwnProperty('error') && args.error(parsedError);
+				}
+			});
+		},
+
+		/*@param reflist: array of the references to other schemas
+		*@param parentSchema: schema with references to other schemas
+		*@param jsoneditor: function to set schema in jsoneditor whith its references
+		fetch all subschemas of partenSchema so they can be set on the jsoneditor*/
+		miscGetSubSchema: function(refList,parentSchema,jsoneditor) {
+			var self = this;
+
+			monster.series(refList.map(ref =>
+			  function(callback) {
+				  self.miscGetSchema({
+						data: {
+						  schemaId: ref
+						},
+						success: function(data) {
+						  /*passing array with id,data pair to return on result callback*/   
+						  callback(null,[data.id,data]);
+						}
+				  })
+			  },
+			),	function(err,results) {
+					/*convert results array of arrays to object
+					and setting it on the jsoneditor alongside its
+					parent schema*/
+					jsoneditor.setSchema(parentSchema,Object.fromEntries(results));
+				})
+	  	},
+
+	  	/*@param schema: a json schema to  verify if it has references
+	  	validates according to the path where references can be found
+	  	if no references foun return false*/
+	  	miscValidateSubSchema: function(schema) {
+			if(_.has(schema,  "properties.config.$ref")) {
+			  return [schema.properties.config["$ref]"]]
+			} else  if(_.has(schema,  "properties.macros.items.oneOf")) {
+			  return  schema.properties.macros.items.oneOf.map(item => item["$ref"]);
+			} else {
+			  return false
+			}
+	  	}
 	};
 
 	return app;

submodules/misc/views/json_editor.html

@@ -0,0 +1,26 @@
+<div class="dialog_popup callflows-port">
+	<form id="form_json_editor" method="post" action="#">
+		<div class="form_content">
+			<div class="popup_field">
+				<label for="name" class="control-label">
+					{{i18n.callflows.jsonEditor.name}}
+				</label>
+				<select id="name" name="name">
+					{{#select name}}
+						{{#each unsupportedCallflowsList}}
+							<option value="{{ this }}">{{ this }}</option>
+						{{/each}}
+					{{/select}}
+				</select>
+				<div class="form_content">
+					<div class="popup_field">
+						<div id="jsoneditor" style="width: 400px; height: 400px;"></div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</form>
+	<div class="buttons-center">
+		<button id="save" class="monster-button monster-button-primary">{{ i18n.save }}</button>
+	</div>
+</div>