From 642b3a6fd7be084457a4e17d9ec129c5e9c9be4a Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Fri, 20 Sep 2024 18:04:31 -0500
Subject: [PATCH] move progress bars to header, shorten `WorkflowRunSuccess`

- The progress bars are in `WorkflowInvocationHeader` now, giving more space to the step header being visible below the graph
- `WorkflowRunSuccess` is a one line header (refactored), and it uses `GridInvocation` to show batch invocations.
---
 client/src/components/Grid/GridInvocation.vue |  16 +-
 .../Grid/configs/invocationsBatch.ts          |  80 +++++++
 .../Workflow/Run/WorkflowRunSuccess.vue       | 141 +++++-------
 .../WorkflowInvocationHeader.vue              | 142 +++++++++++-
 .../WorkflowInvocationOverview.vue            | 202 +-----------------
 .../WorkflowInvocationState.vue               |  71 +++++-
 6 files changed, 353 insertions(+), 299 deletions(-)
 create mode 100644 client/src/components/Grid/configs/invocationsBatch.ts

diff --git a/client/src/components/Grid/GridInvocation.vue b/client/src/components/Grid/GridInvocation.vue
index d8997096096f..847127cfa0b7 100644
--- a/client/src/components/Grid/GridInvocation.vue
+++ b/client/src/components/Grid/GridInvocation.vue
@@ -2,7 +2,9 @@
 import { storeToRefs } from "pinia";
 import { computed } from "vue";
 
+import type { WorkflowInvocation } from "@/api/invocations";
 import invocationsGridConfig from "@/components/Grid/configs/invocations";
+import invocationsBatchConfig from "@/components/Grid/configs/invocationsBatch";
 import invocationsHistoryGridConfig from "@/components/Grid/configs/invocationsHistory";
 import invocationsWorkflowGridConfig from "@/components/Grid/configs/invocationsWorkflow";
 import { useUserStore } from "@/stores/userStore";
