fix(#4255): convert ApplicationStatusHero to Composition API and improve last update handling (#4281)

Author: SteKoe

spring-boot-admin-server-ui/src/main/frontend/components/sba-toggle-scope-button.vue

@@ -56,7 +56,11 @@ const modelValue = defineModel({
   default: ActionScope.APPLICATION,
 });
 
-const { instanceCount, showInfo = true } = defineProps<{
+const {
+  instanceCount,
+  showInfo = true,
+  classNames = '',
+} = defineProps<{
   instanceCount: number;
   showInfo?: boolean;
   classNames?: string | string[] | Record<string, boolean>;

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

@@ -73,8 +73,8 @@
   </sba-panel>
 </template>
 
-<script>
-import { computed } from 'vue';
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
 
 import { useApplicationStore } from '@/composables/useApplicationStore';
 import { getStatusInfo } from '@/services/application';
@@ -87,57 +87,34 @@ const options = {
   minute: 'numeric',
   second: 'numeric',
 };
+const { applications } = useApplicationStore();
 
-export default {
-  setup() {
-    const { applications } = useApplicationStore();
+const userLocale = navigator.languages
+  ? navigator.languages[0]
+  : navigator.language;
+const dateTimeFormat = new Intl.DateTimeFormat(userLocale, options);
 
-    const statusInfo = computed(() => getStatusInfo(applications.value));
+const lastUpdate = ref(dateTimeFormat.format(new Date()));
 
-    return { applications, statusInfo };
-  },
-  data() {
-    return {
-      lastUpdate: new Date(),
-      dateTimeFormat: new Intl.DateTimeFormat(this.$i18n.locale, options),
-    };
-  },
-  computed: {
-    someInstancesDown() {
-      return this.statusInfo.someDown;
-    },
-    someInstancesUnknown() {
-      return this.statusInfo.someUnknown;
-    },
-    notUpCount() {
-      return this.applications.reduce((current, next) => {
-        return (
-          current +
-          next.instances.filter(
-            (instance) => instance.statusInfo.status !== 'UP',
-          ).length
-        );
-      }, 0);
-    },
-    applicationsCount() {
-      return this.applications.length;
-    },
-    instancesCount() {
-      return this.applications.reduce(
-        (current, next) => current + next.instances.length,
-        0,
-      );
-    },
-  },
-  beforeMount() {
-    this.updateLastUpdateTime();
-  },
-  methods: {
-    updateLastUpdateTime() {
-      this.lastUpdate = this.dateTimeFormat.format(new Date());
-    },
-  },
-};
+const statusInfo = computed(() => {
+  return getStatusInfo(applications.value);
+});
+
+watch(statusInfo, () => {
+  lastUpdate.value = dateTimeFormat.format(new Date());
+});
+
+const applicationsCount = computed(() => {
+  return applications.value.length;
+});
+
+const someInstancesDown = computed(() => {
+  return statusInfo.value.someDown;
+});
+
+const someInstancesUnknown = computed(() => {
+  return statusInfo.value.someUnknown;
+});
 </script>
 
 <style scoped>

spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-datasource.vue

@@ -50,13 +50,13 @@
         v-text="$t('instances.details.datasource.max_connections')"
       />
       <dd
-        class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2"
         v-if="current.max >= 0"
+        class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2"
         v-text="current.max"
       />
       <dd
-        class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2"
         v-else
+        class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2"
         v-text="$t('instances.details.datasource.unlimited')"
       />
     </dl>