break word on wallboard (#2694)

ulischulte · SteKoe · web-flow · commit 393370ff4239 · 2023-08-18T10:00:37.000+02:00
* break word on wallboard

* fix: move custom.css to the end of imports

---------

Co-authored-by: Stephan Köninger &lt;stephan.koeninger@codecentric.de&gt;
diff --git a/spring-boot-admin-server-ui/src/main/frontend/global.d.ts b/spring-boot-admin-server-ui/src/main/frontend/global.d.ts
@@ -12,7 +12,7 @@ declare global {
     SBA: SBASettings;
   }
 
-  type JSExtension = {
+  type Extension = {
     resourcePath: string;
     resourceLocation: string;
   };
@@ -79,7 +79,10 @@ declare global {
       name: string;
       [key: string]: any;
     };
-    extensions: JSExtension[];
+    extensions: {
+      js: Extension[];
+      css: Extension[];
+    };
     csrf: {
       headerName: string;
       parameterName: string;
diff --git a/spring-boot-admin-server-ui/src/main/frontend/index.html b/spring-boot-admin-server-ui/src/main/frontend/index.html
@@ -17,45 +17,39 @@
 <!DOCTYPE html>
 <html class='h-full'>
 <head>
-  <base href='/' th:href='${baseUrl}' />
-  <meta charset='utf-8' />
-  <title th:text='${uiSettings.title}'>Spring Boot Admin</title>
-  <link
-    rel='shortcut icon'
-    th:href='${uiSettings.favicon}'
-    type='image/png'
-  />
-  <meta content='width=device-width, initial-scale=1' name='viewport' />
-  <meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible' />
-  <meta content='telephone=no,email=no' name='format-detection' />
-  <meta
-    content='#42d3a5'
-    name='theme-color'
-    th:content='${uiSettings.theme.color}'
-  />
+    <base href='/' th:href='${baseUrl}'/>
+    <meta charset='utf-8'/>
+    <title th:text='${uiSettings.title}'>Spring Boot Admin</title>
+    <link
+            rel='shortcut icon'
+            th:href='${uiSettings.favicon}'
+            type='image/png'
+    />
+    <meta content='width=device-width, initial-scale=1' name='viewport'/>
+    <meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'/>
+    <meta content='telephone=no,email=no' name='format-detection'/>
+    <meta
+            content='#42d3a5'
+            name='theme-color'
+            th:content='${uiSettings.theme.color}'
+    />
 
-  <link href='./index.css' rel='stylesheet' />
-  <link href='/variables.css' rel='stylesheet' />
+    <link href='./index.css' rel='stylesheet'/>
+    <link href='/variables.css' rel='stylesheet'/>
 
-  <link
-    as='style'
-    rel='preload'
-    th:each='cssExtension : ${cssExtensions}'
-    th:href="'extensions/' + ${cssExtension.resourcePath}"
-  />
-
-  <link
-    rel='stylesheet'
-    th:each='cssExtension : ${cssExtensions}'
-    th:href="'extensions/' + ${cssExtension.resourcePath}"
-  />
-  <script lang='javascript' src='sba-settings.js'></script>
-  <link
-    as='script'
-    rel='prefetch'
-    th:each='jsExtension : ${jsExtensions}'
-    th:src="'extensions/' + ${jsExtension.resourcePath}"
-  />
+    <link
+            as='style'
+            rel='preload'
+            th:each='cssExtension : ${cssExtensions}'
+            th:href="'extensions/' + ${cssExtension.resourcePath}"
+    />
+    <script lang='javascript' src='sba-settings.js'></script>
+    <link
+            as="script"
+            rel='preload'
+            th:each='jsExtension : ${jsExtensions}'
+            th:href="'extensions/' + ${jsExtension.resourcePath}"
+    />
 </head>
 <body class='h-full'>
 <div id='app'></div>
diff --git a/spring-boot-admin-server-ui/src/main/frontend/index.ts b/spring-boot-admin-server-ui/src/main/frontend/index.ts
@@ -60,12 +60,19 @@ globalThis.SBA.use = ({ install }) => {
   });
 };
 
-sbaConfig.extensions.forEach((extension) => {
+sbaConfig.extensions.js.forEach((extension) => {
   const script = document.createElement('script');
   script.src = `extensions/${extension.resourcePath}`;
   document.head.appendChild(script);
 });
 
+sbaConfig.extensions.css.forEach((extension) => {
+  const link = document.createElement('link');
+  link.rel = 'stylesheet';
+  link.href = `extensions/${extension.resourcePath}`;
+  document.head.appendChild(link);
+});
+
 moment.locale(navigator.language.split('-')[0]);
 
 if (process.env.NODE_ENV === 'development') {
@@ -114,7 +121,7 @@ const app = createApp({
           applicationsInitialized,
           error,
           t,
-        })
+        }),
       );
   },
 });
