feat(containers): show health status of containers (#622)

app/components/container/container.html

@@ -82,6 +82,35 @@
   </div>
 </div>
 
+<div ng-if="container.State.Health" class="row">
+  <div class="col-lg-12 col-md-12 col-xs-12">
+    <rd-widget>
+      <rd-widget-header icon="fa-server" title="Container health"></rd-widget-header>
+      <rd-widget-body classes="no-padding">
+        <table class="table">
+          <tbody>
+            <tr>
+              <td>Status</td>
+              <td>
+                <i ng-class="{'healthy': 'fa fa-heartbeat space-right green-icon', 'unhealthy': 'fa fa-heartbeat space-right red-icon', 'starting': 'fa fa-heartbeat space-right orange-icon'}[container.State.Health.Status]"></i>
+                {{ container.State.Health.Status }}
+              </td>
+            </tr>
+            <tr>
+              <td>Failure count</td>
+              <td>{{ container.State.Health.FailingStreak }}</td>
+            </tr>
+            <tr>
+              <td>Last output</td>
+              <td>{{ container.State.Health.Log[container.State.Health.Log.length - 1].Output }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </rd-widget-body>
+    </rd-widge>
+  </div>
+</div>
+
 <div class="row">
   <div class="col-lg-12 col-md-12 col-xs-12">
     <rd-widget>

app/components/containers/containers.html

@@ -102,7 +102,10 @@
           <tbody>
             <tr dir-paginate="container in (state.filteredContainers = ( containers | filter:state.filter | orderBy:sortType:sortReverse | itemsPerPage: state.pagination_count))">
               <td><input type="checkbox" ng-model="container.Checked" ng-change="selectItem(container)"/></td>
-              <td><span class="label label-{{ container.Status|containerstatusbadge }}">{{ container.Status }}</span></td>
+              <td>
+                <span ng-if="['starting','healthy','unhealthy'].indexOf(container.Status) !== -1" class="label label-{{ container.Status|containerstatusbadge }} interactive" uib-tooltip="This container has a health check">{{ container.Status }}</span>
+                <span ng-if="['starting','healthy','unhealthy'].indexOf(container.Status) === -1" class="label label-{{ container.Status|containerstatusbadge }}">{{ container.Status }}</span>
+              </td>
               <td ng-if="applicationState.endpoint.mode.provider === 'DOCKER_SWARM'"><a ui-sref="container({id: container.Id})">{{ container|swarmcontainername|truncate: 40}}</a></td>
               <td ng-if="applicationState.endpoint.mode.provider !== 'DOCKER_SWARM'"><a ui-sref="container({id: container.Id})">{{ container|containername|truncate: 40}}</a></td>
               <td><a ui-sref="image({id: container.Image})">{{ container.Image | hideshasum }}</a></td>

app/filters/filters.js

@@ -40,11 +40,11 @@ angular.module('portainer.filters', [])
   'use strict';
   return function (text) {
     var status = _.toLower(text);
-    if (status.indexOf('paused') !== -1) {
+    if (status.indexOf('paused') !== -1 || status.indexOf('starting') !== -1) {
       return 'warning';
     } else if (status.indexOf('created') !== -1) {
       return 'info';
-    } else if (status.indexOf('stopped') !== -1) {
+    } else if (status.indexOf('stopped') !== -1 || status.indexOf('unhealthy') !== -1) {
       return 'danger';
     }
     return 'success';
@@ -60,6 +60,12 @@ angular.module('portainer.filters', [])
       return 'created';
     } else if (status.indexOf('exited') !== -1) {
       return 'stopped';
+    } else if (status.indexOf('(healthy)') !== -1) {
+      return 'healthy';
+    } else if (status.indexOf('(unhealthy)') !== -1) {
+      return 'unhealthy';
+    } else if (status.indexOf('(health: starting)') !== -1) {
+      return 'starting';
     }
     return 'running';
   };

assets/css/app.css

@@ -115,6 +115,10 @@ a[ng-click]{
   color: #ae2323;
 }
 
+.fa.orange-icon {
+  color: #f0ad4e;
+}
+
 .fa.white-icon {
   color: white;
 }