airavata-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From machris...@apache.org
Subject [airavata-django-portal] 01/02: AIRAVATA-2598 Updating styling of experiment editor
Date Thu, 18 Jan 2018 15:13:51 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 e99294a5a322c90006d82ec909f597cf8ac5a0a6
Author: Marcus Christie <machrist@iu.edu>
AuthorDate: Tue Jan 16 21:21:13 2018 -0500

    AIRAVATA-2598 Updating styling of experiment editor
---
 .../ComputationalResourceSchedulingEditor.vue      |  51 ++++---
 .../js/components/experiment/ExperimentEditor.vue  | 128 ++++++++---------
 .../components/experiment/QueueSettingsEditor.vue  | 154 +++++++++++++--------
 .../js/containers/CreateExperimentContainer.vue    |   6 +
 4 files changed, 194 insertions(+), 145 deletions(-)

diff --git a/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/ComputationalResourceSchedulingEditor.vue
b/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/ComputationalResourceSchedulingEditor.vue
index 116abad..dc35e34 100644
--- a/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/ComputationalResourceSchedulingEditor.vue
+++ b/django_airavata/apps/workspace/static/django_airavata_workspace/js/components/experiment/ComputationalResourceSchedulingEditor.vue
@@ -1,26 +1,33 @@
 <template>
-    <b-form novalidate>
-        <b-form-group label="Compute Resource" label-for="compute-resource"
-                :feedback="getValidationFeedback('resourceHostId')"
-                :state="getValidationState('resourceHostId')">
-            <b-form-select id="compute-resource"
-                v-model="resourceHostId"
-                :options="computeResourceOptions" required
-                @change="computeResourceChanged"
-                :state="getValidationState('resourceHostId')">
-                <template slot="first">
-                    <option :value="null" disabled>Select a Compute Resource</option>
-                </template>
-            </b-form-select>
-        </b-form-group>
-
-        <queue-settings-editor
-            v-model="localComputationalResourceScheduling"
-            v-if="appDeploymentId"
-            :app-deployment-id="appDeploymentId"
-            @input="queueSettingsChanged">
-        </queue-settings-editor>
-    </b-form>
+    <div>
+        <div class="row">
+            <div class="col">
+                <b-form-group label="Compute Resource" label-for="compute-resource"
+                        :feedback="getValidationFeedback('resourceHostId')"
+                        :state="getValidationState('resourceHostId')">
+                    <b-form-select id="compute-resource"
+                        v-model="resourceHostId"
+                        :options="computeResourceOptions" required
+                        @change="computeResourceChanged"
+                        :state="getValidationState('resourceHostId')">
+                        <template slot="first">
+                            <option :value="null" disabled>Select a Compute Resource</option>
+                        </template>
+                    </b-form-select>
+                </b-form-group>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col">
+                <queue-settings-editor
+                    v-model="localComputationalResourceScheduling"
+                    v-if="appDeploymentId"
+                    :app-deployment-id="appDeploymentId"
+                    @input="queueSettingsChanged">
+                </queue-settings-editor>
+            </div>
+        </div>
+    </div>
 </template>
 
 <script>
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 50f9c13..d0f21ad 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
@@ -8,50 +8,48 @@
                 </h1>
             </div>
         </div>
-        <div class="row">
-            <div class="col">
-                <div class="card">
-                    <div class="card-body">
-                        <b-form novalidate>
-                            <b-form-group label="Experiment Name" label-for="experiment-name"
-                                :feedback="getValidationFeedback('experimentName')"
-                                :state="getValidationState('experimentName')">
-                                <b-form-input id="experiment-name"
-                                type="text" v-model="localExperiment.experimentName" required
-                                placeholder="Experiment name"
-                                :state="getValidationState('experimentName')"></b-form-input>
-                            </b-form-group>
-                            <b-form-group label="Project" label-for="project"
-                                :feedback="getValidationFeedback('projectId')"
-                                :state="getValidationState('projectId')">
-                                <b-form-select id="project"
-                                    v-model="localExperiment.projectId" :options="projectOptions"
required
-                                    :state="getValidationState('projectId')">
-                                    <template slot="first">
-                                        <option :value="null" disabled>Select a Project</option>
-                                    </template>
-                                </b-form-select>
-                            </b-form-group>
-                        </b-form>
-                    </div>
+        <b-form novalidate>
+            <div class="row">
+                <div class="col">
+                    <b-form-group label="Experiment Name" label-for="experiment-name"
+                        :feedback="getValidationFeedback('experimentName')"
+                        :state="getValidationState('experimentName')">
+                        <b-form-input id="experiment-name"
+                        type="text" v-model="localExperiment.experimentName" required
+                        placeholder="Experiment name"
+                        :state="getValidationState('experimentName')"></b-form-input>
+                    </b-form-group>
                 </div>
             </div>
