/analysis route integration

#4

src/app/analysis/[id]/page.js

+'use client'
 import { AnalysisMetadata, SampleMetadata } from "@/components/analysis/metadata";
-import ActivityTimeline from "@/components/analysis/activity-timeline";
 import RedirectButton from "@/components/redirect-button";
+import { useState, useEffect } from 'react';
+import { notFound } from "next/navigation";
+import "@/styles/analysis/activity-timeline.css";
 import "@/styles/analysis/page.css";
 
 export default function Analysis({ params: { id } }) {
+  const [report, setReport] = useState(null);
+  const [failed, setFailed] = useState(false);
+
+  validateId(id, setFailed);
+
+  useEffect(() => {
+    if (failed) {
+      notFound();
+    }
+  }, [failed]);
+
+  useEffect(() => {
+    const ws = new WebSocket(`ws://${process.env.NEXT_PUBLIC_API_HOST}/status/${id}`);
+
+    ws.onmessage = (event) => {
+      setReport(JSON.parse(event.data));
+    }
+
+    return () => {
+      ws.close();
+    }
+  }, [id, setReport]);
+
   return (
-    <div>
-      <div className="pagerow">
-        <AnalysisMetadata
-          status="running"
-          id="5e6c83bf-44b3-4f9e-bd45-683585439eed"
-          driver="1.3.8"
-          template="9011"
-          start="08/10/24 11:00:10 -03"
-          end="08/10/24 11:07:39 -03"
-        />
-        <SampleMetadata
-          filename="MALWARE2.exe"
-          extension=".exe"
-          mimetype="application/octet-stream"
-          size="2.7 MiB"
-          lastmod="08/10/24 11:00:10 -03"
-          md5="6cb20b4c787c4ea918e301310b2667f5"
-          sha1="5b5d921d69336d06837422438cd0c5225fc78a74"
-          sha256="83121822f08691834102f7652c673133deb98a134110a0fea22a27b2ccd5d966"
-        />
-      </div>
-      <div className="pagerow">
-        <ActivityTimeline />
-      </div>
-      <RedirectButton name="go back" href="/" />
-    </div>
+    <main>
+      {report && (
+        <div>
+          <div className="pagerow">
+            <AnalysisMetadata
+              status={report.status}
+              id={report.id}
+              driver={report.driverVersion}
+              template={report.templateID}
+              start={report.startTime}
+              end={report.endTime}
+            />
+            <SampleMetadata
+              filename={report.fileMetadata.filename}
+              extension={report.fileMetadata.extension}
+              mimetype={report.fileMetadata.mimetype}
+              size={formatFileSize(report.fileMetadata.size)}
+              lastmod={report.fileMetadata.lastModified}
+              md5={report.fileMetadata.md5sum}
+              sha1={report.fileMetadata.sha1sum}
+              sha256={report.fileMetadata.sha256sum}
+            />
+          </div>
+          <div className="pagerow">
+            <div className="activity-timeline">
+              <div className="at-title">ACTIVITY TIMELINE</div>
+              {report.log.map((msg, i) => <div key={i}>{msg}</div>)}
+              {report.error && <div className="at-error">{report.error}</div>}
+            </div>
+          </div>
+          <RedirectButton name="go back" href="/" />
+        </div>
+      )}
+    </main>
   );
 }
+
+function validateId(id, setFailed) {
+  fetch(`http://${process.env.NEXT_PUBLIC_API_HOST}/analysis/${id}`, { cache: 'no-store' })
+    .then((res) => {
+      if (!res.ok) {
+        throw new Error(`Failed to validate id: got ${res.status} response from api`);
+      }
+      setFailed(false);
+    })
+    .catch((err) => {
+      //console.error('fetch()', err);
+      setFailed(true);
+    });
+}
+
+function formatFileSize(bytes) {
+  const sizes = ['B', 'KB', 'MB', 'GB'];
+
+  if (bytes === 0)
+    return '0B';
+
+  const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
+  return `${(bytes / Math.pow(1024, i)).toFixed(2)} ${sizes[i]}`;
+}
\ No newline at end of file