From a9994696b03da0125578e21f8411c7a01e43f172 Mon Sep 17 00:00:00 2001
From: Howard Smith <hj_smith@live.com>
Date: Thu, 31 Oct 2024 21:27:50 +0000
Subject: [PATCH 01/18] chore: Fix terminal start location in devcontainer

---
 .devcontainer/on-create.sh | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.devcontainer/on-create.sh b/.devcontainer/on-create.sh
index 52d6547..0e27d96 100755
--- a/.devcontainer/on-create.sh
+++ b/.devcontainer/on-create.sh
@@ -14,4 +14,4 @@ echo 'eval "$(starship init bash)"' >> ~/.bashrc
 echo 'export EDITOR="code "' >> ~/.bashrc
 
 # Start shells in the app/ directory
-echo 'cd /workspace/cron-mon-app/app' >> ~/.bashrc
+echo 'cd /workspaces/cron-mon-app/app' >> ~/.bashrc

From 8099e04a0dc4a5fc60e68f5761abdd26d8e0077e Mon Sep 17 00:00:00 2001
From: Howard Smith <hj_smith@live.com>
Date: Thu, 31 Oct 2024 21:54:31 +0000
Subject: [PATCH 02/18] feat: Add API Key placeholder view and nav support for
 it

---
 app/src/App.vue               | 31 +++++++++++++++++++++++++++----
 app/src/__tests__/App.spec.ts | 14 ++++++++------
 app/src/router/routes.ts      | 26 +++++++++++++++++++-------
 app/src/views/KeysView.vue    |  1 +
 4 files changed, 55 insertions(+), 17 deletions(-)
 create mode 100644 app/src/views/KeysView.vue

diff --git a/app/src/App.vue b/app/src/App.vue
index f9d449f..abba473 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -23,6 +23,22 @@
           >
             <v-list-item-title class="text-body-1">{{ link.name }}</v-list-item-title>
           </v-list-item>
+          <v-list-group value="monitoring">
+            <template v-slot:activator="{ props }">
+              <v-list-item v-bind="props" prepend-icon="mdi-monitor-eye">
+                <v-list-item-title class="text-body-1">Monitoring</v-list-item-title>
+              </v-list-item>
+            </template>
+            <v-list-item
+              v-for="link in monitorLinks"
+              :key="link.target"
+              link
+              :prepend-icon="link.icon"
+              :to="{ name: link.target }"
+            >
+              <v-list-item-title class="text-body-1">{{ link.name }}</v-list-item-title>
+            </v-list-item>
+          </v-list-group>
           <v-list-group value="docs">
             <template v-slot:activator="{ props }">
               <v-list-item v-bind="props" prepend-icon="mdi-bookshelf">
@@ -88,9 +104,12 @@ const rail = ref(false)
 const themeName = ref('') // This will be set by the ThemePicker during setup/initialisation.
 const themeIsDark = ref(true)
 const opened = ref(['docs'])
