controller/src/main/webapps/manage-blueprint.html - incubator-ambari - Git at Google

 <!DOCTYPE HTML>
 <html>
   <script src="lib/codemirror.js"></script>
   <link rel="stylesheet" href="lib/codemirror.css">
   <script src="lib/mode/xml/xml.js"></script>
   <link rel="stylesheet" href="lib/theme/night.css">
   <style type="text/css">
     .CodeMirror {
       border: 1px solid #AAAAAA;
       border-radius: 5px 5px 5px 5px;
       height: 900px;
     }
     .CodeMirror-scroll {
       height: 900px;
     }
   </style>
   <body style="height:100%">
     <section>
       <h3>Manage Blue Print</h3>
       <form class="form">
         <p>
           Blue print name<br>
           <span id="name_display"></span><input type="hidden" id="name">
           <span id="name_message" class="warn"></span>
         </p>
         <p>
           Configuration steps<br>
           <textarea id="blueprint"/>
         </p>
         <p>
           <button type="submit" id="save" onclick="return verifySyntax()" value="save">Save</button>
           <button type="submit" id="Delete" value="Delete" onclick="return confirmDelete()">Delete</button>
           <button type="cancel" onclick="javasccript:window.location='/';">Cancel</button>
         </p>
       </form>
     </section>
     <script type="text/javascript">
       var myCodeMirror;

       function confirmDelete() {
         var question = "Delete blueprint "+$.getUrlVar('list')+"?";
         if(confirm(question)) {
           deleteBlueprint($.getUrlVar('list'));
           return false;
         } else {
           return false;
         }
       }


       function deleteBlueprint(url) {
         $.ajax({
           type: 'DELETE',
           url: url,
           success: function(data) {
             window.location.href = '/?func=list-blueprint';
           },
           error: function(xhr, textStatus, errorThrown) {
             alert(textStatus);
           }
         });
       }

       function verifySyntax() {
         var name = $('#name').val();
         var blueprint = $('#blueprint').val();
         var bailout = false;
         if(name=="") {
           $('#name_message').text("Name can not be empty.");
           bailout = true;
         }
         if(blueprint=="") {
           $('#blueprint_message').text("Blueprint can not be empty.");
           bailout = true;
         }
         if(bailout) {
           return false;
         }
         return saveBlueprint();
       }

       function formatXML(xml) {
         var formatted = '';
         var reg = /(>)(<)(\/*)/g;
         xml = xml.replace(reg, '$1\r\n$2$3');
         var pad = 0;
         jQuery.each(xml.split('\r\n'), function(index, node) {
           var indent = 0;
           if (node.match( /.+<\/\w[^>]*>$/ )) {
             indent = 0;
           } else if (node.match( /^<\/\w/ )) {
             if (pad != 0) {
               pad -= 1;
             }
           } else if (node.match( /^<\w[^>]*[^\/]>.*$/ )) {
             indent = 1;
           } else {
             indent = 0;
           }

           var padding = '';
           for (var i = 0; i < pad; i++) {
             padding += '  ';
           }

           formatted += padding + node + '\r\n';
           pad += indent;
         });
         return formatted;
       }

       function formatJSON(val) {
         var retval = '';
         var str = val;
         var pos = 0;
         var strLen = str.length;
         var indentStr = '    ';
         var newLine = '\n';
         var char = '';
         var isString = false;
         for (var i=0; i<strLen; i++) {
           char = str.substring(i,i+1);
           if (char == '"') {
             isString = !isString;
           }
           if(!isString) {
             if (char == '}' || char == ']') {
               retval = retval + newLine;
               pos = pos - 1;
               for (var j=0; j<pos; j++) {
                 retval = retval + indentStr;
               }
             }
           }
           retval = retval + char;
           if(!isString) {
             if (char == '{' || char == '[' || char == ',') {
               retval = retval + newLine;
               if (char == '{' || char == '[') {
                 pos = pos + 1;
               }
               for (var k=0; k<pos; k++) {
                 retval = retval + indentStr;
               }
             }
           }
         }
 	return retval;
       }

       function saveBlueprint() {
         var prefix = window.location.protocol+'//'+window.location.hostname+':'+window.location.port;
         var data = myCodeMirror.getValue();
         var name = $('#name').val();
         /*var blueprint = jQuery.parseJSON(data);
         blueprint['url'] = prefix+'/v1/config/blueprint/'+name;
         data = JSON.stringify(blueprint);*/
         $.ajax({
           type: 'PUT',
           url: '/v1/config/blueprint/'+name,
           contentType: "application/xml; charset=utf-8",
           data: data,
           success: function(data) {
             var url = '/?func=list-blueprint';
             window.location.href = url;
           },
           dataType:'json'
         });
         return false;
       }

       function basename(path) {
         return path.replace(/\\/g,'/').replace( /.*\//, '' );
       }

       $(document).ready(function() {
         var url = $.getUrlVar("list");
         var name = basename(url);
         $('#name_display').text(name);
         $('#name').val(name);
         /*$.getJSON(url,
           function(data) {
             $('#blueprint').val(formatJSON(JSON.stringify(data)));
           }
         );*/
         $.ajax({
           type: 'GET',
           url: url,
           success: function(data) {
             $('#blueprint').text(formatXML(data));
             myCodeMirror = CodeMirror.fromTextArea(document.getElementById("blueprint"), {
               lineNumbers: false,
               theme: "night"
             });
           },
           dataType:'text'
         });
       });
     </script>
   </body>
 </html>
	<!DOCTYPE HTML>
	<html>
	<script src="lib/codemirror.js"></script>
	<link rel="stylesheet" href="lib/codemirror.css">
	<script src="lib/mode/xml/xml.js"></script>
	<link rel="stylesheet" href="lib/theme/night.css">
	<style type="text/css">
	.CodeMirror {
	border: 1px solid #AAAAAA;
	border-radius: 5px 5px 5px 5px;
	height: 900px;
	}
	.CodeMirror-scroll {
	height: 900px;
	}
	</style>
	<body style="height:100%">
	<section>
	<h3>Manage Blue Print</h3>
	<form class="form">
	<p>
	Blue print name<br>
	<span id="name_display"></span><input type="hidden" id="name">
	<span id="name_message" class="warn"></span>
	</p>
	<p>
	Configuration steps<br>
	<textarea id="blueprint"/>
	</p>
	<p>
	<button type="submit" id="save" onclick="return verifySyntax()" value="save">Save</button>
	<button type="submit" id="Delete" value="Delete" onclick="return confirmDelete()">Delete</button>
	<button type="cancel" onclick="javasccript:window.location='/';">Cancel</button>
	</p>
	</form>
	</section>
	<script type="text/javascript">
	var myCodeMirror;

	function confirmDelete() {
	var question = "Delete blueprint "+$.getUrlVar('list')+"?";
	if(confirm(question)) {
	deleteBlueprint($.getUrlVar('list'));
	return false;
	} else {
	return false;
	}
	}


	function deleteBlueprint(url) {
	$.ajax({
	type: 'DELETE',
	url: url,
	success: function(data) {
	window.location.href = '/?func=list-blueprint';
	},
	error: function(xhr, textStatus, errorThrown) {
	alert(textStatus);
	}
	});
	}

	function verifySyntax() {
	var name = $('#name').val();
	var blueprint = $('#blueprint').val();
	var bailout = false;
	if(name=="") {
	$('#name_message').text("Name can not be empty.");
	bailout = true;
	}
	if(blueprint=="") {
	$('#blueprint_message').text("Blueprint can not be empty.");
	bailout = true;
	}
	if(bailout) {
	return false;
	}
	return saveBlueprint();
	}

	function formatXML(xml) {
	var formatted = '';
	var reg = /(>)(<)(\/*)/g;
	xml = xml.replace(reg, '$1\r\n$2$3');
	var pad = 0;
	jQuery.each(xml.split('\r\n'), function(index, node) {
	var indent = 0;
	if (node.match( /.+<\/\w[^>]*>$/ )) {
	indent = 0;
	} else if (node.match( /^<\/\w/ )) {
	if (pad != 0) {
	pad -= 1;
	}
	} else if (node.match( /^<\w[^>][^\/]>.$/ )) {
	indent = 1;
	} else {
	indent = 0;
	}

	var padding = '';
	for (var i = 0; i < pad; i++) {
	padding += ' ';
	}

	formatted += padding + node + '\r\n';
	pad += indent;
	});
	return formatted;
	}

	function formatJSON(val) {
	var retval = '';
	var str = val;
	var pos = 0;
	var strLen = str.length;
	var indentStr = ' ';
	var newLine = '\n';
	var char = '';
	var isString = false;
	for (var i=0; i<strLen; i++) {
	char = str.substring(i,i+1);
	if (char == '"') {
	isString = !isString;
	}
	if(!isString) {
	if (char == '}' \|\| char == ']') {
	retval = retval + newLine;
	pos = pos - 1;
	for (var j=0; j<pos; j++) {
	retval = retval + indentStr;
	}
	}
	}
	retval = retval + char;
	if(!isString) {
	if (char == '{' \|\| char == '[' \|\| char == ',') {
	retval = retval + newLine;
	if (char == '{' \|\| char == '[') {
	pos = pos + 1;
	}
	for (var k=0; k<pos; k++) {
	retval = retval + indentStr;
	}
	}
	}
	}
	return retval;
	}

	function saveBlueprint() {
	var prefix = window.location.protocol+'//'+window.location.hostname+':'+window.location.port;
	var data = myCodeMirror.getValue();
	var name = $('#name').val();
	/*var blueprint = jQuery.parseJSON(data);
	blueprint['url'] = prefix+'/v1/config/blueprint/'+name;
	data = JSON.stringify(blueprint);*/
	$.ajax({
	type: 'PUT',
	url: '/v1/config/blueprint/'+name,
	contentType: "application/xml; charset=utf-8",
	data: data,
	success: function(data) {
	var url = '/?func=list-blueprint';
	window.location.href = url;
	},
	dataType:'json'
	});
	return false;
	}

	function basename(path) {
	return path.replace(/\\/g,'/').replace( /.*\//, '' );
	}

	$(document).ready(function() {
	var url = $.getUrlVar("list");
	var name = basename(url);
	$('#name_display').text(name);
	$('#name').val(name);
	/*$.getJSON(url,
	function(data) {
	$('#blueprint').val(formatJSON(JSON.stringify(data)));
	}
	);*/
	$.ajax({
	type: 'GET',
	url: url,
	success: function(data) {
	$('#blueprint').text(formatXML(data));
	myCodeMirror = CodeMirror.fromTextArea(document.getElementById("blueprint"), {
	lineNumbers: false,
	theme: "night"
	});
	},
	dataType:'text'
	});
	});
	</script>
	</body>
	</html>