Merge pull request #486 from ooni/use-get-measurement

Refactored measurement page using refactored API

components/measurement/CommonSummary.js

@@ -42,13 +42,15 @@ SummaryItemBox.propTypes = {
 
 const CommonSummary = ({
   color,
-  measurement,
+  test_start_time,
+  probe_asn,
+  probe_cc,
   country
 }) => {
   const intl = useIntl()
-  const startTime = measurement.test_start_time
-  const network = measurement.probe_asn
-  const countryCode = measurement.probe_cc
+  const startTime = test_start_time
+  const network = probe_asn
+  const countryCode = probe_cc
 
   const countryBlock = <Flex flexWrap='wrap'>
     <Box mr={2} pb={1} width={1}>

components/measurement/DetailsHeader.js

@@ -59,9 +59,11 @@ const DetailsHeader = ({testName, runtime, notice, url}) => {
           {notice}
         </Box>
         <Box>
-          <Text fontSize={20}>
-            <FormattedMessage id='Measurement.DetailsHeader.Runtime' />: <Text is='span' fontWeight='bold'>{prettyMs(runtime * 1000)}</Text>
-          </Text>
+          {runtime &&
+            <Text fontSize={20}>
+              <FormattedMessage id='Measurement.DetailsHeader.Runtime' />: <Text is='span' fontWeight='bold'>{prettyMs(runtime * 1000)}</Text>
+            </Text>
+          }
         </Box>
       </Flex>
       <Flex pb={4} pt={2} alignItems={['flex-start', 'flex-end']}>
@@ -74,8 +76,7 @@ const DetailsHeader = ({testName, runtime, notice, url}) => {
 DetailsHeader.propTypes = {
   testName: PropTypes.string.isRequired,
   runtime: PropTypes.number.isRequired,
-  notice: PropTypes.any,
-  url: PropTypes.string
+  notice: PropTypes.any
 }
 
 export default DetailsHeader

components/measurement/MeasurementContainer.js

@@ -30,16 +30,9 @@ const mapTestDetails = {
   tor: TorDetails
 }
 
-// FIXME to have header and stuff
-const MeasurementNotFound = () => <h4>Measurement not Found</h4>
-
-const MeasurementContainer = ({ measurement, ...props }) => {
-  if (measurement === undefined) {
-    return <MeasurementNotFound />
-  }
-
-  const TestDetails = mapTestDetails[measurement.test_name] || DefaultTestDetails
 
+const MeasurementContainer = ({ testName, measurement, ...props }) => {
+  const TestDetails = measurement ? mapTestDetails[testName] : DefaultTestDetails
   return (
     <React.Fragment>
       <TestDetails measurement={measurement} {...props} />

components/measurement/MeasurementNotFound.js

@@ -0,0 +1,29 @@
+/* global process */
+import React from 'react'
+import NavBar from '../NavBar'
+import { Container, Flex, Box, Heading, Text } from 'ooni-components'
+import { useRouter } from 'next/router'
+
+import OONI404 from '../../static/images/OONI_404.svg'
+
+const MeasurementNotFound = () => {
+  const { asPath } = useRouter()
+  return (
+    <React.Fragment>
+      <NavBar />
+      <Container>
+        <Flex justifyContent='space-around' alignItems='center' my={5}>
+          <OONI404 height='200px' />
+          <Box width={1/2}>
+            <Heading h={4}>Measurement Not Found</Heading>
+            <Text color='gray8'>
+              {`${process.env.EXPLORER_URL}${asPath}`}
+            </Text>
+          </Box>
+        </Flex>
+      </Container>
+    </React.Fragment>
+  )
+}
+
+export default MeasurementNotFound

components/measurement/nettests/Default.js

@@ -2,14 +2,31 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { FormattedMessage } from 'react-intl'
 
-const DefaultTestDetails = ({ measurement, render }) => (
-  render({
-    statusLabel: <FormattedMessage id='Measurement.Hero.Status.Default' />,
-  })
-)
+const DefaultTestDetails = ({
+  isConfirmed,
+  isAnomaly,
+  isFailure,
+  render
+}) => {
+  const status = isConfirmed ? (
+    'confirmed'
+  ) : (
+    isAnomaly ? (
+      'anomaly'
+    ) : (
+      isFailure ? (
+        'error'
+      ) : 'reachable'
+    )
+  )
+  return (
+    render({
+      status
+    })
+  )
+}
 
 DefaultTestDetails.propTypes = {
-  measurement: PropTypes.object,
   render: PropTypes.func
 }
 

cypress/integration/measurement.e2e.js

@@ -43,15 +43,15 @@ describe('Measurement Page Tests', () => {
       cy.visit('/measurement/20200304T203936Z_AS44869_bVdV4B2HXylbIS8nFmdYbXDsDa5gwmkJbF38uWEfus1MMpS5b6')
     })
 
-    // it('renders an anomaly measurement', () => {
-    //   cy.visit('')
-    // })
+    it('renders an anomaly measurement', () => {
+      cy.visit('/measurement/20200407T024309Z_AS4713_xA9Wh81DQrIFqRe46zwKeyJw4DJQwjyTLBIi2zSQqWUBsfQMJS')
+    })
   })
 
   describe('Facebook Messenger Tests', () => {
-    // it('renders an accessible measurement', () => {
-    //   cy.visit('')
-    // })
+    it('renders an accessible measurement', () => {
+      cy.visit('/measurement/20200407T235214Z_AS3269_EIlT6478yDwpzYNO8f54Xl12aN4AbkK82OuCUZSYHh3cTKNoYF')
+    })
 
     it('renders an anomaly measurement', () => {
       cy.visit('/measurement/20200304T191012Z_AS42610_fqDY31xiRoWEdKd4GWtV84UYpXG2RlpjBK7kd8rTLHIItqMnej')

index.js

@@ -13,7 +13,7 @@ const dev = process.env.NODE_ENV === 'development'
 if (dev === true) {
   process.env.MEASUREMENTS_URL = process.env.MEASUREMENTS_URL || 'http://127.0.0.1:' + process.env.PORT
 } else {
-  process.env.MEASUREMENTS_URL = process.env.MEASUREMENTS_URL || 'https://api.ooni.io'
+  process.env.MEASUREMENTS_URL = process.env.MEASUREMENTS_URL || 'https://ams-pg.ooni.org'
 }
 if (!process.env.EXPLORER_URL) {
   process.env.EXPLORER_URL = 'http://127.0.0.1:' + process.env.PORT

next.config.js

@@ -10,7 +10,7 @@ module.exports = withSourceMaps(withCSS({
   webpack: (config, {isServer}) => {
     config.plugins.push(
       new webpack.DefinePlugin({
-        'process.env.MEASUREMENTS_URL': JSON.stringify(process.env.MEASUREMENTS_URL || 'https://api.ooni.io'),
+        'process.env.MEASUREMENTS_URL': JSON.stringify(process.env.MEASUREMENTS_URL || 'https://ams-pg.ooni.org'),
         'process.env.EXPLORER_URL': JSON.stringify(process.env.EXPLORER_URL  || 'http://127.0.0.1:' + process.env.PORT),
         'process.env.SENTRY_DSN': JSON.stringify(process.env.SENTRY_DSN || 'https://[email protected]/1427510'),
       })

package.json

@@ -74,15 +74,15 @@
     "start-server-and-test": "^1.10.8"
   },
   "scripts": {
-    "dev": "NODE_ENV=development MEASUREMENTS_URL=http://api.ooni.io SENTRY_DSN=https://[email protected]/1427510 node index.js",
+    "dev": "NODE_ENV=development MEASUREMENTS_URL=https://ams-pg.ooni.org SENTRY_DSN=https://[email protected]/1427510 node index.js",
     "build-translations": "node ./scripts/build-translations.js",
     "extract-i18n-keys": "yarn build && node ./scripts/extract-react-intl-keys.js",
     "build": "next build",
     "export": "next export",
     "lint": "eslint --ignore-path .gitignore --ignore-pattern components/vendor .",
-    "test:e2e": "start-server-and-test dev http://localhost:3100 cypress:run",
+    "test:e2e": "yarn build && start-server-and-test start http://localhost:3100 cypress:run",
     "cypress:run": "cypress run",
     "test": "echo nothing interesting",
-    "start": "node index.js"
+    "start": "MEASUREMENTS_URL=https://ams-pg.ooni.org node index.js"
   }
 }