-const topLevelLinks = ref([
-  { icon: 'mdi-home', target: 'home', name: 'Home' },
-  { icon: 'mdi-monitor-eye', target: 'monitors', name: 'Monitors' }
+
+// Navigation links
+const topLevelLinks = ref([{ icon: 'mdi-home', target: 'home', name: 'Home' }])
+const monitorLinks = ref([
+  { icon: 'mdi-monitor-multiple', target: 'monitors', name: 'Monitors' },
+  { icon: 'mdi-key-variant', target: 'keys', name: 'API Keys' }
 ])
 const docLinks = ref([
   { icon: 'mdi-math-compass', target: 'docs-setup', name: 'Setup' },
@@ -103,7 +122,11 @@ function updateTheme(name: string, isDark: boolean): void {
   themeName.value = name
   themeIsDark.value = isDark
 }
-const { user, logout, openAccountManagement, getToken, isReady } = useAuth(['monitors', 'monitor'])
+const { user, logout, openAccountManagement, getToken, isReady } = useAuth([
+  'monitors',
+  'monitor',
+  'keys'
+])
 console.log('User: ', user)
 provide('$getMonitorRepo', async () => {
   await isReady()
diff --git a/app/src/__tests__/App.spec.ts b/app/src/__tests__/App.spec.ts
index a34017e..e43ad3c 100644
--- a/app/src/__tests__/App.spec.ts
+++ b/app/src/__tests__/App.spec.ts
@@ -75,13 +75,15 @@ describe('The App', () => {
   it('renders home page as expected', async () => {
     const { wrapper } = await mountApp()
 
-    // We should have a navigation drawer (1st item should be the CronMon logo, followed by 7 items)
+    // We should have a navigation drawer (1st item should be the CronMon logo, followed by 9 items)
     const navDrawerItems = wrapper.find('.v-navigation-drawer').findAll('.v-list-item')
-    expect(navDrawerItems).toHaveLength(8)
+    expect(navDrawerItems).toHaveLength(10)
     expect(navDrawerItems[0].find('img').attributes('src')).toBe('/src/assets/logo.svg')
-    expect(navDrawerItems.slice(1, 8).map((item) => item.text())).toEqual([
+    expect(navDrawerItems.slice(1, 10).map((item) => item.text())).toEqual([
       'Home',
+      'Monitoring',
       'Monitors',
+      'API Keys',
       'Docs',
       'Setup',
       'Integration',
@@ -128,7 +130,7 @@ describe('The App', () => {
 
     // The navigation drawer should now have a smaller logo but the same number of items.
     const navDrawerItems = navDrawer.findAll('.v-list-item')
-    expect(navDrawerItems).toHaveLength(8)
+    expect(navDrawerItems).toHaveLength(10)
     expect(navDrawerItems[0].find('img').attributes('src')).toBe('/src/assets/icon.svg')
   })
 
@@ -207,7 +209,7 @@ describe('Interacting with Monitors', async () => {
     const { wrapper, router } = await mountApp()
 
     // Navigate to the monitors page.
-    await router.push('/monitors')
+    await router.push('/monitoring/monitors')
     await flushPromises()
 
     expect(mockGetToken).toHaveBeenCalledOnce()
@@ -216,7 +218,7 @@ describe('Interacting with Monitors', async () => {
     expect(firstMonitor.find('.v-card-title').text()).toBe('foo-backup.sh')
 
     // Navigate to the first monitor in the list.
-    await router.push('/monitors/cfe88463-5c04-4b43-b10f-1f508963cc5d')
+    await router.push('/monitoring/monitors/cfe88463-5c04-4b43-b10f-1f508963cc5d')
     await flushPromises()
 
     const firstChip = wrapper.find('.v-main').findAll('.v-chip')[0]
diff --git a/app/src/router/routes.ts b/app/src/router/routes.ts
index 48960d5..13d8ba2 100644
--- a/app/src/router/routes.ts
+++ b/app/src/router/routes.ts
@@ -4,6 +4,7 @@ import MonitorView from '@/views/MonitorView.vue'
 import SetupView from '@/views/docs/SetupView.vue'
 import HostingView from '@/views/docs/HostingView.vue'
 import IntegrationView from '@/views/docs/IntegrationView.vue'
+import KeysView from '@/views/KeysView.vue'
 
 const routes = [
   {
@@ -39,17 +40,28 @@ const routes = [
     ]
   },
   {
-    path: '/monitors',
+    path: '/monitoring',
+    name: 'monitoring',
     children: [
       {
-        path: '',
-        name: 'monitors',
-        component: MonitorsView
+        path: 'monitors',
+        children: [
+          {
+            path: '',
+            name: 'monitors',
+            component: MonitorsView
+          },
+          {
+            path: ':id',
+            name: 'monitor',
+            component: MonitorView
+          }
+        ]
       },
       {
-        path: ':id',
-        name: 'monitor',
-        component: MonitorView
+        path: 'keys',
+        name: 'keys',
+        component: KeysView
       }
     ]
   },
diff --git a/app/src/views/KeysView.vue b/app/src/views/KeysView.vue
new file mode 100644
index 0000000..75ac954
--- /dev/null
+++ b/app/src/views/KeysView.vue
@@ -0,0 +1 @@
+<template>API Keys placeholder</template>

From c16757ea85c961a9db292fc9a76eef0c72c9b71f Mon Sep 17 00:00:00 2001
From: Howard Smith <hj_smith@live.com>
Date: Thu, 31 Oct 2024 22:19:37 +0000
Subject: [PATCH 03/18] refactor: Auth out of `MonitorRepository` and into
 `ApiRespository` base class

---
 app/src/repos/api-repo.ts     | 48 +++++++++++++++++++++++++++++++++++
 app/src/repos/monitor-repo.ts | 48 +++--------------------------------
 2 files changed, 51 insertions(+), 45 deletions(-)
 create mode 100644 app/src/repos/api-repo.ts

diff --git a/app/src/repos/api-repo.ts b/app/src/repos/api-repo.ts
new file mode 100644
index 0000000..a01caa6
--- /dev/null
+++ b/app/src/repos/api-repo.ts
@@ -0,0 +1,48 @@
+type ApiResponse = {
+  data: any
+}
+
+export class ApiRepository {
+  // TODO: Put API URL in env.
+  protected readonly baseUrl = 'http://127.0.0.1:8000'
+  protected readonly getAuthToken: () => string
+
+  constructor(getAuthToken: () => string) {
+    this.getAuthToken = getAuthToken
+  }
+
+  protected async sendRequest(
+    route: string,
+    method: string,
+    body: Record<string, any> | undefined = undefined
+  ): Promise<ApiResponse | undefined> {
+    const opts: Record<string, any> = {
+      method: method,
+      headers: {
+        Authorization: `Bearer ${this.getAuthToken()}`
+      }
+    }
+    if (body !== undefined) {
+      opts.headers.Accept = 'application/json'
+      opts.headers['Content-Type'] = 'application/json'
+      opts.body = JSON.stringify(body)
+    }
+
+    let response: Response | null = null
+    try {
+      response = await fetch(this.baseUrl + route, opts)
+    } catch (e) {
+      console.error('Failed to connect to the CronMon API:', e)
+      throw new Error('Failed to connect to the CronMon API.')
+    }
+
+    if (response.ok) {
+      const length = Number(response.headers.get('Content-Length'))
+      return length > 0 ? await response.json() : undefined
+    } else {
+      // We always want the JSON out of errors to get the description.
+      const json = await response.json()
+      throw new Error(json.error.description)
+    }
+  }
+}
diff --git a/app/src/repos/monitor-repo.ts b/app/src/repos/monitor-repo.ts
index a0fc427..e055a0d 100644
--- a/app/src/repos/monitor-repo.ts
+++ b/app/src/repos/monitor-repo.ts
@@ -1,4 +1,5 @@
 import type { MonitorSummary, MonitorIdentity, Monitor, MonitorInformation } from '@/types/monitor'
+import { ApiRepository } from './api-repo'
 
 export interface MonitorRepoInterface {
   getMonitorInfos(): Promise<Array<MonitorInformation>>
@@ -8,10 +9,6 @@ export interface MonitorRepoInterface {
   deleteMonitor(monitor: MonitorIdentity): Promise<void>
 }
 
-type ApiResponse = {
-  data: any
-}
-
 type MonitorResp = {
   data: Monitor
 }
@@ -23,13 +20,9 @@ type MonitorList = {
   }
 }
 
-export class MonitorRepository implements MonitorRepoInterface {
-  // TODO: Put API URL in env.
-  private readonly baseUrl = 'http://127.0.0.1:8000'
-  private readonly getAuthToken: () => string
-
+export class MonitorRepository extends ApiRepository implements MonitorRepoInterface {
   constructor(getAuthToken: () => string) {
-    this.getAuthToken = getAuthToken
+    super(getAuthToken)
   }
 
   async getMonitorInfos(): Promise<Array<MonitorInformation>> {
@@ -67,39 +60,4 @@ export class MonitorRepository implements MonitorRepoInterface {
 
     return (resp as MonitorResp).data
   }
-
-  private async sendRequest(
-    route: string,
-    method: string,
-    body: Record<string, any> | undefined = undefined
-  ): Promise<ApiResponse | undefined> {
-    const opts: Record<string, any> = {
-      method: method,
-      headers: {
-        Authorization: `Bearer ${this.getAuthToken()}`
-      }
-    }
-    if (body !== undefined) {
-      opts.headers.Accept = 'application/json'
-      opts.headers['Content-Type'] = 'application/json'
-      opts.body = JSON.stringify(body)
-    }
-
-    let response: Response | null = null
-    try {
-      response = await fetch(this.baseUrl + route, opts)
-    } catch (e) {
-      console.error('Failed to connect to the CronMon API:', e)
-      throw new Error('Failed to connect to the CronMon API.')
-    }
-
-    if (response.ok) {
-      const length = Number(response.headers.get('Content-Length'))
-      return length > 0 ? await response.json() : undefined
-    } else {
-      // We always want the JSON out of errors to get the description.
-      const json = await response.json()
-      throw new Error(json.error.description)
-    }
-  }
 }

From 5ba8f011d8b7b1438e18225fe32dedc3a6d6cba4 Mon Sep 17 00:00:00 2001
From: Howard Smith <hj_smith@live.com>
Date: Fri, 1 Nov 2024 20:40:48 +0000
Subject: [PATCH 04/18] feat: Add repository for API keys

---
 app/src/repos/__tests__/api-key-repo.spec.ts | 146 +++++++++++++++++++
 app/src/repos/api-key-repo.ts                |  41 ++++++
 app/src/types/api-key.ts                     |  13 ++
 app/src/utils/testing/test-api.ts            |  99 +++++++++++--
 4 files changed, 290 insertions(+), 9 deletions(-)
 create mode 100644 app/src/repos/__tests__/api-key-repo.spec.ts
 create mode 100644 app/src/repos/api-key-repo.ts
 create mode 100644 app/src/types/api-key.ts

diff --git a/app/src/repos/__tests__/api-key-repo.spec.ts b/app/src/repos/__tests__/api-key-repo.spec.ts
new file mode 100644
index 0000000..211cd1a
--- /dev/null
+++ b/app/src/repos/__tests__/api-key-repo.spec.ts
@@ -0,0 +1,146 @@
+import { afterAll, afterEach, beforeAll, describe, it, expect } from 'vitest'
+import { HttpResponse, http } from 'msw'
+
+import { ApiKeyRepository } from '@/repos/api-key-repo'
+import type { ApiKey } from '@/types/api-key'
+
+import { setupTestAPI } from '@/utils/testing/test-api'
+
+describe('MonitorApiKeyRepositoryRepository', () => {
+  const server = setupTestAPI('foo-token')
+
+  // Start server before all tests
+  beforeAll(() => server.listen({ onUnhandledRequest: 'error' }))
+
+  // Close server after all tests
+  afterAll(() => server.close())
+
+  // Reset handlers after each test `important for test isolation`
+  afterEach(() => server.resetHandlers())
+
+  const repo = new ApiKeyRepository(() => 'foo-token')
+
+  it('getKeys', async () => {
+    const keys = await repo.getKeys()
+    expect(keys).toEqual([
+      {
+        api_key_id: 'f4b3b3b4-0b3b-4b3b-8b3b-2b3b3b3b3b3b',
+        name: 'Test Key 1',
+        masked: 'test************key1',
+        created: '2024-03-31T12:35:00',
+        last_used: {
+          time: '2024-03-31T12:35:00',
+          monitor_id: 'e534a01a-4efe-4b8e-9b04-44a3c76b0462',
+          name: 'analyse-bar.py'
+        }
+      },
+      {
+        api_key_id: 'f47f4cfc-92b0-4987-bf53-883ea8c6851b',
+        name: 'Test Key 2',
+        masked: 'test************key2',
+        created: '2024-03-30T10:30:00',
+        last_used: null
+      }
+    ])
+  })
+
+  it("getKeys() when there aren't any API keys", async () => {
+    server.use(
+      http.get('http://127.0.0.1:8000/api/v1/keys', () => {
+        return HttpResponse.json({
+          data: [],
+          paging: { total: 0 }
+        })
+      })
+    )
+
+    const keys = await repo.getKeys()
+    expect(keys.length).toEqual(0)
+  })
+
+  it('revokeKey', async () => {
+    const key: ApiKey = {
+      api_key_id: 'f47f4cfc-92b0-4987-bf53-883ea8c6851b',
+      name: 'Test Key 2',
+      masked: 'test************key2',
+      created: '2024-03-31T12:35:00',
+      last_used: null
+    }
+
+    await repo.revokeKey(key)
+
+    const keys = await repo.getKeys()
+    expect(keys).toHaveLength(1)
+    expect(keys.map((key) => key.api_key_id)).not.toContain(key.api_key_id)
+  })
+
+  it('revokeKey() when API key does not exist', async () => {
+    const key: ApiKey = {
+      api_key_id: 'non-existent-id',
+      name: 'Non existent key',
+      masked: 'Non ************ t key',
+      created: '2024-03-31T12:35:00',
+      last_used: null
+    }
+    await expect(async () => await repo.revokeKey(key)).rejects.toThrowError(
+      'The requested resource could not be found.'
+    )
+  })
+
+  it('generateKey', async () => {
+    const generatedKey = await repo.generateKey('Newly generated key')
+
+    // Our mocked API just returns the reverse of the name as the actual key.
+    expect(generatedKey).toEqual('yek detareneg ylweN')
+  })
+})
+
+describe('ApiKeyRepository when auth token is invalid', () => {
+  const server = setupTestAPI('foo-token')
+
+  // Start server before all tests
+  beforeAll(() => server.listen({ onUnhandledRequest: 'error' }))
+
+  // Close server after all tests
+  afterAll(() => server.close())
+
+  // Reset handlers after each test `important for test isolation`
+  afterEach(() => server.resetHandlers())
+
+  const repo = new ApiKeyRepository(() => 'invalid-token')
+
+  it('getKeys', async () => {
+    await expect(async () => await repo.getKeys()).rejects.toThrowError(
+      'The request requires user authentication.'
+    )
+  })
+
+  it('revokeKey', async () => {
+    const key: ApiKey = {
+      api_key_id: 'f47f4cfc-92b0-4987-bf53-883ea8c6851b',
+      name: 'Test Key 2',
+      masked: 'test************key2',
+      created: '2024-03-31T12:35:00',
+      last_used: null
+    }
+
+    await expect(async () => await repo.revokeKey(key)).rejects.toThrowError(
+      'The request requires user authentication.'
+    )
+  })
+
+  it('generateKey', async () => {
+    await expect(async () => await repo.generateKey('Newly generated key')).rejects.toThrowError(
+      'The request requires user authentication.'
+    )
+  })
+})
+
+describe('ApiKeyRepository when the API down', () => {
+  it('getKeys', async () => {
+    const repo = new ApiKeyRepository(() => 'foo-token')
+    await expect(async () => await repo.getKeys()).rejects.toThrowError(
+      'Failed to connect to the CronMon API.'
+    )
+  })
+})
diff --git a/app/src/repos/api-key-repo.ts b/app/src/repos/api-key-repo.ts
new file mode 100644
index 0000000..7b85275
--- /dev/null
+++ b/app/src/repos/api-key-repo.ts
@@ -0,0 +1,41 @@
+import type { ApiKey } from '@/types/api-key'
+import { ApiRepository } from './api-repo'
+
+type ApiKeyList = {
+  data: Array<ApiKey>
+  paging: {
+    total: number
+  }
+}
+
+type NewApiKey = {
+  data: {
+    key: string
+  }
+}
+
+export interface ApiKeyRepoInterface {
+  getKeys(): Promise<Array<ApiKey>>
+  generateKey(name: string): Promise<string>
+  revokeKey(key: ApiKey): Promise<void>
+}
+
+export class ApiKeyRepository extends ApiRepository implements ApiKeyRepoInterface {
+  constructor(getAuthToken: () => string) {
+    super(getAuthToken)
+  }
+
+  async getKeys(): Promise<Array<ApiKey>> {
+    const resp = await this.sendRequest(`/api/v1/keys`, 'GET')
+    return (resp as ApiKeyList).data
+  }
+
+  async generateKey(name: string): Promise<string> {
+    const resp = await this.sendRequest(`/api/v1/keys`, 'POST', { name })
+    return (resp as NewApiKey).data.key
+  }
+
+  async revokeKey(key: ApiKey): Promise<void> {
+    await this.sendRequest(`/api/v1/keys/${key.api_key_id}`, 'DELETE')
+  }
+}
diff --git a/app/src/types/api-key.ts b/app/src/types/api-key.ts
new file mode 100644
index 0000000..9d597ca
--- /dev/null
+++ b/app/src/types/api-key.ts
@@ -0,0 +1,13 @@
+export type ApiKey = {
+  api_key_id: string
+  name: string
+  masked: string
+  created: string
+  last_used: LastUsed | null
+}
+
+type LastUsed = {
+  time: string
+  monitor_id: string
+  monitor_name: string
+}
diff --git a/app/src/utils/testing/test-api.ts b/app/src/utils/testing/test-api.ts
index 183fa0e..50a6c16 100644
--- a/app/src/utils/testing/test-api.ts
+++ b/app/src/utils/testing/test-api.ts
@@ -105,20 +105,41 @@ export function setupTestAPI(expectedToken: string): SetupServer {
     }
   ]
 
+  let apiKeys = [
+    {
+      api_key_id: 'f4b3b3b4-0b3b-4b3b-8b3b-2b3b3b3b3b3b',
+      name: 'Test Key 1',
+      masked: 'test************key1',
+      created: '2024-03-31T12:35:00',
+      last_used: {
+        time: '2024-03-31T12:35:00',
+        monitor_id: 'e534a01a-4efe-4b8e-9b04-44a3c76b0462',
+        name: 'analyse-bar.py'
+      }
+    },
+    {
+      api_key_id: 'f47f4cfc-92b0-4987-bf53-883ea8c6851b',
+      name: 'Test Key 2',
+      masked: 'test************key2',
+      created: '2024-03-30T10:30:00',
+      last_used: null
+    }
+  ]
+
   function assertAuth(request: StrictRequest<JsonBodyType>): HttpResponse | void {
     const token = request.headers.get('Authorization')
     return token === `Bearer ${expectedToken}`
       ? undefined
       : HttpResponse.json(
-          {
-            error: {
-              code: 401,
-              reason: 'Unauthorized',
-              description: 'The request requires user authentication.'
-            }
-          },
-          { status: 401 }
-        )
+        {
+          error: {
+            code: 401,
+            reason: 'Unauthorized',
+            description: 'The request requires user authentication.'
+          }
+        },
+        { status: 401 }
+      )
   }
 
   return setupServer(
@@ -268,6 +289,66 @@ export function setupTestAPI(expectedToken: string): SetupServer {
 
         monitors = monitors.filter((m) => m.monitor_id !== monitorId)
 
+        return new HttpResponse(null, { status: 200 })
+      }),
+      http.get('http://127.0.0.1:8000/api/v1/keys', ({ request }) => {
+        return (
+          assertAuth(request) ||
+          HttpResponse.json({
+            data: apiKeys,
+            paging: { total: apiKeys.length }
+          })
+        )
+      }),
+
+      http.post('http://127.0.0.1:8000/api/v1/keys', async ({ request }) => {
+        const authErroResponse = assertAuth(request)
+        if (authErroResponse) {
+          return authErroResponse
+        }
+
+        const body = (await request.json()) as { name: string }
+        const name = body.name
+        const key = name.split('').reverse().join('')
+        const apiKey = {
+          api_key_id: uuidv4(),
+          name: name,
+          masked: `${key.slice(0, 4)}************${key.slice(-4)}`,
+          created: new Date().toISOString(),
+          last_used: null
+        }
+        apiKeys.push(apiKey)
+
+        return HttpResponse.json({
+          data: {
+            key
+          }
+        })
+      }),
+      http.delete('http://127.0.0.1:8000/api/v1/keys/:keyId', ({ request, params }) => {
+        const authErroResponse = assertAuth(request)
+        if (authErroResponse) {
+          return authErroResponse
+        }
+
+        const { keyId } = params
+        const apiKey = apiKeys.find((key) => key.api_key_id === keyId)
+
+        if (!apiKey) {
+          return HttpResponse.json(
+            {
+              error: {
+                code: 404,
+                reason: 'Not Found',
+                description: 'The requested resource could not be found.'
+              }
+            },
+            { status: 404 }
+          )
+        }
+
+        apiKeys = apiKeys.filter((key) => key.api_key_id !== keyId)
+
         return new HttpResponse(null, { status: 200 })
       })
     ]

From 52f7ccc75dd0b45a054d959cb9f97d739a20ef40 Mon Sep 17 00:00:00 2001
From: Howard Smith <hj_smith@live.com>
Date: Fri, 1 Nov 2024 23:22:53 +0000
Subject: [PATCH 05/18] chore: Add `date-fns` as dependency

---
 app/package-lock.json | 11 +++++++++++
 app/package.json      |  1 +
 2 files changed, 12 insertions(+)

diff --git a/app/package-lock.json b/app/package-lock.json
index 926e9eb..e45ccac 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@highlightjs/vue-plugin": "^2.1.0",
         "@scalar/api-reference": "^1.25.25",
+        "date-fns": "^4.1.0",
         "keycloak-js": "^25.0.6",
         "vue": "^3.5.10",
         "vue-cookies": "^1.8.4",
@@ -3465,6 +3466,16 @@
         "node": ">=18"
       }
     },
+    "node_modules/date-fns": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
     "node_modules/de-indent": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
diff --git a/app/package.json b/app/package.json
index 0f9ca61..0c50f80 100644
--- a/app/package.json
+++ b/app/package.json
@@ -16,6 +16,7 @@
   "dependencies": {
     "@highlightjs/vue-plugin": "^2.1.0",
     "@scalar/api-reference": "^1.25.25",
+    "date-fns": "^4.1.0",
     "keycloak-js": "^25.0.6",
     "vue": "^3.5.10",
     "vue-cookies": "^1.8.4",

From 45835bfb0b7bf52b3024154a3f199983fc6cf363 Mon Sep 17 00:00:00 2001
From: Howard Smith <hj_smith@live.com>
Date: Sat, 2 Nov 2024 21:58:41 +0000
Subject: [PATCH 06/18] feat: List API keys in APIKeys view

---
 app/src/App.vue            |   5 ++
 app/src/views/KeysView.vue | 123 ++++++++++++++++++++++++++++++++++++-
 2 files changed, 127 insertions(+), 1 deletion(-)

diff --git a/app/src/App.vue b/app/src/App.vue
index abba473..2a99992 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -97,6 +97,7 @@ import IconButton from './components/IconButton.vue'
 import ThemePicker from '@/components/ThemePicker.vue'
 import { useAuth } from '@/composables/auth'
 import { MonitorRepository } from '@/repos/monitor-repo'
+import { ApiKeyRepository } from './repos/api-key-repo'
 
 import { ref, provide } from 'vue'
 
@@ -132,4 +133,8 @@ provide('$getMonitorRepo', async () => {
   await isReady()
   return new MonitorRepository(() => getToken() || '')
 })
+provide('$getApiKeyRepo', async () => {
+  await isReady()
+  return new ApiKeyRepository(() => getToken() || '')
+})
 </script>
diff --git a/app/src/views/KeysView.vue b/app/src/views/KeysView.vue
index 75ac954..edfb295 100644
--- a/app/src/views/KeysView.vue
+++ b/app/src/views/KeysView.vue
@@ -1 +1,122 @@
-<template>API Keys placeholder</template>
+<template>
+  <ApiAlert class="mx-4 mt-4" :error="syncError" :retryEnabled="true" @retried="getApiKeys" />
+  <v-card class="elevation-2 mx-6 mt-13">
+    <v-card-title class="font-weight-black"> API Keys</v-card-title>
+    <v-card-text>
+      <div class="text-body-1">
+        <p>In order to integrate with Cron Mon you'll need an API key.</p>
+        <p>
+          Your existing keys are listed below and you can create a new key via the
+          <i>Generate New Key</i> button below.
+        </p>
+      </div>
+      <v-btn
+        append-icon="mdi-plus"
+        color="primary"
+        class="my-4"
+        :disabled="syncError !== null"
+        @click="generateKey"
+      >
+        Generate New Key
+        <v-tooltip activator="parent" location="top">Click to generate a new API key</v-tooltip>
+      </v-btn>
+      <v-table height="300px" style="width: 100%" fixed-header>
+        <thead>
+          <tr>
+            <th class="text-left" style="width: 30%">API KEY</th>
+            <th class="text-left" style="width: 25%">CREATED</th>
+            <th class="text-left" style="width: 40%">LAST ACCESS</th>
+            <th class="text-left" style="width: 5%">&nbsp;</th>
+          </tr>
+        </thead>
+        <tbody class="text-body-1">
+          <tr v-for="key in apiKeys" :key="key.api_key_id">
+            <td class="py-4">
+              <div class="text-h6">{{ key.name }}</div>
+              <v-chip
+                prepend-icon="mdi-eye-off-outline"
+                color="teal-accent-4"
+                density="compact"
+                label
+                >{{ key.masked }}</v-chip
+              >
+            </td>
+            <td class="py-4">{{ formatLastUsed(key.created) }}</td>
+            <td v-if="key.last_used" class="py-4">
+              {{ formatLastUsed(key.last_used.time) }} by
+              <router-link
+                :to="{ name: 'monitor', params: { id: key.last_used.monitor_id } }"
+                target="_blank"
+                rel="noreferrer noopener"
+                >{{ key.last_used.monitor_name }}</router-link
+              >
+            </td>
+            <td v-else class="py-4 text-disabled">Never used</td>
+            <td><v-btn icon="mdi-key-remove" @click="revokeKey(key)"></v-btn></td>
+          </tr>
+        </tbody>
+      </v-table>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+import { ref, inject, onUnmounted, onMounted } from 'vue'
+import { formatDistanceToNow } from 'date-fns'
+
+import ApiAlert from '@/components/ApiAlert.vue'
+import type { ApiKeyRepoInterface } from '@/repos/api-key-repo'
+import type { ApiKey } from '@/types/api-key'
+
+const FIVE_MINUTES_MS = 5 * 60 * 1000
+
+const getApiKeyRepo = inject<() => Promise<ApiKeyRepoInterface>>(
+  '$getApiKeyRepo'
+) as () => Promise<ApiKeyRepoInterface>
+
+// After we've unmounted the component we don't want to keep syncing the monitor.
+let syncing = true
+onUnmounted(() => {
+  syncing = false
+})
+
+const loading = ref(true)
+const syncError = ref<string | null>(null)
+const apiKeys = ref<ApiKey[]>([])
+
+function generateKey() {
+  alert('Not implemented yet!')
+}
+
+function revokeKey(_key: ApiKey) {
+  alert('Not implemented yet!')
+}
+
+function formatLastUsed(lastUsed: string): string {
+  return formatDistanceToNow(new Date(lastUsed), { addSuffix: true })
+}
+
+async function getApiKeys() {
+  const apiKeyRepo = await getApiKeyRepo()
+  try {
+    apiKeys.value = await apiKeyRepo.getKeys()
+    // If we've successfully got the keys, we can clear any previous errors and set loading to false.
+    syncError.value = null
+    loading.value = false
+  } catch (e: unknown) {
+    syncError.value = (e as Error).message
+  }
+}
+
+async function syncApiKeys() {
+  if (!syncing) {
+    return
+  }
+
+  await getApiKeys()
+
+  setTimeout(async () => await syncApiKeys(), FIVE_MINUTES_MS)
+}
+
+onMounted(syncApiKeys)
+</script>

From f3d271427b609fb4c45953db9af7acd5603cb3aa Mon Sep 17 00:00:00 2001
From: Howard Smith <hj_smith@live.com>
Date: Sat, 2 Nov 2024 22:25:11 +0000
Subject: [PATCH 07/18] feat: Revoke API keys

---
 app/src/views/KeysView.vue | 154 ++++++++++++++++++++++---------------
 1 file changed, 93 insertions(+), 61 deletions(-)

diff --git a/app/src/views/KeysView.vue b/app/src/views/KeysView.vue
index edfb295..a65b870 100644
--- a/app/src/views/KeysView.vue
+++ b/app/src/views/KeysView.vue
@@ -1,63 +1,73 @@
 <template>
-  <ApiAlert class="mx-4 mt-4" :error="syncError" :retryEnabled="true" @retried="getApiKeys" />
-  <v-card class="elevation-2 mx-6 mt-13">
-    <v-card-title class="font-weight-black"> API Keys</v-card-title>
-    <v-card-text>
-      <div class="text-body-1">
-        <p>In order to integrate with Cron Mon you'll need an API key.</p>
-        <p>
-          Your existing keys are listed below and you can create a new key via the
-          <i>Generate New Key</i> button below.
-        </p>
-      </div>
-      <v-btn
-        append-icon="mdi-plus"
-        color="primary"
-        class="my-4"
-        :disabled="syncError !== null"
-        @click="generateKey"
-      >
-        Generate New Key
-        <v-tooltip activator="parent" location="top">Click to generate a new API key</v-tooltip>
-      </v-btn>
-      <v-table height="300px" style="width: 100%" fixed-header>
-        <thead>
-          <tr>
-            <th class="text-left" style="width: 30%">API KEY</th>
-            <th class="text-left" style="width: 25%">CREATED</th>
-            <th class="text-left" style="width: 40%">LAST ACCESS</th>
-            <th class="text-left" style="width: 5%">&nbsp;</th>
-          </tr>
-        </thead>
-        <tbody class="text-body-1">
-          <tr v-for="key in apiKeys" :key="key.api_key_id">
-            <td class="py-4">
-              <div class="text-h6">{{ key.name }}</div>
-              <v-chip
-                prepend-icon="mdi-eye-off-outline"
-                color="teal-accent-4"
-                density="compact"
-                label
-                >{{ key.masked }}</v-chip
-              >
-            </td>
-            <td class="py-4">{{ formatLastUsed(key.created) }}</td>
-            <td v-if="key.last_used" class="py-4">
-              {{ formatLastUsed(key.last_used.time) }} by
-              <router-link
-                :to="{ name: 'monitor', params: { id: key.last_used.monitor_id } }"
-                target="_blank"
-                rel="noreferrer noopener"
-                >{{ key.last_used.monitor_name }}</router-link
-              >
-            </td>
-            <td v-else class="py-4 text-disabled">Never used</td>
-            <td><v-btn icon="mdi-key-remove" @click="revokeKey(key)"></v-btn></td>
-          </tr>
-        </tbody>
-      </v-table>
-    </v-card-text>
-  </v-card>
+  <div>
+    <ApiAlert class="mx-4 mt-4" :error="syncError" :retryEnabled="true" @retried="getApiKeys" />
+    <ApiAlert class="mx-4 mt-4" :error="revokeError" @closed="revokeError = null" />
+    <v-card class="elevation-2 mx-6 mt-13">
+      <v-card-title class="font-weight-black"> API Keys</v-card-title>
+      <v-card-text>
+        <div class="text-body-1">
+          <p>In order to integrate with Cron Mon you'll need an API key.</p>
+          <p>
+            Your existing keys are listed below and you can create a new key via the
+            <i>Generate New Key</i> button below.
+          </p>
+        </div>
+        <v-btn
+          append-icon="mdi-plus"
+          color="primary"
+          class="my-4"
+          :disabled="syncError !== null"
+          @click="generateKey"
+        >
+          Generate New Key
+          <v-tooltip activator="parent" location="top">Click to generate a new API key</v-tooltip>
+        </v-btn>
+        <v-table height="300px" style="width: 100%" fixed-header>
+          <thead>
+            <tr>
+              <th class="text-left" style="width: 30%">API KEY</th>
+              <th class="text-left" style="width: 25%">CREATED</th>
+              <th class="text-left" style="width: 40%">LAST ACCESS</th>
+              <th class="text-left" style="width: 5%">&nbsp;</th>
+            </tr>
+          </thead>
+          <tbody class="text-body-1">
+            <tr v-for="key in apiKeys" :key="key.api_key_id">
+              <td class="py-4">
+                <div class="text-h6">{{ key.name }}</div>
+                <v-chip
+                  prepend-icon="mdi-eye-off-outline"
+                  color="teal-accent-4"
+                  density="compact"
+                  label
+                  >{{ key.masked }}</v-chip
+                >
+              </td>
+              <td class="py-4">{{ formatLastUsed(key.created) }}</td>
+              <td v-if="key.last_used" class="py-4">
+                {{ formatLastUsed(key.last_used.time) }} by
+                <router-link
+                  :to="{ name: 'monitor', params: { id: key.last_used.monitor_id } }"
+                  target="_blank"
+                  rel="noreferrer noopener"
+                  >{{ key.last_used.monitor_name }}</router-link
+                >
+              </td>
+              <td v-else class="py-4 text-disabled">Never used</td>
+              <td><v-btn icon="mdi-key-remove" @click="openRevokeKeyDialog(key)"></v-btn></td>
+            </tr>
+          </tbody>
+        </v-table>
+      </v-card-text>
+    </v-card>
+    <ConfirmationDialog
+      :dialogActive="keyToRevoke !== null"
+      title="Revoke this API Key?"
+      icon="mdi-key-remove"
+      question="Are you sure you want to revoke this API key? It will not be usable anymore, and this cannot be undone."
+      @dialog-complete="revokeDialogComplete"
+    />
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -67,6 +77,7 @@ import { formatDistanceToNow } from 'date-fns'
 import ApiAlert from '@/components/ApiAlert.vue'
 import type { ApiKeyRepoInterface } from '@/repos/api-key-repo'
 import type { ApiKey } from '@/types/api-key'
+import ConfirmationDialog from '@/components/ConfirmationDialog.vue'
 
 const FIVE_MINUTES_MS = 5 * 60 * 1000
 
@@ -82,14 +93,35 @@ onUnmounted(() => {
 
 const loading = ref(true)
 const syncError = ref<string | null>(null)
+const revokeError = ref<string | null>(null)
 const apiKeys = ref<ApiKey[]>([])
+const keyToRevoke = ref<ApiKey | null>(null)
 
 function generateKey() {
   alert('Not implemented yet!')
 }
 
-function revokeKey(_key: ApiKey) {
-  alert('Not implemented yet!')
+function openRevokeKeyDialog(key: ApiKey) {
+  keyToRevoke.value = key
+}
+
+function closeRevokeDialog() {
+  keyToRevoke.value = null
+}
+
+async function revokeDialogComplete(confirmed: boolean) {
+  const apiKeyRepo = await getApiKeyRepo()
+  if (confirmed) {
+    try {
+      await apiKeyRepo.revokeKey(keyToRevoke.value as ApiKey)
+      // If we've successfully revoked the key, we can remove it from the list.
+      apiKeys.value = apiKeys.value.filter((key) => key.api_key_id !== keyToRevoke.value?.api_key_id)
+    } catch (e: unknown) {
+      revokeError.value = (e as Error).message
+    }
+  }
+
+  closeRevokeDialog()
 }
 
 function formatLastUsed(lastUsed: string): string {

From 204f7b36e67d523677b10d63d67699962541617e Mon Sep 17 00:00:00 2001
From: Howard Smith <hj_smith@live.com>
Date: Sun, 3 Nov 2024 23:48:02 +0000
Subject: [PATCH 08/18] feat: Display actual timestamps in tooltips

---
 app/src/views/KeysView.vue | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/app/src/views/KeysView.vue b/app/src/views/KeysView.vue
index a65b870..aab3817 100644
--- a/app/src/views/KeysView.vue
+++ b/app/src/views/KeysView.vue
@@ -22,7 +22,7 @@
           Generate New Key
           <v-tooltip activator="parent" location="top">Click to generate a new API key</v-tooltip>
         </v-btn>
-        <v-table height="300px" style="width: 100%" fixed-header>
+        <v-table height="400px" style="width: 100%" fixed-header>
           <thead>
             <tr>
               <th class="text-left" style="width: 30%">API KEY</th>
@@ -43,9 +43,22 @@
                   >{{ key.masked }}</v-chip
                 >
               </td>
-              <td class="py-4">{{ formatLastUsed(key.created) }}</td>
+              <td class="py-4">
+                <div>
+                  {{ formatLastUsed(key.created) }}
+                  <v-tooltip activator="parent" location="top">
+                    {{ key.created }}
+                  </v-tooltip>
+                </div>
+              </td>
               <td v-if="key.last_used" class="py-4">
-                {{ formatLastUsed(key.last_used.time) }} by
+                <div>
+                  {{ formatLastUsed(key.last_used.time) }}
+                  <v-tooltip activator="parent" location="top">
+                    {{ key.last_used.time }}
+                  </v-tooltip>
+                </div>
+                by
                 <router-link
                   :to="{ name: 'monitor', params: { id: key.last_used.monitor_id } }"
                   target="_blank"

From abd94533ca546c501746473204e16e09f498e668 Mon Sep 17 00:00:00 2001
From: Howard Smith <hj_smith@live.com>
Date: Sun, 3 Nov 2024 23:48:34 +0000
Subject: [PATCH 09/18] fix: Dialog implicit closing

---
 app/src/components/ConfirmationDialog.vue | 1 +
 app/src/components/SetupMonitorDialog.vue | 1 +
 2 files changed, 2 insertions(+)

diff --git a/app/src/components/ConfirmationDialog.vue b/app/src/components/ConfirmationDialog.vue
index cbcb064..c61dfc8 100644
--- a/app/src/components/ConfirmationDialog.vue
+++ b/app/src/components/ConfirmationDialog.vue
@@ -4,6 +4,7 @@
     width="auto"
     :attach="attach"
     @keyup.esc="abort"
+    @after-leave="abort"
     @keyup.enter="confirm"
   >
     <v-card max-width="500">
diff --git a/app/src/components/SetupMonitorDialog.vue b/app/src/components/SetupMonitorDialog.vue
index 96092f8..1d97568 100644
--- a/app/src/components/SetupMonitorDialog.vue
+++ b/app/src/components/SetupMonitorDialog.vue
@@ -4,6 +4,7 @@
     :attach="attach"
     width="auto"
     @keyup.esc="exit"
+    @after-leave="exit"
     @keyup.enter="saveAndExit"
   >
     <v-card min-width="500">

From dabcef52bfabcdcdcf61c8bdc4685433e9f6f7a8 Mon Sep 17 00:00:00 2001
From: Howard Smith <hj_smith@live.com>
Date: Sun, 3 Nov 2024 23:49:36 +0000
Subject: [PATCH 10/18] feat: Generating API keys

---
 app/src/components/GenerateApiKeyDialog.vue   | 165 +++++++++++++
 .../__tests__/GenerateApiKeyDialog.spec.ts    | 226 ++++++++++++++++++
 app/src/views/KeysView.vue                    |  18 +-
 3 files changed, 407 insertions(+), 2 deletions(-)
 create mode 100644 app/src/components/GenerateApiKeyDialog.vue
 create mode 100644 app/src/components/__tests__/GenerateApiKeyDialog.spec.ts

diff --git a/app/src/components/GenerateApiKeyDialog.vue b/app/src/components/GenerateApiKeyDialog.vue
new file mode 100644
index 0000000..082c334
--- /dev/null
+++ b/app/src/components/GenerateApiKeyDialog.vue
@@ -0,0 +1,165 @@
+<template>
+  <v-dialog
+    :model-value="active"
+    :attach="attach"
+    width="auto"
+    :persistent="generatedKey !== null"
+    @after-leave="escape"
+    @keyup.esc="escape"
+    @keyup.enter="enter"
+  >
+    <v-card min-width="500">
+      <v-card-title prepend-icon="mdi-key-variant">Generate New API Key</v-card-title>
+      <div v-if="generatedKey === null">
+        <v-card-text>
+          <ApiAlert class="mx-4 mt-4" :error="generateError" @closed="generateError = null" />
+          <v-form @submit.prevent>
+            <v-text-field
+              class="mt-5"
+              hint="A name to help you identify this key"
+              persistent-hint
+              label="Name"
+              v-model="name"
+              clearable
+              variant="outlined"
+            ></v-text-field>
+          </v-form>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn
+            text="Cancel"
+            @click="abort"
+            color="orange"
+            variant="tonal"
+            append-icon="mdi-close-circle"
+          ></v-btn>
+          <v-btn
+            text="Generate Key"
+            @click="generate"
+            color="primary"
+            variant="elevated"
+            append-icon="mdi-check-circle"
+            :disabled="!canGenerate"
+            :loading="loading"
+          ></v-btn>
+        </v-card-actions>
+      </div>
+      <div v-else>
+        <v-card-text class="pt-0">
+          <v-chip
+            class="mb-4"
+            width="100%"
+            prepend-icon="mdi-alert"
+            color="warning"
+            variant="outlined"
+            label
+          >
+            Please copy this token to a safe place — it won't be shown again!
+          </v-chip>
+          <p>Your new API key has been generated.</p>
+          <p>
+            <strong>Key:</strong>
+            <v-chip
+              append-icon="mdi-content-copy"
+              color="teal-accent-4"
+              @click="copyGeneratedKey"
+              class="text-body-1 font-weight-bold ma-2"
+              variant="tonal"
+              label
+            >
+              <code>{{ generatedKey }}</code>
+            </v-chip>
+          </p>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn
+            text="Done"
+            @click="finish"
+            color="primary"
+            variant="elevated"
+            append-icon="mdi-check-circle"
+          ></v-btn>
+        </v-card-actions>
+      </div>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch, inject } from 'vue'
+
+import type { MonitorSummary } from '@/types/monitor'
+import type { ApiKeyRepoInterface } from '@/repos/api-key-repo'
+import ApiAlert from '@/components/ApiAlert.vue'
+
+const props = defineProps<{
+  dialogActive: boolean
+  monitor?: MonitorSummary | null
+}>()
+const emit = defineEmits<{
+  (e: 'dialog-complete'): void
+  (e: 'dialog-aborted'): void
+}>()
+
+const attach = inject<boolean>('noTeleport', false)
+const clipboard = inject<Clipboard>('$clipboard') as Clipboard
+const getApiKeyRepo = inject<() => Promise<ApiKeyRepoInterface>>(
+  '$getApiKeyRepo'
+) as () => Promise<ApiKeyRepoInterface>
+
+const active = computed(() => props.dialogActive)
+const canGenerate = computed(() => name.value.length > 0 && generateError.value === null)
+const generateError = ref<string | null>(null)
+const loading = ref(false)
+const name = ref('')
+const generatedKey = ref<string | null>(null)
+
+// When the parent component closes the dialog, we want to reset all state.
+watch(active, (newActive, oldActive) => {
+  if (oldActive && !newActive) {
+    loading.value = false
+    name.value = ''
+    generatedKey.value = null
+  }
+})
+
+function escape() {
+  if (generatedKey.value === null) {
+    abort()
+  }
+}
+
+async function enter() {
+  if (generatedKey.value === null) {
+    await generate()
+  } else {
+    finish()
+  }
+}
+
+function abort() {
+  emit('dialog-aborted')
+}
+
+function finish() {
+  emit('dialog-complete')
+}
+
+function copyGeneratedKey() {
+  // The elements that invoke this are only ever displayed if we have a generated key.
+  clipboard.writeText(generatedKey.value as string)
+}
+
+async function generate() {
+  loading.value = true
+  const repo = await getApiKeyRepo()
+  try {
+    generatedKey.value = await repo.generateKey(name.value)
+  } catch (e: unknown) {
+    generateError.value = `Error generating key: ${(e as Error).message}`
+  }
+  loading.value = false
+}
+</script>
diff --git a/app/src/components/__tests__/GenerateApiKeyDialog.spec.ts b/app/src/components/__tests__/GenerateApiKeyDialog.spec.ts
new file mode 100644
index 0000000..5948c2d
--- /dev/null
+++ b/app/src/components/__tests__/GenerateApiKeyDialog.spec.ts
@@ -0,0 +1,226 @@
+import { describe, expect, it, vi } from 'vitest'
+import { flushPromises, mount, VueWrapper } from '@vue/test-utils'
+import { createVuetify } from 'vuetify'
+import * as components from 'vuetify/components'
+import * as directives from 'vuetify/directives'
+
+import GenerateApiKeyDialog from '../GenerateApiKeyDialog.vue'
+import { FakeClipboard } from '@/utils/testing/fake-clipboard'
+
+describe('GenerateApiKeyDialog component', () => {
+  const vuetify = createVuetify({ components, directives })
+  global.ResizeObserver = require('resize-observer-polyfill')
+
+  it('is not rendered when not active', async () => {
+    const wrapper = mount(GenerateApiKeyDialog, {
+      global: {
+        plugins: [vuetify],
+        provide: {
+          noTeleport: true,
+          $clipboard: {},
+          $getApiKeyRepo: () => {}
+        }
+      },
+      props: {
+        dialogActive: false
+      }
+    })
+
+    await flushPromises()
+    expect(wrapper.html()).toBeFalsy()
+  })
+
+  it('is rendered when active', async () => {
+    const wrapper = mount(GenerateApiKeyDialog, {
+      global: {
+        plugins: [vuetify],
+        provide: {
+          noTeleport: true,
+          $clipboard: {},
+          $getApiKeyRepo: () => {}
+        }
+      },
+      props: {
+        dialogActive: true
+      }
+    })
+
+    await flushPromises()
+    expect(wrapper.html()).toBeTruthy()
+
+    // Check the title and icon.
+    const title = wrapper.find('.v-card-title')
+    expect(title.text()).toBe('Generate New API Key')
+    expect(title.attributes('prepend-icon')).toBe('mdi-key-variant')
+
+    // Check the question.
+    const textField = wrapper.find('.v-text-field')
+    expect(textField.find('.v-label').text()).toBe('Name')
+    expect(textField.find('.v-messages').text()).toBe('A name to help you identify this key')
+
+    // Check the buttons.
+    const buttons = wrapper.findAll('.v-card-actions > .v-btn')
+    expect(buttons).toHaveLength(2)
+    const buttonDetails = buttons.map((button) => {
+      return {
+        text: button.text(),
+        icon: button
+          .find('.v-icon')
+          .classes()
+          .find((cls) => cls.startsWith('mdi-'))
+      }
+    })
+    expect(buttonDetails).toEqual([
+      { text: 'Cancel', icon: 'mdi-close-circle' },
+      { text: 'Generate Key', icon: 'mdi-check-circle' }
+    ])
+  })
+
+  it.each([
+    async (wrapper: VueWrapper) => {
+      await wrapper.find('.v-card-actions').findAll('.v-btn')[0].trigger('click')
+    },
+    async (wrapper: VueWrapper) => {
+      await wrapper.find('.v-dialog').trigger('keyup.esc')
+    }
+  ])('Aborts the generation when the dialog is aborted', async (action) => {
+    const mockGenerateKey = vi.fn().mockResolvedValue('new-key')
+    const mockGetRepo = vi.fn().mockReturnValue({
+      generateKey: mockGenerateKey
+    })
+
+    const wrapper = mount(GenerateApiKeyDialog, {
+      global: {
+        plugins: [vuetify],
+        provide: {
+          noTeleport: true,
+          $clipboard: {},
+          $getApiKeyRepo: mockGetRepo
+        }
+      },
+      props: {
+        dialogActive: true
+      }
+    })
+    await flushPromises()
+
+    // Set a name for the key.
+    await wrapper.find('.v-text-field').find('input').setValue('Test Key')
+
+    await action(wrapper)
+    await flushPromises()
+    expect(wrapper.emitted('dialog-aborted')).toBeTruthy()
+
+    expect(mockGenerateKey).not.toHaveBeenCalled()
+
+    // Close the dialog then reopen it. The name we set should have now dissappeared.
+    await wrapper.setProps({ dialogActive: false })
+    await wrapper.setProps({ dialogActive: true })
+    await flushPromises()
+    expect(wrapper.find('.v-text-field').find('input').text()).toBe('')
+  })
+
+  it.each([
+    async (wrapper: VueWrapper) => {
+      // Click the last button (this will either be the generate key button or the done button).
+      const buttons = wrapper.find('.v-card-actions').findAll('.v-btn')
+      await buttons[buttons.length - 1].trigger('click')
+    },
+    async (wrapper: VueWrapper) => {
+      await wrapper.find('.v-dialog').trigger('keyup.enter')
+    }
+  ])(
+    'Generates a new API key when the generate button is clicked or enter key pressed',
+    async (action) => {
+      const mockGenerateKey = vi.fn().mockResolvedValue('new-key')
+      const mockGetRepo = vi.fn().mockReturnValue({
+        generateKey: mockGenerateKey
+      })
+
+      const clipboard = new FakeClipboard()
+
+      const wrapper = mount(GenerateApiKeyDialog, {
+        global: {
+          plugins: [vuetify],
+          provide: {
+            noTeleport: true,
+            $clipboard: clipboard,
+            $getApiKeyRepo: mockGetRepo
+          }
+        },
+        props: {
+          dialogActive: true
+        }
+      })
+      await flushPromises()
+
+      // Set a name for the key.
+      await wrapper.find('.v-text-field').find('input').setValue('Test Key')
+
+      await action(wrapper)
+      await flushPromises()
+
+      expect(mockGenerateKey).toHaveBeenCalledOnce()
+      expect(mockGenerateKey).toHaveBeenCalledWith('Test Key')
+
+      // The dialog should now show the generated key.
+      const chips = wrapper.find('.v-card-text').findAll('.v-chip')
+      expect(chips).toHaveLength(2)
+      expect(chips[0].text()).toBe(
+        "Please copy this token to a safe place — it won't be shown again!"
+      )
+      expect(chips[1].text()).toBe('new-key')
+
+      // The key should be copied to the clipboard.
+      await chips[1].trigger('click')
+      expect(await clipboard.readText()).toBe('new-key')
+
+      // Hitting escape should not close the dialog.
+      await wrapper.find('.v-dialog').trigger('keyup.escape')
+      await flushPromises()
+      expect(wrapper.emitted('dialog-aborted')).toBeFalsy()
+
+      // Hitting enter or clicking done should emit the dialog-complete event.
+      await action(wrapper)
+      await flushPromises()
+      expect(wrapper.emitted('dialog-aborted')).toBeFalsy()
+      expect(wrapper.emitted('dialog-complete')).toBeTruthy()
+    }
+  )
+
+  it('Displays API errors when generating new keys', async () => {
+    const mockGenerateKey = vi.fn().mockRejectedValue(new Error('test-error'))
+    const mockGetRepo = vi.fn().mockReturnValue({
+      generateKey: mockGenerateKey
+    })
+
+    const wrapper = mount(GenerateApiKeyDialog, {
+      global: {
+        plugins: [vuetify],
+        provide: {
+          noTeleport: true,
+          $clipboard: {},
+          $getApiKeyRepo: mockGetRepo
+        }
+      },
+      props: {
+        dialogActive: true
+      }
+    })
+    await flushPromises()
+
+    // Set a name for the key.
+    await wrapper.find('.v-text-field').find('input').setValue('Test Key')
+
+    await wrapper.find('.v-card-actions').findAll('.v-btn')[1].trigger('click')
+    await flushPromises()
+
+    expect(mockGenerateKey).toHaveBeenCalledOnce()
+    expect(mockGenerateKey).toHaveBeenCalledWith('Test Key')
+
+    // The dialog should now show the error.
+    expect(wrapper.find('.v-alert').find('.api-alert-content').text()).toBe(
+      'Error generating key: test-error'
+    )
+  })
+})
diff --git a/app/src/views/KeysView.vue b/app/src/views/KeysView.vue
index aab3817..2500fd3 100644
--- a/app/src/views/KeysView.vue
+++ b/app/src/views/KeysView.vue
@@ -73,6 +73,11 @@
         </v-table>
       </v-card-text>
     </v-card>
+    <GenerateApiKeyDialog
+      :dialogActive="openGenerateKeyDialog"
+      @dialog-aborted="generateDialogComplete"
+      @dialog-complete="generateDialogComplete"
+    />
     <ConfirmationDialog
       :dialogActive="keyToRevoke !== null"
       title="Revoke this API Key?"
@@ -91,6 +96,7 @@ import ApiAlert from '@/components/ApiAlert.vue'
 import type { ApiKeyRepoInterface } from '@/repos/api-key-repo'
 import type { ApiKey } from '@/types/api-key'
 import ConfirmationDialog from '@/components/ConfirmationDialog.vue'
+import GenerateApiKeyDialog from '@/components/GenerateApiKeyDialog.vue'
 
 const FIVE_MINUTES_MS = 5 * 60 * 1000
 
@@ -108,10 +114,11 @@ const loading = ref(true)
 const syncError = ref<string | null>(null)
 const revokeError = ref<string | null>(null)
 const apiKeys = ref<ApiKey[]>([])
+const openGenerateKeyDialog = ref(false)
 const keyToRevoke = ref<ApiKey | null>(null)
 
 function generateKey() {
-  alert('Not implemented yet!')
+  openGenerateKeyDialog.value = true
 }
 
 function openRevokeKeyDialog(key: ApiKey) {
@@ -128,7 +135,9 @@ async function revokeDialogComplete(confirmed: boolean) {
     try {
       await apiKeyRepo.revokeKey(keyToRevoke.value as ApiKey)
       // If we've successfully revoked the key, we can remove it from the list.
-      apiKeys.value = apiKeys.value.filter((key) => key.api_key_id !== keyToRevoke.value?.api_key_id)
+      apiKeys.value = apiKeys.value.filter(
+        (key) => key.api_key_id !== keyToRevoke.value?.api_key_id
+      )
     } catch (e: unknown) {
       revokeError.value = (e as Error).message
     }
@@ -137,6 +146,11 @@ async function revokeDialogComplete(confirmed: boolean) {
   closeRevokeDialog()
 }
 
+async function generateDialogComplete() {
+  openGenerateKeyDialog.value = false
+  await getApiKeys()
+}
+
 function formatLastUsed(lastUsed: string): string {
   return formatDistanceToNow(new Date(lastUsed), { addSuffix: true })
 }

From 25e05de0f567298d4f9f386f34e5cd727816edd8 Mon Sep 17 00:00:00 2001
From: Howard Smith <hj_smith@live.com>
Date: Sun, 10 Nov 2024 22:20:03 +0000
Subject: [PATCH 11/18] chore: Don't open monitor links in new tabs on keys
 page

---
 app/src/views/KeysView.vue | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/app/src/views/KeysView.vue b/app/src/views/KeysView.vue
index 2500fd3..6a1a711 100644
--- a/app/src/views/KeysView.vue
+++ b/app/src/views/KeysView.vue
@@ -59,12 +59,9 @@
                   </v-tooltip>
                 </div>
                 by
-                <router-link
-                  :to="{ name: 'monitor', params: { id: key.last_used.monitor_id } }"
-                  target="_blank"
-                  rel="noreferrer noopener"
-                  >{{ key.last_used.monitor_name }}</router-link
-                >
+                <router-link :to="{ name: 'monitor', params: { id: key.last_used.monitor_id } }">{{
+                  key.last_used.monitor_name
+                }}</router-link>
               </td>
               <td v-else class="py-4 text-disabled">Never used</td>
               <td><v-btn icon="mdi-key-remove" @click="openRevokeKeyDialog(key)"></v-btn></td>

From 84d6c8c2638b3f8d8036d328430e3f50a3d10e46 Mon Sep 17 00:00:00 2001
From: Howard Smith <hj_smith@live.com>
Date: Sun, 10 Nov 2024 22:21:29 +0000
Subject: [PATCH 12/18] chore: Use correct attribute names in `msw` endpoints
 for API keys

---
 app/src/repos/__tests__/api-key-repo.spec.ts |  2 +-
 app/src/utils/testing/test-api.ts            | 20 ++++++++++----------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/app/src/repos/__tests__/api-key-repo.spec.ts b/app/src/repos/__tests__/api-key-repo.spec.ts
index 211cd1a..192e63a 100644
--- a/app/src/repos/__tests__/api-key-repo.spec.ts
+++ b/app/src/repos/__tests__/api-key-repo.spec.ts
@@ -31,7 +31,7 @@ describe('MonitorApiKeyRepositoryRepository', () => {
         last_used: {
           time: '2024-03-31T12:35:00',
           monitor_id: 'e534a01a-4efe-4b8e-9b04-44a3c76b0462',
-          name: 'analyse-bar.py'
+          monitor_name: 'analyse-bar.py'
         }
       },
       {
diff --git a/app/src/utils/testing/test-api.ts b/app/src/utils/testing/test-api.ts
index 50a6c16..4a0b541 100644
--- a/app/src/utils/testing/test-api.ts
+++ b/app/src/utils/testing/test-api.ts
@@ -114,7 +114,7 @@ export function setupTestAPI(expectedToken: string): SetupServer {
       last_used: {
         time: '2024-03-31T12:35:00',
         monitor_id: 'e534a01a-4efe-4b8e-9b04-44a3c76b0462',
-        name: 'analyse-bar.py'
+        monitor_name: 'analyse-bar.py'
       }
     },
     {
@@ -131,15 +131,15 @@ export function setupTestAPI(expectedToken: string): SetupServer {
     return token === `Bearer ${expectedToken}`
       ? undefined
       : HttpResponse.json(
-        {
-          error: {
-            code: 401,
-            reason: 'Unauthorized',
-            description: 'The request requires user authentication.'
-          }
-        },
-        { status: 401 }
-      )
+          {
+            error: {
+              code: 401,
+              reason: 'Unauthorized',
+              description: 'The request requires user authentication.'
+            }
+          },
+          { status: 401 }
+        )
   }
 
   return setupServer(

From 94c4feb1ab5509adcbf9945295cf37ffc99f9c28 Mon Sep 17 00:00:00 2001
From: Howard Smith <hj_smith@live.com>
Date: Sun, 10 Nov 2024 22:22:28 +0000
Subject: [PATCH 13/18] test: Add unit tests for `KeysView`

---
 app/src/views/__tests__/KeysView.spec.ts | 346 +++++++++++++++++++++++
 1 file changed, 346 insertions(+)
 create mode 100644 app/src/views/__tests__/KeysView.spec.ts

diff --git a/app/src/views/__tests__/KeysView.spec.ts b/app/src/views/__tests__/KeysView.spec.ts
new file mode 100644
index 0000000..943a766
--- /dev/null
+++ b/app/src/views/__tests__/KeysView.spec.ts
@@ -0,0 +1,346 @@
+import { describe, it, expect, vi, type Mock, beforeEach, afterEach } from 'vitest'
+import { VueWrapper, flushPromises, mount, RouterLinkStub } from '@vue/test-utils'
+import { defineComponent } from 'vue'
+import { createVuetify } from 'vuetify'
+import * as components from 'vuetify/components'
+import * as directives from 'vuetify/directives'
+
+import KeysView from '@/views/KeysView.vue'
+import { type ApiKey } from '@/types/api-key'
+import { type ApiKeyRepoInterface } from '@/repos/api-key-repo'
+
+import { FakeVueCookies } from '@/utils/testing/fake-vue-cookies'
+
+function getTestApiKeyData(): ApiKey[] {
+  return [
+    {
+      api_key_id: '547810d4-a636-4c1b-83e6-3e641391c84e',
+      name: 'Key 1',
+      masked: '1234************5678',
+      created: '2024-06-15T12:00:00',
+      last_used: null
+    },
+    {
+      api_key_id: 'fd940a34-684c-4c15-b914-ca7180aa5c8b',
+      name: 'Key 2',
+      masked: '8765************4321',
+      created: '2024-07-27T12:00:00',
+      last_used: {
+        time: '2024-08-27T12:00:00',
+        monitor_name: 'Monitor 1',
+        monitor_id: '547810d4-a636-4c1b-83e6-3e641391c84e'
+      }
+    }
+  ]
+}
+
+async function mountKeysView(): Promise<{
+  wrapper: VueWrapper
+  cookies: FakeVueCookies
+  repo: ApiKeyRepoInterface
+}> {
+  const vuetify = createVuetify({ components, directives })
+
+  let TEST_API_KEY_DATA = getTestApiKeyData()
+
+  // The KeysView component uses an async setup, so we need to wrap it in a
+  // Suspense component to test it.
+  const TestComponent = defineComponent({
+    components: { KeysView },
+    template: '<Suspense><KeysView/></Suspense>'
+  })
+
+  const TestGenerateDialog = defineComponent({
+    template: '<div>Test dialog</div>',
+    emits: ['dialog-complete'],
+    props: ['dialogActive'],
+    watch: {
+      dialogActive(active: boolean) {
+        if (active) {
+          this.$emit('dialog-complete')
+        }
+      }
+    }
+  })
+
+  const TestConfirmationDialog = defineComponent({
+    template: '<div>Test confirmation dialog</div>',
+    emits: ['dialog-complete'],
+    props: ['dialogActive', 'dialogData'],
+    watch: {
+      dialogActive(active: boolean) {
+        if (active) {
+          this.$emit('dialog-complete', true)
+        }
+      }
+    }
+  })
+
+  const cookies = new FakeVueCookies()
+
+  const repo = {
+    getKeys: vi.fn().mockResolvedValue(TEST_API_KEY_DATA),
+    revokeKey: vi.fn().mockImplementation(async (apiKeyId) => {
+      TEST_API_KEY_DATA = TEST_API_KEY_DATA.filter((key) => key.api_key_id !== apiKeyId)
+    }),
+    generateKey: vi.fn()
+  }
+
+  const wrapper = mount(TestComponent, {
+    global: {
+      plugins: [vuetify],
+      provide: {
+        $getApiKeyRepo: () => repo,
+        $cookies: cookies
+      },
+      mocks: {
+        $cookies: cookies
+      },
+      stubs: {
+        // We don't want to test the dialog itself as it has its own tests, just that it is opened.
+        GenerateApiKeyDialog: TestGenerateDialog,
+        ConfirmationDialog: TestConfirmationDialog,
+        RouterLink: RouterLinkStub
+      }
+    }
+  })
+
+  await flushPromises()
+
+  return { wrapper, cookies, repo }
+}
+
+describe('KeysView view', () => {
+  vi.mock('vue-router', () => ({
+    useRoute: vi.fn(),
+    useRouter: vi.fn(() => ({
+      push: () => {}
+    }))
+  }))
+
+  beforeEach(() => {
+    vi.useFakeTimers({ now: new Date('2024-09-15T12:00:00') })
+  })
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  it('renders as expected', async () => {
+    // vi.setSystemTime(new Date('2024-09-15T12:00:00'))
+    const { wrapper } = await mountKeysView()
+
+    // Should have a button for generating new API keys.
+    const button = wrapper.find('.v-btn')
+    expect(button.text()).toBe('Generate New Key')
+
+    // Should have a list of existing keys.
+    const keyRows = wrapper.find('.v-table').find('tbody').findAll('tr')
+
+    // API KEY column
+    expect(keyRows.map((key) => key.find('td').find('div').text())).toEqual(['Key 1', 'Key 2'])
+    expect(keyRows.map((key) => key.find('td').find('.v-chip').text())).toEqual([
+      '1234************5678',
+      '8765************4321'
+    ])
+
+    // CREATED column
+    expect(keyRows.map((key) => key.findAll('td')[1].text())).toEqual([
+      '3 months ago',
+      'about 2 months ago'
+    ])
+
+    // LAST ACCESS column
+    expect(keyRows.map((key) => key.findAll('td')[2].text())).toEqual([
+      'Never used',
+      '19 days ago  by Monitor 1'
+    ])
+
+    // Should have a button for revoking keys.
+    const revokeButtons = keyRows.map((key) => key.findAll('td')[3].find('.v-btn').find('.v-icon'))
+    expect(revokeButtons.map((btn) => btn.classes().includes('mdi-key-remove'))).toEqual([
+      true,
+      true
+    ])
+  })
+
+  it('detects API keys generated externally', async () => {
+    const { wrapper, repo } = await mountKeysView()
+
+    // Ensure we have the expected keys to begin with as a sanity check.
+    const originalKeyRows = wrapper.find('.v-table').find('tbody').findAll('tr')
+    expect(originalKeyRows.map((key) => key.find('td').find('div').text())).toEqual([
+      'Key 1',
+      'Key 2'
+    ])
+
+    // Add a new key 'externally'.
+    ;(repo.getKeys as Mock).mockResolvedValue(
+      getTestApiKeyData().concat([
+        {
+          api_key_id: '06d0d73c-a0ff-4428-81f0-f4118e7beea5',
+          name: 'Key 3',
+          masked: '2468************8642',
+          created: '2024-09-15T12:00:00',
+          last_used: null
+        }
+      ])
+    )
+
+    // Simulate 5 minutes passing, by which time we should have re-synced the keys.
+    vi.advanceTimersByTime(5 * 60 * 1000)
+    await flushPromises()
+
+    // We should now have 3 keys displayed.
+    const newKeyRows = wrapper.find('.v-table').find('tbody').findAll('tr')
+    expect(newKeyRows.map((key) => key.find('td').find('div').text())).toEqual([
+      'Key 1',
+      'Key 2',
+      'Key 3'
+    ])
+  })
+
+  it('can generate a new API key', async () => {
+    const { wrapper, repo } = await mountKeysView()
+
+    // Ensure we've synced and have the expected keys to begin with as a sanity check.
+    // const mockGetKeys = repo.getKeys as Mock
+    expect(repo.getKeys as Mock).toHaveBeenCalledTimes(1)
+    const originalKeyRows = wrapper.find('.v-table').find('tbody').findAll('tr')
+    expect(originalKeyRows.map((key) => key.find('td').find('div').text())).toEqual([
+      'Key 1',
+      'Key 2'
+    ])
+
+    // Setup the new key (this is what the dialog would do, but we're mocking it here).
+    ;(repo.getKeys as Mock).mockResolvedValue(
+      getTestApiKeyData().concat([
+        {
+          api_key_id: '06d0d73c-a0ff-4428-81f0-f4118e7beea5',
+          name: 'New Key',
+          masked: '2468************8642',
+          created: '2024-09-15T12:00:00',
+          last_used: null
+        }
+      ])
+    )
+
+    // Clicking the Generate New Key button will trigger our test dialog, which will imediately complete.
+    const generateKeyButton = wrapper.find('.v-btn')
+    expect(generateKeyButton.text()).toBe('Generate New Key')
+    await generateKeyButton.trigger('click')
+    await flushPromises()
+
+    // When the dialog completes we should re-sync the keys.
+    expect(repo.getKeys as Mock).toHaveBeenCalledTimes(2)
+
+    // We should now have 3 keys displayed.
+    const newKeyRows = wrapper.find('.v-table').find('tbody').findAll('tr')
+    expect(newKeyRows).toHaveLength(3)
+    expect(newKeyRows.map((key) => key.find('td').find('div').text())).toEqual([
+      'Key 1',
+      'Key 2',
+      'New Key'
+    ])
+  })
+
+  it('can revoke an existing API key', async () => {
+    const { wrapper } = await mountKeysView()
+
+    // Ensure we have the expected keys to begin with as a sanity check.
+    const originalKeyRows = wrapper.find('.v-table').find('tbody').findAll('tr')
+    expect(originalKeyRows.map((key) => key.find('td').find('div').text())).toEqual([
+      'Key 1',
+      'Key 2'
+    ])
+
+    // Click the revoke button on the first key.
+    const revokeButton = originalKeyRows[0].find('.v-btn')
+    await revokeButton.trigger('click')
+    await flushPromises()
+
+    // We should now have only one key displayed.
+    const newKeyRows = wrapper.find('.v-table').find('tbody').findAll('tr')
+    expect(newKeyRows.map((key) => key.find('td').find('div').text())).toEqual(['Key 2'])
+  })
+
+  it('stops syncing when the component is unmounted', async () => {
+    vi.useFakeTimers()
+
+    const { wrapper, repo } = await mountKeysView()
+    const mockGetKeys = repo.getKeys as Mock
+
+    // Let the KeysView component sync.
+    vi.advanceTimersByTime(5 * 60 * 1000)
+    await flushPromises()
+
+    // Ensure the sync happened. This is a sanity check to ensure the component is syncing
+    // as expected.
+    expect(mockGetKeys.mock.calls).toHaveLength(2)
+
+    // Unmount the component then allow enough time for another sync to happen.
+    await wrapper.unmount()
+    vi.advanceTimersByTime(5 * 60 * 1000)
+    await flushPromises()
+
+    // Ensure no more syncs happened.
+    expect(mockGetKeys.mock.calls).toHaveLength(2)
+
+    vi.useRealTimers()
+  })
+
+  it('can handle errors when syncing API keys', async () => {
+    vi.useFakeTimers()
+    const { wrapper, repo } = await mountKeysView()
+
+    // Ensure we have the expected keys to begin with as a sanity check.
+    const originalKeyRows = wrapper.find('.v-table').find('tbody').findAll('tr')
+    expect(originalKeyRows.map((key) => key.find('td').find('div').text())).toEqual([
+      'Key 1',
+      'Key 2'
+    ])
+
+    // Simulate an error when retrieving keys.
+    ;(repo.getKeys as Mock).mockRejectedValue(new Error('Test error'))
+
+    // Let the KeysView component sync.
+    vi.advanceTimersByTime(5 * 60 * 1000)
+    await flushPromises()
+
+    // We should have an alert displayed with the error message.
+    const alert = wrapper.find('.v-alert').find('.api-alert-content')
+    expect(alert.find('span').text()).toBe('Test error')
+
+    // We should still have the same keys displayed.
+    const newKeyRows = wrapper.find('.v-table').find('tbody').findAll('tr')
+    expect(newKeyRows.map((key) => key.find('td').find('div').text())).toEqual(['Key 1', 'Key 2'])
+
+    vi.useRealTimers()
+  })
+
+  it('can handle errors when revoking an API key', async () => {
+    const { wrapper, repo } = await mountKeysView()
+
+    // Ensure we have the expected keys to begin with as a sanity check.
+    const originalKeyRows = wrapper.find('.v-table').find('tbody').findAll('tr')
+    expect(originalKeyRows.map((key) => key.find('td').find('div').text())).toEqual([
+      'Key 1',
+      'Key 2'
+    ])
+
+    // Simulate an error when revoking a key.
+    ;(repo.revokeKey as Mock).mockRejectedValue(new Error('Test error'))
+
+    // Click the revoke button on the first key.
+    const revokeButton = originalKeyRows[0].find('.v-btn')
+    await revokeButton.trigger('click')
+    await flushPromises()
+
+    // We should have an alert displayed with the error message.
+    const alert = wrapper.find('.v-alert').find('.api-alert-content')
+    expect(alert.find('span').text()).toBe('Test error')
+
+    // We should still have the same keys displayed.
+    const newKeyRows = wrapper.find('.v-table').find('tbody').findAll('tr')
+    expect(newKeyRows.map((key) => key.find('td').find('div').text())).toEqual(['Key 1', 'Key 2'])
+  })
+})

From 4e9a47bc2a4a57beead7ead1307316b125f65664 Mon Sep 17 00:00:00 2001
From: Howard Smith <hj_smith@live.com>
Date: Sun, 10 Nov 2024 22:24:19 +0000
Subject: [PATCH 14/18] test: Add missing auth integration test

---
 app/src/__tests__/App.spec.ts | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/app/src/__tests__/App.spec.ts b/app/src/__tests__/App.spec.ts
index e43ad3c..3d90e65 100644
--- a/app/src/__tests__/App.spec.ts
+++ b/app/src/__tests__/App.spec.ts
@@ -186,7 +186,7 @@ describe('Interacting with Monitors', async () => {
     server.listen({ onUnhandledRequest: 'error' })
     mocks.useAuth.mockReturnValue({
       isAuthenticated: true,
-      user: { name: 'Test User' },
+      user: { firstName: 'Test User' },
       openAccountManagement: vi.fn(),
       logout: vi.fn(() => Promise.resolve),
       getToken: mockGetToken,
@@ -203,8 +203,6 @@ describe('Interacting with Monitors', async () => {
   // Reset handlers after each test `important for test isolation`
   afterEach(() => server.resetHandlers())
 
-  // TODO Check we have user in top bar.
-
   it('navigates to specific monitors as expected', async () => {
     const { wrapper, router } = await mountApp()
 
@@ -212,6 +210,9 @@ describe('Interacting with Monitors', async () => {
     await router.push('/monitoring/monitors')
     await flushPromises()
 
+    // Some auth assertions: ensure the toolbar displays the user's name and that we've called our getToken function.
+    const toolbar = wrapper.find('.v-toolbar')
+    expect(toolbar.text()).toBe('Hello, Test User')
     expect(mockGetToken).toHaveBeenCalledOnce()
 
     const firstMonitor = wrapper.find('.v-main').findAll('.v-card')[0]

From 5832038eb8bfbf04ecf55bc89bd49858d6bf6746 Mon Sep 17 00:00:00 2001
From: Howard Smith <hj_smith@live.com>
Date: Sun, 10 Nov 2024 22:24:50 +0000
Subject: [PATCH 15/18] refactor: Auth mock setup in integreation tests

---
 app/src/__tests__/App.spec.ts | 42 +++++++++++++++++++----------------
 1 file changed, 23 insertions(+), 19 deletions(-)

diff --git a/app/src/__tests__/App.spec.ts b/app/src/__tests__/App.spec.ts
index 3d90e65..db6217f 100644
--- a/app/src/__tests__/App.spec.ts
+++ b/app/src/__tests__/App.spec.ts
@@ -1,4 +1,4 @@
-import { afterAll, afterEach, beforeAll, describe, vi, it, expect } from 'vitest'
+import { afterAll, afterEach, beforeAll, describe, vi, it, expect, type Mock } from 'vitest'
 import { VueWrapper, flushPromises, mount } from '@vue/test-utils'
 import { createVuetify } from 'vuetify'
 import * as components from 'vuetify/components'
@@ -13,6 +13,27 @@ import { FakeVueCookies } from '@/utils/testing/fake-vue-cookies'
 import { FakeClipboard } from '@/utils/testing/fake-clipboard'
 import { setupTestAPI } from '@/utils/testing/test-api'
 
+const mocks = vi.hoisted(() => {
+  return {
+    useAuth: vi.fn()
+  }
+})
+
+vi.mock('@/composables/auth', () => ({
+  useAuth: mocks.useAuth
+}))
+
+function setupMockAuth(mockGetToken: Mock): void {
+  mocks.useAuth.mockReturnValue({
+    isAuthenticated: true,
+    user: { firstName: 'Test User' },
+    openAccountManagement: vi.fn(),
+    logout: vi.fn(() => Promise.resolve),
+    getToken: mockGetToken,
+    isReady: vi.fn(() => Promise.resolve)
+  })
+}
+
 async function mountApp(): Promise<{ wrapper: VueWrapper; router: Router }> {
   const vuetify = createVuetify({ components, directives })
   const router = createRouter({
@@ -46,16 +67,6 @@ async function mountApp(): Promise<{ wrapper: VueWrapper; router: Router }> {
   return { wrapper, router }
 }
 
-const mocks = vi.hoisted(() => {
-  return {
-    useAuth: vi.fn()
-  }
-})
-
-vi.mock('@/composables/auth', () => ({
-  useAuth: mocks.useAuth
-}))
-
 describe('The App', () => {
   beforeAll(() => {
     mocks.useAuth.mockReturnValue({
@@ -184,14 +195,7 @@ describe('Interacting with Monitors', async () => {
   // Start server before all tests
   beforeAll(() => {
     server.listen({ onUnhandledRequest: 'error' })
-    mocks.useAuth.mockReturnValue({
-      isAuthenticated: true,
-      user: { firstName: 'Test User' },
-      openAccountManagement: vi.fn(),
-      logout: vi.fn(() => Promise.resolve),
-      getToken: mockGetToken,
-      isReady: vi.fn(() => Promise.resolve)
-    })
+    setupMockAuth(mockGetToken)
   })
 
   // Close server after all tests

From c98336bfd8162f4002ffc232224fb90cc2988493 Mon Sep 17 00:00:00 2001
From: Howard Smith <hj_smith@live.com>
Date: Sun, 10 Nov 2024 22:25:07 +0000
Subject: [PATCH 16/18] test: Add an integration test for API Keys view

---
 app/src/__tests__/App.spec.ts | 60 +++++++++++++++++++++++++++++++++++
 1 file changed, 60 insertions(+)

diff --git a/app/src/__tests__/App.spec.ts b/app/src/__tests__/App.spec.ts
index db6217f..298575b 100644
--- a/app/src/__tests__/App.spec.ts
+++ b/app/src/__tests__/App.spec.ts
@@ -230,3 +230,63 @@ describe('Interacting with Monitors', async () => {
     expect(firstChip.text()).toBe('Monitor ID: cfe88463-5c04-4b43-b10f-1f508963cc5d')
   })
 })
+
+describe('Interacting with API Keys', async () => {
+  global.ResizeObserver = require('resize-observer-polyfill')
+  const server = setupTestAPI('foo-token')
+
+  const mockGetToken = vi.fn(() => 'foo-token')
+
+  // Start server before all tests
+  beforeAll(() => {
+    server.listen({ onUnhandledRequest: 'error' })
+    setupMockAuth(mockGetToken)
+  })
+
+  // Close server after all tests
+  afterAll(() => {
+    server.close()
+    mocks.useAuth.mockRestore()
+  })
+
+  // Reset handlers after each test `important for test isolation`
+  afterEach(() => server.resetHandlers())
+
+  it('navigates to specific API keys as expected', async () => {
+    vi.useFakeTimers({ now: new Date('2024-09-15T12:00:00') })
+    const { wrapper, router } = await mountApp()
+
+    // Navigate to the API keys page.
+    await router.push('/monitoring/keys')
+    await flushPromises()
+
+    // We should have 2 keys in the list; 'Test Key 1' and 'Test Key 2'.
+    const keyRows = wrapper
+      .find('.v-main')
+      .find('.v-card')
+      .find('.v-table')
+      .find('tbody')
+      .findAll('tr')
+    expect(keyRows.map((key) => key.find('td').find('div').text())).toEqual([
+      'Test Key 1',
+      'Test Key 2'
+    ])
+
+    // One of the keys should have been used by a monitor.
+    expect(keyRows.map((key) => key.findAll('td')[2].text())).toEqual([
+      '6 months ago  by analyse-bar.py',
+      'Never used'
+    ])
+
+    // The key that's been used should contain a link to the monitor.
+    const lastAccessColumn = keyRows[0].findAll('td')[2]
+    const monitorLink = lastAccessColumn.find('a')
+    expect(monitorLink).toBeDefined()
+    expect(monitorLink.text()).toBe('analyse-bar.py')
+    expect(monitorLink.attributes('href')).toBe(
+      '/monitoring/monitors/e534a01a-4efe-4b8e-9b04-44a3c76b0462'
+    )
+
+    vi.useRealTimers()
+  })
+})

From a8881116ab7cb0a21a84f71ea1c64cf30db290cc Mon Sep 17 00:00:00 2001
From: Howard Smith <hj_smith@live.com>
Date: Sun, 10 Nov 2024 22:25:18 +0000
Subject: [PATCH 17/18] chore: Remove superfluous comment

---
 app/src/composables/auth.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/src/composables/auth.ts b/app/src/composables/auth.ts
index 73a946b..24722bb 100644
--- a/app/src/composables/auth.ts
+++ b/app/src/composables/auth.ts
@@ -17,7 +17,6 @@ export interface Auth {
   isReady: () => Promise<void>
 }
 
-// TODO: Write tests for this.
 export function useAuth(protectedRoutes: string[]): Auth {
   const keycloak = new Keycloak({
     url: 'http://127.0.0.1:8080',

From 8b4e204e879f7f0884c8ef1e946219aca4b49d2a Mon Sep 17 00:00:00 2001
From: Howard Smith <hj_smith@live.com>
Date: Sun, 10 Nov 2024 23:19:50 +0000
Subject: [PATCH 18/18] test: Add integration test for generating new API keys

---
 app/src/__tests__/App.spec.ts | 55 +++++++++++++++++++++++++++++++++--
 1 file changed, 53 insertions(+), 2 deletions(-)

diff --git a/app/src/__tests__/App.spec.ts b/app/src/__tests__/App.spec.ts
index 298575b..58f497c 100644
--- a/app/src/__tests__/App.spec.ts
+++ b/app/src/__tests__/App.spec.ts
@@ -34,7 +34,9 @@ function setupMockAuth(mockGetToken: Mock): void {
   })
 }
 
-async function mountApp(): Promise<{ wrapper: VueWrapper; router: Router }> {
+async function mountApp(
+  noTeleport: boolean = false
+): Promise<{ wrapper: VueWrapper; router: Router }> {
   const vuetify = createVuetify({ components, directives })
   const router = createRouter({
     history: createWebHistory(),
@@ -50,7 +52,8 @@ async function mountApp(): Promise<{ wrapper: VueWrapper; router: Router }> {
       provide: {
         $localStorage: new FakeLocalStorage(),
         $clipboard: new FakeClipboard(),
-        $cookies: fakeCookies
+        $cookies: fakeCookies,
+        noTeleport: noTeleport
       },
       mocks: {
         $cookies: fakeCookies
@@ -289,4 +292,52 @@ describe('Interacting with API Keys', async () => {
 
     vi.useRealTimers()
   })
+
+  it('generates a new API key as expected', async () => {
+    global.ResizeObserver = require('resize-observer-polyfill')
+    const { wrapper, router } = await mountApp(true)
+
+    // Navigate to the API keys page.
+    await router.push('/monitoring/keys')
+    await flushPromises()
+
+    // Click the 'Generate API Key' button.
+    await wrapper.find('.v-main').find('.v-card').find('.v-btn').trigger('click')
+    await flushPromises()
+
+    // The dialog should be open.
+    const dialog = wrapper.find('.v-dialog')
+    expect(dialog.exists()).toBeTruthy()
+
+    // Set a name for the key then click the 'Generate Key' button.
+    const textField = dialog.find('.v-text-field').find('input')
+    await textField.setValue('Test Key')
+    const generateButton = dialog.findAll('.v-btn')[1]
+    expect(generateButton.text()).toBe('Generate Key')
+    await generateButton.trigger('click')
+    await flushPromises()
+
+    // The dialog should now show the generated key.
+    const key = dialog.find('.v-card-text').findAll('.v-chip')[1]
+    expect(key.text()).toBe('yeK tseT')
+
+    // Click the 'Done' button to close the dialog.
+    const doneButton = dialog.find('.v-btn')
+    expect(doneButton.text()).toBe('Done')
+    await doneButton.trigger('click')
+    await flushPromises()
+
+    // We should now have 3 keys in the list; 'Test Key 1', 'Test Key 2' and 'Test Key'.
+    const keyRows = wrapper
+      .find('.v-main')
+      .find('.v-card')
+      .find('.v-table')
+      .find('tbody')
+      .findAll('tr')
+    expect(keyRows.map((key) => key.find('td').find('div').text())).toEqual([
+      'Test Key 1',
+      'Test Key 2',
+      'Test Key'
+    ])
+  })
 })