Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

http://kb-test-adm-001.kb.dk:8078/

Image Added



It looks ok, so why is further development so slow and such hard work?

...

  1. As before, created a new web-context for the GUI in the existing NAS tomcat - although any web-server will do
  2. 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>


  3. 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.

  4. And here's what it looks like http://kb-test-adm-001.kb.dk:8078/webgui/Image ModifiedImage Modifiede




Note that even with absolutely minimal configuration and styling we get

...