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 6dec549751e03bcf86f4d66004bd1e6b09ba4c66 Author: Marcus Christie <[email protected]> AuthorDate: Mon Sep 17 13:02:43 2018 -0400 AIRAVATA-2876 Fixing App Interface loading --- .../js/services/ApplicationInterfaceService.js | 34 ---- .../js/containers/CreateExperimentContainer.vue | 105 ++++++------ .../js/containers/ExperimentListContainer.vue | 188 +++++++++++---------- 3 files changed, 158 insertions(+), 169 deletions(-) diff --git a/django_airavata/apps/api/static/django_airavata_api/js/services/ApplicationInterfaceService.js b/django_airavata/apps/api/static/django_airavata_api/js/services/ApplicationInterfaceService.js deleted file mode 100644 index ce693b7..0000000 --- a/django_airavata/apps/api/static/django_airavata_api/js/services/ApplicationInterfaceService.js +++ /dev/null @@ -1,34 +0,0 @@ - -import ApplicationInterfaceDefinition from '../models/ApplicationInterfaceDefinition' -import FetchUtils from '../utils/FetchUtils' - -class ApplicationIterfaceService { - list(data = null) { - // TODO - } - - create(project) { - // TODO - } - - update() { - // TODO - } - - get(appInterfaceId) { - return FetchUtils.get('/api/application-interfaces/' + encodeURIComponent(appInterfaceId) + '/') - .then(json => new ApplicationInterfaceDefinition(json)) - } - - getForAppModuleId(appModuleId) { - return FetchUtils.get('/api/applications/' + encodeURIComponent(appModuleId) + '/application_interface/') - .then(json => new ApplicationInterfaceDefinition(json)) - } - - getComputeResources(appInterfaceId) { - return FetchUtils.get('/api/application-interfaces/' + encodeURIComponent(appInterfaceId) + '/compute_resources/'); - } -} - -// Export as a singleton -export default new ApplicationIterfaceService(); 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 e13809c..5cdd02f 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 @@ -1,65 +1,70 @@ <template> - <experiment-editor v-if="experiment" :experiment="experiment" - :app-module="appModule" - @saved="handleSavedExperiment" - @savedAndLaunched="handleSavedAndLaunchedExperiment"> - <span slot="title">Create a New Experiment</span> - </experiment-editor> + <experiment-editor v-if="experiment" :experiment="experiment" :app-module="appModule" @saved="handleSavedExperiment" @savedAndLaunched="handleSavedAndLaunchedExperiment"> + <span slot="title">Create a New Experiment</span> + </experiment-editor> </template> <script> +import { models, services } from "django-airavata-api"; +import ExperimentEditor from "../components/experiment/ExperimentEditor.vue"; -import {models, services} from 'django-airavata-api' -import ExperimentEditor from '../components/experiment/ExperimentEditor.vue' - -import moment from 'moment'; +import moment from "moment"; export default { - name: 'create-experiment-container', - props: [ - 'app-module-id', - ], - data () { - return { - 'experiment': null, - 'appModule': null, - } - }, - components: { - 'experiment-editor': ExperimentEditor, - }, - methods: { - handleSavedExperiment: function(experiment) { - // Redirect to experiment view - window.location.assign("/workspace/experiments/" + encodeURIComponent(experiment.experimentId) + "/"); - }, - handleSavedAndLaunchedExperiment: function(experiment) { - // Redirect to experiment view - window.location.assign("/workspace/experiments/" + encodeURIComponent(experiment.experimentId) + "/?launching=true"); - } + name: "create-experiment-container", + props: ["app-module-id"], + data() { + return { + experiment: null, + appModule: null + }; + }, + components: { + "experiment-editor": ExperimentEditor + }, + methods: { + handleSavedExperiment: function(experiment) { + // Redirect to experiment view + window.location.assign( + "/workspace/experiments/" + + encodeURIComponent(experiment.experimentId) + + "/" + ); }, - computed: { - }, - mounted: function () { - const experiment = new models.Experiment(); - const loadAppModule = services.ApplicationModuleService.retrieve({lookup: this.appModuleId}) - .then(appModule => { - experiment.experimentName = appModule.appModuleName + ' on ' + moment().format('lll'); - this.appModule = appModule; - }); - const loadAppInterface = services.ApplicationInterfaceService.getForAppModuleId(this.appModuleId) - .then(appInterface => { - experiment.populateInputsOutputsFromApplicationInterface(appInterface); - experiment.executionId = appInterface.applicationInterfaceId; - }); - Promise.all([loadAppModule, loadAppInterface]) - .then(() => this.experiment = experiment); + handleSavedAndLaunchedExperiment: function(experiment) { + // Redirect to experiment view + window.location.assign( + "/workspace/experiments/" + + encodeURIComponent(experiment.experimentId) + + "/?launching=true" + ); } -} + }, + computed: {}, + mounted: function() { + const experiment = new models.Experiment(); + const loadAppModule = services.ApplicationModuleService.retrieve({ + lookup: this.appModuleId + }).then(appModule => { + experiment.experimentName = + appModule.appModuleName + " on " + moment().format("lll"); + this.appModule = appModule; + }); + const loadAppInterface = services.ApplicationModuleService.getApplicationInterface( + { lookup: this.appModuleId } + ).then(appInterface => { + experiment.populateInputsOutputsFromApplicationInterface(appInterface); + experiment.executionId = appInterface.applicationInterfaceId; + }); + Promise.all([loadAppModule, loadAppInterface]).then( + () => (this.experiment = experiment) + ); + } +}; </script> <style> /* style the containing div, in base.html template */ .main-content { - background-color: #ffffff; + background-color: #ffffff; } </style> diff --git a/django_airavata/apps/workspace/static/django_airavata_workspace/js/containers/ExperimentListContainer.vue b/django_airavata/apps/workspace/static/django_airavata_workspace/js/containers/ExperimentListContainer.vue index 9966940..58cfdee 100644 --- a/django_airavata/apps/workspace/static/django_airavata_workspace/js/containers/ExperimentListContainer.vue +++ b/django_airavata/apps/workspace/static/django_airavata_workspace/js/containers/ExperimentListContainer.vue @@ -1,103 +1,121 @@ <template> - <div> - <div class="row"> - <div class="col"> - <h1 class="h4 mb-4">Browse Experiments</h1> - </div> - </div> - <div class="row"> - <div class="col"> - <div class="card"> - <div class="card-body"> - <table class="table table-hover"> - <thead> - <tr> - <th>Name</th> - <th>Application</th> - <th>Creation Time</th> - <th>Status</th> - <th>Actions</th> - </tr> - </thead> - <tbody> - <tr v-for="experiment in experiments" :key="experiment.experimentId"> - <td>{{experiment.name}}</td> - <td>{{applicationName(experiment)}}</td> - <td><span :title="experiment.creationTime">{{ fromNow(experiment.creationTime) }}</span></td> - <td><experiment-status-badge :statusName="experiment.experimentStatus" /></td> - <td> - <a :href="viewLink(experiment)">View <i class="fa fa-bar-chart" aria-hidden="true"></i></a> - </td> - </tr> - </tbody> - </table> - <pager v-bind:paginator="experimentsPaginator" - v-on:next="nextExperiments" v-on:previous="previousExperiments"></pager> - </div> - </div> - </div> + <div> + <div class="row"> + <div class="col"> + <h1 class="h4 mb-4">Browse Experiments</h1> + </div> + </div> + <div class="row"> + <div class="col"> + <div class="card"> + <div class="card-body"> + <table class="table table-hover"> + <thead> + <tr> + <th>Name</th> + <th>Application</th> + <th>Creation Time</th> + <th>Status</th> + <th>Actions</th> + </tr> + </thead> + <tbody> + <tr v-for="experiment in experiments" :key="experiment.experimentId"> + <td>{{experiment.name}}</td> + <td>{{applicationName(experiment)}}</td> + <td> + <span :title="experiment.creationTime">{{ fromNow(experiment.creationTime) }}</span> + </td> + <td> + <experiment-status-badge :statusName="experiment.experimentStatus" /> + </td> + <td> + <a :href="viewLink(experiment)">View + <i class="fa fa-bar-chart" aria-hidden="true"></i> + </a> + </td> + </tr> + </tbody> + </table> + <pager v-bind:paginator="experimentsPaginator" v-on:next="nextExperiments" v-on:previous="previousExperiments"></pager> + </div> </div> + </div> </div> + </div> </template> <script> +import { models, services } from "django-airavata-api"; +import { components as comps } from "django-airavata-common-ui"; -import { models, services } from 'django-airavata-api' -import { components as comps } from 'django-airavata-common-ui' +import ExperimentStatusBadge from "../components/experiment/ExperimentStatusBadge.vue"; -import ExperimentStatusBadge from '../components/experiment/ExperimentStatusBadge.vue' - -import moment from 'moment'; +import moment from "moment"; export default { - props: ['initialExperimentsData'], - name: 'experiment-list-container', - data () { - return { - experimentsPaginator: null, - applicationInterfaces: {}, - } + props: ["initialExperimentsData"], + name: "experiment-list-container", + data() { + return { + experimentsPaginator: null, + applicationInterfaces: {} + }; + }, + components: { + pager: comps.Pager, + "experiment-status-badge": ExperimentStatusBadge + }, + methods: { + nextExperiments: function(event) { + this.experimentsPaginator.next(); }, - components: { - 'pager': comps.Pager, - 'experiment-status-badge': ExperimentStatusBadge, + previousExperiments: function(event) { + this.experimentsPaginator.previous(); }, - methods: { - nextExperiments: function(event) { - this.experimentsPaginator.next(); - }, - previousExperiments: function(event) { - this.experimentsPaginator.previous(); - }, - fromNow: function(date) { - return moment(date).fromNow(); - }, - viewLink: function(experiment) { - return '/workspace/experiments/' + encodeURIComponent(experiment.experimentId) + '/'; - }, - applicationName: function(experiment) { - if (experiment.executionId in this.applicationInterfaces){ - if (this.applicationInterfaces[experiment.executionId] instanceof models.ApplicationInterfaceDefinition) { - return this.applicationInterfaces[experiment.executionId].applicationName; - } - } else { - const request = services.ApplicationInterfaceService.get(experiment.executionId) - .then(result => this.$set(this.applicationInterfaces, experiment.executionId, result)); - this.$set(this.applicationInterfaces, experiment.executionId, request); - } - return "..."; - } + fromNow: function(date) { + return moment(date).fromNow(); }, - computed: { - experiments: function() { - return this.experimentsPaginator ? this.experimentsPaginator.results : null; - }, + viewLink: function(experiment) { + return ( + "/workspace/experiments/" + + encodeURIComponent(experiment.experimentId) + + "/" + ); }, - beforeMount: function () { - services.ExperimentSearchService.list(this.initialExperimentsData) - .then(result => this.experimentsPaginator = result); + applicationName: function(experiment) { + if (experiment.executionId in this.applicationInterfaces) { + if ( + this.applicationInterfaces[experiment.executionId] instanceof + models.ApplicationInterfaceDefinition + ) { + return this.applicationInterfaces[experiment.executionId] + .applicationName; + } + } else { + const request = services.ApplicationInterfaceService.retrieve({ + lookup: experiment.executionId + }).then(result => + this.$set(this.applicationInterfaces, experiment.executionId, result) + ); + this.$set(this.applicationInterfaces, experiment.executionId, request); + } + return "..."; + } + }, + computed: { + experiments: function() { + return this.experimentsPaginator + ? this.experimentsPaginator.results + : null; } -} + }, + beforeMount: function() { + services.ExperimentSearchService.list(this.initialExperimentsData).then( + result => (this.experimentsPaginator = result) + ); + } +}; </script> <style>
