hitman401 / crust_dashboard Goto Github PK

FE team - please ignore. Not sure where BE want their bugs so placing here for now for Nikita, Povilas & Spandan. Will discuss with them on Monday.
Issues with error:

• still says crustnet.maidsafe.net (Nikita knows about this & probably fixed, but would like to see it tracked & confirmed)
• the press any key to continue... doesn't work - hitting enter made it panic, but was able to hit other keys without it exiting.

Show initial state and the progress bar to reflect the loading state.

https://github.com/maidsafe/crust/releases/tag/untagged-62da0c4f7fb0f1b90700

• add text
• add zips
• add hashes

Original requirements for this stated that if only the HP result(s) changed it should NOT be marked as duplicate.
tcp result change is fine - it still comes through into the db but udp result change is being filtered as duplicate

Implement dashboard reducer which computes and holds the data excluding the hairpinned connections

Functional nav bar with filters enabled and selected filter must be highlighted

Something that the community have brought up on the forum after previous web releases, so keen to resolve these where possible.

1. Scan on https://crusttest.maidsafe.net/update_ip.html reported 2 errors and 5 warnings
   https://validator.w3.org/nu/?doc=https%3A%2F%2Fcrusttest.maidsafe.net%2Fupdate_ip.html

2. Scan on https://crusttest.maidsafe.net/ returned 1 warning
   https://validator.w3.org/nu/?doc=https%3A%2F%2Fcrusttest.maidsafe.net%2F

Not a priority bug (IMO), but the word "network" has been explicitly removed from elsewhere in marketing communications, URLs and the dashboard, so ideally wouldn't be mentioned here either.

{ "geo_info" : { "error" : true, "message" : "Upgrade your plan @ https://ipapi.co/", "reason" : "RateLimited" }

Not sure what the requirements are for screen size compatibility, but the dashboard is unreadable for mobiles (esp in portrait mode). I imagine a fair number of users who read the forum post would click the link to the dashboard on their mobiles to see results before they consider trying to connect on their laptops/desktops.
Even at tablet screen size there's some obvious overlap beginning to happen.

Mobile examples for Pixel 2 & iPhone X:

note I'm using chrome to simulate this

https://maidsafe.slack.com/archives/G03UW8KPJ/p1539684354000100

The main reducer must filter the hair pinned connections based on the include/exclude property.

Implement the OS tab as per design. The charts should change based on the connection result filter

Implement activity tab based on design

Set the all time date range for the first time in the main reducer. UI can make use of this to present it

Implement the static information page based on the design

New logs will be pushed to the store using an NEW_LOG action. All reducers should have an action type to handle this incoming log. new log should be pushed to the main list only after checking the hash id of the last element to avoid duplicates.

Add a property in the reducer to track the state of the current page in the table. This helps retain the current page or reset it to the default according to the requirement

Need to decide whether to keep the results each iteration

This has been happening since Friday - assumed it was because I had created a huge data set (391,814 log entries) but I've deleted all those entries, worked with a couple of entries for a while to test some other parts, then added 365 logs/db entries and it stopped displaying on the dashboard after it moved onto the 2nd page.
Will leave it in this state for FE team to view on Monday morning.

Have error component implemented. The component will take error message as a prop and display the same. will be shown if the error message is set.

Connection attempts tabs must have separate reducers to handle the filter states and have the data applied to the corresponding filters.

https://maidsafe.slack.com/archives/G03UW8KPJ/p1539687231000100

Bind the reducers, actions and UI for connection attempts page.

Websocket client implementation to get data from the server

Display hash as ID in the table. The data must be rendered according to the global filters. Should have props set max rows.

When the date range is picked the logs should be filtered for the selected range and displayed. The selected date range must be represented in the date range field

Implement the tab pane with the components specific to the tabs. When the tab selection changes the components should be rendered as per the requirement. The filters must change according to the tab selection.

Sever Paging

• Handle no logs returned from the server
• Apply page loading skeleton to only chart and table component instead of the whole page

Filter:

• Rename EDM_RANDOM to EDM Random in dropDown filter and in the table NAT Type column

Table:

• For a successful connection use row colour #FFFFFF
• For a failed connection use row colour #FAFAFA
• group requester and responder (Allot appopriate spacing)
• Add right padding to table's paging component

Chart:

• Change title to Connection Success Rate
• Display legend towards the right
• Add label to indicate x-axis Cumulative Attempts

Implement countries tab based on design. The tabs should change based on the connection status filter

Date range & connection results filters must be handled. Group the countries and also group the logs based on All time results and connection results. This will reduce the number of iterations when the filter changes

• update crust-net-visualiser/src/config/app.json
• rebuild
• restart server
• restart proxy

Charts do not need any slider. Remove the slider component from charts.

The logs must be held in memory and added to the main logs lost only after the initial loading is finished. All the logs will be pushed via the dispatch function of redux.

IP addresses should not be sent to the dashboard.
Note that EDMRandomPorts may also be exposed here - I've not run data with them listed through yet

https://github.com/maidsafe/crust/releases/latest

Implement the static information page based on the design

As it stands we will be exposing the following data under the hood of the dashboard for all users, for anyone who wants to dig into it. IMO we don’t need to expose all of this, just country_name is actually required for the dashboard geo info surely? Some of the below doesn’t matter too much, but others such as the org, asn, longitude, latitude and city may spook some people

    "geo_info": {
      "ip": "81.152.169.229",
      "city": "Ayr",
      "region": "Scotland",
      "region_code": "SCT",
      "country": "GB",
      "country_name": "United Kingdom",
      "continent_code": "EU",
      "in_eu": true,
      "postal": "KA7",
      "latitude": 55.45,
      "longitude": -4.6167,
      "timezone": "Europe/London",
      "utc_offset": "+0100",
      "country_calling_code": "+44",
      "currency": "GBP",
      "languages": "en-GB,cy-GB,gd",
      "asn": "AS2856",
      "org": "British Telecommunications PLC"

• When the data fed to the table changes reset the table page to the first page
• update the additional info message to "want to participate? Join the test"

Implement the UI and bind the dashboard reducer values.

Integrate the drop down selection for the Hair pinning filtration

https://maidsafe.slack.com/archives/G03UW8KPJ/p1539688034000100?thread_ts=1539687231.000100&cid=G03UW8KPJ

Use SASS antd to set up the basic structure so that it is easy to change the theme.

Repro'd in Chrome & FF/
Steps to reproduce:

• Open dashboard and minimise side bar

• wait for page to auto-refresh

• expand sidebar

The right side of the graph is now overhanging the edge of the page

See the EDM random ports entry - the "United Kingdom" row for the requester is overhanging and seems to result in the requester country not being displayed.

This issue can be seen now on https://crusttest.maidsafe.net/ - I won't remove until I get the go ahead that you no longer need this data

https://maidsafe.slack.com/archives/G03UW8KPJ/p1539687231000100

Reducer to use variables to show the progress state of the initial loading