@@ -1,7 +1,13 @@

 "use strict";

 angular.module('openshiftConsole')

-  .directive('podStatusChart', function($timeout, hashSizeFilter, isTroubledPodFilter, numContainersReadyFilter, Logger) {

+  .directive('podStatusChart', function($timeout,

+                                        hashSizeFilter,

+                                        isPullingImageFilter,

+                                        isTerminatingFilter,

+                                        isTroubledPodFilter,

+                                        numContainersReadyFilter,

+                                        Logger) {

     // Make sure our charts always have unique IDs even if the same deployment

     // or monopod is shown on the overview more than once.

     var lastId = 0;

@@ -17,7 +23,7 @@ angular.module('openshiftConsole')

         var chart, config;

         // The phases to show (in order).

-        var phases = ["Running", "Not Ready", "Warning", "Failed", "Pending", "Succeeded", "Unknown"];

+        var phases = ["Running", "Not Ready", "Warning", "Failed", "Pulling", "Pending", "Succeeded", "Terminating", "Unknown"];

         lastId++;

         $scope.chartId = 'pods-donut-chart-' + lastId;

@@ -85,6 +91,9 @@ angular.module('openshiftConsole')

               return { top: 0, left: 0 };

             }

           },

+          transition: {

+            duration: 350

+          },

           data: {

             type: "donut",

             groups: [ phases ],

@@ -97,8 +106,10 @@ angular.module('openshiftConsole')

               "Not Ready": "#beedf9",

               Warning: "#f9d67a",

               Failed: "#d9534f",

-              Pending: "#e8e8e8",

+              Pulling: "#d1d1d1",

+              Pending: "#ededed",

               Succeeded: "#3f9c35",

+              Terminating: "#00659c",

               Unknown: "#f9d67a"

             },

             selection: {

@@ -134,41 +145,47 @@ angular.module('openshiftConsole')

           $scope.podStatusData = data.columns;

         }

-        function countPodPhases() {

-          var countByPhase = {};

-          var incrementCount = function(phase) {

-            countByPhase[phase] = (countByPhase[phase] || 0) + 1;

-          };

+        function isReady(pod) {

+          var numReady = numContainersReadyFilter(pod);

+          var total = pod.spec.containers.length;

-          var isReady = function(pod) {

-            var numReady = numContainersReadyFilter(pod);

-            var total = pod.spec.containers.length;

+          return numReady === total;

+        }

-            return numReady === total;

-          };

+        function getPhase(pod) {

+          if (isTerminatingFilter(pod)) {

+            return 'Terminating';

+          }

-          angular.forEach($scope.pods, function(pod) {

-            // Count 'Warning' as its own phase, even if not strictly accurate,

-            // so it appears in the donut chart. Warnings are too important not

-            // to call out.

-            if (isTroubledPodFilter(pod)) {

-              incrementCount('Warning');

-              return;

-            }

+          if (isTroubledPodFilter(pod)) {

+            return 'Warning';

+          }

-            // Also count running, but not ready, as its own phase.

-            if (pod.status.phase === 'Running' && !isReady(pod)) {

-              incrementCount('Not Ready');

-              return;

-            }

+          if (isPullingImageFilter(pod)) {

+            return 'Pulling';

+          }

+

+          // Also count running, but not ready, as its own phase.

+          if (pod.status.phase === 'Running' && !isReady(pod)) {

+            return 'Not Ready';

+          }

+

+          return _.get(pod, 'status.phase', 'Unknown');

+        }

-            incrementCount(pod.status.phase);

+        function countPodPhases() {

+          var countByPhase = {};

+

+          angular.forEach($scope.pods, function(pod) {

+            var phase = getPhase(pod);

+            countByPhase[phase] = (countByPhase[phase] || 0) + 1;

           });

           return countByPhase;

         }

-        $scope.$watch(countPodPhases, updateChart, true);

+        var debounceUpdate = _.debounce(updateChart, 350, { maxWait: 500 });

+        $scope.$watch(countPodPhases, debounceUpdate, true);

         $scope.$watch('desired', updateCenterText);

         $scope.$on('destroy', function() {

@@ -696,6 +696,36 @@ angular.module('openshiftConsole')

       return numRestarts;

     };

   })

+  .filter('isTerminating', function() {

+    return function(resource) {

+      return _.has(resource, 'metadata.deletionTimestamp');

+    };

+  })

+  .filter('isPullingImage', function() {

+    return function(pod) {

+      if (!pod) {

+        return false;

+      }

+

+      var phase = _.get(pod, 'status.phase');

+      if (phase !== 'Pending') {

+        return false;

+      }

+

+      var containerStatuses = _.get(pod, 'status.containerStatuses');

+      if (!containerStatuses) {

+        return false;

+      }

+

+      var containerPulling = function(containerStatus) {

+        // TODO: Update to use the pulling reason when available. We assume

+        // ContainerCreating === pulling, which might not be true.

+        return _.get(containerStatus, 'state.waiting.reason') === 'ContainerCreating';

+      };

+

+      return _.some(containerStatuses, containerPulling);

+    };

+  })

   .filter('newestResource', function() {

     return function(resources) {

       var newest = null;

@@ -153,6 +153,31 @@ angular.module('openshiftConsole')

       return toString(amountAndUnitFilter(value, type, true));

     };

   })

+  .filter('humanizeSize', function() {

+    return function(bytes) {

+      if (bytes === null || bytes === undefined || bytes === '') {

+        return bytes;

+      }

+

+      bytes = Number(bytes);

+      if (bytes < 1024) {

+        return bytes + " bytes";

+      }

+

+      var KiB = bytes / 1024;

+      if (KiB < 1024) {

+        return KiB.toFixed(1) + " KiB";

+      }

+

+      var MiB = KiB / 1024;

+      if (MiB < 1024) {

+        return MiB.toFixed(1) + " MiB";

+      }

+

+      var GiB = MiB / 1024;

+      return GiB.toFixed(1) + " GiB";

+    };

+  })

   .filter('computeResourceLabel', function() {

     return function(computeResourceType, capitalize) {

       switch (computeResourceType) {

@@ -18,6 +18,9 @@

           <span ng-if="imagesByDockerReference[container.image]">

             <a ng-href="{{imagesByDockerReference[container.image].imageStreamName | navigateResourceURL : 'ImageStream' : imagesByDockerReference[container.image].imageStreamNamespace}}">{{container.image | imageStreamName}}</a>

             (<span title="{{imagesByDockerReference[container.image].metadata.name}}">{{imagesByDockerReference[container.image].metadata.name | stripSHAPrefix | limitTo: 7}}</span>)

+            <span ng-if="imagesByDockerReference[container.image].dockerImageMetadata.Size" class="small text-muted nowrap">

+              {{imagesByDockerReference[container.image].dockerImageMetadata.Size | humanizeSize}}

+            </span>

           </span>

         </div>

       </div>

@@ -6760,8 +6760,8 @@ return {

 restrict:"E",

 templateUrl:"views/directives/_ellipsis-loader.html"

 };

-} ]), angular.module("openshiftConsole").directive("podStatusChart", [ "$timeout", "hashSizeFilter", "isTroubledPodFilter", "numContainersReadyFilter", "Logger", function(a, b, c, d, e) {

-var f = 0;

+} ]), angular.module("openshiftConsole").directive("podStatusChart", [ "$timeout", "hashSizeFilter", "isPullingImageFilter", "isTerminatingFilter", "isTroubledPodFilter", "numContainersReadyFilter", "Logger", function(a, b, c, d, e, f, g) {

+var h = 0;

 return {

 restrict:"E",

 scope:{

@@ -6769,32 +6769,35 @@ pods:"=",

 desired:"=?"

 },

 templateUrl:"views/_pod-status-chart.html",

-link:function(a, g) {

-function h() {

-var c, d = d3.select(g[0]).select("text.c3-chart-arcs-title"), f = b(a.pods);

-return d ? (c = angular.isNumber(a.desired) && a.desired !== f ? "scaling to " + a.desired + "..." :1 === f ? "pod" :"pods", d.selectAll("*").remove(), d.insert("tspan").text(f).classed("pod-count donut-title-big-pf", !0).attr("dy", 0).attr("x", 0), void d.insert("tspan").text(c).classed("donut-title-small-pf", !0).attr("dy", 20).attr("x", 0)) :void e.warn("Can't select donut title element");

+link:function(a, i) {

+function j() {

+var c, d = d3.select(i[0]).select("text.c3-chart-arcs-title"), e = b(a.pods);

+return d ? (c = angular.isNumber(a.desired) && a.desired !== e ? "scaling to " + a.desired + "..." :1 === e ? "pod" :"pods", d.selectAll("*").remove(), d.insert("tspan").text(e).classed("pod-count donut-title-big-pf", !0).attr("dy", 0).attr("x", 0), void d.insert("tspan").text(c).classed("donut-title-small-pf", !0).attr("dy", 20).attr("x", 0)) :void g.warn("Can't select donut title element");

 }

-function i(c) {

+function k(c) {

 var d = {

 columns:[]

 };

-angular.forEach(m, function(a) {

+angular.forEach(q, function(a) {

 d.columns.push([ a, c[a] || 0 ]);

-}), 0 === b(c) ? d.columns.push([ "Empty", 1 ]) :d.unload = "Empty", k ? k.load(d) :(l.data.columns = d.columns, k = c3.generate(l)), a.podStatusData = d.columns;

+}), 0 === b(c) ? d.columns.push([ "Empty", 1 ]) :d.unload = "Empty", o ? o.load(d) :(p.data.columns = d.columns, o = c3.generate(p)), a.podStatusData = d.columns;

 }

-function j() {

-var b = {}, e = function(a) {

-b[a] = (b[a] || 0) + 1;

-}, f = function(a) {

-var b = d(a), c = a.spec.containers.length;

+function l(a) {

+var b = f(a), c = a.spec.containers.length;

 return b === c;

-};

+}

+function m(a) {

+return d(a) ? "Terminating" :e(a) ? "Warning" :c(a) ? "Pulling" :"Running" !== a.status.phase || l(a) ? _.get(a, "status.phase", "Unknown") :"Not Ready";

+}

+function n() {

+var b = {};

 return angular.forEach(a.pods, function(a) {

-return c(a) ? void e("Warning") :"Running" !== a.status.phase || f(a) ? void e(a.status.phase) :void e("Not Ready");

+var c = m(a);

+b[c] = (b[c] || 0) + 1;

 }), b;

 }

-var k, l, m = [ "Running", "Not Ready", "Warning", "Failed", "Pending", "Succeeded", "Unknown" ];

-f++, a.chartId = "pods-donut-chart-" + f, l = {

+var o, p, q = [ "Running", "Not Ready", "Warning", "Failed", "Pulling", "Pending", "Succeeded", "Terminating", "Unknown" ];

+h++, a.chartId = "pods-donut-chart-" + h, p = {

 type:"donut",

 bindto:"#" + a.chartId,

 donut:{

@@ -6811,7 +6814,7 @@ width:150

 legend:{

 show:!1

 },

-onrendered:h,

+onrendered:j,

 tooltip:{

 format:{

 value:function(a, b, c) {

@@ -6825,9 +6828,12 @@ left:0

 };

 }

 },

+transition:{

+duration:350

+},

 data:{

 type:"donut",

-groups:[ m ],

+groups:[ q ],

 order:null,

 colors:{

 Empty:"#ffffff",

@@ -6835,16 +6841,22 @@ Running:"#00b9e4",

 "Not Ready":"#beedf9",

 Warning:"#f9d67a",

 Failed:"#d9534f",

-Pending:"#e8e8e8",

+Pulling:"#d1d1d1",

+Pending:"#ededed",

 Succeeded:"#3f9c35",

+Terminating:"#00659c",

 Unknown:"#f9d67a"

 },

 selection:{

 enabled:!1

 }

 }

-}, a.$watch(j, i, !0), a.$watch("desired", h), a.$on("destroy", function() {

-k && (k = k.destroy());

+};

+var r = _.debounce(k, 350, {

+maxWait:500

+});

+a.$watch(n, r, !0), a.$watch("desired", j), a.$on("destroy", function() {

+o && (o = o.destroy());

 });

 }

 };

@@ -7617,6 +7629,22 @@ return angular.forEach(a.status.containerStatuses, function(a) {

 b += a.restartCount;

 }), b;

 };

+}).filter("isTerminating", function() {

+return function(a) {

+return _.has(a, "metadata.deletionTimestamp");

+};

+}).filter("isPullingImage", function() {

+return function(a) {

+if (!a) return !1;

+var b = _.get(a, "status.phase");

+if ("Pending" !== b) return !1;

+var c = _.get(a, "status.containerStatuses");

+if (!c) return !1;

+var d = function(a) {

+return "ContainerCreating" === _.get(a, "state.waiting.reason");

+};

+return _.some(c, d);

+};

 }).filter("newestResource", function() {

 return function(a) {

 var b = null;

@@ -7840,7 +7868,18 @@ return b ? a + " " + b :a;

 });

 return d(a(b, c, !0));

 };

-} ]).filter("computeResourceLabel", function() {

+} ]).filter("humanizeSize", function() {

+return function(a) {

+if (null === a || void 0 === a || "" === a) return a;

+if (a = Number(a), 1024 > a) return a + " bytes";

+var b = a / 1024;

+if (1024 > b) return b.toFixed(1) + " KiB";

+var c = b / 1024;

+if (1024 > c) return c.toFixed(1) + " MiB";

+var d = c / 1024;

+return d.toFixed(1) + " GiB";

+};

+}).filter("computeResourceLabel", function() {

 return function(a, b) {

 switch (a) {

 case "cpu":

@@ -8416,6 +8455,9 @@ var _scriptsTemplatesJs = []byte(`angular.module('openshiftConsoleTemplates', []

     "<span ng-if=\"imagesByDockerReference[container.image]\">\n" +

     "<a ng-href=\"{{imagesByDockerReference[container.image].imageStreamName | navigateResourceURL : 'ImageStream' : imagesByDockerReference[container.image].imageStreamNamespace}}\">{{container.image | imageStreamName}}</a>\n" +

     "(<span title=\"{{imagesByDockerReference[container.image].metadata.name}}\">{{imagesByDockerReference[container.image].metadata.name | stripSHAPrefix | limitTo: 7}}</span>)\n" +

+    "<span ng-if=\"imagesByDockerReference[container.image].dockerImageMetadata.Size\" class=\"small text-muted nowrap\">\n" +

+    "{{imagesByDockerReference[container.image].dockerImageMetadata.Size | humanizeSize}}\n" +

+    "</span>\n" +

     "</span>\n" +

     "</div>\n" +

     "</div>\n" +