Add Best Constrained Path Menu

CHANGELOG.rst

@@ -15,6 +15,7 @@ Changed
 =======
 - Improved documentation about napp dependencies.
 - Changed tests structure to separate unit and integration tests.
+- Updated Pathfinder UI with a best constrained flexible paths search menu.
 
 Deprecated
 ==========

ui/k-toolbar/main.kytos

@@ -1,20 +1,154 @@
 <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"
-          :value.sync="source"></k-dropdown>
-        <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>
+    <div style="overflow-y: auto; height:550px;">
+      <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"
+            :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-item title="Best Constrained Path with Flexible Metrics">
+          <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"
+            :value.sync ="destination"></k-dropdown>
+
+          <div style="width:100%; overflow: hidden;">
+            <div style="width:10%; float: left;">
+              <k-checkbox :model.sync = "v4_checked_list" :value = "'bandwidth'"></k-checkbox>
+            </div>
+            <div style="width:90%; float: left;">
+              <k-dropdown :options="metric_options['bandwidth']" 
+              :value.sync="v4_is_flexible.bandwidth"></k-dropdown>
+            </div>
+            <k-slider icon="adjust" :action="function(val) {v4_metrics.bandwidth = parseInt(val)}"></k-slider>
+          </div>
+          <div style="width:100%; overflow: hidden;">
+            <div style="width:10%; float: left;">
+              <k-checkbox :model.sync = "v4_checked_list" :value = "'reliability'"></k-checkbox>
+            </div>
+            <div style="width:90%; float: left;">
+              <k-dropdown :options="metric_options['reliability']" 
+              :value.sync="v4_is_flexible.reliability"></k-dropdown>
+            </div>
+            <k-slider icon="adjust" :action="function(val) {v4_metrics.reliability = parseInt(val)}"></k-slider>
+          </div>
+          <div style="width:100%; overflow: hidden;">
+            <div style="width:10%; float: left;">
+              <k-checkbox :model.sync = "v4_checked_list" :value = "'delay'"></k-checkbox>
+            </div>
+            <div style="width:90%; float: left;">
+              <k-dropdown :options="metric_options['delay']" 
+              :value.sync="v4_is_flexible.delay"></k-dropdown>
+            </div>
+            <k-slider icon="adjust" :action="function(val) {v4_metrics.delay = parseInt(val)}"></k-slider>
+          </div>
+          <div style="width:100%; overflow: hidden;">
+            <div style="width:10%; float: left;">
+              <k-checkbox :model.sync = "v4_checked_list" :value = "'utilization'"></k-checkbox>
+            </div>
+            <div style="width:90%; float: left;">
+              <k-dropdown :options="metric_options['utilization']" 
+              :value.sync="v4_is_flexible.utilization"></k-dropdown>
+            </div>
+            <k-slider icon="adjust" :action="function(val) {v4_metrics.utilization = parseInt(val)}"></k-slider>
+          </div>
+          <div style="width:100%; overflow: hidden;">
+            <div style="width:10%; float: left;">
+              <k-checkbox :model.sync = "v4_checked_list" :value = "'priority'"></k-checkbox>
+            </div>
+            <div style="width:90%; float: left;">
+              <k-dropdown :options="metric_options['priority']" 
+              :value.sync="v4_is_flexible.priority"></k-dropdown>
+            </div>
+            <k-slider icon="adjust" :action="function(val) {v4_metrics.priority = parseInt(val)}"></k-slider>
+          </div>
+          <div style="width:100%; overflow: hidden;">
+            <div style="width:10%; float: left;">
+              <k-checkbox :model.sync = "v4_checked_list" :value = "'ownership'"></k-checkbox>
+            </div>
+            <div style="width:90%; float: left;">
+              <k-dropdown :options="metric_options['ownership']" 
+              :value.sync="v4_is_flexible.ownership"></k-dropdown>
+            </div>
+          </div>
+          <k-input :value.sync="v4_metrics.ownership"></k-input>
+
+          <k-slider :max = 6
+          :action="function (val) {depth = parseInt(val)}"></k-slider>
+
+          <k-button icon="search" title="Search" :on_click="get_constrained_paths_v4">
+          </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"></k-dropdown>
+          <k-dropdown icon="circle-o" title="Destination:" :options="get_interfaces"
+            :value.sync ="destination"></k-dropdown>
+
+          <div style="width: 100%; overflow: hidden;">
+              <div style="width:50%; float: left;"> 
+                <k-slider icon="adjust"
+                :action="function (val) {v3_metrics.bandwidth = parseInt(val)}"></k-slider>
+              </div>
+              <div style="margin-left: 1em;"> 
+                <k-checkbox title="Bandwidth" 
+                :model.sync = "v3_checked_list" :value = "'bandwidth'"></k-checkbox>
+              </div>
+              <div style="width:50%; float: left;"> 
+                <k-slider icon="adjust"
+                :action="function (val) {v3_metrics.reliability = parseInt(val)}"></k-slider>
+              </div>
+              <div style="margin-left: 1em;"> 
+                <k-checkbox title="Reliability"
+                :model.sync = "v3_checked_list" :value = "'reliability'"></k-checkbox>
+              </div>
+              <div style="width:50%; float: left;"> 
+                <k-slider icon="adjust"
+                :action="function (val) {v3_metrics.delay = parseInt(val)}"></k-slider>
+              </div>
+              <div style="margin-left: 1em;"> 
+                <k-checkbox title="Delay"
+                :model.sync = "v3_checked_list" :value = "'delay'"></k-checkbox>
+              </div>
+              <div style="width:50%; float: left;"> 
+                <k-slider icon="adjust"
+                :action="function (val) {v3_metrics.utilization = parseInt(val)}"></k-slider>
+              </div>
+              <div style="margin-left: 1em;"> 
+                <k-checkbox title="Utilization"
+                :model.sync = "v3_checked_list" :value = "'utilization'"></k-checkbox>
+              </div>
+              <div style="width:50%; float: left;"> 
+                <k-slider icon="adjust"
+                :action="function (val) {v3_metrics.priority = parseInt(val)}"></k-slider>
+              </div>
+              <div style="margin-left: 1em;"> 
+                <k-checkbox title="Priority"
+                :model.sync = "v3_checked_list" :value = "'priority'"></k-checkbox>
+              </div>
+          </div>
+
+          <k-checkbox icon="adjust" title="Ownership:"
+          :model.sync = "v3_checked_list" :value = "'ownership'"></k-checkbox>
+
+          <k-input 
+          :value.sync="v3_metrics.ownership"></k-input>
+
+          <k-button icon="search" title="Search" :on_click="get_constrained_paths_v3">
+          </k-button>
+        </k-accordion-item>
+      <k-accordion>
+    </div>
   </k-toolbar-item>
 </template>
 
