fix(#4259): iframe in external views do not show up properly (#4276)

Author: SteKoe

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

@@ -125,6 +125,7 @@ declare global {
   }
 
   interface LinkView {
+    name: string;
     href?: string;
     label: string;
     order?: number;

spring-boot-admin-server-ui/src/main/frontend/views/external/index.ts

@@ -20,56 +20,77 @@ import './style.css';
 import sbaConfig from '@/sba-config';
 import ViewRegistry from '@/viewRegistry';
 
+function addExternalView(
+  viewRegistry: ViewRegistry,
+  view: ExternalView,
+  parent?: string,
+) {
+  if (view.iframe) {
+    addIframeView(viewRegistry, view, parent);
+  } else {
+    addExternalLink(viewRegistry, view, parent);
+  }
+}
+
+function getViewOpts(view: ExternalView, parent?: string) {
+  const safeLabel = view.label.replace(/[^a-zA-Z0-9-_]/g, '');
+  const name = `/external/${safeLabel}`;
+
+  return {
+    name,
+    path: name,
+    parent,
+    label: view.label,
+    order: view.order,
+  };
+}
+
 export const addIframeView = (
   viewRegistry: ViewRegistry,
-  { url, label, order }: Omit<ExternalView, 'children'>,
+  view: ExternalView,
+  parent?: string,
 ) => {
-  const urlWithoutScheme = url.replace(/^https?:[/][/]/, '');
-  viewRegistry.addView({
-    name: `external/${label}`,
-    path: `/external/${encodeURIComponent(urlWithoutScheme)}`,
-    label,
-    order,
+  const viewOpts = {
+    ...getViewOpts(view, parent),
     component: {
       inheritAttrs: false,
       render() {
         return h('div', { class: 'external-view' }, [
-          h('iframe', { src: url }),
+          h('iframe', { src: view.url }),
         ]);
       },
     },
-  } as ComponentView);
+  } as ComponentView;
+
+  viewRegistry.addView(viewOpts);
+
+  view.children?.forEach((view) => {
+    addExternalView(viewRegistry, view, viewOpts.name);
+  });
 };
 
 export const addExternalLink = (
   viewRegistry: ViewRegistry,
-  { url, label, order, children }: Omit<ExternalView, 'iframe'>,
+  view: ExternalView,
   parent?: string,
 ) => {
-  const name = `external/${label}`;
+  const viewOpts = {
+    ...getViewOpts(view, parent),
+    href: view.url,
+  } as LinkView;
 
-  viewRegistry.addView({
-    href: url,
-    name,
-    parent,
-    label,
-    order,
-  } as LinkView);
+  viewRegistry.addView(viewOpts);
 
-  children?.forEach((child) => {
-    addExternalLink(viewRegistry, child, name);
+  view.children?.forEach((view) => {
+    addExternalView(viewRegistry, view, viewOpts.name);
   });
 };
 
 export default {
   install({ viewRegistry }) {
-    const externalViews = sbaConfig.uiSettings.externalViews;
-    externalViews.forEach((view) => {
-      if (view.iframe) {
-        addIframeView(viewRegistry, view);
-      } else {
-        addExternalLink(viewRegistry, view);
-      }
+    const views = sbaConfig.uiSettings.externalViews;
+    views.forEach((view) => {
+      addExternalView(viewRegistry, view);
     });
   },
 };

spring-boot-admin-server-ui/vite.config.mts

@@ -59,7 +59,7 @@ export default defineConfig(({ mode }) => {
     },
     root: frontendDir,
     build: {
-      target: 'es2020',
+      target: 'es2022',
       outDir,
       rollupOptions: {
         input: {