...
http://kb-test-adm-001.kb.dk:8078/
It looks ok, so why is further development so slow and such hard work?
...
- As before, created a new web-context for the GUI in the existing NAS tomcat - although any web-server will do
Enabling jQuery just means adding some scripts in your html body and some css in your html head
Code Block <head> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.css"> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> . . . </head> <body> . . . <script src="//code.jquery.com/jquery-1.11.2.min.js"></script> <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> <script src="site.js"></script> </body>
The html for the Status page now looks like this
Code Block <table id="status_table"> <thead></thead> <tbody></tbody> </table>
... literally, that's the whole thing, because all the action happens in the site.js:
Code Block $(document).ready(function() { $('#tabs').tabs({ load: function( event, ui ) { if(event.currentTarget != null && event.currentTarget.firstChild.textContent === "Status") { $('#status_table').DataTable( { ajax: { url: '../rest/rest/status/all', dataSrc: '' }, columns: [ { data: 'physicalLocation' }, { data: 'applicationName' }, { data: 'logMessage'} ] } ); } } });
What matters here is that we are leveraging the entire functionality of the jQuery-UI DataTable plugin to format the JSON we get from the REST service.
- And here's what it looks like http://kb-test-adm-001.kb.dk:8078/webgui/e
Note that even with absolutely minimal configuration and styling we get
...