Add job page with items list (#234)

This is messier than we want because we cannot have a simple `/harvest-jobs/[id]` page. The API doesn't provide a way to get back to the source from the job ID :-( So we need to be inside the source folder and inheritate the layout which is not exactly what we want… --------- Co-authored-by: Nicolas KEMPF <[email protected]>
datagouv · Jan 2, 2025 · 700fa2e · 700fa2e
1 parent 324aced
commit 700fa2e
Show file tree

Hide file tree

Showing 10 changed files with 331 additions and 14 deletions.
diff --git a/components/Harvesters/AdminHarvestersPage.vue b/components/Harvesters/AdminHarvestersPage.vue
@@ -89,7 +89,14 @@
               </td>
               <td>
                 <AdminBadge
-                  v-if="harvester.validation.state === 'refused'"
+                  v-if="!harvester.active"
+                  size="xs"
+                  type="danger"
+                >
+                  {{ $t('Inactive') }}
+                </AdminBadge>
+                <AdminBadge
+                  v-else-if="harvester.validation.state === 'refused'"
                   size="xs"
                   type="danger"
                 >

diff --git a/components/LinkToSubject.vue b/components/LinkToSubject.vue
@@ -1,7 +1,7 @@
 <template>
   <a
     class="inline-flex items-baseline !bg-none underline space-x-1 link"
-    :href="subject.page"
+    :href="subject.page || subject.self_web_url"
   >
     <component
       :is="icon"

diff --git a/lang/en-US.json b/lang/en-US.json
@@ -770,6 +770,9 @@
   "Job ID": "Job ID",
   "Started at": "Started at",
   "Ended at": "Ended at",
+  "Started at:": "Started at:",
+  "Ended at:": "Ended at:",
+  "Items:": "Items:",
   "Run": "Run",
   "Schedule:": "Schedule:",
   "URL:": "URL:",
@@ -790,5 +793,6 @@
   "An archived dataset is no longer indexed but still accessible for users with the direct link.": "An archived dataset is no longer indexed but still accessible for users with the direct link.",
   "Dataset unarchived!": "Dataset unarchived!",
   "Dataset archived!": "Dataset archived!",
+  "{n} items": "{n} items | {n} item | {n} items",
   "": ""
 }
diff --git a/lang/es-ES.json b/lang/es-ES.json
@@ -763,6 +763,9 @@
   "Job ID": "Job ID",
   "Started at": "Started at",
   "Ended at": "Ended at",
+  "Started at:": "Started at:",
+  "Ended at:": "Ended at:",
+  "Items:": "Items:",
   "Run": "Run",
   "Schedule:": "Schedule:",
   "URL:": "URL:",
@@ -783,5 +786,6 @@
   "An archived dataset is no longer indexed but still accessible for users with the direct link.": "An archived dataset is no longer indexed but still accessible for users with the direct link.",
   "Dataset unarchived!": "Dataset unarchived!",
   "Dataset archived!": "Dataset archived!",
+  "{n} items": "{n} items | {n} item | {n} items",
   "": ""
 }
diff --git a/lang/fr-FR.json b/lang/fr-FR.json
@@ -791,6 +791,9 @@
   "Job ID": "Job ID",
   "Started at": "Débuté le",
   "Ended at": "Terminé le",
+  "Started at:": "Débuté le :",
+  "Ended at:": "Terminé le :",
+  "Items:": "Éléments :",
   "Run": "Exécuter",
   "Schedule:": "Planning :",
   "URL:": "URL :",
@@ -811,5 +814,6 @@
   "An archived dataset is no longer indexed but still accessible for users with the direct link.": "Un jeu de données archivé n'est plus indexé mais reste accessible aux utilisateurs avec un lien direct.",
   "Dataset unarchived!": "Jeu de données désarchivé!",
   "Dataset archived!": "Jeu de données archivé!",
+  "{n} items": "{n} éléments | {n} élément | {n} éléments",
   "": ""
 }
diff --git a/pages/beta/admin/harvesters/[id].vue b/pages/beta/admin/harvesters/[id].vue
@@ -26,7 +26,25 @@
             {{ t('Harvesters') }}
           </NuxtLinkLocale>
         </li>
