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 c686e2e2aee068275a68570f9a994c6672730324
Author: Marcus Christie <machrist@iu.edu>
AuthorDate: Tue Aug 28 15:42:22 2018 -0400

    AIRAVATA-2876 Basic routing structure of app editor
---
 .../applications/ApplicationDeploymentEditor.vue   |  10 +
 .../applications/ApplicationDeploymentsList.vue    |  13 ++
 .../applications/ApplicationEditorContainer.vue    |  59 ++++++
 .../applications/ApplicationInterfaceEditor.vue    |  10 +
 .../applications/ApplicationModuleEditor.vue       |  10 +
 .../dashboards/ApplicationsDashboard.vue           |   2 +-
 .../src/components/tabs/TabbedView.vue             |   2 +-
 .../static/django_airavata_admin/src/router.js     |  59 +++++-
 .../django_airavata_admin/static/css/admin.css     |   8 +-
 django_airavata/static/css/admin.css               | 206 ---------------------
 django_airavata/static/css/app.css                 |   1 -
 django_airavata/static/css/app.css.map             |   1 -
 django_airavata/static/css/base.css                |  30 ---
 django_airavata/static/css/draft-colors.css        |   3 -
 django_airavata/static/css/main.css                | 145 ---------------
 django_airavata/static/css/main.css.map            |   7 -
 16 files changed, 162 insertions(+), 404 deletions(-)

diff --git a/django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/ApplicationDeploymentEditor.vue b/django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/ApplicationDeploymentEditor.vue
new file mode 100644
index 0000000..ebfa79a
--- /dev/null
+++ b/django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/ApplicationDeploymentEditor.vue
@@ -0,0 +1,10 @@
+<template>
+    <div>Application Deployment Editor</div>
+</template>
+
+<script>
+export default {
+    name: 'application-deployment-editor'
+}
+</script>
+
diff --git a/django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/ApplicationDeploymentsList.vue b/django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/ApplicationDeploymentsList.vue
new file mode 100644
index 0000000..f7a53c8
--- /dev/null
+++ b/django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/ApplicationDeploymentsList.vue
@@ -0,0 +1,13 @@
+<template>
+    <div>
+        Application Deployments List
+        <router-link :to="{name: 'application_deployment', params: {id: 'foo', deployment_id: 'bar'}}">Deployment</router-link>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'application-deployments-list'
+}
+</script>
+
diff --git a/django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/ApplicationEditorContainer.vue b/django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/ApplicationEditorContainer.vue
new file mode 100644
index 0000000..8913127
--- /dev/null
+++ b/django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/ApplicationEditorContainer.vue
@@ -0,0 +1,59 @@
+<template>
+    <div>
+        <div class="row">
+            <div class="col">
+                <h1 class="h4 mb-4">
+                    {{ title }}
+                </h1>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col">
+                <b-nav tabs>
+                    <b-nav-item exact-active-class="active" exact :to="{name: id ? 'application_module' : 'new_application_module', params: {id: id}}">Details</b-nav-item>
+                    <b-nav-item exact-active-class="active" exact :to="{name: 'application_interface', params: {id: id}}" :disabled="!id">Interface</b-nav-item>
+                    <b-nav-item active-class="active" :to="{name: 'application_deployments', params: {id: id}}" :disabled="!id">Deployments</b-nav-item>
+                </b-nav>
+                <router-view name="module"/>
+                <router-view name="interface"/>
+                <router-view name="deployments"/>
+                <router-view name="deployment"/>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'application-editor-container',
+    props: {
+        id: String
+    },
+    data: function() {
+        return {
+            module: null,
+            interface: null,
+            deployments: null,
+            deployment: null,
+        }
+    },
+    computed: {
+        title: function() {
+            if (this.id) {
+
+                return this.module && this.module.appModuleName ? this.module.appModuleName : "";
+            } else {
+                return "Create a New Application";
+            }
+        }
+    }
+}
+</script>
+
+<style>
+/* style the containing div, in base.html template */
+/* .main-content {
+    background-color: #ffffff;
+} */
+</style>
+
diff --git a/django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/ApplicationInterfaceEditor.vue b/django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/ApplicationInterfaceEditor.vue
new file mode 100644
index 0000000..1137fad
--- /dev/null
+++ b/django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/ApplicationInterfaceEditor.vue
@@ -0,0 +1,10 @@
+<template>
+    <div>Application Interface Editor</div>
+</template>
+
+<script>
+export default {
+    name: 'application-interface-editor'
+}
+</script>
+
diff --git a/django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/ApplicationModuleEditor.vue b/django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/ApplicationModuleEditor.vue
new file mode 100644
index 0000000..fcc70a9
--- /dev/null
+++ b/django_airavata/apps/admin/static/django_airavata_admin/src/components/applications/ApplicationModuleEditor.vue
@@ -0,0 +1,10 @@
+<template>
+    <div>Application Module Editor</div>
+</template>
+
+<script>
+export default {
+    name: 'application-module-editor'
+}
+</script>
+
diff --git a/django_airavata/apps/admin/static/django_airavata_admin/src/components/dashboards/ApplicationsDashboard.vue b/django_airavata/apps/admin/static/django_airavata_admin/src/components/dashboards/ApplicationsDashboard.vue
index 88da9f2..afc4632 100644
--- a/django_airavata/apps/admin/static/django_airavata_admin/src/components/dashboards/ApplicationsDashboard.vue
+++ b/django_airavata/apps/admin/static/django_airavata_admin/src/components/dashboards/ApplicationsDashboard.vue
@@ -61,7 +61,7 @@
         this.setTitle("Edit Application")
         this.resetApplication()
         this.setModule(item)
