Semi-decent styling of measurement pages

ooni · Sep 25, 2018 · b110197 · b110197
1 parent 0273452
commit b110197
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 6 deletions.
diff --git a/renderer/components/nettests/index.js b/renderer/components/nettests/index.js
@@ -1,5 +1,7 @@
 import React from 'react'
 import {
+  Flex,
+  Box,
   theme,
   Text
 } from 'ooni-components'
@@ -14,20 +16,40 @@ import middlebox from './middleboxes'
 import performance from './performance'
 import websites from './websites'
 
+import {
+  Cross,
+  Tick
+} from 'ooni-components/dist/icons'
+
 const TODODetails = ({testKeys, isAnomaly, url, urlCategoryCode}) => {
-  return <div>
-    <Text>{url} ({urlCategoryCode})</Text>
-    <Text>isAnomaly: {JSON.stringify(isAnomaly)}</Text>
-    <Text>testKeys: {JSON.stringify(testKeys, null, 2)}</Text>
-  </div>
+  return <Flex wrap align='flex-start' p={3}>
+    {url
+    && <Box width={1}>
+      <Text center fontSize={3}>{url} ({urlCategoryCode})</Text>
+    </Box>}
+    {isAnomaly
+    && <Box width={1}>
+      <Text center fontSize={3} color={theme.colors.red5}><Cross />An anomaly is present</Text>
+    </Box>}
+    {isAnomaly === false
+    && <Box width={1}>
+      <Text color={theme.colors.green6} center fontSize={3}><Tick />Everything is OK</Text>
+    </Box>}
+    {Object.keys(testKeys).map(key =>
+      <Box key={key} width={1/2}>
+        <Text bold>{key}</Text><Text>{JSON.stringify(testKeys[key])}</Text>
+      </Box>
+    )}
+    <Box width={1}><Text bold>Attention this is a beta, as such, things are subject to change</Text></Box>
+  </Flex>
 }
 
 const detailsMap = {
   facebook_messenger: FacebookMessengerDetails
 }
 
 export const renderDetails = (measurement) => {
-  let testKeys
+  let testKeys = {}
   const Component = detailsMap[name]
   if (measurement.test_keys) {
     testKeys = JSON.parse(measurement.test_keys)

diff --git a/stories/index.stories.js b/stories/index.stories.js
@@ -5,6 +5,7 @@ import { action } from '@storybook/addon-actions'
 import { linkTo } from '@storybook/addon-links'
 
 import Running from '../renderer/components/home/running'
+import Sections from '../renderer/components/onboard/Sections'
 import Layout from '../renderer/components/Layout'
 
 storiesOf('Components/home/running', module)
@@ -19,3 +20,10 @@ storiesOf('Components/home/running', module)
       />
     </Layout>
   )
+
+storiesOf('Components/onboard/Sections', module)
+  .add('Default', () =>
+    <Layout>
+      <Sections />
+    </Layout>
+  )