-        <li>
+        <template v-if="job">
+          <li>
+            <NuxtLinkLocale
+              class="fr-breadcrumb__link"
+              :to="getHarvesterAdminUrl(harvester)"
+            >
+              {{ harvester.name }}
+            </NuxtLinkLocale>
+          </li>
+          <li>
+            <a
+              class="fr-breadcrumb__link"
+              aria-current="page"
+            >
+              {{ job.id }}
+            </a>
+          </li>
+        </template>
+        <li v-else>
           <a
             class="fr-breadcrumb__link"
             aria-current="page"
@@ -37,7 +55,7 @@
       </template>
     </Breadcrumb>
 
-    <div v-if="harvester">
+    <div v-if="harvester && !job">
       <div class="mb-5">
         <div class="flex items-center justify-between mb-3">
           <h1 class="fr-h3 !mb-0">
@@ -58,17 +76,17 @@
           <div class="space-x-1">
             <RiToolsLine class="inline size-3" />
             <span>{{ $t('Implementation:') }}</span>
-            <span class="text-mono">{{ harvester.backend }}</span>
+            <span class="font-mono">{{ harvester.backend }}</span>
           </div>
           <div class="space-x-1">
             <RiLink class="inline size-3" />
             <span>{{ $t('URL:') }}</span>
-            <span class="text-mono">{{ harvester.url }}</span>
+            <span class="font-mono">{{ harvester.url }}</span>
           </div>
           <div class="space-x-1">
             <RiCalendarEventLine class="inline size-3" />
             <span>{{ $t('Schedule:') }}</span>
-            <span class="text-mono">{{ harvester.schedule || 'N/A' }}</span>
+            <span class="font-mono">{{ harvester.schedule || 'N/A' }}</span>
           </div>
           <div
             v-if="harvester.validation.state !== 'accepted'"
@@ -101,16 +119,16 @@
           // { href: `${getharvesterAdminUrl(harvester)}/files`, label: t('Files') },
         ]"
       />
-
-      <NuxtPage :page-key="route => route.fullPath" />
     </div>
+
+    <NuxtPage :page-key="route => route.fullPath" />
   </div>
 </template>
 
 <script setup lang="ts">
 import { RiCalendarEventLine, RiCheckboxCircleLine, RiLink, RiPlayLargeLine, RiToolsLine } from '@remixicon/vue'
 import TabLinks from '~/components/TabLinks.vue'
-import type { HarvesterSource } from '~/types/harvesters'
+import type { HarvesterJob, HarvesterSource } from '~/types/harvesters'
 
 const { t } = useI18n()
 const { $api } = useNuxtApp()
@@ -119,6 +137,13 @@ const { toast } = useToast()
 const route = useRoute()
 const url = computed(() => `/api/1/harvest/source/${route.params.id}`)
 const { data: harvester } = await useAPI<HarvesterSource>(url, { lazy: true })
+const job = ref<HarvesterJob | null>(null)
+watchEffect(async () => {
+  if (!harvester.value) return
+  if (!route.params.jobid) return
+
+  job.value = await $api(`/api/1/harvest/job/${route.params.jobid}/`)
+})
 
 const loading = ref(false)
 const run = async () => {

diff --git a/pages/beta/admin/harvesters/[id]/index.vue b/pages/beta/admin/harvesters/[id]/index.vue
@@ -108,7 +108,7 @@
                 <AdminContentWithTooltip>
                   <NuxtLinkLocale
                     class="fr-link fr-reset-link"
-                    :href="getHarvesterAdminUrl(harvester)"
+                    :href="getHarvesterJobAdminUrl(harvester, job)"
                   >
                     {{ job.id }}
                   </NuxtLinkLocale>
@@ -148,6 +148,19 @@
         />
       </div>
     </LoadingBlock>
+
+    <div
+      v-if="status != 'pending' && pageData && !pageData.total"
+      class="flex flex-col items-center"
+    >
+      <nuxt-img
+        src="/illustrations/harvester.svg"
+        class="h-20"
+      />
+      <p class="fr-text--bold fr-my-3v">
+        {{ $t(`No job yet.`) }}
+      </p>
+    </div>
   </div>
 </template>