Skip to content
This repository has been archived by the owner on Apr 22, 2024. It is now read-only.

Commit

Permalink
Merge pull request #14 from macartur/change_to_support_napps_components
Browse files Browse the repository at this point in the history 
Change to support napps components
  • Loading branch information
@beraldoleal
beraldoleal authored Mar 8, 2018
2 parents cdad2f0 + bb72b8e commit d316bbb
Show file tree
Hide file tree
Showing 15 changed files with 797 additions and 205 deletions.
23 changes: 18 additions & 5 deletions src/App.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div id="app" v-bind:class="{ expanded: expanded }">
<kytos-menubar v-bind:toggle=toggle v-bind:expanded=expanded></kytos-menubar>
<div id="app" v-bind:class="{ compacted: compacted }">
<kytos-menubar v-bind:toggle=toggle v-bind:compacted=compacted></kytos-menubar>
<kytos-tabs></kytos-tabs>

<section id="kytos-area">
Expand All @@ -18,7 +18,7 @@ export default {
name: 'app',
data () {
return {
expanded: true,
compacted: false,
SwitchLabels: [{value: 1, description: "DPID"},
{value: 2, description: "Name"},
{value: 3, description: "Hardware"},
Expand All @@ -36,7 +36,21 @@ export default {
},
methods: {
toggle () {
this.expanded = !this.expanded
this.compacted = !this.compacted
$(".kytos-toolbar").show();
this.$nextTick(function () {
// DOM is now updated
$(".kytos-toolbar .kytos-menu-item").not(":hidden").each(function() {
$(this).each(function(){
if ($(this).find(".compact").length == 0){
$(".compacted .kytos-toolbar").css("display","none");
}
});
});
});
},
}
}
Expand Down Expand Up @@ -92,4 +106,3 @@ a
left: 0
</style>

213 changes: 61 additions & 152 deletions src/components/kytos/Menubar.vue
View file
Original file line number Diff line number Diff line change
@@ -1,162 +1,58 @@
<template>
<div class="container">
<section class="kytos-menu-bar">
<div class="logo" v-on:click="this.toggle" v-bind:class="{ expanded: expanded }">
<img v-show="this.expanded" src="../../assets/logo-kytos.svg" class="icon-kytos" alt="Kytos" height="35">
<img v-show="!this.expanded" src="../../assets/icon-kytos.svg" class="logo-kytos" alt="Kytos" height="35">
<div class="logo" v-on:click="toggle" v-bind:class="{ compacted: compacted }">
<img v-show="!compacted" src="../../assets/logo-kytos.svg" class="logo-kytos" alt="Kytos" height="35">
<img v-show="compacted" src="../../assets/icon-kytos.svg" class="icon-kytos" alt="Kytos" height="35">
</div>
<icon name="desktop" v-bind:class="{ active: activeItem==1 }" v-on:click.native="setItem(1)"></icon>
<icon name="link" v-bind:class="{ active: activeItem==3 }" v-on:click.native="setItem(3)"></icon>
<icon name="cube" v-bind:class="{ active: activeItem==2 }" v-on:click.native="setItem(2)"></icon>
<kytos-button v-for="(component, index) in components"
v-bind:class="{ active: activeItem==(index+1) }"
:key="component.icon"
:icon="component.icon"
:tooltip="component.tooltip"
@click.native="setItem(index+1)"/>
</section>
<kytos-toolbar v-show="!expanded" :switchLabels="switchLabels" :interfaceLabels="interfaceLabels" :mapOpacity="mapOpacity" :emitMapOpacity="emitMapOpacity"></kytos-toolbar>
<kytos-context-panel v-show="expanded">
<kytos-accordion v-show="activeItem==1">
<kytos-accordion-item title="Custom Labels">
<kytos-dropdown title="Switch Labels:" icon="circle-o" :options="switchLabels" :event="{name: 'topology-toggle-label', content: {node_type: 'switch'}}"></kytos-dropdown>
<kytos-dropdown title="Interface Labels:" icon="plug" :options="interfaceLabels" :event="{name: 'topology-toggle-label', content: {node_type: 'interface'}}"></kytos-dropdown>
</kytos-accordion-item>

<kytos-accordion-item title="Background">
<kytos-button-group>
<kytos-button tooltip="Map Background" icon="globe"></kytos-button>
<kytos-button tooltip="Image Background (disabled)" icon="photo" :isDisabled="true"></kytos-button>
<kytos-button tooltip="No Background" icon="window-close-o"></kytos-button>
</kytos-button-group>
<kytos-slider icon="adjust" :initialValue="mapOpacity" :action="emitMapOpacity"></kytos-slider>
</kytos-accordion-item>
</kytos-accordion>

<kytos-accordion v-show="activeItem==3">
<kytos-accordion-item title="Request E-Line Circuit">
<kytos-input id="name-input" title="Circuit Name:" tooltip="Circuit name" placeholder="Circuit Name" icon="pencil"></kytos-input>
<kytos-input id="endpoint-a-input" title="Endpoint A:" tooltip="Endpoint A (format: dpid:port_number)" placeholder="First endpoint" icon="arrow-right"></kytos-input>
<kytos-input id="vlan-a-input" title="VLAN A:" tooltip="Vlan id at endpoint A" placeholder="Vlan id" icon="tag"></kytos-input>
<kytos-input id="endpoint-z-input" title="Endpoint Z:" tooltip="Endpoint Z (format: dpid:port_number)" placeholder="Last endpoint" icon="arrow-left"></kytos-input>
<kytos-input id="vlan-z-input" title="VLAN Z:" tooltip="Vlan id at endpoint Z" placeholder="Vlan id" icon="tag"></kytos-input>
<kytos-button tooltip="Request Circuit" title="Request Circuit" icon="gear" v-on:click.native="request_circuit()"></kytos-button>
</kytos-accordion-item>
</kytos-accordion>

<kytos-accordion v-show="activeItem==2">
<kytos-accordion-item title="Installed NApps">
<kytos-property-panel>
<kytos-property-panel-item :name="napp.name" :value="napp.version" v-if="napps" v-for="napp in this.napps" :key="napp.name"></kytos-property-panel-item>
</kytos-property-panel>
</kytos-accordion-item>
</kytos-accordion>
</kytos-context-panel>
<napp-loader :active="activeItem" :components.sync="components" :compacted="compacted" :url="url"></napp-loader>
</div>
</template>

<script>
import Icon from '../../../node_modules/vue-awesome/components/Icon.vue'
import KytosBaseWithIcon from './base/KytosBaseWithIcon.vue'
import About from '../../kytos/about.vue'
import Icon from '../../../node_modules/vue-awesome/components/Icon.vue'
export default {
name: 'kytos-menu-bar',
mixins: [KytosBaseWithIcon],
props: ['toggle', 'expanded'],
components: {
'icon': Icon,
},
props: ['toggle', 'compacted'],
data() {
return {
activeItem: 1,
napps: [],
switchLabels: [],
hostLabels: [],
interfaceLabels: [],
mapOpacity: 100
url: this.$kytos_server+ 'ui/kytos-toolbar',
components: [{'icon': 'desktop', 'name':'mapbox-settings'}],
activeItem: 1
}
},
methods: {
emitMapOpacity (value) {
this.$kytos.$emit('change-map-opacity', value)
},
about () {
this.$kytos.$emit("showInfoPanel", About)
toggleLabel (type, label) {
this.$kytos.$emit('topology-toggle-label', type, label)
},
setItem (item) {
this.activeItem = item
if (item == 2) {
this.update_napps()
}
},
update_napps () {
var self = this
$.ajax({
async: true,
dataType: "json",
url: this.$kytos_server_api + "kytos/status/v1/napps",
success: function(data) {
self.napps = data['napps']
}
$(".kytos-toolbar").show();
this.$nextTick(function () {
// DOM is now updated
$(".kytos-toolbar .kytos-menu-item").not(":hidden").each(function() {
$(this).each(function(){
if ($(this).find(".compact").length == 0){
$(".compacted .kytos-toolbar").css("display","none");
}
});
});
});
},
addSwitchLabel (content) {
let value = content.value
let exist = this.switchLabels.filter(label => label.value == value)
if (exist.length == 0)
this.switchLabels.push({value: value,
description: content.description,
selected: content.selected})
},
addInterfaceLabel (content) {
let value = content.value
let exist = this.interfaceLabels.filter(label => label.value == value)
if (exist.length == 0)
this.interfaceLabels.push({value: value,
description: content.description,
selected: content.selected})
},
toggleLabel (type, label) {
this.$kytos.$emit('topology-toggle-label', type, label)
},
request_circuit () {
// TODO: FIx this to use model properly when on own component
var circuit_name = $("#name-input").find('input:visible:first')[0].value
var endpoint_a = $("#endpoint-a-input").find('input:visible:first')[0].value
var vlan_a = $("#vlan-a-input").find('input:visible:first')[0].value
var endpoint_z = $("#endpoint-z-input").find('input:visible:first')[0].value
var vlan_z = $("#vlan-z-input").find('input:visible:first')[0].value
var dpid_a = endpoint_a.split(":").slice(0,8).join(":")
var port_a = endpoint_a.split(":").slice(8,9).join(":")
var dpid_z = endpoint_z.split(":").slice(0,8).join(":")
var port_z = endpoint_z.split(":").slice(8,9).join(":")
var request = {"name": circuit_name,
"uni_a": {"dpid": dpid_a,
"port": port_a,
"tag": {"tag_type": "VLAN",
"value": vlan_a}},
"uni_z": {"dpid": dpid_z,
"port": port_z,
"tag": {"tag_type": "VLAN",
"value": vlan_z}},
"bandwidth": 100000000000}
$.ajax({
url: "http://demo.kytos.io:8181/api/kytos/mef_eline/circuits",
type:"POST",
data: request,
contentType:"application/json; charset=utf-8",
dataType: "json",
success: function(message){
console.log(message)
}
})
}
},
created () {
// Registering listeners
this.$kytos.$on('menu-add-switch-label', this.addSwitchLabel)
this.$kytos.$on('menu-add-interface-label', this.addInterfaceLabel)
}
}
</script>

Expand All @@ -179,38 +75,51 @@ export default {
margin: 0
display: block
height: 30px
width: 280px
vertical-align: middle
padding: 3px 0px 7px 0px
background: $fill-menubar-h
cursor: pointer
text-align: center
.expanded
width: 280px
background: $fill-menubar-h
.expanded
.kytos-menu-bar
box-shadow: none
.kytos-menu-bar
.active
background: $fill-panel
border-color: $fill-menubar-b
> svg
vertical-align: middle
height: 20px
width: 23px
padding: 10px 9px 10px 5px
cursor: pointer
fill: $fill-icon
border-left: 3px solid transparent
.kytos-button
width: 40px
height: 40px
margin: 0px
background: $fill-menubar
> svg
vertical-align: middle
height: 20px
width: 23px
padding: 10px 9px 10px 5px
cursor: pointer
fill: $fill-icon
border-left: 3px solid transparent
&:hover
fill: $fill-icon-h
border-color: $fill-menubar-b
background: $kytos-dark-gray
&::-moz-focus-inner
border: 0
&.active
background: $fill-panel
border-color: $fill-menubar-b
> svg
border-left: 3px solid $fill-menubar-h
.compacted
.kytos-menu-bar
.logo
width: 40px
</style>
4 changes: 3 additions & 1 deletion src/components/kytos/accordion/Accordion.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,9 @@ export default {
@import '../../../assets/styles/variables'
.accordion-wrapper
width: 100%
position: relative
.compacted
.accordion-wrapper
display: inline-flex
</style>
58 changes: 53 additions & 5 deletions src/components/kytos/accordion/AccordionItem.vue
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<template>
<div class="tab">
<input class="kytos-accordion-input" :id="id" type="checkbox" name="tabs" checked>
<input class="kytos-accordion-input" :id="id" type="checkbox" name="tabs" checked>
<label class="kytos-accordion-label" :for="id">{{title}}</label>
<div class="tab-content">
<slot>
<p>Empty Pannel created, please define some items inside.</p>
<p>Empty Pannel created, please define some items inside.</p>
</slot>
</div>
</div>
Expand Down Expand Up @@ -78,12 +78,60 @@ export default {
max-height: 100%
overflow: hidden
&[type=checkbox]
& + .kytos-accordion-label:after
&[type=checkbox]
& + .kytos-accordion-label:after
content: "▾"
&[type=checkbox]:checked
& + .kytos-accordion-label:after
& + .kytos-accordion-label:after
content: "▴"
.compacted
.tab
display: inline-flex
.kytos-accordion-input
display: none
.kytos-accordion-label
display: none
.kytos-accordion-input
& ~ .tab-content
display: inline-flex
margin-top: 0px
height: 35px
max-height: 100%
overflow: hidden
&[type=checkbox]
& + .kytos-accordion-label:after
content: ""
&[type=checkbox]:checked
& + .kytos-accordion-label:after
content: ""
.tab
.tab-content
margin-left: 15px
&:before
content: ';;;;;;;'
font: 8px monospace
line-height: 5px
color: $fill-bar
filter: invert(50%)
opacity: 0.2
-webkit-transform: rotate(90deg)
-moz-transform: rotate(90deg)
-ms-transform: rotate(90deg)
transform: rotate(90deg)
border-bottom: 1px solid $fill-bar
pointer-events: none
width: 35px
height: 10px
position: absolute
left: -10px
top: 15px
</style>
Loading

0 comments on commit d316bbb

Please sign in to comment.