Merge pull request linkerd#443 from BuoyantIO/rmars/wide-dashboard

rmars · rmars · commit e2d00bb7a3f2 · 2016-05-25T16:25:24.000-07:00
Add media query to modify dashboard appearance on large screens
diff --git a/admin/src/main/resources/io/buoyant/admin/css/dashboard.css b/admin/src/main/resources/io/buoyant/admin/css/dashboard.css
@@ -205,3 +205,26 @@ nav ul.navbar-nav {
   padding-left: 15px;
   margin: 20px 0 30px 0;
 }
+
+/*
+* For wider screens
+*/
+
+@media (min-width: 1400px) {
+  .navbar-container {
+    width: 100vw;
+  }
+
+  .dashboard-container {
+    margin: 0 1.5vw 0;
+    min-width: 96vw;
+  }
+
+  .row.proc-info, .router, .clients .router-graph {
+    min-width: 96vw;
+  }
+
+  .router > div {
+    width: 100%;
+  }
+}
diff --git a/admin/src/main/resources/io/buoyant/admin/js/client_success_graph.js b/admin/src/main/resources/io/buoyant/admin/js/client_success_graph.js
@@ -1,6 +1,7 @@
 /* globals UpdateableChart */
 /* exported ClientSuccessRateGraph */
 var ClientSuccessRateGraph = (function() {
+  var columnGridPadding = 27; // from our css grid setup
   var neutralLineColor = "#878787"; // greys.neutral
 
   function createChartLegend(successLineColor) {
@@ -32,7 +33,10 @@ var ClientSuccessRateGraph = (function() {
       },
       $canvas[0],
       function() {
-        return $chartEl.width();
+        var containerWidth = $(".router-clients").first().width();
+        var metricsWidth = $(".metrics-container").first().width();
+
+        return containerWidth - metricsWidth - columnGridPadding; // get this to display nicely on wide screens
       },
       timeseriesParamsFn
     );
diff --git a/admin/src/main/resources/io/buoyant/admin/js/combined_client_graph.js b/admin/src/main/resources/io/buoyant/admin/js/combined_client_graph.js
@@ -1,6 +1,8 @@
 /* globals Query, UpdateableChart */
 /* exported CombinedClientGraph */
 var CombinedClientGraph = (function() {
+  var defaultWidth = 1181;
+
   function clientToMetric(client) {
     return {name: client, color: ""}; //TODO: move to clientName only after v2 migration
   }
@@ -34,7 +36,8 @@ var CombinedClientGraph = (function() {
       },
       $root[0],
       function() {
-        return 1161;
+        var containerWidth = $(".router-clients").first().width(); // get this to display nicely on wide screens
+        return containerWidth || defaultWidth;
       },
       timeseriesParams
     );