@@ -19,6 +21,7 @@ interface Props {
     headerMessage?: string;
     ownerGrid?: boolean;
     filteredFor?: { type: "History" | "StoredWorkflow"; id: string; name: string };
+    invocationsList?: WorkflowInvocation[];
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -26,12 +29,14 @@ const props = withDefaults(defineProps<Props>(), {
     headerMessage: "",
     ownerGrid: true,
     filteredFor: undefined,
+    invocationsList: undefined,
 });
 
 const { currentUser } = storeToRefs(useUserStore());
 
 const forStoredWorkflow = computed(() => props.filteredFor?.type === "StoredWorkflow");
 const forHistory = computed(() => props.filteredFor?.type === "History");
+const forBatch = computed(() => !!props.invocationsList?.length);
 
 const effectiveNoInvocationsMessage = computed(() => {
     let message = props.noInvocationsMessage;
@@ -51,6 +56,9 @@ const effectiveTitle = computed(() => {
 });
 
 const extraProps = computed(() => {
+    if (forBatch.value) {
+        return Object.fromEntries(props.invocationsList.map((invocation) => [invocation.id, invocation]));
+    }
     const params: {
         workflow_id?: string;
         history_id?: string;
@@ -72,7 +80,9 @@ const extraProps = computed(() => {
 });
 
 let gridConfig: GridConfig;
-if (forStoredWorkflow.value) {
+if (forBatch.value) {
+    gridConfig = invocationsBatchConfig;
+} else if (forStoredWorkflow.value) {
     gridConfig = invocationsWorkflowGridConfig;
 } else if (forHistory.value) {
     gridConfig = invocationsHistoryGridConfig;
@@ -97,9 +107,9 @@ function refreshTable() {
             :grid-message="props.headerMessage"
             :no-data-message="effectiveNoInvocationsMessage"
             :extra-props="extraProps"
-            :embedded="forStoredWorkflow || forHistory">
+            :embedded="forStoredWorkflow || forHistory || forBatch">
             <template v-slot:expanded="{ rowData }">
-                <span class="float-right position-absolute mr-4" style="right: 0" :data-invocation-id="rowData.id">
+                <span class="position-absolute ml-4" :data-invocation-id="rowData.id">
                     <small>
                         <b>Last updated: <UtcDate :date="rowData.update_time" mode="elapsed" />; Invocation ID:</b>
                     </small>
diff --git a/client/src/components/Grid/configs/invocationsBatch.ts b/client/src/components/Grid/configs/invocationsBatch.ts
new file mode 100644
index 000000000000..c84f0b39d27d
--- /dev/null
+++ b/client/src/components/Grid/configs/invocationsBatch.ts
@@ -0,0 +1,80 @@
+import { faEye } from "@fortawesome/free-solid-svg-icons";
+
+import { type WorkflowInvocation } from "@/api/invocations";
+import { getAppRoot } from "@/onload";
+
+import { type FieldArray, type GridConfig } from "./types";
+
+/**
+ * Request and return invocations for the given workflow (and current user) from server
+ */
+async function getData(
+    offset: number,
+    limit: number,
+    search: string,
+    sort_by: string,
+    sort_desc: boolean,
+    extraProps?: Record<string, unknown>
+) {
+    // extra props will be Record<string, Invocation>; get array of invocations
+    const data = Object.values(extraProps ?? {}) as WorkflowInvocation[];
+    const totalMatches = data.length;
+    return [data, totalMatches];
+}
+
+/**
+ * Declare columns to be displayed
+ */
+const fields: FieldArray = [
+    {
+        key: "expand",
+        title: null,
+        type: "expand",
+    },
+    {
+        key: "view",
+        title: "View",
+        type: "button",
+        icon: faEye,
+        handler: (data) => {
+            const url = `${getAppRoot()}workflows/invocations/${(data as WorkflowInvocation).id}`;
+            window.open(url, "_blank");
+        },
+        converter: () => "",
+    },
+    {
+        key: "history_id",
+        title: "History",
+        type: "history",
+    },
+    {
+        key: "create_time",
+        title: "Invoked",
+        type: "date",
+    },
+    {
+        key: "state",
+        title: "State",
+        type: "helptext",
+        converter: (data) => {
+            const invocation = data as WorkflowInvocation;
+            return `galaxy.invocations.states.${invocation.state}`;
+        },
+    },
+];
+
+/**
+ * Grid configuration
+ */
+const gridConfig: GridConfig = {
+    id: "invocations-batch-grid",
+    fields: fields,
+    getData: getData,
+    plural: "Workflow Invocations",
+    sortBy: "create_time",
+    sortDesc: true,
+    sortKeys: [],
+    title: "Workflow Invocations in Batch",
+};
+
+export default gridConfig;
diff --git a/client/src/components/Workflow/Run/WorkflowRunSuccess.vue b/client/src/components/Workflow/Run/WorkflowRunSuccess.vue
index 4beabd2a4f04..13d9d6cb8b55 100644
--- a/client/src/components/Workflow/Run/WorkflowRunSuccess.vue
+++ b/client/src/components/Workflow/Run/WorkflowRunSuccess.vue
@@ -1,102 +1,59 @@
+<script setup lang="ts">
+import { onMounted } from "vue";
+
+import type { WorkflowInvocation } from "@/api/invocations";
+import { useHistoryStore } from "@/stores/historyStore";
+import { refreshContentsWrapper } from "@/utils/data";
+import Webhooks from "@/utils/webhooks";
+
+import GridInvocation from "@/components/Grid/GridInvocation.vue";
+import WorkflowInvocationState from "@/components/WorkflowInvocationState/WorkflowInvocationState.vue";
+
+const props = defineProps<{
+    workflowName: string;
+    invocations: WorkflowInvocation[];
+}>();
+
+onMounted(() => {
+    new Webhooks.WebhookView({
+        type: "workflow",
+        toolId: null,
+        toolVersion: null,
+    });
+    refreshContentsWrapper();
+});
+
+const historyStore = useHistoryStore();
+
+const targetHistories = props.invocations.reduce((histories, invocation) => {
+    if (invocation.history_id && !histories.includes(invocation.history_id)) {
+        histories.push(invocation.history_id);
+    }
+    return histories;
+}, [] as string[]);
+const wasNewHistoryTarget =
+    props.invocations.length > 0 &&
+    props.invocations[0]?.history_id &&
+    historyStore.currentHistoryId !== props.invocations[0].history_id;
+</script>
+
 <template>
     <div>
         <div class="donemessagelarge">
-            <p>
-                Successfully invoked workflow <b>{{ workflowName }}</b>
-                <em v-if="multipleInvocations"> - {{ timesExecuted }} times</em>.
-            </p>
-
-            <p v-if="multipleHistoryTargets">
+            Successfully invoked workflow <b>{{ props.workflowName }}</b>
+            <em v-if="props.invocations.length > 1"> - {{ props.invocations.length }} times</em>.
+            <span v-if="targetHistories.length > 1">
                 This workflow will generate results in multiple histories. You can observe progress in the
                 <router-link to="/histories/view_multiple">history multi-view</router-link>.
-            </p>
-            <p v-else-if="wasNewHistoryTarget">
-                This workflow will generate results in a new history.
-                <a class="workflow-new-history-target-link" href="javascript:void(0)" @click="switchHistory"
-                    >Switch to that history now</a
-                >.
-            </p>
-            <p v-else>You can check the status of queued jobs and view the resulting data the History panel.</p>
-            <p>
-                View all of your workflow invocations in the
-                <router-link to="/workflows/invocations">Invocations List</router-link>.
-            </p>
+            </span>
         </div>
+        <GridInvocation v-if="props.invocations.length > 1" :invocations-list="props.invocations" />
         <WorkflowInvocationState
-            v-for="(invocation, index) in invocations"
-            :key="invocation.id"
-            :index="index"
-            :invocation-id="invocation.id"
-            full-page />
+            v-else-if="props.invocations.length === 1 && props.invocations[0]"
+            :invocation-id="props.invocations[0].id"
+            :new-history-target="wasNewHistoryTarget ? props.invocations[0].history_id : undefined"
+            is-full-page
+            success />
         <div id="webhook-view"></div>
     </div>
 </template>
-
-<script>
-import WorkflowInvocationState from "components/WorkflowInvocationState/WorkflowInvocationState";
-import { getAppRoot } from "onload/loadConfig";
-import { mapActions, mapState } from "pinia";
-import { refreshContentsWrapper } from "utils/data";
-import Webhooks from "utils/webhooks";
-
-import { useHistoryStore } from "@/stores/historyStore";
-
-export default {
-    components: {
-        WorkflowInvocationState,
-    },
-    props: {
-        workflowName: {
-            type: String,
-            required: true,
-        },
-        invocations: {
-            type: Array,
-            required: true,
-        },
-    },
-    computed: {
-        ...mapState(useHistoryStore, ["currentHistoryId"]),
-        timesExecuted() {
-            return this.invocations.length;
-        },
-        multipleInvocations() {
-            return this.timesExecuted > 1;
-        },
-        multipleHistoryTargets() {
-            return this.targetHistories.length > 1;
-        },
-        targetHistories() {
-            return this.invocations.reduce((histories, invocation) => {
-                if (invocation.history_id && !histories.includes(invocation.history_id)) {
-                    histories.push(invocation.history_id);
-                }
-                return histories;
-            }, []);
-        },
-        multiHistoryView() {
-            return `${getAppRoot()}histories/view_multiple`;
-        },
-        wasNewHistoryTarget() {
-            if (this.invocations.length < 1) {
-                return false;
-            }
-            return this.invocations[0].history_id && this.currentHistoryId != this.invocations[0].history_id;
-        },
-    },
-    mounted() {
-        new Webhooks.WebhookView({
-            type: "workflow",
-            toolId: null,
-            toolVersion: null,
-        });
-        refreshContentsWrapper();
-    },
-    methods: {
-        ...mapActions(useHistoryStore, ["setCurrentHistory"]),
-        async switchHistory() {
-            await this.setCurrentHistory(this.invocations[0].history_id);
-        },
-    },
-};
-</script>
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationHeader.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationHeader.vue
index f01618d86582..5645cb66099f 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationHeader.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationHeader.vue
@@ -1,22 +1,39 @@
 <script setup lang="ts">
 import { faClock } from "@fortawesome/free-regular-svg-icons";
-import { faArrowLeft, faEdit, faHdd, faSitemap } from "@fortawesome/free-solid-svg-icons";
+import { faArrowLeft, faEdit, faExclamation, faHdd, faSitemap } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BButton, BButtonGroup } from "bootstrap-vue";
+import { BBadge, BButton, BButtonGroup } from "bootstrap-vue";
+import { computed } from "vue";
 
-import type { WorkflowInvocationElementView } from "@/api/invocations";
+import type { InvocationJobsSummary, InvocationStep, WorkflowInvocationElementView } from "@/api/invocations";
 import { useWorkflowInstance } from "@/composables/useWorkflowInstance";
 import localize from "@/utils/localization";
 
+import {
+    errorCount as jobStatesSummaryErrorCount,
+    jobCount as jobStatesSummaryJobCount,
+    numTerminal,
+    okCount as jobStatesSummaryOkCount,
+    runningCount as jobStatesSummaryRunningCount,
+} from "./util";
+
 import Heading from "../Common/Heading.vue";
 import SwitchToHistoryLink from "../History/SwitchToHistoryLink.vue";
+import ProgressBar from "../ProgressBar.vue";
 import UtcDate from "../UtcDate.vue";
 import WorkflowInvocationsCount from "../Workflow/WorkflowInvocationsCount.vue";
 import WorkflowRunButton from "../Workflow/WorkflowRunButton.vue";
 
 interface Props {
+    isFullPage?: boolean;
     invocation: WorkflowInvocationElementView;
+    invocationState: string;
     fromPanel?: boolean;
+    jobStatesSummary: InvocationJobsSummary;
+    invocationSchedulingTerminal: boolean;
+    invocationAndJobTerminal: boolean;
+    success?: boolean;
+    newHistoryTarget?: string;
 }
 
 const props = defineProps<Props>();
@@ -26,11 +43,67 @@ const { workflow } = useWorkflowInstance(props.invocation.workflow_id);
 function getWorkflowName(): string {
     return workflow.value?.name || "...";
 }
+
+type StepStateType = { [state: string]: number };
+
+const stepStates = computed<StepStateType>(() => {
+    const stepStates: StepStateType = {};
+    const steps: InvocationStep[] = props.invocation.steps || [];
+    for (const step of steps) {
+        if (!step) {
+            continue;
+        }
+        // the API defined state here allowing null and undefined is odd...
+        const stepState: string = step.state || "unknown";
+        if (!stepStates[stepState]) {
+            stepStates[stepState] = 1;
+        } else {
+            stepStates[stepState] += 1;
+        }
+    }
+    return stepStates;
+});
+
+const stepCount = computed<number>(() => {
+    return props.invocation.steps.length || 0;
+});
+
+const stepStatesStr = computed<string>(() => {
+    return `${stepStates.value?.scheduled || 0} of ${stepCount.value} steps successfully scheduled.`;
+});
+
+const okCount = computed<number>(() => {
+    return jobStatesSummaryOkCount(props.jobStatesSummary);
+});
+
+const runningCount = computed<number>(() => {
+    return jobStatesSummaryRunningCount(props.jobStatesSummary);
+});
+
+const jobCount = computed<number>(() => {
+    return jobStatesSummaryJobCount(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>
     <div>
-        <div class="d-flex flex-gapx-1">
+        <div v-if="!props.success && props.isFullPage" class="d-flex flex-gapx-1">
             <Heading h1 separator inline truncate size="xl" class="flex-grow-1">
                 Invoked Workflow: "{{ getWorkflowName() }}"
             </Heading>
@@ -48,8 +121,8 @@ function getWorkflowName(): string {
                 </BButton>
             </div>
         </div>
-        <div class="py-2 pl-3 d-flex justify-content-between align-items-center">
-            <div>
+        <div class="py-2 pl-3 d-flex justify-content-between align-items-center flex-nowrap">
+            <div v-if="props.isFullPage">
                 <i>
                     <FontAwesomeIcon :icon="faClock" class="mr-1" />invoked
                     <UtcDate :date="props.invocation.update_time" mode="elapsed" />
@@ -57,8 +130,49 @@ function getWorkflowName(): string {
                 <span class="d-flex flex-gapx-1 align-items-center">
                     <FontAwesomeIcon :icon="faHdd" />History:
                     <SwitchToHistoryLink :history-id="props.invocation.history_id" />
+                    <BBadge
+                        v-if="props.newHistoryTarget"
+                        v-b-tooltip.hover.noninteractive
+                        role="button"
+                        variant="info"
+                        title="Results generated in a new history. Click on history name to switch to that history.">
+                        <FontAwesomeIcon :icon="faExclamation" />
+                    </BBadge>
                 </span>
             </div>
+            <div class="progress-bars mx-1">
+                <ProgressBar
+                    v-if="!stepCount"
+                    note="Loading step state summary..."
+                    :loading="true"
+                    class="steps-progress" />
+                <ProgressBar
+                    v-else-if="invocationState == 'cancelled'"
+                    note="Invocation scheduling cancelled - expected jobs and outputs may not be generated."
+                    :error-count="1"
+                    class="steps-progress" />
+                <ProgressBar
+                    v-else-if="invocationState == 'failed'"
+                    note="Invocation scheduling failed - Galaxy administrator may have additional details in logs."
+                    :error-count="1"
+                    class="steps-progress" />
+                <ProgressBar
+                    v-else
+                    :note="stepStatesStr"
+                    :total="stepCount"
+                    :ok-count="stepStates.scheduled"
+                    :loading="!invocationSchedulingTerminal"
+                    class="steps-progress" />
+                <ProgressBar
+                    :note="jobStatesStr"
+                    :total="jobCount"
+                    :ok-count="okCount"
+                    :running-count="runningCount"
+                    :new-count="newCount"
+                    :error-count="errorCount"
+                    :loading="!invocationAndJobTerminal"
+                    class="jobs-progress" />
+            </div>
             <div v-if="workflow" class="d-flex flex-gapx-1 align-items-center">
                 <div class="d-flex flex-column align-items-end mr-2">
                     <span v-if="workflow.version !== undefined" class="mb-1">
@@ -97,3 +211,19 @@ function getWorkflowName(): string {
         </div>
     </div>
 </template>
+
+<style scoped lang="scss">
+.progress-bars {
+    // progress bar shrinks to fit divs on either side
+    flex-grow: 1;
+    flex-shrink: 1;
+    max-width: 50%;
+
+    .steps-progress,
+    .jobs-progress {
+        // truncate text in progress bars
+        white-space: nowrap;
+        overflow: hidden;
+    }
+}
+</style>
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationOverview.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationOverview.vue
index 20084eb4ff58..d076e639daf0 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationOverview.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationOverview.vue
@@ -1,155 +1,34 @@
 <script setup lang="ts">
-import { BAlert, BButton } from "bootstrap-vue";
+import { BAlert } from "bootstrap-vue";
 import { computed } from "vue";
 
-import { type InvocationJobsSummary, type InvocationStep, type WorkflowInvocationElementView } from "@/api/invocations";
+import { type WorkflowInvocationElementView } from "@/api/invocations";
 import { useWorkflowInstance } from "@/composables/useWorkflowInstance";
-import { getRootFromIndexLink } from "@/onload";
 import { withPrefix } from "@/utils/redirect";
 
-import {
-    errorCount as jobStatesSummaryErrorCount,
-    jobCount as jobStatesSummaryJobCount,
-    numTerminal,
-    okCount as jobStatesSummaryOkCount,
-    runningCount as jobStatesSummaryRunningCount,
-} from "./util";
-
 import ExternalLink from "../ExternalLink.vue";
 import HelpText from "../Help/HelpText.vue";
 import InvocationGraph from "../Workflow/Invocation/Graph/InvocationGraph.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
-import ProgressBar from "@/components/ProgressBar.vue";
 import InvocationMessage from "@/components/WorkflowInvocationState/InvocationMessage.vue";
 
-function getUrl(path: string): string {
-    return getRootFromIndexLink() + path;
-}
-
 interface Props {
     invocation: WorkflowInvocationElementView;
     invocationAndJobTerminal: boolean;
     invocationSchedulingTerminal: boolean;
     isFullPage?: boolean;
-    jobStatesSummary: InvocationJobsSummary;
-    index?: number;
     isSubworkflow?: boolean;
 }
 
 const props = defineProps<Props>();
 
-const generatePdfTooltip = "Generate PDF report for this workflow invocation";
-
 const { workflow, loading, error } = useWorkflowInstance(props.invocation.workflow_id);
 
-const invocationId = computed<string | undefined>(() => props.invocation.id);
-
-const indexStr = computed(() => {
-    if (props.index == undefined) {
-        return "";
-    } else {
-        return `${props.index + 1}`;
-    }
-});
-
-const invocationState = computed(() => {
-    return props.invocation.state || "new";
-});
-
-const invocationStateSuccess = computed(() => {
-    return invocationState.value == "scheduled" && runningCount.value === 0 && props.invocationAndJobTerminal;
-});
-
-const disabledReportTooltip = computed(() => {
-    const state = invocationState.value;
-    const runCount = runningCount.value;
-    if (state != "scheduled") {
-        return `This workflow is not currently scheduled. The current state is ${state}. Once the workflow is fully scheduled and jobs have complete this option will become available.`;
-    } else if (runCount != 0) {
-        return `The workflow invocation still contains ${runCount} running job(s). Once these jobs have completed this option will become available.`;
-    } else {
-        return "Steps for this workflow are still running. A report will be available once complete.";
-    }
-});
-
-const stepCount = computed<number>(() => {
-    return props.invocation.steps.length || 0;
-});
-
-type StepStateType = { [state: string]: number };
-
-const stepStates = computed<StepStateType>(() => {
-    const stepStates: StepStateType = {};
-    const steps: InvocationStep[] = props.invocation.steps || [];
-    for (const step of steps) {
-        if (!step) {
-            continue;
-        }
-        // the API defined state here allowing null and undefined is odd...
-        const stepState: string = step.state || "unknown";
-        if (!stepStates[stepState]) {
-            stepStates[stepState] = 1;
-        } else {
-            stepStates[stepState] += 1;
-        }
-    }
-    return stepStates;
-});
-
-const invocationPdfLink = computed<string | null>(() => {
-    const id = invocationId.value;
-    if (id) {
-        return getUrl(`api/invocations/${id}/report.pdf`);
-    } else {
-        return null;
-    }
-});
-
 const uniqueMessages = computed(() => {
     const messages = props.invocation.messages || [];
     const uniqueMessagesSet = new Set(messages.map((message) => JSON.stringify(message)));
     return Array.from(uniqueMessagesSet).map((message) => JSON.parse(message)) as typeof messages;
 });
-
-const stepStatesStr = computed<string>(() => {
-    return `${stepStates.value?.scheduled || 0} of ${stepCount.value} steps successfully scheduled.`;
-});
-
-const okCount = computed<number>(() => {
-    return jobStatesSummaryOkCount(props.jobStatesSummary);
-});
-
-const runningCount = computed<number>(() => {
-    return jobStatesSummaryRunningCount(props.jobStatesSummary);
-});
-
-const jobCount = computed<number>(() => {
-    return jobStatesSummaryJobCount(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}.`;
-});
-
-const emit = defineEmits<{
-    (e: "invocation-cancelled"): void;
-}>();
-
-function onCancel() {
-    emit("invocation-cancelled");
-}
 </script>
 
 <template>
@@ -160,75 +39,14 @@ function onCancel() {
             <ExternalLink :href="withPrefix(`/workflows/invocations/${invocation.id}`)"> Click here </ExternalLink>
             to view this subworkflow in graph view.
         </BAlert>
-        <div v-if="!invocationAndJobTerminal">
-            <BAlert variant="info" show>
-                <LoadingSpan :message="`Waiting to complete invocation ${indexStr}`" />
-            </BAlert>
-            <BButton
-                v-b-tooltip.noninteractive.hover
-                class="cancel-workflow-scheduling"
-                title="Cancel scheduling of workflow invocation"
-                size="sm"
-                @click="onCancel">
-                <span class="fa fa-times mr-1" /> Cancel
-            </BButton>
-        </div>
-        <div class="d-flex align-items-center">
-            <div v-if="invocationAndJobTerminal" class="mr-1" :class="{ 'd-flex': !uniqueMessages.length }">
-                <BButton
-                    v-b-tooltip.hover
-                    :title="invocationStateSuccess ? generatePdfTooltip : disabledReportTooltip"
-                    :disabled="!invocationStateSuccess"
-                    size="sm"
-                    class="invocation-pdf-link text-nowrap w-100"
-                    :class="{ 'mt-1': uniqueMessages.length }"
-                    :href="invocationPdfLink"
-                    target="_blank">
-                    Generate PDF
-                </BButton>
-            </div>
-            <div class="w-100">
-                <ProgressBar
-                    v-if="!stepCount"
-                    note="Loading step state summary..."
-                    :loading="true"
-                    class="steps-progress" />
-                <template v-if="uniqueMessages.length">
-                    <InvocationMessage
-                        v-for="message in uniqueMessages"
-                        :key="message.reason"
-                        class="steps-progress my-1"
-                        :invocation-message="message"
-                        :invocation="invocation">
-                    </InvocationMessage>
-                </template>
-                <ProgressBar
-                    v-else-if="invocationState == 'cancelled'"
-                    note="Invocation scheduling cancelled - expected jobs and outputs may not be generated."
-                    :error-count="1"
-                    class="steps-progress" />
-                <ProgressBar
-                    v-else-if="invocationState == 'failed'"
-                    note="Invocation scheduling failed - Galaxy administrator may have additional details in logs."
-                    :error-count="1"
-                    class="steps-progress" />
-                <ProgressBar
-                    v-else
-                    :note="stepStatesStr"
-                    :total="stepCount"
-                    :ok-count="stepStates.scheduled"
-                    :loading="!invocationSchedulingTerminal"
-                    class="steps-progress" />
-                <ProgressBar
-                    :note="jobStatesStr"
-                    :total="jobCount"
-                    :ok-count="okCount"
-                    :running-count="runningCount"
-                    :new-count="newCount"
-                    :error-count="errorCount"
-                    :loading="!invocationAndJobTerminal"
-                    class="jobs-progress" />
-            </div>
+        <div v-if="uniqueMessages.length" class="d-flex align-items-center">
+            <InvocationMessage
+                v-for="message in uniqueMessages"
+                :key="message.reason"
+                class="steps-progress my-1 w-100"
+                :invocation-message="message"
+                :invocation="invocation">
+            </InvocationMessage>
         </div>
         <!-- Once the workflow for the invocation has been loaded, display the graph -->
         <BAlert v-if="loading" variant="info" show>
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
index 1bb21ee0baef..b0fb89498c9d 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
-import { BAlert, BTab, BTabs } from "bootstrap-vue";
+import { faDownload, faTimes } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BAlert, BButton, BNavItem, BTab, BTabs } from "bootstrap-vue";
 import { computed, onUnmounted, ref, watch } from "vue";
 
 import { type InvocationJobsSummary, type WorkflowInvocationElementView } from "@/api/invocations";
 import { useAnimationFrameResizeObserver } from "@/composables/sensors/animationFrameResizeObserver";
+import { getRootFromIndexLink } from "@/onload";
 import { useInvocationStore } from "@/stores/invocationStore";
 import { useWorkflowStore } from "@/stores/workflowStore";
 import { errorMessageAsString } from "@/utils/simple-error";
@@ -21,15 +24,16 @@ import LoadingSpan from "@/components/LoadingSpan.vue";
 
 interface Props {
     invocationId: string;
-    index?: number;
     isSubworkflow?: boolean;
     isFullPage?: boolean;
     fromPanel?: boolean;
+    success?: boolean;
+    newHistoryTarget?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
-    index: undefined,
     isSubworkflow: false,
+    newHistoryTarget: undefined,
 });
 
 const emit = defineEmits<{
@@ -55,6 +59,24 @@ watch(
     }
 );
 
+// Report and PDF generation
+const generatePdfTooltip = "Generate PDF report for this workflow invocation";
+const invocationPdfLink = computed<string | null>(
+    () => getRootFromIndexLink() + `api/invocations/${props.invocationId}/report.pdf`
+);
+const disabledReportTooltip = computed(() => {
+    const state = invocationState.value;
+    if (state != "scheduled") {
+        return `This workflow is not currently scheduled. The current state is ${state}. Once the workflow is fully scheduled and jobs have complete this option will become available.`;
+    } else if (runningCount(jobStatesSummary.value) != 0) {
+        return `The workflow invocation still contains ${runningCount(
+            jobStatesSummary.value
+        )} running job(s). Once these jobs have completed this option will become available.`;
+    } else {
+        return "Steps for this workflow are still running. A report will be available once complete.";
+    }
+});
+
 const invocationTabs = ref<BTabs>();
 const scrollableDiv = computed(() => invocationTabs.value?.$el.querySelector(".tab-content") as HTMLElement);
 const isScrollable = ref(false);
@@ -148,7 +170,16 @@ function cancelWorkflowSchedulingLocal() {
 
 <template>
     <div v-if="invocation" class="d-flex flex-column w-100">
-        <WorkflowInvocationHeader v-if="props.isFullPage" :invocation="invocation" :from-panel="props.fromPanel" />
+        <WorkflowInvocationHeader
+            :is-full-page="props.isFullPage"
+            :invocation="invocation"
+            :invocation-state="invocationState"
+            :from-panel="props.fromPanel"
+            :job-states-summary="jobStatesSummary"
+            :success="props.success"
+            :new-history-target="props.newHistoryTarget"
+            :invocation-scheduling-terminal="invocationSchedulingTerminal"
+            :invocation-and-job-terminal="invocationAndJobTerminal" />
         <BTabs
             ref="invocationTabs"
             class="mt-1 d-flex flex-column overflow-auto"
@@ -157,11 +188,9 @@ function cancelWorkflowSchedulingLocal() {
                 <WorkflowInvocationOverview
                     class="invocation-overview"
                     :invocation="invocation"
-                    :index="index"
                     :is-full-page="props.isFullPage"
                     :invocation-and-job-terminal="invocationAndJobTerminal"
                     :invocation-scheduling-terminal="invocationSchedulingTerminal"
-                    :job-states-summary="jobStatesSummary"
                     :is-subworkflow="isSubworkflow"
                     @invocation-cancelled="cancelWorkflowSchedulingLocal" />
             </BTab>
@@ -195,6 +224,36 @@ function cancelWorkflowSchedulingLocal() {
                     <LoadingSpan message="Waiting to complete invocation" />
                 </BAlert>
             </BTab>
+            <template v-slot:tabs-end>
+                <BNavItem v-if="!invocationAndJobTerminal" class="invocation-pdf-link ml-auto alert-info mr-1">
+                    <LoadingSpan message="Waiting to complete invocation" />
+                    <BButton
+                        v-b-tooltip.noninteractive.hover
+                        class="cancel-workflow-scheduling"
+                        title="Cancel scheduling of workflow invocation"
+                        size="sm"
+                        variant="danger"
+                        @click="onCancel">
+                        <FontAwesomeIcon :icon="faTimes" fixed-width />
+                        Cancel Workflow
+                    </BButton>
+                </BNavItem>
+                <li
+                    role="presentation"
+                    class="nav-item align-self-center invocation-pdf-link mr-2"
+                    :class="{ 'ml-auto': invocationAndJobTerminal }">
+                    <BButton
+                        v-b-tooltip.hover.bottom.noninteractive
+                        :title="invocationStateSuccess ? generatePdfTooltip : disabledReportTooltip"
+                        :disabled="!invocationStateSuccess"
+                        :href="invocationPdfLink"
+                        size="sm"
+                        target="_blank">
+                        <FontAwesomeIcon :icon="faDownload" fixed-width />
+                        Generate PDF
+                    </BButton>
+                </li>
+            </template>
         </BTabs>
     </div>
     <BAlert v-else-if="errorMessage" variant="danger" show>