From 412d750b6a2dfbccbfffe18e25434bfafeb3f362 Mon Sep 17 00:00:00 2001
From: Vishnu Narayanan <vishnu@chatwoot.com>
Date: Tue, 30 May 2023 14:41:29 +0530
Subject: [PATCH] feat: auditlogs design refactor cw1764 (#7181)

* chore: refactor auditlogs design

* chore: refactor aduit log text

* chore: fix 60% width for activity column

* chore: improve log text formatting

* Apply suggestions from code review

Co-authored-by: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>

* feat: show agent names if available in auditlogs

* chore: add sign_out

* Apply suggestions from code review

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

* chore: handle custom user actions

---------

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
Co-authored-by: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
---
 .../dashboard/i18n/locale/en/auditLogs.json   | 15 +++-
 .../dashboard/settings/auditlogs/Index.vue    | 83 +++++++++++++++----
 2 files changed, 78 insertions(+), 20 deletions(-)

diff --git a/app/javascript/dashboard/i18n/locale/en/auditLogs.json b/app/javascript/dashboard/i18n/locale/en/auditLogs.json
index e288e2959..a2bb40135 100644
--- a/app/javascript/dashboard/i18n/locale/en/auditLogs.json
+++ b/app/javascript/dashboard/i18n/locale/en/auditLogs.json
@@ -10,15 +10,22 @@
       "TITLE": "Manage Audit Logs",
       "DESC": "Audit Logs are trails for events and actions in a Chatwoot System.",
       "TABLE_HEADER": [
-        "User",
-        "Action",
-        "IP Address",
-        "Time"
+        "Activity",
+        "Time",
+        "IP Address"
       ]
     },
     "API": {
       "SUCCESS_MESSAGE": "AuditLogs retrieved successfully",
       "ERROR_MESSAGE": "Could not connect to Woot Server, Please try again later"
+    },
+    "ACTION": {
+      "ADD": "created",
+      "EDIT": "updated",
+      "DELETE": "deleted",
+      "SIGN_IN": "signed in",
+      "SIGN_OUT": "signed out",
+      "SYSTEM": "System"
     }
   }
 }
diff --git a/app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue
index 63856b6d8..f11bbb6f4 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="column content-box">
+  <div class="column content-box audit-log--settings">
     <!-- List Audit Logs -->
-    <div class="row">
-      <div class="small-8 columns with-right-space ">
+    <div>
+      <div>
         <p
           v-if="!uiFlags.fetchingList && !records.length"
           class="no-items-error-message"
@@ -16,8 +16,13 @@
 
         <table
           v-if="!uiFlags.fetchingList && records.length"
-          class="woot-table"
+          class="woot-table width-100"
         >
+          <colgroup>
+            <col class="column-activity" />
+            <col />
+            <col />
+          </colgroup>
           <thead>
             <!-- Header -->
             <th
@@ -29,12 +34,8 @@
           </thead>
           <tbody>
             <tr v-for="auditLogItem in records" :key="auditLogItem.id">
-              <td class="wrap-break-words">{{ auditLogItem.username }}</td>
               <td class="wrap-break-words">
-                {{ auditLogItem.auditable_type }}.{{ auditLogItem.action }}
-              </td>
-              <td class="remote-address">
-                {{ auditLogItem.remote_address }}
+                {{ generateLogText(auditLogItem) }}
               </td>
               <td class="wrap-break-words">
                 {{
@@ -44,6 +45,9 @@
                   )
                 }}
               </td>
+              <td class="remote-address">
+                {{ auditLogItem.remote_address }}
+              </td>
             </tr>
           </tbody>
         </table>
@@ -81,13 +85,48 @@ export default {
       records: 'auditlogs/getAuditLogs',
       uiFlags: 'auditlogs/getUIFlags',
       meta: 'auditlogs/getMeta',
+      agentList: 'agents/getAgents',
     }),
   },
   mounted() {
     // Fetch API Call
     this.$store.dispatch('auditlogs/fetch', { page: 1 });
+    this.$store.dispatch('agents/get');
   },
   methods: {
+    getAgentName(email) {
+      if (email === null) {
+        return this.$t('AUDIT_LOGS.ACTION.SYSTEM');
+      }
+      const agentName = this.agentList.find(agent => agent.email === email)
+        ?.name;
+      // If agent does not exist(removed/deleted), return email from audit log
+      return agentName || email;
+    },
+    generateLogText(auditLogItem) {
+      const username = this.getAgentName(auditLogItem.username);
+      const auditableType = auditLogItem.auditable_type.toLowerCase();
+      const action = auditLogItem.action.toLowerCase();
+
+      const logActions = {
+        create: this.$t('AUDIT_LOGS.ACTION.ADD'),
+        destroy: this.$t('AUDIT_LOGS.ACTION.DELETE'),
+        update: this.$t('AUDIT_LOGS.ACTION.EDIT'),
+        sign_in: this.$t('AUDIT_LOGS.ACTION.SIGN_IN'),
+        sign_out: this.$t('AUDIT_LOGS.ACTION.SIGN_OUT'),
+      };
+
+      // detect if the action is custom user action, which involves
+      // only the user, such as signing in, signing out etc.
+      // if it is, then do not show the auditable type
+      const userActions = this.getUserActions(action);
+      return `${username} ${logActions[action] || action} ${
+        userActions ? '' : auditableType
+      }`;
+    },
+    getUserActions(action) {
+      return ['sign_in', 'sign_out'].includes(action);
+    },
     onPageChange(page) {
       window.history.pushState({}, null, `${this.$route.path}?page=${page}`);
       try {
@@ -101,12 +140,24 @@ export default {
   },
 };
 </script>
-<style scoped>
-.remote-address {
-  width: 14rem;
-}
-.wrap-break-words {
-  word-break: break-all;
-  white-space: normal;
+
+<style lang="scss" scoped>
+.audit-log--settings {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+
+  .remote-address {
+    width: 14rem;
+  }
+
+  .wrap-break-words {
+    word-break: break-all;
+    white-space: normal;
+  }
+
+  .column-activity {
+    width: 60%;
+  }
 }
 </style>