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/06/18 19:38:26 UTC
[airavata-django-portal] 09/20: AIRAVATA-3453 group resource
profile selector
This is an automated email from the ASF dual-hosted git repository.
machristie pushed a commit to branch airavata-3453
in repository https://gitbox.apache.org/repos/asf/airavata-django-portal.git
commit 1ade2d97372f2ce98c712a616e0f30ef6c0aca3a
Author: Marcus Christie <ma...@apache.org>
AuthorDate: Thu May 6 14:57:36 2021 -0400
AIRAVATA-3453 group resource profile selector
---
.../js/web-components/ExperimentEditor.vue | 9 ++
.../GroupResourceProfileSelector.vue | 112 +++++++++++++++++++++
.../js/web-components/store.js | 39 +++++--
3 files changed, 150 insertions(+), 10 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 0e99976..25d77d8 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
@@ -24,6 +24,11 @@
<!-- programmatically define slots as native slots (not Vue slots), see #mounted() -->
</div>
</template>
+ <div @input="updateGroupResourceProfileId">
+ <slot name="experiment-group-resource-profile">
+ <adpf-group-resource-profile-selector :value="experiment.userConfigurationData.groupResourceProfileId"/>
+ </slot>
+ </div>
<slot name="save-button">
<button type="submit" name="save-experiment-button">Save</button>
</slot>
@@ -95,6 +100,10 @@ export default {
const [projectId] = event.detail;
this.experiment.projectId = projectId;
},
+ updateGroupResourceProfileId(event) {
+ const [groupResourceProfileId] = event.detail;
+ this.experiment.userConfigurationData.groupResourceProfileId = groupResourceProfileId;
+ },
onSubmit(event) {
// console.log(event);
// 'save' event is cancelable. Listener can call .preventDefault() on the event to cancel.
diff --git a/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/GroupResourceProfileSelector.vue b/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/GroupResourceProfileSelector.vue
new file mode 100644
index 0000000..78be81f
--- /dev/null
+++ b/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/GroupResourceProfileSelector.vue
@@ -0,0 +1,112 @@
+<template>
+ <b-form-group :label="label" label-for="group-resource-profile">
+ <b-form-select
+ id="group-resource-profile"
+ v-model="groupResourceProfileId"
+ :options="groupResourceProfileOptions"
+ required
+ @change="groupResourceProfileChanged"
+ >
+ <template slot="first">
+ <option :value="null" disabled>
+ <slot name="null-option">Select an allocation</slot>
+ </option>
+ </template>
+ </b-form-select>
+ </b-form-group>
+</template>
+
+<script>
+import {
+ getDefaultGroupResourceProfileId,
+ getGroupResourceProfiles,
+} from "./store";
+import Vue from "vue";
+import { BootstrapVue } from "bootstrap-vue";
+Vue.use(BootstrapVue);
+
+export default {
+ name: "group-resource-profile-selector",
+ props: {
+ value: {
+ type: String,
+ },
+ label: {
+ type: String,
+ default: "Allocation",
+ },
+ },
+ data() {
+ return {
+ groupResourceProfileId: this.value,
+ groupResourceProfiles: [],
+ defaultGroupResourceProfileId: null,
+ };
+ },
+ async mounted() {
+ this.defaultGroupResourceProfileId = await getDefaultGroupResourceProfileId();
+ this.groupResourceProfiles = await getGroupResourceProfiles();
+ this.init();
+ },
+ computed: {
+ groupResourceProfileOptions: function () {
+ if (this.groupResourceProfiles && this.groupResourceProfiles.length > 0) {
+ const groupResourceProfileOptions = this.groupResourceProfiles.map(
+ (groupResourceProfile) => {
+ return {
+ value: groupResourceProfile.groupResourceProfileId,
+ text: groupResourceProfile.groupResourceProfileName,
+ };
+ }
+ );
+ groupResourceProfileOptions.sort((a, b) =>
+ a.text.localeCompare(b.text)
+ );
+ return groupResourceProfileOptions;
+ } else {
+ return [];
+ }
+ },
+ },
+ methods: {
+ init() {
+ // Default the selected group resource profile
+ if (
+ (!this.value ||
+ !this.selectedValueInGroupResourceProfileList(
+ this.groupResourceProfiles
+ )) &&
+ this.groupResourceProfiles &&
+ this.groupResourceProfiles.length > 0
+ ) {
+ // automatically select the last one user selected
+ this.groupResourceProfileId = this.defaultGroupResourceProfileId;
+ this.emitValueChanged();
+ }
+ },
+ groupResourceProfileChanged: function (groupResourceProfileId) {
+ this.groupResourceProfileId = groupResourceProfileId;
+ this.emitValueChanged();
+ },
+ emitValueChanged: function () {
+ const inputEvent = new CustomEvent("input", {
+ detail: [this.groupResourceProfileId],
+ composed: true,
+ bubbles: true,
+ });
+ this.$el.dispatchEvent(inputEvent);
+ },
+ selectedValueInGroupResourceProfileList(groupResourceProfiles) {
+ return (
+ groupResourceProfiles
+ .map((grp) => grp.groupResourceProfileId)
+ .indexOf(this.value) >= 0
+ );
+ },
+ },
+};
+</script>
+
+<style>
+@import url("./styles.css");
+</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 2e008b8..387ca5a 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
@@ -1,25 +1,28 @@
import { services } from "django-airavata-api";
-const APPLICATION_MODULES = {};
-const APPLICATION_INTERFACES = {};
+const CACHE = {
+ APPLICATION_MODULES: {},
+ APPLICATION_INTERFACES: {},
+ WORKSPACE_PREFERENCES: null,
+};
export async function getApplicationModule(applicationId) {
- if (applicationId in APPLICATION_MODULES) {
- return APPLICATION_MODULES[applicationId];
+ if (applicationId in CACHE.APPLICATION_MODULES) {
+ return CACHE.APPLICATION_MODULES[applicationId];
}
const result = await services.ApplicationModuleService.retrieve({
lookup: applicationId,
});
- APPLICATION_MODULES[applicationId] = result;
+ CACHE.APPLICATION_MODULES[applicationId] = result;
return result;
}
export async function getApplicationInterfaceForModule(applicationId) {
- if (applicationId in APPLICATION_INTERFACES) {
- return APPLICATION_INTERFACES[applicationId];
+ if (applicationId in CACHE.APPLICATION_INTERFACES) {
+ return CACHE.APPLICATION_INTERFACES[applicationId];
}
const result = await services.ApplicationModuleService.getApplicationInterface(
{ lookup: applicationId }
);
- APPLICATION_INTERFACES[applicationId] = result;
+ CACHE.APPLICATION_INTERFACES[applicationId] = result;
return result;
}
@@ -34,9 +37,21 @@ export async function saveExperiment(experiment) {
}
}
+export async function getWorkspacePreferences() {
+ if (!CACHE.WORKSPACE_PREFERENCES) {
+ CACHE.WORKSPACE_PREFERENCES = await services.WorkspacePreferencesService.get();
+ }
+ return CACHE.WORKSPACE_PREFERENCES;
+}
+
export async function getDefaultProjectId() {
- const preferences = await services.WorkspacePreferencesService.get();
- return preferences.most_recent_project_id;
+ const prefs = await getWorkspacePreferences();
+ return prefs.most_recent_project_id;
+}
+
+export async function getDefaultGroupResourceProfileId() {
+ const prefs = await getWorkspacePreferences();
+ return prefs.most_recent_group_resource_profile_id;
}
export async function getExperiment(experimentId) {
@@ -46,3 +61,7 @@ export async function getExperiment(experimentId) {
export async function getProjects() {
return await services.ProjectService.listAll();
}
+
+export async function getGroupResourceProfiles() {
+ return await services.GroupResourceProfileService.list();
+}