dashboard: improve app list view layout

dashboard/src/js/index.js

@@ -305,6 +305,36 @@ app.filter('installationActive', function () {
     };
 });
 
+// color indicator in app list
+app.filter('installationStateClass', function () {
+    const ERROR_CLASS = 'status-error';
+    const BUSY_CLASS = 'status-starting fa-beat-fade';
+    const INACTIVE_CLASS = 'status-inactive';
+    const ACTIVE_CLASS = 'status-active';
+
+    return function(app) {
+        if (!app) return '';
+
+        switch (app.installationState) {
+        case ISTATES.ERROR: return ERROR_CLASS;
+        case ISTATES.INSTALLED: {
+            if (app.debugMode) {
+                return INACTIVE_CLASS;
+            } else {
+                if (app.runState === RSTATES.RUNNING) {
+                    if (!app.health) return BUSY_CLASS; // no data yet
+                    if (app.type === APP_TYPES.LINK || app.health === HSTATES.HEALTHY) return ACTIVE_CLASS;
+                    return ERROR_CLASS; // dead/exit/unhealthy
+                } else {
+                    return INACTIVE_CLASS;
+                }
+            }
+        }
+        default: return BUSY_CLASS;
+        }
+    };
+});
+
 // this appears in the app grid
 app.filter('installationStateLabel', function () {
     return function(app) {