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 a421c54884441bdac765af383b48d29db94d2d83 Author: Aarushi Bisht <[email protected]> AuthorDate: Fri Apr 24 00:31:54 2020 -0400 added basic version of dialog box and resources UI --- .../js/containers/Storage.vue | 93 ++++++++++++++-------- .../js/containers/StorageResources.vue | 39 +++++++++ ...try-view-storage.js => entry-view-resources.js} | 15 ++-- .../js/entry-view-storage.js | 1 - .../apps/workspace/templates/container-header.html | 1 + .../templates/{storage.html => resources.html} | 6 +- airavata_mft/apps/workspace/templates/storage.html | 2 +- airavata_mft/apps/workspace/urls.py | 5 +- airavata_mft/apps/workspace/views.py | 14 +++- airavata_mft/apps/workspace/vue.config.js | 1 + airavata_mft/templates/base.html | 1 + 11 files changed, 128 insertions(+), 50 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 f395f9bdd..27d674bb7 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,37 +1,57 @@ <template> <div id="storage"> <div class="container"> - <div class="row"> - <div class="col-8"> - <h1 class="h4 mb-4">Storage Units</h1> + <div class="row"> + <div class="col-8"> + <h1 class="h4 mb-4">Storage Units</h1> + </div> + <!-- Add buttons here --> </div> - <!-- Add buttons here --> - </div> - <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.storageList"> - <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> + <!-- 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 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> @@ -43,12 +63,21 @@ export default { props: ["initialStorageList"], data: function(){ return { - storageList: this.initialStorageList + storageList: this.initialStorageList, + selectedStorage: this.initialStorageList[0] + } + }, + methods: { + showDescription(unit) { + this.selectedStorage = unit + this.$bvModal.show("description-dialog") } } } </script> <style> - +.description{ + width: 70%; +} </style> \ No newline at end of file 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 new file mode 100644 index 000000000..04f9d1055 --- /dev/null +++ b/airavata_mft/apps/workspace/static/airavata_mft_workspace/js/containers/StorageResources.vue @@ -0,0 +1,39 @@ +<template> + <div id="resources"> + <table class="table table-hover"> + <thead> + <tr> + <th scope="col">Name</th> + <th scope="col">Size</th> + <th scope="col">LastModified</th> + <th scope="col"></th> + </tr> + </thead> + <tbody> + <tr v-for="resource in resources" + :key="resource.resourceId"> + <th scope="row">{{resource.name}}</th> + <td>{{resource.size}}</td> + <td>{{resource.lastModified}}</td> + <td><b-button>Transfer</b-button></td> + </tr> + </tbody> + </table> + </div> +</template> + +<script> + export default { + name: "StorageResources.vue", + props: ["resourcesList"], + data: function(){ + return { + resources: this.resourcesList + } + }, + } +</script> + +<style scoped> + +</style> \ 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-resources.js similarity index 56% copy from airavata_mft/apps/workspace/static/airavata_mft_workspace/js/entry-view-storage.js copy to airavata_mft/apps/workspace/static/airavata_mft_workspace/js/entry-view-resources.js index c70817e3e..b0c99278f 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-resources.js @@ -1,10 +1,9 @@ import Vue from 'vue' -import storage from "./containers/Storage" +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' @@ -12,22 +11,22 @@ window.onload = function(){ new Vue({ render(h) { - return h(storage, { + return h(StorageResources, { props: { - initialStorageList: this.storageList + resourcesList: this.resourcesList } }); }, data() { return { - storageList: null + resourcesList: null }; }, beforeMount() { - if (this.$el.dataset.storageList) { - this.storageList = JSON.parse(this.$el.dataset.storageList); + if (this.$el.dataset.resourcesList) { + this.resourcesList = JSON.parse(this.$el.dataset.resourcesList); } } - }).$mount("#storage"); + }).$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 c70817e3e..12ab7dc72 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 @@ -4,7 +4,6 @@ import { BootstrapVue } from 'bootstrap-vue' // Install BootstrapVue Vue.use(BootstrapVue); - import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap-vue/dist/bootstrap-vue.css' diff --git a/airavata_mft/apps/workspace/templates/container-header.html b/airavata_mft/apps/workspace/templates/container-header.html new file mode 100644 index 000000000..63913c188 --- /dev/null +++ b/airavata_mft/apps/workspace/templates/container-header.html @@ -0,0 +1 @@ +{% extends "base.html" %} \ No newline at end of file diff --git a/airavata_mft/apps/workspace/templates/storage.html b/airavata_mft/apps/workspace/templates/resources.html similarity index 55% copy from airavata_mft/apps/workspace/templates/storage.html copy to airavata_mft/apps/workspace/templates/resources.html index 849447a51..085283f90 100644 --- a/airavata_mft/apps/workspace/templates/storage.html +++ b/airavata_mft/apps/workspace/templates/resources.html @@ -1,13 +1,13 @@ -{% extends "base.html" %} +{% 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'%} + {% render_bundle "storageResources" config='WORKSPACE'%} {% endblock scripts %} {% block app %} - <div id="storage" data-storage-list="{{ data }}"></div> + <div id="resources" data-resources-list="{{ data }}"></div> {% endblock app %} diff --git a/airavata_mft/apps/workspace/templates/storage.html b/airavata_mft/apps/workspace/templates/storage.html index 849447a51..f694b3e8e 100644 --- a/airavata_mft/apps/workspace/templates/storage.html +++ b/airavata_mft/apps/workspace/templates/storage.html @@ -1,4 +1,4 @@ -{% extends "base.html" %} +{% extends "container-header.html" %} {% load static %} {% load render_bundle from webpack_loader %} diff --git a/airavata_mft/apps/workspace/urls.py b/airavata_mft/apps/workspace/urls.py index 9e457765d..059649e98 100644 --- a/airavata_mft/apps/workspace/urls.py +++ b/airavata_mft/apps/workspace/urls.py @@ -1,6 +1,7 @@ from . import views -from django.urls import path +from django.urls import path, re_path urlpatterns = [ - path('storage/', views.storage) + path('storage/', views.storage), + re_path(r'^storage/ssh-storage1', views.resource) #TODO: correct this ] \ No newline at end of file diff --git a/airavata_mft/apps/workspace/views.py b/airavata_mft/apps/workspace/views.py index 191b4773d..8d47967d9 100644 --- a/airavata_mft/apps/workspace/views.py +++ b/airavata_mft/apps/workspace/views.py @@ -5,10 +5,18 @@ import json def storage(request): # TODO: grpc calls to backend - storage_json = [{"storageId": "ssh-storage1", "name": "ssh-storage1", "size": "15GB", "occupied": "10GB", "lastModified":"26, March 2020"}, - {"storageId": "ssh-storage1", "name": "ssh-storage1", "size": "15GB", "occupied": "10GB", "lastModified":"26, March 2020"}, - {"storageId": "ssh-storage1", "name": "ssh-storage1", "size": "15GB", "occupied": "10GB", "lastModified":"26, March 2020"}, + storage_json = [{"storageId": "ssh-storage1", "name": "ssh-storage1", "size": "15GB", "occupied": "10GB", "lastModified":"26, March 2020", "host": "localhost", "port": 22, "user": "root"}, + {"storageId": "ssh-storage1", "name": "ssh-storage1", "size": "15GB", "occupied": "10GB", "lastModified":"26, March 2020", "host": "scp1", "port": 22, "user": "root"}, + {"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)}) + +def resource(request): + 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)}) + diff --git a/airavata_mft/apps/workspace/vue.config.js b/airavata_mft/apps/workspace/vue.config.js index 9a67329c9..e66cf93dd 100644 --- a/airavata_mft/apps/workspace/vue.config.js +++ b/airavata_mft/apps/workspace/vue.config.js @@ -10,6 +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', }, configureWebpack: { plugins: [ diff --git a/airavata_mft/templates/base.html b/airavata_mft/templates/base.html index 80a8fd39f..3759e5d9c 100644 --- a/airavata_mft/templates/base.html +++ b/airavata_mft/templates/base.html @@ -9,6 +9,7 @@ {% render_bundle 'app' config='DEFAULT'%} <body> <!-- TODO : header and side navigation bar" --> +<p> This is the header</p> {% block app %} {% endblock app %} </body>
