Incident reporting platform (#862)

.env.development

@@ -2,7 +2,7 @@
 # To override locally, make a copy called `.env.development.local`
 # Refer: https://nextjs.org/docs/basic-features/environment-variables
 
-NEXT_PUBLIC_OONI_API=https://api.ooni.io
+NEXT_PUBLIC_OONI_API=https://ams-pg-test.ooni.org
 NEXT_PUBLIC_USER_FEEDBACK_API=https://ams-pg-test.ooni.org
 NEXT_PUBLIC_EXPLORER_URL=http://localhost:3100
 

.eslintrc.json

@@ -1,13 +1,15 @@
 {
+  "root": true,
   "plugins": ["cypress"],
-  "extends": [
-    "next/core-web-vitals",
-    "plugin:cypress/recommended"
-  ],
+  "extends": ["next/core-web-vitals", "plugin:cypress/recommended", "prettier"],
   "rules": {
     "linebreak-style": ["error", "unix"],
     "quotes": ["error", "single"],
     "semi": ["error", "never"]
   },
-  "ignorePatterns": ["components/vendor", "static"]
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "ignorePatterns": ["node_modules", "components/vendor", "static"]
 }

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "singleQuote": true,
+  "semi": false,
+  "printWidth": 100
+}

.vscode/settings.json

@@ -1,4 +1,5 @@
 {
+  "prettier.singleQuote": false,
   "prettier.semi": false,
-  "prettier.singleQuote": true
+  "eslint.validate": ["javascript"]
 }

components/Badge.js

@@ -7,30 +7,28 @@ import { getTestMetadata } from './utils'
 import * as icons from 'ooni-components/icons'
 
 // XXX replace what is inside of search/results-list.StyledResultTag
-const Badge = styled(Box)`
+export const Badge = styled(Box)`
   display: inline-block;
   border-radius: 4px;
   padding: 4px 8px;
   line-height: 16px;
   font-size: 12px;
   text-transform: uppercase;
