From a1bb72291061a8fa5288b8a9fd88667b9e0dd475 Mon Sep 17 00:00:00 2001
From: John Chilton <jmchilton@gmail.com>
Date: Mon, 11 Mar 2024 14:04:52 -0400
Subject: [PATCH] Refactor progress bars out of invocation summary.

---
 .../InvocationJobsProgressBar.vue             |  63 +++++++++++
 .../InvocationStepsProgressBar.vue            |  68 +++++++++++
 .../WorkflowInvocationSummary.vue             | 106 ++----------------
 3 files changed, 143 insertions(+), 94 deletions(-)
 create mode 100644 client/src/components/WorkflowInvocationState/InvocationJobsProgressBar.vue
 create mode 100644 client/src/components/WorkflowInvocationState/InvocationStepsProgressBar.vue

diff --git a/client/src/components/WorkflowInvocationState/InvocationJobsProgressBar.vue b/client/src/components/WorkflowInvocationState/InvocationJobsProgressBar.vue
new file mode 100644
index 000000000000..962262095e3d
--- /dev/null
+++ b/client/src/components/WorkflowInvocationState/InvocationJobsProgressBar.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+import { InvocationJobsSummary } from "@/api/invocations";
+import ProgressBar from "@/components/ProgressBar.vue";
+
+import {
+    errorCount as jobStatesSummaryErrorCount,
+    jobCount as jobStatesSummaryJobCount,
+    numTerminal,
+    okCount as jobStatesSummaryOkCount,
+    runningCount as jobStatesSummaryRunningCount,
+} from "./util";
+
+
+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>
diff --git a/client/src/components/WorkflowInvocationState/InvocationStepsProgressBar.vue b/client/src/components/WorkflowInvocationState/InvocationStepsProgressBar.vue
new file mode 100644
index 000000000000..e7fe24d39fe6
--- /dev/null
+++ b/client/src/components/WorkflowInvocationState/InvocationStepsProgressBar.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+import { InvocationStep, WorkflowInvocationElementView } from "@/api/invocations";
+import ProgressBar from "@/components/ProgressBar.vue";
+
+interface Props {
+    invocation?: WorkflowInvocationElementView;
+    invocationState: string;
+    invocationSchedulingTerminal: boolean;
+}
+
+const props = defineProps<Props>();
+
+const stepCount = computed<number>(() => {
+    return props.invocation?.steps.length || 0;
+});
+
+type StepStateType = { [state: string]: number };
+
+const stepStates = computed<StepStateType>(() => {
+    const stepStates: StepStateType = {};
+    if (!props.invocation) {
+        return {};
+    }
+    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 stepStatesStr = computed<string>(() => {
+    return `${stepStates.value?.scheduled || 0} of ${stepCount.value} steps successfully scheduled.`;
+});
+</script>
+
+<template>
+    <span>
+        <ProgressBar v-if="!stepCount" note="Loading step state summary..." :loading="true" class="steps-progress" />
+        <ProgressBar
+            v-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" />
+    </span>
+</template>
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationSummary.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationSummary.vue
index 230859b8bd88..4ff1fc0e9960 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationSummary.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationSummary.vue
@@ -1,26 +1,17 @@
 <script setup lang="ts">
 import { computed } from "vue";
 
-import { InvocationJobsSummary, InvocationStep, WorkflowInvocationElementView } from "@/api/invocations";
-import { getRootFromIndexLink } from "@/onload";
+import { InvocationJobsSummary, WorkflowInvocationElementView } from "@/api/invocations";
 
-import {
-    errorCount as jobStatesSummaryErrorCount,
-    jobCount as jobStatesSummaryJobCount,
-    numTerminal,
-    okCount as jobStatesSummaryOkCount,
-    runningCount as jobStatesSummaryRunningCount,
-} from "./util";
+import { runningCount as jobStatesSummaryRunningCount } from "./util";
 
 import LoadingSpan from "@/components/LoadingSpan.vue";
 import ProgressBar from "@/components/ProgressBar.vue";
 
 import InvocationMessage from "./InvocationMessage.vue";
 import InvocationSummaryActionButtons from "./InvocationSummaryActionButtons.vue";
-
-function getUrl(path: string): string {
-    return getRootFromIndexLink() + path;
-}
+import InvocationJobsProgressBar from "./InvocationJobsProgressBar.vue";
+import InvocationStepsProgressBar from "./InvocationStepsProgressBar.vue";
 
 interface Props {
     invocation?: WorkflowInvocationElementView;
@@ -50,65 +41,10 @@ const invocationStateSuccess = computed(() => {
     return invocationState.value == "scheduled" && runningCount.value === 0 && props.invocationAndJobTerminal;
 });
 
-const stepCount = computed<number>(() => {
-    return props.invocation?.steps.length || 0;
-});
-
-type StepStateType = { [state: string]: number };
-
-const stepStates = computed<StepStateType>(() => {
-    const stepStates: StepStateType = {};
-    if (!props.invocation) {
-        return {};
-    }
-    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 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;
 }>();
@@ -136,7 +72,6 @@ function onCancel() {
                 title="Cancel scheduling of workflow invocation"
                 @click="onCancel"></span>
         </div>
-        <ProgressBar v-if="!stepCount" note="Loading step state summary..." :loading="true" class="steps-progress" />
         <template v-if="invocation.messages?.length">
             <InvocationMessage
                 v-for="message in invocation.messages"
@@ -146,31 +81,14 @@ function onCancel() {
                 :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
+        <InvocationStepsProgressBar
             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" />
+            :invocation="invocation"
+            :invocation-state="invocationState"
+            :invocation-scheduling-terminal="invocationSchedulingTerminal" />
+        <InvocationJobsProgressBar
+            :job-states-summary="jobStatesSummary"
+            :invocation-scheduling-terminal="invocationSchedulingTerminal"
+            :invocation-and-job-terminal="invocationAndJobTerminal" />
     </div>
 </template>