dashboard: show pending admin checklist in apps list/grid

dashboard/src/theme.scss

@@ -534,6 +534,27 @@ textarea {
     }
 }
 
+.app-checklist-badge {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    left: calc(50% - 12px);
+    top: -12px;
+    font-size: 14px;
+    height: 24px;
+    width: 24px;
+    color: white;
+    cursor: pointer;
+    background-color: $brand-danger;
+    border-radius: 34px;
+    transition: all 100ms ease-out;
+
+    &:hover {
+        transform: scale(1.4);
+    }
+}
+
 .app-postinstall-message {
     max-height: 500px;
     overflow-x: none;

dashboard/src/views/apps.html

@@ -198,11 +198,15 @@
               </div>
 
             </a>
+          </div>
 
-            <!-- we check the version here because the box updater does not know when an app gets updated -->
-            <div class="app-update-badge" ng-click="showAppConfigure(app, 'updates')" ng-show="config.update[app.id].manifest.version && config.update[app.id].manifest.version !== app.manifest.version && (app | installSuccess) && !(app.error || app.runState === 'stopped')">
-              <i class="fa fa-arrow-up fa-inverse"></i>
-            </div>
+          <!-- we check the version here because the box updater does not know when an app gets updated -->
+          <div class="app-update-badge" ng-click="showAppConfigure(app, 'updates')" ng-show="config.update[app.id].manifest.version && config.update[app.id].manifest.version !== app.manifest.version && (app | installSuccess) && !(app.error || app.runState === 'stopped')" uib-tooltip="Update Available">
+            <i class="fa fa-arrow-up fa-inverse"></i>
+          </div>
+
+          <div class="app-checklist-badge" ng-click="showAppConfigure(app, 'info')" ng-show="hasPendingChecklistItems(app)" uib-tooltip="Pending Admin Checklist">
+            <i class="fa fa-info fa-inverse"></i>
           </div>
         </div>
       </div>
@@ -247,6 +251,7 @@
               <td class="elide-table-cell hide-mobile">{{ app | installationStateLabel }}</td>
               <td class="elide-table-cell text-right">
                 <span ng-show="isOperator(app)">
+                  <a class="btn btn-xs btn-danger" style="padding: 1px 7px;" ng-show="hasPendingChecklistItems(app)" ng-href="#/app/{{ app.id}}/info" uib-tooltip="Pending Admin Checklist"><i class="fa fa-info"></i></a>
                   <a class="btn btn-xs btn-success" style="padding: 1px 7px;" ng-show="config.update[app.id].manifest.version && config.update[app.id].manifest.version !== app.manifest.version && (app | installSuccess) && !(app.error || app.runState === 'stopped')" ng-href="#/app/{{ app.id}}/updates" uib-tooltip="Update Available"><i class="fa fa-arrow-up"></i></a>
 
                   <a class="btn btn-xs btn-default" ng-show="app.type !== APP_TYPES.PROXIED && app.type !== APP_TYPES.LINK" ng-href="{{ '/frontend/terminal.html?id=' + app.id }}" target="_blank" uib-tooltip="{{ 'app.terminalActionTooltip' | tr }}"><i class="fa fa-terminal"></i></a>

dashboard/src/views/apps.js

@@ -54,6 +54,11 @@ angular.module('Application').controller('AppsController', ['$scope', '$translat
         if (tr['app.states.updateAvailable']) $scope.states[3].label = tr['app.states.updateAvailable'];
     });
 
+    $scope.hasPendingChecklistItems = function (app) {
+        if (!app.checklist) return false;
+        return !!Object.keys(app.checklist).find(function (key) { return !app.checklist[key].acknowledged; });
+    };
+
     $scope.setOrderBy = function (by) {
         if (by === $scope.orderBy) {
             $scope.orderByReverse = !$scope.orderByReverse;