From ed5acf635553220e609a1a30238b08ae3de04de0 Mon Sep 17 00:00:00 2001
From: pedro f <phfr24@inf.ufpr.br>
Date: Thu, 10 Oct 2024 13:55:01 +0000
Subject: [PATCH] /analysis route prototype
---
src/app/analysis/[id]/page.js | 35 ++++++++
src/components/.gitkeep | 0
src/components/analysis/activity-timeline.js | 9 ++
src/components/analysis/metadata.js | 87 ++++++++++++++++++++
src/components/redirect-button.js | 8 ++
src/styles/analysis/activity-timeline.css | 23 ++++++
src/styles/analysis/metadata.css | 21 +++++
src/styles/analysis/page.css | 7 ++
src/styles/redirect-button.css | 31 +++++++
9 files changed, 221 insertions(+)
create mode 100644 src/app/analysis/[id]/page.js
delete mode 100644 src/components/.gitkeep
create mode 100644 src/components/analysis/activity-timeline.js
create mode 100644 src/components/analysis/metadata.js
create mode 100644 src/components/redirect-button.js
create mode 100644 src/styles/analysis/activity-timeline.css
create mode 100644 src/styles/analysis/metadata.css
create mode 100644 src/styles/analysis/page.css
create mode 100644 src/styles/redirect-button.css
diff --git a/src/app/analysis/[id]/page.js b/src/app/analysis/[id]/page.js
new file mode 100644
index 0000000..7058e3f
--- /dev/null
+++ b/src/app/analysis/[id]/page.js
@@ -0,0 +1,35 @@
+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>
+ );
+}
diff --git a/src/components/.gitkeep b/src/components/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/components/analysis/activity-timeline.js b/src/components/analysis/activity-timeline.js
new file mode 100644
index 0000000..121ab05
--- /dev/null
+++ b/src/components/analysis/activity-timeline.js
@@ -0,0 +1,9 @@
+import "@/styles/analysis/activity-timeline.css";
+
+export default function ActivityTimeline() {
+ return (
+ <div className="activity-timeline">
+ <div className="at-title">ACTIVITY TIMELINE</div>
+ </div>
+ );
+}
diff --git a/src/components/analysis/metadata.js b/src/components/analysis/metadata.js
new file mode 100644
index 0000000..4aacd34
--- /dev/null
+++ b/src/components/analysis/metadata.js
@@ -0,0 +1,87 @@
+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>
+ );
+}
diff --git a/src/components/redirect-button.js b/src/components/redirect-button.js
new file mode 100644
index 0000000..8e7f327
--- /dev/null
+++ b/src/components/redirect-button.js
@@ -0,0 +1,8 @@
+'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>;
+}
diff --git a/src/styles/analysis/activity-timeline.css b/src/styles/analysis/activity-timeline.css
new file mode 100644
index 0000000..6d481f7
--- /dev/null
+++ b/src/styles/analysis/activity-timeline.css
@@ -0,0 +1,23 @@
+.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;
+}
diff --git a/src/styles/analysis/metadata.css b/src/styles/analysis/metadata.css
new file mode 100644
index 0000000..8057d42
--- /dev/null
+++ b/src/styles/analysis/metadata.css
@@ -0,0 +1,21 @@
+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;
+}
diff --git a/src/styles/analysis/page.css b/src/styles/analysis/page.css
new file mode 100644
index 0000000..01ade26
--- /dev/null
+++ b/src/styles/analysis/page.css
@@ -0,0 +1,7 @@
+.pagerow {
+ display: flex;
+ justify-content: space-around;
+ width: 100%;
+ min-width: max-content;
+ margin-bottom: 1em;
+}
diff --git a/src/styles/redirect-button.css b/src/styles/redirect-button.css
new file mode 100644
index 0000000..163a521
--- /dev/null
+++ b/src/styles/redirect-button.css
@@ -0,0 +1,31 @@
+.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;
+}
--
GitLab