diff --git a/src/views/workflows/WorkflowVersionView.vue b/src/views/workflows/WorkflowVersionView.vue index b011b2c00e59341eafe964e5d192769452e00b59..2d7b656bf30a80bd9344fe835f202e594acd98a6 100644 --- a/src/views/workflows/WorkflowVersionView.vue +++ b/src/views/workflows/WorkflowVersionView.vue @@ -13,7 +13,7 @@ const props = defineProps<{ const versionState = reactive({ loading: true, - markdownLoading: true, + fileLoading: true, version: undefined, errorLoading: false, descriptionMarkdown: "", @@ -21,7 +21,7 @@ const versionState = reactive({ parameterSchema: {}, } as { loading: boolean; - markdownLoading: boolean; + fileLoading: boolean; version: undefined | WorkflowVersionFull; descriptionMarkdown: string; changelogMarkdown: string; @@ -40,6 +40,7 @@ watch( function updateVersion(versionId: string, workflowId: string) { versionState.loading = true; + versionState.fileLoading = true; WorkflowVersionService.workflowVersionGetWorkflowVersion( versionId, workflowId @@ -61,15 +62,23 @@ onMounted(() => { }); function downloadVersionFiles(version: WorkflowVersionFull) { - axios.get(version.readme_url).then((response) => { + const descriptionPromise = axios.get(version.readme_url).then((response) => { versionState.descriptionMarkdown = response.data; }); - axios.get(version.changelog_url).then((response) => { + const changelogPromise = axios.get(version.changelog_url).then((response) => { versionState.changelogMarkdown = response.data; }); - axios.get(version.parameter_schema_url).then((response) => { - versionState.parameterSchema = response.data; - }); + const parameterPromise = axios + .get(version.parameter_schema_url) + .then((response) => { + versionState.parameterSchema = response.data; + }); + Promise.all([descriptionPromise, changelogPromise, parameterPromise]).finally( + () => { + versionState.fileLoading = false; + console.log("All loaded"); + } + ); } </script> @@ -79,7 +88,7 @@ function downloadVersionFiles(version: WorkflowVersionFull) { <router-link class="nav-link" aria-current="page" - :to="{ path: '#', query: { tab: 'description' } }" + :to="{ query: { tab: 'description' } }" :class="{ active: props.activeTab === 'description' }" >Description </router-link> @@ -87,7 +96,7 @@ function downloadVersionFiles(version: WorkflowVersionFull) { <li class="nav-item"> <router-link class="nav-link" - :to="{ path: '#', query: { tab: 'parameters' } }" + :to="{ query: { tab: 'parameters' } }" :class="{ active: props.activeTab === 'parameters' }" >Parameters </router-link> @@ -95,7 +104,7 @@ function downloadVersionFiles(version: WorkflowVersionFull) { <li class="nav-item"> <router-link class="nav-link" - :to="{ path: '#', query: { tab: 'changes' } }" + :to="{ query: { tab: 'changes' } }" :class="{ active: props.activeTab === 'changes' }" >Releases </router-link> diff --git a/src/views/workflows/WorkflowView.vue b/src/views/workflows/WorkflowView.vue index 687882f8d703a3c23443cb6fca098a0620273715..608221e689919bcd66449ed719bd7f42541b4b89 100644 --- a/src/views/workflows/WorkflowView.vue +++ b/src/views/workflows/WorkflowView.vue @@ -1,5 +1,6 @@ <script setup lang="ts"> -import { onMounted, reactive, watch } from "vue"; +import { computed, onMounted, reactive, watch } from "vue"; +import type { ComputedRef } from "vue"; import type { WorkflowOut } from "@/client/workflow"; import { WorkflowService } from "@/client/workflow"; import { useRoute, useRouter } from "vue-router"; @@ -60,6 +61,14 @@ function updateWorkflow(workflowId: string) { }); } +const activeVersionString: ComputedRef<string> = computed(() => { + return ( + workflowState.workflow?.versions.find( + (w) => w.git_commit_hash === workflowState.activeVersionId + )?.version ?? "" + ); +}); + onMounted(() => { updateWorkflow(props.workflowId); }); @@ -67,32 +76,49 @@ onMounted(() => { <template> <div v-if="workflowState.workflow != null"> - <h1>{{ workflowState.workflow.name }}</h1> - <p class="fs-4">{{ workflowState.workflow.short_description }}</p> - <div class="input-group w-fit mb-3"> - <span class="input-group-text pe-2 ps-2" id="workflows-search-wrapping" - ><bootstrap-icon icon="tags-fill" class="text-secondary" - /></span> - <select - class="form-select form-select-sm" - aria-label="Workflow version selection" - aria-describedby="workflows-search-wrapping" - v-model="workflowState.activeVersionId" - > - <option - v-for="(version, index) in [ - ...workflowState.workflow.versions, - ].reverse()" - :key="version.git_commit_hash" - :value="version.git_commit_hash" - :selected="index === 1" + <h1 class="fs-0">{{ workflowState.workflow.name }}</h1> + <p class="fs-4 mb-5 mt-3">{{ workflowState.workflow.short_description }}</p> + <div class="row align-items-center"> + <a role="button" class="btn btn-success btn-lg w-fit mx-auto" href="#"> + <bootstrap-icon icon="rocket-takeoff-fill" class="me-2" /> + <span class="align-middle">Launch {{ activeVersionString }}</span> + </a> + <div class="input-group w-fit position-absolute end-0"> + <span class="input-group-text px-2" id="workflow-version-wrapping" + ><bootstrap-icon icon="tags-fill" class="text-secondary" + /></span> + <select + class="form-select form-select-sm" + aria-label="Workflow version selection" + aria-describedby="workflow-version-wrapping" + v-model="workflowState.activeVersionId" > - {{ version.version }} - </option> - </select> + <option + v-for="version in [...workflowState.workflow.versions].reverse()" + :key="version.git_commit_hash" + :value="version.git_commit_hash" + > + {{ version.version }} + </option> + </select> + </div> + </div> + <div class="row w-100 mb-4 mt-2 mx-0"> + <a + :href="workflowState.workflow.repository_url" + target="_blank" + class="text-secondary text-decoration-none mx-auto w-fit p-0" + ><bootstrap-icon icon="git" class="me-1" /><span class="align-middle"> + {{ workflowState.workflow.repository_url }}</span + ></a + > </div> <router-view /> </div> </template> -<style scoped></style> +<style scoped> +.fs-0 { + font-size: 4em; +} +</style>