DNS Answers: Add ancillary information (#828)

* Rename FiveColRow to DNSAnswerRow

We may want to add some columns in the future.

* DNSAnswerRow -> DnsAnswerRow

For consistency with the pre-existing DnsAnswerCell.

* DnsAnswerRow: Add ancillary information

If the measurement JSON for a DNS answer contains "asn" and/or
"as_org_name" fields, we use that to populate the new "Ancillary info"
column in human-readable form.

* DnsAnswerRow: Improve readability by varying column widths

The TTL/class/type values are always short, so make the corresponding
fields narrower to leave more space for the other fields, which can be
longer.

* Renamed "ancillary information" to "Answer IP Info"

Also improve output in the (impossible?) case where "asn" is not set,
but "as_org_name" is.

* DnsAnswerIpInfo: New utility function

Factored out from QueryContainer.

* Rename DnsAnswerIpInfo to dnsAnswerIpInfo

Normal functions seem to use camelCase by convention.

* Simplify dnsAnswerIpInfo()

Use auxiliary variables to avoid nested conditionals.

components/measurement/nettests/WebConnectivity.js

@@ -167,32 +167,45 @@ FailureString.propTypes = {
   failure: PropTypes.string
 }
 
+const DnsNarrowAnswerCell = (props) => (
+  <Box width={1/12}>{props.children}</Box>
+)
+
 const DnsAnswerCell = (props) => (
-  <Box width={1/8}>{props.children}</Box>
+  <Box width={1/4}>{props.children}</Box>
 )
 
 DnsAnswerCell.propTypes = {
   children: PropTypes.any
 }
 
-const FiveColRow = ({ name = 'Name', netClass = 'Class', ttl = 'TTL', type = 'Type', data = 'DATA', header = false}) => (
+const dnsAnswerIpInfo = (dnsAnswer) => {
+    const asn = dnsAnswer.asn ? `AS${dnsAnswer.asn}` : 'Unknown AS'
+    const asOrgName = dnsAnswer.as_org_name ? `(${dnsAnswer.as_org_name})` : ''
+
+    return `${asn} ${asOrgName}`.trim()
+}
+
+const DnsAnswerRow = ({ name = 'Name', netClass = 'Class', ttl = 'TTL', type = 'Type', data = 'DATA', answer_ip_info = 'Answer IP Info', header = false}) => (
   <Text fontWeight={header ? 'bold' : undefined}>
     <Flex flexWrap='wrap' mb={2}>
       <DnsAnswerCell>{name}</DnsAnswerCell>
-      <DnsAnswerCell>{netClass}</DnsAnswerCell>
-      <DnsAnswerCell>{ttl}</DnsAnswerCell>
-      <DnsAnswerCell>{type}</DnsAnswerCell>
+      <DnsNarrowAnswerCell>{netClass}</DnsNarrowAnswerCell>
+      <DnsNarrowAnswerCell>{ttl}</DnsNarrowAnswerCell>
+      <DnsNarrowAnswerCell>{type}</DnsNarrowAnswerCell>
       <DnsAnswerCell>{data}</DnsAnswerCell>
+      <DnsAnswerCell>{answer_ip_info}</DnsAnswerCell>
     </Flex>
   </Text>
 )
 
-FiveColRow.propTypes = {
+DnsAnswerRow.propTypes = {
   name: PropTypes.string,
   netClass: PropTypes.string,
   ttl: PropTypes.number,
   type: PropTypes.string,
   data: PropTypes.string,
+  answer_ip_info: PropTypes.string,
   header: PropTypes.bool
 }
 
@@ -228,9 +241,9 @@ const QueryContainer = ({query}) => {
       {failure && <Box width={1}><FailureString failure={failure} /></Box>}
       {!failure &&
         <Box width={1}>
-          <FiveColRow header />
+          <DnsAnswerRow header />
           {Array.isArray(answers) && answers.map((dnsAnswer, index) => (
-            <FiveColRow
+            <DnsAnswerRow
               key={index}
               name='@'
               netClass='IN'
@@ -244,6 +257,7 @@ const QueryContainer = ({query}) => {
                     ? dnsAnswer.hostname
                     : null // for any other answer_type, DATA column will be empty
               }
+              answer_ip_info={dnsAnswerIpInfo(dnsAnswer)}
             />
           ))}
         </Box>