Merge pull request #18762 from hujambo-dunia/enhance-workflow-detail

Add Workflow Title and Annotation sections

client/src/components/Common/ButtonSpinner.vue

@@ -11,12 +11,14 @@ interface Props {
     wait?: boolean;
     tooltip?: string;
     disabled?: boolean;
+    size?: string;
 }
 
 withDefaults(defineProps<Props>(), {
     wait: false,
     tooltip: undefined,
     disabled: false,
+    size: "md",
 });
 </script>
 
@@ -25,6 +27,7 @@ withDefaults(defineProps<Props>(), {
         v-if="wait"
         v-b-tooltip.hover.bottom
         disabled
+        :size="size"
         variant="info"
         title="Please Wait..."
         class="d-flex flex-nowrap align-items-center text-nowrap">
@@ -38,6 +41,7 @@ withDefaults(defineProps<Props>(), {
         class="d-flex flex-nowrap align-items-center text-nowrap"
         :title="tooltip"
         :disabled="disabled"
+        :size="size"
         @click="$emit('onClick')">
         <FontAwesomeIcon :icon="faPlay" class="mr-2" />
         {{ title }}

client/src/components/Grid/GridInvocation.vue

@@ -109,7 +109,7 @@ function refreshTable() {
             :extra-props="extraProps"
             :embedded="forStoredWorkflow || forHistory || forBatch">
             <template v-slot:expanded="{ rowData }">
-                <span class="position-absolute ml-4" :data-invocation-id="rowData.id">
+                <span class="mb-2" :data-invocation-id="rowData.id">
                     <small>
                         <b>Last updated: <UtcDate :date="rowData.update_time" mode="elapsed" />; Invocation ID:</b>
                     </small>

client/src/components/History/SwitchToHistoryLink.vue

@@ -86,7 +86,7 @@ function viewHistoryInNewTab(history: HistorySummary) {
 <template>
     <div>
         <LoadingSpan v-if="!history" />
-        <div v-else class="history-link">
+        <div v-else class="history-link" data-description="switch to history link">
             <BLink
                 v-b-tooltip.hover.top.noninteractive.html
                 data-description="switch to history link"

client/src/components/JobMetrics/JobMetrics.test.js

@@ -6,6 +6,8 @@ import { getLocalVue } from "tests/jest/helpers";
 
 import JobMetrics from "./JobMetrics";
 
+const NO_METRICS_MESSAGE = "No metrics available for this job.";
+
 // Ignore all axios calls, data is mocked locally -- just say "OKAY!"
 jest.mock("axios", () => ({
     get: async () => {
@@ -26,7 +28,8 @@ describe("JobMetrics/JobMetrics.vue", () => {
         });
 
         await wrapper.vm.$nextTick();
-        expect(wrapper.find("div").exists()).toBe(false);
+        const alert = wrapper.find(".alert-info");
+        expect(alert.text()).toBe(NO_METRICS_MESSAGE);
     });
 
     it("should group plugins by type", async () => {

client/src/components/JobMetrics/JobMetrics.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { BAlert } from "bootstrap-vue";
 import { computed, ref, unref, watch } from "vue";
 
 import { useJobMetricsStore } from "@/stores/jobMetricsStore";
@@ -217,4 +218,5 @@ const estimatedServerInstance = computed(() => {
             :cores-allocated="coresAllocated"
             :memory-allocated-in-mebibyte="memoryAllocatedInMebibyte" />
     </div>
+    <BAlert v-else variant="info" show> No metrics available for this job. </BAlert>
 </template>

client/src/components/Workflow/Invocation/InvocationScrollList.vue

@@ -96,12 +96,10 @@ const route = useRoute();
 const router = useRouter();
 
 function cardClicked(invocation: WorkflowInvocation) {
-    let path = `/workflows/invocations/${invocation.id}`;
     if (props.inPanel) {
-        path += "?from_panel=true";
         emit("invocation-clicked");
     }
-    router.push(path);
+    router.push(`/workflows/invocations/${invocation.id}`);
 }
 
 function scrollToTop() {

client/src/components/Workflow/List/WorkflowIndicators.vue

@@ -17,6 +17,7 @@ library.add(faFileImport, faGlobe, faShieldAlt, faUsers, faUser);
 interface Props {
     workflow: any;
     publishedView: boolean;
+    noEditTime?: boolean;
 }
 
 const props = defineProps<Props>();
@@ -118,7 +119,7 @@ function onViewUserPublished() {
             <FontAwesomeIcon :icon="faFileImport" fixed-width @click="onCopyLink" />
         </BButton>
 
-        <span class="mr-1">
+        <span v-if="!noEditTime" class="mr-1">
             <small>
                 edited
                 <UtcDate :date="workflow.update_time" mode="elapsed" />
@@ -136,8 +137,9 @@ function onViewUserPublished() {
         </BBadge>
 
         <BBadge
-            v-if="publishedView"
+            v-if="publishedView && workflow.published"
             v-b-tooltip.noninteractive.hover
+            data-description="published owner badge"
             class="outline-badge cursor-pointer mx-1"
             :title="publishedTitle"
             @click="onViewUserPublished">

client/src/components/Workflow/Run/WorkflowRunFormSimple.vue

@@ -1,56 +1,59 @@
 <template>
     <div>
-        <div v-if="isConfigLoaded" class="h4 clearfix mb-3">
+        <div v-if="isConfigLoaded">
             <BAlert v-if="!canRunOnHistory" variant="warning" show>
                 <span v-localize>
                     The workflow cannot run because the current history is immutable. Please select a different history
                     or send the results to a new one using the run settings ⚙️
                 </span>
             </BAlert>
-            <b>Workflow: {{ model.name }}</b> <i>(version: {{ model.runData.version + 1 }})</i>
-            <ButtonSpinner
-                id="run-workflow"
-                :wait="waitingForRequest"
-                :disabled="hasValidationErrors || !canRunOnHistory"
-                class="float-right"
-                title="Run Workflow"
-                @onClick="onExecute" />
-            <b-dropdown
-                v-if="showRuntimeSettings(currentUser)"
-                id="dropdown-form"
-                ref="dropdown"
-                class="workflow-run-settings float-right"
-                style="margin-right: 10px"
-                title="Workflow Run Settings"
-                no-caret>
-                <template v-slot:button-content>
-                    <span class="fa fa-cog" />
+            <WorkflowNavigationTitle
+                :workflow-id="model.runData.workflow_id"
+                :run-disabled="hasValidationErrors || !canRunOnHistory"
+                :run-waiting="waitingForRequest"
+                @on-execute="onExecute">
+                <template v-slot:workflow-run-actions>
+                    <b-dropdown
+                        v-if="showRuntimeSettings(currentUser)"
+                        id="dropdown-form"
+                        ref="dropdown"
+                        class="workflow-run-settings"
+                        title="Workflow Run Settings"
+                        size="sm"
+                        variant="link"
+                        no-caret>
+                        <template v-slot:button-content>
+                            <span class="fa fa-cog" />
+                        </template>
+                        <b-dropdown-form>
+                            <b-form-checkbox v-model="sendToNewHistory" class="workflow-run-settings-target">
+                                Send results to a new history
+                            </b-form-checkbox>
+                            <b-form-checkbox
+                                v-if="reuseAllowed(currentUser)"
+                                v-model="useCachedJobs"
+                                title="This may skip executing jobs that you have already run.">
+                                Attempt to re-use jobs with identical parameters?
+                            </b-form-checkbox>
+                            <b-form-checkbox
+                                v-if="isConfigLoaded && config.object_store_allows_id_selection"
+                                v-model="splitObjectStore">
+                                Send outputs and intermediate to different storage locations?
+                            </b-form-checkbox>
+                            <WorkflowStorageConfiguration
+                                v-if="isConfigLoaded && config.object_store_allows_id_selection"
+                                :split-object-store="splitObjectStore"
+                                :invocation-preferred-object-store-id="preferredObjectStoreId"
+                                :invocation-intermediate-preferred-object-store-id="preferredIntermediateObjectStoreId"
+                                @updated="onStorageUpdate">
+                            </WorkflowStorageConfiguration>
+                        </b-dropdown-form>
+                    </b-dropdown>
                 </template>
-                <b-dropdown-form>
-                    <b-form-checkbox v-model="sendToNewHistory" class="workflow-run-settings-target">
-                        Send results to a new history
-                    </b-form-checkbox>
-                    <b-form-checkbox
-                        v-if="reuseAllowed(currentUser)"
-                        v-model="useCachedJobs"
-                        title="This may skip executing jobs that you have already run.">
-                        Attempt to re-use jobs with identical parameters?
-                    </b-form-checkbox>
-                    <b-form-checkbox
-                        v-if="isConfigLoaded && config.object_store_allows_id_selection"
-                        v-model="splitObjectStore">
-                        Send outputs and intermediate to different storage locations?
-                    </b-form-checkbox>
-                    <WorkflowStorageConfiguration
-                        v-if="isConfigLoaded && config.object_store_allows_id_selection"
-                        :split-object-store="splitObjectStore"
-                        :invocation-preferred-object-store-id="preferredObjectStoreId"
-                        :invocation-intermediate-preferred-object-store-id="preferredIntermediateObjectStoreId"
-                        @updated="onStorageUpdate">
-                    </WorkflowStorageConfiguration>
-                </b-dropdown-form>
-            </b-dropdown>
+            </WorkflowNavigationTitle>
         </div>
+
+        <WorkflowAnnotation :workflow-id="model.runData.workflow_id" :history-id="model.historyId" show-details />
         <FormDisplay
             :inputs="formInputs"
             :allow-empty-value-on-required-input="true"
@@ -62,7 +65,6 @@
 </template>
 
 <script>
-import ButtonSpinner from "components/Common/ButtonSpinner";
 import FormDisplay from "components/Form/FormDisplay";
 import { allowCachedJobs } from "components/Tool/utilities";
 import { isWorkflowInput } from "components/Workflow/constants";
@@ -76,10 +78,14 @@ import { useUserStore } from "@/stores/userStore";
 import { invokeWorkflow } from "./services";
 import WorkflowStorageConfiguration from "./WorkflowStorageConfiguration";
 
+import WorkflowAnnotation from "../../Workflow/WorkflowAnnotation.vue";
+import WorkflowNavigationTitle from "../WorkflowNavigationTitle.vue";
+
 export default {
     components: {
-        ButtonSpinner,
         FormDisplay,
+        WorkflowAnnotation,
+        WorkflowNavigationTitle,
         WorkflowStorageConfiguration,
     },
     props: {

client/src/components/Workflow/Run/WorkflowRunSuccess.vue

@@ -33,7 +33,7 @@ const targetHistories = props.invocations.reduce((histories, invocation) => {
 }, [] as string[]);
 const wasNewHistoryTarget =
     props.invocations.length > 0 &&
-    props.invocations[0]?.history_id &&
+    !!props.invocations[0]?.history_id &&
     historyStore.currentHistoryId !== props.invocations[0].history_id;
 </script>
 
@@ -51,7 +51,7 @@ const wasNewHistoryTarget =
         <WorkflowInvocationState
             v-else-if="props.invocations.length === 1 && props.invocations[0]"
             :invocation-id="props.invocations[0].id"
-            :new-history-target="wasNewHistoryTarget ? props.invocations[0].history_id : undefined"
+            :new-history-target="wasNewHistoryTarget"
             is-full-page
             success />
         <div id="webhook-view"></div>