Skip to content
Permalink
Browse files
Merge pull request #7 from aarushiibisht/master
Top banner, side navigation bar and refactored apps
  • Loading branch information
aarushiibisht committed Jun 9, 2020
2 parents 6fc12a6 + 461df4e commit fee22c01913b436bcac938d00d655f2bac380021
Showing 15 changed files with 405 additions and 51 deletions.
@@ -1,13 +1,49 @@
<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-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>
</div>
<!-- Add buttons here -->
</div>
<table class="table table-hover">
<!-- 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 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>
@@ -17,38 +53,79 @@
</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%">
<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 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 class="progress-bar red-bar" role="progressbar" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar green-bar" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td>{{storage.lastModified}}</td>
</td>
<td>{{storage.lastModified}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>

<script>
//TODO: implement pagination
export default {
name: 'storage',
props: ["initialStorageList"],
props: ["initialStorageList", "title"],
data: function(){
return {
storageList: this.initialStorageList
storageList: this.initialStorageList,
heading: this.title,
selectedStorage: this.initialStorageList[0]
}
},
methods: {
showDescription(unit) {
this.selectedStorage = unit
this.$bvModal.show("description-dialog")
}
}
}
</script>

<style>
<style scoped>
.new-unit{
width: 140px;
}
.plus-icon{
padding-right: 15px;
}
.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;
width: 70%;
}
.red-bar{
background-color: #cd5c5c;
width: 30%;
}
.storage-progress{
width: 20%;
height: 50%;
}
.table-item{
cursor: pointer;
}
</style>
@@ -0,0 +1,70 @@
<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>
</div>
<table class="table table-hover main-table">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Size</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"><i class="fa fa-folder resource-name-icon"></i>
{{resource.name}}</th>
<td>{{resource.size}}</td>
<td>{{resource.lastModified}}</td>
<td><b-button class="btn btn-info btn-sm transfer">Transfer</b-button></td>
</tr>
</tbody>
</table>
</div>
</template>

<script>
export default {
name: "StorageResources.vue",
props: ["resourcesList", "title"],
data: function(){
return {
resources: this.resourcesList,
heading: this.title
}
},
}
</script>

<style scoped>
.main-table{
width: 83%!important;
}
.transfer {
width: 45%;
}
.resource-name-icon{
padding-right: 3%;
font-size:smaller;
}
</style>
@@ -0,0 +1,34 @@
import Vue from 'vue'
import StorageResources from "./containers/StorageResources"
import { BootstrapVue } from 'bootstrap-vue'

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,
title: this.title
}
});

},
data() {
return {
resourcesList: null,
};
},
beforeMount() {
if (this.$el.dataset.resourcesList) {
this.resourcesList = JSON.parse(this.$el.dataset.resourcesList);
}
if (this.$el.dataset.title) {
this.title = this.$el.dataset.title;
}
}
}).$mount("#resources")
}
@@ -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'

@@ -14,20 +13,25 @@ window.onload = function(){
render(h) {
return h(storage, {
props: {
initialStorageList: this.storageList
initialStorageList: this.storageList,
title: this.title
}
});

},
data() {
return {
storageList: null
storageList: null,
title: 'Storage Units'
};
},
beforeMount() {
if (this.$el.dataset.storageList) {
this.storageList = JSON.parse(this.$el.dataset.storageList);
}
if(this.$el.dataset.title) {
this.title = JSON.parse(this.$el.dataset.title);
}
}
}).$mount("#storage");
};
@@ -0,0 +1,14 @@
{% extends "base.html" %}

{% load static %}
{% load render_bundle from webpack_loader %}

{% block scripts %}
{% render_bundle "chunk-vendors" config='WORKSPACE'%}
{% render_bundle bundle_name config='WORKSPACE'%}
{% endblock scripts %}

{% block app %}
<div id={{ bundle_name }}>
</div>
{% endblock app %}
@@ -0,0 +1,6 @@
{% extends "container-header.html" %}

{% block app %}
<div id={{ bundle_name }} data-resources-list="{{ data }}" data-title ="{{ title }}"></div>
{% endblock app %}

@@ -1,13 +1,6 @@
{% 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'%}
{% endblock scripts %}
{% block app %}
<div id="storage" data-storage-list="{{ data }}"></div>
<div id={{ bundle_name }} data-storage-list="{{ data }}" data-title ="{{ title }}"></div>
{% endblock app %}

@@ -1,6 +1,7 @@
from . import views
from django.urls import path
from django.conf.urls import url

urlpatterns = [
path('storage/', views.storage)
url(r'^storage/$', views.storage),
url(r'^storage/(?P<storage_id>[^/]+)/$', views.resources)
]
@@ -5,10 +5,22 @@

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)})
return render(request, 'storage.html', {'bundle_name': 'storage',
'data': json.dumps(storage_json),
'title': 'Storage Unit'})


def resources(request, storage_id):
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})

@@ -4,12 +4,13 @@ const path = require("path");
module.exports = {
publicPath:
process.env.NODE_ENV === "development"
? "http://localhost:9000/static/airavata_mft_workspace/dist/"
? "http://localhost:9001/static/airavata_mft_workspace/dist/"
: "/static/airavata_mft_workspace/dist/",
outputDir: "./static/airavata_mft_workspace/dist",
productionSourceMap: false,
pages: {
'storage': './static/airavata_mft_workspace/js/entry-view-storage',
'resources': './static/airavata_mft_workspace/js/entry-view-resources',
},
configureWebpack: {
plugins: [
@@ -35,7 +36,7 @@ module.exports = {
});
},
devServer: {
port: 9000,
port: 9001,
headers: {
"Access-Control-Allow-Origin": "*"
},

0 comments on commit fee22c0

Please sign in to comment.