feat(#4700): add custom links on instance level via metadata (#4733)

Author: SteKoe

spring-boot-admin-docs/src/site/docs/client/80-configuration.md

@@ -16,11 +16,12 @@ a unified configuration approach across your entire system.
 
 __Instance metadata options__
 
-| Property name                   | Description                                                                                                                          |
-|---------------------------------|--------------------------------------------------------------------------------------------------------------------------------------|
-| `tags.*`                        | Tags as key-value-pairs to be associated with this instance.                                                                         |
-| `group`                         | Assign a group name. Used in UI to aggregate instances not by application but by assigned group.                                     |
-| `hide-url`                      | Hide URLs of the instance in UI. Useful, when running in a cluster, exposing a non routable URL.                                     |
-| `disable-url`                   | Disables links of this instance in UI. Useful, when the URL does not point to a UI.                                                  |
-| `service-url`                   | Override the service url of the registered service. Allows to specify the actual URL to the UI. This does not affect management url. |
-| `user.name`<br/>`user.password` | Credentials being used to access the endpoints.                                                                                      |
+| Property name                                                                      | Description                                                                                                                                         |
+|------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------|
+| `disable-url`                                                                      | Disables links of this instance in UI. Useful, when the URL does not point to a UI.                                                                 |
+| `group`                                                                            | Assign a group name. Used in UI to aggregate instances not by application but by assigned group.                                                    |
+| `hide-url`                                                                         | Hide URLs of the instance in UI. Useful, when running in a cluster, exposing a non routable URL.                                                    |
+| `service-url`                                                                      | Override the service url of the registered service. Allows to specify the actual URL to the UI. This does not affect management url.                |
+| `sidebar.links.N.label` <br/> `sidebar.links.N.url` <br/> `sidebar.links.N.iframe` | **label:** Shown in sidebar <br/>**url:** URL used as href in link or iframe. <br/> **iframe:** boolean value that allows to include URL as iframe. |
+| `tags.*`                                                                           | Tags as key-value-pairs to be associated with this instance.                                                                                        |
+| `user.name`<br/>`user.password`                                                    | Credentials being used to access the endpoints.                                                                                                     |

spring-boot-admin-samples/spring-boot-admin-sample-custom-ui/src/index.js

@@ -84,7 +84,7 @@ SBA.viewRegistry.addView({
 SBA.viewRegistry.setGroupIcon(
   "custom", //<1>
   `<svg xmlns='http://www.w3.org/2000/svg'
-        class='h-5  mr-3'
+        class='h-5 mr-3'
         viewBox='0 0 576 512'><path d='M512 80c8.8 0 16 7.2 16 16V416c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V96c0-8.8 7.2-16 16-16H512zM64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H512c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM200 208c14.2 0 27 6.1 35.8 16c8.8 9.9 24 10.7 33.9 1.9s10.7-24 1.9-33.9c-17.5-19.6-43.1-32-71.5-32c-53 0-96 43-96 96s43 96 96 96c28.4 0 54-12.4 71.5-32c8.8-9.9 8-25-1.9-33.9s-25-8-33.9 1.9c-8.8 9.9-21.6 16-35.8 16c-26.5 0-48-21.5-48-48s21.5-48 48-48zm144 48c0-26.5 21.5-48 48-48c14.2 0 27 6.1 35.8 16c8.8 9.9 24 10.7 33.9 1.9s10.7-24 1.9-33.9c-17.5-19.6-43.1-32-71.5-32c-53 0-96 43-96 96s43 96 96 96c28.4 0 54-12.4 71.5-32c8.8-9.9 8-25-1.9-33.9s-25-8-33.9 1.9c-8.8 9.9-21.6 16-35.8 16c-26.5 0-48-21.5-48-48z'/>
   </svg>` //<2>
 );

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

@@ -1,4 +1,3 @@
-/* eslint-disable no-undef */
 class HealthStatusEnum {
   static DOWN = 'DOWN';
   static UP = 'UP';

spring-boot-admin-server-ui/src/main/frontend/components/ActionScope.ts

@@ -1,4 +1,3 @@
-/* eslint-disable no-undef */
 class ActionScopeEnum {
   static INSTANCE = 'instance';
   static APPLICATION = 'application';

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

@@ -27,6 +27,7 @@ import uri from '../utils/uri';
 
 import { useSbaConfig } from '@/sba-config';
 import { actuatorMimeTypes } from '@/services/spring-mime-types';
+import { transformToJSON } from '@/utils/transformToJSON';
 
 const isInstanceActuatorRequest = (url: string) =>
   url.match(/^instances[/][^/]+[/]actuator([/].*)?$/);
@@ -63,6 +64,11 @@ class Instance {
     return this.registration.metadata;
   }
 
+  get metadataParsed() {
+    const metadata = this.registration.metadata || {};
+    return transformToJSON(metadata);
+  }
+
   get isUnregisterable() {
     return this.registration.source === 'http-api';
   }

spring-boot-admin-server-ui/src/main/frontend/services/startup-actuator.spec.ts

@@ -24,7 +24,6 @@ describe('StartupActuatorService', () => {
   let events: any = {};
 
   beforeEach(() => {
-    // eslint-disable-next-line @typescript-eslint/no-var-requires
     data = cloneDeep(fixture);
     events = data.timeline.events;
   });

spring-boot-admin-server-ui/src/main/frontend/utils/transformToJSON.spec.ts

@@ -0,0 +1,32 @@
+import { describe, expect, it } from 'vitest';
+
+import { transformToJSON } from '@/utils/transformToJSON';
+
+const input = {
+  'service-url': 'http://localhost:8080',
+  'sidebar.links.0.iframe': 'true',
+  'sidebar.links.0.label': '🏠 Home',
+  'sidebar.links.0.url': 'https://codecentric.de',
+  'tags.environment': 'test',
+};
+
+describe('transformToNestedPojo', () => {
+  const output = transformToJSON(input);
+
+  it('transforms simple key', () => {
+    expect(output['service-url']).toEqual('http://localhost:8080');
+  });
+
+  it('transforms nested key', () => {
+    expect(output.tags.environment).toEqual('test');
+  });
+
+  it('transforms array', () => {
+    expect(output.sidebar.links).toHaveLength(1);
+    expect(output.sidebar.links[0]).toEqual({
+      iframe: 'true',
+      label: '🏠 Home',
+      url: 'https://codecentric.de',
+    });
+  });
+});

spring-boot-admin-server-ui/src/main/frontend/utils/transformToJSON.ts

@@ -0,0 +1,58 @@
+/**
+ * Converts a flat object with dot notation keys into a nested POJO.
+ *
+ * @param input - The flat object to transform.
+ * @returns The nested POJO.
+ *
+ * @example
+ * transformToJSON({
+ *   'user.name': 'Alice',
+ *   'user.address.street': 'Main St',
+ *   'user.address.zip': '12345',
+ *   'items.0.id': 1,
+ *   'items.0.name': 'Item 1',
+ *   'items.1.id': 2,
+ *   'items.1.name': 'Item 2'
+ * });
+ * Returns:
+ * {
+ *   user: {
+ *     name: 'Alice',
+ *     address: { street: 'Main St', zip: '12345' }
+ *   },
+ *   items: [
+ *     { id: 1, name: 'Item 1' },
+ *     { id: 2, name: 'Item 2' }
+ *   ]
+ * }
+ */
+export function transformToJSON(input: Record<string, any>): any {
+  const result: any = {};
+  for (const [flatKey, value] of Object.entries(input)) {
+    const parts = flatKey.split('.');
+    let current = result;
+    for (let i = 0; i < parts.length; i++) {
+      const part = parts[i];
+      const nextPart = parts[i + 1];
+      const isNextArrayIndex = nextPart !== undefined && /^\d+$/.test(nextPart);
+      if (i === parts.length - 1) {
+        current[part] = value;
+      } else {
+        if (/^\d+$/.test(part)) {
+          const idx = Number(part);
+          if (!Array.isArray(current)) {
+            const arr: any[] = [];
+            Object.assign(arr, current);
+            current = arr;
+          }
+          if (!current[idx]) current[idx] = isNextArrayIndex ? [] : {};
+          current = current[idx];
+        } else {
+          if (!current[part]) current[part] = isNextArrayIndex ? [] : {};
+          current = current[part];
+        }
+      }
+    }
+  }
+  return result;
+}

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

@@ -121,7 +121,6 @@ import handle from '@/views/about/handle.vue';
 export default defineComponent({
   components: { SbaWave, SbaButton },
   data: () => ({
-    // eslint-disable-next-line no-undef
     version: __PROJECT_VERSION__,
   }),
   computed: {

spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-info.spec.ts

@@ -26,8 +26,6 @@ describe('DetailsInfo', () => {
     const application = new Application(applications[0]);
     const instance = application.instances[0];
     instance.hasEndpoint = () => true;
-    // Use AxiosResponse type for the mock
-    // eslint-disable-next-line @typescript-eslint/no-var-requires
 
     instance.fetchInfo = async () => ({
       data: {