From dc691bcaf7881c41c68bd33d218c7f45d8b117a1 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Tue, 21 Feb 2023 10:48:55 +0000
Subject: [PATCH] integrate properly with audit log search api

---
 packages/bbui/src/Form/Core/Picker.svelte     |  4 +-
 .../_components/AppColumnRenderer.svelte      |  5 ++
 .../auditLogs/_components/TimeRenderer.svelte |  7 +-
 .../auditLogs/_components/UserRenderer.svelte | 10 ++-
 .../portal/account/auditLogs/index.svelte     | 75 ++++++++++++-------
 .../builder/src/stores/portal/auditLogs.js    | 20 +++--
 6 files changed, 80 insertions(+), 41 deletions(-)
 create mode 100644 packages/builder/src/pages/builder/portal/account/auditLogs/_components/AppColumnRenderer.svelte

diff --git a/packages/bbui/src/Form/Core/Picker.svelte b/packages/bbui/src/Form/Core/Picker.svelte
index fb0ce00824..ace41aa35b 100644
--- a/packages/bbui/src/Form/Core/Picker.svelte
+++ b/packages/bbui/src/Form/Core/Picker.svelte
@@ -145,7 +145,8 @@
     {#if autocomplete}
       <Search
         value={fetchTerm ? fetchTerm : searchTerm}
-        on:change={event => (fetchTerm = event.detail)}
+        on:change={event =>
+          fetchTerm ? (fetchTerm = event.detail) : (searchTerm = event.detail)}
         {disabled}
         placeholder="Search"
       />
@@ -265,7 +266,6 @@
   .popover-content :global(.spectrum-Search) {
     margin-top: -1px;
     margin-left: -1px;
-    width: calc(100% + 2px);
   }
   .popover-content :global(.spectrum-Search input) {
     height: auto;
diff --git a/packages/builder/src/pages/builder/portal/account/auditLogs/_components/AppColumnRenderer.svelte b/packages/builder/src/pages/builder/portal/account/auditLogs/_components/AppColumnRenderer.svelte
new file mode 100644
index 0000000000..f6665dff28
--- /dev/null
+++ b/packages/builder/src/pages/builder/portal/account/auditLogs/_components/AppColumnRenderer.svelte
@@ -0,0 +1,5 @@
+<script>
+  export let value
+</script>
+
+<div>{value.name}</div>
diff --git a/packages/builder/src/pages/builder/portal/account/auditLogs/_components/TimeRenderer.svelte b/packages/builder/src/pages/builder/portal/account/auditLogs/_components/TimeRenderer.svelte
index 7ec044604e..b6c0262b47 100644
--- a/packages/builder/src/pages/builder/portal/account/auditLogs/_components/TimeRenderer.svelte
+++ b/packages/builder/src/pages/builder/portal/account/auditLogs/_components/TimeRenderer.svelte
@@ -1,12 +1,11 @@
 <script>
   import dayjs from "dayjs"
-
-  export let row
-
   import relativeTime from "dayjs/plugin/relativeTime"
   dayjs.extend(relativeTime)
+
+  export let row
 </script>
 
 <div>
-  {dayjs(row.date).fromNow()}
+  {dayjs(row.timestamp).fromNow()}
 </div>
diff --git a/packages/builder/src/pages/builder/portal/account/auditLogs/_components/UserRenderer.svelte b/packages/builder/src/pages/builder/portal/account/auditLogs/_components/UserRenderer.svelte
index c9a69b4316..07551da3bc 100644
--- a/packages/builder/src/pages/builder/portal/account/auditLogs/_components/UserRenderer.svelte
+++ b/packages/builder/src/pages/builder/portal/account/auditLogs/_components/UserRenderer.svelte
@@ -1,6 +1,14 @@
 <script>
   import { Avatar } from "@budibase/bbui"
   export let row
+
+  const getInitials = user => {
+    let initials = ""
+    initials += user.firstName ? user.firstName[0] : ""
+    initials += user.lastName ? user.lastName[0] : ""
+
+    return initials === "" ? user.email[0] : initials
+  }
 </script>
 
-<Avatar size="M" initials={row.user[0]} />
+<Avatar size="M" initials={getInitials(row.user)} />
diff --git a/packages/builder/src/pages/builder/portal/account/auditLogs/index.svelte b/packages/builder/src/pages/builder/portal/account/auditLogs/index.svelte
index 88f042d240..09b8466d8e 100644
--- a/packages/builder/src/pages/builder/portal/account/auditLogs/index.svelte
+++ b/packages/builder/src/pages/builder/portal/account/auditLogs/index.svelte
@@ -13,17 +13,17 @@
   import { licensing, users, apps, auditLogs } from "stores/portal"
   import LockedFeature from "../../_components/LockedFeature.svelte"
   import { createPaginationStore } from "helpers/pagination"
-  import { setContext } from "svelte"
+  import { onMount, setContext } from "svelte"
   import ViewDetailsRenderer from "./_components/ViewDetailsRenderer.svelte"
   import UserRenderer from "./_components/UserRenderer.svelte"
   import TimeRenderer from "./_components/TimeRenderer.svelte"
+  import AppColumnRenderer from "./_components/AppColumnRenderer.svelte"
 
   const schema = {
-    name: { width: "1fr" },
-    date: { width: "1.5fr" },
+    date: { width: "0.8fr" },
     user: { width: "0.5fr" },
-    app: { width: "1fr" },
-    event: { width: "1fr" },
+    app: { width: "1fr", fieldName: "name" },
+    name: { width: "1fr" },
     view: { width: "auto", borderLeft: true, displayName: "" },
   }
 
@@ -40,6 +40,10 @@
       column: "date",
       component: TimeRenderer,
     },
+    {
+      column: "app",
+      component: AppColumnRenderer,
+    },
   ]
 
   let userSearchTerm = ""