-  background-color: ${props => props.bg || props.theme.colors.gray8};
-  border: ${props => props.borderColor ? `1px solid ${props.borderColor}` : 'none'}; 
-  color: ${props => props.color || props.theme.colors.white};
+  background-color: ${(props) => props.bg || props.theme.colors.gray8};
+  border: ${(props) => (props.borderColor ? `1px solid ${props.borderColor}` : 'none')};
+  color: ${(props) => props.color || props.theme.colors.white};
   letter-spacing: 1.25px;
   font-weight: 600;
 `
 
 const TestGroupBadge = ({ testName, ...props }) => {
-  const {icon, groupName, color} = getTestMetadata(testName)
+  const { icon, groupName, color } = getTestMetadata(testName)
 
   return (
-    <Badge bg={color} color='white' {...props}>
-      <Flex sx={{gap: 1}} alignItems='center'>
-        <Text>
-          {groupName}
-        </Text>
-        {cloneElement(icon, {size: 12})}
+    <Badge bg={color} color="white" {...props}>
+      <Flex sx={{ gap: 1 }} alignItems="center">
+        <Text>{groupName}</Text>
+        {cloneElement(icon, { size: 12 })}
       </Flex>
     </Badge>
   )
@@ -45,8 +43,8 @@ export const CategoryBadge = ({ categoryCode }) => {
   }
 
   return (
-    <Badge bg='#ffffff' borderColor={theme.colors.gray5} color={theme.colors.gray7}>
-      <Flex sx={{gap: 1}} alignItems='center'>
+    <Badge bg="#ffffff" borderColor={theme.colors.gray5} color={theme.colors.gray7}>
+      <Flex sx={{ gap: 1 }} alignItems="center">
         <Box>
           <FormattedMessage id={`CategoryCode.${categoryCode}.Name`} />
         </Box>

components/ButtonSpinner.js

@@ -0,0 +1,16 @@
+import { ImSpinner8 } from 'react-icons/im'
+import { keyframes, styled } from 'styled-components'
+
+const spin = keyframes`
+to {
+  transform: rotate(360deg);
+}
+`
+
+const StyledSpinner = styled(ImSpinner8)`
+  animation: ${spin} 1s linear infinite;
+`
+
+const ButtonSpinner = () => <StyledSpinner />
+
+export default ButtonSpinner

components/Chart.js

@@ -88,7 +88,6 @@ const Chart = React.memo(function Chart({testGroup = null, queryParams = {}, set
                 data={chartData}
                 rowKeys={rowKeys}
                 rowLabels={rowLabels}
-                isGrouped={false}
               />
               {!!chartData?.size && <MATLink query={queryParams} />}
             </>

components/DomainChart.js

@@ -65,7 +65,6 @@ const Chart = React.memo(function Chart({testGroup = null, queryParams = {}, set
                 data={chartData}
                 rowKeys={rowKeys}
                 rowLabels={rowLabels}
-                isGrouped={false}
               />
               {!!chartData?.size && <MATLink query={linkParams} />}
             </>

components/FormattedMarkdown.js

@@ -6,8 +6,7 @@ import { useIntl } from 'react-intl'
 import Markdown from 'markdown-to-jsx'
 import { Link, theme } from 'ooni-components'
 
-const FormattedMarkdown = ({ id, defaultMessage, values }) => {
-  const intl = useIntl()
+export const FormattedMarkdownBase = ({ children }) => {
   return (
     <Markdown
       options={{
@@ -21,11 +20,21 @@ const FormattedMarkdown = ({ id, defaultMessage, values }) => {
         }
       }}
     >
-      {intl.formatMessage({id, defaultMessage}, values )}
+      {children}
     </Markdown>
   )
 }
 
+const FormattedMarkdown = ({ id, defaultMessage, values }) => {
+  const intl = useIntl()
+
+  return (
+    <FormattedMarkdownBase>
+      {intl.formatMessage({id, defaultMessage}, values )}
+    </FormattedMarkdownBase>
+  )
+}
+
 FormattedMarkdown.propTypes = {
   id: PropTypes.string.isRequired,
   defaultMessage: PropTypes.string,

components/MATChart.js

@@ -0,0 +1,112 @@
+import { Box, Text } from 'ooni-components'
+import { StackedBarChart } from 'components/aggregation/mat/StackedBarChart'
+import { FunnelChart } from 'components/aggregation/mat/FunnelChart'
+import { NoCharts } from 'components/aggregation/mat/NoCharts'
+import TableView from 'components/aggregation/mat/TableView'
+import { useMemo } from 'react'
+import useSWR from 'swr'
+import dayjs from 'services/dayjs'
+import { axiosResponseTime } from 'components/axios-plugins'
+import axios from 'axios'
+import { MATContextProvider } from 'components/aggregation/mat/MATContext'
+import { useIntl } from 'react-intl'
+import { ResizableBox } from './aggregation/mat/Resizable'
+import { FormattedMarkdownBase } from './FormattedMarkdown'
+
+axiosResponseTime(axios)
+
+const swrOptions = {
+  revalidateOnFocus: false,
+  dedupingInterval: 10 * 60 * 1000,
+}
+
+const fetcher = (query) => {
+  const qs = new URLSearchParams(query).toString()
+  const reqUrl = `${process.env.NEXT_PUBLIC_OONI_API}/api/v1/aggregation?${qs}`
+  console.debug(`API Query: ${reqUrl}`)
+  return axios
+    .get(reqUrl)
+    .then((r) => {
+      return {
+        data: r.data,
+        loadTime: r.loadTime,
+        url: r.config.url,
+      }
+    })
+    .catch((e) => {
+      // throw new Error(e?.response?.data?.error ?? e.message)
+      const error = new Error('An error occurred while fetching the data.')
+      // Attach extra info to the error object.
+      error.info = e.response.data.error
+      error.status = e.response.status
+      throw error
+    })
+}
+
+export const MATChartReportWrapper = ({link, caption}) => {
+  let searchParams
+  const today = dayjs.utc().add(1, 'day')
+  const monthAgo = dayjs.utc(today).subtract(1, 'month')
+
+  try {
+    if (link) searchParams = Object.fromEntries(new URL(link).searchParams)
+  } catch (e) {
+    console.log('e', link, e)
+    searchParams = null
+  }
+
+  //TODO: make sure searchParams are only the ones that are allowed
+  const query = {
+    test_name: 'web_connectivity',
+    axis_x: 'measurement_start_day',
+    since: monthAgo.format('YYYY-MM-DD'),
+    until: today.format('YYYY-MM-DD'),
+    time_grain: 'day',
+    ...searchParams,
+  }
+
+  return !!searchParams && 
+    <Box my={4}>
+      <MATChart query={query} />
+      {caption && (
+        <Text fontSize={1} mt={2}>
+          <FormattedMarkdownBase>{caption}</FormattedMarkdownBase>
+        </Text>
+      )}
+    </Box>
+}
+
+const MATChart = ({ query }) => {
+  const intl = useIntl()
+  const { data, error, isValidating } = useSWR(query ? query : null, fetcher, swrOptions)
+
+  const showLoadingIndicator = useMemo(() => isValidating, [isValidating])
+  return (
+    <Box>  
+      <MATContextProvider queryParams={query}>
+        {error && <NoCharts message={error?.info ?? JSON.stringify(error)} />}
+        <Box>
+          {showLoadingIndicator ? (
+            <Box>
+              <h2>{intl.formatMessage({ id: 'General.Loading' })}</h2>
+            </Box>
+          ) : (
+            <>
+              {data?.data?.result?.length > 0 ? 
+                <Box sx={{ minHeight: '500px' }}>
+                  {data && data.data.dimension_count == 0 && <FunnelChart data={data.data.result} />}
+                  {data && data.data.dimension_count == 1 && <StackedBarChart data={data.data.result} query={query} />}
+                  {data && data.data.dimension_count > 1 && (
+                    <TableView data={data.data.result} query={query} />
+                  )}
+                </Box> : <ResizableBox><NoCharts /></ResizableBox>
+              }
+            </>
+          )}
+        </Box>
+      </MATContextProvider>
+    </Box>
+  )
+}
+
+export default MATChart

components/NavBar.js

@@ -106,21 +106,28 @@ export const NavBar = ({ color }) => {
           </Box>
           <Box mt={[2, 0]}>
             <Flex flexDirection={['column', 'row']} alignItems={'center'}>
-              <NavItem label={<FormattedMessage id='Navbar.Search' />} href='/search' />
-              <NavItem label={<FormattedMessage id='Navbar.Charts.MAT' />} href='/chart/mat' />
-              <NavItem label={<FormattedMessage id='Navbar.Charts.Circumvention' />} href='/chart/circumvention' />
-              <NavItem label={<FormattedMessage id='Navbar.Countries' />} href='/countries' />
-              <NavItem label={<FormattedMessage id='Navbar.Networks' />} href='/networks' />
-              <NavItem label={<FormattedMessage id='Navbar.Domains' />} href='/domains' />
-              {user?.logged_in && (
+              <NavItem label={<FormattedMessage id="Navbar.Search" />} href="/search" />
+              <NavItem label={<FormattedMessage id="Navbar.Charts.MAT" />} href="/chart/mat" />
+              <NavItem
+                label={<FormattedMessage id="Navbar.Charts.Circumvention" />}
+                href="/chart/circumvention"
+              />
+              <NavItem label={<FormattedMessage id="Navbar.Countries" />} href="/countries" />
+              <NavItem label={<FormattedMessage id="Navbar.Networks" />} href="/networks" />
+              <NavItem label={<FormattedMessage id="Navbar.Domains" />} href="/domains" />
+              {/* <NavItem label={<FormattedMessage id="Navbar.Incidents" />} href="/incidents" /> */}
+              {user?.logged_in ? (
                 <Box ml={[0, 4]} my={[2, 0]}>
                   <StyledNavItem>
                     <NavItemLabel onClick={logoutUser}>
-                      <FormattedMessage id='General.Logout' />
+                      <FormattedMessage id="General.Logout" />
                     </NavItemLabel>
                     <Underline />
                   </StyledNavItem>
                 </Box>
+              ) : (
+                <></>
+                // <NavItem label={<FormattedMessage id="General.Login" />} href="/login" />
               )}
               <Box ml={[0, 4]} my={[2, 0]}>
                 <LanguageSelect ml={[0, 4]} onChange={handleLocaleChange} value={locale}>

components/NotFound.js

@@ -0,0 +1,26 @@
+/* global process */
+import React from 'react'
+import { Container, Flex, Box, Heading, Text } from 'ooni-components'
+import { useRouter } from 'next/router'
+
+import OONI404 from '../public/static/images/OONI_404.svg'
+import { useIntl } from 'react-intl'
+
+const NotFound = ({ title }) => {
+  const { asPath } = useRouter()
+  const intl = useIntl()
+
+  return (
+    <Container>
+      <Flex justifyContent="space-around" alignItems="center" my={5}>
+        <OONI404 height="200px" />
+        <Box width={1 / 2}>
+          <Heading h={4}>{title}</Heading>
+          <Text color="gray8">{`${process.env.NEXT_PUBLIC_EXPLORER_URL}${asPath}`}</Text>
+        </Box>
+      </Flex>
+    </Container>
+  )
+}
+
+export default NotFound

components/SharedStyledComponents.js

@@ -17,7 +17,7 @@ z-index: 100;
 
 export const StyledStickySubMenu = styled.div`
 position: sticky;
