Merge branch '#3' into 'main'

/analysis route prototype

See merge request !1

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

+import { AnalysisMetadata, SampleMetadata } from "@/components/analysis/metadata";
+import ActivityTimeline from "@/components/analysis/activity-timeline";
+import RedirectButton from "@/components/redirect-button";
+import "@/styles/analysis/page.css";
+
+export default function Analysis({ params: { id } }) {
+  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>
+  );
+}

src/components/analysis/activity-timeline.js

+import "@/styles/analysis/activity-timeline.css";
+
+export default function ActivityTimeline() {
+  return (
+    <div className="activity-timeline">
+      <div className="at-title">ACTIVITY TIMELINE</div>
+    </div>
+  );
+}

src/components/analysis/metadata.js

+import "@/styles/analysis/metadata.css"
+
+export function AnalysisMetadata(props) {
+  return (
+    <table>
+      <thead>
+        <tr>
+          <th className="table-title" colSpan="2">ANALYSIS</th>
+        </tr>
+      </thead>
+
+      <tbody>
+        <tr>
+          <th>Status</th>
+          <td>{props.status}</td>
+        </tr>
+        <tr>
+          <th>ID</th>
+          <td>{props.id}</td>
+        </tr>
+        <tr>
+          <th>Driver version</th>
+          <td>{props.driver}</td>
+        </tr>
+        <tr>
+          <th>Template ID</th>
+          <td>{props.template}</td>
+        </tr>
+        <tr>
+          <th>Start time</th>
+          <td>{props.start}</td>
+        </tr>
+        <tr>
+          <th>End time</th>
+          <td>{props.end}</td>
+        </tr>
+      </tbody>
+    </table>
+  );
+}
+
+export function SampleMetadata(props) {
+  return (
+    <table>
+      <thead>
+        <tr>
+          <th className="table-title" colSpan="2">SAMPLE</th>
+        </tr>
+      </thead>
+
+      <tbody>
+        <tr>
+          <th>Filename</th>
+          <td>{props.filename}</td>
+        </tr>
+        <tr>
+          <th>Extension</th>
+          <td>{props.extension}</td>
+        </tr>
+        <tr>
+          <th>MIME type</th>
+          <td>{props.mimetype}</td>
+        </tr>
+        <tr>
+          <th>Size</th>
+          <td>{props.size}</td>
+        </tr>
+        <tr>
+          <th>Last modified</th>
+          <td>{props.lastmod}</td>
+        </tr>
+        <tr>
+          <th>MD5 sum</th>
+          <td>{props.md5}</td>
+        </tr>
+        <tr>
+          <th>SHA1 sum</th>
+          <td>{props.sha1}</td>
+        </tr>
+        <tr>
+          <th>SHA256 sum</th>
+          <td>{props.sha256}</td>
+        </tr>
+      </tbody>
+    </table>
+  );
+}

src/components/redirect-button.js

+'use client'
+import "@/styles/redirect-button.css"
+
+export default function RedirectButton({ name, href }) {
+    const redirect = () => window.location.href = href;
+
+    return <button className="redirect-button" onClick={redirect}>{name}</button>;
+}

src/styles/analysis/activity-timeline.css

+.activity-timeline {
+  margin: 1em;
+  height: 100%;
+  min-width: 398.266px;
+  max-width: 75%;
+  font-family: monospace;
+  font-size: 1em;
+  flex: 1;
+  overflow: auto;
+  padding: 0.5em;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  border: 1px solid #1F1C1A;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.8);
+}
+
+.at-title {
+  padding: 8px;
+  font-family: Bitstream Vera Sans, Tahoma, sans-serif;
+  font-weight: bold;
+  text-align: center;
+  border-bottom: 1px solid #1F1C1A;
+}

src/styles/analysis/metadata.css

+table {
+  min-height: 348.484px;
+  min-width: 398.266px;
+  border-collapse: collapse;
+  text-align: left;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.8);
+  margin: 1em;
+}
+
+td, th {
+  border: 1px solid #1F1C1A;
+  padding: 8px;
+}
+
+.table-title {
+  text-align: center;
+}
+
+tr:nth-child(even) {
+  background-color: #221f1d;
+}

src/styles/analysis/page.css

+.pagerow {
+  display: flex;
+  justify-content: space-around;
+  width: 100%;
+  min-width: max-content;
+  margin-bottom: 1em;
+}

src/styles/redirect-button.css

+.redirect-button {
+  background-color: #434240;
+  border: 1px solid transparent;
+  border-radius: 3px;
+  box-shadow: rgba(255, 255, 255, .4) 0 1px 0 0 inset;
+  box-sizing: border-box;
+  display: inline-block;
+  font-size: 13px;
+  line-height: 1.15385;
+  margin: 0;
+  outline: none;
+  padding: 8px .8em;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
+  vertical-align: baseline;
+  white-space: nowrap;
+}
+
+.redirect-button:hover,
+.redirect-button:focus {
+  background-color: #07c;
+}
+
+.redirect-button:active {
+  background-color: #0064bd;
+  box-shadow: none;
+}