Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add Best Constrained Path Menu #56

Open
wants to merge 17 commits into
base: master
Choose a base branch
from
Open

Add Best Constrained Path Menu #56

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
8617f1c
Finished webui
Ktmi Mar 20, 2020
3656d99
Removed code from web ui used to help debug
Ktmi Mar 21, 2020
a421cc5
updated change log
MarvinTorres Jun 1, 2020
042f48c
set metric attribute input values to 0
MarvinTorres Jun 5, 2020
008373f
removed the icons next to the sliders
MarvinTorres Jun 5, 2020
74e8f01
declared var inside of loop block
MarvinTorres Jun 8, 2020
58d8074
compacted sliders and added scrollbar
MarvinTorres Jun 10, 2020
a1d9701
Renamed variable flexible to depth
MarvinTorres Jun 22, 2020
04a0735
Added accordion item for new best constrained path
MarvinTorres Jun 24, 2020
fae7c0d
Continued working on new component
MarvinTorres Jun 25, 2020
e289683
Implemented cmagnobarbosa's map resize fix
MarvinTorres Jun 25, 2020
cbd1286
Fixed logic error in get_constrained_paths_v4
MarvinTorres Jun 26, 2020
f609341
Updated get_constrained_paths_v4 to reuse bools.
MarvinTorres Jun 26, 2020
eec5d70
Updated API endpoints and removed unnecessary menu
MarvinTorres Jun 30, 2020
58d0f39
Changed inline css tags to internal css tags
MarvinTorres Jul 6, 2020
6848cee
Multiple changes to improve UX
MarvinTorres Jul 29, 2020
ae4d00b
Removed changelog update
MarvinTorres Jul 30, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions CHANGELOG.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,6 @@ Added

Changed
=======
- Improved documentation about napp dependencies.
- Changed tests structure to separate unit and integration tests.

Deprecated
==========
Expand Down
204 changes: 190 additions & 14 deletions ui/k-toolbar/main.kytos
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,95 @@
<template>
<k-toolbar-item icon="compass" tooltip="Napp Pathfinder">
<k-accordion>
<k-accordion-item title="Best Path">
<k-dropdown icon="circle-o" title="Source:" :options="get_interfaces"
<div class="scroll">
<k-accordion>
<k-accordion-item title="Best Path">
<k-dropdown icon="circle-o" title="Source:" :options="get_interfaces"
:value.sync="source"></k-dropdown>
<k-dropdown icon="circle-o" title="Destination:" :options="get_interfaces"
<k-dropdown icon="circle-o" title="Destination:" :options="get_interfaces"
:value.sync ="destination"></k-dropdown>
<k-select icon="link" title="Desired links:" :options="get_links"
:value.sync ="desired_links"></k-select>
<k-select icon="link" title="Undesired links:" :options="get_links"
:value.sync ="undesired_links"></k-select>
<k-button icon="search" title="Search" :on_click="get_paths">
</k-button>

</k-accordion-item>
<k-accordion>
<k-select icon="link" title="Desired links:" :options="get_links"
:value.sync ="desired_links"></k-select>
<k-select icon="link" title="Undesired links:" :options="get_links"
:value.sync ="undesired_links"></k-select>
<k-button icon="search" title="Search" :on_click="get_paths">
</k-button>
</k-accordion-item>

<k-accordion-item title="Best Constrained Path">
<k-dropdown icon="circle-o" title="Source:" :options="get_interfaces"
:value.sync="source_constrained"></k-dropdown>
<k-dropdown icon="circle-o" title="Destination:" :options="get_interfaces"
:value.sync ="destination_constrained"></k-dropdown>
<div class="metric">
<div class="checkbox">
<k-checkbox :model.sync = "checked_list" :value = "'bandwidth'"></k-checkbox>
</div>
<div class="dropdown">
<k-dropdown :options="metric_options['bandwidth']"
:value.sync="is_flexible.bandwidth"></k-dropdown>
</div>
<k-slider icon="adjust" :action="function(val) {metrics.bandwidth = parseInt(val)}"></k-slider>
</div>
<div class="metric">
<div class="checkbox">
<k-checkbox :model.sync = "checked_list" :value = "'reliability'"></k-checkbox>
</div>
<div class="dropdown">
<k-dropdown :options="metric_options['reliability']"
:value.sync="is_flexible.reliability"></k-dropdown>
</div>
<k-slider icon="adjust" :action="function(val) {metrics.reliability = parseInt(val)}"></k-slider>
</div>
<div class="metric">
<div class="checkbox">
<k-checkbox :model.sync = "checked_list" :value = "'delay'"></k-checkbox>
</div>
<div class="dropdown">
<k-dropdown :options="metric_options['delay']"
:value.sync="is_flexible.delay"></k-dropdown>
</div>
<k-slider icon="adjust" :action="function(val) {metrics.delay = parseInt(val)}"></k-slider>
</div>
<div class="metric">
<div class="checkbox">
<k-checkbox :model.sync = "checked_list" :value = "'utilization'"></k-checkbox>
</div>
<div class="dropdown">
<k-dropdown :options="metric_options['utilization']"
:value.sync="is_flexible.utilization"></k-dropdown>
</div>
<k-slider icon="adjust" :action="function(val) {metrics.utilization = parseInt(val)}"></k-slider>
</div>
<div class="metric">
<div class="checkbox">
<k-checkbox :model.sync = "checked_list" :value = "'priority'"></k-checkbox>
</div>
<div class="dropdown">
<k-dropdown :options="metric_options['priority']"
:value.sync="is_flexible.priority"></k-dropdown>
</div>
<k-slider icon="adjust" :action="function(val) {metrics.priority = parseInt(val)}"></k-slider>
</div>
<div class="metric">
<div class="checkbox">
<k-checkbox :model.sync = "checked_list" :value = "'ownership'"></k-checkbox>
</div>
<div class="dropdown">
<k-dropdown :options="metric_options['ownership']"
:value.sync="is_flexible.ownership"></k-dropdown>
</div>
</div>
<k-input :value.sync="metrics.ownership"></k-input>
<div class="text">
Minimum Flexible Hits:
</div>
<k-slider :max = 6
:action="function (val) {minimum_flexible_hits = parseInt(val)}"></k-slider>
<k-button icon="search" title="Search" :on_click="get_constrained_paths">
</k-button>
</k-accordion-item>
<k-accordion>
</div>
</k-toolbar-item>
</template>

