add a navbar to JobStep which filters jobs by their states

Author: ahmedhamidawan

client/src/api/jobs.ts

@@ -3,6 +3,7 @@ import type { components } from "@/api/schema";
 export type JobDestinationParams = components["schemas"]["JobDestinationParams"];
 export type ShowFullJobResponse = components["schemas"]["ShowFullJobResponse"];
 export type JobBaseModel = components["schemas"]["JobBaseModel"];
+export type JobState = components["schemas"]["JobState"];
 export type JobDetails = components["schemas"]["ShowFullJobResponse"] | components["schemas"]["EncodedJobDetails"];
 export type JobInputSummary = components["schemas"]["JobInputSummary"];
 export type JobDisplayParametersSummary = components["schemas"]["JobDisplayParametersSummary"];

client/src/components/Workflow/Editor/NodeInvocationText.vue

@@ -4,8 +4,11 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BFormInput } from "bootstrap-vue";
 import { sanitize } from "dompurify";
 
+import type { JobState } from "@/api/jobs";
 import { isWorkflowInput } from "@/components/Workflow/constants";
-import { type GraphStep, iconClasses, statePlaceholders } from "@/composables/useInvocationGraph";
+import type { GraphStep } from "@/composables/useInvocationGraph";
+
+import InvocationStepStateDisplay from "@/components/WorkflowInvocationState/InvocationStepStateDisplay.vue";
 
 const props = defineProps<{
     invocationStep: GraphStep;
@@ -18,21 +21,17 @@ function isColor(value?: string): boolean {
 function textHtml(value: string): string {
     return sanitize(value, { ALLOWED_TAGS: ["b"] });
 }
+
+// Helper function to convert the key to JobState type
+function toJobState(key: string | number): JobState {
+    return key as JobState;
+}
 </script>
 <template>
     <div class="p-1 unselectable">
         <div v-if="props.invocationStep.jobs">
             <div v-for="(value, key) in props.invocationStep.jobs" :key="key">
-                <span v-if="value !== undefined" class="d-flex align-items-center">
-                    <FontAwesomeIcon
-                        v-if="iconClasses[key]"
-                        :icon="iconClasses[key]?.icon"
-                        :class="iconClasses[key]?.class"
-                        :spin="iconClasses[key]?.spin"
-                        size="sm"
-                        class="mr-1" />
-                    {{ value }} job{{ value > 1 ? "s" : "" }} {{ statePlaceholders[key] || key }}.
-                </span>
+                <InvocationStepStateDisplay v-if="value !== undefined" :state="toJobState(key)" :job-count="value" />
             </div>
         </div>
         <div v-else-if="isWorkflowInput(props.invocationStep.type)" class="truncate w-100">

client/src/components/WorkflowInvocationState/InvocationStepStateDisplay.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+
+import type { JobState } from "@/api/jobs";
+import { iconClasses, statePlaceholders } from "@/composables/useInvocationGraph";
+
+const props = defineProps<{
+    state: JobState;
+    jobCount: number;
+}>();
+</script>
+
+<template>
+    <span class="d-flex align-items-center">
+        <FontAwesomeIcon
+            v-if="iconClasses[props.state]"
+            :icon="iconClasses[props.state]?.icon"
+            :class="iconClasses[props.state]?.class"
+            :spin="iconClasses[props.state]?.spin"
+            size="sm"
+            class="mr-1" />
+        {{ props.jobCount }} job{{ props.jobCount > 1 ? "s" : "" }} {{ statePlaceholders[props.state] || props.state }}
+    </span>
+</template>

client/src/components/WorkflowInvocationState/JobStep.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert, BTab, BTabs } from "bootstrap-vue";
-import { computed } from "vue";
+import { BAlert, BNav, BNavItem, BTab, BTabs } from "bootstrap-vue";
+import { computed, ref } from "vue";
 
-import type { JobBaseModel } from "@/api/jobs";
-import { getHeaderClass, iconClasses } from "@/composables/useInvocationGraph";
+import type { JobBaseModel, JobState } from "@/api/jobs";
+import { getHeaderClass, iconClasses, statePlaceholders } from "@/composables/useInvocationGraph";
 
 import JobDetailsDisplayed from "../JobInformation/JobDetails.vue";
+import InvocationStepStateDisplay from "./InvocationStepStateDisplay.vue";
 
 interface Props {
     jobs: JobBaseModel[];
@@ -19,6 +20,21 @@ const props = withDefaults(defineProps<Props>(), {
 const firstJob = computed(() => props.jobs[0]);
 const jobCount = computed(() => props.jobs.length);
 
+/** Jobs grouped by their state */
+const jobsByState = computed(() => {
+    const jobsMap: { [key: string]: JobBaseModel[] } = {};
+    props.jobs.forEach((job) => {
+        if (!jobsMap[job.state]) {
+            jobsMap[job.state] = [];
+        }
+        jobsMap[job.state]?.push(job);
+    });
+    return jobsMap as Record<JobState, JobBaseModel[]>;
+});
+
+/** Currently selected/filtered job state */
+const currentState = ref<JobState | null>(firstJob.value?.state || null);
+
 function getIcon(job: JobBaseModel) {
     return iconClasses[job.state];
 }
@@ -37,24 +53,39 @@ function getTabClass(job: JobBaseModel) {
     <div v-else-if="jobCount === 1 && firstJob">
         <JobDetailsDisplayed :job-id="firstJob.id" />
     </div>
-    <BTabs v-else lazy vertical pills card nav-class="p-0" active-tab-class="p-0">
-        <BTab
-            v-for="job in jobs"
-            :key="job.id"
-            data-description="workflow invocation job"
-            :title-item-class="getTabClass(job)"
-            title-link-class="w-100">
-            <template v-slot:title>
-                {{ job.state }}
-                <FontAwesomeIcon
-                    v-if="getIcon(job)"
-                    :class="getIcon(job)?.class"
-                    :icon="getIcon(job)?.icon"
-                    :spin="getIcon(job)?.spin" />
-            </template>
-            <div>
-                <JobDetailsDisplayed :job-id="job.id" />
-            </div>
-        </BTab>
-    </BTabs>
+    <div v-else>
+        <BNav justified pills class="mb-2 p-2">
+            <BNavItem
+                v-for="(stateJobs, state) in jobsByState"
+                :key="state"
+                :title="`Click to view ${statePlaceholders[state] || state} jobs`"
+                :active="currentState === state"
+                link-classes="d-flex justify-content-center"
+                @click="currentState = state">
+                <InvocationStepStateDisplay :state="state" :job-count="stateJobs.length" />
+            </BNavItem>
+        </BNav>
+
+        <BAlert v-if="!currentState" variant="info" show> Please select a job state to view jobs. </BAlert>
+        <BTabs v-else lazy vertical pills card nav-class="p-0" active-tab-class="p-0">
+            <BTab
+                v-for="job in jobsByState[currentState]"
+                :key="job.id"
+                data-description="workflow invocation job"
+                :title-item-class="getTabClass(job)"
+                title-link-class="w-100">
+                <template v-slot:title>
+                    {{ job.state }}
+                    <FontAwesomeIcon
+                        v-if="getIcon(job)"
+                        :class="getIcon(job)?.class"
+                        :icon="getIcon(job)?.icon"
+                        :spin="getIcon(job)?.spin" />
+                </template>
+                <div class="m-3">
+                    <JobDetailsDisplayed :job-id="job.id" />
+                </div>
+            </BTab>
+        </BTabs>
+    </div>
 </template>