fix non-prettified extra vars on the Hosts Edit UI

this seems to be a duplicate of #3333, only in a different
location.

Resolves #4700

awx/ui/client/src/dashboard/hosts/dashboard-hosts-edit.controller.js

@@ -34,7 +34,7 @@
  			$scope.host = host.data;
  			$scope.name = host.data.name;
  			$scope.description = host.data.description;
- 			$scope.variables = host.data.variables === '' ? '---' : host.data.variables;
+			$scope.variables = getVars(host.data.variables);
         	ParseTypeChange({
         		scope: $scope,
         		field_id: 'host_variables',
@@ -42,5 +42,35 @@
         	});
  		};
 
+		// Adding this function b/c sometimes extra vars are returned to the
+		// UI as a string (ex: "foo: bar"), and other times as a
+		// json-object-string (ex: "{"foo": "bar"}"). CodeMirror wouldn't know
+		// how to prettify the latter. The latter occurs when host vars were
+		// system generated and not user-input (such as adding a cloud host);
+		function getVars(str){
+
+			// Quick function to test if the host vars are a json-object-string,
+			// by testing if they can be converted to a JSON object w/o error. 
+			function IsJsonString(str) {
+				try {
+					JSON.parse(str);
+				} catch (e) {
+					return false;
+				}
+				return true;
+			}
+
+			if(str === ''){
+				return '---';
+			}
+			else if(IsJsonString(str)){
+				str = JSON.parse(str);
+				return jsyaml.safeDump(str);
+			}
+			else if(!IsJsonString(str)){
+				return str;
+			}
+		}
+
  		init();
  	}];