-        </div>
-        <div class="row">
-            <div class="col">
-                <h1 class="h4 mb-4">
-                    Application Configuration
-                </h1>
+            <div class="row">
+                <div class="col">
+                    <b-form-group label="Project" label-for="project"
+                        :feedback="getValidationFeedback('projectId')"
+                        :state="getValidationState('projectId')">
+                        <b-form-select id="project"
+                            v-model="localExperiment.projectId" :options="projectOptions"
required
+                            :state="getValidationState('projectId')">
+                            <template slot="first">
+                                <option :value="null" disabled>Select a Project</option>
+                            </template>
+                        </b-form-select>
+                    </b-form-group>
+                </div>
             </div>
-        </div>
-        <div class="row">
-            <div class="col">
-                <div class="card">
-                    <div class="card-body">
-                        <h2 class="h5 mb-3">
-                            Application Inputs
-                        </h2>
-                        <b-form novalidate>
+            <div class="row">
+                <div class="col">
+                    <h1 class="h4 mt-5 mb-4">
+                        Application Configuration
+                    </h1>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col">
+                    <div class="card border-default">
+                        <div class="card-body">
+                            <h2 class="h6 mb-3">
+                                Application Inputs
+                            </h2>
                             <b-form-group v-for="experimentInput in localExperiment.experimentInputs"
                                     :label="experimentInput.name" :label-for="experimentInput.name"
:key="experimentInput.name"
                                     :feedback="getValidationFeedback(['experimentInputs',
experimentInput.name, 'value'])"
@@ -60,35 +58,42 @@
                                     :placeholder="experimentInput.userFriendlyDescription"
                                     :state="getValidationState(['experimentInputs', experimentInput.name,
'value'])"></b-form-input>
                             </b-form-group>
-                        </b-form>
-                        <h2 class="h5 mb-3">
-                            Resource Selection
-                        </h2>
-                        <computational-resource-scheduling-editor
-                            v-model="localExperiment.userConfigurationData.computationalResourceScheduling"
-                            :app-module-id="appModule.appModuleId"
-                            :app-interface-id="appInterface.applicationInterfaceId">
-                        </computational-resource-scheduling-editor>
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
-        <div class="row">
-            <div id="col-exp-buttons" class="col">
-                <b-button variant="success" @click="saveAndLaunchExperiment" :disabled="isSaveDisabled">
-                    Save and Launch
-                </b-button>
-                <b-button variant="primary" @click="saveExperiment" :disabled="isSaveDisabled">
-                    Save
-                </b-button>
+            <div class="row">
+                <div class="col">
+                    <h2 class="h4 mt-4 mb-3">
+                        Resource Selection
+                    </h2>
+                </div>
             </div>
-        </div>
+            <div class="row">
+                <div class="col">
+                    <computational-resource-scheduling-editor
+                        v-model="localExperiment.userConfigurationData.computationalResourceScheduling"
+                        :app-module-id="appModule.appModuleId"
+                        :app-interface-id="appInterface.applicationInterfaceId">
+                    </computational-resource-scheduling-editor>
+                </div>
+            </div>
+            <div class="row">
+                <div id="col-exp-buttons" class="col">
+                    <b-button variant="success" @click="saveAndLaunchExperiment" :disabled="isSaveDisabled">
+                        Save and Launch
+                    </b-button>
+                    <b-button variant="primary" @click="saveExperiment" :disabled="isSaveDisabled">
+                        Save
+                    </b-button>
+                </div>
+            </div>
+        </b-form>
     </div>
 </template>
 
 <script>
 import ComputationalResourceSchedulingEditor from './ComputationalResourceSchedulingEditor.vue'
-import QueueSettingsEditor from './QueueSettingsEditor.vue'
 import {models, services} from 'django-airavata-api'
 import {utils} from 'django-airavata-common-ui'
 
@@ -115,7 +120,6 @@ export default {
         }
     },
     components: {
-        QueueSettingsEditor,
         ComputationalResourceSchedulingEditor,
     },
     mounted: 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
index edf38d4..c1eca9f 100644
--- 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
@@ -1,73 +1,102 @@
 <template>
