| <!DOCTYPE HTML> |
| <html> |
| <body> |
| <section> |
| <h3>Managed Clusters</h3> |
| |
| <table id="cluster" class="display"> |
| <thead> |
| <th>Cluster Name</th><th>Nodes</th><th>Software</th><th>Configuration</th> |
| </thead> |
| <tbody> |
| </tbody> |
| </table> |
| <br> |
| </section> |
| |
| <h3>Deployment History</h3> |
| |
| <table id="history" class="display"> |
| <thead> |
| <th>Deployment ID</th><th>Operation</th> |
| </thead> |
| <tbody> |
| </tbody> |
| </table> |
| |
| <script type="text/javascript"> |
| function renderCluster(cluster) { |
| var buffer = []; |
| var i=0; |
| buffer[i++]='<a href="/?func=status-cluster&cluster='+cluster['clusterName']+'">'+cluster['clusterName']+'</a>'; |
| buffer[i++]='<a href="'+cluster['nodes']['url']+'">Nodes List</a>'; |
| buffer[i++]='<a href="'+cluster['software']['url']+'">Software Stack</a>'; |
| buffer[i++]='<a href="'+cluster['config']['url']+'">Configuration</a>'; |
| return buffer; |
| } |
| |
| function renderCommand(command) { |
| var buffer = []; |
| var i=0; |
| buffer[i++]='<a href="/?func=status-command&cmd='+command['id']+'">'+command['id']+'</a>'; |
| buffer[i++]=command['cmd']; |
| return buffer; |
| } |
| |
| $(document).ready(function() { |
| $('#cluster').dataTable({"bJQueryUI": true, "sPaginationType": "full_numbers"}); |
| $('#history').dataTable({"bJQueryUI": true, "sPaginationType": "full_numbers"}); |
| $.getJSON('/v1/cluster/list', |
| function(data) { |
| for(var cluster in data) { |
| $('#cluster').dataTable().fnAddData(renderCluster(data[cluster])); |
| } |
| } |
| ); |
| |
| $.getJSON('/v1/command/list', |
| function(data) { |
| for(var command in data) { |
| $('#history').dataTable().fnAddData(renderCommand(data[command])); |
| } |
| } |
| ); |
| $('#history').dataTable().fnSort( [ [0,'desc'] ] ); |
| }); |
| </script> |
| </body> |
| </html> |
