realtime mode toggle for dashboard

public/less/admin/general/dashboard.less

@@ -132,4 +132,16 @@
 	.motd textarea {
 		width: 100%;
 	}
+
+	#toggle-realtime {
+		text-align: center;
+		.fa {
+			font-size: 21px;
+			vertical-align: -2px;
+		}
+
+		.fa-toggle-on {
+			color: @brand-success;
+		}
+	}
 }

public/src/admin/general/dashboard.js

@@ -9,6 +9,12 @@ define('admin/general/dashboard', ['semver'], function(semver) {
 		},
 		isMobile = false;
 
+	var DEFAULTS = {
+		roomInterval: 10000,
+		graphInterval: 15000,
+		realtimeInterval: 1500
+	};
+
 
 	Admin.init = function() {
 		app.enterRoom('admin');
@@ -16,12 +22,6 @@ define('admin/general/dashboard', ['semver'], function(semver) {
 
 		isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
 
-		intervals.rooms = setInterval(function() {
-			if (app.isFocused && app.isConnected) {
-				socket.emit('meta.rooms.getAll', Admin.updateRoomUsage);
-			}
-		}, 10000);
-
 		$(window).on('action:ajaxify.start', function(ev, data) {
 			clearInterval(intervals.rooms);
 			clearInterval(intervals.graphs);
@@ -57,8 +57,11 @@ define('admin/general/dashboard', ['semver'], function(semver) {
 			}
 		});
 
-		setupGraphs();
 		$('[data-toggle="tooltip"]').tooltip();
+		
+		setupRealtimeButton();
+		setupGraphs();
+		initiateDashboard();
 	};
 
 	Admin.updateRoomUsage = function(err, data) {
@@ -238,7 +241,6 @@ define('admin/general/dashboard', ['semver'], function(semver) {
 			}
 		};
 
-		intervals.graphs = setInterval(updateTrafficGraph, 15000);
 		updateTrafficGraph();
 
 		$(window).on('resize', adjustPieCharts);
@@ -390,5 +392,33 @@ define('admin/general/dashboard', ['semver'], function(semver) {
 		graphs.topics.update();
 	}
 
+	function setupRealtimeButton() {
+		$('#toggle-realtime .fa').on('click', function() {
+			var $this = $(this);
+			if ($this.hasClass('fa-toggle-on')) {
+				$this.removeClass('fa-toggle-on').addClass('fa-toggle-off');
+				$this.parent().find('strong').html('OFF');
+				initiateDashboard(false);
+			} else {
+				$this.removeClass('fa-toggle-off').addClass('fa-toggle-on');
+				$this.parent().find('strong').html('ON');
+				initiateDashboard(true);
+			}
+		});
+	}
+
+	function initiateDashboard(realtime) {
+		clearInterval(intervals.rooms);
+		clearInterval(intervals.graphs);
+
+		intervals.rooms = setInterval(function() {
+			if (app.isFocused && app.isConnected) {
+				socket.emit('meta.rooms.getAll', Admin.updateRoomUsage);
+			}
+		}, realtime ? DEFAULTS.realtimeInterval : DEFAULTS.roomInterval);
+
+		intervals.graphs = setInterval(updateTrafficGraph, realtime ? DEFAULTS.realtimeInterval : DEFAULTS.graphInterval);
+	}
+
 	return Admin;
 });

src/views/admin/general/dashboard.tpl

@@ -93,14 +93,17 @@
 	<div class="col-lg-3">
 		<div class="panel panel-default">
 			<div class="panel-heading">System Control</div>
-			<div class="panel-body">
+			<div class="panel-body text-center">
-				<p class="text-center">
+				<p>
 					<button class="btn btn-warning reload" data-placement="bottom" data-toggle="tooltip" title="Reload NodeBB to activate new plugins">Reload</button>
 					<button class="btn btn-danger restart" data-placement="bottom" data-toggle="tooltip" title="Restarting NodeBB will drop all existing connections for a few seconds">Restart</button>
 				</p>
-				<p class="text-center">
+				<p>
 					<a href="{config.relative_path}/admin/settings/advanced" class="btn btn-info" data-placement="bottom" data-toggle="tooltip" title="Click here to set up maintenance mode for NodeBB">Maintenance Mode</a>
 				</p>
+
+				<hr />
+				<span id="toggle-realtime">Realtime Chart Updates <strong>OFF</strong> <i class="fa fa fa-toggle-off pointer"></i></span>
 			</div>
 		</div>