airavata-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From machris...@apache.org
Subject [airavata-django-portal] 02/02: AIRAVATA-2598 Separated out queue settings into separate component
Date Thu, 04 Jan 2018 17:48:42 GMT
This is an automated email from the ASF dual-hosted git repository.

machristie pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/airavata-django-portal.git

commit cde96c2626b36d929d0adf80868c41e457ea1bd0
Author: Marcus Christie <machrist@iu.edu>
AuthorDate: Thu Jan 4 12:47:44 2018 -0500

    AIRAVATA-2598 Separated out queue settings into separate component
---
 .../django_airavata_api/js/models/BaseModel.js     |   4 +
 .../js/models/InputDataObjectType.js               |   4 -
 .../js/components/experiment/ExperimentEditor.vue  |  91 ++++----------
 .../components/experiment/QueueSettingsEditor.vue  | 131 +++++++++++++++++++++
 4 files changed, 155 insertions(+), 75 deletions(-)

diff --git a/django_airavata/apps/api/static/django_airavata_api/js/models/BaseModel.js b/django_airavata/apps/api/static/django_airavata_api/js/models/BaseModel.js
index 119ebd0..c5ef43a 100644
--- a/django_airavata/apps/api/static/django_airavata_api/js/models/BaseModel.js
+++ b/django_airavata/apps/api/static/django_airavata_api/js/models/BaseModel.js
@@ -74,4 +74,8 @@ export default class BaseModel {
     validate() {
         return null;
     }
+
+    clone() {
+        return new this.constructor(this);
+    }
 }
diff --git a/django_airavata/apps/api/static/django_airavata_api/js/models/InputDataObjectType.js
b/django_airavata/apps/api/static/django_airavata_api/js/models/InputDataObjectType.js
index 56bb108..601fdd0 100644
--- a/django_airavata/apps/api/static/django_airavata_api/js/models/InputDataObjectType.js
+++ b/django_airavata/apps/api/static/django_airavata_api/js/models/InputDataObjectType.js
@@ -21,8 +21,4 @@ export default class InputDataObjectType extends BaseModel {
     constructor(data = {}) {
         super(FIELDS, data);
     }
-
-    clone() {
-        return new InputDataObjectType(this);
-    }
 }
diff --git a/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/ExperimentEditor.vue
b/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/ExperimentEditor.vue
index 6a66601..1e9db4e 100644
--- a/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/ExperimentEditor.vue
+++ b/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/ExperimentEditor.vue
@@ -56,9 +56,12 @@
                             Resource Selection
                         </h2>
                         <b-form novalidate>
+                            <!-- TODO: combine compute resource selector with
+                            queue-settings-editor to create a
+                            ComputationalResourceSchedulingModelEditor component -->
                             <b-form-group label="Compute Resource" label-for="compute-resource">
                                 <b-form-select id="compute-resource"
-                                    v-model="experiment.userConfigurationData.computationalResourceScheduling.resourceHostId"
+                                    v-model="resourceHostId"
                                     :options="computeResourceOptions" required
                                     @change="computeResourceChanged">
                                     <template slot="first">
@@ -67,33 +70,12 @@
                                 </b-form-select>
                             </b-form-group>
 
-                            <div class="card border-default">
-                                <div class="card-body">
-                                    <h4 class="card-title">Current Settings</h4>
-                                </div>
-                            </div>
-                            <b-form-group label="Select a Queue" label-for="queue">
-                                <b-form-select id="queue"
-                                    v-model="experiment.userConfigurationData.computationalResourceScheduling.queueName"
-                                    :options="queueOptions" required
-                                    @change="queueChanged">
-                                </b-form-select>
-                            </b-form-group>
-                            <b-form-group label="Node Count" label-for="node-count">
-                                <b-form-input id="node-count" type="number" min="1"
-                                    v-model="experiment.userConfigurationData.computationalResourceScheduling.nodeCount"
required>
-                                </b-form-input>
-                            </b-form-group>
-                            <b-form-group label="Total Core Count" label-for="core-count">
-                                <b-form-input id="core-count" type="number" min="1"
-                                    v-model="experiment.userConfigurationData.computationalResourceScheduling.totalCPUCount"
required>
-                                </b-form-input>
-                            </b-form-group>
-                            <b-form-group label="Wall Time Limit" label-for="walltime-limit">
-                                <b-form-input id="walltime-limit" type="number" min="1"
-                                    v-model="experiment.userConfigurationData.computationalResourceScheduling.wallTimeLimit"
required>
-                                </b-form-input>
-                            </b-form-group>
+                            <queue-settings-editor
+                                v-model="experiment.userConfigurationData.computationalResourceScheduling"
+                                v-if="appDeploymentId && resourceHostId"
+                                :app-deployment-id="appDeploymentId"
+                                :resource-host-id="resourceHostId">
+                            </queue-settings-editor>
                         </b-form>
                     </div>
                 </div>
