From 9e4521c9319cefa26b6052ce30377e1182974621 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20Palancher?= <remi@rackslab.io>
Date: Fri, 27 Sep 2024 16:08:11 +0200
Subject: [PATCH] refactor(front): add ids to JobSteps list items

Add specific ids to the list items in graphical representation of jobs
progression. This should notably facilitate testing. Job steps are
converted to lower case in logic, it is now capitalized in template.
---
 frontend/src/components/jobs/JobSteps.vue | 25 ++++++++++++++---------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/jobs/JobSteps.vue b/frontend/src/components/jobs/JobSteps.vue
index 30748515..c1690852 100644
--- a/frontend/src/components/jobs/JobSteps.vue
+++ b/frontend/src/components/jobs/JobSteps.vue
@@ -41,26 +41,26 @@ const current = computed((): [number, boolean] => {
 })
 
 function stepComment(step: string) {
-  if (step === 'Submitted') {
+  if (step === 'submitted') {
     return new Date(props.job.time.submission * 1000).toLocaleString()
   }
-  if (step === 'Eligible') {
+  if (step === 'eligible') {
     return new Date(props.job.time.eligible * 1000).toLocaleString()
   }
-  if (step === 'Scheduling') {
+  if (step === 'scheduling') {
     if (props.job.time.start) {
       return new Date(props.job.time.start * 1000).toLocaleString()
     }
   }
-  if (step === 'Running') {
+  if (step === 'running') {
     if (props.job.time.elapsed) {
       return `${props.job.time.elapsed} seconds elapsed`
     }
   }
-  if (step === 'Completing') {
+  if (step === 'completing') {
     return ''
   }
-  if (step === 'Terminated') {
+  if (step === 'terminated') {
     if (props.job.time.end) {
       return new Date(props.job.time.end * 1000).toLocaleString()
     }
@@ -68,7 +68,11 @@ function stepComment(step: string) {
   return ''
 }
 
-const steps = ['Submitted', 'Eligible', 'Scheduling', 'Running', 'Completing', 'Terminated']
+function capitalize(step: string) {
+  return step.charAt(0).toUpperCase() + step.slice(1)
+}
+
+const steps = ['submitted', 'eligible', 'scheduling', 'running', 'completing', 'terminated']
 </script>
 
 <template>
@@ -77,6 +81,7 @@ const steps = ['Submitted', 'Eligible', 'Scheduling', 'Running', 'Completing', '
       v-for="(step, stepIdx) in steps"
       :key="step"
       :class="[stepIdx !== steps.length - 1 ? 'pb-10' : '', 'relative']"
+      :id="'step-' + step"
     >
       <template v-if="current[0] >= stepIdx">
         <div
@@ -93,7 +98,7 @@ const steps = ['Submitted', 'Eligible', 'Scheduling', 'Running', 'Completing', '
             </span>
           </span>
           <span class="ml-4 flex min-w-0 flex-col">
-            <span class="text-sm font-medium">{{ step }}</span>
+            <span class="text-sm font-medium">{{ capitalize(step) }}</span>
             <span class="text-sm text-gray-500">{{ stepComment(step) }}</span>
           </span>
         </div>
@@ -113,7 +118,7 @@ const steps = ['Submitted', 'Eligible', 'Scheduling', 'Running', 'Completing', '
             </span>
           </span>
           <span class="ml-4 flex min-w-0 flex-col">
-            <span class="text-sm font-medium text-slurmweb-dark">{{ step }}</span>
+            <span class="text-sm font-medium text-slurmweb-dark">{{ capitalize(step) }}</span>
             <span class="text-sm text-gray-500">{{ stepComment(step) }}</span>
           </span>
         </div>
@@ -133,7 +138,7 @@ const steps = ['Submitted', 'Eligible', 'Scheduling', 'Running', 'Completing', '
             </span>
           </span>
           <span class="ml-4 flex min-w-0 flex-col">
-            <span class="text-sm font-medium text-gray-500">{{ step }}</span>
+            <span class="text-sm font-medium text-gray-500">{{ capitalize(step) }}</span>
             <span class="text-sm text-gray-500">{{ stepComment(step) }}</span>
           </span>
         </div>