link auditevents to sessions if sessions is active

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

@@ -15,18 +15,26 @@
   -->
 
 <template>
-    <button @click="click()">
+    <button @click="click()" class="confirm-button" :class="{ 'is-warning' : confirm }" v-on-clickaway="abort">
         <slot name="confirm" v-if="confirm">Confirm</slot>
         <slot v-else></slot>
     </button>
 </template>
 
 <script>
+  import {directive as onClickaway} from 'vue-clickaway';
+
   export default {
+    directives: {
+      onClickaway
+    },
     data: () => ({
       confirm: false
     }),
     methods: {
+      abort() {
+        this.confirm = false;
+      },
       click(event) {
         if (this.confirm) {
           this.$emit('click', event);
@@ -35,4 +43,13 @@
       }
     }
   }
-</script>
\ No newline at end of file
+</script>
+
+
+<style lang="scss">
+    @import "~@/assets/css/utilities";
+
+    .confirm-button {
+        transition: all $easing 150ms;
+    }
+</style>
\ No newline at end of file

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

@@ -89,7 +89,7 @@ views.register({
   }, {
     path: 'auditevents', component: sbaInstancesAuditevents, props: true, name: 'instance/auditevents',
   }, {
-    path: 'sessions', component: sbaInstancesSessions, props: true, name: 'instance/sessions',
+    path: 'sessions/:sessionId?', component: sbaInstancesSessions, props: true, name: 'instance/sessions',
   }, {
     path: 'liquibase', component: sbaInstancesLiquibase, props: true, name: 'instance/liquibase',
   }, {

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

@@ -18,7 +18,7 @@
     <div class="applications-list">
         <template v-for="application in applications">
             <div v-if="selected !== application.name" :key="application.name"
-                 @click.stop="selected = application.name"
+                 @click.stop="select(application.name)"
                  class="applications-list-item applications-list-item--collapsed">
                 <sba-status :status="application.status"
                             :date="application.statusTimestamp"
@@ -44,10 +44,10 @@
                 </div>
             </div>
             <div v-else :key="application.name"
-                 v-on-clickaway="() => selected = null"
+                 v-on-clickaway="deselect"
                  class="applications-list-item applications-list-item--detailed">
                 <div class="applications-list-item__header"
-                     @click.stop="selected = null">
+                     @click.stop="deselect()">
                     <div class="applications-list-item__header-text" v-text="application.name"></div>
                     <div class="applications-list-item__header-actions">
                         <sba-icon-button
@@ -100,6 +100,12 @@
     }),
 
     methods: {
+      select(name) {
+        this.selected = name;
+      },
+      deselect() {
+        this.selected = null;
+      },
       showDetails(instance) {
         this.$router.push(`/instances/${instance.id}`)
       },

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

@@ -37,7 +37,12 @@
                 </td>
                 <td v-text="event.principal"></td>
                 <td v-text="event.remoteAddress"></td>
-                <td v-text="event.sessionId"></td>
+                <td v-if="hasSessionEndpoint && event.sessionId">
+                    <router-link v-text="event.sessionId"
+                                 :to="{ name: 'instance/sessions', params: { 'instanceId' : instance.id, sessionId : event.sessionId } }">
+                    </router-link>
+                </td>
+                <td v-else v-text="event.sessionId"></td>
             </tr>
             <tr class="event__detail" :key="`${event.key}-detail`" v-if="showDetails[event.key]">
                 <td colspan="5">
@@ -55,10 +60,15 @@
   import prettyBytes from 'pretty-bytes';
 
   export default {
-    props: ['events'],
+    props: ['events', 'instance'],
     data: () => ({
       showDetails: {}
     }),
+    computed: {
+      hasSessionEndpoint() {
+        return this.instance && this.instance.hasEndpoint('sessions');
+      }
+    },
     methods: {
       prettyBytes,
       toJson(obj) {

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

@@ -18,7 +18,7 @@
     <section class="section" :class="{ 'is-loading' : !events}">
         <div class="container" v-if="events">
             <div class="content">
-                <auditevents-list :events="events"></auditevents-list>
+                <auditevents-list :instance="instance" :events="events"></auditevents-list>
             </div>
         </div>
     </section>
@@ -66,7 +66,6 @@
     data: () => ({
       events: null,
     }),
-    computed: {},
     watch: {
       instance() {
         this.subscribe();

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

@@ -45,6 +45,8 @@
   import moment from 'moment';
   import sbaSessionsList from './sessions-list';
 
+  const regexUuid = /[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}/;
+
   class Session {
     constructor({id, attributeNames, creationTime, lastAccessedTime, maxInactiveInterval, expired}) {
       this.id = id;
@@ -57,7 +59,7 @@
   }
 
   export default {
-    props: ['instance'],
+    props: ['instance', 'sessionId'],
     components: {sbaSessionsList},
     data: () => ({
       filter: '',
@@ -65,30 +67,52 @@
       sessions: [],
       isLoading: false
     }),
-    computed: {},
     methods: {
       fetchSessions: _.debounce(async function () {
         if (!this.filter) {
           this.sessions = [];
           return;
         }
+
         this.isLoading = true;
-        if (this.filtertype === 'username') {
-          const response = await this.instance.fetchSessions(this.filter);
-          this.sessions = response.data.sessions.map(session => new Session(session));
-        } else {
-          const response = await this.instance.fetchSession(this.filter);
-          this.sessions = [new Session(response.data)];
+        try {
+          if (this.filtertype === 'username') {
+            const response = await this.instance.fetchSessions(this.filter);
+            this.sessions = response.data.sessions.map(session => new Session(session));
+          } else {
+            try {
+              const response = await this.instance.fetchSession(this.filter);
+              this.sessions = [new Session(response.data)];
+
+            } catch (error) {
+              if (error.response.status === 404) {
+                this.sessions = [];
+              } else {
+                throw error;
+              }
+            }
+          }
+        } finally {
+          this.isLoading = false;
         }
-        this.isLoading = false;
       }, 250)
     },
+    mounted() {
+      if (this.sessionId) {
+        this.filtertype = 'sessionId';
+        this.filter = this.sessionId;
+      }
+    },
     watch: {
       filtertype() {
         this.fetchSessions();
       },
       filter() {
-        this.fetchSessions();
+        if (this.filter.match(regexUuid) && this.filtertype !== 'sessionId') {
+          this.filtertype = 'sessionId';
+        } else {
+          this.fetchSessions();
+        }
       }
     }
   }

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

@@ -22,7 +22,7 @@
             <th>Session Id</th>
             <th>Created at</th>
             <th>Last accessed at</th>
-            <th>Max. inactive interval
+            <th>Max. inactive<br>interval
             </th>
             <th>Attributes</th>
             <th>