From bd42337170c9ac0a549a2c79f705a283c0859a82 Mon Sep 17 00:00:00 2001
From: Grady Berry Ward <grady@siliconally.org>
Date: Mon, 22 Jan 2024 08:48:36 -0700
Subject: [PATCH] Finishes Audit Log Interface (#156)

---
 frontend/assets/css/overrides.css             |  39 +-
 .../components/CalendarRangeWithISOModel.vue  |  62 ++
 frontend/components/standard/FullWidth.vue    |  21 +
 frontend/components/standard/Nav.vue          |   1 -
 frontend/lang/en.json                         |  10 +-
 frontend/lib/auditlogquery/index.ts           |   8 +-
 frontend/package-lock.json                    |  14 +-
 frontend/package.json                         |   2 +-
 frontend/pages/audit-logs.vue                 | 659 +++++++++++++-----
 frontend/plugins/primevue.ts                  |  20 +-
 10 files changed, 630 insertions(+), 206 deletions(-)
 create mode 100644 frontend/components/CalendarRangeWithISOModel.vue
 create mode 100644 frontend/components/standard/FullWidth.vue

diff --git a/frontend/assets/css/overrides.css b/frontend/assets/css/overrides.css
index a0dded6..e769930 100644
--- a/frontend/assets/css/overrides.css
+++ b/frontend/assets/css/overrides.css
@@ -1,21 +1,21 @@
 .h-0 {
-    height: 0;
+  height: 0;
 }
 
 .text-success {
-    color: #4a7747;
+  color: #4a7747;
 }
 
 div.p-toast {
-    opacity: 1;
+  opacity: 1;
 }
 
 .p-button.p-button-icon-only.p-button.p-button-xs,
 .p-button.p-button-xs {
-    padding: 0.25rem 0.5rem;
-    font-size: 0.875rem;
-    font-weight: 600;
-    width: auto;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  width: auto;
 }
 
 .code, .code-block {
@@ -30,4 +30,27 @@ div.p-toast {
 
 .p-message-wrapper .p-message-icon, .p-message-wrapper .p-message-close {
   flex-shrink: 0;
-}
\ No newline at end of file
+}
+
+.p-inputwrapper-filled.p-inputwrapper.p-multiselect.p-multiselect-chip
+.p-multiselect-label {
+  display: flex;
+  flex-wrap: wrap;
+  gap: .25rem;
+  padding: .25rem .5rem;
+}
+
+.p-inputwrapper-filled.p-inputwrapper.p-multiselect.p-multiselect-chip
+.p-multiselect-label
+.p-multiselect-token {
+  margin-right: 0;
+}
+
+div.p-chips .p-chips-multiple-container {
+  gap: .25rem;
+  padding: .25rem .5rem;
+}
+
+div.p-chips .p-chips-multiple-container .p-chips-token {
+  margin-right: 0;
+}
diff --git a/frontend/components/CalendarRangeWithISOModel.vue b/frontend/components/CalendarRangeWithISOModel.vue
new file mode 100644
index 0000000..fcf1198
--- /dev/null
+++ b/frontend/components/CalendarRangeWithISOModel.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+interface Props {
+  value: Array<string | undefined> | undefined
+}
+const props = defineProps<Props>()
+interface Emits {
+  (event: 'update:value', value: Array<string | undefined> | undefined): void
+}
+const emit = defineEmits<Emits>()
+
+const decode = (value: string | null | undefined): Date | null => {
+  if (value === null || value === undefined || value === '') {
+    return null
+  }
+  return new Date(value)
+}
+const encode = (value: Date | null | undefined): string => {
+  if (value === null || value === undefined) {
+    return ''
+  }
+  return value.toISOString()
+}
+const addDay = (date: Date | null): Date | null => {
+  if (date === null) {
+    return null
+  }
+  return new Date(date.getTime() + 24 * 60 * 60 * 1000)
+}
+const subDay = (date: Date | null): Date | null => {
+  if (date === null) {
+    return null
+  }
+  return new Date(date.getTime() - 24 * 60 * 60 * 1000)
+}
+
+// We use the addDay/subDay to make sure end-dates selected on the calendar are
+// included in the range for search. Otherwise, the filter will exclude the last day,
+// since the Calendar component selects the first millisecond of the date given.
+const model = computed<Array<Date | null>>({
+  get: () => props.value
+    ? [
+        decode(props.value[0]),
+        subDay(decode(props.value[1])),
+      ]
+    : [new Date(), new Date()],
+  set: (value: Array<Date | null>) => {
+    emit('update:value', [
+      encode(value[0]),
+      encode(addDay(value[1])),
+    ])
+  },
+})
+</script>
+
+<template>
+  <PVCalendar
+    v-model="model"
+    inline
+    selection-mode="range"
+    :manual-input="false"
+  />
+</template>
diff --git a/frontend/components/standard/FullWidth.vue b/frontend/components/standard/FullWidth.vue
new file mode 100644
index 0000000..6e0e117
--- /dev/null
+++ b/frontend/components/standard/FullWidth.vue
@@ -0,0 +1,21 @@
+<template>
+  <div
+    class="standard-full-width"
+  >
+    <slot />
+  </div>
+</template>
+
+<style lang="scss">
+.standard-full-width {
+  width: calc(100vw - 1rem);
+  margin: 0 calc(50% - 50vw + .5rem);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.standard-full-width > * {
+  width: 100%;
+}
+</style>
diff --git a/frontend/components/standard/Nav.vue b/frontend/components/standard/Nav.vue
index 7ac8b7c..353a07f 100644
--- a/frontend/components/standard/Nav.vue
+++ b/frontend/components/standard/Nav.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { type MenuItem } from 'primevue/menuitem'
-import type * as PrimeVueMenu from 'primevue/menu'
 
 const { t } = useI18n()
 const localePath = useLocalePath()
diff --git a/frontend/lang/en.json b/frontend/lang/en.json
index 4805e5f..26abd23 100644
--- a/frontend/lang/en.json
+++ b/frontend/lang/en.json
@@ -431,7 +431,15 @@
     "Secondary Target": "Secondary Target",
     "Secondary Target ID": "Secondary Target ID",
     "Secondary Target Owner": "Secondary Target Owner",
-    "Secondary Target Type": "Secondary Target Type"
+    "Secondary Target Type": "Secondary Target Type",
+    "Filter To Specific Values": "Values To Include",
+    "Columns": "Columns",
+    "Column Selection": "Column Selection",
+    "Select or Remove Columns To Display": "Select or Remove Columns to Display",
+    "Reset":  "Reset",
+    "Done": "Done",
+    "DescriptionParagraph1": "RMI takes the security of your data with the utmost care. To that end, we have implemented a robust audit logging system that tracks all changes to your data, and who made those changes. This audit log is available to you at any time, and can be filtered by time, user, or action. Hopefully this will give you some peace of mind that your sensitive data is being appropriately handled.",
+    "DescriptionParagraph2": "If you have any questions about the audit log, or if you think that something is missing, or you would like to learn more, please contact us."
   },
   "pages/index": {
     "Heading": "PACTA for Investors",
diff --git a/frontend/lib/auditlogquery/index.ts b/frontend/lib/auditlogquery/index.ts
index 5b690c5..6297d02 100644
--- a/frontend/lib/auditlogquery/index.ts
+++ b/frontend/lib/auditlogquery/index.ts
@@ -47,9 +47,9 @@ const encodeAuditLogQueryWheres = (wheres: AuditLogQueryWhere[]): string => {
     } else if (where.inTargetOwnerId) {
       components.push(`TargetOwnerId:${where.inTargetOwnerId.join('|')}`)
     } else if (where.minCreatedAt) {
-      components.push(`MinCreatedAt:${where.minCreatedAt}`)
+      components.push(`MinCreatedAt:${where.minCreatedAt.replaceAll(':', '_')}`)
     } else if (where.maxCreatedAt) {
-      components.push(`MaxCreatedAt:${where.maxCreatedAt}`)
+      components.push(`MaxCreatedAt:${where.maxCreatedAt.replaceAll(':', '_')}`)
     } else {
       console.warn(new Error(`Unknown where: ${JSON.stringify(where)}`))
     }
@@ -108,12 +108,12 @@ const decodeAudtLogQueryWheres = (wheres: string): AuditLogQueryWhere[] => {
         break
       case 'MinCreatedAt':
         result.push({
-          minCreatedAt: value,
+          minCreatedAt: value.replaceAll('_', ':'),
         })
         break
       case 'MaxCreatedAt':
         result.push({
-          maxCreatedAt: value,
+          maxCreatedAt: value.replaceAll('_', ':'),
         })
         break
       default:
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index e38fa00..37b4169 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -11,7 +11,7 @@
         "jszip": "^3.10.1",
         "primeflex": "^3.3.1",
         "primeicons": "^6.0.1",
-        "primevue": "^3.32.0",
+        "primevue": "^3.32.1",
         "serialize-error": "^11.0.3",
         "uuid": "^9.0.0",
         "vue-i18n": "^9.5.0"
@@ -14546,9 +14546,9 @@
       "integrity": "sha512-KDeO94CbWI4pKsPnYpA1FPjo79EsY9I+M8ywoPBSf9XMXoe/0crjbUK7jcQEDHuc0ZMRIZsxH3TYLv4TUtHmAA=="
     },
     "node_modules/primevue": {
-      "version": "3.32.0",
-      "resolved": "https://registry.npmjs.org/primevue/-/primevue-3.32.0.tgz",
-      "integrity": "sha512-ndZgA+Hg8P6iR74JnT5JZe7OAqQR/u/OA9D/cKZP7mj5hLBHNtrKuJToy3TZ0f3bXa1DIiwcV05afdTR1BiCyg==",
+      "version": "3.32.1",
+      "resolved": "https://registry.npmjs.org/primevue/-/primevue-3.32.1.tgz",
+      "integrity": "sha512-SXeakYM2ZrRm7JHJ3pCqI0Nw2lHwZGXelt8oEsaG00uzHP+E2bDc2dLL2DrcHG5eLtp0E4ZSFmIYW4+q5joJFw==",
       "peerDependencies": {
         "vue": "^3.0.0"
       }
@@ -29549,9 +29549,9 @@
       "integrity": "sha512-KDeO94CbWI4pKsPnYpA1FPjo79EsY9I+M8ywoPBSf9XMXoe/0crjbUK7jcQEDHuc0ZMRIZsxH3TYLv4TUtHmAA=="
     },
     "primevue": {
-      "version": "3.32.0",
-      "resolved": "https://registry.npmjs.org/primevue/-/primevue-3.32.0.tgz",
-      "integrity": "sha512-ndZgA+Hg8P6iR74JnT5JZe7OAqQR/u/OA9D/cKZP7mj5hLBHNtrKuJToy3TZ0f3bXa1DIiwcV05afdTR1BiCyg==",
+      "version": "3.32.1",
+      "resolved": "https://registry.npmjs.org/primevue/-/primevue-3.32.1.tgz",
+      "integrity": "sha512-SXeakYM2ZrRm7JHJ3pCqI0Nw2lHwZGXelt8oEsaG00uzHP+E2bDc2dLL2DrcHG5eLtp0E4ZSFmIYW4+q5joJFw==",
       "requires": {}
     },
     "proc-log": {
diff --git a/frontend/package.json b/frontend/package.json
index cdefa09..04b1609 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -44,7 +44,7 @@
     "jszip": "^3.10.1",
     "primeflex": "^3.3.1",
     "primeicons": "^6.0.1",
-    "primevue": "^3.32.0",
+    "primevue": "^3.32.1",
     "serialize-error": "^11.0.3",
     "uuid": "^9.0.0",
     "vue-i18n": "^9.5.0"
diff --git a/frontend/pages/audit-logs.vue b/frontend/pages/audit-logs.vue
index 0a6abbe..9004ecb 100644
--- a/frontend/pages/audit-logs.vue
+++ b/frontend/pages/audit-logs.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { type AuditLogQuerySort, type AuditLogQueryReq, AuditLogTargetType, AuditLogQuerySortBy, type AuditLog } from '@/openapi/generated/pacta'
+import { type AuditLogQuerySort, type AuditLogQueryWhere, type AuditLogQueryReq, AuditLogAction, AuditLogTargetType, AuditLogQuerySortBy, type AuditLog } from '@/openapi/generated/pacta'
 import { urlReactiveAuditLogQuery } from '@/lib/auditlogquery'
 import { type DataTableSortMeta } from 'primevue/datatable'
+import { FilterMatchMode } from 'primevue/api'
 
 const prefix = 'pages/audit-logs'
 
@@ -17,7 +18,10 @@ const { maybeMe } = await getMaybeMe()
 const tt = (s: string) => t(`${prefix}.${s}`)
 
 const auditLogQuery = urlReactiveAuditLogQuery(fromQueryReactiveWithDefault)
-const selectedColumnsQuery = fromQueryReactiveWithDefault('cols', 'createdAt,actor,action,primaryTarget,secondaryTarget')
+const defaultSelectedColumns = 'createdAt,actor,action,primaryTarget,secondaryTarget'
+const selectedColumnsQuery = fromQueryReactiveWithDefault('cols', defaultSelectedColumns)
+
+const resetColumns = () => { selectedColumnsQuery.value = defaultSelectedColumns }
 
 interface DataResponse {
   auditLogs: AuditLog[]
@@ -30,11 +34,28 @@ const dataResponse = useState<DataResponse>(`${prefix}.dataResponse`, () => ({
   hasNextPage: true,
 }))
 const expandedRows = useState<AuditLog[]>(`${prefix}.expandedRows`, () => [])
-
-const refreshAuditLogs = () => withLoading(
-  () => pactaClient.listAuditLogs(auditLogQuery.value).then((resp) => { dataResponse.value = resp }),
-  'audit-logs.refresh',
-)
+const refreshAuditLogs = async (): Promise<void> => {
+  await withLoading(
+    () => pactaClient.listAuditLogs(auditLogQuery.value).then((resp) => { dataResponse.value = resp }),
+    'audit-logs.refresh',
+  )
+}
+const lastLoadedQuery = useState<string>(`${prefix}.currentlyLoading`, () => '')
+const activelyRefreshing = useState<boolean>(`${prefix}.activelyRefreshing`, () => false)
+const refreshAuditLogsIfQueryIsStale = async (): Promise<void> => {
+  if (activelyRefreshing.value) {
+    return
+  }
+  activelyRefreshing.value = true
+  const queryValue = auditLogQuery.value
+  const current = JSON.stringify(queryValue)
+  if (lastLoadedQuery.value !== current) {
+    lastLoadedQuery.value = current
+    await refreshAuditLogs()
+  }
+  activelyRefreshing.value = false
+}
+watch(auditLogQuery, refreshAuditLogsIfQueryIsStale, { deep: true })
 const auditLogs = computed<AuditLog[]>(() => dataResponse.value.auditLogs)
 const hasNextPage = computed<boolean>(() => dataResponse.value.hasNextPage)
 const hasPrevPage = computed<boolean>(() => showingRange.value.start > 1)
@@ -65,12 +86,10 @@ const doUpdate = (fn: (v: AuditLogQueryReq) => void): void => {
   fn(newQuery)
   auditLogQuery.value = newQuery
 }
-/* When we support filtering, we'll need this
 const wheres = computed<AuditLogQueryWhere[]>({
   get: () => auditLogQuery.value.wheres,
   set: (v: AuditLogQueryWhere[]) => { doUpdate((alq: AuditLogQueryReq) => { alq.wheres = v }) },
 })
-*/
 const sorts = computed<AuditLogQuerySort[]>({
   get: () => auditLogQuery.value.sorts ?? [],
   set: (v: AuditLogQuerySort[]) => { doUpdate((alq: AuditLogQueryReq) => { alq.sorts = v }) },
@@ -80,20 +99,90 @@ const cursor = computed<string | undefined>({
   set: (v: string | undefined) => { doUpdate((alq: AuditLogQueryReq) => { alq.cursor = v }) },
 })
 
+enum FilterType {
+  StringBased,
+  EnumBased,
+  TimeBased,
+}
+interface OurDataTableFilterMeta {
+  id: {
+    value: string[] | undefined
+    matchMode: string
+  }
+  createdAt: {
+    value: Array<string | null> | undefined
+    matchMode: string
+  }
+  actor: {
+    value: string[] | undefined
+    matchMode: string
+  }
+  action: {
+    value: AuditLogAction[] | undefined
+    matchMode: string
+  }
+  primaryTarget: {
+    value: string[] | undefined
+    matchMode: string
+  }
+  secondaryTarget: {
+    value: string[] | undefined
+    matchMode: string
+  }
+  actorId: {
+    value: string[] | undefined
+    matchMode: string
+  }
+  actorOwnerId: {
+    value: string[] | undefined
+    matchMode: string
+  }
+  primaryTargetType: {
+    value: AuditLogTargetType[] | undefined
+    matchMode: string
+  }
+  primaryTargetId: {
+    value: string[] | undefined
+    matchMode: string
+  }
+  primaryTargetOwner: {
+    value: string[] | undefined
+    matchMode: string
+  }
+  secondaryTargetType: {
+    value: AuditLogTargetType[] | undefined
+    matchMode: string
+  }
+  secondaryTargetId: {
+    value: string[] | undefined
+    matchMode: string
+  }
+  secondaryTargetOwner: {
+    value: string[] | undefined
+    matchMode: string
+  }
+}
 interface Column {
-  field: string
+  field: keyof OurDataTableFilterMeta
   header: string
   sortBy?: AuditLogQuerySortBy | undefined
   customBody?: boolean
+  filterType?: FilterType | undefined
+  enumValues?: Array<{ value: string, label: string }> | undefined
 }
 
 const allColumns: Column[] = [
-  { field: 'id', header: tt('ID') },
+  {
+    field: 'id',
+    header: tt('ID'),
+    filterType: FilterType.StringBased,
+  },
   {
     field: 'createdAt',
     header: tt('Time'),
     sortBy: AuditLogQuerySortBy.AUDIT_LOG_QUERY_SORT_BY_CREATED_AT,
     customBody: true,
+    filterType: FilterType.TimeBased,
   },
   {
     field: 'actor',
@@ -105,6 +194,11 @@ const allColumns: Column[] = [
     field: 'action',
     header: tt('Action'),
     customBody: true,
+    filterType: FilterType.EnumBased,
+    enumValues: Object.values(AuditLogAction).map((a: AuditLogAction) => ({
+      label: a.replace('AuditLogAction', ''),
+      value: a,
+    })).sort((a, b) => a.label.localeCompare(b.label)),
   },
   {
     field: 'primaryTarget',
@@ -122,26 +216,36 @@ const allColumns: Column[] = [
     field: 'actorId',
     header: tt('Actor ID'),
     sortBy: AuditLogQuerySortBy.AUDIT_LOG_QUERY_SORT_BY_ACTOR_ID,
+    filterType: FilterType.StringBased,
   },
   {
     field: 'actorOwnerId',
     header: tt('Actor Owner ID'),
     sortBy: AuditLogQuerySortBy.AUDIT_LOG_QUERY_SORT_BY_ACTOR_OWNER_ID,
+    filterType: FilterType.StringBased,
+
   },
   {
     field: 'primaryTargetType',
     header: tt('Primary Target Type'),
     sortBy: AuditLogQuerySortBy.AUDIT_LOG_QUERY_SORT_BY_PRIMARY_TARGET_TYPE,
+    filterType: FilterType.EnumBased,
+    enumValues: Object.values(AuditLogTargetType).map((a: AuditLogTargetType) => ({
+      label: a.replace('AuditLogTargetType', ''),
+      value: a,
+    })).sort((a, b) => a.label.localeCompare(b.label)),
   },
   {
     field: 'primaryTargetId',
     header: tt('Primary Target ID'),
     sortBy: AuditLogQuerySortBy.AUDIT_LOG_QUERY_SORT_BY_PRIMARY_TARGET_ID,
+    filterType: FilterType.StringBased,
   },
   {
     field: 'primaryTargetOwner',
     header: tt('Primary Target Owner'),
     sortBy: AuditLogQuerySortBy.AUDIT_LOG_QUERY_SORT_BY_PRIMARY_TARGET_OWNER_ID,
+    filterType: FilterType.StringBased,
   },
   {
     field: 'secondaryTargetType',
@@ -166,6 +270,119 @@ const selectedColumns = computed<Column[]>({
   },
   set: (v: Column[]) => { selectedColumnsQuery.value = v.map(c => c.field).join(',') },
 })
+
+const tableFilterModel = computed<OurDataTableFilterMeta>({
+  get: () => {
+    const partial: Partial<OurDataTableFilterMeta> = {}
+    for (const column of allColumns) {
+      switch (column.filterType) {
+        case FilterType.StringBased:
+        case FilterType.EnumBased:
+          partial[column.field] = { value: undefined, matchMode: FilterMatchMode.IN }
+          break
+        case FilterType.TimeBased:
+          partial[column.field] = { value: undefined, matchMode: FilterMatchMode.BETWEEN }
+          break
+        case undefined:
+          break
+      }
+    }
+    const result = partial as OurDataTableFilterMeta
+    const ws = wheres.value
+    for (const w of ws) {
+      if (w.inId) {
+        result.id.value = w.inId
+      }
+      if (w.minCreatedAt) {
+        if (!result.createdAt.value) {
+          result.createdAt.value = [null, null]
+        }
+        presentOrFileBug(result.createdAt.value)[0] = w.minCreatedAt
+      }
+      if (w.maxCreatedAt) {
+        if (!result.createdAt.value) {
+          result.createdAt.value = [null, null]
+        }
+        presentOrFileBug(result.createdAt.value)[1] = w.maxCreatedAt
+      }
+      if (w.inAction) {
+        result.action.value = w.inAction
+      }
+      if (w.inActorId) {
+        result.actorId.value = w.inActorId
+      }
+      if (w.inActorOwnerId) {
+        result.actorOwnerId.value = w.inActorOwnerId
+      }
+      if (w.inTargetType) {
+        result.primaryTargetType.value = w.inTargetType
+      }
+      if (w.inTargetId) {
+        result.primaryTargetId.value = w.inTargetId
+      }
+      if (w.inTargetOwnerId) {
+        result.primaryTargetOwner.value = w.inTargetOwnerId
+      }
+    }
+    return result
+  },
+  set: (v: OurDataTableFilterMeta) => {
+    const result: AuditLogQueryWhere[] = []
+    for (const [fieldName, filterState] of Object.entries(v)) {
+      if (filterState.value === undefined || filterState.value === null) {
+        continue
+      }
+      switch (fieldName) {
+        case 'id':
+          result.push({
+            inId: filterState.value,
+          })
+          break
+        case 'createdAt':
+          result.push({
+            minCreatedAt: (filterState.value)[0],
+          }, {
+            maxCreatedAt: (filterState.value)[1],
+          })
+          break
+        case 'action':
+          result.push({
+            inAction: filterState.value,
+          })
+          break
+        case 'actorId':
+          result.push({
+            inActorId: filterState.value,
+          })
+          break
+        case 'actorOwnerId':
+          result.push({
+            inActorOwnerId: filterState.value,
+          })
+          break
+        case 'primaryTargetType':
+          result.push({
+            inTargetType: filterState.value,
+          })
+          break
+        case 'primaryTargetId':
+          result.push({
+            inTargetId: filterState.value,
+          })
+          break
+        case 'primaryTargetOwner':
+          result.push({
+            inTargetOwnerId: filterState.value,
+          })
+          break
+        default:
+          console.log(`Unsupported field name ${fieldName}`)
+          break
+      }
+    }
+    wheres.value = result
+  },
+})
 const tableSortModel = computed<DataTableSortMeta[]>({
   get: () => {
     return sorts.value.map((s): DataTableSortMeta | null => {
@@ -222,20 +439,36 @@ const getTargetLink = (t: AuditLogTargetType, id: string): string => {
   return '#'
 }
 
+const columnControlOverlay = ref<{ toggle: (e: Event) => void }>()
+const toggleColumnControl = (e: Event) => {
+  const c = columnControlOverlay.value
+  if (c) {
+    c.toggle(e)
+  } else {
+    console.warn('columnControlOverlay is not available')
+  }
+}
+
+const defaultAuditLogQuery = (): AuditLogQueryReq => {
+  const mm = maybeMe.value
+  return {
+    limit: 100,
+    cursor: undefined,
+    wheres: [{
+      inActorId: mm ? [mm.id] : [],
+    }],
+    sorts: [{
+      by: AuditLogQuerySortBy.AUDIT_LOG_QUERY_SORT_BY_CREATED_AT,
+      ascending: false,
+    }],
+  }
+}
+const resetFilters = () => {
+  auditLogQuery.value = defaultAuditLogQuery()
+}
 onMounted(() => {
   if (auditLogQuery.value.wheres.length === 0) {
-    const mm = maybeMe.value
-    auditLogQuery.value = {
-      limit: 100,
-      cursor: undefined,
-      wheres: [{
-        inActorId: mm ? [mm.id] : [],
-      }],
-      sorts: [{
-        by: AuditLogQuerySortBy.AUDIT_LOG_QUERY_SORT_BY_CREATED_AT,
-        ascending: false,
-      }],
-    }
+    auditLogQuery.value = defaultAuditLogQuery()
   }
   void waitForURLToUpdate().then(refreshAuditLogs)
 })
@@ -245,176 +478,252 @@ onMounted(() => {
   <StandardContent class="portfolios-page">
     <TitleBar title="Audit Logs" />
     <p>
-      TODO(#80) Add Copy Here
+      {{ tt('DescriptionParagraph1') }}
     </p>
-    <PVButton
-      icon="pi pi-refresh"
-      label="Refresh"
-      @click="refreshAuditLogs"
-    />
-    <PVMultiSelect
-      v-model="selectedColumns"
-      display="chip"
-      :options="allColumns"
-      option-label="header"
-      placeholder="Select Columns"
-      class="better-multiselect-layout"
-    />
-    <StandardDebug
-      label="Query Sort"
-      :value="sorts"
-    />
-    <StandardDebug
-      label="Table Sort Model"
-      :value="tableSortModel"
-    />
-    <PVDataTable
-      v-model:multiSortMeta="tableSortModel"
-      v-model:expanded-rows="expandedRows"
-      sort-mode="multiple"
-      removable-sort
-      :value="auditLogs"
-      size="small"
+    <p>
+      {{ tt('DescriptionParagraph2') }}
+    </p>
+    <div class="flex gap-2 flex-wrap">
+      <StandardDebug
+        label="Data Response"
+        :value="dataResponse"
+      />
+      <StandardDebug
+        label="Audit Log Query"
+        :value="auditLogQuery"
+      />
+      <StandardDebug
+        label="Filters"
+        :value="tableFilterModel"
+      />
+      <StandardDebug
+        label="Sorts"
+        :value="tableSortModel"
+      />
+    </div>
+    <div class="flex gap-2">
+      <PVButton
+        icon="pi pi-cog"
+        :label="tt('Columns')"
+        class="p-button-outlined"
+        @click="toggleColumnControl"
+      />
+      <PVButton
+        icon="pi pi-refresh"
+        :label="tt('Reset')"
+        class="p-button-outlined p-button-secondary"
+        @click="resetFilters"
+      />
+    </div>
+    <PVOverlayPanel
+      ref="columnControlOverlay"
+      class="max-w-screen w-25rem"
     >
-      <PVColumn
-        v-for="column in selectedColumns"
-        :key="column.field"
-        :sortable="column.sortBy !== undefined"
-        :field="column.field"
-        :header="column.header"
+      <div class="flex flex-column gap-2">
+        <div class="flex justify-content-between align-items-center">
+          <div class="flex flex-column gap-1">
+            <div class="text-lg font-bold">
+              {{ tt('Column Selection') }}
+            </div>
+            <span class="text-sm">
+              {{ tt('Select or Remove Columns To Display') }}
+            </span>
+          </div>
+          <div class="flex gap-1">
+            <PVButton
+              v-tooltip="'Reset'"
+              icon="pi pi-refresh"
+              class="p-button-text p-button-secondary"
+              rounded
+              @click="resetColumns"
+            />
+            <PVButton
+              v-tooltip="'Done'"
+              icon="pi pi-check"
+              class="p-button-text p-button-secondary"
+              rounded
+              @click="toggleColumnControl"
+            />
+          </div>
+        </div>
+        <PVMultiSelect
+          v-model="selectedColumns"
+          display="chip"
+          :options="allColumns"
+          option-label="header"
+          placeholder="Select Columns"
+        />
+      </div>
+    </PVOverlayPanel>
+    <StandardFullWidth>
+      <PVDataTable
+        v-model:filters="tableFilterModel"
+        v-model:multiSortMeta="tableSortModel"
+        v-model:expanded-rows="expandedRows"
+        filter-display="menu"
+        sort-mode="multiple"
+        removable-sort
+        :value="auditLogs"
+        size="small"
+        class="audit-log-data-table"
       >
-        <template
-          v-if="column.customBody"
-          #body="slotProps"
+        <PVColumn
+          v-for="column in selectedColumns"
+          :key="column.field"
+          :sortable="column.sortBy !== undefined"
+          :field="column.field"
+          :header="column.header"
+          :show-filter-match-modes="false"
         >
-          <template v-if="column.field === 'createdAt'">
-            {{ humanReadableTimeFromStandardString(slotProps.data.createdAt).value }}
-          </template>
           <template
-            v-else-if="column.field === 'actor'"
+            v-if="column.customBody"
+            #body="slotProps"
           >
-            <div class="flex flex-column gap-1">
-              <span class="text-sm">
-                {{ slotProps.data.actorId }}
-              </span>
-              <span class="text-sm">
-                {{ slotProps.data.actorOwnerId }}
-              </span>
-              <div class="flex align-items-center gap-2">
+            <template v-if="column.field === 'createdAt'">
+              {{ humanReadableTimeFromStandardString(slotProps.data.createdAt).value }}
+            </template>
+            <template
+              v-else-if="column.field === 'actor'"
+            >
+              <div class="flex flex-column gap-1">
+                <span class="text-sm">
+                  {{ slotProps.data.actorId }}
+                </span>
+                <span class="text-sm">
+                  {{ slotProps.data.actorOwnerId }}
+                </span>
+                <div class="flex align-items-center gap-2">
+                  <span>
+                    Acting as <b>{{ `${slotProps.data.actorType}`.replace("AuditLogActorType", '') }}</b>
+                  </span>
+                  <LinkButton
+                    :to="getTargetLink(AuditLogTargetType.AUDIT_LOG_TARGET_TYPE_USER, slotProps.data.actorId)"
+                    class="p-button-xs p-button-outlined p-button-secondary"
+                    icon="pi pi-external-link"
+                  />
+                </div>
+              </div>
+            </template>
+            <template v-else-if="column.field === 'action'">
+              {{ `${slotProps.data.action}`.replace("AuditLogAction", '') }}
+            </template>
+            <template v-else-if="column.field === 'primaryTarget'">
+              <div class="flex flex-column gap-1">
+                <div class="flex align-items-center gap-2">
+                  <b>{{ slotProps.data.primaryTargetType.replace("AuditLogTargetType", '') }}</b>
+                  <LinkButton
+                    :to="getTargetLink(AuditLogTargetType.AUDIT_LOG_TARGET_TYPE_USER, slotProps.data.actorId)"
+                    class="p-button-xs p-button-outlined p-button-secondary"
+                    icon="pi pi-external-link"
+                  />
+                </div>
+                <span class="text-sm">
+                  {{ slotProps.data.primaryTargetId }}
+                </span>
+                <span class="text-sm">
+                  {{ slotProps.data.primaryTargetOwner }}
+                </span>
+              </div>
+            </template>
+            <template v-else-if="column.field === 'secondaryTarget'">
+              <div
+                v-if="slotProps.data.secondaryTargetId"
+                class="flex flex-column gap-1"
+              >
+                <b>
+                  {{ slotProps.data.secondaryTargetType.replace("AuditLogTargetType", '') }}
+                  <LinkButton
+                    :to="getTargetLink(AuditLogTargetType.AUDIT_LOG_TARGET_TYPE_USER, slotProps.data.actorId)"
+                    class="p-button-xs p-button-outlined p-button-secondary"
+                    icon="pi pi-external-link"
+                  />
+                </b>
                 <span>
-                  Acting as <b>{{ `${slotProps.data.actorType}`.replace("AuditLogActorType", '') }}</b>
+                  {{ slotProps.data.secondaryTargetId }}
+                </span>
+                <span>
+                  {{ slotProps.data.secondaryTargetOwner }}
                 </span>
-                <LinkButton
-                  :to="getTargetLink(AuditLogTargetType.AUDIT_LOG_TARGET_TYPE_USER, slotProps.data.actorId)"
-                  class="p-button-xs p-button-outlined p-button-secondary"
-                  icon="pi pi-external-link"
-                />
               </div>
-            </div>
+            </template>
           </template>
-          <template v-else-if="column.field === 'action'">
-            {{ `${slotProps.data.action}`.replace("AuditLogAction", '') }}
-          </template>
-          <template v-else-if="column.field === 'primaryTarget'">
-            <div class="flex flex-column gap-1">
-              <div class="flex align-items-center gap-2">
-                <b>{{ slotProps.data.primaryTargetType.replace("AuditLogTargetType", '') }}</b>
-                <LinkButton
-                  :to="getTargetLink(AuditLogTargetType.AUDIT_LOG_TARGET_TYPE_USER, slotProps.data.actorId)"
-                  class="p-button-xs p-button-outlined p-button-secondary"
-                  icon="pi pi-external-link"
-                />
+          <template
+            v-if="column.filterType !== undefined"
+            #filter="{ filterModel }"
+          >
+            <div class="flex flex-column gap-3 w-26rem max-w-screen">
+              <div class="text-lg font-bold">
+                Filter by {{ column.header }}
               </div>
-              <span class="text-sm">
-                {{ slotProps.data.primaryTargetId }}
-              </span>
-              <span class="text-sm">
-                {{ slotProps.data.primaryTargetOwner }}
-              </span>
-            </div>
-          </template>
-          <template v-else-if="column.field === 'secondaryTarget'">
-            <div
-              v-if="slotProps.data.secondaryTargetId"
-              class="flex flex-column gap-1"
-            >
-              <b>
-                {{ slotProps.data.secondaryTargetType.replace("AuditLogTargetType", '') }}
-                <LinkButton
-                  :to="getTargetLink(AuditLogTargetType.AUDIT_LOG_TARGET_TYPE_USER, slotProps.data.actorId)"
-                  class="p-button-xs p-button-outlined p-button-secondary"
-                  icon="pi pi-external-link"
+              <PVMultiSelect
+                v-if="column.filterType === FilterType.EnumBased"
+                v-model="filterModel.value"
+                option-label="label"
+                option-value="value"
+                :options="column.enumValues"
+                class="p-column-filter"
+                display="chip"
+                :placeholder="tt('Filter To Specific Values')"
+              />
+              <PVChips
+                v-if="column.filterType === FilterType.StringBased"
+                v-model="filterModel.value"
+                class="p-column-filter"
+                :placeholder="tt('Filter To Specific Values')"
+              />
+              <template
+                v-if="column.filterType === FilterType.TimeBased"
+              >
+                <CalendarRangeWithISOModel
+                  v-model:value="filterModel.value"
                 />
-              </b>
-              <span>
-                {{ slotProps.data.secondaryTargetId }}
-              </span>
-              <span>
-                {{ slotProps.data.secondaryTargetOwner }}
-              </span>
+              </template>
             </div>
           </template>
+        </PVColumn>
+        <PVColumn
+          expander
+          header="Details"
+        />
+        <template #expansion="slotProps">
+          <div class="code-block my-2">
+            {{ slotProps.data }}
+          </div>
         </template>
-      </PVColumn>
-      <PVColumn
-        expander
-        header="Details"
-      />
-      <template #expansion="slotProps">
-        <div class="code-block my-2">
-          {{ slotProps.data }}
-        </div>
-      </template>
-      <template
-        #footer
-      >
-        <div class="flex align-items-center gap-3 flex-wrap">
-          <PVButton
-            v-if="hasPrevPage"
-            label="Previous Page"
-            icon="pi pi-caret-left"
-            class="p-button-outlined p-button-xs p-button-secondary"
-            @click="clickPrev"
-          />
-          <span>
-            Showing Logs
-            {{ showingRange.start }}
-            -
-            {{ showingRange.end }}
-          </span>
-          <PVButton
-            v-if="hasNextPage"
-            label="Next Page"
-            icon="pi pi-caret-right"
-            class="p-button-outlined p-button-xs p-button-secondary"
-            icon-pos="right"
-            @click="clickNext"
-          />
-        </div>
-      </template>
-    </PVDataTable>
-    <StandardDebug
-      label="Data Response Cursor"
-      :value="dataResponse.cursor"
-    />
-    <StandardDebug
-      label="Audit Log Query"
-      :value="auditLogQuery"
-    />
+        <template
+          #footer
+        >
+          <div class="flex align-items-center gap-3 flex-wrap">
+            <PVButton
+              v-if="hasPrevPage"
+              label="Previous Page"
+              icon="pi pi-caret-left"
+              class="p-button-outlined p-button-xs p-button-secondary"
+              @click="clickPrev"
+            />
+            <span v-if="showingRange">
+              Showing Logs
+              {{ showingRange.start }}
+              -
+              {{ showingRange.end }}
+            </span>
+            <PVButton
+              v-if="hasNextPage"
+              label="Next Page"
+              icon="pi pi-caret-right"
+              class="p-button-outlined p-button-xs p-button-secondary"
+              icon-pos="right"
+              @click="clickNext"
+            />
+          </div>
+        </template>
+      </PVDataTable>
+    </StandardFullWidth>
   </StandardContent>
 </template>
 
 <style lang="scss">
-.better-multiselect-layout.p-multiselect.p-multiselect-chip {
-  .p-multiselect-label {
-    padding: 0.25rem;
-    display: flex;
-    gap: 0.25rem;
-    flex-wrap: wrap;
-
-    .p-multiselect-token {
-      margin: 0;
-    }
-  }
+.p-column-filter-overlay-menu .p-column-filter-buttonbar{
+  padding-top: 0;
 }
 </style>
diff --git a/frontend/plugins/primevue.ts b/frontend/plugins/primevue.ts
index bb77250..1034938 100644
--- a/frontend/plugins/primevue.ts
+++ b/frontend/plugins/primevue.ts
@@ -7,27 +7,28 @@ import AccordionTab from 'primevue/accordiontab'
 import Button from 'primevue/button'
 import Calendar from 'primevue/calendar'
 import Card from 'primevue/card'
+import Chips from 'primevue/chips'
 import Column from 'primevue/column'
 import DataTable from 'primevue/datatable'
 import Dialog from 'primevue/dialog'
 import Dropdown from 'primevue/dropdown'
+import FileUpload from 'primevue/fileupload'
 import Image from 'primevue/image'
 import InputNumber from 'primevue/inputnumber'
-import InputText from 'primevue/inputtext'
 import InputSwitch from 'primevue/inputswitch'
-import FileUpload from 'primevue/fileupload'
-import TabPanel from 'primevue/tabpanel'
-import TabView from 'primevue/tabview'
-import Textarea from 'primevue/textarea'
-import Tooltip from 'primevue/tooltip'
-import TriStateCheckbox from 'primevue/tristatecheckbox'
+import InputText from 'primevue/inputtext'
 import Message from 'primevue/message'
 import Menu from 'primevue/menu'
 import MultiSelect from 'primevue/multiselect'
 import OverlayPanel from 'primevue/overlaypanel'
 import ProgressSpinner from 'primevue/progressspinner'
-import ToastService from 'primevue/toastservice'
+import TabPanel from 'primevue/tabpanel'
+import TabView from 'primevue/tabview'
+import Textarea from 'primevue/textarea'
 import Toast from 'primevue/toast'
+import ToastService from 'primevue/toastservice'
+import Tooltip from 'primevue/tooltip'
+import TriStateCheckbox from 'primevue/tristatecheckbox'
 
 export default defineNuxtPlugin(({ vueApp }) => {
   vueApp.use(PrimeVue)
@@ -39,6 +40,7 @@ export default defineNuxtPlugin(({ vueApp }) => {
   vueApp.component('PVButton', Button)
   vueApp.component('PVCalendar', Calendar)
   vueApp.component('PVCard', Card)
+  vueApp.component('PVChips', Chips)
   vueApp.component('PVColumn', Column)
   vueApp.component('PVDataTable', DataTable)
   vueApp.component('PVDialog', Dialog)
@@ -46,8 +48,8 @@ export default defineNuxtPlugin(({ vueApp }) => {
   vueApp.component('PVFileUpload', FileUpload)
   vueApp.component('PVImage', Image)
   vueApp.component('PVInputNumber', InputNumber)
-  vueApp.component('PVInputText', InputText)
   vueApp.component('PVInputSwitch', InputSwitch)
+  vueApp.component('PVInputText', InputText)
   vueApp.component('PVMessage', Message)
   vueApp.component('PVMenu', Menu)
   vueApp.component('PVMultiSelect', MultiSelect)