refactor(front): component job progress comment

Move job progress component into its own dedicated component.
rackslab · Sep 30, 2024 · efe5a28 · efe5a28
1 parent 9cb8b55
commit efe5a28
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 31 deletions.
diff --git a/frontend/src/components/jobs/JobProgress.vue b/frontend/src/components/jobs/JobProgress.vue
@@ -10,6 +10,7 @@
 import { computed } from 'vue'
 import type { PropType } from 'vue'
 import type { ClusterIndividualJob } from '@/composables/GatewayAPI'
+import JobProgressComment from '@/components/jobs/JobProgressComment.vue'
 import { CheckIcon } from '@heroicons/vue/20/solid'
 
 const props = defineProps({
@@ -40,34 +41,6 @@ const current = computed((): [number, boolean] => {
   return [0, false]
 })
 
-function stepComment(step: string) {
-  if (step === 'submitted') {
-    return new Date(props.job.time.submission * 1000).toLocaleString()
-  }
-  if (step === 'eligible') {
-    return new Date(props.job.time.eligible * 1000).toLocaleString()
-  }
-  if (step === 'scheduling') {
-    if (props.job.time.start) {
-      return new Date(props.job.time.start * 1000).toLocaleString()
-    }
-  }
-  if (step === 'running') {
-    if (props.job.time.elapsed) {
-      return `${props.job.time.elapsed} seconds elapsed`
-    }
-  }
-  if (step === 'completing') {
-    return ''
-  }
-  if (step === 'terminated') {
-    if (props.job.time.end) {
-      return new Date(props.job.time.end * 1000).toLocaleString()
-    }
-  }
-  return ''
-}
-
 function capitalize(step: string) {
   return step.charAt(0).toUpperCase() + step.slice(1)
 }
@@ -99,7 +72,7 @@ const steps = ['submitted', 'eligible', 'scheduling', 'running', 'completing', '
           </span>
           <span class="ml-4 flex min-w-0 flex-col">
             <span class="text-sm font-medium">{{ capitalize(step) }}</span>
-            <span class="text-sm text-gray-500">{{ stepComment(step) }}</span>
+            <JobProgressComment :job="props.job" :step="step" />
           </span>
         </div>
       </template>
@@ -119,7 +92,7 @@ const steps = ['submitted', 'eligible', 'scheduling', 'running', 'completing', '
           </span>
           <span class="ml-4 flex min-w-0 flex-col">
             <span class="text-sm font-medium text-slurmweb-dark">{{ capitalize(step) }}</span>
-            <span class="text-sm text-gray-500">{{ stepComment(step) }}</span>
+            <JobProgressComment :job="props.job" :step="step" />
           </span>
         </div>
       </template>
@@ -139,7 +112,7 @@ const steps = ['submitted', 'eligible', 'scheduling', 'running', 'completing', '
           </span>
           <span class="ml-4 flex min-w-0 flex-col">
             <span class="text-sm font-medium text-gray-500">{{ capitalize(step) }}</span>
-            <span class="text-sm text-gray-500">{{ stepComment(step) }}</span>
+            <JobProgressComment :job="props.job" :step="step" />
           </span>
         </div>
       </template>

diff --git a/frontend/src/components/jobs/JobProgressComment.vue b/frontend/src/components/jobs/JobProgressComment.vue
@@ -0,0 +1,43 @@
+<!--
+  Copyright (c) 2024 Rackslab
+
+  This file is part of Slurm-web.
+
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import type { ClusterIndividualJob } from '@/composables/GatewayAPI'
+
+const props = defineProps({
+  job: {
+    type: Object as PropType<ClusterIndividualJob>,
+    required: true
+  },
+  step: {
+    type: String,
+    required: true
+  }
+})
+</script>
+
+<template>
+  <span class="text-sm text-gray-500">
+    <template v-if="props.step == 'submitted'">
+      {{ new Date(props.job.time.submission * 1000).toLocaleString() }}
+    </template>
+    <template v-else-if="props.step == 'eligible'">
+      {{ new Date(props.job.time.eligible * 1000).toLocaleString() }}
+    </template>
+    <template v-else-if="props.step == 'scheduling' && props.job.time.start">
+      {{ new Date(props.job.time.start * 1000).toLocaleString() }}
+    </template>
+    <template v-else-if="props.step == 'running' && props.job.time.elapsed">
+      {{ props.job.time.elapsed }} seconds elapsed
+    </template>
+    <template v-else-if="props.step == 'terminated' && props.job.time.end">
+      {{ new Date(props.job.time.end * 1000).toLocaleString() }}
+    </template>
+  </span>
+</template>