From 8838d2c8bb9f836fec3e447a781d103deeae8454 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Tue, 10 Dec 2024 10:26:55 -0600
Subject: [PATCH] add `terminal` prop to workflow metrics for a running
 workflow

---
 .../WorkflowInvocationMetrics.vue             | 24 ++++++++++++-------
 .../WorkflowInvocationState.vue               |  4 +++-
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue
index 40f46da6db23..5a140c16e62e 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BButtonGroup, BCol, BContainer, BRow } from "bootstrap-vue";
+import { BAlert, BButtonGroup, BCol, BContainer, BRow } from "bootstrap-vue";
 import type { VisualizationSpec } from "vega-embed";
 import { computed, ref, watch } from "vue";
 import { type ComputedRef } from "vue";
@@ -8,16 +8,16 @@ import { type components, GalaxyApi } from "@/api";
 import { getAppRoot } from "@/onload/loadConfig";
 import { errorMessageAsString } from "@/utils/simple-error";
 
+import LoadingSpan from "../LoadingSpan.vue";
 import HelpText from "@/components/Help/HelpText.vue";
 
 const VegaWrapper = () => import("./VegaWrapper.vue");
 
-const props = defineProps({
-    invocationId: {
-        type: String,
-        required: true,
-    },
-});
+interface Props {
+    invocationId: string;
+    terminal?: boolean;
+}
+const props = defineProps<Props>();
 
 const groupBy = ref<"tool_id" | "step_id">("tool_id");
 const timing = ref<"seconds" | "minutes" | "hours">("seconds");
@@ -44,7 +44,11 @@ async function fetchMetrics() {
     }
 }
 
-watch(props, () => fetchMetrics(), { immediate: true });
+watch(
+    () => props.invocationId,
+    () => fetchMetrics(),
+    { immediate: true }
+);
 
 function itemToX(item: components["schemas"]["WorkflowJobMetric"]) {
     if (groupBy.value === "tool_id") {
@@ -380,6 +384,10 @@ const groupByInTitles = computed(() => {
 
 <template>
     <div>
+        <BAlert v-if="!props.terminal" variant="warning" show>
+            <LoadingSpan
+                message="The workflow might still be running. Metrics will update and change as the workflow progresses." />
+        </BAlert>
         <BContainer>
             <BRow align-h="end" class="mb-2">
                 <BButtonGroup>
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
index 8c59c416c789..5904de674543 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
@@ -360,7 +360,9 @@ async function onCancel() {
                     </BBadge>
                 </template>
                 <div v-if="invocationAndJobTerminal">
-                    <WorkflowInvocationExportOptions :invocation-id="invocation.id" />
+                    <WorkflowInvocationExportOptions
+                        :invocation-id="invocation.id"
+                        :terminal="invocationAndJobTerminal" />
                 </div>
                 <BAlert v-else variant="info" show>
                     <LoadingSpan message="Waiting to complete invocation" />