Components to show cookie and header results

src/components/Results/Cookies.tsx

@@ -0,0 +1,31 @@
+
+import styled from 'styled-components';
+import colors from 'styles/colors';
+import Card from 'components/Form/Card';
+import Heading from 'components/Form/Heading';
+import Row, { ExpandableRow } from 'components/Form/Row';
+
+const Outer = styled(Card)``;
+
+const CookiesCard = (props: { cookies: any }): JSX.Element => {
+  const cookies = props.cookies;
+  console.log('COOKIES: ', cookies);
+  return (
+    <Outer>
+      <Heading as="h3" size="small" align="left" color={colors.primary}>Cookies</Heading>
+      {/* { subject && <DataRow lbl="Subject" val={subject?.CN} /> } */}
+      {
+        cookies.map((cookie: any, index: number) => {
+          const attributes = Object.keys(cookie.attributes).map((key: string) => {
+            return { lbl: key, val: cookie.attributes[key] }
+          });
+          return (
+            <ExpandableRow key={`cookie-${index}`} lbl={cookie.name} val={cookie.value} rowList={attributes} />
+          )
+        })
+      } 
+    </Outer>
+  );
+}
+
+export default CookiesCard;

src/components/Results/Headers.tsx

@@ -0,0 +1,51 @@
+
+import styled from 'styled-components';
+import colors from 'styles/colors';
+import Card from 'components/Form/Card';
+import Heading from 'components/Form/Heading';
+
+const Outer = styled(Card)`
+  grid-row: span 2;
+`;
+
+const Row = styled.div`
+  display: flex;
+  justify-content: space-between;
+  padding: 0.25rem;
+  &:not(:last-child) { border-bottom: 1px solid ${colors.primary}; }
+  span.lbl { font-weight: bold; }
+  span.val {
+    max-width: 200px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+`;
+
+const DataRow = (props: { lbl: string, val: string }) => {
+  const { lbl, val } = props;
+  return (
+  <Row>
+    <span className="lbl">{lbl}</span>
+    <span className="val" title={val}>{val}</span>
+  </Row>
+  );
+};
+
+const HeadersCard = (props: { headers: any }): JSX.Element => {
+  const headers = props.headers;
+  return (
+    <Outer>
+      <Heading as="h3" size="small" align="left" color={colors.primary}>Headers</Heading>
+      {
+        Object.keys(headers).map((header: string, index: number) => {
+          return (
+            <DataRow key={`header-${index}`} lbl={header} val={headers[header]} />
+          )
+        })
+      }      
+    </Outer>
+  );
+}
+
+export default HeadersCard;

src/components/Results/Lighthouse.tsx

@@ -60,7 +60,6 @@ interface Audit {
 
 const ScoreItem = (props: { scoreId: any, audits: Audit[] }) => {
   const { scoreId, audits } = props;
-  console.log('Audits: ', props.audits)
   const audit = audits[scoreId];
   if (!audit.score) return null;
 
@@ -99,7 +98,6 @@ const ExpandableRow = (props: { lbl: string, val: string, list: string[], audits
 };
 
 const LighthouseCard = (props: { lighthouse: any }): JSX.Element => {
-  console.log('Props:', props.lighthouse);
   const categories = props.lighthouse?.categories || {};
   const audits = props.lighthouse?.audits || [];
 

src/components/Results/Screenshot.tsx

@@ -10,7 +10,6 @@ max-height: 20rem;
 `;
 
 const ScreenshotCard = (props: { screenshot: string }): JSX.Element => {
-  console.log('Props:', props.screenshot);
   return (
     <Outer>
       <Heading as="h3" size="small" align="left" color={colors.primary}>Screenshot</Heading>

src/components/Results/ServerInfo.tsx

@@ -4,43 +4,23 @@ import { ServerInfo } from 'utils/result-processor';
 import colors from 'styles/colors';
 import Card from 'components/Form/Card';
 import Heading from 'components/Form/Heading';
+import Row from 'components/Form/Row';
 
 const Outer = styled(Card)``;
 
-const Row = styled.div`
-  display: flex;
-  justify-content: space-between;
-  padding: 0.25rem;
-  &:not(:last-child) { border-bottom: 1px solid ${colors.primary}; }
-  span.lbl { font-weight: bold; }
-  span.val {
-    max-width: 200px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-`;
-
-const DataRow = (props: { lbl: string, val: string }) => {
-  const { lbl, val } = props;
-  return (
-  <Row>
-    <span className="lbl">{lbl}</span>
-    <span className="val" title={val}>{val}</span>
-  </Row>
-  );
-};
-
 const ServerInfoCard = (info: ServerInfo): JSX.Element => {
-  const { org, asn, isp, os, ports } = info;
+  const { org, asn, isp, os, ports, ip, loc, type } = info;
   return (
     <Outer>
       <Heading as="h3" size="small" align="left" color={colors.primary}>Server Info</Heading>
-      { org && <DataRow lbl="Organization" val={org} /> }
-      { (isp && isp !== org) && <DataRow lbl="Service Provider" val={isp} /> }
-      { os && <DataRow lbl="Operating System" val={os} /> }
-      { asn && <DataRow lbl="ASN Code" val={asn} /> }
-      { ports && <DataRow lbl="Ports" val={ports} /> }
+      { org && <Row lbl="Organization" val={org} /> }
+      { (isp && isp !== org) && <Row lbl="Service Provider" val={isp} /> }
+      { os && <Row lbl="Operating System" val={os} /> }
+      { asn && <Row lbl="ASN Code" val={asn} /> }
+      { ports && <Row lbl="Ports" val={ports} /> }
+      { ip && <Row lbl="IP" val={ip} /> }
+      { type && <Row lbl="Type" val={type} /> }
+      { loc && <Row lbl="Location" val={loc} /> }
     </Outer>
   );
 }