Skip to content

Add Best Constrained Path Menu - #56

Open
MarvinTorres wants to merge 17 commits into
kytos:masterfrom
MarvinTorres:uichanges
Open

Add Best Constrained Path Menu#56
MarvinTorres wants to merge 17 commits into
kytos:masterfrom
MarvinTorres:uichanges

Conversation

@MarvinTorres

@MarvinTorres MarvinTorres commented Jun 5, 2020

Copy link
Copy Markdown
Contributor

This helps resolve #22

Demo of current iteration:
Peek 2020-07-28 21-17

This updates the UI to support searches for multiple shortest constrained flexible paths. This change affects only the interface - the logic will be the subject of a separate pull request.

Elements Added:

  • A dropdown menu for "Best Constrained Paths"
    • Options to filter out paths with edges that fail to meet the following requirements:
      • Bandwidth less than minimum
      • Reliability less than minimum
      • Delay more than maximum
      • Utilization more than maximum
      • Priority less than minimum
      • Owner different than the requested owner
    • Option to set the flexibility of the filtering.
      • 0 (none): include only edges that hit all requirements.
      • 0 < n < 6 (partial): include only edges that have at most n misses (n is an integer).
      • 6 (full): allow all edges regardless of misses.
  • A scrollbar in case the elements overflow.

Screenshots:
Open
Screenshot from 2020-06-10 16-54-00
Closed
Screenshot from 2020-06-10 16-55-37

@cmagnobarbosa
cmagnobarbosa self-requested a review June 8, 2020 12:45
@MarvinTorres
MarvinTorres marked this pull request as ready for review June 10, 2020 21:09
@cmagnobarbosa
cmagnobarbosa requested a review from josemauro June 12, 2020 12:57
@MarvinTorres

Copy link
Copy Markdown
Contributor Author

I am changing the UI design to support picking flexible and inflexible metrics.

@cmagnobarbosa
cmagnobarbosa self-requested a review June 16, 2020 11:34
@MarvinTorres

Copy link
Copy Markdown
Contributor Author

I did not have enough time to work on the UI too much - it is not much different than before. I would like another review if possible.

@cmagnobarbosa

cmagnobarbosa commented Jun 23, 2020

Copy link
Copy Markdown
Member

I did not have enough time to work on the UI too much - it is not much different than before. I would like another review if possible.

Sure, I will review.

@cmagnobarbosa

Copy link
Copy Markdown
Member

Hello @MarvinTorres, exist a small problem when the browser is resized. The map doesn’t adjust creating a blank bar below the map.

Captura de tela de 2020-06-24 18-41-07

A first, solution to this problem is to disable the scrollbar on the map. But this solution reduces the responsive.

Solution:
Add the code below in pathfinder/ui/k-toollbar/main.kytos

<style type="text/css">
body{
    overflow-y:hidden;
}
</style>

Result:
first_result

I am looking for a better solution.

@MarvinTorres

MarvinTorres commented Jun 25, 2020

Copy link
Copy Markdown
Contributor Author

Thank you @cmagnobarbosa, I will implement your changes. EDIT: It worked!

I managed to add a new component that supports searching for flexible and inflexible metrics. Below is a W.I.P screenshot of its current iteration. Feel free to comment on it - its design is tentative.

updated

 - self.v4_is_flexible[checked] was comparing strings, not boolean.
  - Will need to change code to use bools
@cmagnobarbosa
cmagnobarbosa self-requested a review June 30, 2020 19:16
 -  "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
@MarvinTorres

Copy link
Copy Markdown
Contributor Author

Hello everyone, I updated the UI once more. To demonstrate this, I added a GIF that shows the updated UI in the original post.

@MarvinTorres MarvinTorres changed the title UI Changes Add Best Constrained Path Menu Jul 2, 2020
Comment thread ui/k-toolbar/main.kytos Outdated
Comment thread ui/k-toolbar/main.kytos Outdated
@rmotitsuki

Copy link
Copy Markdown
Member

Kytos also has a "compact view" for the menu. It changes the view when you click on 'Kytos' in the upper left corner.
I think that it will not fit all the options, so you can put just the main filters in there.
image

@MarvinTorres

MarvinTorres commented Jul 7, 2020

Copy link
Copy Markdown
Contributor Author

@rmotitsuki I would like to add a compact version of this menu. But I was unable to find documentation on how to do so. I could be missing something, though.

I could implement a simplified menu, but I would like to design it such that it does not show up in the uncompacted version. But I have no idea where to begin implementing that design. If you would help me, I would appreciate it.

@rmotitsuki

Copy link
Copy Markdown
Member

@rmotitsuki I would like to add a compact version of this menu. But I was unable to find documentation on how to do so. I could be missing something, though.

I could implement a simplified menu, but I would like to design it such that it does not show up in the uncompacted version. But I have no idea where to begin implementing that design. If you would help me, I would appreciate it.

@MarvinTorres
The compact version is mentioned in the Web Interface documentation, but I was unable to find an implementation document.
I will write a document but it may take a while.
You can check the source code of the UI component to understand how it works.
The Textarea component does not appear in the compacted format. It uses a class no-compact in the HTML template to hide it.
The Input component is displayed in the compacted format, so there is a compacted class in the style tag.

@MarvinTorres

Copy link
Copy Markdown
Contributor Author

@rmotitsuki Thank you for your help! I will look up the source files as you suggested.

If I have any more questions I will let you know.

@gleybersonandrade

Copy link
Copy Markdown
Contributor

Hello @MarvinTorres, I was testing your user interface and it's great, thanks bro! I have a question: If I selected an Undesired Link, can I deselect it?

image

@MarvinTorres

MarvinTorres commented Jul 17, 2020

Copy link
Copy Markdown
Contributor Author

@gleybersonandrade I messed with the UI a bit and found that I could unselect an option by clicking on it while holding ctrl.

@gleybersonandrade

Copy link
Copy Markdown
Contributor

@MarvinTorres sure, so simple! :) Thanks man

@MarvinTorres

Copy link
Copy Markdown
Contributor Author

@gleybersonandrade @rmotitsuki @josemauro @cmagnobarbosa I would like to merge the Best Path and Best Constrained Path accordion items into one menu. Let me know what you think of that idea.

   - Added "Minimum Flexible Hits" text to menu
   - Changed "maximum_misses" var name to "minimum_flexible_hits"
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Create the Pathfinder ui

5 participants