diff --git a/TODO b/TODO index a0ae77b..b42933d 100644 --- a/TODO +++ b/TODO @@ -1,5 +1,4 @@ - Console - - Update charts & summary on real data - Update test spec on real data - Adding a master node should add its slaves - Really "add" a node (ping and connect to it) diff --git a/console/js/console.data.js b/console/js/console.data.js index 9408064..d1277f7 100644 --- a/console/js/console.data.js +++ b/console/js/console.data.js @@ -1,26 +1,36 @@ +/*jslint forin:true */ +/*globals window document $ */ + var nodes = {}; var selectedNode = null; +function refreshReportsData(node) { + if (!node) { return; } + $.getJSON('http://' + node.name + '/reports', function(data, status) { + if (data) { node.reports = data; } + }); +} function initData() { - refreshReports = function() { + var refreshReports = function() { for (var i in nodes) { refreshReportsData(nodes[i]); } - setTimeout(function() { refreshReports() }, 2000); + setTimeout(function() { refreshReports(); }, 2000); }; refreshReports(); } function getIdFromString(str) { - return str.replace(/[^a-zA-Z0-9-]/g,'-'); + return str.replace(/[^a-zA-Z0-9\-]/g,'-'); } function getNodeId(name) { var parts = name.split(':'); - if (parts.length == 1) + if (parts.length === 1) { return getIdFromString(name) + "-8000"; + } return getIdFromString(name); } function getNodeObject(name) { var nodeId = getNodeId(name); - if (nodes[nodeId]) return nodes[nodeId]; + if (nodes[nodeId]) { return nodes[nodeId]; } var node = nodes[nodeId] = { id: nodeId, name: name, @@ -30,21 +40,14 @@ function getNodeObject(name) { return node; } function deleteNodeObject(node) { - if (!node) return; + if (!node) { return; } nodes[node.id] = null; } // Stubs function getTests(nodeId) { - return ['Read', 'Read+Write'] + return ['Read', 'Read+Write']; } -function refreshReportsData(node) { - if (!node) return; - $.getJSON('http://' + node.name + '/reports', function(data, status) { - if (data) node.reports = data; - }); -} - function randomize(list) { return list.map(function(x) { var rnd = [x[0]]; diff --git a/console/js/console.ui.js b/console/js/console.ui.js index 3c3b720..30bcdfd 100644 --- a/console/js/console.ui.js +++ b/console/js/console.ui.js @@ -1,6 +1,9 @@ // UI builders and event handlers // ---------------------------------- +/*jslint forin:true */ /*globals window document $ */ +var getIdFromString, getNodeObject, deleteNodeObject, refreshReportsData, selectedNode; // for jslint. defined in console.data.js. +var Dygraph; // --------------- // UI creation @@ -22,95 +25,10 @@ function initVars() { pnlSummary = $('#pnlSummary'); } -// Builds the main UI -function initUI() { - initVars(); - - optNodes.buttonset(); - cmdAddNode.button({ - text: false, - icons: { - primary: "ui-icon-plusthick" - } - }).click(function(){ - toggleAddNodeDialog(); - return false; - }); - cmdAdd.click(function() { - if (frmAddNode.is(':visible') && txtNewHost.val().trim().length > 0) { - var name = txtNewHost.val(); - hideAddNodeDialog(); - addNode(name); - } - }); - - $(window).resize(function() { - resizeReportGraphs(); - }); - - pnlRightColumn.accordion({ - header: "h3", - autoHeight: false, - }); - - initShortcuts(); - - var refreshGraphs = function() { - if (selectedNode) refreshReportGraphs(selectedNode); - setTimeout(function() { refreshGraphs() }, 2000); - }; - refreshGraphs(); -} - -// Keyboard navigation -function initShortcuts() { - doc.bind('keydown', 'd', function() { - if (!frmAddNode.is(':visible')) { - cmdAddNode.click(); - return false; - } else if (!txtNewHost.is(':focus')) { - txtNewHost.focus(); - return false; - } - }); - doc.bind('keydown', 'k', function() { - var prev = optNodes.find('label.ui-state-active').parent().prev(); - if (!prev) return; - - prev.find('input').button().click(); - optNodes.buttonset('refresh'); - }); - doc.bind('keydown', 'j', function() { - var next = optNodes.find('label.ui-state-active').parent().next(); - if (!next) return; - - next.find('input').button().click(); - optNodes.buttonset('refresh'); - }); - doc.bind('keydown', 'h', function() { - if (!selectedNode) return; - var selected = selectedNode.tabs.tabs('option', 'selected'); - selectedNode.tabs.tabs('select', selected-1); - }); - doc.bind('keydown', 'l', function() { - if (!selectedNode) return; - var selected = selectedNode.tabs.tabs('option', 'selected'); - selectedNode.tabs.tabs('select', selected+1); - }); - - txtNewHost.bind('keydown', 'esc', function() { - hideAddNodeDialog(); - return false; - }); - txtNewHost.bind('keydown', 'return', function() { - cmdAdd.click(); - return false; - }); -} - // --------------- // UI Control // --------------- +var refreshReportGraphs, resizeReportGraphs, addNodeButton, addNodeTabs, jsonToTable; function toggleAddNodeDialog() { frmAddNode.toggle(); if (frmAddNode.is(':visible')) { @@ -134,18 +52,18 @@ function addNode(name) { node.selectNode = function() { node.button.click(); optNodes.buttonset('refresh'); - } + }; node.selectReportGraph = function(index) { node.tabs.tabs('select', index); - } + }; $.getJSON('http://' + node.name + '/remote/hosts', function(hosts, status) { - if (hosts) hosts.forEach(function(name) { addNode(name) }); + if (hosts) { hosts.forEach(function(name) { addNode(name); }); } }); } refreshReportsData(node); - setTimeout(function() { refreshReportGraphs(node) }, 200); + setTimeout(function() { refreshReportGraphs(node); }, 200); node.selectNode(); node.selectReportGraph(0); @@ -154,8 +72,8 @@ function removeNode(node) { var button = $('#cmd-' + node.id); if (node === selectedNode) { var next = button.next(); - if (!next.exists()) next = button.prev(); - if (next) next.find('input').button().click(); + if (!next.exists()) { next = button.prev(); } + if (next) { next.find('input').button().click(); } } button.hide(); button.remove(); @@ -164,19 +82,20 @@ function removeNode(node) { deleteNodeObject(node); } function selectNode(node) { - if (selectedNode === node) return; - if (selectedNode) selectedNode.tabs.hide(); + if (selectedNode === node) { return; } + if (selectedNode) { selectedNode.tabs.hide(); } selectedNode = node; selectedNode.tabs.show(); refreshReportGraphs(node); resizeReportGraphs(); } function addNodeButton(node) { - optNodes.append( - '\ - \ - \ - '); + optNodes.append([ + '', + ' ', + ' ', + '' + ].join('')); $('#' + node.id ).button({ icons: { secondary: 'ui-icon-squaresmall-close' } }).click(function() { @@ -189,16 +108,16 @@ function addNodeButton(node) { return $('#' + node.id); } function addNodeTabs(node) { - var tabs = $('
\ -
< h    l >
\ - \ -
'); + var tabs = $(['
', + '
< h    l >
', + ' ', + '
' + ].join('')); tabs.appendTo(pnlCharts).tabs(); tabs.tabs('add', '#tab-console-' + node.id, 'Console: ' + node.name); tabs.hide(); return tabs; } - function getTabForReport(node, reportName, reportId) { var tabId = '#tab-' + node.id + '-' + reportId, tab = $(tabId); @@ -207,8 +126,8 @@ function getTabForReport(node, reportName, reportId) { node.tabs.tabs('add', tabId, reportName, node.tabs.tabs('length')-1); node.tabs.bind('tabsshow', function(event, ui) { resizeReportGraphs(); - }) - tab = $(tabId).attr('report-name', name); + }); + tab = $(tabId).attr('report-name', reportName); } return tab; } @@ -224,7 +143,7 @@ function refreshReportGraphs(node) { summary = {}; for (var i in reports) { // Add tabs for any new reports - var reportId = getIdFromString(i), + var reportId = getIdFromString(reports[i].name), tab = getTabForReport(node, reports[i].name, reportId); // Add charts from report @@ -234,11 +153,12 @@ function refreshReportGraphs(node) { chartContainerId = chartId + '-container', chartLegendId = chartId + '-legend'; if (!node.graphs[chartId]) { - tab.append( - '

' + j + '

\ -
\ -
\ -
'); + tab.append([ + '

', j, '

', + '
', + '
', + '
' + ].join('')); node.graphs[chartId] = new Dygraph( document.getElementById(chartId), charts[j].rows, @@ -264,12 +184,103 @@ function refreshReportGraphs(node) { } } +// -------------------- +// Keyboard navigation +// -------------------- +function initShortcuts() { + doc.bind('keydown', 'd', function() { + if (!frmAddNode.is(':visible')) { + cmdAddNode.click(); + return false; + } else if (!txtNewHost.is(':focus')) { + txtNewHost.focus(); + return false; + } + }); + doc.bind('keydown', 'k', function() { + var prev = optNodes.find('label.ui-state-active').parent().prev(); + if (!prev) { return; } + + prev.find('input').button().click(); + optNodes.buttonset('refresh'); + }); + doc.bind('keydown', 'j', function() { + var next = optNodes.find('label.ui-state-active').parent().next(); + if (!next) { return; } + + next.find('input').button().click(); + optNodes.buttonset('refresh'); + }); + doc.bind('keydown', 'h', function() { + if (!selectedNode) { return; } + var selected = selectedNode.tabs.tabs('option', 'selected'); + selectedNode.tabs.tabs('select', selected-1); + }); + doc.bind('keydown', 'l', function() { + if (!selectedNode) { return; } + var selected = selectedNode.tabs.tabs('option', 'selected'); + selectedNode.tabs.tabs('select', selected+1); + }); + + txtNewHost.bind('keydown', 'esc', function() { + hideAddNodeDialog(); + return false; + }); + txtNewHost.bind('keydown', 'return', function() { + cmdAdd.click(); + return false; + }); +} + // --------------- // Utilities // --------------- function jsonToTable(json) { var txt = ""; - for (var i in json) + for (var i in json) { txt += "" + i + "" + json[i] + ""; + } return "" + txt + "
"; -}; \ No newline at end of file +} + +// --------------- +// UI Construction +// --------------- +function initUI() { + initVars(); + + optNodes.buttonset(); + cmdAddNode.button({ + text: false, + icons: { + primary: "ui-icon-plusthick" + } + }).click(function(){ + toggleAddNodeDialog(); + return false; + }); + cmdAdd.click(function() { + if (frmAddNode.is(':visible') && txtNewHost.val().trim().length > 0) { + var name = txtNewHost.val(); + hideAddNodeDialog(); + addNode(name); + } + }); + + $(window).resize(function() { + resizeReportGraphs(); + }); + + pnlRightColumn.accordion({ + header: "h3", + autoHeight: false, + }); + + initShortcuts(); + + var refreshGraphs = function() { + if (selectedNode) { refreshReportGraphs(selectedNode); } + setTimeout(function() { refreshGraphs(); }, 2000); + }; + refreshGraphs(); +} \ No newline at end of file