feat(ui): add pepr details (#107)

## Description
Add details to the monitor > pepr view

## Related Issue

Resolve #35
\

ui/src/lib/components/k8s/Drawer/component.svelte

@@ -3,7 +3,7 @@
 
 <script lang="ts">
   import type { KubernetesObject } from '@kubernetes/client-node'
-  import { Close, Table } from 'carbon-icons-svelte'
+  import { Close } from 'carbon-icons-svelte'
   import { onMount } from 'svelte'
 
   import { goto } from '$app/navigation'

ui/src/lib/types.ts

@@ -1,3 +1,17 @@
+import type { SvelteComponent } from 'svelte'
+
+export type PatchOperation = {
+  op: string
+  path: string
+  value: string
+}
+
+export type PeprDetails = {
+  component: SvelteComponent
+  messages?: string[]
+  operations?: { [key: string]: PatchOperation[] }
+}
+
 export type PeprEvent = {
   _name: string
   count: number
@@ -6,4 +20,7 @@ export type PeprEvent = {
   repeated?: number
   ts?: string
   epoch: number
+  msg: string
+  res?: Record<string, unknown>
+  details?: PeprDetails | undefined
 }

ui/src/routes/monitor/pepr/[[stream]]/(details)/denied-details/DeniedDetails.svelte

@@ -0,0 +1,17 @@
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+<!-- SPDX-FileCopyrightText: 2024-Present The UDS Authors -->
+
+<script lang="ts">
+  import type { PeprDetails } from '$lib/types'
+
+  export let details: PeprDetails
+</script>
+
+<span class="whitespace-nowrap relative group py-4 flex items-center">
+  <span class="text-blue-400">Details</span>
+  <div class="tooltip tooltip-left">
+    {#each details.messages || [] as msg}
+      <div class="text-red-400">{msg}</div>
+    {/each}
+  </div>
+</span>

ui/src/routes/monitor/pepr/[[stream]]/(details)/denied-details/comonent.test.ts

@@ -0,0 +1,25 @@
+import { render } from '@testing-library/svelte'
+
+import type { SvelteComponent } from 'svelte'
+import DeniedDetails from './DeniedDetails.svelte'
+
+// Mock the carbon-icons-svelte module
+
+const comp = vi.fn().mockImplementation(() => ({
+  $$: {
+    on_mount: [],
+    on_destroy: [],
+    before_update: [],
+    after_update: [],
+  },
+})) as unknown as SvelteComponent
+
+describe('Denied Details', () => {
+  test('renders denied messages', () => {
+    const peprDetails = { component: comp, messages: ['Authorized: test', 'Found: test'] }
+    const { getByText } = render(DeniedDetails, { props: { details: peprDetails } })
+    expect(getByText('Details')).toBeInTheDocument()
+    expect(getByText(peprDetails.messages[0])).toBeInTheDocument()
+    expect(getByText(peprDetails.messages[1])).toBeInTheDocument()
+  })
+})

ui/src/routes/monitor/pepr/[[stream]]/(details)/mutated-details/MutatedDetails.svelte

@@ -0,0 +1,34 @@
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+<!-- SPDX-FileCopyrightText: 2024-Present The UDS Authors -->
+
+<script lang="ts">
+  import type { PeprDetails } from '$lib/types'
+
+  export let details: PeprDetails
+</script>
+
+<div class="whitespace-nowrap relative group py-4 flex">
+  <span class="text-blue-400">Details</span>
+  <div class="tooltip tooltip-left">
+    {#each Object.entries(details.operations || {}) as [key, ops], index}
+      {#if index > 0}
+        <br />
+      {/if}
+      <h3 class="font-bold">{key}:</h3>
+      {#each ops as op}
+        <p class="text-pretty tooltip-w">
+          {op.path}
+          {#if op.value}
+            <span class="text-blue-400">={JSON.stringify(op.value)}</span>
+          {/if}
+        </p>
+      {/each}
+    {/each}
+  </div>
+</div>
+
+<style>
+  .tooltip-w {
+    width: 496px;
+  }
+</style>

ui/src/routes/monitor/pepr/[[stream]]/(details)/mutated-details/comonent.test.ts

@@ -0,0 +1,32 @@
+import { render, screen } from '@testing-library/svelte'
+
+import type { SvelteComponent } from 'svelte'
+import MutatedDetails from './MutatedDetails.svelte'
+
+// Mock the carbon-icons-svelte module
+
+const comp = vi.fn().mockImplementation(() => ({
+  $$: {
+    on_mount: [],
+    on_destroy: [],
+    before_update: [],
+    after_update: [],
+  },
+})) as unknown as SvelteComponent
+
+describe('Denied Details', () => {
+  test('renders exemption title', () => {
+    const peprDetails = {
+      component: comp,
+      operations: {
+        ADDED: [{ op: 'add', path: '/path', value: 'value' }],
+        REPLACED: [{ op: 'add', path: '/path', value: 'value' }],
+        REMOVED: [{ op: 'add', path: '/path', value: '' }],
+      },
+    }
+    render(MutatedDetails, { props: { details: peprDetails } })
+
+    expect(screen.getByText('Details')).toBeInTheDocument()
+    //todo: figure out assertions for split up text
+  })
+})

ui/src/routes/monitor/pepr/[[stream]]/+page.svelte

@@ -10,6 +10,7 @@
   import { page } from '$app/stores'
   import { type PeprEvent } from '$lib/types'
   import './page.postcss'
+  import { getDetails } from './helpers'
 
   let loaded = false
   let streamFilter = ''
@@ -45,9 +46,9 @@
     eventSource.onmessage = (e) => {
       try {
         const payload: PeprEvent = JSON.parse(e.data)
-
         // The event type is the first word in the header
         payload.event = payload.header.split(' ')[0]
+        payload.details = getDetails(payload)
 
         // If this is a repeated event, update the count
         if (payload.repeated) {
@@ -141,6 +142,7 @@
             <tr>
               <th>Event</th>
               <th>Resource</th>
+              <th>Details</th>
               <th>Count</th>
               <th>Timestamp</th>
             </tr>
@@ -158,6 +160,13 @@
                       <span class="pepr-event {item.event}">{item.event}</span>
                     </td>
                     <td>{item._name}</td>
+                    <td class="flex flex-row items-center">
+                      {#if item.details}
+                        <svelte:component this={item.details.component} details={item.details} />
+                      {:else}
+                        -
+                      {/if}
+                    </td>
                     <td>{item.count || 1}</td>
                     <td>{item.ts}</td>
                   </tr>

ui/src/routes/monitor/pepr/[[stream]]/helpers.ts

@@ -0,0 +1,62 @@
+import type { PatchOperation, PeprDetails, PeprEvent } from '$lib/types'
+import type { SvelteComponent } from 'svelte'
+import DeniedDetails from './(details)/denied-details/DeniedDetails.svelte'
+import MutatedDetails from './(details)/mutated-details/MutatedDetails.svelte'
+
+// Utility function to decode base64
+function decodeBase64(base64String: string) {
+  try {
+    return atob(base64String)
+  } catch (e) {
+    console.error('Failed to decode base64 string:', e)
+    return ''
+  }
+}
+
+export function getDetails(payload: PeprEvent): PeprDetails | undefined {
+  if (!payload.res) {
+    return undefined
+  }
+
+  if (payload.event === 'DENIED') {
+    if (payload.res) {
+      const status = payload.res.status as Record<string, string>
+      const split = status.message.split(' Authorized: ')
+
+      // No "Authorized" or "Found" in the message
+      if (split.length !== 2) {
+        return { component: DeniedDetails as unknown as SvelteComponent, messages: split }
+      }
+
+      const authorized = `Authorized: ${split[1].split(' Found: ')[0]}`
+      const found = `Found: ${split[1].split(' Found:')[1]}`
+      return { component: DeniedDetails as unknown as SvelteComponent, messages: [authorized, found] }
+    }
+  }
+
+  if (payload.event === 'MUTATED') {
+    if (payload.res.patch) {
+      const decodedPatch = decodeBase64(payload.res.patch as string)
+      const parsedPatch = JSON.parse(decodedPatch)
+
+      const opMap: { [key: string]: string } = {
+        add: 'ADDED',
+        remove: 'REMOVED',
+        replace: 'REPLACED',
+      }
+
+      // Group by operation type
+      const groups: { [key: string]: PatchOperation[] } = {}
+      for (const op of parsedPatch) {
+        if (!groups[opMap[op.op]]) {
+          groups[opMap[op.op]] = []
+        }
+        groups[opMap[op.op]].push(op)
+      }
+
+      return { component: MutatedDetails as unknown as SvelteComponent, operations: groups }
+    }
+  }
+
+  return undefined
+}