feat(AuditEvents): migrate to new UI

Author: SteKoe

spring-boot-admin-server-ui/package.json

@@ -120,6 +120,6 @@
     "npm": ">=8"
   },
   "msw": {
-    "workerDirectory": "src/main/frontend/assets"
+    "workerDirectory": "./public"
   }
 }

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

@@ -26,8 +26,8 @@ import {createApp, h, reactive} from 'vue';
 import i18n from './i18n';
 import router from './router.js';
 import {createApplicationStore, useApplicationStore} from "./composables/useApplicationStore.js";
-import {createViewRegistry, useViewRegistry} from "./composables/ViewRegistry.js";
-import about from "./views/about/index.vue";
+import {createViewRegistry} from "./composables/ViewRegistry.js";
+import { worker } from './mocks/browser';
 
 moment.locale(navigator.language.split('-')[0]);
 
@@ -40,6 +40,14 @@ const installables = [
   ...sbaConfig.extensions
 ];
 
+if (process.env.NODE_ENV === 'development') {
+  worker.start({
+    serviceWorker: {
+      url: "./mockServiceWorker.js"
+    }
+  })
+}
+
 installables.forEach(installable => {
   installable.install({
     viewRegistry,

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

@@ -2,11 +2,13 @@ import {setupWorker} from 'msw'
 import mappingsEndpoint from "./instance/mappings/index.js";
 import liquibaseEndpoints from "./instance/liquibase/index.js";
 import flywayEndpoints from "./instance/flyway/index.js";
+import auditEventsEndpoint from "./instance/auditevents/index.js";
 
 const handler = [
   ...mappingsEndpoint,
   ...liquibaseEndpoints,
-  ...flywayEndpoints
+  ...flywayEndpoints,
+  ...auditEventsEndpoint
 ];
 
 export const worker = setupWorker(...handler)

spring-boot-admin-server-ui/src/main/frontend/mocks/instance/auditevents/data.js

@@ -0,0 +1,28 @@
+export default {
+  "events": [
+    {
+      "timestamp": "2017-03-14T22:59:58+0000",
+      "principal": "user",
+      "type": "AUTHENTICATION_FAILURE",
+      "data": {
+        "details": {
+          "remoteAddress": "0:0:0:0:0:0:0:1",
+          "sessionId": null
+        },
+        "type": "org.springframework.security.authentication.BadCredentialsException",
+        "message": "Bad credentials"
+      }
+    },
+    {
+      "timestamp": "2017-03-14T23:00:07+0000",
+      "principal": "user",
+      "type": "AUTHENTICATION_SUCCESS",
+      "data": {
+        "details": {
+          "remoteAddress": "0:0:0:0:0:0:0:1",
+          "sessionId": null
+        }
+      }
+    }
+  ]
+}

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

@@ -0,0 +1,14 @@
+import {rest} from "msw";
+import data from "./data.js";
+
+const endpoints = [
+  rest.get(
+    '/instances/:instanceId/actuator/auditevents',
+    (req, res, ctx) => {
+      console.log("[Auditevents] received request.")
+      return res(ctx.status(200), ctx.json(data));
+    }
+  ),
+];
+
+export default endpoints;

spring-boot-admin-server-ui/src/main/frontend/assets/mockServiceWorker.js renamed to spring-boot-admin-server-ui/src/main/frontend/public/mockServiceWorker.js

@@ -15,7 +15,7 @@
   -->
 
 <template>
-  <table class="auditevents table is-hoverable is-fullwidth">
+  <table class="auditevents table w-full">
     <thead>
       <tr>
         <th v-html="$t('instances.auditevents.timestamp')" />

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

@@ -15,81 +15,60 @@
   -->
 
 <template>
-  <section class="section">
-    <div class="field is-horizontal">
-      <div class="field-body">
-        <div class="field">
-          <p class="control is-expanded">
-            <input
-              v-model.trim="filter.principal"
-              class="input"
-              type="search"
-              :placeholder="$t('instances.auditevents.principal')"
-            >
-          </p>
-        </div>
-        <div class="field">
-          <p class="control is-expanded">
-            <input
-              v-model="filter.type"
-              list="auditevent-type"
-              class="input"
-              type="search"
-              :placeholder="$t('instances.auditevents.type')"
-            >
-            <datalist id="auditevent-type">
-              <option value="AUTHENTICATION_FAILURE" />
-              <option value="AUTHENTICATION_SUCCESS" />
-              <option value="AUTHENTICATION_SWITCH" />
-              <option value="AUTHORIZATION_FAILURE" />
-            </datalist>
-          </p>
-        </div>
-        <div class="field">
-          <p class="control is-expanded">
-            <input
-              class="input"
-              type="datetime-local"
-              placeholder="Date"
-              :value="formatDate(filter.after)"
-              @input="filter.after = parseDate($event.target.value)"
-            >
-          </p>
-        </div>
-      </div>
-    </div>
-    <template>
-      <div
-        v-if="error"
-        class="message is-danger"
-      >
-        <div class="message-body">
-          <strong>
-            <font-awesome-icon
-              class="has-text-danger"
-              icon="exclamation-triangle"
-            />
-            <span v-text="$t('term.fetch_failed')" />
-          </strong>
-          <p v-text="error.message" />
+  <sba-instance-section
+    :error="error"
+    :loading="isLoading"
+  >
+    <template #before>
+      <sba-sticky-subnav>
+        <div class="flex gap-2">
+          <sba-input
+            name="filter_principal"
+            v-model.trim="filter.principal"
+            type="search"
+            :placeholder="$t('instances.auditevents.principal')"
+          />
+          <sba-input
+            name="filter_type"
+            v-model="filter.type"
+            :list="[
+              'AUTHENTICATION_FAILURE',
+              'AUTHENTICATION_SUCCESS',
+              'AUTHENTICATION_SWITCH',
+              'AUTHORIZATION_FAILURE',
+            ]"
+            type="search"
+            :placeholder="$t('instances.auditevents.type')"
+          />
+
+          <sba-input
+            name="filter_datetime"
+            type="datetime-local"
+            placeholder="Date"
+            :value="formatDate(filter.after)"
+            @input="filter.after = parseDate($event.target.value)"
+          />
         </div>
-      </div>
-      <div
-        v-if="isOldAuditevents"
-        class="message is-warning"
-      >
+      </sba-sticky-subnav>
+    </template>
+
+    <sba-panel :seamless="true">
         <div
-          class="message-body"
-          v-html="$t('instances.auditevents.audit_log_not_supported_spring_boot_1')"
+          v-if="isOldAuditevents"
+          class="message is-warning"
+        >
+          <div
+            class="message-body"
+            v-html="$t('instances.auditevents.audit_log_not_supported_spring_boot_1')"
+          />
+        </div>
+        <auditevents-list
+          :instance="instance"
+          :events="events"
+          :is-loading="isLoading"
         />
-      </div>
-      <auditevents-list
-        :instance="instance"
-        :events="events"
-        :is-loading="isLoading"
-      />
-    </template>
-  </section>
+    </sba-panel>
+  </sba-instance-section>
 </template>
 
 <script>
@@ -100,6 +79,10 @@ import AuditeventsList from './auditevents-list.vue';
 import {uniqBy} from 'lodash-es';
 import moment from 'moment';
 import {VIEW_GROUP} from '../../ViewGroup.js';
+import SbaInstanceSection from "../shell/sba-instance-section.vue";
+import SbaStickySubnav from "../../../components/sba-sticky-subnav.vue";
+import SbaPanel from "../../../components/sba-panel.vue";
+import SbaInput from "../../../components/sba-input.vue";
 
 class Auditevent {
   constructor({timestamp, ...event}) {
@@ -130,7 +113,7 @@ class Auditevent {
 }
 
 export default {
-  components: {AuditeventsList},
+  components: {SbaInput, SbaInstanceSection, SbaStickySubnav, SbaPanel, AuditeventsList},
   mixins: [subscribing],
   props: {
     instance: {