-    <b-form novalidate>
 
-        <div class="card border-default">
-            <div class="card-body">
-                <h5 class="card-title">Settings for queue {{ localComputationalResourceScheduling.queueName
}}</h5>
-                <div class="row">
-                    <div class="col">
-                        <h1>{{ localComputationalResourceScheduling.nodeCount }}</h1>
-                        <span>NODE COUNT</span>
-                    </div>
-                    <div class="col">
-                        <h1>{{ localComputationalResourceScheduling.totalCPUCount }}</h1>
-                        <span>CORE COUNT</span>
-                    </div>
-                    <div class="col">
-                        <h1>{{ localComputationalResourceScheduling.wallTimeLimit }}</h1>
-                        <span>TIME LIMIT</span>
+    <div>
+        <div class="row">
+            <div class="col">
+                <div class="card border-default">
+                    <div class="card-body">
+                        <h5 class="card-title mb-4">Settings for queue {{ localComputationalResourceScheduling.queueName
}}</h5>
+                        <div class="row">
+                            <div class="col">
+                                <h3 class="h5 mb-0">{{ localComputationalResourceScheduling.nodeCount
}}</h3>
+                                <span class="text-muted text-uppercase">NODE COUNT</span>
+                            </div>
+                            <div class="col">
+                                <h3 class="h5 mb-0">{{ localComputationalResourceScheduling.totalCPUCount
}}</h3>
+                                <span class="text-muted text-uppercase">CORE COUNT</span>
+                            </div>
+                            <div class="col">
+                                <h3 class="h5 mb-0">{{ localComputationalResourceScheduling.wallTimeLimit
}}</h3>
+                                <span class="text-muted text-uppercase">TIME LIMIT</span>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
         </div>
-        <div v-if="!showConfiguration">
-            <i class="fa fa-cog" aria-hidden="true"></i>
-            <a href="#" @click.prevent="showConfiguration = true">Configure Resource</a>
+        <div class="row">
+            <div class="col">
+                <div v-if="!showConfiguration">
+                    <i class="fa fa-cog text-secondary" aria-hidden="true"></i>
+                    <a class="text-secondary" href="#" @click.prevent="showConfiguration
= true">Configure Resource</a>
+                </div>
+            </div>
         </div>
         <div v-if="showConfiguration">
