Added Status Menu to UI

[HeriLFIU]

Closes kytos-ng/topology#125

Summary

The status menu UI was added. It allows the user to see the status of switches, links, and interfaces. They can filter by name and different parameters such as status, reason, and enabled.

They can also store table elements in a separate list. When clicking on the Add/Remove button, the element will be added to the approved list. You can view all elements added to the approved list by clicking on the approved button. This allows users to store and organize data within the UI itself.

Data from this table is also saved within local storage, so you can refresh the page and keep all of your filters/data saved.

Users will also be able to click on switches within the table to access their corresponding data.

This new menu can be accessed by pressing ctrl + shift + s.

Local Tests

A combination of all parameters were used all at once to ensure functionality.

To test the new local storage functionality the page was refreshed and the data stayed the same.

Quality of Life Changes

QoL changes for the mef-eline EVC table will be available through a separate PR.

[HeriLFIU]

Just fixed two issues I found this morning:

1. Since the approved list section was based on the entire object this meant that whenever one section changed (such as active), it would count as a completely different object and add it to the approved list, even though it referred to the same switch, interface, or link. To solve this I made the approved list section based on id, so you should no longer be able to add the exact same element twice.
2. The status reason section was just a list, and it looked a bit out of place. Because of this I turned it into a string.

[HeriLFIU]

1. Yes, that is a good idea, ill add both a refresh button and also refresh it on ctrl+shift+s, because when someone wants to access it again the data should be updated.
2. I do think so too, since the localStorage may be useful for other UI elements as well.
3. I forgot about that, ill get to it now
4. Yes, it's like "pre selected" elements that you store in a separate list. I think that I should create a new section for the normal table and one with these "pre selected" elements, so that it doesn't interfere with the normal filters, but yes you are correct on its function.
5. Ill need to fix the search function, I got mef elines search function to work, but I tried to do something different and so I switched it out. I'll just use mef eline's search function again. @viniarck

[rmotitsuki]

Great PR. If I can suggest something, it would be to add comments to each function, especially those that have Regex.

[HeriLFIU]

@viniarck I made all of the changes you had mentioned. I also tested it all out and it seems to be working fine without any issue.

@rmotitsuki Ill try and follow some examples and add more comments. I also saw some unique javascript comments being used in some other code, ill try and utilize them as well.

[HeriLFIU]

@rmotitsuki I added the comments.

@viniarck I tested it out and the search function seems to be working properly now.

[italovalcy]

Hi @HeriLFIU excellent work you have done implementing this feature! It is indeed very useful for our operation!! @viniarck thanks/congrats for the support reviewing and contributing with this feature as well.

Trying to contribute with you guys have done, I have a few commends/suggestions below:

• if possible, can you please add the same filters similar to the Name column into the Status, Enabled and Active columns. That would allow us to filter for a certain name (substring) plus enabled plus active=down
  • same behavior can be accomplished if the filters button allow multiple selection. Although I think having in the table we already got used to (from mef_eline List circuits UI)
• Can you please add the Status menu on the vertical left bar? I know you can just run CTRL+SHIFT+s to see it, but we will easily forget this shortcut and having it on the side bar helps in that sense
• I observed on the interface table you have a second level of scroll bar, Can we remove that and leave only one scrolling to the whole page?
• I tested with the Interface.metadata port_name and it is not showing on the table. Can we also have this similar to what we have for Link.metadata.link_name and Switch.metadata.node_name ?
• The little eye on the "Hidden/Selected" column was not immediate for me the idea. Maybe we could change a little bit and move that column to be the first one (no column title) and change to use a single checkbox (instead of the eye). Then we move the Data>Original/Pre-selected to the filters and renamed them to "Show-Selected" and "Show-All". What do you think?

[HeriLFIU]

Hello @italovalcy,

1. That makes sense, I can just remove the buttons and replace them with the search columns from the EVC table.
2. I haven't seen the code for the vertical left bar, but I can take a look at it and see how the Status Menu can be incorporated into it.
3. I currently don't know what's causing the scroll bar to appear, maybe it occurs when the table gets too large, but I'll take a look at it and see if I can remove it.
4. I'll add the port_name to the menu.
5. The eyes are a very confusing feature, so what you just mentioned is a good way to make it clearer. I'll message you once I finish the changes so that you can see them for yourself and make sure everything is in order.

[HeriLFIU]

@italovalcy @viniarck It took me a while, but everything seems to be working fine now.

I don't know if this should be documented but I added a new way to include UI components within the Menu Bar via events.

To explain it in detail:

1. You create some data that will be sent via an event to the Menu Bar, as seen below.

   

2. You then emit this info via the includeMenuBar event, as seen below.

   

3. Lastly, whenever you click on the corresponding button within the Menu Bar, it will emit another event, the one you had set as nameCall within your data. You can then add a listener to receive it and do something with it, such as display the new component.

[HeriLFIU]

I think this abstracts away a lot of complexity and whenever someone wants to add a new option to the Menu Bar, they can just emit the info from within their component an register a listener to receive something back.

[HeriLFIU]

I changed nameCall to eventName since it made more sense

[HeriLFIU]

@viniarck I resolved the issue with the selected filter. Since I wasn't using structuredClone for the selected list elements, it was treating it as the same object while filtering and deleting everything within it.

• I fixed the issue with the components and removed what I had added for separate components.

• It was a bit difficult due to the constraints of the v-hotkey package, but I was able to dynamically generate hotkeys based on the number of components within the menu bar.

• I also cleaned up the code and removed some now unnecessary things, such as the close and maximize button, since the Status Menu will be kept in the Menu Bar.

[HeriLFIU]

It is ordered from top to bottom within the Menu Bar, so the Users should be able to press ctrl+shift+"componentNumber", to quickly access that element.

For example:

• If the wanna access the map settings, it'll be the first element within the Menu Bar, so it's ctrl+shift+1.

• If the wanna access the map Status Menu, it'll be the second element within the Menu Bar, so it's ctrl+shift+2.

[viniarck]

@viniarck I resolved the issue with the selected filter. Since I wasn't using structuredClone for the selected list elements, it was treating it as the same object while filtering and deleting everything within it.

• I fixed the issue with the components and removed what I had added for separate components.
• It was a bit difficult due to the constraints of the v-hotkey package, but I was able to dynamically generate hotkeys based on the number of components within the nav-bar.
• I also cleaned up the code and removed some now unnecessary things, such as the close and maximize button, since the Status Menu will be kept in the Menu Bar.

Nice @HeriLFIU. Great process and solution. I noticed another unexpected side effect though:

• It looks like the k-status-menu is always showing up maximized (when http://localhost:8181/ is opened), where we used to have the initial mapbox-settings focused and the topology was displayed. Can you double check if this is also happening for you locally?

• If you can also update the changelog with ctrl+shift+2 instead of ctrl+shift+s.

[HeriLFIU]

@viniarck It should be working now, I forgot to add the APP.vue within the first commit that added the Status Menu to the Menu Bar. I also updated the changelog.

[HeriLFIU]

@italovalcy @viniarck I just finished reading through and committing all of the changes. I also tested them out and found one small error while showing the info panel. From what I understand its trying to access some metadata called tag_ranges from the interfaces but it's undefined.

[HeriLFIU]

@viniarck Thank the lord, I was trying to find the simplest way to squish everything down into 2 commits, and I read about a method called git interactive rebase. Luckily, since I had all of my commits to the change log separate from everything else. I was just able to do an interactive rebase, push all of the changelog commits to the back, and then squash all of the other commits up at the front into one.

[HeriLFIU]

I also removed the commented method.

[viniarck]

Let's ship it.