deploy_stack.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta charset="utf-8" />
		<title>Workspaces - BocaBaton</title>

		<meta name="description" content="Workspaces" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

		<!-- bootstrap & fontawesome -->
		<link rel="stylesheet" href="assets/css/bootstrap.min.css" />
		<link rel="stylesheet" href="assets/font-awesome/4.2.0/css/font-awesome.min.css" />

		<!-- page specific plugin styles -->

		<!-- text fonts -->

		<!-- ace styles -->
		<link rel="stylesheet" href="assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />

		<!--[if lte IE 9]>
			<link rel="stylesheet" href="assets/css/ace-part2.min.css" class="ace-main-stylesheet" />
		<![endif]-->

		<!--[if lte IE 9]>
		  <link rel="stylesheet" href="assets/css/ace-ie.min.css" />
		<![endif]-->

		<!-- inline styles related to this page -->
        <link rel="stylesheet" href="assets/css/bootstrap-tagsinput.css" />
        <!-- BPMN-JS styles -->
        <link rel="stylesheet" href="assets/js/bpmn-js/assets/diagram-js.css" />
        <link rel="stylesheet" href="assets/js/bpmn-js/assets/bpmn-font/css/bpmn-embedded.css" />

		<!-- ace settings handler -->
		<script src="assets/js/ace-extra.min.js"></script>

		<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->

		<!--[if lte IE 8]>
		<script src="assets/js/html5shiv.min.js"></script>
		<script src="assets/js/respond.min.js"></script>
		<![endif]-->

<style>
.highlight:not(.djs-connection) .djs-visual > :nth-child(1) {
  fill: green !important; /* color elements as green */
}
</style>

	</head>

	<body class="no-skin">
    Overriding Environment:
	<input type="text" id="jeju-env" value="key1=value1,key2=value2" data-role="tagsinput" />	
    <hr>
    <div id="bpmn_container">
    <div id="bpmn"></div>
    </div>

<hr>
<div align="center">
<button id="launch-btn" class="btn btn-primary">
<i class="ace-icon fa fa-fighter-jet align-top bigger-125"></i>
Launch</button>
</div>

		<!-- basic scripts -->

		<!--[if !IE]> -->
		<script src="assets/js/jquery.2.1.1.min.js"></script>

		<!-- <![endif]-->

		<!--[if IE]>
<script src="assets/js/jquery.1.11.1.min.js"></script>
<![endif]-->

		<!--[if !IE]> -->
		<script type="text/javascript">
			window.jQuery || document.write("<script src='assets/js/jquery.min.js'>"+"<"+"/script>");
		</script>

		<!-- <![endif]-->

		<!--[if IE]>
<script type="text/javascript">
 window.jQuery || document.write("<script src='assets/js/jquery1x.min.js'>"+"<"+"/script>");