-            <b-form-group label="Select a Queue" label-for="queue"
-                :feedback="getValidationFeedback('queueName')"
-                :state="getValidationState('queueName')">
-                <b-form-select id="queue"
-                    v-model="localComputationalResourceScheduling.queueName"
-                    :options="queueOptions" required
-                    @change="queueChanged"
-                    :state="getValidationState('queueName')">
-                </b-form-select>
-            </b-form-group>
-            <b-form-group label="Node Count" label-for="node-count"
-                :feedback="getValidationFeedback('nodeCount')"
-                :state="getValidationState('nodeCount')">
-                <b-form-input id="node-count" type="number" min="1"
-                    v-model="localComputationalResourceScheduling.nodeCount" required
-                    @input="emitValueChanged"
-                    :state="getValidationState('nodeCount')">
-                </b-form-input>
-            </b-form-group>
-            <b-form-group label="Total Core Count" label-for="core-count"
-                :feedback="getValidationFeedback('totalCPUCount')"
-                :state="getValidationState('totalCPUCount')">
-                <b-form-input id="core-count" type="number" min="1"
-                    v-model="localComputationalResourceScheduling.totalCPUCount" required
-                    @input="emitValueChanged"
-                    :state="getValidationState('totalCPUCount')">
-                </b-form-input>
-            </b-form-group>
-            <b-form-group label="Wall Time Limit" label-for="walltime-limit"
-                :feedback="getValidationFeedback('wallTimeLimit')"
-                :state="getValidationState('wallTimeLimit')">
-                <b-form-input id="walltime-limit" type="number" min="1"
-                    v-model="localComputationalResourceScheduling.wallTimeLimit" required
-                    @input="emitValueChanged"
-                    :state="getValidationState('wallTimeLimit')">
-                </b-form-input>
-            </b-form-group>
-            <div>
-                <i class="fa fa-times" aria-hidden="true"></i>
-                <a href="#" @click.prevent="showConfiguration = false">Hide Settings</a>
+            <div class="row">
+                <div class="col">
+                    <b-form-group label="Select a Queue" label-for="queue"
+                        :feedback="getValidationFeedback('queueName')"
+                        :state="getValidationState('queueName')"
+                        :description="queueDescription">
+                        <b-form-select id="queue"
+                            v-model="localComputationalResourceScheduling.queueName"
+                            :options="queueOptions" required
+                            @change="queueChanged"
+                            :state="getValidationState('queueName')">
+                        </b-form-select>
+                    </b-form-group>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col">
+                    <b-form-group label="Node Count" label-for="node-count"
+                        :feedback="getValidationFeedback('nodeCount')"
+                        :state="getValidationState('nodeCount')">
+                        <b-form-input id="node-count" type="number" min="1"
+                            v-model="localComputationalResourceScheduling.nodeCount" required
+                            @input="emitValueChanged"
+                            :state="getValidationState('nodeCount')">
+                        </b-form-input>
+                    </b-form-group>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col">
+                    <b-form-group label="Total Core Count" label-for="core-count"
+                        :feedback="getValidationFeedback('totalCPUCount')"
+                        :state="getValidationState('totalCPUCount')">
+                        <b-form-input id="core-count" type="number" min="1"
+                            v-model="localComputationalResourceScheduling.totalCPUCount"
required
+                            @input="emitValueChanged"
+                            :state="getValidationState('totalCPUCount')">
+                        </b-form-input>
+                    </b-form-group>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col">
+                    <b-form-group label="Wall Time Limit" label-for="walltime-limit"
+                        :feedback="getValidationFeedback('wallTimeLimit')"
+                        :state="getValidationState('wallTimeLimit')">
+                        <b-form-input id="walltime-limit" type="number" min="1"
+                            v-model="localComputationalResourceScheduling.wallTimeLimit"
required
+                            @input="emitValueChanged"
+                            :state="getValidationState('wallTimeLimit')">
+                        </b-form-input>
+                    </b-form-group>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col">
+                    <div>
+                        <i class="fa fa-times text-secondary" aria-hidden="true"></i>
+                        <a class="text-secondary" href="#" @click.prevent="showConfiguration
= false">Hide Settings</a>
+                    </div>
+                </div>
             </div>
         </div>
-    </b-form>
+    </div>
 </template>
 
 <script>
@@ -91,6 +120,7 @@ export default {
             localComputationalResourceScheduling: this.value.clone(),
             queueDefaults: [],
             showConfiguration: false,
+            queueDescription: null,
         }
     },
     computed: {
@@ -98,7 +128,7 @@ export default {
             const queueOptions = this.queueDefaults.map(queueDefault => {
                 return {
                     value: queueDefault.queueName,
-                    text: `${queueDefault.queueName}: ${queueDefault.queueDescription}`,
+                    text: queueDefault.queueName,
                 }
             });
             return queueOptions;
@@ -111,6 +141,7 @@ export default {
             this.localComputationalResourceScheduling.totalCPUCount = queueDefault.defaultCPUCount;
             this.localComputationalResourceScheduling.nodeCount = queueDefault.defaultNodeCount;
             this.localComputationalResourceScheduling.wallTimeLimit = queueDefault.defaultWalltime;
+            this.queueDescription = queueDefault.queueDescription;
             this.emitValueChanged();
         },
         emitValueChanged: function() {
@@ -137,6 +168,7 @@ export default {
                     this.localComputationalResourceScheduling.totalCPUCount = defaultQueue.defaultCPUCount;
                     this.localComputationalResourceScheduling.nodeCount = defaultQueue.defaultNodeCount;
                     this.localComputationalResourceScheduling.wallTimeLimit = defaultQueue.defaultWalltime;
+                    this.queueDescription = defaultQueue.queueDescription;
                     this.emitValueChanged();
                 });
         },
diff --git a/django_airavata/apps/workspace/static/django_airavata_workspace/js/containers/CreateExperimentContainer.vue
b/django_airavata/apps/workspace/static/django_airavata_workspace/js/containers/CreateExperimentContainer.vue
index e78cc8b..52b6e9d 100644
--- a/django_airavata/apps/workspace/static/django_airavata_workspace/js/containers/CreateExperimentContainer.vue
+++ b/django_airavata/apps/workspace/static/django_airavata_workspace/js/containers/CreateExperimentContainer.vue
@@ -46,3 +46,9 @@ export default {
     }
 }
 </script>
+<style>
+/* style the containing div, in base.html template */
+.main-content {
+    background-color: #ffffff;
+}
+</style>

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

Mime
View raw message