Skip to content

Commit 754752a

Browse files
m-mohrm-mohr
committed
Simple Wizard for running UDPs without URL manipulation
1 parent b9e348d commit 754752a

File tree

3 files changed

+135
-25
lines changed

3 files changed

+135
-25
lines changed

‎src/components/modals/WizardModal.vue

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -81,17 +81,16 @@ export default {
8181
show: true,
8282
selected: null,
8383
usecases: [
84-
{
85-
component: 'UDP',
86-
title: () => typeof this.options.process === 'string' ? this.options.process.replace(/@.+/, '') : 'Run UDP',
87-
description: 'Executes a user-defined process',
88-
hide: true
89-
},
9084
{
9185
component: 'Download',
9286
title: 'Download Data',
9387
description: 'Just download a small portion of data.'
9488
},
89+
{
90+
component: 'UDP',
91+
title: () => typeof this.options.process === 'string' ? this.options.process.replace(/@.+/, '') : 'Run UDP',
92+
description: 'Executes a user-defined process'
93+
},
9594
...(Config.supportedWizards || []) // ToDo: only show usecases that are supported based on processes (requiredProcesses)
9695
],
9796
activeTabIndex: 0,

‎src/components/wizards/UDP.vue

Lines changed: 54 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
11
<template>
22
<div class="wizard-tab-content">
3-
<WizardTab :pos="0" :parent="parent" title="Parameters" :beforeChange="checkRequirements">
3+
<WizardTab v-if="!noProcessSelection" :pos="tabPos[0]" :parent="parent" title="Process" :beforeChange="checkProcessRequirements">
4+
<ChooseUserDefinedProcess :value="process" :namespace="processNamespace" @input="submitProcess" />
5+
</WizardTab>
6+
<WizardTab :pos="tabPos[1]" :parent="parent" title="Parameters" :beforeChange="checkParameterRequirements">
47
<ChooseProcessParameters v-if="processSpec" v-model="args" :process="processSpec" />
58
<p class="center" v-else-if="loading"><i class="fas fa-spinner fa-spin"></i> Loading process...</p>
69
<p v-else>Process not available.</p>
710
</WizardTab>
8-
<WizardTab :pos="1" :parent="parent" title="Finish">
11+
<WizardTab :pos="tabPos[2]" :parent="parent" title="Finish">
912
<ChooseProcessingMode v-model="mode" :title.sync="jobTitle" />
1013
</WizardTab>
1114
</div>
@@ -14,6 +17,7 @@
1417
<script>
1518
import ChooseProcessingMode from './tabs/ChooseProcessingMode.vue';
1619
import ChooseProcessParameters from './tabs/ChooseProcessParameters.vue';
20+
import ChooseUserDefinedProcess from './tabs/ChooseUserDefinedProcess.vue';
1721
import WizardMixin from './WizardMixin';
1822
import Utils from '../../utils';
1923
import { ProcessGraph } from '@openeo/js-processgraphs';
@@ -24,21 +28,32 @@ export default {
2428
WizardMixin
2529
],
2630
components: {
31+
ChooseUserDefinedProcess,
2732
ChooseProcessingMode,
2833
ChooseProcessParameters
2934
},
3035
data() {
3136
return {
32-
loading: true,
37+
loading: false,
38+
noProcessSelection: false,
3339
process: null,
3440
processSpec: null,
41+
processNamespace: 'user',
3542
args: {},
3643
jobTitle: "",
3744
mode: "",
3845
};
3946
},
4047
computed: {
4148
...Utils.mapGetters(['processes']),
49+
tabPos() {
50+
if (this.noProcessSelection) {
51+
return [null, 0, 1];
52+
}
53+
else {
54+
return [0, 1, 2];
55+
}
56+
},
4257
graph() {
4358
if (!this.process || !this.processSpec) {
4459
return null;
@@ -58,27 +73,47 @@ export default {
5873
}
5974
},
6075
async beforeMount() {
61-
this.loading = true;
62-
if (typeof this.process !== 'string' || this.process.length === 0) {
63-
this.$emit('close', `Sorry, no process specified.`);
64-
return;
65-
}
66-
let [id, namespace] = Utils.extractUDPParams(this.process);
67-
try {
68-
this.processSpec = await this.loadProcess({id, namespace});
69-
if (this.processSpec) {
70-
this.jobTitle = this.processSpec.id;
76+
if (typeof this.process === 'string' && this.process.length > 0) {
77+
const [id, ns] = Utils.extractUDPParams(this.process);
78+
this.noProcessSelection = true;
79+
this.process = id;
80+
if (ns) {
81+
this.processNamespace = ns;
82+
}
83+
let loaded = await this.checkProcessRequirements();
84+
if (!loaded) {
85+
this.$emit('close', `Sorry, the wizard can't load the requested process.`);
7186
}
72-
} catch (error) {
73-
console.warn(error);
74-
this.$emit('close', `Sorry, the wizard can't load the requested process.`);
75-
} finally {
76-
this.loading = false;
7787
}
7888
},
7989
methods: {
8090
...Utils.mapActions(['loadProcess']),
81-
checkRequirements() {
91+
submitProcess(item) {
92+
this.process = item.id;
93+
if (item.namespace) {
94+
this.processNamespace = item.namespace;
95+
}
96+
this.parent.nextTab();
97+
},
98+
async checkProcessRequirements() {
99+
this.loading = true;
100+
try {
101+
this.processSpec = await this.loadProcess({
102+
id: this.process,
103+
namespace: this.processNamespace
104+
});
105+
this.loading = false;
106+
if (this.processSpec) {
107+
this.jobTitle = this.processSpec.id;
108+
}
109+
return true;
110+
} catch (error) {
111+
this.loading = false;
112+
console.warn(error);
113+
return false;
114+
}
115+
},
116+
checkParameterRequirements() {
82117
if (this.graph) {
83118
var pg = new ProcessGraph(this.graph, this.processes);
84119
return pg.validate();

‎src/components/wizards/tabs/ChooseUserDefinedProcess.vue

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<template>
2+
<div class="step choose-process">
3+
<p>Please select the user-defined process to execute.</p>
4+
<Processes heading="" :processes="filteredProcesses" :offerDetails="false">
5+
<template #summary="{ item }">
6+
<div :class="{element: true, selected: item.id == value}">
7+
<div class="summary" @click="update(item)">
8+
<strong :title="item.id">{{ item.id }}</strong>
9+
<small v-if="item.title" :title="item.title">{{ item.title }}</small>
10+
</div>
11+
<button class="button" type="button" @click="showProcess(item)" title="Show process details"><i class="fas fa-info"></i></button>
12+
</div>
13+
</template>
14+
</Processes>
15+
</div>
16+
</template>
17+
18+
<script>
19+
import Processes from '@openeo/vue-components/components/Processes.vue';
20+
import Utils from '../../../utils';
21+
import EventBusMixin from '../../EventBusMixin';
22+
23+
export default {
24+
name: 'ChooseUserDefinedProcess',
25+
mixins: [
26+
EventBusMixin
27+
],
28+
components: {
29+
Processes
30+
},
31+
props: {
32+
value: {
33+
type: String,
34+
default: null
35+
},
36+
namespace: {
37+
type: String,
38+
default: 'user'
39+
}
40+
},
41+
computed: {
42+
...Utils.mapGetters(['processes']),
43+
filteredProcesses() {
44+
return this.processes.namespace(this.namespace);
45+
}
46+
},
47+
methods: {
48+
...Utils.mapActions(['describeUserProcess']),
49+
async update(id) {
50+
this.$emit('input', id);
51+
},
52+
showProcess(item) {
53+
this.broadcast('showProcess', item);
54+
}
55+
}
56+
}
57+
</script>
58+
59+
<style lang="scss">
60+
.choose-process {
61+
.vue-component.searchable-list ul.list > li {
62+
margin-bottom: 0;
63+
64+
> summary {
65+
margin: 0;
66+
line-height: inherit;
67+
68+
&:before {
69+
content: '';
70+
margin-left: 0;
71+
float: none;
72+
}
73+
}
74+
}
75+
}
76+
</style>

0 commit comments

Comments
 (0)