More Refactoring of Invocation Vue Components

client/src/api/invocations.ts

@@ -13,10 +13,6 @@ export const invocationsFetcher = fetcher.path("/api/invocations").method("get")
 
 export type WorkflowInvocation = WorkflowInvocationElementView | WorkflowInvocationCollectionView;
 
-export interface WorkflowInvocationJobsSummary {
-    id: string;
-}
-
 export interface WorkflowInvocationStep {
     id: string;
 }
@@ -38,13 +34,11 @@ export async function fetchInvocationDetails(params: { id: string }): Promise<Ap
     } as ApiResponse<WorkflowInvocation>;
 }
 
-export async function fetchInvocationJobsSummary(params: {
-    id: string;
-}): Promise<ApiResponse<WorkflowInvocationJobsSummary>> {
+export async function fetchInvocationJobsSummary(params: { id: string }): Promise<ApiResponse<InvocationJobsSummary>> {
     const { data } = await axios.get(`${getAppRoot()}api/invocations/${params.id}/jobs_summary`);
     return {
         data,
-    } as ApiResponse<WorkflowInvocationJobsSummary>;
+    } as ApiResponse<InvocationJobsSummary>;
 }
 
 export async function fetchInvocationStep(params: { id: string }): Promise<ApiResponse<WorkflowInvocationStep>> {

client/src/api/schema/schema.ts

@@ -7880,10 +7880,7 @@ export interface components {
          * @enum {string}
          */
         InvocationState: "new" | "ready" | "scheduled" | "cancelled" | "cancelling" | "failed";
-        /**
-         * InvocationStep
-         * @description Information about workflow invocation step
-         */
+        /** InvocationStep */
         InvocationStep: {
             /**
              * Action
@@ -7895,8 +7892,6 @@ export interface components {
              * @example 0123456789ABCDEF
              */
             id: string;
-            /** Job Id */
-            job_id: string | null;
             /**
              * Jobs
              * @description Jobs associated with the workflow invocation step.
@@ -7934,7 +7929,7 @@ export interface components {
              * State of the invocation step
              * @description Describes where in the scheduling process the workflow invocation step is.
              */
-            state?: components["schemas"]["InvocationStepState"] | components["schemas"]["JobState"] | null;
+            state: components["schemas"]["InvocationStepState"];
             /** Subworkflow Invocation Id */
             subworkflow_invocation_id: string | null;
             /**
@@ -8795,6 +8790,82 @@ export interface components {
              */
             value: string;
         };
+        /** LegacyInvocationStep */
+        LegacyInvocationStep: {
+            /**
+             * Action
+             * @description Whether to take action on the invocation step.
+             */
+            action: boolean | null;
+            /**
+             * Invocation Step ID
+             * @example 0123456789ABCDEF
+             */
+            id: string;
+            /** Job Id */
+            job_id: string | null;
+            /**
+             * Jobs
+             * @description Jobs associated with the workflow invocation step.
+             * @default []
+             */
+            jobs?: components["schemas"]["JobBaseModel"][];
+            /**
+             * Model class
+             * @description The name of the database model class.
+             * @constant
+             */
+            model_class: "WorkflowInvocationStep";
+            /**
+             * Order index
+             * @description The index of the workflow step in the workflow.
+             */
+            order_index: number;
+            /**
+             * Output collections
+             * @description The dataset collection outputs of the workflow invocation step.
+             * @default {}
+             */
+            output_collections?: {
+                [key: string]: components["schemas"]["InvocationStepCollectionOutput"] | undefined;
+            };
+            /**
+             * Outputs
+             * @description The outputs of the workflow invocation step.
+             * @default {}
+             */
+            outputs?: {
+                [key: string]: components["schemas"]["InvocationStepOutput"] | undefined;
+            };
+            /**
+             * State of the invocation step
+             * @description Describes the job state corresponding to this invocation step.
+             */
+            state: components["schemas"]["JobState"] | null;
+            /** Subworkflow Invocation Id */
+            subworkflow_invocation_id: string | null;
+            /**
+             * Update Time
+             * @description The last time and date this item was updated.
+             */
+            update_time: string | null;
+            /**
+             * Workflow step ID
+             * @description The encoded ID of the workflow step associated with this workflow invocation step.
+             * @example 0123456789ABCDEF
+             */
+            workflow_step_id: string;
+            /**
+             * Step label
+             * @description The label of the workflow step
+             */
+            workflow_step_label?: string | null;
+            /**
+             * UUID
+             * @description Universal unique identifier of the workflow step.
+             */
+            workflow_step_uuid?: string | null;
+        };
         /** LegacyLibraryPermissionsPayload */
         LegacyLibraryPermissionsPayload: {
             /**
@@ -8822,6 +8893,110 @@ export interface components {
              */
             LIBRARY_MODIFY_in?: string[] | string | null;
         };
+        /** LegacyWorkflowInvocationElementView */
+        LegacyWorkflowInvocationElementView: {
+            /**
+             * Create Time
+             * Format: date-time
+             * @description The time and date this item was created.
+             */
+            create_time: string;
+            /**
+             * History ID
+             * @description The encoded ID of the history associated with the invocation.
+             * @example 0123456789ABCDEF
+             */
+            history_id: string;
+            /**
+             * ID
+             * @description The encoded ID of the workflow invocation.
+             * @example 0123456789ABCDEF
+             */
+            id: string;
+            /**
+             * Input step parameters
+             * @description Input step parameters of the workflow invocation.
+             */
+            input_step_parameters: {
+                [key: string]: components["schemas"]["InvocationInputParameter"] | undefined;
+            };
+            /**
+             * Inputs
+             * @description Input datasets/dataset collections of the workflow invocation.
+             */
+            inputs: {
+                [key: string]: components["schemas"]["InvocationInput"] | undefined;
+            };
+            /**
+             * Messages
+             * @description A list of messages about why the invocation did not succeed.
+             */
+            messages: (
+                | components["schemas"]["InvocationCancellationReviewFailedResponse"]
+                | components["schemas"]["InvocationCancellationHistoryDeletedResponse"]
+                | components["schemas"]["InvocationCancellationUserRequestResponse"]
+                | components["schemas"]["InvocationFailureDatasetFailedResponse"]
+                | components["schemas"]["InvocationFailureCollectionFailedResponse"]
+                | components["schemas"]["InvocationFailureJobFailedResponse"]
+                | components["schemas"]["InvocationFailureOutputNotFoundResponse"]
+                | components["schemas"]["InvocationFailureExpressionEvaluationFailedResponse"]
+                | components["schemas"]["InvocationFailureWhenNotBooleanResponse"]
+                | components["schemas"]["InvocationUnexpectedFailureResponse"]
+                | components["schemas"]["InvocationEvaluationWarningWorkflowOutputNotFoundResponse"]
+            )[];
+            /**
+             * Model class
+             * @description The name of the database model class.
+             * @constant
+             */
+            model_class: "WorkflowInvocation";
+            /**
+             * Output collections
+             * @description Output dataset collections of the workflow invocation.
+             */
+            output_collections: {
+                [key: string]: components["schemas"]["InvocationOutputCollection"] | undefined;
+            };
+            /**
+             * Output values
+             * @description Output values of the workflow invocation.
+             */
+            output_values: Record<string, never>;
+            /**
+             * Outputs
+             * @description Output datasets of the workflow invocation.
+             */
+            outputs: {
+                [key: string]: components["schemas"]["InvocationOutput"] | undefined;
+            };
+            /**
+             * Invocation state
+             * @description State of workflow invocation.
+             */
+            state: components["schemas"]["InvocationState"];
+            /**
+             * Steps
+             * @description Steps of the workflow invocation (legacy view using job state).
+             */
+            steps: components["schemas"]["LegacyInvocationStep"][];
+            /**
+             * Update Time
+             * Format: date-time
+             * @description The last time and date this item was updated.
+             */
+            update_time: string;
+            /**
+             * UUID
+             * @description Universal unique identifier of the workflow invocation.
+             */
+            uuid?: string | string | null;
+            /**
+             * Workflow ID
+             * @description The encoded Workflow ID associated with the invocation.
+             * @example 0123456789ABCDEF
+             */
+            workflow_id: string;
+        };
         /** LibraryAvailablePermissions */
         LibraryAvailablePermissions: {
             /**
@@ -12741,6 +12916,7 @@ export interface components {
         /** WorkflowInvocationResponse */
         WorkflowInvocationResponse:
             | components["schemas"]["WorkflowInvocationElementView"]
+            | components["schemas"]["LegacyWorkflowInvocationElementView"]
             | components["schemas"]["WorkflowInvocationCollectionView"];
         /** WorkflowInvocationStateSummary */
         WorkflowInvocationStateSummary: {

client/src/components/Workflow/InvocationsList.vue

@@ -65,7 +65,7 @@
                 <UtcDate :date="data.value" mode="elapsed" />
             </template>
             <template v-slot:cell(state)="data">
-                <HelpText :uri="`galaxy.invocations.states.${data.value}`" :text="data.value" />
+                <InvocationsListState :invocation-state="data.value" :invocation-id="data.item.id" />
             </template>
             <template v-slot:cell(execute)="data">
                 <WorkflowRunButton
@@ -83,8 +83,7 @@
 </template>
 
 <script>
-import HelpText from "components/Help/HelpText";
 import { invocationsProvider } from "components/providers/InvocationsProvider";
 import UtcDate from "components/UtcDate";
 import WorkflowInvocationState from "components/WorkflowInvocationState/WorkflowInvocationState";
 import { mapActions, mapState } from "pinia";
@@ -95,11 +94,12 @@
 import paginationMixin from "./paginationMixin";
 
 import WorkflowRunButton from "./WorkflowRunButton.vue";
+import InvocationsListState from "./InvocationsListState.vue";
 import SwitchToHistoryLink from "@/components/History/SwitchToHistoryLink.vue";
 
 export default {
     components: {
-        HelpText,
+        InvocationsListState,
         UtcDate,
         WorkflowInvocationState,
         WorkflowRunButton,

client/src/components/Workflow/InvocationsListState.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import HelpText from "@/components/Help/HelpText.vue";
+
+interface Props {
+    invocationId: string;
+    invocationState: string;
+}
+
+defineProps<Props>();
+</script>
+
+<template>
+    <HelpText :uri="`galaxy.invocations.states.${invocationState}`" :text="invocationState" />
+</template>

client/src/components/WorkflowInvocationState/InvocationJobsProgressBar.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+import { InvocationJobsSummary } from "@/api/invocations";
+
+import {
+    errorCount as jobStatesSummaryErrorCount,
+    jobCount as jobStatesSummaryJobCount,
+    numTerminal,
+    okCount as jobStatesSummaryOkCount,
+    runningCount as jobStatesSummaryRunningCount,
+} from "./util";
+
+import ProgressBar from "@/components/ProgressBar.vue";
+
+interface Props {
+    jobStatesSummary: InvocationJobsSummary;
+    invocationSchedulingTerminal: boolean;
+    invocationAndJobTerminal: boolean;
+}
+
+const props = defineProps<Props>();
+
+const jobCount = computed<number>(() => {
+    return jobStatesSummaryJobCount(props.jobStatesSummary);
+});
+
+const okCount = computed<number>(() => {
+    return jobStatesSummaryOkCount(props.jobStatesSummary);
+});
+
+const runningCount = computed<number>(() => {
+    return jobStatesSummaryRunningCount(props.jobStatesSummary);
+});
+
+const errorCount = computed<number>(() => {
+    return jobStatesSummaryErrorCount(props.jobStatesSummary);
+});
+
+const newCount = computed<number>(() => {
+    return jobCount.value - okCount.value - runningCount.value - errorCount.value;
+});
+
+const jobStatesStr = computed(() => {
+    let jobStr = `${numTerminal(props.jobStatesSummary) || 0} of ${jobCount.value} jobs complete`;
+    if (!props.invocationSchedulingTerminal) {
+        jobStr += " (total number of jobs will change until all steps fully scheduled)";
+    }
+    return `${jobStr}.`;
+});
+</script>
+
+<template>
+    <ProgressBar
+        :note="jobStatesStr"
+        :total="jobCount"
+        :ok-count="okCount"
+        :running-count="runningCount"
+        :new-count="newCount"
+        :error-count="errorCount"
+        :loading="!invocationAndJobTerminal"
+        class="jobs-progress" />
+</template>