Merge pull request #7364 from spadgett/chart-timeout

Merged by openshift-bot

Author: OpenShift Bot

assets/app/scripts/directives/buildTrendsChart.js

@@ -1,7 +1,7 @@
 "use strict";
 
 angular.module('openshiftConsole')
-  .directive('buildTrendsChart', function($filter, $location, $rootScope) {
+  .directive('buildTrendsChart', function($filter, $location, $rootScope, $timeout) {
     return {
       restrict: 'E',
       scope: {
@@ -268,7 +268,12 @@ angular.module('openshiftConsole')
 
           if (!chart) {
             config.data = angular.extend(data, config.data);
-            chart = c3.generate(config);
+            // Allow the rest of the page to load so c3 calculates the correct
+            // width for the chart based on the parent width.
+            $timeout(function() {
+              chart = c3.generate(config);
+              updateAvgLine();
+            });
           } else {
             data.unload = unload;
             // Call flush to work around a c3.js bug where the y-axis label
@@ -281,10 +286,8 @@ angular.module('openshiftConsole')
               }, animationDuration() + 25);
             };
             chart.load(data);
+            updateAvgLine();
           }
-
-          // Update average line.
-          updateAvgLine();
         };
 
         $scope.$watch(numCompleteBuilds, update);

pkg/assets/bindata.go

@@ -6645,23 +6645,23 @@ j ? j.load(d) :(_.assign(k.data, d), j = c3.generate(k));
 c.$watchGroup([ "used", "total" ], _.debounce(l, 300));
 }
 };
-} ]), angular.module("openshiftConsole").directive("buildTrendsChart", [ "$filter", "$location", "$rootScope", function(a, b, c) {
+} ]), angular.module("openshiftConsole").directive("buildTrendsChart", [ "$filter", "$location", "$rootScope", "$timeout", function(a, b, c, d) {
 return {
 restrict:"E",
 scope:{
 builds:"="
 },
 templateUrl:"views/_build-trends-chart.html",
-link:function(d) {
-var e, f = [ "Complete", "Failed", "Cancelled", "Error" ], g = function(a) {
+link:function(e) {
+var f, g = [ "Complete", "Failed", "Cancelled", "Error" ], h = function(a) {
 var b = [], c = moment.duration(a), d = Math.floor(c.asHours()), e = c.minutes(), f = c.seconds();
 return d || e || f ? (d && b.push(d + "h"), e && b.push(e + "m"), d || b.push(f + "s"), b.join(" ")) :"";
-}, h = function(a) {
+}, i = function(a) {
 return a.status.startTimestamp || a.metadata.creationTimestamp;
 };
-d.chartID = _.uniqueId("build-trends-chart-");
-var i, j, k = _.constant(350), l = {
-bindto:"#" + d.chartID,
+e.chartID = _.uniqueId("build-trends-chart-");
+var j, k, l = _.constant(350), m = {
+bindto:"#" + e.chartID,
 padding:{
 right:30,
 left:80
@@ -6694,7 +6694,7 @@ tick:{
 count:5,
 culling:!0,
 fit:!0,
-format:g
+format:h
 }
 }
 },
@@ -6714,13 +6714,13 @@ height:200
 tooltip:{
 format:{
 title:function(a) {
-var b = e[a], c = h(b);
+var b = f[a], c = i(b);
 return "#" + a + " (" + moment(c).fromNow() + ")";
 }
 }
 },
 transition:{
-duration:k()
+duration:l()
 },
 data:{
 colors:{
@@ -6735,7 +6735,7 @@ text:"No Completed Builds"
 }
 },
 onclick:function(d) {
-var f = e[d.x], g = a("navigateResourceURL")(f);
+var e = f[d.x], g = a("navigateResourceURL")(e);
 g && c.$apply(function() {
 b.path(g);
 });
@@ -6745,66 +6745,68 @@ enabled:!0
 },
 type:"bar"
 }
-}, m = function() {
-d.completeBuilds = [];
+}, n = function() {
+e.completeBuilds = [];
 var b = a("isIncompleteBuild");
-angular.forEach(d.builds, function(a) {
-b(a) || d.completeBuilds.push(a);
+angular.forEach(e.builds, function(a) {
+b(a) || e.completeBuilds.push(a);
 });
-}, n = function() {
-return m(), d.completeBuilds.length;
-}, o = a("annotation"), p = function(a) {
-var b = o(a, "buildNumber") || parseInt(a.metadata.name.match(/(\d+)$/), 10);
+}, o = function() {
+return n(), e.completeBuilds.length;
+}, p = a("annotation"), q = function(a) {
+var b = p(a, "buildNumber") || parseInt(a.metadata.name.match(/(\d+)$/), 10);
 return isNaN(b) ? null :b;
-}, q = function(a) {
-var b = h(a), c = a.status.completionTimestamp;
+}, r = function(a) {
+var b = i(a), c = a.status.completionTimestamp;
 return b && c ? moment(c).diff(moment(b)) :0;
-}, r = !1, s = function() {
-j && r ? i.ygrids([ {
-value:j,
+}, s = !1, t = function() {
+k && s ? j.ygrids([ {
+value:k,
 "class":"build-trends-avg-line"
-} ]) :i.ygrids.remove();
+} ]) :j.ygrids.remove();
 };
-d.toggleAvgLine = function() {
-r = !r, s();
+e.toggleAvgLine = function() {
+s = !s, t();
 };
-var t = function() {
-e = {};
+var u = function() {
+f = {};
 var a = {
 json:[],
 keys:{
 x:"buildNumber"
 }
 }, b = 0, c = 0;
-angular.forEach(d.completeBuilds, function(d) {
-var f = p(d);
-if (f) {
-var g = q(d);
+angular.forEach(e.completeBuilds, function(d) {
+var e = q(d);
+if (e) {
+var g = r(d);
 b += g, c++;
 var h = {
-buildNumber:f,
+buildNumber:e,
 phase:d.status.phase
 };
-h[d.status.phase] = g, a.json.push(h), e[f] = d;
+h[d.status.phase] = g, a.json.push(h), f[e] = d;
 }
 }), a.json.length > 50 && (a.json.sort(function(a, b) {
 return a.buildNumber - b.buildNumber;
 }), a.json = a.json.slice(a.json.length - 50));
-var h = {};
+var i = {};
 angular.forEach(a.json, function(a) {
-h[a.phase] = !0;
-}), c ? (j = b / c, d.averageDurationText = g(j)) :(j = null, d.averageDurationText = null);
-var m = [], n = [];
-angular.forEach(f, function(a) {
-h[a] ? m.push(a) :n.push(a);
-}), a.keys.value = m, a.groups = [ m ], i ? (a.unload = n, a.done = function() {
+i[a.phase] = !0;
+}), c ? (k = b / c, e.averageDurationText = h(k)) :(k = null, e.averageDurationText = null);
+var n = [], o = [];
+angular.forEach(g, function(a) {
+i[a] ? n.push(a) :o.push(a);
+}), a.keys.value = n, a.groups = [ n ], j ? (a.unload = o, a.done = function() {
 setTimeout(function() {
-i.flush();
-}, k() + 25);
-}, i.load(a)) :(l.data = angular.extend(a, l.data), i = c3.generate(l)), s();
+j.flush();
+}, l() + 25);
+}, j.load(a), t()) :(m.data = angular.extend(a, m.data), d(function() {
+j = c3.generate(m), t();
+}));
 };
-d.$watch(n, t), d.$on("destroy", function() {
-i && (i = i.destroy());
+e.$watch(o, u), e.$on("destroy", function() {
+j && (j = j.destroy());
 });
 }
 };