From 8617f1c3eb785ed0d9468d276d75841a4fbdc1a2 Mon Sep 17 00:00:00 2001
From: David Ramirez <drami102@fiu.edu>
Date: Thu, 19 Mar 2020 21:44:47 -0400
Subject: [PATCH 01/17] Finished webui  + Adds in support for constraints  +
 Adds in support for flexibility

---
 ui/k-toolbar/main.kytos | 95 ++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 94 insertions(+), 1 deletion(-)

diff --git a/ui/k-toolbar/main.kytos b/ui/k-toolbar/main.kytos
index d71c563a..441de29c 100644
--- a/ui/k-toolbar/main.kytos
+++ b/ui/k-toolbar/main.kytos
@@ -14,6 +14,56 @@
         </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>
+
+        <k-checkbox icon="circle-o" title="Bandwidth:"
+        :model.sync = "checkedList" :value = "'bandwidth'"></k-checkbox>
+
+        <k-slider icon="circle-o"
+        :action="function (val) {metrics.bandwidth = parseInt(val)}"></k-slider>
+
+        <k-checkbox icon="circle-o" title="Reliability:"
+        :model.sync = "checkedList" :value = "'reliability'"></k-checkbox>
+
+        <k-slider icon="circle-o"
+        :action="function (val) {metrics.reliability = parseInt(val)}"></k-slider>
+
+        <k-checkbox icon="circle-o" title="Delay:"
+        :model.sync = "checkedList" :value = "'delay'"></k-checkbox>
+
+        <k-slider icon="circle-o"
+        :action="function (val) {metrics.delay = parseInt(val)}"></k-slider>
+
+        <k-checkbox icon="circle-o" title="Utilization:"
+        :model.sync = "checkedList" :value = "'utilization'"></k-checkbox>
+
+        <k-slider icon="circle-o"
+        :action="function (val) {metrics.utilization = parseInt(val)}"></k-slider>
+
+        <k-checkbox icon="circle-o" title="Priority:"
+        :model.sync = "checkedList" :value = "'priority'"></k-checkbox>
+
+        <k-slider icon="circle-o"
+        :action="function (val) {metrics.priority = parseInt(val)}"></k-slider>
+
+        <k-checkbox icon="circle-o" title="Ownership:"
+        :model.sync = "checkedList" :value = "'ownership'"></k-checkbox>
+
+        <k-input icon="circle-o"
+        :value.sync="metrics.ownership"></k-input>
+
+        <k-slider icon="circle-o" :max = 6
+        :action="function (val) {flexible = parseInt(val)}"></k-slider>
+
+        <k-button icon="search" title="Search" :on_click="get_constrained_paths">
+        </k-button>
+
+      </k-accordion-item>
+
     <k-accordion>
   </k-toolbar-item>
 </template>
@@ -45,6 +95,39 @@ module.exports = {
         }
       });
 
+    },
+    get_constrained_paths (){
+      var self = this
+      var metrics = {}
+      var checked
+      for(checked of self.checkedList)
+      {
+        metrics[checked] = self.metrics[checked]
+      }
+
+      $.ajax({
+        async: true,
+        dataType: "json",
+        type: "POST",
+        contentType: "application/json",
+        data: JSON.stringify({"source": self.source,
+               "destination": self.destination,
+               "metrics": metrics,
+               "flexible": self.flexible,
+               "checks": self.checkedList
+               }),
+
+        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_topology(){
       var self = this
@@ -106,7 +189,17 @@ module.exports = {
       source: "",
       destination: "",
       desired_links: [],
-      undesired_links: []
+      undesired_links: [],
+      checkedList: [],
+      metrics:{
+        bandwidth: 1,
+        reliability: 2,
+        delay: 3,
+        utilization: 4,
+        priority: 5,
+        ownership: "yo"
+      },
+      flexible: 6
     }
   }
 }

From 3656d99ee0ccdaf3c142020ae30f3e6966df37de Mon Sep 17 00:00:00 2001
From: David Ramirez <drami102@fiu.edu>
Date: Fri, 20 Mar 2020 22:09:07 -0400
Subject: [PATCH 02/17] Removed code from web ui used to help debug

---
 ui/k-toolbar/main.kytos | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/ui/k-toolbar/main.kytos b/ui/k-toolbar/main.kytos
index 441de29c..5bf624a5 100644
--- a/ui/k-toolbar/main.kytos
+++ b/ui/k-toolbar/main.kytos
@@ -113,8 +113,7 @@ module.exports = {
         data: JSON.stringify({"source": self.source,
                "destination": self.destination,
                "metrics": metrics,
-               "flexible": self.flexible,
-               "checks": self.checkedList
+               "flexible": self.flexible
                }),
 
         url: this.$kytos_server_api + "kytos/pathfinder/v3",

From a421cc59de759a2ef16be847db1bf745266c3c8a Mon Sep 17 00:00:00 2001
From: MarvinTorres <mtorr068@fiu.edu>
Date: Mon, 1 Jun 2020 14:20:43 -0400
Subject: [PATCH 03/17] updated change log

---
 CHANGELOG.rst | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.rst b/CHANGELOG.rst
index 1b24a02d..bfb5f22f 100644
--- a/CHANGELOG.rst
+++ b/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
 ==========

From 042f48c70d0639672833e48901f8c0e8e4a66799 Mon Sep 17 00:00:00 2001
From: MarvinTorres <mtorr068@fiu.edu>
Date: Fri, 5 Jun 2020 14:59:23 -0400
Subject: [PATCH 04/17] set metric attribute input values to 0

---
 ui/k-toolbar/main.kytos | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/ui/k-toolbar/main.kytos b/ui/k-toolbar/main.kytos
index 5bf624a5..26bce559 100644
--- a/ui/k-toolbar/main.kytos
+++ b/ui/k-toolbar/main.kytos
@@ -191,12 +191,12 @@ module.exports = {
       undesired_links: [],
       checkedList: [],
       metrics:{
-        bandwidth: 1,
-        reliability: 2,
-        delay: 3,
-        utilization: 4,
-        priority: 5,
-        ownership: "yo"
+        bandwidth: 0,
+        reliability: 0,
+        delay: 0,
+        utilization: 0,
+        priority: 0,
+        ownership: ""
       },
       flexible: 6
     }

From 008373f151164017130e076a31a08da5765140bb Mon Sep 17 00:00:00 2001
From: MarvinTorres <mtorr068@fiu.edu>
Date: Fri, 5 Jun 2020 18:30:37 -0400
Subject: [PATCH 05/17] removed the icons next to the sliders

---
 ui/k-toolbar/main.kytos | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/ui/k-toolbar/main.kytos b/ui/k-toolbar/main.kytos
index 26bce559..32c1bffe 100644
--- a/ui/k-toolbar/main.kytos
+++ b/ui/k-toolbar/main.kytos
@@ -23,40 +23,40 @@
         <k-checkbox icon="circle-o" title="Bandwidth:"
         :model.sync = "checkedList" :value = "'bandwidth'"></k-checkbox>
 
-        <k-slider icon="circle-o"
+        <k-slider 
         :action="function (val) {metrics.bandwidth = parseInt(val)}"></k-slider>
 
         <k-checkbox icon="circle-o" title="Reliability:"
         :model.sync = "checkedList" :value = "'reliability'"></k-checkbox>
 
-        <k-slider icon="circle-o"
+        <k-slider
         :action="function (val) {metrics.reliability = parseInt(val)}"></k-slider>
 
         <k-checkbox icon="circle-o" title="Delay:"
         :model.sync = "checkedList" :value = "'delay'"></k-checkbox>
 
-        <k-slider icon="circle-o"
+        <k-slider 
         :action="function (val) {metrics.delay = parseInt(val)}"></k-slider>
 
         <k-checkbox icon="circle-o" title="Utilization:"
         :model.sync = "checkedList" :value = "'utilization'"></k-checkbox>
 
-        <k-slider icon="circle-o"
+        <k-slider 
         :action="function (val) {metrics.utilization = parseInt(val)}"></k-slider>
 
         <k-checkbox icon="circle-o" title="Priority:"
         :model.sync = "checkedList" :value = "'priority'"></k-checkbox>
 
-        <k-slider icon="circle-o"
+        <k-slider
         :action="function (val) {metrics.priority = parseInt(val)}"></k-slider>
 
         <k-checkbox icon="circle-o" title="Ownership:"
         :model.sync = "checkedList" :value = "'ownership'"></k-checkbox>
 
-        <k-input icon="circle-o"
+        <k-input 
         :value.sync="metrics.ownership"></k-input>
 
-        <k-slider icon="circle-o" :max = 6
+        <k-slider :max = 6
         :action="function (val) {flexible = parseInt(val)}"></k-slider>
 
         <k-button icon="search" title="Search" :on_click="get_constrained_paths">
@@ -198,7 +198,7 @@ module.exports = {
         priority: 0,
         ownership: ""
       },
-      flexible: 6
+      flexible: 0
     }
   }
 }

