added basic version of dialog box and resources UI

apache · Apr 24, 2020 · a421c54 · a421c54
1 parent eaa9882
commit a421c54
Show file tree

Hide file tree

Showing 11 changed files with 163 additions and 39 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
@@ -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>
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
@@ -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>
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
@@ -0,0 +1,32 @@
+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({
+        render(h) {
+          return h(StorageResources, {
+              props: {
+                resourcesList: this.resourcesList
+              }
+            });
+
+        },
+        data() {
+          return {
+            resourcesList: null
+          };
+        },
+        beforeMount() {
+          if (this.$el.dataset.resourcesList) {
+            this.resourcesList = JSON.parse(this.$el.dataset.resourcesList);
+          }
+        }
+      }).$mount("#resources");
+};
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
@@ -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
@@ -0,0 +1 @@
+{% extends "base.html" %}
diff --git a/airavata_mft/apps/workspace/templates/resources.html b/airavata_mft/apps/workspace/templates/resources.html
@@ -0,0 +1,13 @@
+{% 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>
+{% endblock app %}
+
diff --git 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
@@ -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
 ]
diff --git a/airavata_mft/apps/workspace/views.py b/airavata_mft/apps/workspace/views.py
@@ -5,10 +5,18 @@
 
 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
@@ -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
@@ -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>