fix navigating to sessions with parameter set

spring-boot-admin-server-ui/src/main/frontend/services/instance.js

@@ -149,7 +149,7 @@ class Instance {
     });
   }
 
-  async fetchSessions(username) {
+  async fetchSessionsByUsername(username) {
     return axios.get(uri`instances/${this.id}/actuator/sessions`, {
       headers: {'Accept': actuatorMimeTypes},
       params: {username}

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

@@ -15,7 +15,7 @@
   -->
 
 <template>
-  <table class="table is-hoverable is-fullwidth">
+  <table class="auditevents table is-hoverable is-fullwidth">
     <thead>
       <tr>
         <th>Timestamp</th>
@@ -28,7 +28,7 @@
     <tbody>
       <template v-for="event in events">
         <tr class="is-selectable"
-            :class="{ 'event--is-detailed' : showDetails[event.key] }"
+            :class="{ 'auditevents__event--is-detailed' : showDetails[event.key] }"
             @click="showDetails[event.key] ? $delete(showDetails, event.key) : $set(showDetails, event.key, true)"
             :key="event.key">
           <td v-text="event.timestamp.format('L HH:mm:ss.SSS')"/>
@@ -48,9 +48,9 @@
           </td>
           <td v-else v-text="event.sessionId"/>
         </tr>
-        <tr class="event__detail" :key="`${event.key}-detail`" v-if="showDetails[event.key]">
+        <tr :key="`${event.key}-detail`" v-if="showDetails[event.key]">
           <td colspan="5">
-            <pre v-text="toJson(event.data)"/>
+            <pre class="auditevents__event-detail" v-text="toJson(event.data)"/>
           </td>
         </tr>
       </template>
@@ -94,14 +94,19 @@
 </script>
 
 <style lang="scss">
-  @import "~@/assets/css/utilities";
+  .auditevents {
+    table-layout: fixed;
 
-  .event--is-detailed td {
-    border: none !important;
-  }
+    td {
+      vertical-align: middle;
+    }
 
-  .event__detail td {
-    overflow-x: auto;
-    max-width: 1024px;
+    &__event--is-detailed td {
+      border: none !important;
+    }
+
+    &__event-detail {
+      overflow: auto;
+    }
   }
 </style>

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

@@ -15,39 +15,40 @@
   -->
 
 <template>
-  <table class="table is-hoverable is-fullwidth">
+  <table class="httptraces table is-hoverable is-fullwidth">
     <thead>
       <tr>
-        <th>Timestamp</th>
-        <th>Method</th>
-        <th>Path</th>
-        <th>Status</th>
-        <th>Content-Type</th>
-        <th>Content-Length</th>
-        <th>Time</th>
+        <th class="httptraces__trace-timestamp">Timestamp</th>
+        <th class="httptraces__trace-method">Method</th>
+        <th class="httptraces__trace-uri">Path</th>
+        <th class="httptraces__trace-status">Status</th>
+        <th class="httptraces__trace-contentType">Content-Type</th>
+        <th class="httptraces__trace-contentLength">Length</th>
+        <th class="httptraces__trace-timeTaken">Time</th>
       </tr>
     </thead>
     <tbody>
       <template v-for="trace in traces">
         <tr class="is-selectable"
-            :class="{ 'trace--is-detailed' : showDetails[trace.key] }"
+            :class="{ 'httptraces__trace---is-detailed' : showDetails[trace.key] }"
             @click="showDetails[trace.key] ? $delete(showDetails, trace.key) : $set(showDetails, trace.key, true)"
             :key="trace.key">
-          <td v-text="trace.timestamp.format('L HH:mm:ss.SSS')"/>
-          <td v-text="trace.request.method"/>
-          <td v-text="trace.request.uri"/>
-          <td>
+          <td class="httptraces__trace-timestamp" v-text="trace.timestamp.format('L HH:mm:ss.SSS')"/>
+          <td class="httptraces__trace-method" v-text="trace.request.method"/>
+          <td class="httptraces__trace-uri" v-text="trace.request.uri"/>
+          <td class="httptraces__trace-status">
             <span v-text="trace.response.status" class="tag"
                   :class="{ 'is-success' : trace.isSuccess(), 'is-warning' : trace.isClientError(), 'is-danger' : trace.isServerError() }"/>
           </td>
-          <td v-text="trace.contentType"/>
-          <td v-text="trace.contentLength ? prettyBytes(trace.contentLength) : ''"/>
-          <td
-            v-text="trace.timeTaken !== null && typeof trace.timeTaken !== 'undefined' ? `${trace.timeTaken} ms` : ''"/>
+          <td class="httptraces__trace-contentType" v-text="trace.contentType"/>
+          <td class="httptraces__trace-contentLength"
+              v-text="trace.contentLength ? prettyBytes(trace.contentLength) : ''"/>
+          <td class="httptraces__trace-timeTaken"
+              v-text="trace.timeTaken !== null && typeof trace.timeTaken !== 'undefined' ? `${trace.timeTaken} ms` : ''"/>
         </tr>
-        <tr class="trace__detail" :key="`${trace.key}-detail`" v-if="showDetails[trace.key]">
+        <tr :key="`${trace.key}-detail`" v-if="showDetails[trace.key]">
           <td colspan="7">
-            <pre v-text="toJson(trace)"/>
+            <pre class="httptraces__trace-detail" v-text="toJson(trace)"/>
           </td>
         </tr>
       </template>
@@ -83,12 +84,53 @@
 <style lang="scss">
   @import "~@/assets/css/utilities";
 
-  .trace--is-detailed td {
-    border: none !important;
-  }
+  .httptraces {
+    table-layout: fixed;
+
+    td {
+      vertical-align: middle;
+      overflow: hidden;
+      word-wrap: break-word;
+    }
+
+    &__trace {
+      &--is-detailed td {
+        border: none !important;
+      }
+
+      &-timestamp {
+        width: 130px;
+      }
+
+      &-method {
+        width: 100px;
+      }
 
-  .trace__detail td {
-    overflow-x: auto;
-    max-width: 1024px;
+      &-uri {
+        width: auto;
+      }
+
+      &-status {
+        width: 80px;
+      }
+
+      &-contentType {
+        width: 200px;
+      }
+
+      &-contentLength {
+        width: 100px;
+      }
+
+      &-timeTaken {
+        width: 120px;
+      }
+
+      &-detail {
+        overflow: auto;
+      }
+    }
   }
+
 </style>
+

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

@@ -27,7 +27,8 @@
           </span>
         </div>
         <div class="control is-expanded">
-          <input class="input" type="text" v-model="filter.value" @keyup.enter="fetchSessions()">
+          <input class="input" type="text" v-model="filter.value"
+                 @keyup.enter="fetchSessionsByUsername()" @paste="handlePaste">
         </div>
       </div>
       <div v-if="error" class="message is-danger">
@@ -39,7 +40,7 @@
           <p v-text="error.message"/>
         </div>
       </div>
-      <sba-sessions-list :instance="instance" :sessions="sessions"
+      <sba-sessions-list :instance="instance" :sessions="sessions" :is-loading="isLoading"
                          @deleted="fetch"/>
     </div>
   </section>
@@ -88,14 +89,13 @@
           if (this.filter.type === 'sessionId') {
             this.sessions = await this.fetchSession()
           } else {
-            this.sessions = await this.fetchSessions()
+            this.sessions = await this.fetchSessionsByUsername()
           }
         } catch (error) {
           console.warn('Fetching sessions failed:', error);
           this.error = error
-        } finally {
-          this.isLoading = false
         }
+        this.isLoading = false
       }, 250),
       async fetchSession() {
         try {
@@ -109,32 +109,33 @@
           }
         }
       },
-      async fetchSessions() {
-        const response = await this.instance.fetchSessions(this.filter.value);
+      async fetchSessionsByUsername() {
+        const response = await this.instance.fetchSessionsByUsername(this.filter.value);
         return response.data.sessions.map(session => new Session(session))
       },
-      updateFilter() {
-        this.filter = _.entries(this.$route.query)
-          .reduce((acc, [name, value]) => {
-            acc.type = name;
-            acc.value = value;
-            return acc;
-          }, {type: null, value: ''});
+      handlePaste(event) {
+        const looksLikeSessionId = event.clipboardData.getData('text').match(regexUuid);
+        if (looksLikeSessionId) {
+          this.filter.type = 'sessionId';
+        }
       }
     },
     watch: {
       '$route.query': {
-        handler: 'updateFilter',
-        immediate: true
+        immediate: true,
+        handler() {
+          this.filter = _.entries(this.$route.query)
+            .reduce((acc, [name, value]) => {
+              acc.type = name;
+              acc.value = value;
+              return acc;
+            }, {type: 'username', value: ''});
+        }
       },
       filter: {
         deep: true,
+        immediate: true,
         handler() {
-          if (this.filter.type === null) {
-            const looksLikeSessionId = this.filter.value.match(regexUuid);
-            this.filter.type = looksLikeSessionId ? 'sessionId' : 'username';
-          }
-
           const query = {[this.filter.type]: this.filter.value};
           if (!_.isEqual(query, !this.$route.query)) {
             this.$router.replace({
@@ -142,7 +143,6 @@
               query: query
             });
           }
-
           this.fetch();
         }
       }

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

@@ -15,13 +15,13 @@
   -->
 
 <template>
-  <table class="table is-fullwidth">
+  <table class="sessions table is-fullwidth">
     <thead>
       <tr>
-        <th/>
         <th>Session Id</th>
         <th>Created at</th>
         <th>Last accessed at</th>
+        <th>Expiry</th>
         <th>Max. inactive<br>interval
         </th>
         <th>Attributes</th>
@@ -39,15 +39,15 @@
     </thead>
     <tr v-for="session in sessions" :key="session.id">
       <td>
-        <span v-if="session.expired" class="tag is-info">Expired</span>
-      </td>
-      <td>
         <router-link v-text="session.id"
                      :to="{ name: 'instance/sessions', params: { 'instanceId' : instance.id}, query: { sessionId : session.id } }"/>
       </td>
       <td v-text="session.creationTime.format('L HH:mm:ss.SSS')"/>
       <td v-text="session.lastAccessedTime.format('L HH:mm:ss.SSS')"/>
       <td>
+        <span v-if="session.expired" class="tag is-info">Expired</span>
+      </td>
+      <td>
         <span v-if="session.maxInactiveInterval >= 0" v-text="`${session.maxInactiveInterval}s`"/>
         <span v-else>unlimited</span>
       </td>
@@ -66,7 +66,10 @@
       </td>
     </tr>
     <tr v-if="sessions.length === 0">
-      <td class="is-muted" colspan="7 ">No sessions found.</td>
+      <td class="is-muted" colspan="7 ">
+        <p v-if="isLoading" class="is-loading">Loading Sessions...</p>
+        <p v-else>No Sessions found.</p>
+      </td>
     </tr>
   </table>
 </template>
@@ -85,6 +88,10 @@
       instance: {
         type: Instance,
         required: true
+      },
+      isLoading: {
+        type: Boolean,
+        default: false
       }
     },
     data: () => ({
@@ -135,3 +142,10 @@
     }
   }
 </script>
+<style lang="scss">
+  .sessions {
+    & td {
+      vertical-align: middle;
+    }
+  }
+</style>