forked from galaxyproject/galaxy
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
move progress bars to header, shorten
WorkflowRunSuccess
- The progress bars are in `WorkflowInvocationHeader` now, giving more space to the step header being visible below the graph - `WorkflowRunSuccess` is a one line header (refactored), and it uses `GridInvocation` to show batch invocations.
- Loading branch information
1 parent
0841ef9
commit 642b3a6
Showing
6 changed files
with
353 additions
and
299 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| import { faEye } from "@fortawesome/free-solid-svg-icons"; | ||
|
|
||
| import { type WorkflowInvocation } from "@/api/invocations"; | ||
| import { getAppRoot } from "@/onload"; | ||
|
|
||
| import { type FieldArray, type GridConfig } from "./types"; | ||
|
|
||
| /** | ||
| * Request and return invocations for the given workflow (and current user) from server | ||
| */ | ||
| async function getData( | ||
| offset: number, | ||
| limit: number, | ||
| search: string, | ||
| sort_by: string, | ||
| sort_desc: boolean, | ||
| extraProps?: Record<string, unknown> | ||
| ) { | ||
| // extra props will be Record<string, Invocation>; get array of invocations | ||
| const data = Object.values(extraProps ?? {}) as WorkflowInvocation[]; | ||
| const totalMatches = data.length; | ||
| return [data, totalMatches]; | ||
| } | ||
|
|
||
| /** | ||
| * Declare columns to be displayed | ||
| */ | ||
| const fields: FieldArray = [ | ||
| { | ||
| key: "expand", | ||
| title: null, | ||
| type: "expand", | ||
| }, | ||
| { | ||
| key: "view", | ||
| title: "View", | ||
| type: "button", | ||
| icon: faEye, | ||
| handler: (data) => { | ||
| const url = `${getAppRoot()}workflows/invocations/${(data as WorkflowInvocation).id}`; | ||
| window.open(url, "_blank"); | ||
| }, | ||
| converter: () => "", | ||
| }, | ||
| { | ||
| key: "history_id", | ||
| title: "History", | ||
| type: "history", | ||
| }, | ||
| { | ||
| key: "create_time", | ||
| title: "Invoked", | ||
| type: "date", | ||
| }, | ||
| { | ||
| key: "state", | ||
| title: "State", | ||
| type: "helptext", | ||
| converter: (data) => { | ||
| const invocation = data as WorkflowInvocation; | ||
| return `galaxy.invocations.states.${invocation.state}`; | ||
| }, | ||
| }, | ||
| ]; | ||
|
|
||
| /** | ||
| * Grid configuration | ||
| */ | ||
| const gridConfig: GridConfig = { | ||
| id: "invocations-batch-grid", | ||
| fields: fields, | ||
| getData: getData, | ||
| plural: "Workflow Invocations", | ||
| sortBy: "create_time", | ||
| sortDesc: true, | ||
| sortKeys: [], | ||
| title: "Workflow Invocations in Batch", | ||
| }; | ||
|
|
||
| export default gridConfig; |
141 changes: 49 additions & 92 deletions
141
client/src/components/Workflow/Run/WorkflowRunSuccess.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,102 +1,59 @@ | ||
| <script setup lang="ts"> | ||
| import { onMounted } from "vue"; | ||
| import type { WorkflowInvocation } from "@/api/invocations"; | ||
| import { useHistoryStore } from "@/stores/historyStore"; | ||
| import { refreshContentsWrapper } from "@/utils/data"; | ||
| import Webhooks from "@/utils/webhooks"; | ||
| import GridInvocation from "@/components/Grid/GridInvocation.vue"; | ||
| import WorkflowInvocationState from "@/components/WorkflowInvocationState/WorkflowInvocationState.vue"; | ||
| const props = defineProps<{ | ||
| workflowName: string; | ||
| invocations: WorkflowInvocation[]; | ||
| }>(); | ||
| onMounted(() => { | ||
| new Webhooks.WebhookView({ | ||
| type: "workflow", | ||
| toolId: null, | ||
| toolVersion: null, | ||
| }); | ||
| refreshContentsWrapper(); | ||
| }); | ||
| const historyStore = useHistoryStore(); | ||
| const targetHistories = props.invocations.reduce((histories, invocation) => { | ||
| if (invocation.history_id && !histories.includes(invocation.history_id)) { | ||
| histories.push(invocation.history_id); | ||
| } | ||
| return histories; | ||
| }, [] as string[]); | ||
| const wasNewHistoryTarget = | ||
| props.invocations.length > 0 && | ||
| props.invocations[0]?.history_id && | ||
| historyStore.currentHistoryId !== props.invocations[0].history_id; | ||
| </script> | ||
|
|
||
| <template> | ||
| <div> | ||
| <div class="donemessagelarge"> | ||
| <p> | ||
| Successfully invoked workflow <b>{{ workflowName }}</b> | ||
| <em v-if="multipleInvocations"> - {{ timesExecuted }} times</em>. | ||
| </p> | ||
|
|
||
| <p v-if="multipleHistoryTargets"> | ||
| Successfully invoked workflow <b>{{ props.workflowName }}</b> | ||
| <em v-if="props.invocations.length > 1"> - {{ props.invocations.length }} times</em>. | ||
| <span v-if="targetHistories.length > 1"> | ||
| This workflow will generate results in multiple histories. You can observe progress in the | ||
| <router-link to="/histories/view_multiple">history multi-view</router-link>. | ||
| </p> | ||
| <p v-else-if="wasNewHistoryTarget"> | ||
| This workflow will generate results in a new history. | ||
| <a class="workflow-new-history-target-link" href="javascript:void(0)" @click="switchHistory" | ||
| >Switch to that history now</a | ||
| >. | ||
| </p> | ||
| <p v-else>You can check the status of queued jobs and view the resulting data the History panel.</p> | ||
| <p> | ||
| View all of your workflow invocations in the | ||
| <router-link to="/workflows/invocations">Invocations List</router-link>. | ||
| </p> | ||
| </span> | ||
| </div> | ||
| <GridInvocation v-if="props.invocations.length > 1" :invocations-list="props.invocations" /> | ||
| <WorkflowInvocationState | ||
| v-for="(invocation, index) in invocations" | ||
| :key="invocation.id" | ||
| :index="index" | ||
| :invocation-id="invocation.id" | ||
| full-page /> | ||
| 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" | ||
| is-full-page | ||
| success /> | ||
| <div id="webhook-view"></div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| import WorkflowInvocationState from "components/WorkflowInvocationState/WorkflowInvocationState"; | ||
| import { getAppRoot } from "onload/loadConfig"; | ||
| import { mapActions, mapState } from "pinia"; | ||
| import { refreshContentsWrapper } from "utils/data"; | ||
| import Webhooks from "utils/webhooks"; | ||
| import { useHistoryStore } from "@/stores/historyStore"; | ||
| export default { | ||
| components: { | ||
| WorkflowInvocationState, | ||
| }, | ||
| props: { | ||
| workflowName: { | ||
| type: String, | ||
| required: true, | ||
| }, | ||
| invocations: { | ||
| type: Array, | ||
| required: true, | ||
| }, | ||
| }, | ||
| computed: { | ||
| ...mapState(useHistoryStore, ["currentHistoryId"]), | ||
| timesExecuted() { | ||
| return this.invocations.length; | ||
| }, | ||
| multipleInvocations() { | ||
| return this.timesExecuted > 1; | ||
| }, | ||
| multipleHistoryTargets() { | ||
| return this.targetHistories.length > 1; | ||
| }, | ||
| targetHistories() { | ||
| return this.invocations.reduce((histories, invocation) => { | ||
| if (invocation.history_id && !histories.includes(invocation.history_id)) { | ||
| histories.push(invocation.history_id); | ||
| } | ||
| return histories; | ||
| }, []); | ||
| }, | ||
| multiHistoryView() { | ||
| return `${getAppRoot()}histories/view_multiple`; | ||
| }, | ||
| wasNewHistoryTarget() { | ||
| if (this.invocations.length < 1) { | ||
| return false; | ||
| } | ||
| return this.invocations[0].history_id && this.currentHistoryId != this.invocations[0].history_id; | ||
| }, | ||
| }, | ||
| mounted() { | ||
| new Webhooks.WebhookView({ | ||
| type: "workflow", | ||
| toolId: null, | ||
| toolVersion: null, | ||
| }); | ||
| refreshContentsWrapper(); | ||
| }, | ||
| methods: { | ||
| ...mapActions(useHistoryStore, ["setCurrentHistory"]), | ||
| async switchHistory() { | ||
| await this.setCurrentHistory(this.invocations[0].history_id); | ||
| }, | ||
| }, | ||
| }; | ||
| </script> |
Oops, something went wrong.