Entypescripten the WorkerActivity API helpers

src/api/workerActivity.js

-import axios from 'axios'
-import { unique } from '.'
-
-// List workers activity statistics for a corpus
-export const listCorpusWorkersActivity = unique(async corpusId => (await axios.get(`corpus/${corpusId}/activity-stats/`)).data)
-
-// List workers activity statistics for a process
-export const listProcessWorkersActivity = unique(async processId => (await axios.get(`process/${processId}/activity-stats/`)).data)

src/api/workerActivity.ts

+import axios from 'axios'
+import { UUID } from '@/types'
+import { WorkerActivityStats } from '@/types/process'
+import { unique } from '.'
+
+// List workers activity statistics for a corpus
+export const listCorpusWorkersActivity = unique(async (corpusId: UUID): Promise<WorkerActivityStats[]> => (await axios.get(`corpus/${corpusId}/activity-stats/`)).data)
+
+// List workers activity statistics for a process
+export const listProcessWorkersActivity = unique(async (processId: UUID): Promise<WorkerActivityStats[]> => (await axios.get(`process/${processId}/activity-stats/`)).data)

src/components/Corpus/WorkerStats.vue

@@ -5,6 +5,10 @@
         <i class="toggle icon icon-down-open" :class="{ expanded }"></i>
         <div v-if="loading" class="loading-content loader is-inline-flex"></div>
         <span v-else>{{ workerName }}</span>
+        <!--
+          @vue-expect-error This component does support a configurationId set to null,
+          but since it isn't typed, TS assumes the configuratIonId must be a string
+        -->
         <VersionDetails
           has-dropdown-title
           with-configuration
@@ -121,12 +125,15 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent, PropType } from 'vue'
 import { mapState, mapActions, mapMutations } from 'vuex'
 import { errorParser } from '@/helpers'
 import { ACTIVITY_COLORS } from '@/config'
 import VersionDetails from '@/components/Process/Workers/Versions/Details.vue'
-export default {
+import { WorkerActivityState } from '@/enums'
+
+export default defineComponent({
   components: {
     VersionDetails
   },
@@ -136,8 +143,8 @@ export default {
       required: true
     },
     configurationId: {
-      type: String,
-      default: ''
+      type: String as PropType<string | null>,
+      default: null
     },
     stats: {
       type: Object,
@@ -163,7 +170,7 @@ export default {
   computed: {
     ...mapState('process', ['workerVersions']),
     /**
-     * Ordered statistics by state for a better display. Filters out null values
+     * Ordered statistics by state for a better display. Filters out zeros
      */
     stateStats () {
       return ['processed', 'started', 'queued', 'error']
@@ -180,17 +187,17 @@ export default {
       return this.version ? this.version.worker.name : '—'
     },
     hasProcessedTime () {
-      return this.stats.average_processed_time || this.stats.min_processed_time || this.stats.max_processed_time || this.stats.median_processed_time
+      return this.stats.average_processed_time || this.stats.min_processed_time || this.stats.max_processed_time || this.stats.median_processed_time || this.stats.completion_estimate_time
     }
   },
   methods: {
     ...mapActions('process', ['getWorkerVersion']),
     ...mapMutations('notifications', ['notify']),
-    statColor (value) {
+    statColor (value: WorkerActivityState) {
       return ACTIVITY_COLORS[value]
     }
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/types/process.ts

+import { WorkerActivityState } from '@/enums'
+import { UUID } from '.'
+
+export type WorkerActivityStats = {
+  worker_version_id: UUID
+  model_version_id: UUID | null
+  configuration_id: UUID | null
+  average_processed_time: number
+  min_processed_time: number
+  max_processed_time: number
+  median_processed_time: number
+  completion_estimate_time: number
+} & {
+  [State in WorkerActivityState]: number
+}

src/views/Corpus/WorkersActivity.vue

@@ -34,13 +34,19 @@
   </main>
 </template>
 
-<script>
-import { mapMutations } from 'vuex'
+<script lang="ts">
+import { defineComponent, PropType } from 'vue'
+
 import { listCorpusWorkersActivity } from '@/api'
 import { errorParser } from '@/helpers'
-import { corporaMixin } from '@/mixins.js'
+import { corporaMixin } from '@/mixins'
+import { useNotificationStore } from '@/stores'
+import { UUID } from '@/types'
+import { WorkerActivityStats } from '@/types/process'
+
 import WorkerStats from '@/components/Corpus/WorkerStats.vue'
-export default {
+
+export default defineComponent({
   components: {
     WorkerStats
   },
@@ -49,31 +55,30 @@ export default {
   ],
   props: {
     corpusId: {
-      type: String,
+      type: String as PropType<UUID>,
       required: true
     }
   },
   data: () => ({
     loading: false,
-    activities: null
+    activities: null as WorkerActivityStats[] | null
   }),
   created () {
     this.fetchActivities()
   },
   methods: {
-    ...mapMutations('notifications', ['notify']),
     async fetchActivities () {
       this.loading = true
       try {
         this.activities = await listCorpusWorkersActivity(this.corpusId)
       } catch (e) {
-        this.notify({ type: 'error', text: `An error occurred retrieving activities: ${errorParser(e)}` })
+        useNotificationStore().notify({ type: 'error', text: `An error occurred retrieving activities: ${errorParser(e)}` })
       } finally {
         this.loading = false
       }
     }
   }
-}
+})
 </script>
 
 <style scoped>