From 74e8f0104f1668d37fb6b6ace5bad39de798779c Mon Sep 17 00:00:00 2001
From: MarvinTorres <mtorr068@fiu.edu>
Date: Mon, 8 Jun 2020 11:39:11 -0400
Subject: [PATCH 06/17] declared var inside of loop block

---
 ui/k-toolbar/main.kytos | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/k-toolbar/main.kytos b/ui/k-toolbar/main.kytos
index 32c1bffe..a3a0970a 100644
--- a/ui/k-toolbar/main.kytos
+++ b/ui/k-toolbar/main.kytos
@@ -99,8 +99,8 @@ module.exports = {
     get_constrained_paths (){
       var self = this
       var metrics = {}
-      var checked
-      for(checked of self.checkedList)
+
+      for(var checked of self.checkedList)
       {
         metrics[checked] = self.metrics[checked]
       }

From 58d8074f4be1d9241305291446231ecdd1c40720 Mon Sep 17 00:00:00 2001
From: MarvinTorres <mtorr068@fiu.edu>
Date: Wed, 10 Jun 2020 16:41:32 -0400
Subject: [PATCH 07/17] compacted sliders and added scrollbar

---
 ui/k-toolbar/main.kytos | 144 ++++++++++++++++++++++------------------
 1 file changed, 78 insertions(+), 66 deletions(-)

diff --git a/ui/k-toolbar/main.kytos b/ui/k-toolbar/main.kytos
index a3a0970a..98a38503 100644
--- a/ui/k-toolbar/main.kytos
+++ b/ui/k-toolbar/main.kytos
@@ -1,70 +1,83 @@
 <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-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>
-
-        <k-checkbox icon="circle-o" title="Bandwidth:"
-        :model.sync = "checkedList" :value = "'bandwidth'"></k-checkbox>
-
-        <k-slider 
-        :action="function (val) {metrics.bandwidth = parseInt(val)}"></k-slider>
-
-        <k-checkbox icon="circle-o" title="Reliability:"
-        :model.sync = "checkedList" :value = "'reliability'"></k-checkbox>
-
-        <k-slider
-        :action="function (val) {metrics.reliability = parseInt(val)}"></k-slider>
-
-        <k-checkbox icon="circle-o" title="Delay:"
-        :model.sync = "checkedList" :value = "'delay'"></k-checkbox>
-
-        <k-slider 
-        :action="function (val) {metrics.delay = parseInt(val)}"></k-slider>
-
-        <k-checkbox icon="circle-o" title="Utilization:"
-        :model.sync = "checkedList" :value = "'utilization'"></k-checkbox>
-
-        <k-slider 
-        :action="function (val) {metrics.utilization = parseInt(val)}"></k-slider>
-
-        <k-checkbox icon="circle-o" title="Priority:"
-        :model.sync = "checkedList" :value = "'priority'"></k-checkbox>
-
-        <k-slider
-        :action="function (val) {metrics.priority = parseInt(val)}"></k-slider>
-
-        <k-checkbox icon="circle-o" title="Ownership:"
-        :model.sync = "checkedList" :value = "'ownership'"></k-checkbox>
-
-        <k-input 
-        :value.sync="metrics.ownership"></k-input>
-
-        <k-slider :max = 6
-        :action="function (val) {flexible = parseInt(val)}"></k-slider>
-
-        <k-button icon="search" title="Search" :on_click="get_constrained_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">
+          <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) {metrics.bandwidth = parseInt(val)}"></k-slider>
+              </div>
+              <div style="margin-left: 1em;"> 
+                <k-checkbox title="Bandwidth" 
+                :model.sync = "checkedList" :value = "'bandwidth'"></k-checkbox>
+              </div>
+              <div style="width:50%; float: left;"> 
+                <k-slider icon="adjust"
+                :action="function (val) {metrics.reliability = parseInt(val)}"></k-slider>
+              </div>
+              <div style="margin-left: 1em;"> 
+                <k-checkbox title="Reliability"
+                :model.sync = "checkedList" :value = "'reliability'"></k-checkbox>
+              </div>
+              <div style="width:50%; float: left;"> 
+                <k-slider icon="adjust"
+                :action="function (val) {metrics.delay = parseInt(val)}"></k-slider>
+              </div>
+              <div style="margin-left: 1em;"> 
+                <k-checkbox title="Delay"
+                :model.sync = "checkedList" :value = "'delay'"></k-checkbox>
+              </div>
+              <div style="width:50%; float: left;"> 
+                <k-slider icon="adjust"
+                :action="function (val) {metrics.utilization = parseInt(val)}"></k-slider>
+              </div>
+              <div style="margin-left: 1em;"> 
+                <k-checkbox title="Utilization"
+                :model.sync = "checkedList" :value = "'utilization'"></k-checkbox>
+              </div>
+              <div style="width:50%; float: left;"> 
+                <k-slider icon="adjust"
+                :action="function (val) {metrics.priority = parseInt(val)}"></k-slider>
+              </div>
+              <div style="margin-left: 1em;"> 
+                <k-checkbox title="Priority"
+                :model.sync = "checkedList" :value = "'priority'"></k-checkbox>
+              </div>
+          </div>
+  
+          <k-checkbox icon="adjust" title="Ownership:"
+          :model.sync = "checkedList" :value = "'ownership'"></k-checkbox>
+  
+          <k-input 
+          :value.sync="metrics.ownership"></k-input>
+  
+          <k-slider :max = 6
+          :action="function (val) {flexible = 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>
 
@@ -99,7 +112,6 @@ module.exports = {
     get_constrained_paths (){
       var self = this
       var metrics = {}
-
       for(var checked of self.checkedList)
       {
         metrics[checked] = self.metrics[checked]

From a1d97015c1ed83cc2fa88539456c0aebc9eb1ace Mon Sep 17 00:00:00 2001
From: MarvinTorres <mtorr068@fiu.edu>
Date: Mon, 22 Jun 2020 16:04:57 -0400
Subject: [PATCH 08/17] Renamed variable flexible to depth

---
 ui/k-toolbar/main.kytos | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/ui/k-toolbar/main.kytos b/ui/k-toolbar/main.kytos
index 98a38503..9a1e186e 100644
--- a/ui/k-toolbar/main.kytos
+++ b/ui/k-toolbar/main.kytos
@@ -71,7 +71,7 @@
           :value.sync="metrics.ownership"></k-input>
   
           <k-slider :max = 6
-          :action="function (val) {flexible = parseInt(val)}"></k-slider>
+          :action="function (val) {depth = parseInt(val)}"></k-slider>
   
           <k-button icon="search" title="Search" :on_click="get_constrained_paths">
           </k-button>
@@ -124,8 +124,8 @@ module.exports = {
         contentType: "application/json",
         data: JSON.stringify({"source": self.source,
                "destination": self.destination,
-               "metrics": metrics,
-               "flexible": self.flexible
+               "base_metrics": metrics,
+               "depth": self.depth
                }),
 
         url: this.$kytos_server_api + "kytos/pathfinder/v3",
@@ -210,7 +210,7 @@ module.exports = {
         priority: 0,
         ownership: ""
       },
-      flexible: 0
+      depth: 0
     }
   }
 }

From 04a0735c794c23e364d42df228c10c3bb5bea3c5 Mon Sep 17 00:00:00 2001
From: MarvinTorres <mtorr068@fiu.edu>
Date: Wed, 24 Jun 2020 17:24:48 -0400
Subject: [PATCH 09/17] Added accordion item for new best constrained path

---
 ui/k-toolbar/main.kytos | 145 +++++++++++++++++++++++++++++++++++++---
 1 file changed, 134 insertions(+), 11 deletions(-)

diff --git a/ui/k-toolbar/main.kytos b/ui/k-toolbar/main.kytos
index 9a1e186e..28587a2d 100644
--- a/ui/k-toolbar/main.kytos
+++ b/ui/k-toolbar/main.kytos
@@ -14,6 +14,69 @@
           <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">
+          <div style="width:100%; overflow: hidden;">
+            <div style="width:10%; float: left;">
+              <k-checkbox :model.sync = "checked_list" :value = "'bandwidth'"></k-checkbox>
+            </div>
+            <div style="width:90%; float: left;">
+              <k-dropdown :options="metric_options['bandwidth']" 
+              :action="function(val) {is_flexible.bandwidth = val}"></k-dropdown>
+            </div>
+            <k-slider icon="adjust" :action="function(val) {metrics.bandwidth = parseInt(val)}"></k-slider>
+          </div>
+          <div style="width:100%; overflow: hidden;">
+            <div style="width:10%; float: left;">
+              <k-checkbox :model.sync = "checked_list" :value = "'reliability'"></k-checkbox>
+            </div>
+            <div style="width:90%; float: left;">
+              <k-dropdown :options="metric_options['reliability']" 
+              :action="function(val) {is_flexible.reliability = val}"></k-dropdown>
+            </div>
+            <k-slider icon="adjust" :action="function(val) {metrics.reliability = parseInt(val)}"></k-slider>
+          </div>
+          <div style="width:100%; overflow: hidden;">
+            <div style="width:10%; float: left;">
+              <k-checkbox :model.sync = "checked_list" :value = "'delay'"></k-checkbox>
+            </div>
+            <div style="width:90%; float: left;">
+              <k-dropdown :options="metric_options['delay']" 
+              :action="function(val) {is_flexible.delay = val}"></k-dropdown>
+            </div>
+            <k-slider icon="adjust" :action="function(val) {metrics.delay = parseInt(val)}"></k-slider>
+          </div>
+          <div style="width:100%; overflow: hidden;">
+            <div style="width:10%; float: left;">
+              <k-checkbox :model.sync = "checked_list" :value = "'utilization'"></k-checkbox>
+            </div>
+            <div style="width:90%; float: left;">
+              <k-dropdown :options="metric_options['utilization']" 
+              :action="function(val) {is_flexible.utilization = val}"></k-dropdown>
+            </div>
+            <k-slider icon="adjust" :action="function(val) {metrics.utilization = parseInt(val)}"></k-slider>
+          </div>
+          <div style="width:100%; overflow: hidden;">
+            <div style="width:10%; float: left;">
+              <k-checkbox :model.sync = "checked_list" :value = "'priority'"></k-checkbox>
+            </div>
+            <div style="width:90%; float: left;">
+              <k-dropdown :options="metric_options['priority']" 
+              :action="function(val) {is_flexible.priority = val}"></k-dropdown>
+            </div>
+            <k-slider icon="adjust" :action="function(val) {metrics.priority = parseInt(val)}"></k-slider>
+          </div>
+          <div style="width:100%; overflow: hidden;">
+            <div style="width:10%; float: left;">
+              <k-checkbox :model.sync = "checked_list" :value = "'ownership'"></k-checkbox>
+            </div>
+            <div style="width:90%; float: left;">
+              <k-dropdown :options="metric_options['ownership']" 
+              :action="function(val) {is_flexible.ownership = val}"></k-dropdown>
+            </div>
+            <k-input :value.sync="metrics.ownership"></k-input>
+          </div>
+        </k-accordion-item>
   
         <k-accordion-item title="Best Constrained Path">
           <k-dropdown icon="circle-o" title="Source:" :options="get_interfaces"
@@ -28,7 +91,7 @@
               </div>
               <div style="margin-left: 1em;"> 
                 <k-checkbox title="Bandwidth" 
-                :model.sync = "checkedList" :value = "'bandwidth'"></k-checkbox>
+                :model.sync = "checked_list" :value = "'bandwidth'"></k-checkbox>
               </div>
               <div style="width:50%; float: left;"> 
                 <k-slider icon="adjust"
@@ -36,7 +99,7 @@
               </div>
               <div style="margin-left: 1em;"> 
                 <k-checkbox title="Reliability"
-                :model.sync = "checkedList" :value = "'reliability'"></k-checkbox>
+                :model.sync = "checked_list" :value = "'reliability'"></k-checkbox>
               </div>
               <div style="width:50%; float: left;"> 
                 <k-slider icon="adjust"
@@ -44,7 +107,7 @@
               </div>
               <div style="margin-left: 1em;"> 
                 <k-checkbox title="Delay"
-                :model.sync = "checkedList" :value = "'delay'"></k-checkbox>
+                :model.sync = "checked_list" :value = "'delay'"></k-checkbox>
               </div>
               <div style="width:50%; float: left;"> 
                 <k-slider icon="adjust"
@@ -52,7 +115,7 @@
               </div>
               <div style="margin-left: 1em;"> 
                 <k-checkbox title="Utilization"
-                :model.sync = "checkedList" :value = "'utilization'"></k-checkbox>
+                :model.sync = "checked_list" :value = "'utilization'"></k-checkbox>
               </div>
               <div style="width:50%; float: left;"> 
                 <k-slider icon="adjust"
@@ -60,12 +123,12 @@
               </div>
               <div style="margin-left: 1em;"> 
                 <k-checkbox title="Priority"
-                :model.sync = "checkedList" :value = "'priority'"></k-checkbox>
+                :model.sync = "checked_list" :value = "'priority'"></k-checkbox>
               </div>
           </div>
   
           <k-checkbox icon="adjust" title="Ownership:"
-          :model.sync = "checkedList" :value = "'ownership'"></k-checkbox>
+          :model.sync = "checked_list" :value = "'ownership'"></k-checkbox>
   
           <k-input 
           :value.sync="metrics.ownership"></k-input>
@@ -111,8 +174,8 @@ module.exports = {
     },
     get_constrained_paths (){
       var self = this
-      var metrics = {}
-      for(var checked of self.checkedList)
+      var base_metrics = {}
+      for(var checked of self.checked_list)
       {
         metrics[checked] = self.metrics[checked]
       }
@@ -124,7 +187,7 @@ module.exports = {
         contentType: "application/json",
         data: JSON.stringify({"source": self.source,
                "destination": self.destination,
-               "base_metrics": metrics,
+               "base_metrics": base_metrics,
                "depth": self.depth
                }),
 
@@ -138,7 +201,22 @@ module.exports = {
           self.show();
         }
       });
-
+    },
+    get_constrained_paths_flexible(){
+      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]
+        }
+      }
     },
     get_topology(){
       var self = this
@@ -168,6 +246,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){
@@ -201,7 +316,7 @@ module.exports = {
       destination: "",
       desired_links: [],
       undesired_links: [],
-      checkedList: [],
+      checked_list: [],
       metrics:{
         bandwidth: 0,
         reliability: 0,
@@ -210,6 +325,14 @@ module.exports = {
         priority: 0,
         ownership: ""
       },
+      is_flexible:{
+        bandwidth: false,
+        reliability: false,
+        delay: false,
+        utilization: false,
+        priority: false,
+        ownership: false
+      },
       depth: 0
     }
   }

From fae7c0d3a8a41a2867abd94218830cad8beffd25 Mon Sep 17 00:00:00 2001
From: MarvinTorres <mtorr068@fiu.edu>
Date: Wed, 24 Jun 2020 20:11:33 -0400
Subject: [PATCH 10/17] Continued working on new component

---
 ui/k-toolbar/main.kytos | 141 +++++++++++++++++++++++++---------------
 1 file changed, 88 insertions(+), 53 deletions(-)

diff --git a/ui/k-toolbar/main.kytos b/ui/k-toolbar/main.kytos
index 28587a2d..7998a39f 100644
--- a/ui/k-toolbar/main.kytos
+++ b/ui/k-toolbar/main.kytos
@@ -16,66 +16,77 @@
         </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 = "checked_list" :value = "'bandwidth'"></k-checkbox>
+              <k-checkbox :model.sync = "v4_checked_list" :value = "'bandwidth'"></k-checkbox>
             </div>
             <div style="width:90%; float: left;">
               <k-dropdown :options="metric_options['bandwidth']" 
-              :action="function(val) {is_flexible.bandwidth = val}"></k-dropdown>
+              :value.sync="v4_is_flexible.bandwidth"></k-dropdown>
             </div>
-            <k-slider icon="adjust" :action="function(val) {metrics.bandwidth = parseInt(val)}"></k-slider>
+            <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 = "checked_list" :value = "'reliability'"></k-checkbox>
+              <k-checkbox :model.sync = "v4_checked_list" :value = "'reliability'"></k-checkbox>
             </div>
             <div style="width:90%; float: left;">
               <k-dropdown :options="metric_options['reliability']" 
-              :action="function(val) {is_flexible.reliability = val}"></k-dropdown>
+              :value.sync="v4_is_flexible.reliability"></k-dropdown>
             </div>
-            <k-slider icon="adjust" :action="function(val) {metrics.reliability = parseInt(val)}"></k-slider>
+            <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 = "checked_list" :value = "'delay'"></k-checkbox>
+              <k-checkbox :model.sync = "v4_checked_list" :value = "'delay'"></k-checkbox>
             </div>
             <div style="width:90%; float: left;">
               <k-dropdown :options="metric_options['delay']" 
-              :action="function(val) {is_flexible.delay = val}"></k-dropdown>
+              :value.sync="v4_is_flexible.delay"></k-dropdown>
             </div>
-            <k-slider icon="adjust" :action="function(val) {metrics.delay = parseInt(val)}"></k-slider>
+            <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 = "checked_list" :value = "'utilization'"></k-checkbox>
+              <k-checkbox :model.sync = "v4_checked_list" :value = "'utilization'"></k-checkbox>
             </div>
             <div style="width:90%; float: left;">
               <k-dropdown :options="metric_options['utilization']" 
-              :action="function(val) {is_flexible.utilization = val}"></k-dropdown>
+              :value.sync="v4_is_flexible.utilization"></k-dropdown>
             </div>
-            <k-slider icon="adjust" :action="function(val) {metrics.utilization = parseInt(val)}"></k-slider>
+            <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 = "checked_list" :value = "'priority'"></k-checkbox>
+              <k-checkbox :model.sync = "v4_checked_list" :value = "'priority'"></k-checkbox>
             </div>
             <div style="width:90%; float: left;">
               <k-dropdown :options="metric_options['priority']" 
-              :action="function(val) {is_flexible.priority = val}"></k-dropdown>
+              :value.sync="v4_is_flexible.priority"></k-dropdown>
             </div>
-            <k-slider icon="adjust" :action="function(val) {metrics.priority = parseInt(val)}"></k-slider>
+            <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 = "checked_list" :value = "'ownership'"></k-checkbox>
+              <k-checkbox :model.sync = "v4_checked_list" :value = "'ownership'"></k-checkbox>
             </div>
             <div style="width:90%; float: left;">
               <k-dropdown :options="metric_options['ownership']" 
-              :action="function(val) {is_flexible.ownership = val}"></k-dropdown>
+              :value.sync="v4_is_flexible.ownership"></k-dropdown>
             </div>
-            <k-input :value.sync="metrics.ownership"></k-input>
           </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">
@@ -87,56 +98,53 @@
           <div style="width: 100%; overflow: hidden;">
               <div style="width:50%; float: left;"> 
                 <k-slider icon="adjust"
-                :action="function (val) {metrics.bandwidth = parseInt(val)}"></k-slider>
+                :action="function (val) {v3_metrics.bandwidth = parseInt(val)}"></k-slider>
               </div>
               <div style="margin-left: 1em;"> 
                 <k-checkbox title="Bandwidth" 
-                :model.sync = "checked_list" :value = "'bandwidth'"></k-checkbox>
+                :model.sync = "v3_checked_list" :value = "'bandwidth'"></k-checkbox>
               </div>
               <div style="width:50%; float: left;"> 
                 <k-slider icon="adjust"
-                :action="function (val) {metrics.reliability = parseInt(val)}"></k-slider>
+                :action="function (val) {v3_metrics.reliability = parseInt(val)}"></k-slider>
               </div>
               <div style="margin-left: 1em;"> 
                 <k-checkbox title="Reliability"
-                :model.sync = "checked_list" :value = "'reliability'"></k-checkbox>
+                :model.sync = "v3_checked_list" :value = "'reliability'"></k-checkbox>
               </div>
               <div style="width:50%; float: left;"> 
                 <k-slider icon="adjust"
-                :action="function (val) {metrics.delay = parseInt(val)}"></k-slider>
+                :action="function (val) {v3_metrics.delay = parseInt(val)}"></k-slider>
               </div>
               <div style="margin-left: 1em;"> 
                 <k-checkbox title="Delay"
-                :model.sync = "checked_list" :value = "'delay'"></k-checkbox>
+                :model.sync = "v3_checked_list" :value = "'delay'"></k-checkbox>
               </div>
               <div style="width:50%; float: left;"> 
                 <k-slider icon="adjust"
-                :action="function (val) {metrics.utilization = parseInt(val)}"></k-slider>
+                :action="function (val) {v3_metrics.utilization = parseInt(val)}"></k-slider>
               </div>
               <div style="margin-left: 1em;"> 
                 <k-checkbox title="Utilization"
-                :model.sync = "checked_list" :value = "'utilization'"></k-checkbox>
+                :model.sync = "v3_checked_list" :value = "'utilization'"></k-checkbox>
               </div>
               <div style="width:50%; float: left;"> 
                 <k-slider icon="adjust"
-                :action="function (val) {metrics.priority = parseInt(val)}"></k-slider>
+                :action="function (val) {v3_metrics.priority = parseInt(val)}"></k-slider>
               </div>
               <div style="margin-left: 1em;"> 
                 <k-checkbox title="Priority"
-                :model.sync = "checked_list" :value = "'priority'"></k-checkbox>
+                :model.sync = "v3_checked_list" :value = "'priority'"></k-checkbox>
               </div>
           </div>
   
           <k-checkbox icon="adjust" title="Ownership:"
-          :model.sync = "checked_list" :value = "'ownership'"></k-checkbox>
+          :model.sync = "v3_checked_list" :value = "'ownership'"></k-checkbox>
   
           <k-input 
-          :value.sync="metrics.ownership"></k-input>
+          :value.sync="v3_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">
+          <k-button icon="search" title="Search" :on_click="get_constrained_paths_v3">
           </k-button>
         </k-accordion-item>
       <k-accordion>
@@ -172,12 +180,12 @@ module.exports = {
       });
 
     },