diff --git a/spring-boot-admin-server-ui/src/main/frontend/sba-settings.js b/spring-boot-admin-server-ui/src/main/frontend/sba-settings.js
@@ -19,7 +19,10 @@
 var SBA = {
   uiSettings: /*[[${uiSettings}]]*/ {},
   user: /*[[${user}]]*/ null,
-  extensions: /*[[${jsExtensions}]]*/ [],
+  extensions: {
+    js: /*[[${jsExtensions}]]*/ [],
+    css: /*[[${cssExtensions}]]*/ [],
+  },
   csrf: {
     parameterName: /*[[${_csrf} ? ${_csrf.parameterName} : 'null']]*/ null,
     headerName: /*[[${_csrf} ? ${_csrf.headerName} : 'null']]*/ null,
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/wallboard/index.vue b/spring-boot-admin-server-ui/src/main/frontend/views/wallboard/index.vue
@@ -16,16 +16,18 @@
 
 <template>
   <section class="wallboard section">
-    <div class="flex gap-2 justify-end absolute w-full md:w-[28rem] top-14 right-0 bg-black/20 py-3 px-4 rounded-bl">
+    <div
+      class="flex gap-2 justify-end absolute w-full md:w-[28rem] top-14 right-0 bg-black/20 py-3 px-4 rounded-bl"
+    >
       <sba-input
-        class="flex-1"
         v-model="termFilter"
+        class="flex-1"
         :placeholder="$t('term.filter')"
         name="filter"
         type="search"
       >
         <template #prepend>
-          <font-awesome-icon icon="filter"/>
+          <font-awesome-icon icon="filter" />
         </template>
       </sba-input>
 
@@ -34,7 +36,7 @@
         v-model="statusFilter"
         class="relative focus:z-10 focus:ring-indigo-500 focus:border-indigo-500 block sm:text-sm border-gray-300 rounded"
       >
-        <option selected value="none" v-text="$t('term.all')"/>
+        <option selected value="none" v-text="$t('term.all')" />
         <optgroup :label="t('health.label')">
           <option
             v-for="status in healthStatus"
@@ -54,16 +56,18 @@
       severity="WARN"
     />
 
-    <sba-loading-spinner
-      v-if="!applicationsInitialized"
-    />
+    <sba-loading-spinner v-if="!applicationsInitialized" />
 
     <template v-if="applicationsInitialized">
-      <div class="flex w-full h-full items-center text-center text-white text-xl"
-           v-if="termFilter.length > 0 && applications.length === 0"
-           v-text="t('term.no_results_for_term', {
-             term: termFilter
-           })"/>
+      <div
+        v-if="termFilter.length > 0 && applications.length === 0"
+        class="flex w-full h-full items-center text-center text-white text-xl"
+        v-text="
+          t('term.no_results_for_term', {
+            term: termFilter,
+          })
+        "
+      />
       <hex-mesh
         v-if="applicationsInitialized"
         :class-for-item="classForApplication"
@@ -72,12 +76,12 @@
       >
         <template #item="{ item: application }">
           <div :key="application.name" class="hex__body application">
-            <div class="application__status-indicator"/>
+            <div class="application__status-indicator" />
             <div class="application__header application__time-ago is-muted">
-              <sba-time-ago :date="application.statusTimestamp"/>
+              <sba-time-ago :date="application.statusTimestamp" />
             </div>
             <div class="application__body">
-              <h1 class="application__name" v-text="application.name"/>
+              <h1 class="application__name" v-text="application.name" />
               <p
                 class="application__instances is-muted"
                 v-text="
@@ -98,21 +102,21 @@
 
 <script>
 import Fuse from 'fuse.js';
-import {computed, ref} from 'vue';
-import {useI18n} from 'vue-i18n';
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 
-import {HealthStatus} from '@/HealthStatus';
-import {useApplicationStore} from '@/composables/useApplicationStore';
+import { HealthStatus } from '@/HealthStatus';
+import { useApplicationStore } from '@/composables/useApplicationStore';
 import hexMesh from '@/views/wallboard/hex-mesh';
 
 export default {
-  components: {hexMesh},
+  components: { hexMesh },
   setup() {
-    const {t} = useI18n();
+    const { t } = useI18n();
     const termFilter = ref('');
     const statusFilter = ref('none');
 
-    const {applications, applicationsInitialized, error} =
+    const { applications, applicationsInitialized, error } =
       useApplicationStore();
 
     const fuse = computed(
@@ -122,7 +126,7 @@ export default {
           useExtendedSearch: true,
           threshold: 0.25,
           keys: ['name', 'buildVersion', 'instances.name', 'instances.id'],
-        })
+        }),
     );
 
     const filteredApplications = computed(() => {
@@ -137,7 +141,7 @@ export default {
       function filterByStatus(result) {
         if (statusFilter.value !== 'none') {
           return result.filter(
-            (application) => application.status === statusFilter.value
+            (application) => application.status === statusFilter.value,
           );
         }
 
@@ -193,17 +197,17 @@ export default {
       if (application.instances.length === 1) {
         this.$router.push({
           name: 'instances/details',
-          params: {instanceId: application.instances[0].id},
+          params: { instanceId: application.instances[0].id },
         });
       } else {
         this.$router.push({
           name: 'applications',
-          params: {selected: application.name},
+          params: { selected: application.name },
         });
       }
     },
   },
-  install({viewRegistry}) {
+  install({ viewRegistry }) {
     viewRegistry.addView({
       path: '/wallboard',
       name: 'wallboard',
@@ -237,6 +241,7 @@ export default {
   width: 100%;
   padding: 2.5%;
   color: #fff;
+  word-break: break-word;
   font-size: 2em;
   font-weight: 600;
   line-height: 1.125;