Expand Down Expand Up @@ -46,6 +121,41 @@ module.exports = {
});

},
get_constrained_paths(){
var self = this
var base_metrics = {}
var flexible_metrics = {}
for(var checked of self.checked_list) {
if (self.is_flexible[checked]) {
flexible_metrics[checked] = self.metrics[checked]
} else {
base_metrics[checked] = self.metrics[checked]
}
}

$.ajax({
async: true,
dataType: "json",
type: "POST",
contentType: "application/json",
data: JSON.stringify({"source": self.source_constrained,
"destination": self.destination_constrained,
"base_metrics": base_metrics,
"flexible_metrics": flexible_metrics,
"minimum_flexible_hits": self.minimum_flexible_hits
}),

url: this.$kytos_server_api + "kytos/pathfinder/v2/best-constrained-paths",
success: function(data) {
if (data[0] !== undefined){
self.paths = data[0]['paths'][0];
} else {
self.paths = []
}
self.show();
}
});
},
get_topology(){
var self = this
$.ajax({
Expand Down Expand Up @@ -74,6 +184,43 @@ module.exports = {
},

computed: {
metric_options(){
var metric_options = {}

var bandwidth_options = []
var reliability_options = []
var delay_options = []
var utilization_options = []
var priority_options = []
var ownership_options = []

bandwidth_options.push({value: false, description: 'Bandwidth', selected: true});
bandwidth_options.push({value: true, description: 'Bandwidth (Flexible)'});

reliability_options.push({value: false, description: 'Reliability', selected: true});
reliability_options.push({value: true, description: 'Reliability (Flexible)'});

delay_options.push({value: false, description: 'Delay', selected: true});
delay_options.push({value: true, description: 'Delay (Flexible)'});

utilization_options.push({value: false, description: 'Utilization', selected: true});
utilization_options.push({value: true, description: 'Utilization (Flexible)'});

priority_options.push({value: false, description: 'Priority', selected: true});
priority_options.push({value: true, description: 'Priority (Flexible)'});

ownership_options.push({value: false, description: 'Ownership', selected: true});
ownership_options.push({value: true, description: 'Ownership (Flexible)'});

metric_options["bandwidth"] = bandwidth_options
metric_options["reliability"] = reliability_options
metric_options["delay"] = delay_options
metric_options["utilization"] = utilization_options
metric_options["priority"] = priority_options
metric_options["ownership"] = ownership_options

return metric_options;
},
get_interfaces(){
var interfaces = []
$.each(this.switches, function(key, value){
Expand Down Expand Up @@ -106,8 +253,37 @@ module.exports = {
source: "",
destination: "",
desired_links: [],
undesired_links: []
undesired_links: [],
source_constrained: "",
destination_constrained: "",
checked_list: [],
metrics:{
bandwidth: 0,
reliability: 0,
delay: 0,
utilization: 0,
priority: 0,
ownership: ""
},
is_flexible:{
bandwidth: false,
reliability: false,
delay: false,
utilization: false,
priority: false,
ownership: false
},
minimum_flexible_hits: 0
}
}
}
</script>

<style type="text/css">
body {overflow-y:hidden;}
.scroll {overflow-y: auto; height:calc(100vh - 60px);}
.metric {width:100%; overflow: hidden;}
.checkbox {width:10%; float: left;}
.dropdown {width:90%; float: left;}
.text {font-size: 75%; float: left; margin-top: 1vh;}
</style>