Reflect instance status in instance header.

spring-boot-admin-server-ui/package-lock.json

@@ -7352,9 +7352,9 @@
       }
     },
     "node-sass": {
-      "version": "4.8.2",
-      "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.8.2.tgz",
-      "integrity": "sha512-YQ9eAgtcSIqMGZO5BCIJRd/XCIz6cQuc8pChE3ZW0ANn2Yz0f2G0M6yqVg/1hXopScbJsmcyVt4ar7fJCmeldw==",
+      "version": "4.8.3",
+      "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.8.3.tgz",
+      "integrity": "sha512-tfFWhUsCk/Y19zarDcPo5xpj+IW3qCfOjVdHtYeG6S1CKbQOh1zqylnQK6cV3z9k80yxAnFX9Y+a9+XysDhhfg==",
       "dev": true,
       "requires": {
         "async-foreach": "0.1.3",
@@ -7369,7 +7369,7 @@
         "lodash.mergewith": "4.6.1",
         "meow": "3.7.0",
         "mkdirp": "0.5.1",
-        "nan": "2.9.2",
+        "nan": "2.10.0",
         "node-gyp": "3.6.2",
         "npmlog": "4.1.2",
         "request": "2.79.0",
@@ -7496,9 +7496,9 @@
           }
         },
         "nan": {
-          "version": "2.9.2",
-          "resolved": "https://registry.npmjs.org/nan/-/nan-2.9.2.tgz",
-          "integrity": "sha512-ltW65co7f3PQWBDbqVvaU1WtFJUsNW7sWWm4HINhbMQIyVyzIeyZ8toX5TC5eeooE6piZoaEh4cZkueSKG3KYw==",
+          "version": "2.10.0",
+          "resolved": "https://registry.npmjs.org/nan/-/nan-2.10.0.tgz",
+          "integrity": "sha512-bAdJv7fBLhWC+/Bls0Oza+mvTaNQtP+1RyhhhvD95pgUJz6XM5IzgmxOkItJ9tkoCiplvAnXI1tNmmUD/eScyA==",
           "dev": true
         },
         "qs": {
@@ -8716,9 +8716,9 @@
       }
     },
     "postcss-loader": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-2.1.2.tgz",
-      "integrity": "sha512-Hf7gcgJKlJivXZAMprvVq6m6t7lZSkiih4Sa7cOoCd8sEHGMnH/Yc0CbWT2cL1ag+XEKh6nsdpgF6yNHplpa9Q==",
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-2.1.3.tgz",
+      "integrity": "sha512-RuBcNE8rjCkIB0IsbmkGFRmQJTeQJfCI88E0VTarPNTvaNSv9OFv1DvTwgtAN/qlzyiELsmmmtX/tEzKp/cdug==",
       "dev": true,
       "requires": {
         "loader-utils": "1.1.0",

spring-boot-admin-server-ui/package.json

@@ -65,9 +65,9 @@
     "identity-obj-proxy": "^3.0.0",
     "jest": "^22.4.2",
     "lodash-webpack-plugin": "^0.11.4",
-    "node-sass": "^4.8.2",
+    "node-sass": "^4.8.3",
     "optimize-css-assets-webpack-plugin": "^3.2.0",
-    "postcss-loader": "^2.1.2",
+    "postcss-loader": "^2.1.3",
     "sass-loader": "^6.0.7",
     "style-loader": "^0.20.3",
     "url-loader": "^0.6.2",

spring-boot-admin-server-ui/src/main/frontend/views/applications/applications-list.vue

@@ -126,7 +126,22 @@
         if (this.selected !== application.name) {
           return 'is-selectable';
         }
-        return (application.status === 'UP' ? 'is-primary' : (application.status === 'RESTRICTED' ? 'is-warning' : 'is-danger'));
+        if (application.status === 'UP') {
+          return 'is-primary';
+        }
+        if (application.status === 'RESTRICTED') {
+          return 'is-warning';
+        }
+        if (application.status === 'DOWN') {
+          return 'is-danger';
+        }
+        if (application.status === 'OUT_OF_SERVICE') {
+          return 'is-danger';
+        }
+        if (application.status === 'OFFLINE') {
+          return 'is-light';
+        }
+        return 'is-light';
       },
       async unregister(item) {
         try {

spring-boot-admin-server-ui/src/main/frontend/views/instances/shell/header.vue

@@ -15,7 +15,7 @@
   -->
 
 <template>
-  <section class="hero is-primary instance-header" id="instance-menu">
+  <section class="hero instance-header" id="instance-menu">
     <div class="hero-body">
       <div class="container">
         <div class="columns">
@@ -25,10 +25,7 @@
               Instance <strong v-text="instance.id"/> (of <span v-text="application.instances.length"/>)
             </h2>
           </div>
-          <div class="column">
-            <sba-status v-if="instance" :status="instance.statusInfo.status"
-                        :date="instance.statusTimestamp"/>
-          </div>
+          <div class="column"/>
           <div class="column is-narrow is-hidden-mobile">
             <h2 class="subtitle is-6" v-if="instance">
               <a v-text="instance.registration.serviceUrl"
@@ -59,6 +56,6 @@
         type: Application,
         default: null
       }
-    }
+    },
   }
 </script>

