Local worker runs view

src/api/workerRun.ts

@@ -68,3 +68,9 @@ export const retrieveWorkerRun = unique(
   async (id: UUID): Promise<WorkerRun> =>
     (await axios.get(`/process/workers/${id}/`)).data
 )
+
+// List a user's local worker runs
+export const listUserWorkerRuns = unique(
+  async(params: PageNumberPaginationParameters): Promise<PageNumberPagination<WorkerRun>> =>
+  (await axios.get('/process/local/workers/', { params })).data
+)

src/components/Navbar.vue

@@ -68,6 +68,13 @@
             >
               Workers
             </router-link>
+            <router-link
+              :to="{ name: 'worker-runs' }"
+              class="navbar-item"
+              active-class="is-active"
+            >
+              Worker runs
+            </router-link>
             <router-link
               :to="{ name: 'models-list' }"
               class="navbar-item"

src/router/index.js

@@ -43,6 +43,7 @@ const Dataset = () => import(/* webpackChunkName: "users" */ '@/views/Dataset/De
 const Workers = () => import(/* webpackChunkName: "users" */ '@/views/Process/Workers/List')
 const WorkerManage = () => import(/* webpackChunkName: "users" */ '@/views/Process/Workers/Manage')
 const WorkerVersion = () => import(/* webpackChunkName: "users" */ '@/views/Process/Workers/Version')
+const WorkerRuns = () => import(/* webpackChunkName: "users" */ '@/views/Process/WorkerRunsList')
 const PonosAgents = () => import(/* webpackChunkName: "users" */ '@/views/Process/Agents')
 const GroupCreate = () => import(/* webpackChunkName: "users" */ '@/views/Group/Create')
 const GroupManage = () => import(/* webpackChunkName: "users" */ '@/views/Group/Manage')
@@ -209,6 +210,13 @@ const routes = [
     meta: { requiresLogin: true, requiresVerified: true },
     props: true
   },
+  {
+    path: '/process/worker-runs',
+    name: 'worker-runs',
+    component: WorkerRuns,
+    meta: { requiresLogin: true, requiresVerified: true },
+    props: true
+  },
   {
     path: '/process/agents',
     name: 'ponos-agents',

src/stores/workers.ts

@@ -20,7 +20,8 @@ import {
   retrieveWorker,
   retrieveWorkerRun,
   CreateWorkerPayload,
-  createWorker
+  createWorker,
+  listUserWorkerRuns
 } from '@/api'
 import { isAxiosError } from 'axios'
 import { useNotificationStore } from './notification'
@@ -169,6 +170,15 @@ export const useWorkerStore = defineStore('worker', {
       if (!(data.configuration)) return
       if (!(data.worker_version.worker.id in this.workerConfigurations)) this.workerConfigurations[data.worker_version.worker.id] = {}
       this.workerConfigurations[data.worker_version.worker.id][data.configuration.id] = data.configuration
+    },
+
+    async listUserWorkerRuns (params: PageNumberPaginationParameters = {}) {
+      const resp = await listUserWorkerRuns(params)
+      this.workerRuns = {
+        ...this.workerRuns,
+        ...Object.fromEntries(resp.results.map(run => [run.id, run]))
+      }
+      return resp
     }
   }
 })

src/views/Process/WorkerRunsList.vue

+<template>
+  <main class="container is-fluid">
+    <div class="title is-4">User worker runs</div>
+
+    <Paginator
+      :response="workerRunsPage"
+      v-slot="{ results }"
+      :loading="loading"
+      v-model:page="page"
+      singular="worker run"
+      plural="worker runs"
+      v-on:update:page="getWorkerRuns"
+    >
+      <table class="table is-fullwidth is-hoverable">
+        <thead>
+          <tr>
+            <th>ID</th>
+            <th>Summary</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="run in results"
+            :key="run.id"
+          >
+            <td><ItemId :item-id="run.id" /></td>
+            <td>{{ run.summary }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </Paginator>
+  </main>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { mapState, mapActions } from 'pinia'
+import { useWorkerStore, useNotificationStore } from '@/stores'
+import { errorParser } from '@/helpers'
+import Paginator from '@/components/Paginator.vue'
+import { PageNumberPagination, WorkerRun } from '@/types'
+import ItemId from '@/components/ItemId.vue'
+
+export default defineComponent({
+  components: {
+    Paginator,
+    ItemId
+  },
+  data: () => ({
+    loading: false,
+    page: 1,
+    workerRunsPage: {} as PageNumberPagination<WorkerRun>
+  }),
+  mounted () {
+    this.getWorkerRuns()
+  },
+  computed: {
+    ...mapState(useWorkerStore, ['workerRuns'])
+  },
+  methods: {
+    ...mapActions(useWorkerStore, ['listUserWorkerRuns']),
+    ...mapActions(useNotificationStore, ['notify']),
+    async getWorkerRuns () {
+      this.loading = true
+      try {
+        this.workerRunsPage = await this.listUserWorkerRuns({ page: this.page })
+      } catch (err) {
+        this.notify({ type: 'error', text: `An error occurred listing worker runs: ${errorParser(err)}` })
+      } finally {
+        this.loading = false
+      }
+    }
+  }
+})
+</script>

tests/unit/stores/workers.spec.js

@@ -429,6 +429,7 @@ describe('workers', () => {
             url: '/process/workers/workerRun2/'
           }
         ])
+
         assert.deepStrictEqual(store.workerRuns, {
           workerRun2: workerRunsSample[1]
         })
@@ -480,5 +481,29 @@ describe('workers', () => {
         assert.deepStrictEqual(store.workers, {})
       })
     })
+
+    describe('listUserWorkerRuns', () => {
+      it("retrieves a User's local worker runs", async () => {
+        const response = {
+          results: workerRunsSample,
+          count: 3
+        }
+        mock.onGet('/process/local/workers/', { page: 1 }).reply(200, response)
+
+        await store.listUserWorkerRuns()
+
+        assert.deepStrictEqual(mock.history.all.map(req => pick(req, ['method', 'url'])), [
+          {
+            method: 'get',
+            url: '/process/local/workers/'
+          }
+        ])
+        assert.deepStrictEqual(store.workerRuns, {
+          workerRun1: workerRunsSample[0],
+          workerRun2: workerRunsSample[1],
+          workerRun3: workerRunsSample[2]
+        })
+      })
+    })
   })
 })