This is an automated email from the ASF dual-hosted git repository. yasith pushed a commit to branch merge-portals in repository https://gitbox.apache.org/repos/asf/airavata-portals.git
commit ef4827631ed2ed89c4bf3a933fcc45beb4df5246 Author: Aarushi Bisht <[email protected]> AuthorDate: Fri Apr 24 20:19:40 2020 -0400 fixed the routing issue --- .../js/containers/Storage.vue | 98 +++++++++++----------- .../js/containers/StorageResources.vue | 12 ++- .../js/entry-view-resources.js | 34 ++++---- .../js/entry-view-storage.js | 9 +- .../apps/workspace/templates/container-header.html | 15 +++- .../apps/workspace/templates/resources.html | 9 +- airavata_mft/apps/workspace/templates/storage.html | 9 +- airavata_mft/apps/workspace/urls.py | 6 +- airavata_mft/apps/workspace/views.py | 10 ++- airavata_mft/apps/workspace/vue.config.js | 2 +- airavata_mft/urls.py | 7 +- 11 files changed, 114 insertions(+), 97 deletions(-) diff --git a/airavata_mft/apps/workspace/static/airavata_mft_workspace/js/containers/Storage.vue b/airavata_mft/apps/workspace/static/airavata_mft_workspace/js/containers/Storage.vue index 27d674bb7..50f8e4672 100644 --- a/airavata_mft/apps/workspace/static/airavata_mft_workspace/js/containers/Storage.vue +++ b/airavata_mft/apps/workspace/static/airavata_mft_workspace/js/containers/Storage.vue @@ -1,69 +1,69 @@ <template> - <div id="storage"> <div class="container"> <div class="row"> <div class="col-8"> - <h1 class="h4 mb-4">Storage Units</h1> + <h1 class="h4 mb-4">{{heading}}</h1> </div> <!-- Add buttons here --> - </div> - <!-- Dialog box to show description of each storage unit --> - <b-modal class="modal-dialog modal-dialog-centered" :title="selectedStorage.name" id="description-dialog" hide-footer> - <div class="container"> - <div class="row"> - <div class="col-6"> - <p v-if="selectedStorage.host"><b>Host</b></p> - <p v-if="selectedStorage.port"><b>Port</b></p> - <p v-if="selectedStorage.user"><b>User</b></p> - </div> - <div class="col-6"> - <p v-if="selectedStorage.host">{{selectedStorage.host}}</p> - <p v-if="selectedStorage.port">{{selectedStorage.port}}</p> - <p v-if="selectedStorage.user">{{selectedStorage.user}}</p> + <!-- Dialog box to show description of each storage unit --> + <b-modal class="modal-dialog modal-dialog-centered" :title="selectedStorage.name" id="description-dialog" hide-footer> + <div class="container"> + <div class="row"> + <div class="col-6"> + <p v-if="selectedStorage.host"><b>Host</b></p> + <p v-if="selectedStorage.port"><b>Port</b></p> + <p v-if="selectedStorage.user"><b>User</b></p> + </div> + <div class="col-6"> + <p v-if="selectedStorage.host">{{selectedStorage.host}}</p> + <p v-if="selectedStorage.port">{{selectedStorage.port}}</p> + <p v-if="selectedStorage.user">{{selectedStorage.user}}</p> + </div> </div> </div> - </div> - <div class="d-flex justify-content-center"> - <b-button :href="selectedStorage.storageId">Browse</b-button> - </div> - </b-modal> - <table class="table table-hover"> - <thead> - <tr> - <th scope="col">Name</th> - <th scope="col">Storage size</th> - <th scope="col">Storage occupied</th> - <th scope="col">Last modified</th> - </tr> - </thead> - <tbody> - <tr v-for="storage in storageList" - :key="storage.storageId" @click="showDescription(storage)"> - <th scope="row">{{storage.name}}</th> - <td>{{storage.size}}</td> - <td> - <div class="progress storage-progress" style="width: 20%"> - <!-- TODO: storage value should be picked from storage.occupied --> - <div class="progress-bar bg-danger" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div> - <div class="progress-bar bg-success" role="progressbar" style="width: 85%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div> - </div> - </td> - <td>{{storage.lastModified}}</td> - </tr> - </tbody> - </table> - </div> - </div> + <div class="d-flex justify-content-center"> + <b-button :href="selectedStorage.storageId">Browse</b-button> + </div> + </b-modal> + <table class="table table-hover"> + <thead> + <tr> + <th scope="col">Name</th> + <th scope="col">Storage size</th> + <th scope="col">Storage occupied</th> + <th scope="col">Last modified</th> + </tr> + </thead> + <tbody> + <tr v-for="storage in storageList" + :key="storage.storageId" @click="showDescription(storage)"> + <th scope="row">{{storage.name}}</th> + <td>{{storage.size}}</td> + <td> + <div class="progress storage-progress" style="width: 20%"> + <!-- TODO: storage value should be picked from storage.occupied --> + <div class="progress-bar bg-danger" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div> + <div class="progress-bar bg-success" role="progressbar" style="width: 85%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div> + </div> + </td> + <td>{{storage.lastModified}}</td> + </tr> + </tbody> + </table> + </div> + </div> + </template> <script> //TODO: implement pagination export default { name: 'storage', - props: ["initialStorageList"], + props: ["initialStorageList", "title"], data: function(){ return { storageList: this.initialStorageList, + heading: this.title, selectedStorage: this.initialStorageList[0] } }, diff --git a/airavata_mft/apps/workspace/static/airavata_mft_workspace/js/containers/StorageResources.vue b/airavata_mft/apps/workspace/static/airavata_mft_workspace/js/containers/StorageResources.vue index 04f9d1055..bd525f6d6 100644 --- a/airavata_mft/apps/workspace/static/airavata_mft_workspace/js/containers/StorageResources.vue +++ b/airavata_mft/apps/workspace/static/airavata_mft_workspace/js/containers/StorageResources.vue @@ -1,5 +1,9 @@ <template> - <div id="resources"> + <div class="container"> + <div class="row"> + <div class="col-8"> + <h1 class="h4 mb-4">{{heading}}</h1> + </div> <table class="table table-hover"> <thead> <tr> @@ -19,16 +23,18 @@ </tr> </tbody> </table> + </div> </div> </template> <script> export default { name: "StorageResources.vue", - props: ["resourcesList"], + props: ["resourcesList", "title"], data: function(){ return { - resources: this.resourcesList + resources: this.resourcesList, + heading: this.title } }, } diff --git a/airavata_mft/apps/workspace/static/airavata_mft_workspace/js/entry-view-resources.js b/airavata_mft/apps/workspace/static/airavata_mft_workspace/js/entry-view-resources.js index b0c99278f..357308fb2 100644 --- a/airavata_mft/apps/workspace/static/airavata_mft_workspace/js/entry-view-resources.js +++ b/airavata_mft/apps/workspace/static/airavata_mft_workspace/js/entry-view-resources.js @@ -2,31 +2,33 @@ import Vue from 'vue' import StorageResources from "./containers/StorageResources" import { BootstrapVue } from 'bootstrap-vue' -// Install BootstrapVue Vue.use(BootstrapVue); import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap-vue/dist/bootstrap-vue.css' -window.onload = function(){ - - new Vue({ +window.onload = function() { + new Vue({ render(h) { - return h(StorageResources, { - props: { - resourcesList: this.resourcesList - } + return h(StorageResources, { + props: { + resourcesList: this.resourcesList, + title: this.title + } }); }, data() { - return { - resourcesList: null - }; + return { + resourcesList: null, + }; }, beforeMount() { - if (this.$el.dataset.resourcesList) { - this.resourcesList = JSON.parse(this.$el.dataset.resourcesList); - } + if (this.$el.dataset.resourcesList) { + this.resourcesList = JSON.parse(this.$el.dataset.resourcesList); + } + if (this.$el.dataset.title) { + this.title = this.$el.dataset.title; + } } - }).$mount("#resources"); -}; \ No newline at end of file + }).$mount("#resources") +} \ No newline at end of file diff --git a/airavata_mft/apps/workspace/static/airavata_mft_workspace/js/entry-view-storage.js b/airavata_mft/apps/workspace/static/airavata_mft_workspace/js/entry-view-storage.js index 12ab7dc72..d5cb6a9ac 100644 --- a/airavata_mft/apps/workspace/static/airavata_mft_workspace/js/entry-view-storage.js +++ b/airavata_mft/apps/workspace/static/airavata_mft_workspace/js/entry-view-storage.js @@ -13,20 +13,25 @@ window.onload = function(){ render(h) { return h(storage, { props: { - initialStorageList: this.storageList + initialStorageList: this.storageList, + title: this.title } }); }, data() { return { - storageList: null + storageList: null, + title: 'Storage Units' }; }, beforeMount() { if (this.$el.dataset.storageList) { this.storageList = JSON.parse(this.$el.dataset.storageList); } + if(this.$el.dataset.title) { + this.title = JSON.parse(this.$el.dataset.title); + } } }).$mount("#storage"); }; \ No newline at end of file diff --git a/airavata_mft/apps/workspace/templates/container-header.html b/airavata_mft/apps/workspace/templates/container-header.html index 63913c188..3f00db8a8 100644 --- a/airavata_mft/apps/workspace/templates/container-header.html +++ b/airavata_mft/apps/workspace/templates/container-header.html @@ -1 +1,14 @@ -{% extends "base.html" %} \ No newline at end of file +{% extends "base.html" %} + +{% load static %} +{% load render_bundle from webpack_loader %} + +{% block scripts %} + {% render_bundle "chunk-vendors" config='WORKSPACE'%} + {% render_bundle bundle_name config='WORKSPACE'%} +{% endblock scripts %} + +{% block app %} + <div id={{ bundle_name }}> + </div> +{% endblock app %} \ No newline at end of file diff --git a/airavata_mft/apps/workspace/templates/resources.html b/airavata_mft/apps/workspace/templates/resources.html index 085283f90..9db570aec 100644 --- a/airavata_mft/apps/workspace/templates/resources.html +++ b/airavata_mft/apps/workspace/templates/resources.html @@ -1,13 +1,6 @@ {% extends "container-header.html" %} -{% load static %} -{% load render_bundle from webpack_loader %} - -{% block scripts %} - {% render_bundle "chunk-vendors" config='WORKSPACE'%} - {% render_bundle "storageResources" config='WORKSPACE'%} -{% endblock scripts %} {% block app %} - <div id="resources" data-resources-list="{{ data }}"></div> + <div id={{ bundle_name }} data-resources-list="{{ data }}" data-title ="{{ title }}"></div> {% endblock app %} diff --git a/airavata_mft/apps/workspace/templates/storage.html b/airavata_mft/apps/workspace/templates/storage.html index f694b3e8e..84f8413f3 100644 --- a/airavata_mft/apps/workspace/templates/storage.html +++ b/airavata_mft/apps/workspace/templates/storage.html @@ -1,13 +1,6 @@ {% extends "container-header.html" %} -{% load static %} -{% load render_bundle from webpack_loader %} - -{% block scripts %} - {% render_bundle "chunk-vendors" config='WORKSPACE'%} - {% render_bundle "storage" config='WORKSPACE'%} -{% endblock scripts %} {% block app %} - <div id="storage" data-storage-list="{{ data }}"></div> + <div id={{ bundle_name }} data-storage-list="{{ data }}" data-title ="{{ title }}"></div> {% endblock app %} diff --git a/airavata_mft/apps/workspace/urls.py b/airavata_mft/apps/workspace/urls.py index 059649e98..185749eab 100644 --- a/airavata_mft/apps/workspace/urls.py +++ b/airavata_mft/apps/workspace/urls.py @@ -1,7 +1,7 @@ from . import views -from django.urls import path, re_path +from django.conf.urls import url urlpatterns = [ - path('storage/', views.storage), - re_path(r'^storage/ssh-storage1', views.resource) #TODO: correct this + url(r'^storage/$', views.storage), + url(r'^storage/(?P<storage_id>[^/]+)/$', views.resources) ] \ No newline at end of file diff --git a/airavata_mft/apps/workspace/views.py b/airavata_mft/apps/workspace/views.py index 8d47967d9..6d778b69a 100644 --- a/airavata_mft/apps/workspace/views.py +++ b/airavata_mft/apps/workspace/views.py @@ -10,13 +10,17 @@ def storage(request): {"storageId": "ssh-storage1", "name": "ssh-storage1", "size": "15GB", "occupied": "10GB", "lastModified":"26, March 2020", "host": "scp2", "port": 22, "user": "root"}, {"storageId": "ssh-storage1", "name": "ssh-storage1", "size": "15GB", "occupied": "10GB", "lastModified":"26, March 2020"}] - return render(request, 'storage.html', {'data': json.dumps(storage_json)}) + return render(request, 'storage.html', {'bundle_name': 'storage', + 'data': json.dumps(storage_json), + 'title': 'Storage Unit'}) -def resource(request): +def resources(request, storage_id): resource_json = [{"resourceId": "resource1", "name": "resource1"}, {"resourceId": "resource1", "name": "resource1"}, {"resourceId": "resource1", "name": "resource1"}, {"resourceId": "resource1", "name": "resource1"}] - return render(request, 'resources.html', {'data': json.dumps(resource_json)}) + return render(request, 'resources.html', {'bundle_name': 'resources', + 'data': json.dumps(resource_json), + 'title': 'Storage Unit > ' + storage_id}) diff --git a/airavata_mft/apps/workspace/vue.config.js b/airavata_mft/apps/workspace/vue.config.js index e66cf93dd..c16bafc39 100644 --- a/airavata_mft/apps/workspace/vue.config.js +++ b/airavata_mft/apps/workspace/vue.config.js @@ -10,7 +10,7 @@ module.exports = { productionSourceMap: false, pages: { 'storage': './static/airavata_mft_workspace/js/entry-view-storage', - 'storageResources': './static/airavata_mft_workspace/js/entry-view-resources', + 'resources': './static/airavata_mft_workspace/js/entry-view-resources', }, configureWebpack: { plugins: [ diff --git a/airavata_mft/urls.py b/airavata_mft/urls.py index bbe408bf8..9cb65f695 100644 --- a/airavata_mft/urls.py +++ b/airavata_mft/urls.py @@ -14,9 +14,10 @@ Including another URLconf 2. Add a URL to urlpatterns: path('blog/', include('blog.urls')) """ from django.contrib import admin -from django.urls import path, include +from django.urls import include +from django.conf.urls import url urlpatterns = [ - path('admin/', admin.site.urls), - path('workspace/', include('airavata_mft.apps.workspace.urls')) + url(r'^admin/', admin.site.urls), + url(r'^workspace/', include('airavata_mft.apps.workspace.urls')) ]
