feat: implement ability to override serviceUrl and set hideUrl per instance (#4591)

Author: SteKoe

spring-boot-admin-client/src/test/resources/application.yml

@@ -0,0 +1,2 @@
+server:
+  shutdown: immediate

spring-boot-admin-samples/spring-boot-admin-sample-servlet/src/main/resources/application.yml

@@ -34,17 +34,34 @@ management:
         enabled: true
     health:
       show-details: ALWAYS
+  server:
+    port: 9999
+
 
 spring:
   application:
     name: spring-boot-admin-sample-servlet
+  cloud:
+    discovery:
+      client:
+        simple:
+          instances:
+            SBA:
+              - uri: http://localhost:9999
+                metadata:
+                  management.context-path: /actuator
+                  service-url: http://localhost:8080
+                  service-path: /
   boot:
     admin:
       client:
         url: http://localhost:8080
         instance:
           service-host-type: IP
           metadata:
+            service-path: /foo
+            service-url: http://localhost:8080
+            hide-url: true
             tags:
               environment: test
               de-service-test-1: A large content

spring-boot-admin-server-cloud/src/test/resources/application.yml

@@ -0,0 +1,2 @@
+server:
+  shutdown: immediate

spring-boot-admin-server-ui/src/main/frontend/components/sba-button.vue

@@ -1,58 +1,101 @@
 <template>
-  <button
+  <component
+    :is="as"
     class="btn relative"
-    :class="cssClasses"
-    :disabled="disabled === true"
-    :title="title"
-    @click="$emit('click', $event)"
+    v-bind="componentAttrs"
+    @click="handleClick"
   >
     <slot />
-  </button>
+  </component>
 </template>
 
-<script>
-export default {
-  name: 'SbaButton',
-  props: {
-    title: {
-      type: String,
-      default: '',
-    },
-    size: {
-      type: String,
-      default: 'sm',
-      validate(value) {
-        return ['xs', 'sm', 'base'].includes(value);
-      },
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    primary: {
-      type: Boolean,
-      default: false,
+<script setup>
+import classNames from 'classnames';
+import { computed, useAttrs } from 'vue';
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+  as: {
+    type: String,
+    default: 'button',
+    validator(value) {
+      return ['a', 'button'].includes(value);
     },
   },
-  emits: ['click'],
-  computed: {
-    cssClasses() {
-      return {
-        'px-2 py-2 text-xs': this.size === 'xs',
-        'px-3 py-2': this.size === 'sm',
-        'px-4 py-3': this.size === 'base',
-        'px-5 py-2.5': this.size === '',
-        // Types
-        'is-primary': this.primary === true,
-      };
+  href: {
+    type: String,
+    default: null,
+  },
+  size: {
+    type: String,
+    default: 'sm',
+    validator(value) {
+      return ['xs', 'sm', 'base'].includes(value);
     },
   },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  primary: {
+    type: Boolean,
+    default: false,
+  },
+});
+const attrs = useAttrs();
+
+const cssClasses = computed(() => {
+  return {
+    'px-1 py-0 text-xs': props.size === '2xs',
+    'px-2 py-2 text-xs': props.size === 'xs',
+    'px-3 py-2': props.size === 'sm',
+    'px-4 py-3': props.size === 'base',
+    'px-5 py-2.5': props.size === '',
+    // Types
+    'is-primary': props.primary === true,
+  };
+});
+
+const componentAttrs = computed(() => {
+  const common = {
+    ...attrs,
+    title: props.title,
+    class: classNames(attrs.class, cssClasses.value),
+  };
+
+  if (props.as === 'a') {
+    return {
+      ...common,
+      href: props.href,
+    };
+  }
+  if (props.as === 'button') {
+    return {
+      ...common,
+      disabled: props.disabled === true,
+      type: props.type,
+    };
+  }
+  return {};
+});
+
+const emit = defineEmits(['click']);
+const handleClick = (event) => {
+  if (props.as === 'button') {
+    emit('click', event);
+  }
+  if (props.as === 'a') {
+    event.stopPropagation();
+  }
 };
 </script>
 
 <style scoped>
 .btn {
-  @apply rounded-l rounded-r font-medium text-sm text-center text-black border-gray-300 border border-gray-300 bg-white;
+  @apply rounded-l rounded-r font-medium text-sm text-center text-black border-gray-300 border bg-white;
   @apply focus:ring-2 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500;
   @apply hover:bg-gray-100;
 }

spring-boot-admin-server-ui/src/main/frontend/components/sba-tag.vue

@@ -4,7 +4,7 @@
       'py-1 border border-gray-300 bg-white': !small,
       'py-1 border text-xs bg-white': small,
     }"
-    class="inline-flex leading-none rounded shadow-sm text-sm overflow-hidden"
+    class="inline-flex leading-none rounded text-sm overflow-hidden"
   >
     <span
       v-if="label"

spring-boot-admin-server-ui/src/main/frontend/services/instance.ts

@@ -59,6 +59,10 @@ class Instance {
     registerErrorToastInterceptor(this.axios);
   }
 
+  get metadata() {
+    return this.registration.metadata;
+  }
+
   get isUnregisterable() {
     return this.registration.source === 'http-api';
   }

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

@@ -5,7 +5,7 @@
         :title="$t('applications.actions.journal')"
         @click.stop="navigate"
       >
-        <font-awesome-icon icon="history" />
+        <font-awesome-icon :icon="faHistory" />
       </sba-button>
     </router-link>
     <sba-button
@@ -15,7 +15,7 @@
       @click.stop="$emit('filter-settings', item)"
     >
       <font-awesome-icon
-        :icon="hasActiveNotificationFilter ? 'bell-slash' : 'bell'"
+        :icon="hasActiveNotificationFilter ? faBellSlash : faBell"
       />
     </sba-button>
     <sba-button
@@ -24,27 +24,35 @@
       :title="$t('applications.actions.unregister')"
       @click.stop="actionHandler.unregister(item)"
     >
-      <font-awesome-icon :icon="'trash'" />
+      <font-awesome-icon :icon="faTrash" />
     </sba-button>
     <sba-button
       v-if="item.hasEndpoint('restart')"
       :title="$t('applications.actions.restart')"
       @click.stop="actionHandler.restart(item)"
     >
-      <font-awesome-icon icon="undo-alt" />
+      <font-awesome-icon :icon="faUndoAlt" />
     </sba-button>
     <sba-button
       v-if="item.hasEndpoint('shutdown')"
       :title="$t('applications.actions.shutdown')"
       class="is-danger btn-shutdown"
       @click.stop="actionHandler.shutdown(item)"
     >
-      <font-awesome-icon :icon="['fa', 'power-off']" />
+      <font-awesome-icon :icon="faPowerOff" />
     </sba-button>
   </sba-button-group>
 </template>
 
 <script lang="ts" setup>
+import {
+  faBell,
+  faBellSlash,
+  faHistory,
+  faPowerOff,
+  faTrash,
+  faUndoAlt,
+} from '@fortawesome/free-solid-svg-icons';
 import { useNotificationCenter } from '@stekoe/vue-toast-notificationcenter';
 import { inject } from 'vue';
 import { useI18n } from 'vue-i18n';

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

@@ -33,17 +33,41 @@
         <div class="flex gap-2 items-center">
           <div class="flex-1">
             <template v-if="instance.showUrl()">
-              <a
-                :href="
-                  instance.registration.serviceUrl ||
-                  instance.registration.healthUrl
-                "
-                @click.stop
+              <span
                 v-text="
                   instance.registration.serviceUrl ||
                   instance.registration.healthUrl
                 "
               />
+              <div class="ml-1 inline-flex gap-1">
+                <sba-button
+                  as="a"
+                  :href="instance.registration.serviceUrl"
+                  size="2xs"
+                  referrerpolicy="no-referrer"
+                  target="_blank"
+                >
+                  <font-awesome-icon :icon="faHome" size="xs" />
+                </sba-button>
+                <sba-button
+                  as="a"
+                  :href="instance.registration.managementUrl"
+                  size="2xs"
+                  referrerpolicy="no-referrer"
+                  target="_blank"
+                >
+                  <font-awesome-icon :icon="faClipboardList" size="xs" />
+                </sba-button>
+                <sba-button
+                  as="a"
+                  :href="instance.registration.healthUrl"
+                  size="2xs"
+                  referrerpolicy="no-referrer"
+                  target="_blank"
+                >
+                  <font-awesome-icon :icon="faHeart" size="xs" />
+                </sba-button>
+              </div>
               <sba-tag
                 v-if="instance.registration.metadata?.['group']"
                 class="ml-2"
@@ -77,9 +101,16 @@
 </template>
 
 <script lang="ts" setup>
+import {
+  faClipboardList,
+  faHeart,
+  faHome,
+} from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import { PropType } from 'vue';
 import { useRouter } from 'vue-router';
 
+import SbaButton from '@/components/sba-button.vue';
 import SbaStatus from '@/components/sba-status.vue';
 import SbaTag from '@/components/sba-tag.vue';
 import SbaTags from '@/components/sba-tags.vue';