Allow to specify a URL in the UDP wizard

Author: m-mohr

src/components/modals/ImportProcessModal.vue

@@ -108,8 +108,11 @@ export default {
 			if (!Utils.isObject(data)) {
 				throw new Error('Process does not contain any data');
 			}
-			if (typeof data.id !== 'string' && !Utils.isObject(data.process_graph)) {
-				throw new Error('Process does not contain `id` or `process graph`');
+			if (!Utils.hasText(data.id)) {
+				throw new Error('Process does not contain an id');
+			}
+			if (!Utils.isObject(data.process_graph)) {
+				throw new Error('Process does not contain a process graph');
 			}
 			return data;
 		},

src/components/modals/WizardModal.vue

@@ -1,5 +1,5 @@
 <template>
-	<Modal id="WizardModal" :show="show" :width="width" :title="title" @closed="$emit('closed')">
+	<Modal id="WizardModal" :show="show" :width="width" :title="title" :submitFunction="nextTab" @closed="$emit('closed')">
 		<template #default>
 			<div v-if="selected" class="wizard">
 				<div class="wizard-navigation">

src/components/wizards/UDP.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="wizard-tab-content">
 		<WizardTab v-if="!noProcessSelection" :pos="tabPos[0]" :parent="parent" title="Process" :beforeChange="checkProcessRequirements">
-			<ChooseUserDefinedProcess :value="process" :namespace="processNamespace" @input="submitProcess" />
+			<ChooseUserDefinedProcess :value="process" :namespace="processNamespace" :url="processUrl" @input="submitProcess" />
 		</WizardTab>
 		<WizardTab :pos="tabPos[1]" :parent="parent" title="Parameters" :beforeChange="checkParameterRequirements">
 			<ChooseProcessParameters v-if="processSpec" v-model="args" :process="processSpec" />
@@ -37,6 +37,7 @@ export default {
 			loading: false,
 			noProcessSelection: false,
 			process: null,
+			processUrl: null,
 			processSpec: null,
 			processNamespace: 'user',
 			args: {},
@@ -58,16 +59,20 @@ export default {
 			if (!this.process || !this.processSpec) {
 				return null;
 			}
-			let [id, namespace] = Utils.extractUDPParams(this.process);
+			let node = {
+				process_id: this.process,
+				arguments: this.args,
+				result: true
+			};
+			if (Utils.hasText(this.processNamespace)) {
+				node.namespace = this.processNamespace;
+			}
+			if (Utils.hasText(this.processSpec.summary)) {
+				node.description = this.processSpec.summary;
+			}
 			return {
 				process_graph: {
-					[id]: {
-						process_id: id,
-						namespace,
-						description: this.processSpec.summary,
-						arguments: this.args,
-						result: true
-					}
+					[this.process]: node
 				}
 			};
 		}
@@ -88,30 +93,70 @@ export default {
 	},
 	methods: {
 		...Utils.mapActions(['loadProcess']),
-		submitProcess(item) {
-			this.process = item.id;
-			if (item.namespace) {
-				this.processNamespace = item.namespace;
+		submitProcess(item, isUrl = false) {
+			if (isUrl) {
+				this.processUrl = item;
+			}
+			else {
+				this.process = item.id;
+				if (item.namespace) {
+					this.processNamespace = item.namespace;
+				}
+				this.parent.nextTab();
 			}
-			this.parent.nextTab();
+		},
+		async loadFromUrl(url) {
+			if (!Utils.isUrl(url)) {
+				throw new Error('Please provide a valid URL!');
+			}
+			let data;
+			try {
+				const response = await axios(url);
+				data = response.data;
+			} catch(error) {
+				throw new Error('Failed to load process from the given URL');
+			}
+			if (typeof data === 'string') {
+				try {
+					data = JSON.parse(data);
+				} catch(error) {
+					throw new Error('Process is not valid JSON');
+				}
+			}
+			if (!Utils.isObject(data)) {
+				throw new Error('Process does not contain any data');
+			}
+			if (!Utils.hasText(data.id)) {
+				throw new Error('Process does not contain an id');
+			}
+			if (!Utils.isObject(data.process_graph)) {
+				throw new Error('Process does not contain a process graph');
+			}
+			return data;
 		},
 		async checkProcessRequirements() {
 			this.loading = true;
-			try {
+			if (this.processUrl) {
+				const process = await this.loadFromUrl(this.processUrl);
+				this.processes.add(process, this.processUrl);
+				this.processNamespace = this.processUrl;
+				this.process = process.id;
+				this.processSpec = process;
+			}
+			else if (this.process) {
 				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;
 			}
+			else {
+				throw new Error('Please select a user-defined process');
+			}
+			this.loading = false;
+			if (this.processSpec) {
+				this.jobTitle = this.processSpec.id;
+			}
+			return true;
 		},
 		checkParameterRequirements() {
 			if (this.graph) {

src/components/wizards/tabs/ChooseUserDefinedProcess.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="step choose-process">
-		<p>Please select the user-defined process to execute.</p>
+		<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}">
@@ -12,6 +12,9 @@
 				</div>
 			</template>
 		</Processes>
+		<hr />
+		<p>Alternatively, provide a URL to a user-defined process:</p>
+		<input type="url" name="url" class="url" :value="url" @blur="updateUrl" />
 	</div>
 </template>
 
@@ -36,6 +39,10 @@ export default {
 		namespace: {
 			type: String,
 			default: 'user'
+		},
+		url: {
+			type: String,
+			default: null
 		}
 	},
 	computed: {
@@ -46,9 +53,21 @@ export default {
 	},
 	methods: {
 		...Utils.mapActions(['describeUserProcess']),
-		async update(id) {
+		update(id) {
 			this.$emit('input', id);
 		},
+		updateUrl(event) {
+			const url = event.target.value;
+			if (!url) {
+				return;
+			}
+			else if (Utils.isUrl(url)) {
+				this.$emit('input', url, true);
+			}
+			else {
+				throw new Error('The provided URL is not valid.');
+			}
+		},
 		showProcess(item) {
 			this.broadcast('showProcess', item);
 		}
@@ -58,6 +77,11 @@ export default {
 
 <style lang="scss">
 .choose-process {
+	input.url {
+		width: 100%;
+		box-sizing: border-box;
+	}
+
 	.vue-component.searchable-list ul.list > li {
 		margin-bottom: 0;