Show total instance count in detail instance header

Author: joshiste

pom.xml

@@ -27,7 +27,7 @@
  <url>https://github.com/codecentric/spring-boot-admin/</url>
  <properties>
  <revision>2.0.0-SNAPSHOT</revision>
- <spring-boot.version>2.0.0.RC2</spring-boot.version>
+ <spring-boot.version>2.0.0.RELEASE</spring-boot.version>
  <spring-cloud.version>Finchley.M7</spring-cloud.version>
  <hazelcast-tests.version>3.9.2</hazelcast-tests.version>
  <java.version>1.8</java.version>

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

@@ -10,9 +10,9 @@
  },
  "dependencies": {
  "@fortawesome/fontawesome": "^1.1.4",
- "@fortawesome/fontawesome-free-brands": "^5.0.7",
- "@fortawesome/fontawesome-free-regular": "^5.0.7",
- "@fortawesome/fontawesome-free-solid": "^5.0.7",
+ "@fortawesome/fontawesome-free-brands": "^5.0.8",
+ "@fortawesome/fontawesome-free-regular": "^5.0.8",
+ "@fortawesome/fontawesome-free-solid": "^5.0.8",
  "@fortawesome/vue-fontawesome": "0.0.22",
  "axios": "^0.18.0",
  "bulma": "^0.6.2",
@@ -49,15 +49,15 @@
  "babel-preset-stage-2": "^6.24.1",
  "clean-webpack-plugin": "^0.1.18",
  "cross-env": "^5.1.3",
- "css-hot-loader": "^1.3.7",
+ "css-hot-loader": "^1.3.8",
  "css-loader": "^0.28.10",
  "css-mqpacker": "^6.0.2",
  "eslint": "^4.18.1",
  "eslint-loader": "^1.9.0",
  "eslint-plugin-html": "^4.0.2",
  "eslint-plugin-vue": "^4.3.0",
  "extract-text-webpack-plugin": "^3.0.2",
- "file-loader": "^1.1.10",
+ "file-loader": "^1.1.11",
  "glob": "^7.1.2",
  "html-loader": "^0.5.5",
  "html-webpack-plugin": "^2.30.0",
@@ -75,7 +75,7 @@
  "vue-svg-loader": "^0.5.0",
  "vue-template-compiler": "^2.5.13",
  "webpack": "^3.11.0",
- "webpack-bundle-analyzer": "^2.11.0"
+ "webpack-bundle-analyzer": "^2.11.1"
  },
  "browserslist": [
  "> 2%",

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

@@ -59,7 +59,12 @@ new Vue({
  router,
  el: '#app',
  render(h) {
- return h(sbaShell);
+ return h(sbaShell, {
+ props: {
+ applications: this.applications,
+ error: this.error
+ }
+ });
  },
  data: {
  views: createViews(router),

spring-boot-admin-server-ui/src/main/frontend/index.js

@@ -26,6 +26,10 @@ class Application {
  this.name = name;
  }
 
+ findInstance(instanceId) {
+ return this.instances.find(instance => instance.id === instanceId);
+ }
+
  get isUnregisterable() {
  return this.instances.findIndex(i => i.isUnregisterable) >= 0;
  }
@@ -77,4 +81,4 @@ class Application {
  }
 }
 
-export default Application;
+export default Application;

spring-boot-admin-server-ui/src/main/frontend/services/application.js

@@ -19,17 +19,29 @@ import {Observable} from '@/utils/rxjs';
 export default class {
  constructor() {
  this.applications = [];
+ this.applications.findInstance = (instanceId) => {
+ for (let application of this.applications) {
+ const instance = application.findInstance(instanceId);
+ if (instance) {
+ return instance;
+ }
+ }
+ return undefined;
+ };
+ this.applications.findApplicationForInstance = (instanceId) => {
+ return this.applications.find(application => !!application.findInstance(instanceId));
+ };
+ this.applications.indexOfApplication = (name) => {
+ return this.applications.findIndex(application => application.name === name);
+ };
+
  this._listeners = {
  added: [],
  updated: [],
  removed: []
  };
  }
 
- indexOf(name) {
- return this.applications.findIndex(application => application.name === name);
- }
-
  addEventListener(type, listener) {
  if (!(type in this._listeners)) {
  this._listeners[type] = [];
@@ -68,7 +80,7 @@ export default class {
  .delay(5000)
  ).subscribe({
  next: application => {
- const idx = this.indexOf(application.name);
+ const idx = this.applications.indexOfApplication(application.name);
  if (idx >= 0) {
  const oldApplication = this.applications[idx];
  if (application.instances.length > 0) {
@@ -95,4 +107,4 @@ export default class {
  }
  }
  }
-}
+}

spring-boot-admin-server-ui/src/main/frontend/store.js

@@ -30,12 +30,19 @@
  import logoOk from '@/assets/img/favicon.png';
 
  export default {
- computed: {
- error() {
- return this.$root.error;
+ props: {
+ applications: {
+ type: Array,
+ default: () => [],
  },
+ error: {
+ type: Object,
+ default: null
+ }
+ },
+ computed: {
  downCount() {
- return this.$root.applications.reduce((current, next) => {
+ return this.applications.reduce((current, next) => {
  return current + (next.instances.filter(instance => instance.statusInfo.status !== 'UP').length);
  }, 0);
  }

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

@@ -67,16 +67,20 @@
  import handle from './handle';
 
  const component = {
+ props: {
+ applications: {
+ type: Array,
+ default: () => [],
+ },
+ error: {
+ type: Object,
+ default: null
+ }
+ },
  components: {
  applicationsList,
  },
  computed: {
- applications() {
- return this.$root.applications;
- },
- error() {
- return this.$root.error;
- },
  statusGroups() {
  const byStatus = _.groupBy(this.applications, application => application.status);
  const list = _.transform(byStatus, (result, value, key) => {

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

@@ -21,7 +21,9 @@
  <div class="columns">
  <div class="column is-narrow">
  <h1 class="title" v-if="instance" v-text="instance.registration.name"/>
- <h2 class="subtitle" v-if="instance" v-text="instance.id"/>
+ <h2 class="subtitle" v-if="instance">
+ 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"
@@ -44,13 +46,18 @@
 </template>
 
 <script>
+ import Application from '@/services/application';
  import Instance from '@/services/instance';
 
  export default {
  props: {
  instance: {
  type: Instance,
  default: null
+ },
+ application: {
+ type: Application,
+ default: null
  }
  }
  }

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

@@ -16,14 +16,13 @@
 
 <template>
  <div>
- <sba-instance-header :instance="instance"/>
- <sba-instance-tabs :views="instanceViews" :instance="instance"/>
+ <sba-instance-header :instance="instance" :application="application"/>
+ <sba-instance-tabs :views="instanceViews" :instance="instance" :application="application"/>
  <router-view v-if="instance" :instance="instance"/>
  </div>
 </template>
 
 <script>
- import instance from '@/services/instance'
  import sbaInstanceHeader from './header';
  import sbaInstanceTabs from './tabs';
 
@@ -33,19 +32,26 @@
  instanceId: {
  type: String,
  required: true
+ },
+ applications: {
+ type: Array,
+ default: () => [],
+ },
+ error: {
+ type: Object,
+ default: null
  }
  },
- data: () => ({
- instance: null
- }),
  computed: {
+ instance() {
+ return this.applications.findInstance(this.instanceId);
+ },
+ application() {
+ return this.applications.findApplicationForInstance(this.instanceId);
+ },
  instanceViews() {
  return this.$root.views.filter(view => view.name.lastIndexOf('instance/') === 0);
  }
- },
- async created() {
- const res = await instance.get(this.instanceId);
- this.instance = res.data;
  }
  }
 </script>