</script>
<![endif]-->
		<script type="text/javascript">
			if('ontouchstart' in document.documentElement) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
		</script>
		<script src="assets/js/bootstrap.min.js"></script>

		<!-- page specific plugin scripts -->
		<script src="assets/js/jquery-ui.min.js"></script>
		<script src="assets/js/url.min.js"></script>
		<script src="assets/js/bootstrap-tagsinput.js"><./script>

		<!-- ace scripts -->
		<script src="assets/js/ace-elements.min.js"></script>
		<script src="assets/js/ace.min.js"></script>

        <!-- BPMN-JS scripts -->
        <script src="assets/js/bpmn-js/bpmn-viewer.js"></script>
        
		<!-- inline scripts related to this page -->
		<script type="text/javascript">
            var api_server = "";
            var token = "";
			jQuery(function($) {
				//initiate dataTables plugin
                // about login
                if (localStorage.getItem('token') !== null) {
                    token = localStorage.getItem('token');
                    console.log(token);
                }
                else {
                    window.location = "login.html"
                }
                api_server = localStorage.getItem('api_server');
                var user_id = localStorage.getItem('user_id');
                $('#logout').click(function() {
                    localStorage.removeItem('token');
                    window.location = "login.html?target=iaas.html";
                });
                if(token) {}
                else {window.location = "login.html?target=iaas.html"}
                console.log(token);
                console.log(api_server); 
                var user_name = $.ajax({
                    type: "GET",
                    headers: {'X-Auth-Token':token},
                    url: api_server.concat("/users/").concat(user_id),
                    contentType: "application/json",
                    success: function(resultData) {
                        console.log(resultData);
                        $('#user-name').text(resultData.user_id);
                    },
                });
                // end of login
           });
        jQuery(document).ready(function () {
    var contentType ="application/x-www-form-urlencoded; charset=utf-8";
 
    if(window.XDomainRequest)
        contentType = "text/plain";


    //$('#stackDeploy').modal('modal-body').css({'height': '600px'})
    // TODO: clean before create
    $("#bpmn_container div").remove();
    $('<div id="bpmn"></div>').appendTo('#bpmn_container');
    // BPMN

    package_id= url('?package_id');
    var stack_id;

    console.log(package_id);
    
    var BpmnViewer = window.BpmnJS;
    var viewer = new BpmnViewer({ container: $('#bpmn'), height: 500 });

    function openFromUrl(bpmn_url) {
    $.ajax({
        url: bpmn_url,
        type: 'GET',
        success: function(xml) {
            // BPMN
                viewer.importXML(xml, function(err) {
                    if (err) {
                        console.error(err);
                    } else {
                        viewer.get('canvas').zoom('fit-viewport');
                    }
                })
        }
    });
    }

   
    var bpmn_url;
    $.ajax({
        type: "GET",
        async: false,
        headers: {'X-Auth-Token':token},
        url: api_server.concat("/catalog/packages/").concat(package_id),
        contentType: "application/json",
        success: function(resultData) {
            bpmn_url = resultData.template;
            console.log(bpmn_url);
            openFromUrl(bpmn_url);
        },
    });
 
   

// Stack environment
var tag_input = $('#form-field-tags');
try{
    tag_input.tag(
      {
        placeholder:tag_input.attr('placeholder'),
        //enable typeahead by specifying the source array
        source: ace.vars['US_STATES'],//defined in ace.js >> ace.enable_search_ahead
        /**
        //or fetch data from database, fetch those that match "query"
        source: function(query, process) {
          $.ajax({url: 'remote_source.php?q='+encodeURIComponent(query)})
          .done(function(result_items){
            process(result_items);
          });
        }
        */
      }
    )

    //programmatically add a new
    var $tag_obj = $('#form-field-tags').data('tag');
    $tag_obj.add('key1=value1');
}
catch(e) {
    //display a textarea for old IE, because it doesn't support this plugin or another one I tried!
    tag_input.after('<textarea id="'+tag_input.attr('id')+'" name="'+tag_input.attr('name')+'" rows="3">'+tag_input.val()+'</textarea>').remove();
    //$('#form-field-tags').autosize({append: "\n"});
}


// Launch Stack
$( "#launch-btn" ).click(function() {
    var env = $("#jeju-env").tagsinput("items");
    console.log(env);
    var env2 = {}
    for (var i in env) {
        var res = env[i].split("=");
        env2[res[0]] = res[1];
    }
    env2['TOKEN'] = token;
    $.ajax({
        type: "POST",
        headers: {'X-Auth-Token':token},
        url: api_server.concat("/catalog/stacks"),
        data: JSON.stringify({package_id: package_id, env: {jeju: env2}}),
        contentType: "application/json",
        success: function(resultData) {
            console.log(resultData);
            stack_id = resultData.stack_id;
            setInterval(checkState, 10000);
        },
    });

});


function markNodeColor(workflow_state) {
    $.ajax({
        url: bpmn_url,
        type: 'GET',
        dataType: 'xml',
        success: function(data) {
            // Parse XML
            var xml_node = $('bpmn\\:process, process', data);
            console.log(data);
            console.log(xml_node);
            var nodes = xml_node.find('bpmn\\:serviceTask, serviceTask');
            console.log(nodes);
            for (var key in workflow_state) {
                console.log(key);
                var state = workflow_state[key];
                console.log(state);
                if (state == 'running') {
                    // mark running color
                    console.log(nodes.length);
                    for (i = 0; i < nodes.length; i++) {
                        console.log(nodes[i].attributes[1])
                        console.log(key)
                        if (nodes[i].attributes[1].nodeValue == key) {
                            console.log("draw");
                            viewer.get('canvas').addMarker(nodes[i].id, 'highlight');
                        }
                    }
                }
            }
        }
    });
}


// State loop
function checkState() {
    $.ajax({
        type: "POST",
        headers: {'X-Auth-Token':token},
        url: api_server.concat('/catalog/stacks/').concat(stack_id).concat('/env'),
        data: JSON.stringify({'get':'workflow_state'}),
        contentType: 'application/json',
        success: function(resultData) {
            console.log(resultData);
            markNodeColor(resultData);
        }
    });
}

        });
  	</script>
    
	</body>
</html>