Implement the measurement pages

[hellais]

Link to mockup

Every measurement type needs to have a view showing the results in OONI Explorer.

The pattern to follow here, I think, could be similar to that taken for probe-desktop.

See: https://github.com/ooni/probe-desktop/tree/master/renderer/components/nettests

In particular we need a view for:

• [x] Web Connectivity
• [x] HTTP Invalid request Line
• [x] HTTP Header Field Manipulation
• [x] NDT Speed Test
• [x] DASH video streaming
• [x] Telegram test
• [x] WhatsApp
• [x] Facebook Messenger
• [x] Generic unclassified page

For each of these measurement types, it's important to take into account the possible values the relevant test_keys will take.

To learn more about the data format of the test_keys, check out the test specifications: https://github.com/ooni/spec/tree/master/test-specs

[darkk]

Some notes from my 1:1 discussion with @sarathms on 09 Nov 2018 based on the following state of measurement header

• [ ] AS name is needed. Note, AS name may be "long", so it should overflow nicely
• [ ] Runtime deserves more human-readable formatting
• [ ] Date and time of measurement should be explicit about timezone. I suggested placing "UTC" in the text, Sarath suggested to show time in browser's timezone without TZ marker and add UTC time in tooltip.

[gabelula]

Related to https://github.com/ooni/explorer/issues/2

[elioqoshi]

@sarathms quick feedback from my end:

• First off, in the mockups we have a wider body width, whereas in the implementation it's very narrow. Could you refer to the mockups layout width for that?

• Related to the first point, many font sizes are off as well: The header values are currently 24px but should be 28px. The headings in Other Details or Raw Measurement Data are also 22px but should be 24px. Also the value font size in the "Other Details" section is 16px but should be 18px. Same gooes to the description above which overflows which should be 28px and not 16px.

• The tick icon for Reachable is not the one we use. Let me know if you have trouble getting that icon.

• The test class and test name are in black, while the test class should be in white, with the container in the test class color and the test name in the same color.

• Below that, the text seems to be overflowing. This also happens in the Raw Measurement Data field. The data should have its own scrollbar instead of changing the whole webpage's width. Here is the screenshot of the whole page how it looks on my latest Firefox:

• The DOWNLOAD JSON button should be in Title Case instead, so Download JSON. Also it's currently 11px while in the mockups it's 20px.

• In the Other Details field could you give some more space between the rows/ raise the line height? Also the padding to the top of the box background should be reduced a little bit (refer to mockups)

---

All over there are many things which can be answered by the mockups if you use their values as a reference. Happy to jump on a 1:1 as well to go through these. Thanks for the quick progress so far!

[hellais]

We finished a first iteration of this that implements views for all the tests.

Here is, as a reference, links to some measurement pages:

• Web Connectivity Anomaly: http://ooni-explorer-next.test.ooni.io/measurement?report_id=20181219T163526Z_AS30722_nxcsldvrp3xXTW5kFuCWh7xHPvwXhvhr78PcgV7XyP7kTJo4BN&input=http://thepiratebay.org
• Web Connectivity OK: https://ooni-explorer-next.test.ooni.io/measurement?report_id=20181219T014734Z_AS5645_gWLJ6xi6S21HIT4fp0b49wUA0XxpoQjrNSWPGBjvtGf7gzDZuR&input=https://www.mozilla.org/
• WhatsApp OK: http://ooni-explorer-next.test.ooni.io/measurement?report_id=20180918T115950Z_AS1267_IUf6LNtsdA5pKWZv2lIk4jmLvkIvAuJdRwCBso9tpolrAJpTMo
• WhatsApp Anomaly: http://ooni-explorer-next.test.ooni.io/measurement?report_id=20180918T071854Z_AS17622_Yyz7cIeMmYCsEhYHjdSHtTXxaEksIypPUqHEoMOdKCnXXZ2iyF
• Telegram OK: http://ooni-explorer-next.test.ooni.io/measurement?report_id=20181220T002140Z_AS5645_Y0qdZHJnj1QCMbVFqbFFAw6PB44RQTPaPEqwqiKqdMXETSuFOE
• Facebook Messenger OK: http://ooni-explorer-next.test.ooni.io/measurement?report_id=20181220T002134Z_AS5645_DNH0BnoTnSBglZZNF7oME5394yAd1Qjui6Ts8K5hquF6A2MIsJ
• HTTP Invalid Request Line Not Detected: http://ooni-explorer-next.test.ooni.io/measurement?report_id=20181215T180102Z_AS0_8agl0R7K2hBPTMsCMFuxQZERItyNuZeGfjhUdUSorcB7NIu3wi
• HTTP Invalid Request Line Detected: https://ooni-explorer-next.test.ooni.io/measurement?report_id=20170831T234320Z_AS57218_XWI5W9PrsXjyLIAjt20vrePg4vh00YRa38Zv4UuIEE0bpeP2y3
• HTTP Header Field Manipulation Not Detected: http://ooni-explorer-next.test.ooni.io/measurement?report_id=20181220T002547Z_AS41661_1vDgHSeJiNKH94wtpPAZt4J2OYYitL8WhuAiNk020m8yso1xPt
• HTTP Header Field Manipulation Detected: https://ooni-explorer-next.test.ooni.io/measurement?report_id=20161219T000049Z_AS17974_VIUyHiQj5rKlMP1hTxg0IYVU6tkX8ovozq2JHHaA7Wjy9ZXbwz
• NDT Speed Test: https://ooni-explorer-next.test.ooni.io/measurement?report_id=20181124T220450Z_AS8151_GqFZbRudFUVOyRZUQBiYyI5WeKSnlbWSuKxAkkbkLOIUWTUqPG
• Dash: https://ooni-explorer-next.test.ooni.io/measurement?report_id=20181220T001005Z_AS27699_do91V7C69ACZIue9uWmZjrFjuUm3WIC8ikhUTZwAonDcdElU5R

@elioqoshi could your feedback into other individual tickets so we can move it forward from there?

I suggest we implement those as a next iteration.

[elioqoshi]

Feedback continuing here: https://github.com/ooni/explorer/issues/35