Make sure ASN0 measurement are hidden

* Allow only valid ASN values in search filters * Drop search results with AS0 in probe_asn * Do no show measurements with AS0 in report_id * Fix formatting of long text in msmt 404 page See #495
ooni · Oct 7, 2020 · 02a32db · 02a32db
1 parent 99fa5ad
commit 02a32db
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 13 deletions.
diff --git a/components/measurement/MeasurementContainer.js b/components/measurement/MeasurementContainer.js
@@ -15,6 +15,7 @@ import PsiphonDetails from './nettests/Psiphon'
 import TorDetails from './nettests/Tor'
 
 import DefaultTestDetails from './nettests/Default'
+import MeasurementNotFound from './MeasurementNotFound'
 
 const mapTestDetails = {
   web_connectivity: WebConnectivityDetails,
@@ -30,9 +31,6 @@ 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 />

diff --git a/components/measurement/MeasurementNotFound.js b/components/measurement/MeasurementNotFound.js
@@ -0,0 +1,34 @@
+/* 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 styled from 'styled-components'
+
+import OONI404 from '../../static/images/OONI_404.svg'
+
+const WordBreakText = styled(Text)`
+  word-wrap: break-word;
+`
+
+const MeasurementNotFound = () => {
+  const { asPath } = useRouter()
+  return (
+    <React.Fragment>
+      <NavBar />
+      <Container>
+        <Flex flexDirection={['column', 'row']} justifyContent='space-around' alignItems='center' my={5}>
+          <OONI404 height='200px' />
+          <Box width={[1, 1/2]} my={[3, 0]}>
+            <Heading color='blue5' h={4}>Measurement Not Found</Heading>
+            <WordBreakText color='gray8' as='code'>
+              {`${process.env.EXPLORER_URL}${asPath}`}
+            </WordBreakText>
+          </Box>
+        </Flex>
+      </Container>
+    </React.Fragment>
+  )
+}
+
+export default MeasurementNotFound
diff --git a/components/search/FilterSidebar.js b/components/search/FilterSidebar.js
@@ -118,16 +118,21 @@ class FilterSidebar extends React.Component {
       switch(filterName) {
       case 'asnFilter':
         var asnValue = e.target.value
-        var asnRegEx = /^(^AS|as)?[0-9]+$/
-        if (asnValue && asnValue.match(asnRegEx) === null) {
+        // Accepts only formats like AS1234 or 1234
+        // https://regex101.com/r/DnkspD/latest
+        var asnRegEx = /^(AS)?([1-9][0-9]*)$/
+        if (
+          typeof asnValue === 'string' &&
+          (asnValue === '' || asnValue.match(asnRegEx) !== null)
+        ) {
           this.setState({
-            asnError: intl.formatMessage({id: 'Search.Sidebar.ASN.Error'}),
-            isFilterDirty: false
+            asnError: false,
+            isFilterDirty: true
           })
         } else {
           this.setState({
-            asnError: false,
-            isFilterDirty: true
+            asnError: intl.formatMessage({id: 'Search.Sidebar.ASN.Error'}),
+            isFilterDirty: false
           })
         }
         break

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ooni-explorer",
-  "version": "2.0.9",
+  "version": "2.0.10",
   "author": "Open Observatory of Network Interference (OONI) <[email protected]>",
   "license": "BSD-3-Clause",
   "main": "index.js",

diff --git a/pages/measurement.js b/pages/measurement.js
@@ -28,6 +28,11 @@ export default class Measurement extends React.Component {
 
   static async getInitialProps ({ query }) {
     let initialProps = {}
+
+    if (query.report_id.includes('AS0')) {
+      return initialProps
+    }
+
     let client = axios.create({baseURL: process.env.MEASUREMENTS_URL}) // eslint-disable-line
     let params = {
       report_id: query.report_id

diff --git a/pages/search.js b/pages/search.js
@@ -179,10 +179,12 @@ class Search extends React.Component {
     }
 
     const measurements = msmtR.data
+    // drop results with probe_asn === 'AS0'
+    const results = measurements.results.filter(item => item.probe_asn !== 'AS0')
 
     return {
       error: null,
-      results: measurements.results,
+      results,
       nextURL: measurements.metadata.next_url,
       testNamesKeyed,
       testNames,
@@ -240,8 +242,9 @@ class Search extends React.Component {
     axios.get(this.state.nextURL)
       .then((res) => {
         // XXX update the query
+        const nextPageResults = res.data.results.filter(item => item.probe_asn !== 'AS0')
         this.setState({
-          results: this.state.results.concat(res.data.results),
+          results: this.state.results.concat(nextPageResults),
           nextURL: res.data.metadata.next_url,
           show: this.state.show + 50
         })
@@ -268,9 +271,10 @@ class Search extends React.Component {
         // XXX do error handling
         getMeasurements(query)
           .then((res) => {
+            const results = res.data.results.filter(item => item.probe_asn !== 'AS0')
             this.setState({
               loading: false,
-              results: res.data.results,
+              results,
               nextURL: res.data.metadata.next_url
             })
           })