Display state in invocation list.

galaxyproject · Mar 25, 2024 · ee7aad9 · ee7aad9
1 parent 495ce6c
commit ee7aad9
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 5 deletions.
diff --git a/client/src/components/Workflow/InvocationsList.vue b/client/src/components/Workflow/InvocationsList.vue
@@ -65,7 +65,10 @@
                 <UtcDate :date="data.value" mode="elapsed" />
             </template>
             <template v-slot:cell(state)="data">
-                <InvocationsListState :invocation-state="data.value" :invocation-id="data.item.id" />
+                <InvocationsListState
+                    :invocation-state="data.value"
+                    :invocation-id="data.item.id"
+                    :details-showing="data.detailsShowing" />
             </template>
             <template v-slot:cell(execute)="data">
                 <WorkflowRunButton
@@ -126,7 +129,7 @@ export default {
         }
         fields.push(
             { key: "create_time", label: "Invoked", class: "col-small", sortable: true },
-            { key: "state", class: "col-small" },
+            { key: "state" },
             { key: "execute", label: "Run", class: "col-button" }
         );
         return {
@@ -212,7 +215,7 @@ export default {
 }
 
 .table:deep(.col-name) {
-    width: 40%;
+    width: 35%;
 }
 
 .table:deep(.col-history) {

diff --git a/client/src/components/Workflow/InvocationsListState.vue b/client/src/components/Workflow/InvocationsListState.vue
@@ -1,14 +1,48 @@
 <script setup lang="ts">
+import { onMounted, onBeforeUnmount, toRef } from "vue";
 import HelpText from "@/components/Help/HelpText.vue";
 
+import InvocationJobsProgressBar from "@/components/WorkflowInvocationState/InvocationJobsProgressBar.vue";
+import InvocationStepsProgressBar from "@/components/WorkflowInvocationState/InvocationStepsProgressBar.vue";
+import { useInvocationState } from "@/components/WorkflowInvocationState/usesInvocationState";
+
 interface Props {
     invocationId: string;
     invocationState: string;
+    detailsShowing: boolean;
 }
 
-defineProps<Props>();
+const props = defineProps<Props>();
+
+const {
+    invocation,
+    invocationState,
+    invocationSchedulingTerminal,
+    invocationAndJobTerminal,
+    jobStatesSummary,
+    monitorState,
+    clearStateMonitor,
+} = useInvocationState(toRef(props, "invocationId"));
+
+onMounted(monitorState);
+onBeforeUnmount(clearStateMonitor);
 </script>
 
 <template>
-    <HelpText :uri="`galaxy.invocations.states.${invocationState}`" :text="invocationState" />
+    <span>
+        <HelpText
+            v-if="!invocation || detailsShowing"
+            :uri="`galaxy.invocations.states.${props.invocationState}`"
+            :text="props.invocationState" />
+        <template v-else>
+            <InvocationStepsProgressBar
+                :invocation="invocation"
+                :invocation-state="invocationState"
+                :invocation-scheduling-terminal="invocationSchedulingTerminal" />
+            <InvocationJobsProgressBar
+                :job-states-summary="jobStatesSummary"
+                :invocation-scheduling-terminal="invocationSchedulingTerminal"
+                :invocation-and-job-terminal="invocationAndJobTerminal" />
+        </template>
+    </span>
 </template>