retrieve key label from offliner definition for task

Author: elfkuzco

ui/src/stores/main.ts

@@ -72,6 +72,7 @@ export type TaskData = {
   downloadLink: string
   progress: number
   rank: number | undefined
+  offlinerDefinitionVersion: string
 }
 
 export type BlacklistEntry = {
@@ -133,6 +134,7 @@ export const useMainStore = defineStore('main', {
         this.taskData = (
           await axios.get<TaskData>(this.config.zimit_ui_api + '/requests/' + this.taskId)
         ).data
+        await this.loadOfflinerDefinitionVersion(this.taskData.offlinerDefinitionVersion)
         this.taskNotFound = false
       } catch (error) {
         this.handleError(this.t('requestStatus.errorRefreshing'), error)
@@ -202,6 +204,25 @@ export const useMainStore = defineStore('main', {
         this.offlinerNotFound = true
       }
     },
+    async loadOfflinerDefinitionVersion(version: string) {
+      if (version == this.currentOfflinerDefinitionVersion && this.offlinerDefinition) {
+        return
+      }
+      try {
+        const offlinerDefinition = (
+          await axios.get<OfflinerDefinition>(
+            this.config.zimfarm_api + '/offliners/zimit/' + version
+          )
+        ).data
+        this.offlinerDefinition = offlinerDefinition
+        this.offlinerNotFound = false
+        this.currentOfflinerDefinitionVersion = version
+      } catch (error) {
+        this.handleError(this.t('newRequest.errorFetchingDefinition'), error)
+        this.offlinerNotFound = true
+        this.currentOfflinerDefinitionVersion = undefined
+      }
+    },
     async getTrackerStatus() {
       try {
         const response = (

ui/src/views/RequestStatus.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { inject, onMounted, onBeforeUnmount, watch } from 'vue'
+import { inject, onBeforeUnmount, onMounted, watch } from 'vue'
 import type { Config } from '../config'
 import constants from '../constants'
+import type { OfflinerDefinition } from '../stores/main'
 
 import { useRoute } from 'vue-router'
 const route = useRoute()
@@ -13,6 +14,11 @@ const config = inject<Config>(constants.config)
 
 let refreshInterval: ReturnType<typeof setInterval> | undefined
 
+const getKeyLabel = (key: string, offlinerDefinition: OfflinerDefinition) => {
+  const flag = offlinerDefinition.flags.find((flag) => flag.key == key || flag.data_key == key)
+  return flag?.label
+}
+
 onMounted(() => {
   Promise.all([mainStore.getTrackerStatus(), mainStore.loadTaskId(route.params.taskId)])
 
@@ -85,7 +91,7 @@ watch(
             <p>{{ $t('requestStatus.requestRecorded') }}</p>
             <i18n-t v-if="mainStore.taskData.rank" keypath="requestStatus.rankMessage" tag="strong">
               <template #task_rank>
-                {{ mainStore.taskData.rank + 1}}
+                {{ mainStore.taskData.rank + 1 }}
               </template>
             </i18n-t>
             <p v-if="mainStore.taskData.hasEmail">{{ $t('requestStatus.bookmarkUrl') }}</p>
@@ -168,12 +174,13 @@ watch(
         <tbody>
           <tr
             v-for="(flag, index) in mainStore.taskData.flags.filter(
-              (flag) => config?.task_status_hidden_flags.indexOf(flag.name) == -1
+              (flag) =>
+                config?.task_status_hidden_flags.indexOf(flag.name) == -1 && flag.value !== null
             )"
             :key="flag.name"
             :class="{ 'striped-row': index % 2 === 0 }"
           >
-            <th>{{ flag.name }}</th>
+            <th>{{ getKeyLabel(flag.name, mainStore.offlinerDefinition!) }}</th>
             <td>{{ flag.value }}</td>
           </tr>
         </tbody>