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 16099a33a0b176c6681720da423865d4aed2d818 Author: Aarushi Bisht <[email protected]> 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 3c9215c63..ac0e1e2cf 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 bd525f6d6..1d742be9d 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 6d778b69a..131adff00 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 2d60ece70..00c941bfe 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 09b60fbd0..f7c71b30f 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>
