Skip to content
New issue

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

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

Already on GitHub? Sign in to your account

Add Best Constrained Path Menu #56

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

Conversation

MarvinTorres
Copy link
Contributor

@MarvinTorres MarvinTorres commented Jun 5, 2020

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
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
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
Copy link
Member

cmagnobarbosa commented Jun 23, 2020

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
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
Copy link
Contributor Author

MarvinTorres commented Jun 25, 2020

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
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
ui/k-toolbar/main.kytos Outdated Show resolved Hide resolved
ui/k-toolbar/main.kytos Outdated Show resolved Hide resolved
@rmotitsuki
Copy link
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
Copy link
Contributor Author

MarvinTorres commented Jul 7, 2020

@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
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
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
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
Copy link
Contributor Author

MarvinTorres commented Jul 17, 2020

@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
Contributor

@MarvinTorres sure, so simple! :) Thanks man

@MarvinTorres
Copy link
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