@@ -55,22 +59,15 @@
   let sidePanelVisible = false
   let startDate, endDate
 
-  let data = [
-    {
-      name: "User created",
-      date: "2023-02-14T10:19:52.021Z",
-      user: "Peter Clement",
-      app: "School Admin Panel",
-      event: "User added",
-      metadata: {
-        name: "Peter Clement",
-        email: "",
-      },
-    },
-  ]
-
   $: fetchUsers(userPage, userSearchTerm)
-  $: fetchLogs(logsPage, logSearchTerm)
+  $: fetchLogs(
+    logsPage,
+    logSearchTerm,
+    startDate,
+    endDate,
+    selectedUsers,
+    selectedApps
+  )
 
   $: userPage = $userPageInfo.page
   $: logsPage = $logsPageInfo.page
@@ -97,7 +94,14 @@
     }
   }
 
-  const fetchLogs = async (logsPage, search) => {
+  const fetchLogs = async (
+    logsPage,
+    search,
+    startDate,
+    endDate,
+    selectedUsers,
+    selectedApps
+  ) => {
     if ($logsPageInfo.loading) {
       return
     }
@@ -117,7 +121,10 @@
         userIds: selectedUsers,
         appIds: selectedApps,
       })
-      logsPageInfo.fetched($auditLogs.hasNextPage, $auditLogs.nextPage)
+      logsPageInfo.fetched(
+        $auditLogs.logs.hasNextPage,
+        $auditLogs.logs.nextPage
+      )
     } catch (error) {
       console.log(error)
       notifications.error("Error getting audit logs")
@@ -170,6 +177,10 @@
   setContext("auditLogs", {
     viewDetails,
   })
+
+  onMount(async () => {
+    await auditLogs.getEventDefinitions()
+  })
 </script>
 
 <LockedFeature
@@ -211,16 +222,24 @@
       </div>
       <div class="select">
         <Multiselect
+          autocomplete
           placeholder="All apps"
           label="App"
-          getOptionValue={app => app.appId}
+          getOptionValue={app => "app_dev_" + app.appId}
           getOptionLabel={app => app.name}
           options={$apps}
           bind:value={selectedApps}
         />
       </div>
       <div class="select">
-        <Multiselect placeholder="All events" label="Event" />
+        <Multiselect
+          autocomplete
+          getOptionValue={event => event[0]}
+          getOptionLabel={event => event[1]}
+          options={Object.entries($auditLogs.events)}
+          placeholder="All events"
+          label="Event"
+        />
       </div>
     </div>
     <div style="padding-bottom: var(--spacing-s)">
@@ -228,14 +247,14 @@
     </div>
 
     <div style="max-width: 150px; ">
-      <Search placeholder="Search" value={""} />
+      <Search placeholder="Search" bind:value={logSearchTerm} />
     </div>
   </div>
   <Layout noPadding>
     <Table
       {customRenderers}
       on:click={viewDetails}
-      {data}
+      data={$auditLogs.logs.data}
       allowEditColumns={false}
       allowEditRows={false}
       allowSelectRows={false}
@@ -255,7 +274,8 @@
     <div class="side-panel-header">
       Audit Logs
       <Icon
-        icon="Close"
+        hoverable
+        name="Close"
         on:click={() => {
           sidePanelVisible = false
         }}
@@ -263,7 +283,6 @@
     </div>
     <div style="padding-top: 10px; height: 95%">
       <CoreTextArea
-        disabled={true}
         minHeight={"300px"}
         height={"100%"}
         value={JSON.stringify(selectedLog.metadata, null, 2)}
diff --git a/packages/builder/src/stores/portal/auditLogs.js b/packages/builder/src/stores/portal/auditLogs.js
index f866fcb3d7..3454aab95c 100644
--- a/packages/builder/src/stores/portal/auditLogs.js
+++ b/packages/builder/src/stores/portal/auditLogs.js
@@ -3,23 +3,31 @@ import { API } from "api"
 import { licensing } from "stores/portal"
 
 export function createAuditLogsStore() {
-  const { subscribe, set } = writable({
-    logs: [],
+  const { subscribe, update } = writable({
+    events: {},
+    logs: {},
   })
 
   async function search(opts = {}) {
     if (get(licensing).auditLogsEnabled) {
       const paged = await API.searchAuditLogs(opts)
-      set({
-        ...paged,
-        ...opts,
+
+      update(state => {
+        return { ...state, logs: { ...paged, opts } }
       })
+
       return paged
     }
   }
 
   async function getEventDefinitions() {
-    return await API.getEventDefinitions()
+    const events = await API.getEventDefinitions()
+
+    update(state => {
+      return { ...state, ...events }
+    })
+
+    console.log(events)
   }
 
   async function downloadLogs(opts = {}) {