spring-boot-admin-server-ui/src/main/frontend/views/instances/shell/index.vue

@@ -16,8 +16,8 @@
 
 <template>
   <div>
-    <sba-instance-header :instance="instance" :application="application"/>
-    <sba-instance-tabs :views="instanceViews" :instance="instance" :application="application"/>
+    <sba-instance-header :instance="instance" :application="application" :class="headerClass"/>
+    <sba-instance-tabs :views="instanceViews" :instance="instance" :application="application" :class="headerClass"/>
     <router-view v-if="instance" :instance="instance"/>
   </div>
 </template>
@@ -51,6 +51,27 @@
       },
       instanceViews() {
         return this.$root.views.filter(view => view.name.lastIndexOf('instance/') === 0);
+      },
+      headerClass() {
+        if (!this.instance) {
+          return '';
+        }
+        if (this.instance.statusInfo.status === 'UP') {
+          return 'is-primary';
+        }
+        if (this.instance.statusInfo.status === 'RESTRICTED') {
+          return 'is-warning';
+        }
+        if (this.instance.statusInfo.status === 'DOWN') {
+          return 'is-danger';
+        }
+        if (this.instance.statusInfo.status === 'OUT_OF_SERVICE') {
+          return 'is-danger';
+        }
+        if (this.instance.statusInfo.status === 'OFFLINE') {
+          return 'is-light';
+        }
+        return 'is-light';
       }
     }
   }

spring-boot-admin-server-ui/src/main/frontend/views/instances/shell/tabs.vue

@@ -15,7 +15,7 @@
   -->
 
 <template>
-  <section class="hero is-primary instance-tabs">
+  <section class="hero instance-tabs">
     <div class="hero-foot">
       <div class="container">
         <div class="level">

spring-boot-admin-server-ui/src/main/frontend/views/wallboard/hex-mesh.vue

@@ -194,28 +194,15 @@
       transition: all $easing 250ms;
     }
 
-    &.is-primary polygon {
-      fill: $primary;
-      fill-opacity: 0.3;
-      stroke: $primary;
-      stroke-opacity: 0.95;
-      stroke-width: 1.5;
-    }
-
-    &.is-danger polygon {
-      fill: $danger;
-      fill-opacity: 0.3;
-      stroke: $danger;
-      stroke-opacity: 0.95;
-      stroke-width: 1.5;
-    }
-
-    &.is-warning polygon {
-      fill: $warning;
-      fill-opacity: 0.3;
-      stroke: $warning;
-      stroke-opacity: 0.95;
-      stroke-width: 1.5;
+    @each $name, $pair in $colors {
+      &.is-#{$name} polygon {
+        $color: nth($pair, 1);
+        fill: $color;
+        fill-opacity: 0.3;
+        stroke: $color;
+        stroke-opacity: 0.95;
+        stroke-width: 1.5;
+      }
     }
 
     &.is-selectable:hover {

spring-boot-admin-server-ui/src/main/frontend/views/wallboard/index.vue

@@ -48,10 +48,25 @@
     },
     methods: {
       classForApplication(application) {
-        if (application) {
-          return 'is-selectable ' + (application.status === 'UP' ? 'is-primary' : (application.status === 'RESTRICTED' ? 'is-warning' : 'is-danger'));
+        if (!application) {
+          return null;
         }
-        return null;
+        if (application.status === 'UP') {
+          return 'is-selectable is-primary';
+        }
+        if (application.status === 'RESTRICTED') {
+          return 'is-selectable is-warning';
+        }
+        if (application.status === 'DOWN') {
+          return 'is-selectable is-danger';
+        }
+        if (application.status === 'OUT_OF_SERVICE') {
+          return 'is-selectable is-danger';
+        }
+        if (application.status === 'OFFLINE') {
+          return 'is-selectable is-light';
+        }
+        return 'is-selectable is-light';
       },
       select(application) {
         this.$router.push({name: 'applications', params: {selected: application.name}});