| <!DOCTYPE HTML> |
| <html> |
| <body> |
| <section> |
| <h3>Node list <span id="id"></span></h3> |
| <form class="form"> |
| <table id="form" class="display"> |
| <thead> |
| <th width="200px">Role</th><th>Host(s)</th> |
| </thead> |
| <tbody></tbody> |
| </table> |
| <p> |
| <button type="button" id="save" onclick="return verifyNodesList()">Save</button> |
| <button type="submit" id="delete" onclick="return confirmDelete()" value="delete">Delete</button> |
| <button id="cancel" onclick="javascript:window.location='/';">Cancel</button> |
| </p> |
| </form> |
| </section> |
| <script type="text/javascript"> |
| var roles = [ "namenode", "secondary-namenode", "datanode", "jobtracker", "tasktracker", "gateway", "jobhistory-server" ]; |
| var labelError = "What is the node list name?"; |
| var hostError = "Role can not be empty."; |
| function addRole(type, hosts) { |
| var buffer = []; |
| var i = 0; |
| var role = "<input type='hidden' id='role."+type+".name' value='"+type+"'>"+type; |
| buffer[i++]=role; |
| var host = ""; |
| if(hosts.constructor.toString().indexOf("Array") == -1) { |
| host = "<textarea id='role."+type+".host' class='formInput textBox'>"+hosts+"</textarea>"; |
| } else { |
| host = "<textarea id='role."+type+".host' class='formInput textBox'>"+hosts.join("\n")+"</textarea>"; |
| } |
| buffer[i++]=host; |
| return buffer; |
| } |
| |
| function verifyNodesList() { |
| var invalid = false; |
| for(type in roles) { |
| var control = document.getElementById('role.'+roles[type]+'.host'); |
| if((control.value == "") || (control.value == hostError)) { |
| control.value = hostError; |
| control.select(); |
| control.focus(); |
| invalid = true; |
| } |
| } |
| if(!invalid) { |
| saveNodesList(); |
| } |
| return false; |
| } |
| |
| function saveNodesList() { |
| var data = []; |
| var i = 0; |
| var url = $.getUrlVar("list"); |
| data[i++] = '{"@url":"'+url+'", "roles":['; |
| var list = []; |
| var j = 0; |
| for(type in roles) { |
| var tmp = document.getElementById('role.'+roles[type]+'.host').value; |
| tmp = jQuery.trim(tmp); |
| var hosts = tmp.replace(new RegExp("\\n","g") ,'","'); |
| var role = '{"@name":"' + roles[type] + '","host":["' + hosts + '"]}'; |
| list[j++] = role; |
| } |
| data[i++] = list.join(','); |
| data[i++] = ']}'; |
| $.ajax({ |
| type: 'PUT', |
| url: '/v1/nodes/manifest', |
| contentType: "application/json; charset=utf-8", |
| data: data.join(""), |
| success: function(data) { |
| var url = '/?func=list-nodes'; |
| window.location.href = url; |
| }, |
| dataType:'json' |
| }); |
| } |
| |
| function deleteNodesList(url) { |
| $.ajax({ |
| type: 'DELETE', |
| url: url, |
| success: function(data) { |
| window.location.href = '/?func=list-nodes'; |
| }, |
| error: function(xhr, textStatus, errorThrown) { |
| alert(textStatus); |
| } |
| }); |
| } |
| |
| function confirmDelete() { |
| var question = "Delete node list "+$.getUrlVar('list')+"?"; |
| if(confirm(question)) { |
| deleteNodesList($.getUrlVar('list')); |
| return false; |
| } else { |
| return false; |
| } |
| } |
| |
| $(document).ready(function() { |
| var url = $.getUrlVar("list"); |
| $("id").text(url); |
| $("#navigation").load("/nav.html"); |
| $('#form').dataTable({ |
| "bJQueryUI": true, |
| "sPaginationType": "full_numbers", |
| "sDom": '<"H"if>rt<"F"p>' |
| }); |
| jQuery.getJSON(url, |
| function(data) { |
| var i = 0; |
| roles = []; |
| for(var list in data["roles"]) { |
| roles[i++] = data["roles"][list]["@name"] |
| $('#form').dataTable().fnAddData(addRole(data["roles"][list]["@name"], data["roles"][list]["host"])); |
| } |
| } |
| ); |
| }); |
| </script> |
| </body> |
| </html> |
