Added in the slow query warning on the dashboard
Project: http://git-wip-us.apache.org/repos/asf/incubator-blur/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-blur/commit/30caf5ce Tree: http://git-wip-us.apache.org/repos/asf/incubator-blur/tree/30caf5ce Diff: http://git-wip-us.apache.org/repos/asf/incubator-blur/diff/30caf5ce Branch: refs/heads/console-v2 Commit: 30caf5ce876d5ec70929c56cbf6c480a641436ee Parents: cd3c9e8 Author: Chris Rohr <[email protected]> Authored: Tue Mar 4 21:27:15 2014 -0500 Committer: Chris Rohr <[email protected]> Committed: Tue Mar 4 21:27:15 2014 -0500 ---------------------------------------------------------------------- .../ui/app/scripts/blurconsole.dashboard.js | 58 ++++++++++++++++++-- .../ui/app/scripts/blurconsole.fake.js | 11 +++- .../ui/app/scripts/blurconsole.model.js | 53 ++++++++++++++++-- .../ui/app/styles/blurconsole.dashboard.scss | 14 +++++ .../ui/app/views/dashboard.tpl.html | 10 ++-- 5 files changed, 129 insertions(+), 17 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-blur/blob/30caf5ce/contrib/blur-console/ui/app/scripts/blurconsole.dashboard.js ---------------------------------------------------------------------- diff --git a/contrib/blur-console/ui/app/scripts/blurconsole.dashboard.js b/contrib/blur-console/ui/app/scripts/blurconsole.dashboard.js index 417ed38..414081f 100644 --- a/contrib/blur-console/ui/app/scripts/blurconsole.dashboard.js +++ b/contrib/blur-console/ui/app/scripts/blurconsole.dashboard.js @@ -45,18 +45,23 @@ blurconsole.dashboard = (function () { } }, stateMap = { - $container : null + $container : null, + zookeeperNodes: 'chart', + controllerNodes: 'chart' }, jqueryMap = {}, setJqueryMap, initModule, unloadModule, updateNodeCharts, adjustChartSize, - loadZkPieChart, loadControllerPieChart, loadShardsPieChart, loadTableColumnChart, loadQueryPerfLineChart; + loadZkPieChart, loadControllerPieChart, loadShardsPieChart, loadTableColumnChart, loadQueryPerfLineChart, + buildNodeTable, checkForSlowQueries; setJqueryMap = function() { var $container = stateMap.$container; jqueryMap = { $container : $container, $zkChartHolder : $('#zookeeperNodes'), + $zkInfoHolder : $('#zookeeperInfo'), $controllerChartHolder : $('#controllerNodes'), + $controllerInfoHolder : $('#controllerInfo'), $shardChartHolder : $('#shardNodes'), $tableChartHolder : $('#tableCounts'), $queryLoadChartHolder : $('#queryLoad') @@ -77,10 +82,12 @@ blurconsole.dashboard = (function () { loadZkPieChart = function() { $.plot(jqueryMap.$zkChartHolder, blurconsole.model.metrics.getZookeeperChartData(), configMap.pieOptions); + jqueryMap.$zkInfoHolder.html(buildNodeTable(blurconsole.model.nodes.getOfflineZookeeperNodes())); }; loadControllerPieChart = function() { $.plot(jqueryMap.$controllerChartHolder, blurconsole.model.metrics.getControllerChartData(), configMap.pieOptions); + jqueryMap.$controllerInfoHolder.html(buildNodeTable(blurconsole.model.nodes.getOfflineControllerNodes())); }; loadShardsPieChart = function() { @@ -89,25 +96,32 @@ blurconsole.dashboard = (function () { } $.each(blurconsole.model.metrics.getClusters(), function(idx, cluster) { - var clusterData, clusterHolder, parentSize; + var clusterData, clusterHolder, clusterInfo, parentSize; clusterData = blurconsole.model.metrics.getShardChartData(cluster); if (clusterData) { clusterHolder = jqueryMap.$shardChartHolder.find('#cluster_' + cluster + '_chart_holder'); + clusterInfo = jqueryMap.$shardChartHolder.find('#cluster_' + cluster + '_info'); if (clusterHolder.length === 0) { - clusterHolder = $('<div id="cluster_'+ cluster + '_chart_holder" class="shardClusterChartHolder simple-chart"></div>'); - jqueryMap.$shardChartHolder.append($('<div class="text-center"><strong>' + cluster + '</strong></div>')); - jqueryMap.$shardChartHolder.append(clusterHolder); + var wrapper = $('<div></div>'); + wrapper.append($('<div class="text-center"><strong>' + cluster + '</strong> <small class="text-muted"><i class="glyphicon glyphicon-retweet swapper-trigger" title="Swap Chart/Info"></i></small></div>')); + clusterHolder = $('<div id="cluster_'+ cluster + '_chart_holder" class="shardClusterChartHolder simple-chart swapper-chart"></div>'); + wrapper.append(clusterHolder); parentSize = jqueryMap.$shardChartHolder.parent()[0].clientWidth - 150; clusterHolder.css({ 'height' : parentSize, 'width' : parentSize }); + clusterInfo = $('<div id="cluster_' + cluster + '_info" class="swapper-info hidden"></div>'); + wrapper.append(clusterInfo); + + jqueryMap.$shardChartHolder.append(wrapper); } $.plot(clusterHolder, clusterData, configMap.pieOptions); + clusterInfo.html(buildNodeTable(blurconsole.model.nodes.getOfflineShardNodes(cluster))); } }); }; @@ -143,6 +157,19 @@ blurconsole.dashboard = (function () { }); }; + buildNodeTable = function(data) { + var table = '<table class="table table-condensed"><thead><tr><th>Offline Node</th></tr></thead><tbody>'; + if (data.length === 0) { + table += '<tr><td>Everything is Online!</td></tr>'; + } else { + $.each(data, function(idx, node) { + table += '<tr><td>' + node + '</td></tr>'; + }); + } + table += '</tbody></table>'; + return $(table); + }; + adjustChartSize = function() { var size, shardCharts; @@ -180,6 +207,15 @@ blurconsole.dashboard = (function () { }); }; + checkForSlowQueries = function() { + console.log(blurconsole.model.metrics.getSlowQueryWarnings()) + if (blurconsole.model.metrics.getSlowQueryWarnings()) { + $('#slow-query-warnings').removeClass('hidden'); + } else { + $('#slow-query-warnings').addClass('hidden'); + } + }; + initModule = function( $container ) { $container.load ( configMap.view, function() { stateMap.$container = $container; @@ -187,7 +223,17 @@ blurconsole.dashboard = (function () { $.gevent.subscribe(jqueryMap.$container, 'node-status-updated', updateNodeCharts); $.gevent.subscribe(jqueryMap.$container, 'tables-updated', loadTableColumnChart); $.gevent.subscribe(jqueryMap.$container, 'query-perf-updated', loadQueryPerfLineChart); + $.gevent.subscribe(jqueryMap.$container, 'queries-updated', checkForSlowQueries); adjustChartSize(); + $(document).on('click', '.swapper-trigger', function() { + var parent = $(this).closest('div:not(.text-center)'); + var chart = parent.find('.swapper-chart'); + var info = parent.find('.swapper-info'); + + chart.toggleClass('hidden'); + info.toggleClass('hidden'); + }); + }); $(window).resize(adjustChartSize); return true; http://git-wip-us.apache.org/repos/asf/incubator-blur/blob/30caf5ce/contrib/blur-console/ui/app/scripts/blurconsole.fake.js ---------------------------------------------------------------------- diff --git a/contrib/blur-console/ui/app/scripts/blurconsole.fake.js b/contrib/blur-console/ui/app/scripts/blurconsole.fake.js index 289a239..2e90bd5 100644 --- a/contrib/blur-console/ui/app/scripts/blurconsole.fake.js +++ b/contrib/blur-console/ui/app/scripts/blurconsole.fake.js @@ -15,7 +15,7 @@ limitations under the License. /*global blurconsole:false */ blurconsole.fake = (function() { 'use strict'; - var getTableList, getNodeList, getQueryPerformance; + var getTableList, getNodeList, getQueryPerformance, getQueries; getTableList = function() { var clusters = ['prodA', 'prodB'], data = [], i, cluster, rows, records, enabled; @@ -59,9 +59,16 @@ blurconsole.fake = (function() { return Math.floor((Math.random()*1000) + 1); }; + getQueries = function() { + return { + slowQueries : Math.floor((Math.random()*100) + 1) % 10 === 0 + }; + }; + return { getTableList : getTableList, getNodeList : getNodeList, - getQueryPerformance : getQueryPerformance + getQueryPerformance : getQueryPerformance, + getQueries : getQueries }; }()); \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-blur/blob/30caf5ce/contrib/blur-console/ui/app/scripts/blurconsole.model.js ---------------------------------------------------------------------- diff --git a/contrib/blur-console/ui/app/scripts/blurconsole.model.js b/contrib/blur-console/ui/app/scripts/blurconsole.model.js index a15cd2a..79fbddf 100644 --- a/contrib/blur-console/ui/app/scripts/blurconsole.model.js +++ b/contrib/blur-console/ui/app/scripts/blurconsole.model.js @@ -22,10 +22,11 @@ blurconsole.model = (function() { stateMap = { tableNameMap: {}, nodeMap : {}, - queryPerformance : [] + queryPerformance : [], + queries : {} }, isFakeData = true, - tables, metrics, initModule, nodePoller, tablePoller, queryPerformancePoller; + tables, metrics, nodes, initModule, nodePoller, tablePoller, queryPerformancePoller, queryPoller; tables = (function() { var getClusters, getEnabledTables, getDisabledTables; @@ -75,9 +76,38 @@ blurconsole.model = (function() { }; }()); + nodes = (function() { + var getOfflineZookeeperNodes, getOfflineControllerNodes, getOfflineShardNodes; + + getOfflineZookeeperNodes = function() { + return stateMap.nodeMap.zookeepers.offline; + }; + + getOfflineControllerNodes = function() { + return stateMap.nodeMap.controllers.offline; + }; + + getOfflineShardNodes = function(clusterName) { + var clusterData = $.grep(stateMap.nodeMap.clusters, function(cluster) { + return cluster.name === clusterName; + }); + + if (clusterData.length > 0) { + return clusterData[0].offline; + } + return []; + }; + + return { + getOfflineZookeeperNodes : getOfflineZookeeperNodes, + getOfflineControllerNodes : getOfflineControllerNodes, + getOfflineShardNodes : getOfflineShardNodes + }; + }()); + metrics = (function() { var getZookeeperChartData, getControllerChartData, getClusters, getShardChartData, getTableChartData, - getQueryLoadChartData, buildPieChartData; + getQueryLoadChartData, buildPieChartData, getSlowQueryWarnings; getZookeeperChartData = function() { return buildPieChartData(stateMap.nodeMap.zookeepers.online.length, stateMap.nodeMap.zookeepers.offline.length); @@ -195,13 +225,18 @@ blurconsole.model = (function() { return [onlineChart, offlineChart]; }; + getSlowQueryWarnings = function() { + return stateMap.queries.slowQueries; + }; + return { getZookeeperChartData : getZookeeperChartData, getControllerChartData : getControllerChartData, getClusters : getClusters, getShardChartData : getShardChartData, getTableChartData : getTableChartData, - getQueryLoadChartData : getQueryLoadChartData + getQueryLoadChartData : getQueryLoadChartData, + getSlowQueryWarnings : getSlowQueryWarnings }; }()); @@ -227,17 +262,25 @@ blurconsole.model = (function() { setTimeout(queryPerformancePoller, 1000); }; + queryPoller = function() { + stateMap.queries = configMap.poller.getQueries(); + $.gevent.publish('queries-updated'); + setTimeout(queryPoller, 5000); + }; + initModule = function() { configMap.poller = isFakeData ? blurconsole.fake : blurconsole.data; setTimeout(function() { nodePoller(); tablePoller(); queryPerformancePoller(); + queryPoller(); }, 1000); }; return { initModule : initModule, tables : tables, - metrics: metrics + metrics: metrics, + nodes : nodes }; }()); \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-blur/blob/30caf5ce/contrib/blur-console/ui/app/styles/blurconsole.dashboard.scss ---------------------------------------------------------------------- diff --git a/contrib/blur-console/ui/app/styles/blurconsole.dashboard.scss b/contrib/blur-console/ui/app/styles/blurconsole.dashboard.scss index 0ac8d78..d038b63 100644 --- a/contrib/blur-console/ui/app/styles/blurconsole.dashboard.scss +++ b/contrib/blur-console/ui/app/styles/blurconsole.dashboard.scss @@ -28,4 +28,18 @@ limitations under the License. max-width : 1000px; margin-left : auto; margin-right : auto; +} + +.swapper-trigger { + cursor : pointer; +} + +.swapper-info { + min-height : 200px; + min-width : 200px; + max-height : 300px; + max-width : 300px; + margin-left : auto; + margin-right : auto; + overflow: auto; } \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-blur/blob/30caf5ce/contrib/blur-console/ui/app/views/dashboard.tpl.html ---------------------------------------------------------------------- diff --git a/contrib/blur-console/ui/app/views/dashboard.tpl.html b/contrib/blur-console/ui/app/views/dashboard.tpl.html index bb8b852..cce38e6 100644 --- a/contrib/blur-console/ui/app/views/dashboard.tpl.html +++ b/contrib/blur-console/ui/app/views/dashboard.tpl.html @@ -22,12 +22,14 @@ limitations under the License. <div class="col-md-8"> <div class="row"> <div class="col-md-6 text-center"> - <h4>Zookeepers</h4> - <div id="zookeeperNodes" class="simple-chart"><img src="images/ajax-loader.gif"></div> + <h4>Zookeepers <small><i class="glyphicon glyphicon-retweet swapper-trigger" title="Swap Chart/Info"></i></small></h4> + <div id="zookeeperNodes" class="simple-chart swapper-chart"><img src="images/ajax-loader.gif"></div> + <div id="zookeeperInfo" class="swapper-info hidden"></div> </div> <div class="col-md-6 text-center"> - <h4>Controllers</h4> - <div id="controllerNodes" class="simple-chart"><img src="images/ajax-loader.gif"></div> + <h4>Controllers <small><i class="glyphicon glyphicon-retweet swapper-trigger" title="Swap Chart/Info"></i></small></h4> + <div id="controllerNodes" class="simple-chart swapper-chart"><img src="images/ajax-loader.gif"></div> + <div id="controllerInfo" class="swapper-info hidden"></div> </div> </div> <div class="row">
