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:01 UTC
[airavata-mft-portal] 17/23: added basic version of dialog box and
resources UI
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 a421c54884441bdac765af383b48d29db94d2d83
Author: Aarushi Bisht <aa...@gmail.com>
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 f395f9b..27d674b 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 0000000..04f9d10
--- /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 c70817e..b0c9927 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 c70817e..12ab7dc 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 0000000..63913c1
--- /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 849447a..085283f 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 849447a..f694b3e 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 9e45776..059649e 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 191b477..8d47967 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 9a67329..e66cf93 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 80a8fd3..3759e5d 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>