-    get_constrained_paths (){
+    get_constrained_paths_v3 (){
       var self = this
-      var base_metrics = {}
-      for(var checked of self.checked_list)
+      var metrics = {}
+      for(var checked of self.v3_checked_list)
       {
-        metrics[checked] = self.metrics[checked]
+        metrics[checked] = self.v3_metrics[checked]
       }
 
       $.ajax({
@@ -187,8 +195,7 @@ module.exports = {
         contentType: "application/json",
         data: JSON.stringify({"source": self.source,
                "destination": self.destination,
-               "base_metrics": base_metrics,
-               "depth": self.depth
+               "base_metrics": metrics
                }),
 
         url: this.$kytos_server_api + "kytos/pathfinder/v3",
@@ -202,21 +209,40 @@ module.exports = {
         }
       });
     },
-    get_constrained_paths_flexible(){
+    get_constrained_paths_v4(){
       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]
+      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
@@ -316,8 +342,17 @@ module.exports = {
       destination: "",
       desired_links: [],
       undesired_links: [],
-      checked_list: [],
-      metrics:{
+      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,
@@ -325,7 +360,7 @@ module.exports = {
         priority: 0,
         ownership: ""
       },
-      is_flexible:{
+      v4_is_flexible:{
         bandwidth: false,
         reliability: false,
         delay: false,

From e289683ec7086f4411c8fb764a9f1620a5f16a88 Mon Sep 17 00:00:00 2001
From: MarvinTorres <mtorr068@fiu.edu>
Date: Wed, 24 Jun 2020 20:24:09 -0400
Subject: [PATCH 11/17] Implemented cmagnobarbosa's map resize fix

---
 ui/k-toolbar/main.kytos | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/ui/k-toolbar/main.kytos b/ui/k-toolbar/main.kytos
index 7998a39f..978ee46e 100644
--- a/ui/k-toolbar/main.kytos
+++ b/ui/k-toolbar/main.kytos
@@ -373,3 +373,9 @@ module.exports = {
   }
 }
 </script>
+
+<style type="text/css">
+body{
+    overflow-y:hidden;
+}
+</style>
\ No newline at end of file

From cbd1286846a3936ca872e5fc6a810b56a1726771 Mon Sep 17 00:00:00 2001
From: MarvinTorres <mtorr068@fiu.edu>
Date: Thu, 25 Jun 2020 22:01:13 -0400
Subject: [PATCH 12/17] Fixed logic error in get_constrained_paths_v4

 - self.v4_is_flexible[checked] was comparing strings, not boolean.
  - Will need to change code to use bools
---
 ui/k-toolbar/main.kytos | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/ui/k-toolbar/main.kytos b/ui/k-toolbar/main.kytos
index 978ee46e..3b24e0d3 100644
--- a/ui/k-toolbar/main.kytos
+++ b/ui/k-toolbar/main.kytos
@@ -214,7 +214,7 @@ module.exports = {
       var base_metrics = {}
       var flexible_metrics = {}
       for(var checked of self.v4_checked_list) {
-        if (self.v4_is_flexible[checked]) {
+        if (self.v4_is_flexible[checked] == 'true') {
           flexible_metrics[checked] = self.v4_metrics[checked]
         } else {
           base_metrics[checked] = self.v4_metrics[checked]
@@ -230,7 +230,8 @@ module.exports = {
                "destination": self.destination,
                "base_metrics": base_metrics,
                "flexible_metrics": flexible_metrics,
-               "depth": self.depth
+               "depth": self.depth,
+               "isFlexible": self.v4_is_flexible
                }),
 
         url: this.$kytos_server_api + "kytos/pathfinder/v4",

From f6093414cace68713b5deea8fd6656b59fa94864 Mon Sep 17 00:00:00 2001
From: MarvinTorres <mtorr068@fiu.edu>
Date: Thu, 25 Jun 2020 22:16:58 -0400
Subject: [PATCH 13/17] Updated get_constrained_paths_v4 to reuse bools.

---
 ui/k-toolbar/main.kytos | 56 +++++++++++++++++++----------------------
 1 file changed, 26 insertions(+), 30 deletions(-)

diff --git a/ui/k-toolbar/main.kytos b/ui/k-toolbar/main.kytos
index 3b24e0d3..6fbae581 100644
--- a/ui/k-toolbar/main.kytos
+++ b/ui/k-toolbar/main.kytos
@@ -17,10 +17,9 @@
 
         <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>
+            :value.sync="v4_source"></k-dropdown>
           <k-dropdown icon="circle-o" title="Destination:" :options="get_interfaces"
-            :value.sync ="destination"></k-dropdown>
-
+            :value.sync ="v4_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>
@@ -81,20 +80,17 @@
             </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>
+            :value.sync="v3_source"></k-dropdown>
           <k-dropdown icon="circle-o" title="Destination:" :options="get_interfaces"
-            :value.sync ="destination"></k-dropdown>
-  
+            :value.sync ="v3_destination"></k-dropdown>
           <div style="width: 100%; overflow: hidden;">
               <div style="width:50%; float: left;"> 
                 <k-slider icon="adjust"
@@ -137,13 +133,10 @@
                 :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>
@@ -193,8 +186,8 @@ module.exports = {
         dataType: "json",
         type: "POST",
         contentType: "application/json",
-        data: JSON.stringify({"source": self.source,
-               "destination": self.destination,
+        data: JSON.stringify({"source": self.v3_source,
+               "destination": self.v3_destination,
                "base_metrics": metrics
                }),
 
@@ -214,7 +207,7 @@ module.exports = {
       var base_metrics = {}
       var flexible_metrics = {}
       for(var checked of self.v4_checked_list) {
-        if (self.v4_is_flexible[checked] == 'true') {
+        if (self.v4_is_flexible[checked]) {
           flexible_metrics[checked] = self.v4_metrics[checked]
         } else {
           base_metrics[checked] = self.v4_metrics[checked]
@@ -226,12 +219,11 @@ module.exports = {
         dataType: "json",
         type: "POST",
         contentType: "application/json",
-        data: JSON.stringify({"source": self.source,
-               "destination": self.destination,
+        data: JSON.stringify({"source": self.v4_source,
+               "destination": self.v4_destination,
                "base_metrics": base_metrics,
                "flexible_metrics": flexible_metrics,
-               "depth": self.depth,
-               "isFlexible": self.v4_is_flexible
+               "depth": self.depth
                }),
 
         url: this.$kytos_server_api + "kytos/pathfinder/v4",
@@ -283,23 +275,23 @@ module.exports = {
       var priority_options = []
       var ownership_options = []
 
-      bandwidth_options.push({value: 'false', description: 'Bandwidth', selected: 'true'});
-      bandwidth_options.push({value: 'true', description: 'Bandwidth (Flexible)'});
+      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)'});
+      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)'});
+      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)'});
+      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)'});
+      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)'});
+      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
@@ -343,6 +335,8 @@ module.exports = {
       destination: "",
       desired_links: [],
       undesired_links: [],
+      v3_source: "",
+      v3_destination: "",
       v3_checked_list: [],
       v3_metrics:{
         bandwidth: 0,
@@ -352,6 +346,8 @@ module.exports = {
         priority: 0,
         ownership: ""
       },
+      v4_source: "",
+      v4_destination: "",
       v4_checked_list: [],
       v4_metrics:{
         bandwidth: 0,

From eec5d70c5b242ed6c8f8a68603668009955a89eb Mon Sep 17 00:00:00 2001
From: MarvinTorres <mtorr068@fiu.edu>
Date: Tue, 30 Jun 2020 19:32:19 -0400
Subject: [PATCH 14/17] Updated API endpoints and removed unnecessary menu  - 
 "Best Constrained Path With Flexible Metrics" now "Best Constrained Path"  - 
 Original "Best Constrained Path" menu removed since it was redundant  - v3
 endpoint removed  - v4 endpoint changed to v2/best-constrained-paths  -
 variable names changed to reflect removed menu

---
 ui/k-toolbar/main.kytos | 187 ++++++++++------------------------------
 1 file changed, 46 insertions(+), 141 deletions(-)

diff --git a/ui/k-toolbar/main.kytos b/ui/k-toolbar/main.kytos
index 6fbae581..59574831 100644
--- a/ui/k-toolbar/main.kytos
+++ b/ui/k-toolbar/main.kytos
@@ -3,141 +3,86 @@
     <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-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-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="v4_source"></k-dropdown>
-          <k-dropdown icon="circle-o" title="Destination:" :options="get_interfaces"
-            :value.sync ="v4_destination"></k-dropdown>
+        <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 style="width:100%; overflow: hidden;">
             <div style="width:10%; float: left;">
-              <k-checkbox :model.sync = "v4_checked_list" :value = "'bandwidth'"></k-checkbox>
+              <k-checkbox :model.sync = "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>
+               :value.sync="is_flexible.bandwidth"></k-dropdown>
             </div>
-            <k-slider icon="adjust" :action="function(val) {v4_metrics.bandwidth = parseInt(val)}"></k-slider>
+            <k-slider icon="adjust" :action="function(val) {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>
+              <k-checkbox :model.sync = "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>
+              :value.sync="is_flexible.reliability"></k-dropdown>
             </div>
-            <k-slider icon="adjust" :action="function(val) {v4_metrics.reliability = parseInt(val)}"></k-slider>
+            <k-slider icon="adjust" :action="function(val) {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>
+              <k-checkbox :model.sync = "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>
+              :value.sync="is_flexible.delay"></k-dropdown>
             </div>
-            <k-slider icon="adjust" :action="function(val) {v4_metrics.delay = parseInt(val)}"></k-slider>
+            <k-slider icon="adjust" :action="function(val) {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>
+              <k-checkbox :model.sync = "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>
+              :value.sync="is_flexible.utilization"></k-dropdown>
             </div>
-            <k-slider icon="adjust" :action="function(val) {v4_metrics.utilization = parseInt(val)}"></k-slider>
+            <k-slider icon="adjust" :action="function(val) {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>
+              <k-checkbox :model.sync = "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>
+              :value.sync="is_flexible.priority"></k-dropdown>
             </div>
-            <k-slider icon="adjust" :action="function(val) {v4_metrics.priority = parseInt(val)}"></k-slider>
+            <k-slider icon="adjust" :action="function(val) {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>
+              <k-checkbox :model.sync = "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>
+              :value.sync="is_flexible.ownership"></k-dropdown>
             </div>
           </div>
-          <k-input :value.sync="v4_metrics.ownership"></k-input>
+          <k-input :value.sync="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="v3_source"></k-dropdown>
-          <k-dropdown icon="circle-o" title="Destination:" :options="get_interfaces"
-            :value.sync ="v3_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">
+          :action="function (val) {maximum_misses = parseInt(val)}"></k-slider>
+          <k-button icon="search" title="Search" :on_click="get_constrained_paths">
           </k-button>
         </k-accordion-item>
       <k-accordion>
@@ -173,44 +118,15 @@ 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.v3_source,
-               "destination": self.v3_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(){
+    get_constrained_paths(){
       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]
+      for(var checked of self.checked_list) {
+        if (self.is_flexible[checked]) {
+          flexible_metrics[checked] = self.metrics[checked]
         } else {
-          base_metrics[checked] = self.v4_metrics[checked]
+          base_metrics[checked] = self.metrics[checked]
         }
       }
       
@@ -219,14 +135,14 @@ module.exports = {
         dataType: "json",
         type: "POST",
         contentType: "application/json",
-        data: JSON.stringify({"source": self.v4_source,
-               "destination": self.v4_destination,
+        data: JSON.stringify({"source": self.source_constrained,
+               "destination": self.destination_constrained,
                "base_metrics": base_metrics,
                "flexible_metrics": flexible_metrics,
-               "depth": self.depth
+               "maximum_misses": self.maximum_misses
                }),
 
-        url: this.$kytos_server_api + "kytos/pathfinder/v4",
+        url: this.$kytos_server_api + "kytos/pathfinder/v2/best-constrained-paths",
         success: function(data) {
             if (data[0] !== undefined){
                 self.paths = data[0]['paths'][0];
@@ -335,21 +251,10 @@ module.exports = {
       destination: "",
       desired_links: [],
       undesired_links: [],
-      v3_source: "",
-      v3_destination: "",
-      v3_checked_list: [],
-      v3_metrics:{
-        bandwidth: 0,
-        reliability: 0,
-        delay: 0,
-        utilization: 0,
-        priority: 0,
-        ownership: ""
-      },
-      v4_source: "",
-      v4_destination: "",
-      v4_checked_list: [],
-      v4_metrics:{
+      source_constrained: "",
+      destination_constrained: "",
+      checked_list: [],
+      metrics:{
         bandwidth: 0,
         reliability: 0,
         delay: 0,
@@ -357,7 +262,7 @@ module.exports = {
         priority: 0,
         ownership: ""
       },
-      v4_is_flexible:{
+      is_flexible:{
         bandwidth: false,
         reliability: false,
         delay: false,
@@ -365,7 +270,7 @@ module.exports = {
         priority: false,
         ownership: false
       },
-      depth: 0
+      maximum_misses: 0
     }
   }
 }

From 58d0f390198786f16760f3fef91f4560805480d9 Mon Sep 17 00:00:00 2001
From: MarvinTorres <mtorr068@fiu.edu>
Date: Mon, 6 Jul 2020 19:31:30 -0400
Subject: [PATCH 15/17] Changed inline css tags to internal css tags

---
 ui/k-toolbar/main.kytos | 46 +++++++++++++++++++++--------------------
 1 file changed, 24 insertions(+), 22 deletions(-)

diff --git a/ui/k-toolbar/main.kytos b/ui/k-toolbar/main.kytos
index 59574831..e9997c50 100644
--- a/ui/k-toolbar/main.kytos
+++ b/ui/k-toolbar/main.kytos
@@ -1,6 +1,6 @@
 <template>
   <k-toolbar-item icon="compass" tooltip="Napp Pathfinder">
-    <div style="overflow-y: auto; height:550px;">
+    <div class="scroll">
       <k-accordion>
         <k-accordion-item title="Best Path">
          <k-dropdown icon="circle-o" title="Source:" :options="get_interfaces"
@@ -20,61 +20,61 @@
             :value.sync="source_constrained"></k-dropdown>
            <k-dropdown icon="circle-o" title="Destination:" :options="get_interfaces"
             :value.sync ="destination_constrained"></k-dropdown>
-          <div style="width:100%; overflow: hidden;">
-            <div style="width:10%; float: left;">
+          <div class="metric">
+            <div class="checkbox">
               <k-checkbox :model.sync = "checked_list" :value = "'bandwidth'"></k-checkbox>
             </div>
-            <div style="width:90%; float: left;">
+            <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 style="width:100%; overflow: hidden;">
-            <div style="width:10%; float: left;">
+          <div class="metric">
+            <div class="checkbox">
               <k-checkbox :model.sync = "checked_list" :value = "'reliability'"></k-checkbox>
             </div>
-            <div style="width:90%; float: left;">
+            <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 style="width:100%; overflow: hidden;">
-            <div style="width:10%; float: left;">
+          <div class="metric">
+            <div class="checkbox">
               <k-checkbox :model.sync = "checked_list" :value = "'delay'"></k-checkbox>
             </div>
-            <div style="width:90%; float: left;">
+            <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 style="width:100%; overflow: hidden;">
-            <div style="width:10%; float: left;">
+          <div class="metric">
+            <div class="checkbox">
               <k-checkbox :model.sync = "checked_list" :value = "'utilization'"></k-checkbox>
             </div>
-            <div style="width:90%; float: left;">
+            <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 style="width:100%; overflow: hidden;">
-            <div style="width:10%; float: left;">
+          <div class="metric">
+            <div class="checkbox">
               <k-checkbox :model.sync = "checked_list" :value = "'priority'"></k-checkbox>
             </div>
-            <div style="width:90%; float: left;">
+            <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 style="width:100%; overflow: hidden;">
-            <div style="width:10%; float: left;">
+          <div class="metric">
+            <div class="checkbox">
               <k-checkbox :model.sync = "checked_list" :value = "'ownership'"></k-checkbox>
             </div>
-            <div style="width:90%; float: left;">
+            <div class="dropdown">
               <k-dropdown :options="metric_options['ownership']" 
               :value.sync="is_flexible.ownership"></k-dropdown>
             </div>
@@ -277,7 +277,9 @@ module.exports = {
 </script>
 
 <style type="text/css">
-body{
-    overflow-y:hidden;
-}
+  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;}
 </style>
\ No newline at end of file

From 6848ceeb1f17f1615f78bb32266d3ab321d4f5a0 Mon Sep 17 00:00:00 2001
From: MarvinTorres <mtorr068@fiu.edu>
Date: Tue, 28 Jul 2020 20:57:29 -0400
Subject: [PATCH 16/17] Multiple changes to improve UX    - Added "Minimum
 Flexible Hits" text to menu    - Changed "maximum_misses" var name to
 "minimum_flexible_hits"

---
 ui/k-toolbar/main.kytos | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/ui/k-toolbar/main.kytos b/ui/k-toolbar/main.kytos
index e9997c50..5ce5c296 100644
--- a/ui/k-toolbar/main.kytos
+++ b/ui/k-toolbar/main.kytos
@@ -80,8 +80,11 @@
             </div>
           </div>
           <k-input :value.sync="metrics.ownership"></k-input>
+          <div class="text">
+            Minimum Flexible Hits:
+          </div>
           <k-slider :max = 6
-          :action="function (val) {maximum_misses = parseInt(val)}"></k-slider>
+          :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>
@@ -139,7 +142,7 @@ module.exports = {
                "destination": self.destination_constrained,
                "base_metrics": base_metrics,
                "flexible_metrics": flexible_metrics,
-               "maximum_misses": self.maximum_misses
+               "minimum_flexible_hits": self.minimum_flexible_hits
                }),
 
         url: this.$kytos_server_api + "kytos/pathfinder/v2/best-constrained-paths",
@@ -270,7 +273,7 @@ module.exports = {
         priority: false,
         ownership: false
       },
-      maximum_misses: 0
+      minimum_flexible_hits: 0
     }
   }
 }
@@ -282,4 +285,5 @@ module.exports = {
   .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>
\ No newline at end of file

From ae4d00b6a4c5f9196eb9a984037513deb89c4b27 Mon Sep 17 00:00:00 2001
From: MarvinTorres <mtorr068@fiu.edu>
Date: Wed, 29 Jul 2020 23:04:15 -0400
Subject: [PATCH 17/17] Removed changelog update

---
 CHANGELOG.rst | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/CHANGELOG.rst b/CHANGELOG.rst
index bfb5f22f..d6fb60d7 100644
--- a/CHANGELOG.rst
+++ b/CHANGELOG.rst
@@ -13,9 +13,6 @@ Added
 
 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
 ==========