Reorganizing dashboard into two panes.

ralphbean · Mar 23, 2012 · 6b989b1 · 6b989b1
1 parent f70db78
commit 6b989b1
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 21 deletions.
diff --git a/busmon/public/css/site.css b/busmon/public/css/site.css
@@ -11,6 +11,7 @@ body, p, a, li, div, input, button {
 
 pre {
   margin: 0;
+  font-size: 70%;
 }
 div.hll {
   -moz-border-radius: 10px;
@@ -38,7 +39,7 @@ div.hll {
   float: left;
   overflow: visible;
   margin-top: -10px;
-  margin-bottom: 20px;
+  margin-bottom: 5px;
 }
 
 #header div {
@@ -61,22 +62,36 @@ div.hll {
   background-color: #60605b;
 }
 
+.page {
+    width: 979px;
+    margin: 0 auto;
+}
+.pane {
+}
+.left {
+    width: 525px;
+    float: left;
+}
+.right {
+    width: 450px;
+    float: right;
+}
+
 .content {
   margin-left: auto;
   margin-right: auto;
   overflow: hidden;
   position: relative;
-  width: 960px;
   background-color:white;
   -moz-border-radius: 10px;
   border-radius: 10px;
   border: 2px solid black;
   -webkit-box-shadow: 5px 5px 5px #333;
   -moz-box-shadow: 5px 5px 5px #333;
   box-shadow: 5px 5px 5px #333;
-  padding: 1.6em;
+  padding: 0.8em;
 }
 
 .spacer {
-    margin: 10px;
+    margin: 4px;
 }
diff --git a/busmon/templates/index.mak b/busmon/templates/index.mak
@@ -1,12 +1,20 @@
 <%inherit file="local:templates.master"/>
-	<div class="content">
-	${barchart.display() | n}
-	</div>
-	<div class="clear spacer"></div>
-	<div class="content">
-	${timeseries.display() | n}
-	</div>
-	<div class="clear spacer"></div>
-	<div class="content">
-	${colorized_messages.display() | n}
-	</div>
+<div class="page">
+  <div class="left pane">
+    <div class="content">
+      <strong>Messages per Topic</strong>
+      ${barchart.display() | n}
+    </div>
+    <div class="clear spacer"></div>
+    <div class="content">
+      <strong>Total Messages over Time</strong>
+      ${timeseries.display() | n}
+    </div>
+  </div>
+  <div class="right pane">
+    <div class="content">
+      <strong>Last 5 Messages</strong>
+      ${colorized_messages.display() | n}
+    </div>
+  </div>
+</div>
diff --git a/busmon/widgets.py b/busmon/widgets.py
@@ -6,7 +6,7 @@
 import tw2.core as twc
 import tw2.d3
 
-global_width = 940
+global_width = 485
 
 
 class TopicsBarChart(tw2.d3.BarChart, moksha.api.widgets.live.LiveWidget):
@@ -16,9 +16,9 @@ class TopicsBarChart(tw2.d3.BarChart, moksha.api.widgets.live.LiveWidget):
 
     data = collections.OrderedDict()  # empty
 
-    padding = [30, 10, 10, 120]
+    padding = [30, 10, 10, global_width/2]
     width = global_width
-    height = 200
+    height = 225
     interval = 2000
 
     def prepare(self):
@@ -38,10 +38,10 @@ class MessagesTimeSeries(tw2.d3.TimeSeriesChart,
     onmessage = "tw2.store['${id}'].value++"
 
     width = global_width
-    height = 200
+    height = 150
 
     # Keep this many data points
-    n = 400
+    n = 200
     # Initialize to n zeros
     data = [0] * n
 
@@ -55,7 +55,7 @@ class ColorizedMessagesWidget(moksha.api.widgets.live.LiveWidget):
     topic = 'org.fedoraproject.busmon.colorized-messages'
     onmessage = """
     var container = $('#${id}');
-    if ( container.children().size() > 15 ) {
+    if ( container.children().size() > 4 ) {
         container.children().first().remove();
     }
     container.append(json.msg);