Simple Wizard for running UDPs without URL manipulation

Open-EO · Nov 2, 2023 · 754752a · 754752a
1 parent b9e348d
commit 754752a
Show file tree

Hide file tree

Showing 3 changed files with 135 additions and 25 deletions.
diff --git a/src/components/modals/WizardModal.vue b/src/components/modals/WizardModal.vue
@@ -81,17 +81,16 @@ export default {
 			show: true,
 			selected: null,
 			usecases: [
-				{
-					component: 'UDP',
-					title: () => typeof this.options.process === 'string' ? this.options.process.replace(/@.+/, '') : 'Run UDP',
-					description: 'Executes a user-defined process',
-					hide: true
-				},
 				{
 					component: 'Download',
 					title: 'Download Data',
 					description: 'Just download a small portion of data.'
 				},
+				{
+					component: 'UDP',
+					title: () => typeof this.options.process === 'string' ? this.options.process.replace(/@.+/, '') : 'Run UDP',
+					description: 'Executes a user-defined process'
+				},
 				...(Config.supportedWizards || []) // ToDo: only show usecases that are supported based on processes (requiredProcesses)
 			],
 			activeTabIndex: 0,

diff --git a/src/components/wizards/UDP.vue b/src/components/wizards/UDP.vue
@@ -1,11 +1,14 @@
 <template>
 	<div class="wizard-tab-content">
-		<WizardTab :pos="0" :parent="parent" title="Parameters" :beforeChange="checkRequirements">
+		<WizardTab v-if="!noProcessSelection" :pos="tabPos[0]" :parent="parent" title="Process" :beforeChange="checkProcessRequirements">
+			<ChooseUserDefinedProcess :value="process" :namespace="processNamespace" @input="submitProcess" />
+		</WizardTab>
+		<WizardTab :pos="tabPos[1]" :parent="parent" title="Parameters" :beforeChange="checkParameterRequirements">
 			<ChooseProcessParameters v-if="processSpec" v-model="args" :process="processSpec" />
 			<p class="center" v-else-if="loading"><i class="fas fa-spinner fa-spin"></i> Loading process...</p>
 			<p v-else>Process not available.</p>
 		</WizardTab>
-		<WizardTab :pos="1" :parent="parent" title="Finish">
+		<WizardTab :pos="tabPos[2]" :parent="parent" title="Finish">
 			<ChooseProcessingMode v-model="mode" :title.sync="jobTitle" />
 		</WizardTab>
 	</div>
@@ -14,6 +17,7 @@
 <script>
 import ChooseProcessingMode from './tabs/ChooseProcessingMode.vue';
 import ChooseProcessParameters from './tabs/ChooseProcessParameters.vue';
+import ChooseUserDefinedProcess from './tabs/ChooseUserDefinedProcess.vue';
 import WizardMixin from './WizardMixin';
 import Utils from '../../utils';
 import { ProcessGraph } from '@openeo/js-processgraphs';
@@ -24,21 +28,32 @@ export default {
 		WizardMixin
 	],
 	components: {
+		ChooseUserDefinedProcess,
 		ChooseProcessingMode,
 		ChooseProcessParameters
 	},
 	data() {
 		return {
-			loading: true,
+			loading: false,
+			noProcessSelection: false,
 			process: null,
 			processSpec: null,
+			processNamespace: 'user',
 			args: {},
 			jobTitle: "",
 			mode: "",
 		};
 	},
 	computed: {
 		...Utils.mapGetters(['processes']),
+		tabPos() {
+			if (this.noProcessSelection) {
+				return [null, 0, 1];
+			}
+			else {
+				return [0, 1, 2];
+			}
+		},
 		graph() {
 			if (!this.process || !this.processSpec) {
 				return null;
@@ -58,27 +73,47 @@ export default {
 		}
 	},
 	async beforeMount() {
-		this.loading = true;
-		if (typeof this.process !== 'string' || this.process.length === 0) {
-			this.$emit('close', `Sorry, no process specified.`);
-			return;
-		}
-		let [id, namespace] = Utils.extractUDPParams(this.process);
-		try {
-			this.processSpec = await this.loadProcess({id, namespace});
-			if (this.processSpec) {
-				this.jobTitle = this.processSpec.id;
+		if (typeof this.process === 'string' && this.process.length > 0) {
+			const [id, ns] = Utils.extractUDPParams(this.process);
+			this.noProcessSelection = true;
+			this.process = id;
+			if (ns) {
+				this.processNamespace = ns;
+			}
+			let loaded = await this.checkProcessRequirements();
+			if (!loaded) {
+				this.$emit('close', `Sorry, the wizard can't load the requested process.`);
 			}
-		} catch (error) {
-			console.warn(error);
-			this.$emit('close', `Sorry, the wizard can't load the requested process.`);
-		} finally {
-			this.loading = false;
 		}
 	},
 	methods: {
 		...Utils.mapActions(['loadProcess']),
-		checkRequirements() {
+		submitProcess(item) {
+			this.process = item.id;
+			if (item.namespace) {
+				this.processNamespace = item.namespace;
+			}
+			this.parent.nextTab();
+		},
+		async checkProcessRequirements() {
+			this.loading = true;
+			try {
+				this.processSpec = await this.loadProcess({
+					id: this.process,
+					namespace: this.processNamespace
+				});
+				this.loading = false;
+				if (this.processSpec) {
+					this.jobTitle = this.processSpec.id;
+				}
+				return true;
+			} catch (error) {
+				this.loading = false;
+				console.warn(error);
+				return false;
+			}
+		},
+		checkParameterRequirements() {
 			if (this.graph) {
 				var pg = new ProcessGraph(this.graph, this.processes);
 				return pg.validate();

diff --git a/src/components/wizards/tabs/ChooseUserDefinedProcess.vue b/src/components/wizards/tabs/ChooseUserDefinedProcess.vue
@@ -0,0 +1,76 @@
+<template>
+	<div class="step choose-process">
+		<p>Please select the user-defined process to execute.</p>
+		<Processes heading="" :processes="filteredProcesses" :offerDetails="false">
+			<template #summary="{ item }">
+				<div :class="{element: true, selected: item.id == value}">
+					<div class="summary" @click="update(item)">
+						<strong :title="item.id">{{ item.id }}</strong>
+						<small v-if="item.title" :title="item.title">{{ item.title }}</small>
+					</div>
+					<button class="button" type="button" @click="showProcess(item)" title="Show process details"><i class="fas fa-info"></i></button>
+				</div>
+			</template>
+		</Processes>
+	</div>
+</template>
+
+<script>
+import Processes from '@openeo/vue-components/components/Processes.vue';
+import Utils from '../../../utils';
+import EventBusMixin from '../../EventBusMixin';
+
+export default {
+	name: 'ChooseUserDefinedProcess',
+	mixins: [
+		EventBusMixin
+	],
+	components: {
+		Processes
+	},
+	props: {
+		value: {
+			type: String,
+			default: null
+		},
+		namespace: {
+			type: String,
+			default: 'user'
+		}
+	},
+	computed: {
+		...Utils.mapGetters(['processes']),
+		filteredProcesses() {
+			return this.processes.namespace(this.namespace);
+		}
+	},
+	methods: {
+		...Utils.mapActions(['describeUserProcess']),
+		async update(id) {
+			this.$emit('input', id);
+		},
+		showProcess(item) {
+			this.broadcast('showProcess', item);
+		}
+	}
+}
+</script>
+
+<style lang="scss">
+.choose-process {
+	.vue-component.searchable-list ul.list > li {
+		margin-bottom: 0;
+
+		> summary {
+			margin: 0;
+			line-height: inherit;
+
+			&:before {
+				content: '';
+				margin-left: 0;
+				float: none;
+			}
+		}
+	}
+}
+</style>