Merge branch 'master' into use-get-measurement

ooni · Oct 1, 2020 · 011ec42 · 011ec42
2 parents abc14dc + 6d3e781
commit 011ec42
Show file tree

Hide file tree

Showing 12 changed files with 237 additions and 188 deletions.
diff --git a/components/SocialButtons.js b/components/SocialButtons.js
@@ -0,0 +1,26 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Link, Flex } from 'ooni-components'
+import { Text } from 'rebass'
+import { MdShare } from 'react-icons/lib/md'
+
+function SocialButtons({ url }){
+  const text = 'Data from OONI Explorer';
+  return(
+    <Flex px={2} alignItems='center'>
+      <MdShare height='20px' width='20px'/>
+      <Text pl={2} textAlign='right'>
+        Share on
+        <Link color='blue7' target="_blank" href={`https://www.facebook.com/sharer/sharer.php?u=https://explorer.ooni.org/${url}`}> Facebook </Link>
+        or
+        <Link color='blue7' target="_blank" href={`https://twitter.com/intent/tweet?text=${text}&url=https://explorer.ooni.org/${url}`}> Twitter</Link>
+      </Text>
+    </Flex>
+  )
+}
+
+SocialButtons.propTypes = {
+  url: PropTypes.string.isRequired
+}
+
+export default SocialButtons
diff --git a/components/country/PageNavMenu.js b/components/country/PageNavMenu.js
@@ -1,9 +1,11 @@
 import React, { useState } from 'react'
+import PropTypes from 'prop-types'
 import { Flex, Box, NavLink } from 'ooni-components'
 import styled from 'styled-components'
 import { FormattedMessage } from 'react-intl'
 import { MdExpandLess } from 'react-icons/lib/md'
 import { Hide } from 'rebass'