@@ -46,6 +180,70 @@ module.exports = {
       });
 
     },
+    get_constrained_paths_v3 (){
+      var self = this
+      var metrics = {}
+      for(var checked of self.v3_checked_list)
+      {
+        metrics[checked] = self.v3_metrics[checked]
+      }
+
+      $.ajax({
+        async: true,
+        dataType: "json",
+        type: "POST",
+        contentType: "application/json",
+        data: JSON.stringify({"source": self.source,
+               "destination": self.destination,
+               "base_metrics": metrics
+               }),
+
+        url: this.$kytos_server_api + "kytos/pathfinder/v3",
+        success: function(data) {
+            if (data[0] !== undefined){
+                self.paths = data[0]['paths'][0];
+            } else {
+                self.paths = []
+            }
+          self.show();
+        }
+      });
+    },
+    get_constrained_paths_v4(){
+      var self = this
+      var base_metrics = {}
+      var flexible_metrics = {}
+      for(var checked of self.v4_checked_list) {
+        if (self.v4_is_flexible[checked]) {
+          flexible_metrics[checked] = self.v4_metrics[checked]
+        } else {
+          base_metrics[checked] = self.v4_metrics[checked]
+        }
+      }
+
+      $.ajax({
+        async: true,
+        dataType: "json",
+        type: "POST",
+        contentType: "application/json",
+        data: JSON.stringify({"source": self.source,
+               "destination": self.destination,
+               "base_metrics": base_metrics,
+               "flexible_metrics": flexible_metrics,
+               "depth": self.depth
+               }),
+
+        url: this.$kytos_server_api + "kytos/pathfinder/v4",
+        success: function(data) {
+            if (data[0] !== undefined){
+                self.paths = data[0]['paths'][0];
+            } else {
+                self.paths = []
+            }
+          self.show();
+        }
+      });
+    },
     get_topology(){
       var self = this
       $.ajax({
@@ -74,6 +272,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){
@@ -106,8 +341,41 @@ module.exports = {
       source: "",
       destination: "",
       desired_links: [],
-      undesired_links: []
+      undesired_links: [],
+      v3_checked_list: [],
+      v3_metrics:{
+        bandwidth: 0,
+        reliability: 0,
+        delay: 0,
+        utilization: 0,
+        priority: 0,
+        ownership: ""
+      },
+      v4_checked_list: [],
+      v4_metrics:{
+        bandwidth: 0,
+        reliability: 0,
+        delay: 0,
+        utilization: 0,
+        priority: 0,
+        ownership: ""
+      },
+      v4_is_flexible:{
+        bandwidth: false,
+        reliability: false,
+        delay: false,
+        utilization: false,
+        priority: false,
+        ownership: false
+      },
+      depth: 0
     }
   }
 }
 </script>
+
+<style type="text/css">
+body{
+    overflow-y:hidden;
+}
+</style>