fix(#2151): name of liquibase bean is not printed properly (#2154)

codecentric · Oct 27, 2022 · f7a8d4f · f7a8d4f
1 parent cf249cf
commit f7a8d4f
Showing 1 changed file with 99 additions and 70 deletions.
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/liquibase/index.vue b/spring-boot-admin-server-ui/src/main/frontend/views/instances/liquibase/index.vue
@@ -15,12 +15,15 @@
   -->
 
 <template>
-  <section class="section" :class="{ 'is-loading' : !hasLoaded }">
+  <section class="section" :class="{ 'is-loading': !hasLoaded }">
     <template v-if="hasLoaded">
       <div v-if="error" class="message is-danger">
         <div class="message-body">
           <strong>
-            <font-awesome-icon class="has-text-danger" icon="exclamation-triangle" />
+            <font-awesome-icon
+              class="has-text-danger"
+              icon="exclamation-triangle"
+            />
             <span v-text="$t('instances.liquibase.fetch_failed')" />
           </strong>
           <p v-text="error.message" />
@@ -29,8 +32,11 @@
       <template v-for="(context, ctxName) in contexts">
         <h3 class="title" v-text="ctxName" :key="ctxName" />
         <template v-for="(report, name) in context.liquibaseBeans">
-          <sba-panel :key="`${ctxName}-${name}`" :title="`name`" class="change-set"
-                     :header-sticks-below="['#navigation']"
+          <sba-panel
+            :key="`${ctxName}-${name}`"
+            :title="name"
+            class="change-set"
+            :header-sticks-below="['#navigation']"
           >
             <table class="table is-hoverable is-fullwidth">
               <thead>
@@ -45,23 +51,39 @@
               </thead>
               <tbody>
                 <template v-for="changeSet in report.changeSets">
-                  <tr :key="`${ctxName}-${name}-${changeSet.id}`" class="is-selectable"
-                      @click="showDetails[changeSet.checksum] ? $delete(showDetails, changeSet.checksum) : $set(showDetails, changeSet.checksum, true)"
+                  <tr
+                    :key="`${ctxName}-${name}-${changeSet.id}`"
+                    class="is-selectable"
+                    @click="
+                      showDetails[changeSet.checksum]
+                        ? $delete(showDetails, changeSet.checksum)
+                        : $set(showDetails, changeSet.checksum, true)
+                    "
                   >
                     <td v-text="changeSet.id" />
                     <td>
-                      <span v-text="changeSet.execType" class="tag" :class="execClass(execType)" />
+                      <span
+                        v-text="changeSet.execType"
+                        class="tag"
+                        :class="execClass(execType)"
+                      />
                     </td>
                     <td class="is-breakable" v-text="changeSet.description" />
                     <td v-text="changeSet.tag" />
                     <td v-text="changeSet.contexts.join(', ')" />
                     <td>
-                      <span v-for="label in changeSet.labels" :key="`${ctxName}-${name}-${changeSet.id}-${label}`"
-                            class="tag is-info" v-text="label"
+                      <span
+                        v-for="label in changeSet.labels"
+                        :key="`${ctxName}-${name}-${changeSet.id}-${label}`"
+                        class="tag is-info"
+                        v-text="label"
                       />
                     </td>
                   </tr>
-                  <tr v-if="showDetails[changeSet.checksum]" :key="`${ctxName}-${name}-${changeSet.id}-details`">
+                  <tr
+                    v-if="showDetails[changeSet.checksum]"
+                    :key="`${ctxName}-${name}-${changeSet.id}-details`"
+                  >
                     <td colspan="6">
                       <table class="table is-fullwidth">
                         <tr>
@@ -77,11 +99,17 @@
                           <td colspan="3" v-text="changeSet.comments" />
                         </tr>
                         <tr>
-                          <th v-text="$t('instances.liquibase.execution_order')" />
+                          <th
+                            v-text="$t('instances.liquibase.execution_order')"
+                          />
                           <td v-text="changeSet.orderExecuted" />
-                          <th v-text="$t('instances.liquibase.execution_date')" />
+                          <th
+                            v-text="$t('instances.liquibase.execution_date')"
+                          />
                           <td v-text="changeSet.dateExecuted" />
-                          <th v-text="$t('instances.liquibase.deployment_id')" />
+                          <th
+                            v-text="$t('instances.liquibase.deployment_id')"
+                          />
                           <td v-text="changeSet.deploymentId" />
                         </tr>
                       </table>
@@ -98,65 +126,66 @@
 </template>
 
 <script>
-  import Instance from '@/services/instance';
-  import {VIEW_GROUP} from '../../index';
+import Instance from "@/services/instance";
+import { VIEW_GROUP } from "../../index";
 
-  export default {
-    props: {
-      instance: {
-        type: Instance,
-        required: true
-      }
+export default {
+  props: {
+    instance: {
+      type: Instance,
+      required: true,
     },
-    data: () => ({
-      hasLoaded: false,
-      error: null,
-      contexts: null,
-      showDetails: {}
-    }),
-    computed: {},
-    created() {
-      this.fetchLiquibase();
+  },
+  data: () => ({
+    hasLoaded: false,
+    error: null,
+    contexts: null,
+    showDetails: {},
+  }),
+  computed: {},
+  created() {
+    this.fetchLiquibase();
+  },
+  methods: {
+    async fetchLiquibase() {
+      this.error = null;
+      try {
+        const res = await this.instance.fetchLiquibase();
+        this.contexts = res.data.contexts;
+      } catch (error) {
+        console.warn("Fetching Liquibase changeSets failed:", error);
+        this.error = error;
+      }
+      this.hasLoaded = true;
     },
-    methods: {
-      async fetchLiquibase() {
-        this.error = null;
-        try {
-          const res = await this.instance.fetchLiquibase();
-          this.contexts = res.data.contexts;
-        } catch (error) {
-          console.warn('Fetching Liquibase changeSets failed:', error);
-          this.error = error;
-        }
-        this.hasLoaded = true;
-      },
-      execClass(execType) {
-        switch (execType) {
-          case 'EXECUTED':
-            return 'is-success';
-          case 'FAILED':
-            return 'is-danger';
-          case 'SKIPPED':
-            return 'is-light';
-          case 'RERAN':
-          case 'MARK_RAN':
-            return 'is-warning';
-          default:
-            return 'is-info';
-        }
+    execClass(execType) {
+      switch (execType) {
+        case "EXECUTED":
+          return "is-success";
+        case "FAILED":
+          return "is-danger";
+        case "SKIPPED":
+          return "is-light";
+        case "RERAN":
+        case "MARK_RAN":
+          return "is-warning";
+        default:
+          return "is-info";
       }
     },
-    install({viewRegistry}) {
-      viewRegistry.addView({
-        name: 'instances/liquibase',
-        parent: 'instances',
-        path: 'liquibase',
-        component: this,
-        label: 'instances.liquibase.label',
-        group: VIEW_GROUP.DATA,
-        order: 900,
-        isEnabled: ({instance}) => instance.hasEndpoint('liquibase')
-      });
-    }
-  }
-</script>å
+  },
+  install({ viewRegistry }) {
+    viewRegistry.addView({
+      name: "instances/liquibase",
+      parent: "instances",
+      path: "liquibase",
+      component: this,
+      label: "instances.liquibase.label",
+      group: VIEW_GROUP.DATA,
+      order: 900,
+      isEnabled: ({ instance }) => instance.hasEndpoint("liquibase"),
+    });
+  },
+};
+</script>
+å