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 <machrist@iu.edu>
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>