From commits-return-19683-apmail-airavata-commits-archive=airavata.apache.org@airavata.apache.org  Mon Sep 17 17:08:34 2018
Return-Path: <commits-return-19683-apmail-airavata-commits-archive=airavata.apache.org@airavata.apache.org>
X-Original-To: apmail-airavata-commits-archive@www.apache.org
Delivered-To: apmail-airavata-commits-archive@www.apache.org
Received: from mail.apache.org (hermes.apache.org [140.211.11.3])
	by minotaur.apache.org (Postfix) with SMTP id 8CE301B94F
	for <apmail-airavata-commits-archive@www.apache.org>; Mon, 17 Sep 2018 17:08:34 +0000 (UTC)
Received: (qmail 53829 invoked by uid 500); 17 Sep 2018 17:08:34 -0000
Delivered-To: apmail-airavata-commits-archive@airavata.apache.org
Received: (qmail 53650 invoked by uid 500); 17 Sep 2018 17:08:34 -0000
Mailing-List: contact commits-help@airavata.apache.org; run by ezmlm
Precedence: bulk
List-Help: <mailto:commits-help@airavata.apache.org>
List-Unsubscribe: <mailto:commits-unsubscribe@airavata.apache.org>
List-Post: <mailto:commits@airavata.apache.org>
List-Id: <commits.airavata.apache.org>
Reply-To: dev@airavata.apache.org
Delivered-To: mailing list commits@airavata.apache.org
Received: (qmail 53482 invoked by uid 99); 17 Sep 2018 17:08:34 -0000
Received: from ec2-52-202-80-70.compute-1.amazonaws.com (HELO gitbox.apache.org) (52.202.80.70)
    by apache.org (qpsmtpd/0.29) with ESMTP; Mon, 17 Sep 2018 17:08:34 +0000
Received: by gitbox.apache.org (ASF Mail Server at gitbox.apache.org, from userid 33)
	id A5E6C82BCC; Mon, 17 Sep 2018 17:08:33 +0000 (UTC)
Date: Mon, 17 Sep 2018 17:08:36 +0000
To: "commits@airavata.apache.org" <commits@airavata.apache.org>
Subject: [airavata-django-portal] 03/03: AIRAVATA-2876 Fixing App Interface
 loading
MIME-Version: 1.0
Content-Type: text/plain; charset=utf-8
Content-Transfer-Encoding: 8bit
From: machristie@apache.org
In-Reply-To: <153720411352.22644.10557767929244754850@gitbox.apache.org>
References: <153720411352.22644.10557767929244754850@gitbox.apache.org>
X-Git-Host: gitbox.apache.org
X-Git-Repo: airavata-django-portal
X-Git-Refname: refs/heads/master
X-Git-Reftype: branch
X-Git-Rev: 6dec549751e03bcf86f4d66004bd1e6b09ba4c66
X-Git-NotificationType: diff
X-Git-Multimail-Version: 1.5.dev
Auto-Submitted: auto-generated
Message-Id: <20180917170833.A5E6C82BCC@gitbox.apache.org>

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>