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/16 20:39:00 UTC
[airavata-mft-portal] 21/26: Resources page and CSS improvements
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 16099a33a0b176c6681720da423865d4aed2d818
Author: Aarushi Bisht <aa...@gmail.com>
AuthorDate: Mon Apr 27 00:09:41 2020 -0400
Resources page and CSS improvements
---
.../js/containers/Storage.vue | 156 ++++++++++++---------
.../js/containers/StorageResources.vue | 41 ++++--
airavata_mft/apps/workspace/views.py | 8 +-
airavata_mft/static/base.css | 1 -
airavata_mft/templates/base.html | 76 +++++++---
5 files changed, 179 insertions(+), 103 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 3c9215c..ac0e1e2 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,76 +1,74 @@
<template>
-
- <div class="row">
- <div class="col-7">
- <h1 class="h4 mb-4">{{heading}}</h1>
- </div>
- <div class="col-4">
- <div class="btn-toolbar">
- <div class="btn-group mr-4" role="group">
- <div class="dropdown">
- <button class="btn btn-sm btn-outline-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Sort by</button>
- <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
- <a class="dropdown-item" href="#">Name</a>
- <a class="dropdown-item" href="#">Size</a>
- </div>
- </div>
- </div>
- <div class="btn-group mr-4" role="group">
- <button class="btn btn-sm btn-outline-secondary list"><i class="fa fa-bars"></i></button>
- <button class="btn btn-sm btn-outline-secondary list"><i class="fa fa-th"></i></button>
- </div>
- <div class="btn-group mr-4 new-unit" role="group">
- <button class="btn btn-info btn-sm"><i class="fa fa-plus plus-icon"></i>Add new unit</button>
+ <div class="row">
+ <div class="col-7">
+ <h1 class="h4 mb-4">{{heading}}</h1>
+ </div>
+ <div class="col-4">
+ <div class="btn-toolbar">
+ <div class="btn-group mr-4" role="group">
+ <div class="dropdown">
+ <button class="btn btn-sm btn-outline-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Sort by</button>
+ <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+ <a class="dropdown-item" href="#">Name</a>
+ <a class="dropdown-item" href="#">Size</a>
</div>
</div>
</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>
- </div>
- </div>
+ <div class="btn-group mr-4" role="group">
+ <button class="btn btn-sm btn-outline-secondary list"><i class="fa fa-bars"></i></button>
+ <button class="btn btn-sm btn-outline-secondary list"><i class="fa fa-th"></i></button>
+ </div>
+ <div class="btn-group mr-4 new-unit" role="group">
+ <button class="btn btn-info btn-sm"><i class="fa fa-plus plus-icon"></i>Add new unit</button>
+ </div>
+ </div>
+ </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="d-flex justify-content-center">
- <b-button :href="selectedStorage.storageId">Browse</b-button>
+ <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>
- </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 class="btn btn-sm btn-info browse" :href="selectedStorage.storageId">Browse</b-button>
+ </div>
+ </b-modal>
+ <table class="table table-hover main-table">
+ <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 class="table-item" v-for="storage in storageList"
+ :key="storage.storageId" @click="showDescription(storage)">
+ <th scope="row"><i class="fa fa-database unit-name-icon" aria-hidden="true"></i>{{storage.name}}</th>
+ <td>{{storage.size}}</td>
+ <td>
+ <div class="progress storage-progress">
+ <!-- TODO: storage value should be picked from storage.occupied -->
+ <div class="progress-bar red-bar" role="progressbar" style="width: 30%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
+ <div class="progress-bar green-bar" role="progressbar" style="width: 70%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
+ </div>
+ </td>
+ <td>{{storage.lastModified}}</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
</template>
<script>
@@ -94,7 +92,7 @@ export default {
}
</script>
-<style>
+<style scoped>
.new-unit{
width: 140px;
}
@@ -104,4 +102,28 @@ export default {
.list{
width: 40px;
}
+ .main-table{
+ width: 83%!important;
+ }
+ .unit-name-icon{
+ padding-right: 5%;
+ font-size:smaller;
+ }
+ .browse{
+ width: 25%;
+ height: 85%;
+ }
+ .green-bar{
+ background-color: #50c878;
+ }
+ .red-bar{
+ background-color: #cd5c5c;
+ }
+ .storage-progress{
+ width: 20%;
+ height: 50%;
+ }
+ .table-item{
+ cursor: pointer;
+ }
</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
index bd525f6..1d742be 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,30 +1,46 @@
<template>
- <div class="container">
<div class="row">
- <div class="col-8">
+ <div class="col-7">
<h1 class="h4 mb-4">{{heading}}</h1>
</div>
- <table class="table table-hover">
+ <div class="col-4">
+ <div class="btn-toolbar">
+ <div class="btn-group mr-4" role="group">
+ <div class="dropdown">
+ <button class="btn btn-sm btn-outline-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Sort by</button>
+ <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+ <a class="dropdown-item" href="#">Name</a>
+ <a class="dropdown-item" href="#">Size</a>
+ </div>
+ </div>
+ </div>
+ <div class="btn-group mr-4" role="group">
+ <button class="btn btn-sm btn-outline-secondary list"><i class="fa fa-bars"></i></button>
+ <button class="btn btn-sm btn-outline-secondary list"><i class="fa fa-th"></i></button>
+ </div>
+ </div>
+ </div>
+ <table class="table table-hover main-table">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Size</th>
- <th scope="col">LastModified</th>
+ <th scope="col">Last Modified</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr v-for="resource in resources"
:key="resource.resourceId">
- <th scope="row">{{resource.name}}</th>
+ <th scope="row"><i class="fa fa-folder resource-name-icon"></i>
+{{resource.name}}</th>
<td>{{resource.size}}</td>
<td>{{resource.lastModified}}</td>
- <td><b-button>Transfer</b-button></td>
+ <td><b-button class="btn btn-info btn-sm transfer">Transfer</b-button></td>
</tr>
</tbody>
</table>
</div>
- </div>
</template>
<script>
@@ -41,5 +57,14 @@
</script>
<style scoped>
-
+ .main-table{
+ width: 83%!important;
+ }
+ .transfer {
+ width: 45%;
+ }
+ .resource-name-icon{
+ padding-right: 3%;
+ font-size:smaller;
+ }
</style>
\ No newline at end of file
diff --git a/airavata_mft/apps/workspace/views.py b/airavata_mft/apps/workspace/views.py
index 6d778b6..131adff 100644
--- a/airavata_mft/apps/workspace/views.py
+++ b/airavata_mft/apps/workspace/views.py
@@ -16,10 +16,10 @@ def storage(request):
def resources(request, storage_id):
- resource_json = [{"resourceId": "resource1", "name": "resource1"},
- {"resourceId": "resource1", "name": "resource1"},
- {"resourceId": "resource1", "name": "resource1"},
- {"resourceId": "resource1", "name": "resource1"}]
+ resource_json = [{"resourceId": "Spring project", "name": "Spring project", "size": "12 GB", "lastModified": "Jan 15, 2020"},
+ {"resourceId": "Trial", "name": "Trial", "size": "12 GB", "lastModified": "Jan 15, 2020"},
+ {"resourceId": "New", "name": "New", "size": "12 GB", "lastModified": "Jan 15, 2020"},
+ {"resourceId": "Random testing", "name": "Random testing", "size": "12 GB", "lastModified": "Jan 15, 2020"}]
return render(request, 'resources.html', {'bundle_name': 'resources',
'data': json.dumps(resource_json),
'title': 'Storage Unit > ' + storage_id})
diff --git a/airavata_mft/static/base.css b/airavata_mft/static/base.css
index 2d60ece..00c941b 100644
--- a/airavata_mft/static/base.css
+++ b/airavata_mft/static/base.css
@@ -98,4 +98,3 @@ body {
border-color: transparent;
box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
}
-
\ No newline at end of file
diff --git a/airavata_mft/templates/base.html b/airavata_mft/templates/base.html
index 09b60fb..f7c71b3 100644
--- a/airavata_mft/templates/base.html
+++ b/airavata_mft/templates/base.html
@@ -9,7 +9,6 @@
{% render_bundle 'chunk-vendors' config='DEFAULT'%}
{% render_bundle 'app' config='DEFAULT'%}
<body>
-<!-- TODO : header and side navigation bar" -->
<nav class="navbar navbar-light header shadow-sm">
<div class="container-fluid">
<div class="col-2">
@@ -20,28 +19,28 @@
</div>
<div>
<div class="col-8">
- <div class="row" style="height: 15px">
- <span class="header-text" style="font-size: smaller">APACHE</span>
+ <div class="row apache">
+ <span class="header-text apache-text">APACHE</span>
</div>
- <div class="row">
- <span class="header-text" style="font-size: larger">AIRAVATA</span>
+ <div class="row airavata">
+ <span class="header-text airavata-text">AIRAVATA</span>
</div>
</div>
</div>
</div>
</a>
</div>
- <div class="col-8" style="padding-left: 0%">
+ <div class="col-8 search-div">
<div class="form-group has-search">
<span class="fa fa-search form-control-feedback"></span>
<input type="text" class="form-control" placeholder="Search">
</div>
</div>
<div class="col-2">
- <div class="row">
+ <div class="row user-div">
<i class="fa fa-user-circle fa-2x"></i>
<div class="dropdown">
- <a class="btn dropdown-toggle header-drop-down" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">User name</a>
+ <a class="btn dropdown-toggle header-drop-down" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Admin</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Logout</a>
</div>
@@ -51,24 +50,24 @@
</div>
</nav>
-
-<div class="container-fluid">
- <div class="row">
- <div class="col-2" style="padding-top: 1.5%">
- <nav class="nav flex-column">
- <div style="background-color: lightblue"><a class="c-nav__item selected-nav" href="#"><b>Storage Units</b></a></div>
- <div style="background-color: lightblue"><a class="c-nav__item" href="#"><b>Users</b></a></div>
- <div style="background-color: lightblue"><a class="c-nav__item" href="#"><b>Agents</b></a></div>
- <div style="background-color: lightblue"><a class="c-nav__item" href="#"><b>Audit</b></a></div>
- </nav>
- </div>
- <div class="col-10" style="padding-top: 1.5%">
- {% block app %}
- {% endblock app %}
+<!-- side navigation bar (Needs to move to a vue template)-->
+ <div class="container-fluid">
+ <div class="row">
+ <div class="col-2" style="padding-top: 1.5%">
+ <nav class="nav flex-column">
+ <a class="c-nav__item selected-nav" href="#"><i class="fa fa-database nav-icon"></i>Storage Units</a>
+ <a class="c-nav__item" href="#"><i class="fa fa-users nav-icon"></i>Users</a>
+ <a class="c-nav__item" href="#"><i class="fa fa-cogs nav-icon"></i>Agents</a>
+ <a class="c-nav__item" href="#"><i class="fa fa-book nav-icon"></i>Audit</a>
+ </nav>
+ </div>
+ <div class="col-10 main-app">
+ {% block app %}
+ {% endblock app %}
+ </div>
</div>
</div>
-</div>
</body>
<style>
@@ -85,6 +84,10 @@
font-size: 1rem;
display: block;
background-color: white;
+ padding-bottom: 0%;
+ }
+ .c-nav__item:hover{
+ background-color: #d6d8db!important;
}
.header {
background-color: white;
@@ -123,4 +126,31 @@
background-color: white;
border: white;
}
+ .nav-icon {
+ padding-right: 10%;
+ padding-left: 14%;
+ }
+ .c-nav__item:hover{
+ color: #17a2b8;
+ text-decoration: none;
+ font-weight:bold;
+ }
+ .apache {
+ height: 0.7em;
+ }
+ .apache-text{
+ font-size: smaller;
+ }
+ .airavata-text{
+ font-size: larger;
+ }
+ .search-div{
+ padding-left: 0%;
+ }
+ .user-div{
+ margin-top: -10%;
+ }
+ .main-app{
+ padding-top: 1.5%
+ }
</style>