Build mockup for workspace view

myOmikron · Sep 7, 2023 · ecb0375 · ecb0375
1 parent fdcb427
commit ecb0375
Show file tree

Hide file tree

Showing 7 changed files with 164 additions and 8 deletions.
diff --git a/kraken_frontend/src/styling/components.css b/kraken_frontend/src/styling/components.css
@@ -1,4 +1,3 @@
-
 .input {
     background-color: var(--level-0);
     color: var(--text);
@@ -49,4 +48,25 @@
 }
 .editable-list > div:first-child {
     grid-column: 1 / 3;
+}
+
+.bubble-list {
+    display: flex;
+    gap: 0.5em;
+}
+
+.bubble {
+    padding: 0.25em 1em;
+    border-radius: 0.75em;
+    border: 1px solid var(--primary-op);
+    transition: all ease 200ms;
+    cursor: pointer;
+}
+
+.bubble:hover {
+    box-shadow: inset 0 -3px 2em -3px var(--primary-op), 0 0 10em #0cf3, 0 0 .5em #0ff2;
+}
+
+.red {
+    background-color: var(--toast-error);
 }
diff --git a/kraken_frontend/src/styling/menu.css b/kraken_frontend/src/styling/menu.css
@@ -9,6 +9,10 @@
     animation: yourAnimation 0.9s step-End 0.4s 1 normal backwards;
 }
 
