FELIX-790 - Improve event list and start column sorting.
git-svn-id: https://svn.apache.org/repos/asf/felix/trunk@708015 13f79535-47bb-0310-9956-ffa450edef68
diff --git a/webconsole/src/main/resources/res/ui/events.js b/webconsole/src/main/resources/res/ui/events.js
index ebc9968..c948b94 100644
--- a/webconsole/src/main/resources/res/ui/events.js
+++ b/webconsole/src/main/resources/res/ui/events.js
@@ -17,73 +17,61 @@
function header( /* int */ columns )
{
- document.write( "<table class='content' cellpadding='0' cellspacing='0' width='100%'>" );
+ document.write( "<div class='fullwidth tablelayout'>");
+ renderButtons();
+ document.write( "<div class='table'>");
+ document.write( "<table id='events' class='tablelayout'>" );
- document.write( "<tr class='content'>" );
- document.write( "<td colspan='" + columns + "' class='content'> </th>" );
- document.write( "</tr>" );
-
- document.write( "<tr class='content'>" );
- document.write( "<th class='content'>Received</th>" );
- document.write( "<th class='content'>Topic</th>" );
- document.write( "<th class='content'>Properties</th>" );
- document.write( "</tr>" );
+ document.write( "<thead><tr>" );
+ document.write( "<th>Received</th>" );
+ document.write( "<th>Topic</th>" );
+ document.write( "<th>Properties</th>" );
+ document.write( "</tr></thead><tbody>" );
}
-
-function error( /* int */ columns, /* String */ message )
+function renderData( eventData )
{
- document.write( "<tr class='content'>" );
- document.write( "<td class='content'> </td>" );
- document.write( "<td class='content' colspan='" + (columns - 1) + "'>" + message + "</td>" );
- document.write( "</tr>" );
+ $(".statusline").empty().append(eventData.status);
+ data ( eventData.data );
}
-
function data( /* Array of Object */ dataArray )
{
- // render components
- if (dataArray.length == 1)
+ $("#events > tbody > tr").remove();
+ for ( var idx in dataArray )
{
- entry( dataArray[0], true );
- }
- else {
- for ( var idx in dataArray )
- {
- entry( dataArray[idx] );
- }
+ entry( dataArray[idx] );
}
}
function footer( /* int */ columns )
{
- document.write( "<tr class='content'>" );
- document.write( "<td colspan='" + columns + "' class='content'> </th>" );
- document.write( "</tr>" );
-
- document.write( "</table>" );
+ document.write( "</tbody></table>" );
+ document.write( "</div>");
+ renderButtons();
+ document.write( "</div>");
}
-function entry( /* Object */ dataEntry, /* boolean */ singleEntry )
+function entry( /* Object */ dataEntry )
{
var trElement = tr( null, { id: "entry" + dataEntry.id } );
- entryInternal( trElement, dataEntry, singleEntry );
- document.write( serialize( trElement ) );
+ entryInternal( trElement, dataEntry );
+ $("#events > tbody").append(trElement);
}
-function entryInternal( /* Element */ parent, /* Object */ dataEntry, /* boolean */ singleEntry )
+function entryInternal( /* Element */ parent, /* Object */ dataEntry )
{
var id = dataEntry.id;
var topic = dataEntry.topic;
var properties = dataEntry.properties;
- parent.appendChild( td( "content", null, [ text( new Date(dataEntry.received) ) ] ) );
- parent.appendChild( td( "content", { "width": "20%"}, [ text( topic ) ] ) );
+ parent.appendChild( td( null, null, [ text( new Date(dataEntry.received) ) ] ) );
+ parent.appendChild( td( null, null, [ text( topic ) ] ) );
var tableE = createElement("table");
var bodyE = createElement("tbody");
@@ -94,43 +82,55 @@
td(null, null, [text(dataEntry.properties[p])])]));
}
- parent.appendChild( td( "content", null, [tableE] ) );
+ parent.appendChild( td( null, null, [tableE] ) );
}
-function installForm( )
+function renderStatusLine() {
+ document.write( "<div class='fullwidth'>");
+ document.write( "<div class='statusline'>" );
+ document.write( "</div>" );
+ document.write( "</div>" );
+}
+
+function renderButtons( )
{
- document.write( "<tr class='content'>" );
- document.write( "<td class='content'> </td>" );
- document.write( "<td class='content'> </td>" );
- document.write( "<td class='content' align='right' noWrap>" );
- document.write( "<form method='post' enctype='multipart/form-data'>" );
- document.write( "<input class='submit' style='width:auto' type='submit' name='clear' value='Clear List'>" );
- document.write( "</form>" );
- document.write( "</td>" );
- document.write( "</tr>" );
+ document.write( "<div class='fullwidth'>");
+ document.write( "<div class='buttons'>" );
+ document.write( "<div class='button'><button id='reloadButton' type='button' name='reload'>Reload</button></div>" );
+ document.write( "<div class='button'><button id='clearButton' type='button' name='clear'>Clear List</button></div>" );
+ document.write( "</div>" );
+ document.write( "</div>" );
}
+function loadData()
+{
+ $.get(pluginRoot + "/data.json", null, function(data) {
+ renderData(data);
+ }, "json");
+}
-function renderEvents( /* Array of Data Objects */ bundleData )
+function renderEvents( )
{
// date, topic and properties
var columns = 3;
+ renderStatusLine();
+
header( columns );
- installForm();
-
- if (bundleData.error)
- {
- error( columns, bundleData.error );
- }
- else
- {
- data ( bundleData.data );
- }
-
- installForm();
-
footer( columns );
+
+ renderStatusLine();
+
+ loadData();
+
+ $("#events").tablesorter();
+ $("#reloadButton").click(loadData);
+ $("#clearButton").click(function () {
+ $("#events > tbody > tr").remove();
+ $.post(pluginRoot, { "action":"clear" }, function(data) {
+ renderData(data);
+ }, "json");
+ });
}