Move invocation view controls and loading indicator

Used to be in the `tabs-end` slot. Here, we remove it from there and the BAlert and instead: - The icon on the top left is a loading one when workflow is running - The cancel button is next to the progress bars - We remove the "Generate PDF" button entirely Fixes galaxyproject#19158
ahmedhamidawan · Nov 20, 2024 · 283c7fd · 283c7fd
1 parent a7afb68
commit 283c7fd
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 47 deletions.
diff --git a/client/src/components/Workflow/WorkflowNavigationTitle.vue b/client/src/components/Workflow/WorkflowNavigationTitle.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { faEdit, faSitemap, faUpload } from "@fortawesome/free-solid-svg-icons";
+import { faEdit, faSitemap, faSpinner, faUpload } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BAlert, BButton, BButtonGroup } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
@@ -28,6 +28,7 @@ interface Props {
     workflowId: string;
     runDisabled?: boolean;
     runWaiting?: boolean;
+    invocationRunning?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -102,7 +103,8 @@ const workflowImportTitle = computed(() => {
                 <div class="d-flex portlet-header align-items-center">
                     <div class="flex-grow-1" data-description="workflow heading">
                         <div class="px-1">
-                            <FontAwesomeIcon :icon="faSitemap" />
+                            <FontAwesomeIcon v-if="props.invocationRunning" :icon="faSpinner" spin />
+                            <FontAwesomeIcon v-else :icon="faSitemap" />
                             <b class="mx-1">
                                 {{ props.invocation ? "Invoked " : "" }}Workflow: {{ getWorkflowName() }}
                             </b>

diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
-import { faDownload, faTimes } from "@fortawesome/free-solid-svg-icons";
+import { faExclamation, faTimes } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert, BButton, BNavItem, BTab, BTabs } from "bootstrap-vue";
+import { BAlert, BBadge, BButton, BTab, BTabs } from "bootstrap-vue";
 import { computed, onUnmounted, ref, watch } from "vue";
 
 import { type InvocationJobsSummary, type InvocationStep, 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";
@@ -67,11 +66,15 @@ 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 workflowStore = useWorkflowStore();
+const reportTabDisabled = computed(
+    () =>
+        !invocationStateSuccess.value ||
+        !invocation.value ||
+        !workflowStore.getStoredWorkflowByInstanceId(invocation.value.workflow_id)
 );
+
+/** Tooltip message for the report tab when it is disabled */
 const disabledReportTooltip = computed(() => {
     const state = invocationState.value;
     if (state != "scheduled") {
@@ -175,8 +178,6 @@ const jobStatesStr = computed(() => {
     return `${jobStr}.`;
 });
 
-const workflowStore = useWorkflowStore();
-
 watch(
     () => props.invocationId,
     async (id) => {
@@ -231,7 +232,8 @@ function cancelWorkflowSchedulingLocal() {
         <WorkflowNavigationTitle
             v-if="props.isFullPage && !props.success"
             :invocation="invocation"
-            :workflow-id="invocation.workflow_id" />
+            :workflow-id="invocation.workflow_id"
+            :invocation-running="!invocationAndJobTerminal" />
         <WorkflowAnnotation
             v-if="props.isFullPage"
             :workflow-id="invocation.workflow_id"
@@ -272,6 +274,17 @@ function cancelWorkflowSchedulingLocal() {
                         :loading="!invocationAndJobTerminal"
                         class="jobs-progress" />
                 </div>
+                <BButton
+                    v-if="!invocationAndJobTerminal"
+                    v-b-tooltip.noninteractive.hover
+                    title="Cancel scheduling of workflow invocation"
+                    data-description="cancel invocation button"
+                    size="sm"
+                    pill
+                    variant="outline-danger"
+                    @click="onCancel">
+                    <FontAwesomeIcon :icon="faTimes" fixed-width />
+                </BButton>
             </template>
         </WorkflowAnnotation>
         <BTabs
@@ -301,13 +314,20 @@ function cancelWorkflowSchedulingLocal() {
             </BTab> -->
             <BTab
                 v-if="!props.isSubworkflow"
-                title="Report"
                 title-item-class="invocation-report-tab"
-                :disabled="
-                    !invocationStateSuccess || !workflowStore.getStoredWorkflowByInstanceId(invocation.workflow_id)
-                "
+                :disabled="reportTabDisabled"
                 :lazy="reportLazy"
                 :active.sync="reportActive">
+                <template v-slot:title>
+                    <span>Report</span>
+                    <BBadge
+                        v-if="reportTabDisabled"
+                        v-b-tooltip.hover.noninteractive
+                        :title="disabledReportTooltip"
+                        variant="warning">
+                        <FontAwesomeIcon :icon="faExclamation" />
+                    </BBadge>
+                </template>
                 <InvocationReport v-if="invocationStateSuccess" :invocation-id="invocation.id" />
             </BTab>
             <BTab title="Export" lazy>
@@ -321,37 +341,6 @@ function cancelWorkflowSchedulingLocal() {
             <BTab title="Metrics" :lazy="true">
                 <WorkflowInvocationMetrics :invocation-id="invocation.id"></WorkflowInvocationMetrics>
             </BTab>
-            <template v-slot:tabs-end>
-                <BNavItem v-if="!invocationAndJobTerminal" class="ml-auto alert-info mr-1">
-                    <LoadingSpan message="Waiting to complete invocation" />
-                    <BButton
-                        v-b-tooltip.noninteractive.hover
-                        title="Cancel scheduling of workflow invocation"
-                        data-description="cancel invocation button"
-                        size="sm"
-                        variant="danger"
-                        @click="onCancel">
-                        <FontAwesomeIcon :icon="faTimes" fixed-width />
-                        Cancel Workflow
-                    </BButton>
-                </BNavItem>
-                <li
-                    role="presentation"
-                    class="nav-item align-self-center mr-2"
-                    :class="{ 'ml-auto': invocationAndJobTerminal }"
-                    data-description="generate pdf report button">
-                    <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>
@@ -365,6 +354,15 @@ function cancelWorkflowSchedulingLocal() {
     </BAlert>
 </template>
 
+<style lang="scss">
+// To show the tooltip on the disabled report tab badge
+.invocation-report-tab {
+    .nav-link.disabled {
+        pointer-events: auto !important;
+    }
+}
+</style>
+
 <style scoped lang="scss">
 .progress-bars {
     // progress bar shrinks to fit divs on either side