add a "Messages" tab to WorkflowInvocationState if > 1 messages

client/src/components/WorkflowInvocationState/WorkflowInvocationOverview.vue

@@ -7,6 +7,7 @@ import { getRootFromIndexLink } from "@/onload";
 import { type Workflow } from "@/stores/workflowStore";
 import { withPrefix } from "@/utils/redirect";
 
+import { type InvocationMessageResponseModel } from "./invocationMessageModel";
 import {
     errorCount as jobStatesSummaryErrorCount,
     jobCount as jobStatesSummaryJobCount,
@@ -39,6 +40,8 @@ interface Props {
 
 const props = defineProps<Props>();
 
+const invocationMessages = computed(() => (props.invocation?.messages as InvocationMessageResponseModel[]) || []);
+
 const generatePdfTooltip = "Generate PDF report for this workflow invocation";
 
 const invocationId = computed<string | undefined>(() => props.invocation?.id);
@@ -107,10 +110,6 @@ const invocationPdfLink = computed<string | null>(() => {
     }
 });
 
-const hasMessages = computed<boolean>(() => {
-    return props.invocation?.messages.length ? true : false;
-});
-
 const stepStatesStr = computed<string>(() => {
     return `${stepStates.value?.scheduled || 0} of ${stepCount.value} steps successfully scheduled.`;
 });
@@ -145,6 +144,7 @@ const jobStatesStr = computed(() => {
 
 const emit = defineEmits<{
     (e: "invocation-cancelled"): void;
+    (e: "show-messages-tab"): void;
 }>();
 
 function onCancel() {
@@ -174,14 +174,13 @@ function onCancel() {
             </BButton>
         </div>
         <div class="d-flex align-items-center">
-            <div v-if="invocationAndJobTerminal" class="mr-1" :class="{ 'd-flex': !hasMessages }">
+            <div v-if="invocationAndJobTerminal" class="mr-1">
                 <BButton
                     v-b-tooltip.hover
                     :title="invocationStateSuccess ? generatePdfTooltip : disabledReportTooltip"
                     :disabled="!invocationStateSuccess"
                     size="sm"
                     class="invocation-pdf-link text-nowrap w-100"
-                    :class="{ 'mt-1': hasMessages }"
                     :href="invocationPdfLink"
                     target="_blank">
                     Generate PDF
@@ -193,15 +192,20 @@ function onCancel() {
                     note="Loading step state summary..."
                     :loading="true"
                     class="steps-progress" />
-                <template v-if="invocation && hasMessages">
+                <span v-if="invocation && invocationMessages[0]">
                     <InvocationMessage
-                        v-for="message in invocation.messages"
-                        :key="message.reason"
                         class="steps-progress my-1"
-                        :invocation-message="message"
-                        :invocation="invocation">
-                    </InvocationMessage>
-                </template>
+                        :invocation-message="invocationMessages[0]"
+                        :invocation="invocation" />
+                    <BButton
+                        v-if="invocationMessages.length > 1"
+                        size="sm"
+                        variant="info"
+                        class="w-100"
+                        @click="emit('show-messages-tab')">
+                        Showing 1 out of {{ invocationMessages.length }} messages. Click here to view all messages.
+                    </BButton>
+                </span>
                 <ProgressBar
                     v-else-if="invocationState == 'cancelled'"
                     note="Invocation scheduling cancelled - expected jobs and outputs may not be generated."

client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue

@@ -1,6 +1,15 @@
 <script setup lang="ts">
 import { library } from "@fortawesome/fontawesome-svg-core";
-import { faArrowLeft, faClock, faEdit, faEye, faHdd, faPlay, faSitemap } from "@fortawesome/free-solid-svg-icons";
+import {
+    faArrowLeft,
+    faClock,
+    faEdit,
+    faExclamationCircle,
+    faEye,
+    faHdd,
+    faPlay,
+    faSitemap,
+} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BAlert, BButton, BButtonGroup, BTab, BTabs } from "bootstrap-vue";
 import { computed, onMounted, onUnmounted, ref, watch } from "vue";
@@ -12,6 +21,7 @@ import { useWorkflowStore, type Workflow } from "@/stores/workflowStore";
 import localize from "@/utils/localization";
 import { errorMessageAsString } from "@/utils/simple-error";
 
+import { type InvocationMessageResponseModel } from "./invocationMessageModel";
 import { cancelWorkflowScheduling } from "./services";
 import { isTerminal, jobCount, runningCount } from "./util";
 
@@ -21,6 +31,7 @@ import UtcDate from "../UtcDate.vue";
 import InvocationReport from "../Workflow/InvocationReport.vue";
 import WorkflowInvocationsCount from "../Workflow/WorkflowInvocationsCount.vue";
 import WorkflowRunButton from "../Workflow/WorkflowRunButton.vue";
+import InvocationMessage from "./InvocationMessage.vue";
 import WorkflowInvocationExportOptions from "./WorkflowInvocationExportOptions.vue";
 import WorkflowInvocationInputOutputTabs from "./WorkflowInvocationInputOutputTabs.vue";
 import WorkflowInvocationOverview from "./WorkflowInvocationOverview.vue";
@@ -66,6 +77,7 @@ watch(
 );
 
 const invocationTabs = ref<BTabs>();
+const messagesTab = ref(false);
 const scrollableDiv = computed(() => invocationTabs.value?.$el.querySelector(".tab-content") as HTMLElement);
 const isScrollable = ref(false);
 useAnimationFrameResizeObserver(scrollableDiv, ({ clientSize, scrollSize }) => {
@@ -104,6 +116,7 @@ const invocationStateSuccess = computed(() => {
         invocationAndJobTerminal.value
     );
 });
+const invocationMessages = computed(() => (invocation.value?.messages as InvocationMessageResponseModel[]) || []);
 
 const workflowStore = useWorkflowStore();
 
@@ -245,7 +258,8 @@ function getWorkflowName() {
                     :invocation-scheduling-terminal="invocationSchedulingTerminal"
                     :job-states-summary="jobStatesSummary"
                     :is-subworkflow="isSubworkflow"
-                    @invocation-cancelled="cancelWorkflowSchedulingLocal" />
+                    @invocation-cancelled="cancelWorkflowSchedulingLocal"
+                    @show-messages-tab="messagesTab = true" />
             </BTab>
             <WorkflowInvocationInputOutputTabs :invocation="invocation" />
             <!-- <BTab title="Workflow Overview">
@@ -268,6 +282,19 @@ function getWorkflowName() {
                     <LoadingSpan message="Waiting to complete invocation" />
                 </BAlert>
             </BTab>
+            <BTab v-if="invocationMessages.length > 1" lazy :active.sync="messagesTab">
+                <template v-slot:title>
+                    Messages
+                    <FontAwesomeIcon class="text-danger" :icon="faExclamationCircle" />
+                </template>
+                <InvocationMessage
+                    v-for="message in invocationMessages"
+                    :key="message.reason"
+                    class="steps-progress my-1"
+                    :invocation-message="message"
+                    :invocation="invocation">
+                </InvocationMessage>
+            </BTab>
         </BTabs>
     </div>
     <BAlert v-else-if="initialLoading" variant="info" show>