+import SocialButtons from '../SocialButtons'
 
 const PageNavItem = ({ link, children }) => (
   <Box mx={3} my={1}>
@@ -19,7 +21,7 @@ const ToggleIcon = styled(MdExpandLess)`
   transition: transform 0.1s linear;
 `
 
-const PageNavMenu = () => {
+const PageNavMenu = ({ countryCode }) => {
   const [isOpen, setOpen] = useState(true)
 
   return (
@@ -28,8 +30,8 @@ const PageNavMenu = () => {
       <Hide large xlarge>
         <ToggleIcon size={36} isOpen={isOpen} onClick={() => setOpen(!isOpen)} />
       </Hide>
-      <Box width={[1, 'unset']}>
-        {isOpen && <Flex flexDirection={['column', 'row']} justifyContent='center' py={3}>
+      <Box width={[1, 'unset']} py={2}>
+        {isOpen && <Flex flexDirection={['column', 'row']} justifyContent='center' py={1}>
           <PageNavItem link='#overview'>
             <FormattedMessage id='Country.Heading.Overview'/>
           </PageNavItem>
@@ -43,9 +45,16 @@ const PageNavMenu = () => {
             <FormattedMessage id='Country.Heading.NetworkProperties' />
           </PageNavItem>
         </Flex>}
+        <Flex justifyContent={['flex-start', 'flex-end']} px={[0, 3]} py={1}>
+          <SocialButtons url={`country/${countryCode}`}/>
+        </Flex>
       </Box>
     </React.Fragment>
   )
 }
 
+PageNavMenu.propTypes = {
+  countryCode: PropTypes.string
+}
+
 export default PageNavMenu
diff --git a/components/measurement/DetailsHeader.js b/components/measurement/DetailsHeader.js
@@ -10,6 +10,7 @@ import { MdOpenInNew } from 'react-icons/lib/md'
 
 import { getTestMetadata } from '../utils'
 import Badge from '../Badge'
+import SocialButtons from '../SocialButtons'
 
 const TestGroupBadge = ({icon, name, color}) => (
   <Badge bg={color} color='white'>
@@ -30,40 +31,45 @@ TestGroupBadge.propTypes = {
   color: PropTypes.string
 }
 
-const DetailsHeader = ({testName, runtime, notice}) => {
+const DetailsHeader = ({testName, runtime, notice, url}) => {
   const metadata = getTestMetadata(testName)
 
   return (
-    <Flex py={4} alignItems={['flex-end', 'center']} flexDirection={['column', 'row']}>
-      <Flex mb={[3, 0]} alignItems='center'>
-        <Box>
-          <TestGroupBadge
-            icon={metadata.icon}
-            name={<Text fontSize={20} is='span'>{metadata.groupName}</Text>}
-            color={metadata.color}
-          />
+    <React.Fragment>
+      <Flex pt={4} pb={2} alignItems={['flex-end', 'center']} flexDirection={['column', 'row']}>
+        <Flex mb={[3, 0]} alignItems='center'>
+          <Box>
+            <TestGroupBadge
+              icon={metadata.icon}
+              name={<Text fontSize={20} is='span'>{metadata.groupName}</Text>}
+              color={metadata.color}
+            />
+          </Box>
+          <Box ml={2}>
+            <Link color='blue7' href={metadata.info}>
+              <Text fontSize={20}>
+                {metadata.name}
+                &nbsp;
+                <small><MdOpenInNew /></small>
+              </Text>
+            </Link>
+          </Box>
+        </Flex>
+        <Box mx='auto'>
+          {notice}
         </Box>
-        <Box ml={2}>
-          <Link color='blue7' href={metadata.info}>
+        <Box>
+          {runtime &&
             <Text fontSize={20}>
-              {metadata.name}
-              &nbsp;
-              <small><MdOpenInNew /></small>
+              <FormattedMessage id='Measurement.DetailsHeader.Runtime' />: <Text is='span' fontWeight='bold'>{prettyMs(runtime * 1000)}</Text>
             </Text>
-          </Link>
+          }
         </Box>
       </Flex>
-      <Box mx='auto'>
-        {notice}
-      </Box>
-      <Box>
-        {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']}>
+        <SocialButtons url={url}/>
+      </Flex>
+    </React.Fragment>
   )
 }
 

diff --git a/components/measurement/MeasurementContainer.js b/components/measurement/MeasurementContainer.js
@@ -33,7 +33,11 @@ const mapTestDetails = {
 
 const MeasurementContainer = ({ testName, measurement, ...props }) => {
   const TestDetails = measurement ? mapTestDetails[testName] : DefaultTestDetails
-  return <TestDetails measurement={measurement} {...props} />
+  return (
+    <React.Fragment>
+      <TestDetails measurement={measurement} {...props} />
+    </React.Fragment>
+  )
 }
 
 export default MeasurementContainer
diff --git a/components/measurement/PerformanceDetails.js b/components/measurement/PerformanceDetails.js
@@ -13,40 +13,37 @@ const PerformanceDetails = ({
   timeouts
 }) => {
   const intl = useIntl()
-  let items = [
-    {
-      label: intl.formatMessage({ id: 'Measurement.Details.Performance.Label.AvgPing' }),
-      value: averagePing.toString() + ' ms'
-    },
-    {
-      label: intl.formatMessage({ id: 'Measurement.Details.Performance.Label.MaxPing' }),
-      value: `${isNdt7 ? '~' : ''}${maxPing.toString()} ms`
-    },
-    {
-      label: intl.formatMessage({ id: 'Measurement.Details.Performance.Label.MSS' }),
-      value: mss.toString()
-    },
-    {
-      label: isNdt7 ? intl.formatMessage({
-        id: 'Measurement.Details.Performance.Label.RetransmitRate',
-        defaultMessage: 'Retransmit Rate'
-      }): intl.formatMessage({ id: 'Measurement.Details.Performance.Label.PktLoss' }),
-      value: packetLoss.toString() + '%'
-    },
-  ]
+  let items = []
+  averagePing && items.push({
+    label: intl.formatMessage({ id: 'Measurement.Details.Performance.Label.AvgPing' }),
+    value: `${averagePing} ms`
+  })
+  maxPing && items.push({
+    label: intl.formatMessage({ id: 'Measurement.Details.Performance.Label.MaxPing' }),
+    value: `${isNdt7 ? '~' : ''}${maxPing} ms`
+  })
+  mss && items.push({
+    label: intl.formatMessage({ id: 'Measurement.Details.Performance.Label.MSS' }),
+    value: `${mss}`
+  })
+
+  packetLoss != undefined && items.push({
+    label: isNdt7 ? intl.formatMessage({
+      id: 'Measurement.Details.Performance.Label.RetransmitRate'
+    }): intl.formatMessage({ id: 'Measurement.Details.Performance.Label.PktLoss' }),
+    value: `${packetLoss}%`
+  })
 
   //Only add outOfOrder and timeouts if NDT4/5 measurement
-  if(!isNdt7){
-    items = items.concat([
-      {
-        label: intl.formatMessage({ id: 'Measurement.Details.Performance.Label.OutOfOrder' }),
-        value: outOfOrder.toString() + '%'
-      },
-      {
-        label: intl.formatMessage({ id: 'Measurement.Details.Performance.Label.Timeouts' }),
-        value: timeouts.toString()
-      }
-    ])
+  if(!isNdt7) {
+    outOfOrder != undefined && items.push({
+      label: intl.formatMessage({ id: 'Measurement.Details.Performance.Label.OutOfOrder' }),
+      value: outOfOrder.toString() + '%'
+    })
+    timeouts != undefined && items.push({
+      label: intl.formatMessage({ id: 'Measurement.Details.Performance.Label.Timeouts' }),
+      value: timeouts.toString()
+    })
   }
 
   return (

diff --git a/components/measurement/nettests/Dash.js b/components/measurement/nettests/Dash.js
@@ -1,24 +1,8 @@
-
 import React from 'react'
 import PropTypes from 'prop-types'
-import {
-  Heading,
-  Flex,
-  Box,
-  theme
-} from 'ooni-components'
-
+import { Flex, Box } from 'ooni-components'
 import { Text } from 'rebass'
 import { useIntl } from 'react-intl'
-
-import {
-  VictoryChart,
-  VictoryLine,
-  VictoryTooltip,
-  VictoryVoronoiContainer,
-  VictoryAxis
-} from 'victory'
-
 import MdFlashOn from 'react-icons/lib/md/flash-on'
 
 const InfoBoxItem = ({
@@ -92,10 +76,9 @@ const getOptimalQualityForBitrate = (testKeys) => {
 const DashDetails = ({ measurement, render }) => {
   const intl = useIntl()
   const testKeys = measurement.test_keys
-  // const isFailed = testKeys.failure !== null
-  // const failure = testKeys.failure
+  const failure = testKeys.failure
 
-  if (typeof testKeys.simple === 'undefined' || typeof testKeys.receiver_data === 'undefined') {
+  if (failure === true || typeof testKeys.simple === 'undefined' || typeof testKeys.receiver_data === 'undefined') {
     return render({
       status: 'error'
     })
@@ -105,13 +88,6 @@ const DashDetails = ({ measurement, render }) => {
   const medianBitrate = (testKeys.simple.median_bitrate / 1000).toFixed(2)
   const playoutDelay = (testKeys.simple.min_playout_delay).toFixed(2)
 
-  // construct data for graph
-  const clientData = testKeys.receiver_data
-  const data = clientData.map(iteration => ({
-    x: iteration.iteration,
-    y: iteration.rate / 1000,
-  }))
-
   return (
     render({
       statusIcon: <MdFlashOn />,
@@ -134,55 +110,7 @@ const DashDetails = ({ measurement, render }) => {
           </Flex>
         </Box>
       ),
-      details: (
-        <Flex>
-          {/*<Box p={3} width={1}>
-            <Heading h={4}> Video Quality by time </Heading>
-            <Box>
-              <VictoryChart
-                height={200}
-                width={600}
-                containerComponent={
-                  <VictoryVoronoiContainer voronoiDimension="x"
-                    labels={(d) => `${d.y} Mb/s`}
-                    labelComponent={<VictoryTooltip
-                      cornerRadius={0}
-                      flyoutStyle={{fill: 'WHITE'}}
-                    />}
-                  />
-                }
-              >
-                <VictoryAxis
-                  tickValues={data.map((i => i.x + 's'))}
-                  style={{
-                    tickLabels: { fontSize: 10, padding: 5}
-                  }}
-                />
-                <VictoryAxis
-                  dependentAxis
-                  style={{
-                    axisLabel: { fontSize: 10, padding: 0 },
-                    ticks: { stroke: "grey", size: 5 },
-                    tickLabels: { fontSize: 10, padding: 5 }
-                  }}
-                />
-                <VictoryLine
-                  style={{
-                    data: { stroke: theme.colors.base }
-                  }}
-                  data={data}
-                  animate={{
-                    duration: 2000,
-                    onLoad: { duration: 1000 }
-                  }}
-
-
-                />
-              </VictoryChart>
-            </Box>
-          </Box>*/}
-        </Flex>
-      )
+      details: null
     })
   )
 }

diff --git a/components/measurement/nettests/HTTPHeaderFieldManipulation.js b/components/measurement/nettests/HTTPHeaderFieldManipulation.js
@@ -9,7 +9,7 @@ export const HttpHeaderFieldManipulationDetails = ({ measurement, render }) => {
   const testKeys = measurement.test_keys
   let isAnomaly = false
   let isFailed = true
-  const tampering = testKeys.tampering
+  const tampering = testKeys?.tampering || {}
   Object.keys(tampering).forEach((key) => {
     if (tampering[key] === true) {
       isAnomaly = true
@@ -18,7 +18,6 @@ export const HttpHeaderFieldManipulationDetails = ({ measurement, render }) => {
       isFailed = false
     }
   })
-  const headerDiff = testKeys.tampering.header_name_diff
 
   return (
     render({
@@ -29,13 +28,6 @@ export const HttpHeaderFieldManipulationDetails = ({ measurement, render }) => {
       summaryText: isAnomaly
         ? 'Measurement.HTTPHeaderManipulation.MiddleBoxesDetected.SummaryText'
         : 'Measurement.HTTPHeaderManipulation.NoMiddleBoxes.SummaryText',
-      details: (
-        <div>
-          {/*<Text>isAnomaly: {isAnomaly.toString()}</Text>
-          <Text>isFailed: {isFailed.toString()}</Text>
-          <Text>headerDiff: {headerDiff.toString()}</Text>*/}
-        </div>
-      )
     })
   )
 }