-        this.$router.push({name: 'details'})
+        this.$router.push({name: 'application_module', params: {id: item.appModuleId}})
       },
       resetApplication:function () {
         console.log("Resetting")
diff --git a/django_airavata/apps/admin/static/django_airavata_admin/src/components/tabs/TabbedView.vue b/django_airavata/apps/admin/static/django_airavata_admin/src/components/tabs/TabbedView.vue
index 3e88e8a..a5c3e17 100644
--- a/django_airavata/apps/admin/static/django_airavata_admin/src/components/tabs/TabbedView.vue
+++ b/django_airavata/apps/admin/static/django_airavata_admin/src/components/tabs/TabbedView.vue
@@ -64,7 +64,7 @@
     }
   }
 </script>
-<style>
+<style scoped>
   .new_app {
     margin: 45px;
     width: 70%;
diff --git a/django_airavata/apps/admin/static/django_airavata_admin/src/router.js b/django_airavata/apps/admin/static/django_airavata_admin/src/router.js
index 62893e3..9e737a2 100644
--- a/django_airavata/apps/admin/static/django_airavata_admin/src/router.js
+++ b/django_airavata/apps/admin/static/django_airavata_admin/src/router.js
@@ -1,13 +1,18 @@
-import ApplicationsDashboard from './components/dashboards/ApplicationsDashboard.vue'
-import NewApplication from './components/admin/NewApplication.vue'
-import ExperimentsDashboard from './components/dashboards/ExperimentDashboard.vue'
+import ApplicationDeploymentEditor from './components/applications/ApplicationDeploymentEditor.vue'
+import ApplicationDeployments from './components/admin/ApplicationDeployments.vue'
+import ApplicationDeploymentsList from './components/applications/ApplicationDeploymentsList.vue'
 import ApplicationDetails from './components/admin/ApplicationDetails.vue'
+import ApplicationEditorContainer from './components/applications/ApplicationEditorContainer.vue'
 import ApplicationInterface from './components/admin/ApplicationInterface.vue'
-import ApplicationDeployments from './components/admin/ApplicationDeployments.vue'
-import GroupComputeResourcePreference from './components/admin/group_resource_preferences/GroupComputeResourcePreference'
+import ApplicationInterfaceEditor from './components/applications/ApplicationInterfaceEditor.vue'
+import ApplicationModuleEditor from './components/applications/ApplicationModuleEditor.vue'
+import ApplicationsDashboard from './components/dashboards/ApplicationsDashboard.vue'
 import ComputePreference from './components/admin/group_resource_preferences/ComputePreference'
 import ComputeResourcePreferenceDashboard from './components/dashboards/ComputeResourcePreferenceDashboard'
 import CredentialStoreDashboard from './components/dashboards/CredentialStoreDashboard'
+import ExperimentsDashboard from './components/dashboards/ExperimentDashboard.vue'
+import GroupComputeResourcePreference from './components/admin/group_resource_preferences/GroupComputeResourcePreference'
+import NewApplication from './components/admin/NewApplication.vue'
 import VueRouter from 'vue-router'
 
 
@@ -31,6 +36,50 @@ const routes = [
       }
     ]
   },
