You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@airavata.apache.org by aa...@apache.org on 2020/06/09 18:15:02 UTC
[airavata-mft-portal] 18/23: fixed the routing issue
This is an automated email from the ASF dual-hosted git repository.
aarushi pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/airavata-mft-portal.git
commit ef4827631ed2ed89c4bf3a933fcc45beb4df5246
Author: Aarushi Bisht <aa...@gmail.com>
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 27d674b..50f8e46 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 04f9d10..bd525f6 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 b0c9927..357308f 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 12ab7dc..d5cb6a9 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 63913c1..3f00db8 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 085283f..9db570a 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 f694b3e..84f8413 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 059649e..185749e 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 8d47967..6d778b6 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 e66cf93..c16bafc 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 bbe408b..9cb65f6 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'))
]