-top: 65.5px;
+top: 66px;
 background: white;
 z-index: 100;
 border-bottom: 1px solid ${props => props.theme.colors.gray3};

components/aggregation/mat/ChartHeader.js

@@ -85,7 +85,7 @@ export const ChartHeader = ({ options = {}}) => {
         </Heading>}
       </Box>
       <Box>
-        <Flex mb={2} justifyContent='space-between'>
+        <Flex mb={2} justifyContent='space-between' fontSize={14}>
           {options.legend !== false && <Flex justifyContent='center' my={2} flexWrap="wrap">
             <Legend label={intl.formatMessage({id: 'MAT.Table.Header.ok_count'})} color={colorMap['ok_count']} />
             <Legend label={intl.formatMessage({id: 'MAT.Table.Header.confirmed_count'})} color={colorMap['confirmed_count']} />

components/aggregation/mat/GridChart.js

@@ -78,9 +78,6 @@ export const prepareDataForGridChart = (data, query, locale) => {
  * 
  * selectedRows - a subset of `rowKeys` representing which rows to render in the grid
  * 
- * isGrouped - Whether the data is already grouped by y-axis value
- * If `false`, `reshapeChartData()` will group the data as required
- *
  * height - uses a specific height provided by the container (e.g ResizableBox)
  * If not speicied, it calculates a height based on the number of rows, capped
  * at GRID_MAX_HEIGHT, which allows <VirtualRows> to render a subset of the data
@@ -89,7 +86,7 @@ export const prepareDataForGridChart = (data, query, locale) => {
  * header - an element showing some summary information on top of the charts
 }
 */
-const GridChart = ({ data, rowKeys, rowLabels, isGrouped = true, height = 'auto', header, selectedRows = null, noLabels = false }) => {
+const GridChart = ({ data, rowKeys, rowLabels, height = 'auto', header, selectedRows = null, noLabels = false }) => {
 
   // Fetch query state from context instead of router
   // because some params not present in the URL are injected in the context
@@ -178,7 +175,6 @@ GridChart.propTypes = {
   rowKeys: PropTypes.arrayOf(PropTypes.string),
   rowLabels: PropTypes.objectOf(PropTypes.string),
   selectedRows: PropTypes.arrayOf(PropTypes.string),
-  isGrouped: PropTypes.bool,
   height: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.number