+  {
+    path: '/applications/new', component: ApplicationEditorContainer, name: 'new_application',
+    children: [
+      // TODO: Maybe only have the module route for a new application, save it
+      // and then replace the URL with the module id
+      {
+        path: '', components: {
+          module: ApplicationModuleEditor
+        },
+        name: 'new_application_module'
+      },
+    ]
+  },
+  {
+    path: '/applications/:id', component: ApplicationEditorContainer, name: 'application',
+    props: true,
+    children: [
+      {
+        path: '', components: {
+          module: ApplicationModuleEditor
+        },
+        name: 'application_module'
+      },
+      {
+        path: 'interface', components: {
+          interface: ApplicationInterfaceEditor
+        },
+        name: 'application_interface'
+      },
+      {
+        path: 'deployments', components: {
+          deployments: ApplicationDeploymentsList
+        },
+        name: 'application_deployments'
+      },
+      {
+        path: 'deployments/:deployment_id', components: {
+          deployment: ApplicationDeploymentEditor
+        },
+        name: 'application_deployment',
+        props: true
+      },
+    ]
+  },
   {path: '/applications', component: ApplicationsDashboard},
   {path: '/experiments', component: ExperimentsDashboard, name: 'experiments_dashboard'},
   {
diff --git a/django_airavata/apps/admin/static/django_airavata_admin/static/css/admin.css b/django_airavata/apps/admin/static/django_airavata_admin/static/css/admin.css
index 0548096..3b633b7 100644
--- a/django_airavata/apps/admin/static/django_airavata_admin/static/css/admin.css
+++ b/django_airavata/apps/admin/static/django_airavata_admin/static/css/admin.css
@@ -139,7 +139,7 @@ button, input[type="button"] {
   color: inherit;
 }
 
-.active {
+/* .active {
   color: #333333;
   border-top: solid #999999 1px;
   border-left: solid #999999 1px;
@@ -147,12 +147,12 @@ button, input[type="button"] {
   border-bottom: hidden;
   border-top-right-radius: 3px;
   border-top-left-radius: 3px;
-}
+} */
 
-.tabs {
+/* .tabs {
   display: flex;
   width: 100%;
-}
+} */
 
 .deployment.btn {
   float: right;
diff --git a/django_airavata/static/css/admin.css b/django_airavata/static/css/admin.css
deleted file mode 100644
index 8c63f3d..0000000
--- a/django_airavata/static/css/admin.css
+++ /dev/null
@@ -1,206 +0,0 @@
-.entry {
-  margin-top: 20px;
-  display: block;
-}
-
-.entry .heading {
-  font-size: 16px;
-  font-weight: bold;
-  margin-bottom: 10px;
-}
-
-input[type="text"], input[type="number"], textarea, select {
-  width: 100%;
-  border-radius: 2px;
-  border: solid #dddddd 1px;
-  padding: 7px;
-  height: 40px;
-}
-
-button, input[type="button"] {
-  outline: none;
-}
-
-.main_section {
-  width: 100%;
-  display: block;
-  margin-top: 50px;
-  margin-bottom: 20px;
-}
-
-.new-application-tab-main {
-  width: 65%;
-  margin-bottom: 30px;
-}
-
-.btns {
-  margin-top: 50px;
-  display: inline-block;
-  width: 100%;
-}
-
-.vbtn {
-  margin-left: 20px;
-  text-align: center;
-  border-color: #007BFF;
-  border-style: solid;
-  border-radius: 3px;
-  padding-top: 5px;
-  padding-bottom: 5px;
-  padding-left: 15px;
-  padding-right: 15px;
-}
-
-.vbtn:hover {
-  background-color: #3ca41a;
-  color: #f1fff3;
-  border-color: #3ca41a;
-}
-
-.vbtn-default {
-  background-color: #007BFF;
-  color: white;
-}
-
-.vbtn.vbtn-default:active, .vbtn.vbtn-cancel:active {
-  background-color: #f1fff3;
-  color: #3ca41a;
-  border-color: #3ca41a;
-}
-
-.vbtn-cancel {
-  color: #007BFF;
-  background-color: white;
-}
-
-.interface-main {
-  border: solid 1px #dddddd;
-  border-radius: 4px;
-}
-
-.input-field-header {
-  background-color: #F8F8F8;
-  width: 100%;
-  padding: 15px;
-  border: solid 1px #dddddd;
-  text-align: left;
-}
-
-.vmain {
-  z-index: 1;
-  width: 100%;
-}
-
-.fade-enter-active, .fade-leave-active {
-  transition-property: opacity;
-  transition-duration: .25s;
-}
-
-.fade-enter-active {
-  transition-delay: .25s;
-}
-
-.fade-enter, .fade-leave-active {
-  opacity: 0
-}
-
-.new_app {
-  margin: 45px;
-  width: 70%;
-}
-
-.main {
-  width: 100%;
-  margin-top: 50px;
-}
-
-.tab {
-  text-align: center;
-  width: 120px;
-  margin-bottom: 15px;
-  border-bottom: solid #999999 1px;
-  color: #007BFF;
-}
-
-.tab .lbl:hover {
-  cursor: pointer;
-}
-
-.active .lbl:hover {
-  cursor: default;
-}
-
-.lbl {
-  margin: 10px;
-  color: inherit;
-}
-
-.link {
-  color: inherit;
-}
-
-.active {
-  color: #333333;
-  border-top: solid #999999 1px;
-  border-left: solid #999999 1px;
-  border-right: solid #999999 1px;
-  border-bottom: hidden;
-  border-top-right-radius: 3px;
-  border-top-left-radius: 3px;
-}
-
-.tabs {
-  display: flex;
-  width: 100%;
-}
-
-.deployment.btn {
-  float: right;
-  text-align: center;
-  border-color: #007BFF;
-  border-style: solid;
-  border-radius: 3px;
-  padding-top: 5px;
-  padding-bottom: 5px;
-  padding-left: 15px;
-  padding-right: 15px;
-  color: #007BFF;
-  background-color: white;
-  width: auto;
-  float: left;
-}
-
-.deployment.btn:hover {
-  color: white;
-  background-color: rgba(0, 105, 217, 1);
-}
-
-.deployment.btn:active {
-  background-color: #f1fff3;
-  color: #3ca41a;
-  border-color: #3ca41a;
-}
-
-.deployment-entry {
-  display: inline-block;
-  margin-top: 15px;
-  width: 100%;
-}
-
-.name_value {
-  display: inline-flex;
-  width: 100%;
-  margin-bottom: 5px;
-}
-
-.name_value input {
-  width: 50%;
-  display: inline-flex;
-  margin-right: 5px;
-}
-.tab-view{
-  padding:15px;
-  width:100%;
-}
-
-
diff --git a/django_airavata/static/css/app.css b/django_airavata/static/css/app.css
deleted file mode 100644
index 3443efd..0000000
--- a/django_airavata/static/css/app.css
+++ /dev/null
@@ -1 +0,0 @@
-.gen{padding:10px;width:40%;height:100%}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.ssh{padding:10px;border-bottom:1px solid #ddd;-webkit-animation:fadeIn 1s;animation:fadeIn 1s}.ssh.remove{-webkit-animation:fadeOut 1s;animation:fadeOut 1s;opacity:1}.ssh-key,.ssh-val{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline- [...]
\ No newline at end of file
diff --git a/django_airavata/static/css/app.css.map b/django_airavata/static/css/app.css.map
deleted file mode 100644
index e788fad..0000000
--- a/django_airavata/static/css/app.css.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"sources":["webpack:///./static/django_airavata_admin/src/components/dashboards/CredentialStore.vue","webpack:///./static/django_airavata_admin/src/components/admin/GenerateSSHKey.vue","webpack:///./static/django_airavata_admin/src/components/Loading.vue","webpack:///./static/django_airavata_admin/src/components/tabs/TabbedView.vue","webpack:///./static/django_airavata_admin/src/components/admin/compute_resource/DescriptionTab.vue","webpack:///./static/django_airavata_admin/ [...]
\ No newline at end of file
diff --git a/django_airavata/static/css/base.css b/django_airavata/static/css/base.css
deleted file mode 100644
index 529571b..0000000
--- a/django_airavata/static/css/base.css
+++ /dev/null
@@ -1,30 +0,0 @@
-
-#mainheader {
-    height: 84px;
-    position: relative;
-}
-#mainheader .logo {
-    max-height: 100%;
-    background-color: #3D84A8;
-    vertical-align: top;
-}
-#mainheader > * {
-    display: inline-block;
-}
-#mainheader header {
-    margin-left: 40px;
-    margin-right: 40px;
-}
-#mainheader h1 {
-    font-size: 20px;
-    color: #666666;
-    line-height: 84px;
-    margin-top: 0px;
-    margin-bottom: 0px;
-}
-#user-nav {
-    top: 50%;
-    margin-top: -25px;
-    right: 0px;
-    position: absolute;
-}
\ No newline at end of file
diff --git a/django_airavata/static/css/draft-colors.css b/django_airavata/static/css/draft-colors.css
deleted file mode 100644
index 6e1cb97..0000000
--- a/django_airavata/static/css/draft-colors.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.purple {
-  color: purple;
-}
diff --git a/django_airavata/static/css/main.css b/django_airavata/static/css/main.css
deleted file mode 100644
index 523b230..0000000
--- a/django_airavata/static/css/main.css
+++ /dev/null
@@ -1,145 +0,0 @@
-html,
-body {
-  height: 100%; }
-
-body {
-  color: #333;
-  background-color: #f7f7f7; }
-
-.c-header {
-  display: flex;
-  align-items: center;
-  border-bottom: 1px solid #ddd;
-  background-color: #ffffff; }
-  .c-header__logo {
-    margin-right: 1rem;
-    width: 70px;
-    background-color: #990000; }
-    .c-header__logo svg {
-      display: block; }
-  .c-header__title {
-    font-size: 1.25rem;
-    line-height: 1; }
-    .c-header__title a {
-      color: #333; }
-  .c-header__controls {
-    margin-left: auto;
-    margin-right: 2rem; }
-
-.c-nav {
-  background-color: #444;
-  min-width: 70px;
-  min-height: 60px;
-  padding: 1rem 0;
-  margin-top: -1px;
-  display: flex; }
-  .c-nav__item {
-    color: #ccc;
-    font-size: 1.5rem;
-    display: block;
-    text-align: center;
-    line-height: 1;
-    flex-grow: 1; }
-    .c-nav__item:hover, .c-nav__item:focus {
-      color: #ffffff; }
-    .c-nav__item:active {
-      color: #bbb; }
-    .c-nav__item.is-active {
-      color: #ffffff; }
-
-@media screen and (min-width: 768px) {
-  .c-nav {
-    height: 100%;
-    flex-direction: column; }
-    .c-nav__item {
-      flex-grow: 0;
-      margin-bottom: 2rem; } }
-.stage {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column; }
-
-@media screen and (min-width: 768px) {
-  .stage {
-    flex-direction: row; } }
-.main-content {
-  flex-grow: 1;
-  padding: 1rem; }
-
-.sidebar {
-  flex-basis: 200px;
-  background-color: #ffffff; }
-
-.sidebar-header {
-  padding: 1.5rem;
-  display: flex;
-  align-items: center;
-  border-bottom: 1px solid #eee; }
-  .sidebar-header__title {
-    font-size: .825rem;
-    text-transform: uppercase;
-    letter-spacing: .04rem;
-    margin: 0; }
-  .sidebar-header__action {
-    margin-left: auto;
-    font-size: .825rem; }
-
-@media screen and (min-width: 768px) {
-  .sidebar {
-    min-width: 310px;
-    border-left: 1px solid #ddd; } }
-.card {
-  background-color: #fff;
-  border-radius: 4px;
-  border: none;
-  box-shadow: 0 2px 0 #eee;
-  margin-bottom: 30px; }
-
-/**
- * Make a small card text modifier so we can still use
- * Bootstrap's default styles if needed.
- */
-.card-text--small {
-  line-height: 1.4;
-  font-size: .825rem; }
-
-.card.is-disabled {
-  background-color: #ddd; }
-  .card.is-disabled .card-title {
-    color: #999999; }
-  .card.is-disabled .badge {
-    background-color: #ccc;
-    color: #999999; }
-
-.card-link:hover {
-  text-decoration: none;
-  background-color: #fafafa; }
-
-.card.is-disabled .card-link:hover {
-  background-color: #ddd;
-  cursor: not-allowed; }
-
-/**
- * Feed
- */
-.feed {
-  list-style: none;
-  margin: 0;
-  padding: 0; }
-  .feed__list-item {
-    padding: 1.5rem;
-    border-bottom: 1px solid #eee; }
-  .feed__label {
-    font-size: .825rem;
-    text-transform: uppercase; }
-  .feed__title {
-    font-size: 1rem;
-    margin: 0; }
-    .feed__title a {
-      color: #212529; }
-  .feed__item-meta {
-    margin: 0;
-    font-size: .825rem; }
-
-/*# sourceMappingURL=main.css.map */
diff --git a/django_airavata/static/css/main.css.map b/django_airavata/static/css/main.css.map
deleted file mode 100644
index 3f5b826..0000000
--- a/django_airavata/static/css/main.css.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-"version": 3,
-"mappings": "AAAA;IACK;EACH,MAAM,EAAE,IAAI;;AAGd,IAAK;EACH,KAAK,EAAE,IAAI;EACX,gBAAgB,EAAE,OAAO;;AAG3B,SAAU;EACR,OAAO,EAAE,IAAI;EACb,WAAW,EAAE,MAAM;EACnB,aAAa,EAAE,cAAc;EAC7B,gBAAgB,EAAE,OAAO;EAEzB,eAAQ;IACN,YAAY,EAAE,IAAI;IAClB,KAAK,EAAE,IAAI;IACX,gBAAgB,EAAE,OAAO;IAEzB,mBAAI;MACF,OAAO,EAAE,KAAK;EAIlB,gBAAS;IACP,SAAS,EAAE,OAAO;IAClB,WAAW,EAAE,CAAC;IAEd,kBAAE;MACA,KAAK,EAAE,IAAI;EAIf,mBAAY;IACV,WAAW,EAAE,IAAI;IACjB,YAAY,EAAE,IAAI;;AAItB,MAAO;EACL,gBAAgB,EAAE,IAAI;EACtB,SAAS,EAAE,IAAI;EAC [...]
-"sources": ["main.scss"],
-"names": [],
-"file": "main.css"
-}
\ No newline at end of file