fix: lift loading state to parent comp

Author: harshrajeevsingh

frontend/src/components/audit-log/AuditLogBrowser.vue

@@ -2,7 +2,7 @@
     <div class="ff-admin-audit">
         <div data-el="audit-log">
             <slot name="title" />
-            <AuditLog :entries="logEntries" :associations="associations" :loading="gettingEntries" />
+            <AuditLog :entries="logEntries" :associations="associations" :loading="loading" />
         </div>
         <div>
             <SectionTopMenu hero="Filters" />
@@ -56,6 +56,10 @@ export default {
             type: Array,
             required: true
         },
+        loading: {
+            type: Boolean,
+            required: true
+        },
         associations: {
             type: Object,
             default: () => {}
@@ -68,7 +72,6 @@ export default {
     emits: ['load-entries'],
     data () {
         return {
-            gettingEntries: true,
             auditFilters: {
                 event: '',
                 types: [],
@@ -98,22 +101,19 @@ export default {
     },
     watch: {
         'auditFilters.username': function () {
-            if (this.gettingEntries) {
+            if (this.loading) {
                 return // skip if we're already loading entries
             }
             this.loadEntries()
         },
         'auditFilters.event': function () {
-            if (this.gettingEntries) {
+            if (this.loading) {
                 return // skip if we're already loading entries
             }
             this.loadEntries()
         },
         users: function (users) {
             this.auditFilters.users = users
-        },
-        logEntries: function () {
-            this.gettingEntries = false
         }
 
     },
@@ -133,7 +133,6 @@ export default {
          * @param {string} [logType] The log type to load event type dropdown for
          */
         loadEntries (scope, includeChildren, logType) {
-            this.gettingEntries = true
             logType = logType || this.auditFilters.logType
             if (this.auditFilters.logType !== logType) {
                 this.auditFilters.logType = logType // store the scope for later queries

frontend/src/pages/instance/AuditLog.vue

@@ -1,5 +1,5 @@
 <template>
-    <AuditLogBrowser ref="AuditLog" :users="users" :logEntries="logEntries" :associations="associations" logType="project" @load-entries="loadEntries">
+    <AuditLogBrowser ref="AuditLog" :users="users" :logEntries="logEntries" :associations="associations" logType="project" :loading="loading" @load-entries="loadEntries">
         <template #title>
             <SectionTopMenu hero="Audit Log" info="Recorded events that have taken place in within this instance." />
         </template>
@@ -49,6 +49,7 @@ export default {
     data () {
         return {
             logEntries: [],
+            loading: true,
             associations: {}, // devices
             users: [],
             auditFilters: {
@@ -92,25 +93,37 @@ export default {
          * @param cursor - cursor to use for pagination
          */
         async loadEntries (params = new URLSearchParams(), cursor = undefined) {
-            if (this.instance.id) {
-                const auditLog = (await InstanceApi.getInstanceAuditLog(this.instance.id, params, cursor, 200))
-                this.logEntries = auditLog.log
-                // dont show associations if we are looking at "this" scope (project)"
-                let showAssociations = false
-                if (this.auditFilters.selectedEventScope === 'device') {
-                    showAssociations = true
+            try {
+                if (this.instance.id) {
+                    const auditLog = (await InstanceApi.getInstanceAuditLog(this.instance.id, params, cursor, 200))
+                    this.logEntries = auditLog.log
+                    // dont show associations if we are looking at "this" scope (project)"
+                    let showAssociations = false
+                    if (this.auditFilters.selectedEventScope === 'device') {
+                        showAssociations = true
+                    }
+                    if (this.auditFilters.selectedEventScope === 'project' && this.auditFilters.includeChildren) {
+                        showAssociations = true
+                    }
+                    this.associations = showAssociations ? auditLog.associations : null
                 }
-                if (this.auditFilters.selectedEventScope === 'project' && this.auditFilters.includeChildren) {
-                    showAssociations = true
-                }
-                this.associations = showAssociations ? auditLog.associations : null
+            } catch (error) {
+                console.error('Failed to load audit logs:', error)
+                this.auditLog = []
+            } finally {
+                this.loading = false
             }
         },
         triggerLoad ({ users = false, events = true } = {}) {
             // if `events` is true, call AuditLogBrowser.loadEntries - this will emit 'load-entries' event which calls this.loadEntries with appropriate params
-            const eventTypes = this.auditFilters.selectedEventScope || 'instance'
-            events && this.$refs.AuditLog?.loadEntries(this.auditFilters.selectedEventScope, this.auditFilters.includeChildren, eventTypes)
-            users && this.loadUsers()
+            if (events) {
+                const eventTypes = this.auditFilters.selectedEventScope || 'instance'
+                this.loading = true
+                this.$refs.AuditLog?.loadEntries(this.auditFilters.selectedEventScope, this.auditFilters.includeChildren, eventTypes)
+            }
+            if (users) {
+                this.loadUsers()
+            }
         }
 
     }