feat: implement classname shortener and update task display in index.vue

Author: SteKoe

spring-boot-admin-server-ui/src/main/frontend/composables/useClassnameShortener.spec.ts

@@ -0,0 +1,17 @@
+import { describe, expect, it } from 'vitest';
+
+import { useClassnameShortener } from '@/composables/useClassnameShortener';
+
+describe('useClassnameShortener', () => {
+  const { truncateClassname } = useClassnameShortener();
+
+  it.each`
+    given                                                             | expected
+    ${'com.example.MyService'}                                        | ${'com.example.MyService'}
+    ${'MyTopLevelClass'}                                              | ${'MyTopLevelClass'}
+    ${'com.example.Outer$Inner'}                                      | ${'com.example.Outer$Inner'}
+    ${'org.springframework.boot.web.embedded.tomcat.TomcatWebServer'} | ${'o.s.b.w.embedded.tomcat.TomcatWebServer'}
+  `('$given => $expected', ({ given, expected }) => {
+    expect(truncateClassname(given)).toEqual(expected);
+  });
+});

spring-boot-admin-server-ui/src/main/frontend/composables/useClassnameShortener.ts

@@ -0,0 +1,60 @@
+type Options = {
+  maxLen?: number;
+};
+
+export const useClassnameShortener = (options?: Options) => {
+  return {
+    truncateClassname: (fqcn: string) =>
+      abbreviateLoggerName(fqcn, options?.maxLen),
+  };
+};
+
+/**
+ * Abbreviate a fully qualified Java class name like Spring Boot logging does.
+ *
+ * Examples:
+ *  - org.springframework.boot.web.embedded.tomcat.TomcatWebServer
+ *    -> o.s.b.w.e.tomcat.TomcatWebServer
+ *
+ *  - com.example.very.long.package.name.MyService with maxLen=30
+ *    -> c.e.v.l.p.name.MyService  (then drops leftmost segments if needed)
+ *
+ * @param fqcn   Fully-qualified class name (e.g., "org.example.FooBar")
+ * @param maxLen Maximum length of the resulting string
+ * @returns Abbreviated name
+ */
+function abbreviateLoggerName(fqcn: string, maxLen = 40): string {
+  const input = (fqcn || '').trim();
+  if (!input) return '';
+
+  if (input.length <= maxLen) return input; // already fits
+
+  const parts = input.split('.');
+  if (parts.length === 1) {
+    // No package, just crop if needed
+    return input.slice(input.length - maxLen);
+  }
+
+  const simpleName = parts[parts.length - 1];
+  let packages = parts.slice(0, -1);
+
+  // 1. Start with full name
+  let out = packages.join('.') + '.' + simpleName;
+
+  // 2. Abbreviate left-to-right
+  for (let i = 0; i < packages.length && out.length > maxLen; i++) {
+    packages[i] = packages[i].charAt(0); // abbreviate one package
+    out = packages.join('.') + '.' + simpleName;
+    if (out.length <= maxLen) return out;
+  }
+
+  // 3. If still too long, drop leftmost package segments
+  while (packages.length > 0 && out.length > maxLen) {
+    packages = packages.slice(1);
+    out = packages.join('.') + (packages.length ? '.' : '') + simpleName;
+    if (out.length <= maxLen) return out;
+  }
+
+  // 4. Fallback: left-crop
+  return out.slice(out.length - maxLen);
+}

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

@@ -42,7 +42,8 @@
               <tr>
                 <td
                   class="scheduledtasks__target"
-                  v-text="task.runnable.target"
+                  :title="task.runnable.target"
+                  v-text="truncateClassname(task.runnable.target)"
                 />
                 <td
                   class="font-mono text-sm"
@@ -86,7 +87,11 @@
             </thead>
             <tbody v-for="task in fixedDelay" :key="task.runnable.target">
               <tr>
-                <td v-text="task.runnable.target" />
+                <td
+                  class="scheduledtasks__target"
+                  :title="task.runnable.target"
+                  v-text="truncateClassname(task.runnable.target)"
+                />
                 <td
                   :title="`${task.initialDelay}ms`"
                   v-text="formatTime(task.initialDelay)"
@@ -132,7 +137,11 @@
             </thead>
             <tbody v-for="task in fixedRate" :key="task.runnable.target">
               <tr>
-                <td v-text="task.runnable.target" />
+                <td
+                  class="scheduledtasks__target"
+                  :title="task.runnable.target"
+                  v-text="truncateClassname(task.runnable.target)"
+                />
                 <td
                   :title="`${task.initialDelay}ms`"
                   v-text="formatTime(task.initialDelay)"
@@ -157,6 +166,7 @@ import { useI18n } from 'vue-i18n';
 
 import SbaPanel from '@/components/sba-panel.vue';
 
+import { useClassnameShortener } from '@/composables/useClassnameShortener';
 import Instance from '@/services/instance';
 import { usePrettyTime } from '@/utils/prettyTime';
 import { VIEW_GROUP } from '@/views/ViewGroup';
@@ -178,9 +188,11 @@ export default {
   setup() {
     const { formatTime } = usePrettyTime();
     const { locale } = useI18n();
+    const { truncateClassname } = useClassnameShortener({ maxLen: 80 });
 
     return {
       formatTime,
+      truncateClassname,
       formatCron: (cron) =>
         cronstrue.toString(cron, {
           verbose: true,
@@ -249,12 +261,8 @@ export default {
   width: 250px;
   max-width: 750px;
   overflow: hidden;
+  direction: rtl;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.scheduledtasks__target:hover {
-  height: auto;
-  overflow: visible;
-  white-space: normal;
-}
 </style>