fix: application list version jumping

Author: SteKoe

spring-boot-admin-server-ui/src/main/frontend/components/sba-tag.vue

@@ -1,17 +1,30 @@
 <template>
-  <span class="inline-flex bg-white leading-none rounded p-1 shadow-sm text-sm border border-gray-300">
+  <span class="inline-flex leading-none rounded shadow-sm text-sm overflow-hidden"
+        :class="{
+          'p-1 border border-gray-300 bg-white': !small,
+          'p-0 border text-xs': small,
+         }"
+  >
     <span
       v-if="label"
-      class="inline-flex bg-sba-200 rounded text-sba-900 py-1 px-3 justify-center items-center transition-all"
+      class="inline-flex bg-sba-200 rounded text-sba-900  justify-center items-center transition-all"
+      :class="{
+         'py-1.5 px-3': !small,
+         'py-1.5 px-2 rounded-r-none': small
+      }"
       v-text="label"
     />
     <span
-      class="inline-flex px-2 justify-center items-center"
-      :class="{'pl-2': !!label}"
+      class="inline-flex px-2 justify-center items-center whitespace-nowrap"
+      :class="{
+        'pl-2': !!label,
+        'bg-white': small
+      }"
       v-text="value"
     />
   </span>
 </template>
+
 <script>
 export default {
   name: 'SbaTag',
@@ -20,6 +33,10 @@ export default {
       type: [String, Number],
       default: null
     },
+    small: {
+      type: Boolean,
+      default: false
+    },
     value: {
       type: [String, Number],
       required: true

spring-boot-admin-server-ui/src/main/frontend/components/sba-tags.stories.js

@@ -18,6 +18,14 @@ SingleTag.args = {
   }
 };
 
+export const SingleTagSmall = Template.bind({});
+SingleTagSmall.args = {
+  small: true,
+  tags: {
+    'This is a key': 'This a value',
+  }
+};
+
 export const MultipleTags = Template.bind({});
 MultipleTags.args = {
   tags: {

spring-boot-admin-server-ui/src/main/frontend/components/sba-tags.vue

@@ -21,6 +21,7 @@
       :key="key"
     >
       <sba-tag
+        :small="small"
         :label="key"
         :value="value"
       />
@@ -35,7 +36,11 @@ export default {
       tags: {
         type: Object,
         required: true
-      }
+      },
+      small: {
+        type: Boolean,
+        default: false
+      },
     }
   }
 </script>

spring-boot-admin-server-ui/src/main/frontend/views/applications/ApplicationListItemActions.vue

@@ -1,6 +1,6 @@
 <template>
   <sba-button-group
-    class="application-list-item__header__actions"
+    class="application-list-item__header__actions text-right"
   >
     <router-link
       v-slot="{ navigate }"
@@ -71,7 +71,7 @@ export default {
 <style scoped>
 .application-list-item__header__actions {
   @apply hidden md:flex;
-  justify-self: end;
+  justify-content: flex-end;
   opacity: 0;
   transition: all ease-out 86ms;
   will-change: opacity;

spring-boot-admin-server-ui/src/main/frontend/views/applications/applications-list-item.stories.js

@@ -25,6 +25,22 @@ const routes = [
   {path: "/journal", name: "journal"}
 ];
 
+const firstInstance = {...application.instances[0]};
+const secondInstance = {...application.instances[0]};
+secondInstance.statusTimestamp = Date.now();
+
+const instanceWithoutRestart = {...firstInstance}
+instanceWithoutRestart.endpoints = instanceWithoutRestart.endpoints.filter(e => e.id === "restart")
+const instanceWithABunchOfTags = {...firstInstance}
+instanceWithABunchOfTags.tags = {
+  "tag0": "Tag value",
+  "tag1": "Tag value",
+  "tag2": "Tag value",
+  "tag3": "Tag value",
+  "tag4": "Tag value",
+  "tag5": "Tag value"
+}
+
 export default {
   component: ApplicationsListItem,
   title: 'Views/Applications/ApplicationListItem',
@@ -39,7 +55,7 @@ const Template = (args) => ({
   },
   template: `
     <sba-panel :seamless="true">
-      <applications-list-item v-bind="args"/>
+    <applications-list-item v-bind="args"/>
     </sba-panel>`,
 });
 
@@ -64,17 +80,14 @@ OneInstanceExpanded.args = {
 export const MultipleInstances = Template.bind({});
 MultipleInstances.decorators = [
   withVueRouter(routes)
-
 ];
-const firstInstance = {...application.instances[0]};
-const secondInstance = {...application.instances[0]};
-secondInstance.statusTimestamp = Date.now();
+
 MultipleInstances.args = {
   application: new Application({
     ...application,
     instances: [
       firstInstance,
-      secondInstance
+      secondInstance,
     ]
   })
 }
@@ -85,5 +98,49 @@ MultipleInstancesExpanded.decorators = [
 ];
 MultipleInstancesExpanded.args = {
   ...MultipleInstances.args,
+  application: new Application({
+    ...application,
+    instances: [
+      firstInstance,
+      secondInstance,
+      instanceWithoutRestart,
+      instanceWithABunchOfTags
+    ]
+  }),
   isExpanded: true,
 }
+
+const TemplateWithMultipleApplications = (args) => ({
+  components: {ApplicationsListItem, SbaPanel},
+  setup() {
+    return {
+      args
+    };
+  },
+  template: `
+    <sba-panel :seamless="true">
+    <applications-list-item
+      v-for="application in args.applications"
+      :application="application"
+    />
+    </sba-panel>`,
+});
+
+export const MultipleApplications = TemplateWithMultipleApplications.bind({});
+MultipleApplications.decorators = [
+  withVueRouter(routes)
+];
+
+MultipleApplications.args = {
+  applications: [
+    new Application({
+      ...application,
+    }),
+    new Application({
+      ...application,
+      instances: [
+        instanceWithoutRestart
+      ]
+    })
+  ]
+}

spring-boot-admin-server-ui/src/main/frontend/views/applications/applications-list-item.vue

@@ -102,15 +102,17 @@
         class="font-bold text-lg"
         v-text="application.name"
       />
-      <ApplicationListItemActions
-        :application="application"
-        :has-active-notification-filter="hasActiveNotificationFilter(application)"
-        :has-notification-filters-support="hasNotificationFiltersSupport"
-        @restart="confirmRestartApplication"
-        @shutdown="confirmShutdownApplication"
-        @filter-settings="$emit('toggle-notification-filter-settings', application)"
-        @unregister="isModalUnregisterApplicationOpen = true"
-      />
+      <div class="w-1/6">
+        <ApplicationListItemActions
+          :application="application"
+          :has-active-notification-filter="hasActiveNotificationFilter(application)"
+          :has-notification-filters-support="hasNotificationFiltersSupport"
+          @restart="confirmRestartApplication"
+          @shutdown="confirmShutdownApplication"
+          @filter-settings="$emit('toggle-notification-filter-settings', application)"
+          @unregister="isModalUnregisterApplicationOpen = true"
+        />
+      </div>
     </header>
     <!-- EXPANDED -->
     <ul

spring-boot-admin-server-ui/src/main/frontend/views/applications/instances-list.vue

@@ -38,14 +38,14 @@
         v-text="instance.id"
       />
     </div>
-    <div class="hidden lg:block">
-      <sba-tags :tags="instance.tags" />
+    <div class="hidden lg:block w-1/4 overflow-x-scroll">
+      <sba-tags :tags="instance.tags" :small="true" />
     </div>
     <div
       class="hidden md:block w-1/4 text-center"
       v-text="instance.buildVersion"
     />
-    <div class="instance-list-item__actions items-right">
+    <div class="instance-list-item__actions text-right">
       <slot
         name="actions"
         :instance="instance"
@@ -83,6 +83,7 @@ export default {
 }
 
 .instance-list-item__actions {
+  @apply w-1/6;
   transition: all ease-out 86ms;
   will-change: opacity;
   opacity: 0;