UI code for malware checking

src/components/Results/Malware.tsx

@@ -0,0 +1,70 @@
+
+import styled from 'styled-components';
+import colors from 'styles/colors';
+import { Card } from 'components/Form/Card';
+import Row, { ExpandableRow } from 'components/Form/Row';
+
+const Expandable = styled.details`
+margin-top: 0.5rem;
+cursor: pointer;
+summary::marker {
+  color: ${colors.primary};
+}
+`;
+
+const getExpandableTitle = (urlObj: any) => {
+  let pathName = '';
+  try {
+    pathName = new URL(urlObj.url).pathname;
+  } catch(e) {}
+  return `${pathName} (${urlObj.id})`;
+}
+
+const convertToDate = (dateString: string): string => {
+  const [date, time] = dateString.split(' ');
+  const [year, month, day] = date.split('-').map(Number);
+  const [hour, minute, second] = time.split(':').map(Number);
+  const dateObject = new Date(year, month - 1, day, hour, minute, second);
+  if (isNaN(dateObject.getTime())) {
+    return dateString;
+  }
+  return dateObject.toString();
+}
+
+const MalwareCard = (props: {data: any, title: string, actionButtons: any }): JSX.Element => {
+  const urlHaus = props.data.urlHaus;
+  return (
+    <Card heading={props.title} actionButtons={props.actionButtons}>
+      { urlHaus.query_status === 'no_results' && <Row lbl="Status" val="✅ Nothing Found!" />}
+      { urlHaus.query_status === 'ok' && (
+        <>
+        <Row lbl="Status" val="❌ Malware Found" />
+        <Row lbl="First Seen" val={convertToDate(urlHaus.firstseen)} />
+        <Row lbl="Bad URLs Count" val={urlHaus.url_count} />
+        </>
+      )}
+      {urlHaus.urls && (
+        <Expandable>
+          <summary>Expand Results</summary>
+          { urlHaus.urls.map((urlResult: any, index: number) => {
+          const rows = [
+            { lbl: 'ID', val: urlResult.id },
+            { lbl: 'Status', val: urlResult.url_status },
+            { lbl: 'Date Added', val: convertToDate(urlResult.date_added) },
+            { lbl: 'Threat Type', val: urlResult.threat },
+            { lbl: 'Reported By', val: urlResult.reporter },
+            { lbl: 'Takedown Time', val: urlResult.takedown_time_seconds },
+            { lbl: 'Larted', val: urlResult.larted },
+            { lbl: 'Tags', val: (urlResult.tags || []).join(', ') },
+            { lbl: 'Reference', val: urlResult.urlhaus_reference },      
+            { lbl: 'File Path', val: urlResult.url },      
+          ];
+          return (<ExpandableRow lbl={getExpandableTitle(urlResult)} val="" rowList={rows} />)
+        })}
+        </Expandable>
+      )}
+    </Card>
+  );
+}
+
+export default MalwareCard;