fix(#1986): improve UX for JMX view (#2015)

Author: SteKoe

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

@@ -76,7 +76,8 @@
             <li>
               <a v-for="domain in domains" :key="domain.domain" :class="{'is-active' : domain === selectedDomain}"
                  class=""
-                 @click="select(domain)" v-text="domain.domain"
+                 :title="domain.domain"
+                 @click="select(domain)" v-text="truncatePackageName(domain.domain, 25)"
               />
             </li>
           </ul>
@@ -98,6 +99,7 @@ import {directive as onClickaway} from 'vue-clickaway2';
 import mBeanAttributes from './m-bean-attributes';
 import mBeanOperations from './m-bean-operations';
 import {VIEW_GROUP} from '../../index';
+import {truncatePackageName} from '@/views/instances/jolokia/utils';
 
 const getOperationName = (name, descriptor) => {
   const params = descriptor.args.map(arg => arg.type).join(',');
@@ -151,6 +153,7 @@ export default {
     hasLoaded: false,
     error: null,
     domains: [],
+    truncatePackageName,
     selected: {
       domain: null,
       mBean: null,

spring-boot-admin-server-ui/src/main/frontend/views/instances/jolokia/m-bean-operation-invocation.vue

@@ -19,7 +19,7 @@
     <div class="modal-background" @click="abort" />
     <div class="modal-content">
       <div class="modal-card">
-        <header class="modal-card-head">
+        <header class="modal-card-head is-block">
           <p class="modal-card-title" v-text="name" />
         </header>
 
@@ -28,7 +28,7 @@
             <div class="field" v-for="(arg, idx) in descriptor.args" :key="arg.name">
               <label class="label">
                 <span v-text="arg.name" />
-                <small class="is-muted has-text-weight-normal" v-text="arg.type" />
+                <small class="is-muted has-text-weight-normal pl-1" v-text="arg.type" />
               </label>
               <div class="control">
                 <input type="text" class="input" v-model="args[idx]">
@@ -214,3 +214,9 @@
     },
   }
 </script>
+
+<style scoped>
+.modal-card-title {
+  word-break: break-all;
+}
+</style>

spring-boot-admin-server-ui/src/main/frontend/views/instances/jolokia/m-bean-operation.vue

@@ -17,15 +17,18 @@
 <template>
   <div class="field">
     <div class="control">
-      <button class="button is-light is-fullwidth" @click="$emit('click', $event)">
-        <small class="is-light is-muted" v-text="descriptor.ret" />&nbsp;<span v-text="name" />
+      <button class="button is-light is-fullwidth columns has-text-left" @click="$emit('click', $event)">
+        <small class="is-light is-muted column is-flex-grow-0 is-flex-shrink-0 p-1" v-text="shortenedRet" :title="descriptor.ret" />
+        <span class="column is-flex-grow-1 is-flex-shrink-0 p-1 is-truncated" v-text="shortenedName" :title="name" />
       </button>
       <p class="help" v-text="descriptor.desc" />
     </div>
   </div>
 </template>
 
 <script>
+  import {truncateJavaType} from '@/views/instances/jolokia/utils';
+
   export default {
     props: {
       name: {
@@ -37,5 +40,20 @@
         required: true
       }
     },
+    computed: {
+      shortenedName() {
+        return truncateJavaType(this.name);
+      },
+      shortenedRet() {
+        return truncateJavaType(this.descriptor.ret);
+      }
+    }
   }
 </script>
+
+<style>
+.is-truncated {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>

spring-boot-admin-server-ui/src/main/frontend/views/instances/jolokia/utils.js

@@ -0,0 +1,52 @@
+/*
+ * Copyright 2014-2018 the original author or authors.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export function truncateJavaType(javaType) {
+  return javaType.replace(/java\.[^A-Z]*/g, '');
+}
+
+/**
+ * Truncates the given package name to the given length.
+ *
+ * It works similar to {@link https://logback.qos.ch/manual/layouts.html#conversionWord}
+ *
+ * @param javaType
+ * @param length
+ * @returns {string|*}
+ */
+export function truncatePackageName(javaType, length) {
+  const split = javaType.split('.');
+  if (length > 0) {
+    const clazzName = split.pop();
+
+    let shortened;
+    for (let i = 0; i <= split.length; i++) {
+      shortened = [
+        ...[...split].splice(0, i).map(p => p.charAt(0)),
+        ...[...split].splice(i),
+        clazzName
+      ].join('.');
+
+      if (shortened.length <= length) {
+        return shortened;
+      }
+    }
+
+    return shortened;
+  } else {
+    return split?.pop();
+  }
+}

spring-boot-admin-server-ui/src/main/frontend/views/instances/jolokia/utils.spec.js

@@ -0,0 +1,36 @@
+/*
+ * Copyright 2014-2018 the original author or authors.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {truncateJavaType, truncatePackageName} from '@/views/instances/jolokia/utils';
+
+describe('utils.js', () => {
+  it('truncateJavaType', () => {
+    expect(truncateJavaType('java.lang.String')).toEqual('String');
+  });
+
+  it.each`
+    length    | expected
+    ${0}      | ${'Bar'}
+    ${5}      | ${'m.s.s.Bar'}
+    ${10}     | ${'m.s.s.Bar'}
+    ${15}     | ${'m.s.sample.Bar'}
+    ${16}     | ${'m.sub.sample.Bar'}
+    ${26}     | ${'mainPackage.sub.sample.Bar'}
+  `('truncatePackageName having length $length', ({expected, length}) => {
+    const result = truncatePackageName('mainPackage.sub.sample.Bar', length);
+    expect(result).toEqual(expected);
+  });
+});