You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@airavata.apache.org by ma...@apache.org on 2017/11/20 19:01:34 UTC

[airavata-django-portal] 06/06: AIRAVATA-2597 Simple display of Applications on Dashboard

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 8985043eafde2180464765b10af9b9296b2d0465
Author: Marcus Christie <ma...@iu.edu>
AuthorDate: Mon Nov 20 14:01:19 2017 -0500

    AIRAVATA-2597 Simple display of Applications on Dashboard
---
 .../api/static/django_airavata_api/js/index.js     | 14 +++++----
 .../js/models/ApplicationModule.js                 | 30 +++++++++++++++++++
 .../js/services/ApplicationModuleService.js        | 29 ++++++++++++++++++
 django_airavata/apps/api/views.py                  |  9 ------
 .../js/views/DashboardContainer.vue                | 16 ++++++++++
 .../common/js/components/ApplicationCard.vue       | 34 ++++++++++++++++++++++
 django_airavata/static/common/js/index.js          |  4 ++-
 django_airavata/static/common/webpack.config.js    |  9 +++---
 8 files changed, 126 insertions(+), 19 deletions(-)

diff --git a/django_airavata/apps/api/static/django_airavata_api/js/index.js b/django_airavata/apps/api/static/django_airavata_api/js/index.js
index db0c5c6..d74dda2 100644
--- a/django_airavata/apps/api/static/django_airavata_api/js/index.js
+++ b/django_airavata/apps/api/static/django_airavata_api/js/index.js
@@ -1,20 +1,24 @@
 
+import ApplicationModule from './models/ApplicationModule'
 import Project from './models/Project'
 
+import ApplicationModuleService from './services/ApplicationModuleService'
 import ProjectService from './services/ProjectService'
 
-import PaginationIterator from './utils/PaginationIterator'
 import FetchUtils from './utils/FetchUtils'
+import PaginationIterator from './utils/PaginationIterator'
 
 exports.models = {
-    Project: Project,
+    ApplicationModule,
+    Project,
 }
 
 exports.services = {
-    ProjectService: ProjectService,
+    ApplicationModuleService,
+    ProjectService,
 }
 
 exports.utils = {
-    PaginationIterator: PaginationIterator,
-    FetchUtils: FetchUtils,
+    FetchUtils,
+    PaginationIterator,
 }
diff --git a/django_airavata/apps/api/static/django_airavata_api/js/models/ApplicationModule.js b/django_airavata/apps/api/static/django_airavata_api/js/models/ApplicationModule.js
new file mode 100644
index 0000000..9c93db7
--- /dev/null
+++ b/django_airavata/apps/api/static/django_airavata_api/js/models/ApplicationModule.js
@@ -0,0 +1,30 @@
+import BaseModel from './BaseModel';
+
+export default class ApplicationModule extends BaseModel {
+    constructor(data = {}) {
+        super(data);
+        this.appModuleId = null;
+        this.appModuleName = null;
+        this.appModuleVersion = null;
+        this.appModuleDescription = null;
+        this.copyData(data);
+    }
+
+    validateForCreate() {
+        if (this.appModuleName === null || this.appModuleName.trim() === "") {
+            return {
+                name: ["Please provide a name."]
+            }
+        }
+        return null;
+    }
+
+    toJSONForCreate() {
+        // Remaining fields just get defaulted
+        return JSON.stringify(this, ["appModuleName", "appModuleVersion", "appModuleDescription"]);
+    }
+
+    toJSONForUpdate() {
+        return JSON.stringify(this, ["appModuleId", "appModuleName", "appModuleVersion", "appModuleDescription"]);
+    }
+}
diff --git a/django_airavata/apps/api/static/django_airavata_api/js/services/ApplicationModuleService.js b/django_airavata/apps/api/static/django_airavata_api/js/services/ApplicationModuleService.js
new file mode 100644
index 0000000..46637e7
--- /dev/null
+++ b/django_airavata/apps/api/static/django_airavata_api/js/services/ApplicationModuleService.js
@@ -0,0 +1,29 @@
+
+import ApplicationModule from '../models/ApplicationModule'
+import FetchUtils from '../utils/FetchUtils'
+
+class ApplicationModuleService {
+    list(data = null) {
+        if (data) {
+            return Promise.resolve(data.map(result => new ApplicationModule(result)));
+        } else {
+            return FetchUtils.get('/api/applications/')
+                .then(json => json.map(result => new ApplicationModule(result)));
+        }
+    }
+
+    create(project) {
+        // TODO
+    }
+
+    update() {
+        // TODO
+    }
+
+    get() {
+        // TODO
+    }
+}
+
+// Export as a singleton
+export default new ApplicationModuleService();
\ No newline at end of file
diff --git a/django_airavata/apps/api/views.py b/django_airavata/apps/api/views.py
index 07e5722..ee0149c 100644
--- a/django_airavata/apps/api/views.py
+++ b/django_airavata/apps/api/views.py
@@ -23,15 +23,6 @@ import logging
 
 log = logging.getLogger(__name__)
 