@@ -103,19 +85,25 @@
 </template>
 
 <script>
+import QueueSettingsEditor from './QueueSettingsEditor.vue'
 import {models, services} from 'django-airavata-api'
 
 export default {
     name: 'edit-experiment',
+    // TODO: clone experiment instead of editing it directly
     props: ['experiment', 'appModule', 'appInterface'],
     data () {
         return {
             projects: [],
             computeResources: {},
             applicationDeployments: [],
-            queueDefaults: [],
+            appDeploymentId: null,
+            resourceHostId: null,
         }
     },
+    components: {
+        QueueSettingsEditor,
+    },
     mounted: function () {
         services.ProjectService.listAll()
             .then(projects => this.projects = projects);
@@ -146,55 +134,16 @@ export default {
             computeResourceOptions.sort((a, b) => a.text.localeCompare(b.text));
             return computeResourceOptions;
         },
-        queueOptions: function() {
-            const queueOptions = this.queueDefaults.map(queueDefault => {
-                return {
-                    value: queueDefault.queueName,
-                    text: `${queueDefault.queueName}: ${queueDefault.queueDescription}`,
-                }
-            });
-            return queueOptions;
-        },
     },
     methods: {
         computeResourceChanged: function(selectedComputeResourceId) {
             // Find application deployment that corresponds to this compute resource
-            // TODO: switch to find()
-            let selectedApplicationDeployments = this.applicationDeployments.filter(dep =>
dep.computeHostId === selectedComputeResourceId);
-            if (selectedApplicationDeployments.length === 0) {
+            let selectedApplicationDeployment = this.applicationDeployments.find(dep =>
dep.computeHostId === selectedComputeResourceId);
+            if (!selectedApplicationDeployment) {
                 throw new Error("Failed to find application deployment!");
             }
-            let selectedApplicationDeployment = selectedApplicationDeployments[0];
-            services.ApplicationDeploymentService.getQueues(selectedApplicationDeployment.appDeploymentId)
-                .then(queueDefaults => {
-                    // Sort queue defaults
-                    this.queueDefaults = queueDefaults.sort((a, b) => {
-                        // Sort default first, then by alphabetically by name
-                        if (a.isDefaultQueue) {
-                            return -1;
-                        } else if (b.isDefaultQueue) {
-                            return 1;
-                        } else {
-                            return a.queueName.localeCompare(b.queueName);
-                        }
-                    });
-                    // Find the default queue and apply it's settings
-                    const defaultQueue = this.queueDefaults[0];
-
-                    // TODO: we really shouldn't be modifying the props right?
-                    this.experiment.userConfigurationData.computationalResourceScheduling.queueName
= defaultQueue.queueName;
-                    this.experiment.userConfigurationData.computationalResourceScheduling.totalCPUCount
= defaultQueue.defaultCPUCount;
-                    this.experiment.userConfigurationData.computationalResourceScheduling.nodeCount
= defaultQueue.defaultNodeCount;
-                    this.experiment.userConfigurationData.computationalResourceScheduling.wallTimeLimit
= defaultQueue.defaultWalltime;
-                });
+            this.appDeploymentId = selectedApplicationDeployment.appDeploymentId;
         },
-        queueChanged: function(queueName) {
-
-            const queueDefault = this.queueDefaults.find(queue => queue.queueName ===
queueName);
-            this.experiment.userConfigurationData.computationalResourceScheduling.totalCPUCount
= queueDefault.defaultCPUCount;
-            this.experiment.userConfigurationData.computationalResourceScheduling.nodeCount
= queueDefault.defaultNodeCount;
-            this.experiment.userConfigurationData.computationalResourceScheduling.wallTimeLimit
= queueDefault.defaultWalltime;
-        }
     },
     watch: {
         appInterface: function() {
diff --git a/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/QueueSettingsEditor.vue
b/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/QueueSettingsEditor.vue
new file mode 100644
index 0000000..b590da3
--- /dev/null
+++ b/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/QueueSettingsEditor.vue
@@ -0,0 +1,131 @@
+<template>
+    <b-form novalidate>
+
+        <div class="card border-default">
+            <div class="card-body">
+                <h4 class="card-title">Current Settings</h4>
+            </div>
+        </div>
+        <b-form-group label="Select a Queue" label-for="queue">
+            <b-form-select id="queue"
+                v-model="localComputationalResourceScheduling.queueName"
+                :options="queueOptions" required
+                @change="queueChanged">
+            </b-form-select>
+        </b-form-group>
+        <b-form-group label="Node Count" label-for="node-count">
+            <b-form-input id="node-count" type="number" min="1"
+                v-model="localComputationalResourceScheduling.nodeCount" required
+                @change="emitValueChanged">
+            </b-form-input>
+        </b-form-group>
+        <b-form-group label="Total Core Count" label-for="core-count">
+            <b-form-input id="core-count" type="number" min="1"
+                v-model="localComputationalResourceScheduling.totalCPUCount" required
+                @change="emitValueChanged">
+            </b-form-input>
+        </b-form-group>
+        <b-form-group label="Wall Time Limit" label-for="walltime-limit">
+            <b-form-input id="walltime-limit" type="number" min="1"
+                v-model="localComputationalResourceScheduling.wallTimeLimit" required
+                @change="emitValueChanged">
+            </b-form-input>
+        </b-form-group>
+    </b-form>
+</template>
+
+<script>
+import {models, services} from 'django-airavata-api'
+
+export default {
+    name: 'queue-settings-editor',
+    props: {
+        value: {
+            type: models.ComputationalResourceSchedulingModel,
+            required: true
+        },
+        appDeploymentId: {
+            type: String,
+            required: true
+        },
+        resourceHostId: {
+            type: String,
+            required: true
+        }
+    },
+    data () {
+        const localComputationalResourceScheduling = this.value.clone();
+        localComputationalResourceScheduling.resourceHostId = this.resourceHostId;
+        return {
+            localComputationalResourceScheduling: localComputationalResourceScheduling,
+            queueDefaults: [],
+        }
+    },
+    computed: {
+        queueOptions: function() {
+            const queueOptions = this.queueDefaults.map(queueDefault => {
+                return {
+                    value: queueDefault.queueName,
+                    text: `${queueDefault.queueName}: ${queueDefault.queueDescription}`,
+                }
+            });
+            return queueOptions;
+        },
+    },
+    methods: {
+        queueChanged: function(queueName) {
+
+            const queueDefault = this.queueDefaults.find(queue => queue.queueName ===
queueName);
+            this.localComputationalResourceScheduling.totalCPUCount = queueDefault.defaultCPUCount;
+            this.localComputationalResourceScheduling.nodeCount = queueDefault.defaultNodeCount;
+            this.localComputationalResourceScheduling.wallTimeLimit = queueDefault.defaultWalltime;
+            this.emitValueChanged();
+        },
+        emitValueChanged: function() {
+            this.$emit('input', this.localComputationalResourceScheduling);
+        },
+        loadQueueDefaults: function() {
+            services.ApplicationDeploymentService.getQueues(this.appDeploymentId)
+                .then(queueDefaults => {
+                    // Sort queue defaults
+                    this.queueDefaults = queueDefaults.sort((a, b) => {
+                        // Sort default first, then by alphabetically by name
+                        if (a.isDefaultQueue) {
+                            return -1;
+                        } else if (b.isDefaultQueue) {
+                            return 1;
+                        } else {
+                            return a.queueName.localeCompare(b.queueName);
+                        }
+                    });
+                    // Find the default queue and apply it's settings
+                    const defaultQueue = this.queueDefaults[0];
+
+                    this.localComputationalResourceScheduling.queueName = defaultQueue.queueName;
+                    this.localComputationalResourceScheduling.totalCPUCount = defaultQueue.defaultCPUCount;
+                    this.localComputationalResourceScheduling.nodeCount = defaultQueue.defaultNodeCount;
+                    this.localComputationalResourceScheduling.wallTimeLimit = defaultQueue.defaultWalltime;
+                    this.emitValueChanged();
+                });
+        }
+    },
+    watch: {
+        value: function(newValue) {
+            this.localComputationalResourceScheduling = newValue.clone();
+        },
+        appDeploymentId: function(appDeploymentId) {
+            this.loadQueueDefaults();
+        },
+        resourceHostId: function(resourceHostId) {
+            this.localComputationalResourceScheduling.resourceHostId = resourceHostId;
+            this.emitValueChanged();
+        }
+    },
+    mounted: function() {
+        this.loadQueueDefaults();
+    }
+}
+</script>
+
+<style>
+</style>
\ No newline at end of file

-- 
To stop receiving notification emails like this one, please contact
"commits@airavata.apache.org" <commits@airavata.apache.org>.

Mime
View raw message