Added UI to telemetry_int

[HeriLFIU]

Closes #92 Closes #93

Summary

The UI for the telemetry_int napp was added. It allows the user to view a list of available EVCs and their corresponding INT data. You can also enable, disable, and redeploy INT on a set of chosen EVCs via the UI.

You can filter the EVCs based on specific characteristics with the corresponding search columns. Data is saved within local storage to maintain the state of the search columns between each session.

An image below of the telemetry_int UI can be seen:

Local Tests

A combination of all parameters were used all at once to ensure functionality. INT was enabled, disabled, and redeployed on a single EVC. To test the new local storage functionality the page was refreshed and the data stayed the same.

[viniarck]

Here's another example regarding error messages, notice that in this case it couldn't enable due to metadata missing, but the UI didn't show the description in the notification component:

[HeriLFIU]

@viniarck I was able to test it out and everything seems to be working properly.

I added the description from the JSON response to the notifications as seen below:

Additionally, the issue with the EVCs not updating seemed to be caused by the fact that I was appending all of the information from a new request to the same JS object that contained the information from the previous request. I resolved this issue by clearing the list on every new request and it seems to be working fine.

[HeriLFIU]

@viniarck I just finished doing some testing, and everything seems to be working fine. I also implemented the column sorting in ascending or descending order.

[HeriLFIU]

Good afternoon, @viniarck ,

2. Yes, a modal pop when trying to disable telemetry_int sounds good, so that no one accidentally disables it.
3. That is a good idea, I'll make it so that the UI updates on successful operations so that it is smoother.

I see what you mean with conciseness, ill read through the changes and implement them.

[HeriLFIU]

@viniarck I implemented all of the requested changes and it all seems to be working as expected.

[HeriLFIU]

@viniarck I was able to add the notifications and the UI now updates properly, the initial issue was that I forgot a keyword, the later issue that I discussed during the meeting was due to how I was trying to implement the updates on requests and Vue JS Props.

[HeriLFIU]

It should all be working now, I enabled and disabled telemetry_INT and the UI updated without any issue. There was no need for timers, that was my first idea for resolving the issue, but it turned out to be incorrect, just an issue with a prop.

[viniarck]

and then when I brought the external loop interface up again sudo ifconfig s1-eth5 up, and clicked on the button it worked too.

@HeriLFIU. Fantastic. I've quickly explored here and it worked for me too.

But, I ended up hitting a case where after clicking on the list button, it didn't list the status as DOWN, can you double check this? Looks like it's just a data transformation issue, I haven't spotted in the code yet though:

To reproduce:

• I've enabled int on some EVCs
• I've shutdown one interface of the external loop topology sudo ifconfig s1-eth5 down (if you're using the custom/ring_int.py).
• Click on the list button and notice that it'll still show as UP

After a page refresh it worked too.

Looks like this isn't deterministic, I tried to reproduce again and it worked. I'll leave the PR approved, but please check if you can spot anything else related to this point. At that time clicking repeatedly on list didn't fixed it.

[HeriLFIU]

@viniarck I was able to recreate and fix the issue, it should all be good now. It was due to the way I implemented the updates/requests on successful operations. It basically locked out the list EVCs button once you did an operation and would only use the other 3 operation buttons for updating the UI.