chore: add missing loading state in AuditLog

Author: harshrajeevsingh

frontend/src/pages/admin/AuditLog.vue

@@ -7,7 +7,7 @@
                 </template>
             </ff-page-header>
         </template>
-        <AuditLogBrowser ref="AuditLog" :users="users" :logEntries="logEntries" logType="platform" @load-entries="loadEntries" />
+        <AuditLogBrowser ref="AuditLog" :users="users" :logEntries="logEntries" logType="platform" :loading="loading" @load-entries="loadEntries" />
     </ff-page>
 </template>
 
@@ -26,7 +26,8 @@ export default {
     data () {
         return {
             logEntries: [],
-            users: []
+            users: [],
+            loading: true
         }
     },
     computed: {
@@ -46,6 +47,8 @@ export default {
                 if (err.response?.status === 403) {
                     this.$router.push('/')
                 }
+            } finally {
+                this.loading = false
             }
         }
     }

frontend/src/pages/application/Activity.vue

@@ -1,5 +1,5 @@
 <template>
-    <AuditLogBrowser ref="AuditLog" :users="users" :logEntries="logEntries" :associations="associations" :logType="logScope" @load-entries="loadEntries">
+    <AuditLogBrowser ref="AuditLog" :users="users" :logEntries="logEntries" :associations="associations" :logType="logScope" :loading="loading" @load-entries="loadEntries">
         <template #title>
             <SectionTopMenu hero="Audit Log" info="Recorded events that have taken place in within this application." />
         </template>
@@ -61,6 +61,7 @@ export default {
     data () {
         return {
             logEntries: [],
+            loading: true,
             associations: {}, // applications, instances, devices
             users: [],
             auditFilters: {
@@ -122,16 +123,22 @@ export default {
                 }
                 params.set('includeChildren', includeChildren)
                 params.set('scope', paramScope)
-                if (this.applicationId) {
-                    let log
-                    if (paramScope === 'application') {
-                        log = (await ApplicationApi.getApplicationAuditLog(this.applicationId, params, cursor, 200))
-                    } else {
-                        const instanceId = this.auditFilters.selectedEventScope
-                        log = (await InstanceApi.getInstanceAuditLog(instanceId, params, cursor, 200))
+                try {
+                    if (this.applicationId) {
+                        let log
+                        if (paramScope === 'application') {
+                            log = (await ApplicationApi.getApplicationAuditLog(this.applicationId, params, cursor, 200))
+                        } else {
+                            const instanceId = this.auditFilters.selectedEventScope
+                            log = (await InstanceApi.getInstanceAuditLog(instanceId, params, cursor, 200))
+                        }
+                        this.logEntries = log.log
+                        this.associations = includeChildren ? log.associations : null
                     }
-                    this.logEntries = log.log
-                    this.associations = includeChildren ? log.associations : null
+                } catch (error) {
+                    console.error('Failed to load audit logs:', error)
+                } finally {
+                    this.loading = false
                 }
             }
         },

frontend/src/pages/device/AuditLog.vue

@@ -2,7 +2,7 @@
     <div class="mb-3">
         <SectionTopMenu hero="Audit Log" info="" />
     </div>
-    <AuditLogBrowser ref="AuditLog" :users="users" :logEntries="logEntries" logType="device" @load-entries="loadEntries" />
+    <AuditLogBrowser ref="AuditLog" :users="users" :logEntries="logEntries" logType="device" :loading="loading" @load-entries="loadEntries" />
 </template>
 
 <script>
@@ -29,7 +29,8 @@ export default {
     data () {
         return {
             logEntries: [],
-            users: []
+            users: [],
+            loading: true
         }
     },
     computed: {
@@ -52,7 +53,13 @@ export default {
         },
         async loadEntries (params = new URLSearchParams(), cursor = undefined) {
             const deviceId = this.device.id
-            this.logEntries = (await DeviceApi.getDeviceAuditLog(deviceId, params, cursor, 200)).log
+            try {
+                this.logEntries = (await DeviceApi.getDeviceAuditLog(deviceId, params, cursor, 200)).log
+            } catch (error) {
+                console.error('Failed to load audit logs:', error)
+            } finally {
+                this.loading = false
+            }
         }
     }
 }

frontend/src/pages/instance/AuditLog.vue

@@ -109,21 +109,15 @@ export default {
                 }
             } 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
-            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()
-            }
+            const eventTypes = this.auditFilters.selectedEventScope || 'instance'
+            events && this.$refs.AuditLog?.loadEntries(this.auditFilters.selectedEventScope, this.auditFilters.includeChildren, eventTypes)
+            users && this.loadUsers()
         }
 
     }

frontend/src/pages/team/AuditLog.vue

@@ -7,7 +7,7 @@
                 </template>
             </ff-page-header>
         </template>
-        <AuditLogBrowser ref="AuditLog" :users="users" :logEntries="logEntries" :associations="associations" logType="team" @load-entries="loadEntries">
+        <AuditLogBrowser ref="AuditLog" :users="users" :logEntries="logEntries" :associations="associations" logType="team" :loading="loading" @load-entries="loadEntries">
             <template #title>
                 <SectionTopMenu hero="Audit Log" info="Recorded events that have taken place in this Team." />
             </template>
@@ -64,6 +64,7 @@ export default {
     data () {
         return {
             logEntries: [],
+            loading: true,
             associations: {}, // applications, instances, devices
             users: [],
             auditFilters: {
@@ -118,9 +119,15 @@ export default {
                 }
                 params.set('includeChildren', includeChildren)
                 params.set('scope', paramScope)
-                const auditLog = (await TeamAPI.getTeamAuditLog(teamId, params, cursor, 200))
-                this.logEntries = auditLog.log
-                this.associations = auditLog.associations
+                try {
+                    const auditLog = (await TeamAPI.getTeamAuditLog(teamId, params, cursor, 200))
+                    this.logEntries = auditLog.log
+                    this.associations = auditLog.associations
+                } catch (error) {
+                    console.error('Failed to load audit logs:', error)
+                } finally {
+                    this.loading = false
+                }
             }
         },
         triggerLoad ({ users = false, events = true } = {}) {