statusInfo.tpl.html

<span class="status-{{$ctrl.statusInfo.status}}" ng-bind="$ctrl.statusInfo.status" ng-mouseenter="$ctrl.showPopover=true"
  ng-mouseleave="$ctrl.showPopover=false"></span>
<sba-popover popover-toggle="$ctrl.showPopover">
  <table class="table cable-condensed">
    <tr ng-repeat="detail in $ctrl.details | orderBy:'name'">
      <td style="text-transform: capitalize;" ng-bind="detail.name"></td>
      <td ng-bind="detail.status" class="status-{{detail.status}}"></td>
    </tr>
  </table>
  <div style="max-width: 400px;" class="alert alert-error" ng-if="$ctrl.statusInfo.details.message || $ctrl.statusInfo.details.error">
    <b style="word-break: break-all;" ng-if="$ctrl.statusInfo.details.status" ng-bind="$ctrl.statusInfo.details.status + ' ' + $ctrl.statusInfo.details.error"></b>
    <b style="word-break: break-all;" ng-if="$ctrl.statusInfo.details.exception" ng-bind="$ctrl.statusInfo.details.exception + ':'"></b><br>
    <span ng-bind="$ctrl.statusInfo.details.message"></span>
  </div>
  <small class="pull-right muted" ng-bind="$ctrl.statusInfo.timestamp | date:'dd.MM.yyyy HH:mm:ss'"></small>
</sba-popover>