You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@airavata.apache.org by ma...@apache.org on 2021/07/01 17:03:04 UTC
[airavata-django-portal] branch develop updated (3c3d1f7 -> 176ce2b)
This is an automated email from the ASF dual-hosted git repository.
machristie pushed a change to branch develop
in repository https://gitbox.apache.org/repos/asf/airavata-django-portal.git.
from 3c3d1f7 favicon support
new 4392395 AIRAVATA-3453 Adding Save and Launch button, with styling
new 72486c6 AIRAVATA-3453 Adding post-save/launch navigation
new 15cdc36 AIRAVATA-3453 switching to native slots
new 861cd80 AIRAVATA-3453 Fix issue with selecting a GRP with no deployments
new 176ce2b Merge branch 'airavata-3453' into develop
The 5 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
Summary of changes:
.../js/web-components/ExperimentEditor.vue | 187 +++++++++++++++++----
.../js/web-components/QueueSettingsEditor.vue | 2 +-
.../js/web-components/ResourceSelectionEditor.vue | 19 ++-
.../js/web-components/store.js | 6 +
4 files changed, 179 insertions(+), 35 deletions(-)
[airavata-django-portal] 02/05: AIRAVATA-3453 Adding
post-save/launch navigation
Posted by ma...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
machristie pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/airavata-django-portal.git
commit 72486c672990b1bd55db7e9799aa5557a4f9d750
Author: Marcus Christie <ma...@apache.org>
AuthorDate: Thu Jun 24 16:59:08 2021 -0400
AIRAVATA-3453 Adding post-save/launch navigation
The default behavior is overrideable via custom events.
---
.../js/web-components/ExperimentEditor.vue | 39 +++++++++++++++++++---
1 file changed, 35 insertions(+), 4 deletions(-)
diff --git a/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/ExperimentEditor.vue b/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/ExperimentEditor.vue
index 291bb29..22c1fbe 100644
--- a/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/ExperimentEditor.vue
+++ b/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/ExperimentEditor.vue
@@ -62,6 +62,7 @@ import {
import Vue from "vue";
import { BootstrapVue } from "bootstrap-vue";
+import urls from "../utils/urls";
Vue.use(BootstrapVue);
export default {
@@ -145,15 +146,45 @@ export default {
return;
}
if (event.submitter.name === "save-experiment-button") {
- this.saveExperiment();
+ await saveExperiment(this.experiment);
+ this.postSave();
+ return;
} else {
// Default submit button handling is save and launch
- const experiment = await this.saveExperiment();
+ const experiment = await saveExperiment(this.experiment);
await launchExperiment(experiment.experimentId);
+ this.postSaveAndLaunch(experiment);
+ return;
}
},
- async saveExperiment() {
- return await saveExperiment(this.experiment);
+ postSave() {
+ // client code can listen for 'saved' and preventDefault() on it to handle
+ // it differently. Default action is to navigate to experiments list.
+ const savedEvent = new CustomEvent("saved", {
+ detail: [this.experiment],
+ cancelable: true,
+ composed: true,
+ });
+ this.$el.dispatchEvent(savedEvent);
+ if (savedEvent.defaultPrevented) {
+ return;
+ }
+ urls.navigateToExperimentsList();
+ },
+ postSaveAndLaunch(experiment) {
+ // client code can listen for 'saved-and-launched' and preventDefault() on
+ // it to handle it differently. Default action is to navigate to
+ // the experiment summary page.
+ const savedAndLaunchedEvent = new CustomEvent("saved-and-launched", {
+ detail: [this.experiment],
+ cancelable: true,
+ composed: true,
+ });
+ this.$el.dispatchEvent(savedAndLaunchedEvent);
+ if (savedAndLaunchedEvent.defaultPrevented) {
+ return;
+ }
+ urls.navigateToViewExperiment(experiment, { launching: true });
},
async loadExperiment() {
if (this.experimentId) {
[airavata-django-portal] 04/05: AIRAVATA-3453 Fix issue with
selecting a GRP with no deployments
Posted by ma...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
machristie pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/airavata-django-portal.git
commit 861cd80a729a3ee836cf4da41916df0d60a11d38
Author: Marcus Christie <ma...@apache.org>
AuthorDate: Tue Jun 29 12:34:18 2021 -0400
AIRAVATA-3453 Fix issue with selecting a GRP with no deployments
---
.../js/web-components/QueueSettingsEditor.vue | 2 +-
.../js/web-components/ResourceSelectionEditor.vue | 10 +++++++---
2 files changed, 8 insertions(+), 4 deletions(-)
diff --git a/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/QueueSettingsEditor.vue b/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/QueueSettingsEditor.vue
index 0db908d..27c9381 100644
--- a/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/QueueSettingsEditor.vue
+++ b/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/QueueSettingsEditor.vue
@@ -1,5 +1,5 @@
<template>
- <div>
+ <div v-if="queue">
<div class="card border-default">
<b-link
@click="showConfiguration = !showConfiguration"
diff --git a/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/ResourceSelectionEditor.vue b/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/ResourceSelectionEditor.vue
index a90c893..8791b32 100644
--- a/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/ResourceSelectionEditor.vue
+++ b/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/ResourceSelectionEditor.vue
@@ -244,9 +244,13 @@ export default {
},
async loadAppDeploymentQueues() {
const applicationDeployment = this.applicationDeployment;
- this.appDeploymentQueues = await getAppDeploymentQueues(
- applicationDeployment.appDeploymentId
- );
+ if (applicationDeployment) {
+ this.appDeploymentQueues = await getAppDeploymentQueues(
+ applicationDeployment.appDeploymentId
+ );
+ } else {
+ this.appDeploymentQueues = [];
+ }
},
setDefaultQueue() {
// set to the default queue or the first one
[airavata-django-portal] 03/05: AIRAVATA-3453 switching to native
slots
Posted by ma...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
machristie pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/airavata-django-portal.git
commit 15cdc36660a55a5ede36ac50320658b9d67ae633
Author: Marcus Christie <ma...@apache.org>
AuthorDate: Tue Jun 29 12:15:54 2021 -0400
AIRAVATA-3453 switching to native slots
---
.../js/web-components/ExperimentEditor.vue | 152 +++++++++++++++------
1 file changed, 114 insertions(+), 38 deletions(-)
diff --git a/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/ExperimentEditor.vue b/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/ExperimentEditor.vue
index 22c1fbe..816bdd7 100644
--- a/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/ExperimentEditor.vue
+++ b/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/ExperimentEditor.vue
@@ -1,23 +1,12 @@
<template>
<form v-if="experiment" @submit.prevent="onSubmit">
- <div @input="updateExperimentName">
- <slot name="experiment-name">
- <b-form-group label="Experiment Name" label-for="experiment-name">
- <b-form-input
- type="text"
- name="experiment-name"
- :value="experiment.experimentName"
- required
- >
- </b-form-input>
- </b-form-group>
- </slot>
+ <div ref="experimentName" @input="updateExperimentName">
+ <!-- programmatically define slot for experiment-name as native slot
+ (not Vue slots), see #mounted() -->
</div>
- <div @input="updateProjectId">
- <!-- TODO: define this as a native slot? -->
- <slot name="experiment-project">
- <adpf-project-selector :value="experiment.projectId" />
- </slot>
+ <div ref="projectSelector" @input="updateProjectId">
+ <!-- programmatically define slot for experiment-project as native slot
+ (not Vue slots), see #mounted() -->
</div>
<template v-for="input in experiment.experimentInputs">
<div
@@ -28,26 +17,14 @@
<!-- programmatically define slots as native slots (not Vue slots), see #mounted() -->
</div>
</template>
- <div @input="updateUserConfigurationData">
- <slot name="experiment-resource-selection">
- <adpf-resource-selection-editor ref="resourceSelectionEditor" />
- </slot>
+ <div ref="resourceSelectionEditor" @input="updateUserConfigurationData">
+ <!-- programmatically define slot for experiment-resource-selection as
+ native slot (not Vue slots), see #mounted() -->
+ </div>
+ <div ref="experimentButtons">
+ <!-- programmatically define slot for experiment-buttons as
+ native slot (not Vue slots), see #mounted() -->
</div>
- <slot name="save-button">
- <div class="d-flex justify-content-end">
- <b-button
- type="submit"
- variant="success"
- name="save-and-launch-experiment-button"
- class="mr-2"
- >
- Save and Launch
- </b-button>
- <b-button type="submit" variant="primary" name="save-experiment-button">
- Save
- </b-button>
- </div>
- </slot>
</form>
</template>
@@ -102,9 +79,102 @@ export default {
// TODO: add support for other input types
this.$refs[input.name][0].append(slot);
}
+
+ /*
+ * Experiment Name native slot
+ */
+ // <slot name="experiment-name">
+ // <b-form-group label="Experiment Name" label-for="experiment-name">
+ // <b-form-input
+ // type="text"
+ // name="experiment-name"
+ // :value="experiment.experimentName"
+ // required
+ // >
+ // </b-form-input>
+ // </b-form-group>
+ // </slot>
+ const experimentNameGroupEl = document.createElement("div");
+ experimentNameGroupEl.classList.add("form-group");
+ const experimentNameLabelEl = document.createElement("label");
+ experimentNameLabelEl.setAttribute("for", "experiment-name-input");
+ experimentNameLabelEl.textContent = "Experiment Name";
+ const experimentNameInputEl = document.createElement("input");
+ experimentNameInputEl.classList.add("form-control");
+ experimentNameInputEl.setAttribute("id", "experiment-name-input");
+ experimentNameInputEl.setAttribute("type", "text");
+ experimentNameInputEl.setAttribute("name", "experiment-name");
+ experimentNameInputEl.setAttribute(
+ "value",
+ this.experiment.experimentName
+ );
+ experimentNameInputEl.setAttribute("required", "required");
+ experimentNameGroupEl.append(
+ experimentNameLabelEl,
+ experimentNameInputEl
+ );
+ this.$refs.experimentName.append(
+ this.createSlot("experiment-name", experimentNameGroupEl)
+ );
+
+ const projectSelectorEl = document.createElement("adpf-project-selector");
+ if (this.experiment.projectId) {
+ projectSelectorEl.setAttribute("value", this.experiment.projectId);
+ }
+ this.$refs.projectSelector.append(
+ this.createSlot("experiment-project", projectSelectorEl)
+ );
+
+ const resourceSelectionEditor = document.createElement(
+ "adpf-resource-selection-editor"
+ );
+ this.$refs.resourceSelectionEditor.append(
+ this.createSlot(
+ "experiment-resource-selection",
+ resourceSelectionEditor
+ )
+ );
// Can't set objects via attributes, must set as prop
- this.$refs.resourceSelectionEditor.value = this.experiment.userConfigurationData;
- this.$refs.resourceSelectionEditor.applicationModuleId = this.applicationId;
+ resourceSelectionEditor.value = this.experiment.userConfigurationData;
+ resourceSelectionEditor.applicationModuleId = this.applicationId;
+
+ /*
+ * Experiment (save/launch) Buttons native slot
+ */
+ // <slot name="experiment-buttons">
+ // <div class="d-flex justify-content-end">
+ // <b-button
+ // type="submit"
+ // variant="success"
+ // name="save-and-launch-experiment-button"
+ // class="mr-2"
+ // >
+ // Save and Launch
+ // </b-button>
+ // <b-button type="submit" variant="primary" name="save-experiment-button">
+ // Save
+ // </b-button>
+ // </div>
+ // </slot>
+ const buttonsRowEl = document.createElement("div");
+ buttonsRowEl.classList.add("d-flex", "justify-content-end");
+ const saveAndLaunchButtonEl = document.createElement("button");
+ saveAndLaunchButtonEl.setAttribute("type", "submit");
+ saveAndLaunchButtonEl.setAttribute(
+ "name",
+ "save-and-launch-experiment-button"
+ );
+ saveAndLaunchButtonEl.classList.add("btn", "btn-success", "mr-2");
+ saveAndLaunchButtonEl.textContent = "Save and Launch";
+ const saveButtonEl = document.createElement("button");
+ saveButtonEl.setAttribute("type", "submit");
+ saveButtonEl.setAttribute("name", "save-experiment-button");
+ saveButtonEl.classList.add("btn", "btn-primary");
+ saveButtonEl.textContent = "Save";
+ buttonsRowEl.append(saveAndLaunchButtonEl, saveButtonEl);
+ this.$refs.experimentButtons.append(
+ this.createSlot("experiment-buttons", buttonsRowEl)
+ );
});
},
data() {
@@ -201,6 +271,12 @@ export default {
return experiment;
}
},
+ createSlot(name, ...children) {
+ const slot = document.createElement("slot");
+ slot.setAttribute("name", name);
+ slot.append(...children);
+ return slot;
+ },
},
};
</script>
[airavata-django-portal] 05/05: Merge branch 'airavata-3453' into
develop
Posted by ma...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
machristie pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/airavata-django-portal.git
commit 176ce2b940cd1fda2149eeb684d3c35c9351e358
Merge: 3c3d1f7 861cd80
Author: Marcus Christie <ma...@apache.org>
AuthorDate: Thu Jul 1 13:02:36 2021 -0400
Merge branch 'airavata-3453' into develop
.../js/web-components/ExperimentEditor.vue | 187 +++++++++++++++++----
.../js/web-components/QueueSettingsEditor.vue | 2 +-
.../js/web-components/ResourceSelectionEditor.vue | 19 ++-
.../js/web-components/store.js | 6 +
4 files changed, 179 insertions(+), 35 deletions(-)
[airavata-django-portal] 01/05: AIRAVATA-3453 Adding Save and
Launch button, with styling
Posted by ma...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
machristie pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/airavata-django-portal.git
commit 4392395662b5dbf49be80a2d77799e492f5416b1
Author: Marcus Christie <ma...@apache.org>
AuthorDate: Thu Jun 24 16:42:42 2021 -0400
AIRAVATA-3453 Adding Save and Launch button, with styling
---
.../js/web-components/ExperimentEditor.vue | 24 ++++++++++++++++++++--
.../js/web-components/ResourceSelectionEditor.vue | 9 +++++++-
.../js/web-components/store.js | 6 ++++++
3 files changed, 36 insertions(+), 3 deletions(-)
diff --git a/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/ExperimentEditor.vue b/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/ExperimentEditor.vue
index 7cfa7f2..291bb29 100644
--- a/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/ExperimentEditor.vue
+++ b/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/ExperimentEditor.vue
@@ -34,7 +34,19 @@
</slot>
</div>
<slot name="save-button">
- <button type="submit" name="save-experiment-button">Save</button>
+ <div class="d-flex justify-content-end">
+ <b-button
+ type="submit"
+ variant="success"
+ name="save-and-launch-experiment-button"
+ class="mr-2"
+ >
+ Save and Launch
+ </b-button>
+ <b-button type="submit" variant="primary" name="save-experiment-button">
+ Save
+ </b-button>
+ </div>
</slot>
</form>
</template>
@@ -45,6 +57,7 @@ import {
getApplicationInterfaceForModule,
saveExperiment,
getExperiment,
+ launchExperiment,
} from "./store";
import Vue from "vue";
@@ -118,7 +131,7 @@ export default {
const [userConfigurationData] = event.detail;
this.experiment.userConfigurationData = userConfigurationData;
},
- onSubmit(event) {
+ async onSubmit(event) {
// console.log(event);
// 'save' event is cancelable. Listener can call .preventDefault() on the event to cancel.
// composed: true allows the shadow DOM event to bubble up through the shadow root.
@@ -135,6 +148,8 @@ export default {
this.saveExperiment();
} else {
// Default submit button handling is save and launch
+ const experiment = await this.saveExperiment();
+ await launchExperiment(experiment.experimentId);
}
},
async saveExperiment() {
@@ -161,4 +176,9 @@ export default {
<style>
@import "./styles.css";
+
+:host {
+ display: block;
+ margin-bottom: 1em;
+}
</style>
diff --git a/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/ResourceSelectionEditor.vue b/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/ResourceSelectionEditor.vue
index 1cf0426..a90c893 100644
--- a/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/ResourceSelectionEditor.vue
+++ b/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/ResourceSelectionEditor.vue
@@ -412,4 +412,11 @@ export default {
};
</script>
-<style></style>
+<style>
+@import "./styles.css";
+
+:host {
+ display: block;
+ margin-bottom: 1rem;
+}
+</style>
diff --git a/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/store.js b/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/store.js
index 5007bdf..c14469a 100644
--- a/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/store.js
+++ b/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/store.js
@@ -35,6 +35,12 @@ export async function saveExperiment(experiment) {
}
}
+export async function launchExperiment(experimentId) {
+ return await services.ExperimentService.launch({
+ lookup: experimentId,
+ });
+}
+
export async function getWorkspacePreferences() {
if (!CACHE.WORKSPACE_PREFERENCES) {
CACHE.WORKSPACE_PREFERENCES = services.WorkspacePreferencesService.get();