-# Create your views here.
-@api_view(['GET'])
-def api_root(request, format=None):
-    return Response({
-        'projects': reverse('project-list', request=request, format=format),
-        'admin': reverse('api_experiment_list', request=request, format=format)
-    })
-
-
 class GenericAPIBackedViewSet(GenericViewSet):
 
     def get_list(self):
diff --git a/django_airavata/apps/workspace/static/django_airavata_workspace/js/views/DashboardContainer.vue b/django_airavata/apps/workspace/static/django_airavata_workspace/js/views/DashboardContainer.vue
index 7985307..ed7dd32 100644
--- a/django_airavata/apps/workspace/static/django_airavata_workspace/js/views/DashboardContainer.vue
+++ b/django_airavata/apps/workspace/static/django_airavata_workspace/js/views/DashboardContainer.vue
@@ -5,16 +5,32 @@
                 <h1 class="h4 mb-4">Dashboard</h1>
             </div>
         </div>
+        <div class="row">
+            <application-card v-for="item in applicationModules" v-bind:appModule="item" v-bind:key="item.appModuleId">
+            </application-card>
+        </div>
+
     </div>
 </template>
 
 <script>
 
+import { models, services } from 'django-airavata-api'
+import { components as comps } from 'django-airavata-common-ui'
+
 export default {
     name: 'dashboard-container',
     data () {
         return {
+            applicationModules: null,
         }
     },
+    components: {
+        'application-card': comps.ApplicationCard,
+    },
+    beforeMount: function () {
+        services.ApplicationModuleService.list()
+            .then(result => this.applicationModules = result);
+    }
 }
 </script>
diff --git a/django_airavata/static/common/js/components/ApplicationCard.vue b/django_airavata/static/common/js/components/ApplicationCard.vue
new file mode 100644
index 0000000..6303092
--- /dev/null
+++ b/django_airavata/static/common/js/components/ApplicationCard.vue
@@ -0,0 +1,34 @@
+<template>
+    <div class="col-md-6 col-xl-4">
+        <div class="card application-card">
+            <a href="#0" class="card-link text-dark">
+                <div class="card-body"  >
+                    <h2 class="card-title h5">{{appModule.appModuleName}}</h2>
+                    <span class="badge badge-primary mr-1" v-for="tag in appModule.tags">{{tag}}</span>
+                    <span class="badge badge-primary mr-1" v-if="appModule.appModuleVersion" >{{appModule.appModuleVersion}}</span>
+                    <p class="card-text card-text--small mt-3 text-secondary">{{appModule.appModuleDescription}}</p>
+                </div>
+            </a>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'dashboard-item',
+        props: ['appModule'],
+        data:function () {
+          return {
+          };
+        }
+    }
+</script>
+
+<style>
+.application-card {
+    height: calc(100% - 30px); /* 30px margin at the botton */
+}
+.application-card .card-link, .application-card .card-body {
+    height: 100%;
+}
+</style>
diff --git a/django_airavata/static/common/js/index.js b/django_airavata/static/common/js/index.js
index 2d808f1..4e01df0 100644
--- a/django_airavata/static/common/js/index.js
+++ b/django_airavata/static/common/js/index.js
@@ -1,5 +1,7 @@
+import ApplicationCard from './components/ApplicationCard.vue'
 import Pager from './components/Pager.vue'
 
 exports.components = {
-    Pager: Pager
+    Pager,
+    ApplicationCard,
 }
diff --git a/django_airavata/static/common/webpack.config.js b/django_airavata/static/common/webpack.config.js
index 7fd6ed1..273cd4c 100644
--- a/django_airavata/static/common/webpack.config.js
+++ b/django_airavata/static/common/webpack.config.js
@@ -24,8 +24,9 @@ module.exports = {
         loader: 'vue-loader',
         options: {
           loaders: {
-          }
-          // other vue-loader options go here
+          },
+          // // other vue-loader options go here
+          extractCSS: true
         }
       },
       {
@@ -49,11 +50,11 @@ module.exports = {
                 loader: "sass-loader"
             }]
         })
-      }
+      },
     ]
   },
   plugins: [
-      extractSass
+      extractSass,
   ],
   resolve: {
     alias: {

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