display application metadata in instance detail page

spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-metadata.vue

+<!--
+  - Copyright 2014-2018 the original author or authors.
+  -
+  - Licensed under the Apache License, Version 2.0 (the "License");
+  - you may not use this file except in compliance with the License.
+  - You may obtain a copy of the License at
+  -
+  -     http://www.apache.org/licenses/LICENSE-2.0
+  -
+  - Unless required by applicable law or agreed to in writing, software
+  - distributed under the License is distributed on an "AS IS" BASIS,
+  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  - See the License for the specific language governing permissions and
+  - limitations under the License.
+  -->
+
+<template>
+    <sba-panel title="Metadata">
+        <div class="content metadata" v-if="metadata">
+            <table class="table" v-if="!isEmptyMetadata">
+                <tr v-for="(value, key) in metadata" :key="key">
+                    <td class="metadata__key" v-text="key"></td>
+                    <td>
+                        <sba-formatted-obj :value="value"></sba-formatted-obj>
+                    </td>
+                </tr>
+            </table>
+            <p v-else class="is-muted">No metadata provided.</p>
+        </div>
+    </sba-panel>
+</template>
+
+<script>
+  export default {
+    props: ['instance'],
+    computed: {
+      metadata() {
+        return this.instance.registration.metadata;
+      },
+      isEmptyMetadata() {
+        return Object.keys(this.metadata).length <= 0;
+      }
+    },
+  }
+</script>
+
+<style lang="scss">
+    .metadata {
+        overflow: auto;
+
+        &__key {
+            vertical-align: top;
+        }
+    }
+</style>

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

@@ -29,6 +29,7 @@
             <div class="columns is-desktop">
                 <div class="column is-half-desktop">
                     <details-info v-if="hasInfo" :instance="instance"></details-info>
+                    <details-metadata v-if="hasMetadata" :instance="instance"></details-metadata>
                 </div>
                 <div class="column is-half-desktop">
                     <details-health :instance="instance"></details-health>
@@ -72,6 +73,7 @@
   import detailsMemory from './details-memory';
   import detailsProcess from './details-process';
   import detailsThreads from './details-threads';
+  import detailsMetadata from './details-metadata';
 
   export default {
     components: {
@@ -82,7 +84,8 @@
       detailsDatasources,
       detailsMemory,
       detailsGc,
-      detailsCaches
+      detailsCaches,
+      detailsMetadata
     },
     props: ['instance'],
     data: () => ({
@@ -112,6 +115,9 @@
       hasThreads() {
         return this.metrics.indexOf('jvm.threads.live') >= 0;
       },
+      hasMetadata() {
+        return this.instance && this.instance.registration && this.instance.registration.metadata;
+      }
     },
     created() {
       this.fetchMetricIndex();
@@ -137,4 +143,4 @@
       }
     }
   }
-</script>
\ No newline at end of file
+</script>