+.menu-header {
+    margin-bottom: 1em;
+}
+
 .menu-item {
     position: relative;
     cursor: pointer;

diff --git a/kraken_frontend/src/styling/workspace.css b/kraken_frontend/src/styling/workspace.css
@@ -1,18 +1,26 @@
 .workspace-outer-container {
-    display: flex;
-    flex-direction: column;
+    display: grid;
+    grid-template-columns: 2fr 1fr 7em;
+    grid-template-rows: max-content max-content 1fr;
     gap: 1em;
     animation: yourAnimation 0.3s step-End 0.4s 1 normal backwards;
+    height: calc(100% - 6em);
+}
+
+.workspace-heading {
+    grid-area: 1 / 1 / 1 / span 3;
+    height: fit-content;
 }
 
 .workspace-heading > h2 {
     margin: 0;
 }
 
 .workspace-section-selector {
+    grid-area: 2 / 1 / span 1 / span 2;
     display: grid;
     width: 100%;
-    grid-template-columns: 1fr 1fr 1fr 1fr;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
     gap: 1em;
 }
 
@@ -33,3 +41,30 @@
 .workspace-selected-tab {
     filter: drop-shadow(0 0 0 var(--primary));
 }
+
+.workspace-menu {
+    grid-area: 2 / 3 / span 2 / span 1;
+    display: flex;
+    padding: 1.5em;
+    gap: 1.5em;
+    flex-direction: column;
+}
+
+.workspace-content-details {
+    display: flex;
+    flex-direction: column;
+    justify-items: center;
+}
+
+.workspace-content-details > h2 {
+    margin: 0;
+    text-align: center;
+}
+
+.workspace-content-table {
+    border-collapse: collapse;
+}
+
+.workspace-content-row {
+    text-align: left;
+}
diff --git a/kraken_frontend/src/svg/data.tsx b/kraken_frontend/src/svg/data.tsx
@@ -0,0 +1,17 @@
+export default function DataIcon() {
+    return (
+        <svg
+            className={"neon"}
+            fill="#000000"
+            width="800px"
+            height="800px"
+            viewBox="0 0 33.866668 33.866668"
+            version="1.1"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <g>
+                <path d="m11.833 6.2851c-1.0966 0.028914-1.4552 0.89607-1.4552 0.89607s-0.99014 1.7258-1.357 2.3663c1.1206-0.37953 1.9862-0.25554 2.774 0.25166l1.4898-2.5714c0.25748-0.47549-0.29426-0.86674-1.2221-0.93689-0.07978-0.00603-0.15634-0.00761-0.22944-0.00568zm4.1594 0.22944c-1.2282 0.035091-1.5265 0.63149-1.5265 0.63149s-8.8733 15.19-9.0966 15.574c-0.22332 0.3846-0.058445 0.53328 0.099735 0.60772 0.15818 0.07444 0.33486-0.08372 0.33486-0.08372-2e-7 0 0.1177-0.27226 0.39843-0.58808 0.28073-0.31582 1.0175-0.26303 1.0175-0.26303s9.5463 0.49057 12.18 0.46767c0.16802-0.0015 0.3225-0.0138 0.47129-0.02997-0.07925 0.45232-0.10042 1.1477-0.03721 1.7989 0.04634 0.47739 0.31507 0.90922 0.5178 1.2552-1.9391-0.08493-10.721-0.46755-11.703-0.43408-0.86331-0.01329-1.5916-0.2434-1.5916-0.2434s-0.43488-0.15173-1.1669-0.75964c-0.09925 0.1985-0.20156 0.66367-0.79427 0.89297-0.58274 0.22544-1.1169-0.2191-1.6376-0.99219-0.45265-0.72736-0.44665-1.6871 0.049609-2.0841 0.49626-0.397 1.0919-0.04961 1.0919-0.04961l2.3937-4.131c-0.18551-0.25138-0.55231-0.46415-1.0374-0.56847-0.78261-0.10286-1.1883 0.08406-1.7516 0.42377-1.2875 2.2378-2.3124 4.0107-2.4458 4.2132-0.35979 0.54588-0.16318 1.9404 0.43408 2.7916 0.81206 1.1573 1.4642 1.4639 2.3823 1.6872 0.9677 0.16128 1.3544-0.79582 1.3544-0.79582s0.25823 0.2252 0.71727 0.54777c0.52107 0.40942 1.0795 0.49609 1.0795 0.49609s12.555 0.5958 14.044 0.69505c1.4888 0.09925 1.7865-0.74466 1.7865-0.74466s7.7414-11.612 8.4858-12.704-0.44648-1.3395-0.44648-1.3395l-1.0738 0.02894-0.37827 0.01705c-0.70372-0.82251-0.66132-1.964-0.6289-2.7797 0.2654-0.40919 0.9013-1.3962 1.0397-1.6077 1.2633-1.93-0.31626-1.8247-0.31626-1.8247zm-6.5103 4.1771c-0.60046 0.0058-1.2944 0.30893-1.2944 0.30893-0.95052 1.6586-2.1186 3.6934-3.205 5.5842 0.46606-0.18183 0.98696-0.31639 1.4299-0.24495 0.61107 0.09856 1.0488 0.30769 1.2966 0.50953l3.3709-5.8172c-0.22253-0.1377-0.90736-0.35522-1.598-0.34045zm6.1946 0.34975 6.6322 0.17518s-2.9095 5.9419-6.0007 6.0709c-2.3164 0.09671-1.614-4.2109-0.63149-6.2461zm13.203-0.20528c0.07899 1.2303 0.13693 1.694 0.86195 2.5621l-8.1689 12.538s-0.4039-0.02202-0.45544-0.02429c-0.24183-0.36529-0.48702-0.82299-0.5948-1.3157-0.13208-0.60381-0.08652-1.3159-0.01705-1.851 1.2361-0.29907 1.5091-1.078 1.5091-1.078s4.4007-7.0238 6.8651-10.832z" />
+            </g>
+        </svg>
+    );
+}
diff --git a/kraken_frontend/src/svg/settings.tsx b/kraken_frontend/src/svg/settings.tsx
@@ -0,0 +1,24 @@
+export default function SettingsIcon() {
+    return (
+        <svg
+            className={"neon"}
+            fill="#000000"
+            width="800px"
+            height="800px"
+            viewBox="0 0 128 128"
+            enableBackground="new 0 0 128 128"
+            version="1.1"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path d="m39.618 29.759l-2.832-9.175c-0.833-2.32-0.525-2.973 1.795-3.805l15.052-5.402c2.32-0.833 2.973-0.525 3.805 1.795l3.617 8.884" />
+            <path d="m22.515 61.246l-8.939-3.506c-2.333-0.795-2.651-1.443-1.856-3.776l5.161-15.136c0.795-2.333 1.443-2.651 3.776-1.856l9.201 2.711" />
+            <path d="m36.47 94.249l-8.314 4.803c-2.076 1.328-2.781 1.173-4.109-0.903l-8.617-13.473c-1.328-2.076-1.173-2.781 0.903-4.109l7.856-5.503" />
+            <path d="m70.974 103.92l-1.429 9.495c-0.256 2.451-0.817 2.906-3.268 2.65l-15.905-1.663c-2.451-0.256-2.906-0.817-2.65-3.268l0.595-9.573" />
+            <path d="m100.04 82.964l6.533 7.037c1.757 1.729 1.763 2.451 0.034 4.207l-11.216 11.399c-1.729 1.757-2.451 1.763-4.207 0.034l-7.114-6.434" />
+            <path d="m101.79 47.174l9.575-0.72c2.447-0.296 3.015 0.15 3.311 2.597l1.919 15.876c0.296 2.447-0.15 3.015-2.597 3.311l-9.466 1.55" />
+            <path d="m74.892 23.497l5.406-7.935c1.294-2.098 1.997-2.264 4.094-0.97l13.609 8.398c2.098 1.294 2.264 1.997 0.97 4.094l-4.689 8.367" />
+            <path d="m77.997 58.346c2.775 7.733-1.244 16.251-8.977 19.027s-16.251-1.244-19.027-8.977c-2.775-7.733 1.244-16.251 8.977-19.027 7.733-2.775 16.251 1.244 19.027 8.977zm15.927-5.716c-5.967-16.626-24.281-25.267-40.907-19.3s-25.267 24.281-19.3 40.907 24.281 25.267 40.907 19.3 25.266-24.281 19.3-40.907z" />
+            <path d="m96.549 51.688c6.487 18.076-2.908 37.988-20.983 44.475-18.076 6.487-37.988-2.908-44.475-20.983s2.908-37.988 20.983-44.475 37.988 2.907 44.475 20.983zm-46.736-27.284c-21.459 7.701-32.612 31.34-24.911 52.799s31.34 32.612 52.799 24.911 32.612-31.34 24.911-52.799-31.34-32.612-52.799-24.911z" />
+        </svg>
+    );
+}
diff --git a/kraken_frontend/src/views/menu.tsx b/kraken_frontend/src/views/menu.tsx
@@ -28,6 +28,10 @@ export default class Menu extends React.Component<MenuProps, MenuState> {
         return (
             <>
                 <div className="menu pane">
+                    <div className={"menu-header"}>
+                        <KrakenIcon />
+                    </div>
+                    <div className={"menu-seperator"}>Workspaces</div>
                     <div className={"menu-item-container"}>
                         <div
                             className={this.state.active === "workspaces" ? "menu-item active" : "menu-item"}
@@ -59,7 +63,8 @@ export default class Menu extends React.Component<MenuProps, MenuState> {
                             <AttackIcon />
                             <div className={"menu-hint"}>Attacks</div>
                         </div>
-                    </div>
+                    </div>{" "}
+                    <div className={"menu-seperator"}>General</div>
                     <div className={"menu-item-container"}>
                         <div
                             className={this.state.active === "knowledge" ? "menu-item active" : "menu-item"}
@@ -148,7 +153,6 @@ export default class Menu extends React.Component<MenuProps, MenuState> {
                         </>
                     ) : null}
                 </div>
-
                 <div className={"workspace-selector-container pane"}>
                     <WorkspaceIcon />
                 </div>

diff --git a/kraken_frontend/src/views/workspace.tsx b/kraken_frontend/src/views/workspace.tsx
@@ -3,13 +3,18 @@ import "../styling/workspace.css";
 import { FullWorkspace } from "../api/generated";
 import { Api, UUID } from "../api/api";
 import { toast } from "react-toastify";
+import DataIcon from "../svg/data";
+import UserSettingsIcon from "../svg/user_settings";
+import Attacks from "./attacks";
+import AttackIcon from "../svg/attack";
+import SettingsIcon from "../svg/settings";
 
 type WorkspaceProps = {
     uuid: UUID;
 };
 type WorkspaceState = {
     workspace: FullWorkspace | null;
-    selectedTab: "domains" | "ips" | "ports" | "services";
+    selectedTab: "domains" | "ips" | "ports" | "services" | "other";
 };
 
 export default class Workspace extends React.Component<WorkspaceProps, WorkspaceState> {
@@ -34,6 +39,17 @@ export default class Workspace extends React.Component<WorkspaceProps, Workspace
                 <div className={"pane workspace-heading"}>
                     <h2 className={"heading"}>{this.state.workspace?.name}</h2>
                 </div>
+                <div className={"workspace-menu pane"}>
+                    <div className={"icon"}>
+                        <AttackIcon />
+                    </div>
+                    <div className={"icon"}>
+                        <DataIcon />
+                    </div>
+                    <div className={"icon"}>
+                        <SettingsIcon />
+                    </div>
+                </div>
                 <div className={"workspace-section-selector"}>
                     <div
                         className={this.state.selectedTab === "domains" ? "pane workspace-selected-tab" : "pane"}
@@ -67,8 +83,44 @@ export default class Workspace extends React.Component<WorkspaceProps, Workspace
                     >
                         <h3 className={"heading"}>Services</h3>
                     </div>
+                    <div
+                        className={this.state.selectedTab === "other" ? "pane workspace-selected-tab" : "pane"}
+                        onClick={() => {
+                            this.setState({ selectedTab: "other" });
+                        }}
+                    >
+                        <h3 className={"heading"}>Other</h3>
+                    </div>
+                </div>
+                <div className={"pane"}>
+                    <table className={"workspace-content-table"}>
+                        <thead>
+                            <tr className={"workspace-content-row"}>
+                                <th>Domain</th>
+                                <th>DNS</th>
+                                <th>Tags</th>
+                                <th>Comment</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr className={"workspace-content-row"}>
+                                <td>trufflepig-forensics.com</td>
+                                <td className={"bubble-list"}>
+                                    <span className={"bubble"}>A</span>
+                                    <span className={"bubble"}>AAAA</span>
+                                    <span className={"bubble"}>MX</span>
+                                </td>
+                                <td>
+                                    <span className={"bubble red"}>critical</span>
+                                </td>
+                                <td>Netscaler</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+                <div className={"workspace-content-details pane"}>
+                    <h2 className={"heading"}>Details</h2>
                 </div>
-                <div className={"workspace-content-container"}></div>
             </div>
         );
     }