chore: zwischenstand

Author: SteKoe

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

@@ -15,9 +15,10 @@
  */
 
 /* global SBA */
-import customEndpoint from "./custom-endpoint.vue";
-import customSubitem from "./custom-subitem.vue";
-import custom from "./custom.vue";
+import customEndpoint from './custom-endpoint.vue';
+import customSubitem from './custom-subitem.vue';
+import custom from './custom.vue';
+
 
 // tag::customization-ui-toplevel[]
 SBA.use({
@@ -78,6 +79,7 @@ SBA.use({
     });
   },
   configure({ i18n }) {
+    console.log(i18n);
     i18n.mergeLocaleMessage("en", {
       // <4>
       sidebar: {

spring-boot-admin-server-ui/src/main/frontend/composables/useApplicationStore.js

@@ -1,4 +1,4 @@
-import { onBeforeMount, onBeforeUnmount, ref } from 'vue';
+import { ref } from 'vue';
 
 import ApplicationStore from '../store.js';
 
@@ -10,7 +10,7 @@ export function createApplicationStore() {
 }
 
 export function useApplicationStore() {
-  const applications = ref(applicationStore.applications);
+  const applications = ref([]);
   const applicationsInitialized = ref(false);
   const error = ref(null);
 
@@ -20,8 +20,8 @@ export function useApplicationStore() {
   });
 
   applicationStore.addEventListener('changed', (newApplications) => {
-    applications.value = newApplications;
     applicationsInitialized.value = true;
+    applications.value = newApplications;
     error.value = null;
   });
 
@@ -30,13 +30,5 @@ export function useApplicationStore() {
     error.value = errorResponse;
   });
 
-  onBeforeMount(() => {
-    return applicationStore.start();
-  });
-
-  onBeforeUnmount(() => {
-    return applicationStore.stop();
-  });
-
   return { applications, applicationsInitialized, error, applicationStore };
 }

spring-boot-admin-server-ui/src/main/frontend/index.js

@@ -15,7 +15,7 @@
  */
 import NotificationcenterPlugin from '@stekoe/vue-toast-notificationcenter';
 import moment from 'moment';
-import { createApp, h, reactive } from 'vue';
+import { createApp, h, onBeforeMount, onBeforeUnmount, reactive } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 
@@ -72,6 +72,14 @@ const app = createApp({
       t,
     });
 
+    onBeforeMount(() => {
+      applicationStore.start();
+    })
+
+    onBeforeUnmount(() => {
+      applicationStore.stop();
+    })
+
     return () => h(sbaShell, props);
   },
 });
@@ -90,10 +98,10 @@ installables.forEach((view) => {
   try {
     view.configure
       ? view.configure({
-          vue,
-          i18n: vue.$i18n,
-          axios,
-        })
+        vue,
+        i18n: vue.$i18n,
+        axios,
+      })
       : void 0;
   } catch (e) {
     console.error(`Error configuring view ${view}`, e);

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

@@ -21,8 +21,8 @@
     </p>
     <hex-mesh
       v-if="applicationsInitialized"
-      :items="applications"
       :class-for-item="classForApplication"
+      :items="applications"
       @click="select"
     >
       <template #item="{ item: application }">
@@ -36,7 +36,7 @@
             <p
               class="application__instances is-muted"
               v-text="
-                $tc('wallboard.instances_count', application.instances.length)
+                $t('wallboard.instances_count', application.instances.length)
               "
             />
           </div>
@@ -62,14 +62,10 @@ export default {
       type: Error,
       default: null,
     },
-    applicationsInitialized: {
-      type: Boolean,
-      default: false,
-    },
   },
   setup() {
-    const { applications } = useApplicationStore();
-    return { applications };
+    const { applications, applicationsInitialized } = useApplicationStore();
+    return { applications, applicationsInitialized };
   },
   methods: {
     classForApplication(application) {
@@ -128,6 +124,7 @@ export default {
   height: calc(100vh - 52px);
   width: 100%;
 }
+
 .wallboard .application {
   color: #f5f5f5;
   font-size: 1em;
@@ -138,6 +135,7 @@ export default {
   display: flex;
   flex-direction: column;
 }
+
 .wallboard .application__name {
   width: 100%;
   padding: 2.5%;
@@ -146,15 +144,18 @@ export default {
   font-weight: 600;
   line-height: 1.125;
 }
+
 .wallboard .application__version {
   color: #f5f5f5;
   font-size: 1.25em;
   line-height: 1.25;
 }
+
 .wallboard .application__header {
   width: 90%;
   margin-bottom: 0.5em;
 }
+
 .wallboard .application__footer {
   width: 90%;
   margin-top: 0.5em;