Merge pull request #233 from OpenElements/infra

(feat) Implement the Infrastructure details page
OpenElements · Jan 22, 2024 · 95b52c1 · 95b52c1
2 parents e698af0 + 2b16f4b
commit 95b52c1
Show file tree

Hide file tree

Showing 4 changed files with 117 additions and 5 deletions.
diff --git a/frontend/src/App.js b/frontend/src/App.js
@@ -12,22 +12,23 @@ import EnvironmentsPage from "./pages/environments-page";
 import EnvSettings from "./pages/env-settings";
 import { useState } from "react";
 import "./css/style.css";
+import InfrastructureDetails from "./pages/Infrastructure-details";
 
 function App() {
   const [sideBarOpen, setSideBarOpen] = useState(false);
   return (
     <div>
       <SideNav sidebarOpen={sideBarOpen} setSidebarOpen={setSideBarOpen} />
       <div className="xl:pl-64 bg-primary-gray">
-        <main className="w-full xl:p-4 h-screen">
-          <div className="bg-white xl:rounded-sm overflow-hidden xl:shadow-sm h-full">
+        <main className="w-full xl:p-4">
+          <div className="bg-white xl:rounded-sm xl:shadow-sm h-full">
             <TopNav setSidebarOpen={setSideBarOpen} />
             <div className="">
               <Routes>
                 <Route path="/" element={<HomePage />} />
                 <Route path="/settings" element={<SettingsPage />} />
                 <Route path="/benchmarks" element={<BenchmarkPage />} />
-                <Route path="/environment" element={<EnvironmentsPage />} />
+                <Route path="/environments" element={<EnvironmentsPage />} />
                 <Route path="/env-settings" element={<EnvSettings />} />
                 <Route
                   path="/table/:id"
@@ -37,6 +38,10 @@ function App() {
                   path="/graph/:id"
                   element={<MeasurementsGraphComponent type="graph" />}
                 />
+                <Route
+                  path="/environments/:id"
+                  element={<InfrastructureDetails />}
+                />
               </Routes>
             </div>
           </div>

diff --git a/frontend/src/components/sideNav/side-nav.component.jsx b/frontend/src/components/sideNav/side-nav.component.jsx
@@ -30,7 +30,7 @@ const SideNav = ({ setSidebarOpen, sidebarOpen }) => {
     },
     {
       name: t("Environments"),
-      href: "/environment",
+      href: "/environments",
       icon: Wrench,
       count: environments ? environments : 0,
     },

diff --git a/frontend/src/pages/Infrastructure-details.jsx b/frontend/src/pages/Infrastructure-details.jsx
@@ -0,0 +1,104 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+
+const InfrastructureDetails = () => {
+  //   const { id } = useParams();
+  const navigate = useNavigate();
+  return (
+    <div className="p-8 flex flex-col gap-6">
+      <div>
+        <h1 className="h4">BenchScape V1.1</h1>
+        <h2 className="text-gray-900">
+          Lorem ipsum dolor sit amet consectetur adipisicing elit.
+        </h2>
+      </div>
+      <div className="flex flex-col gap-3 ml-2">
+        <div className="flex flex-col gap-1" style={{ maxWidth: "400px" }}>
+          <label className="text-xs text-gray-800">Infrastructure name</label>
+          <input
+            className="border-2 border-slate-300 rounded"
+            type="text"
+            name="infrastructure"
+          />
+        </div>
+        <div className="flex flex-col gap-1 max-w-screen-sm">
+          <label className="text-xs text-gray-800">
+            Infrastructure description
+          </label>
+          <textarea
+            className="border-2 border-slate-300 rounded"
+            type="text"
+            name="infrastructure-desc"
+          />
+        </div>
+      </div>
+      <div style={{ maxWidth: "400px" }} className="ml-2">
+        <p className="font-bold">Infrastructure</p>
+        <div className="flex flex-col gap-8 mt-4">
+          <div className="flex justify-between items-center">
+            <div className="text-sm text-gray-800">Operating System</div>
+            <div className="text-sm text-gray-800">Value</div>
+          </div>
+          <div className="flex justify-between items-center">
+            <div className="text-sm text-gray-800">CPU cores</div>
+            <div className="text-sm text-gray-800">Value</div>
+          </div>
+          <div className="flex justify-between items-center">
+            <div className="text-sm text-gray-800">Memory</div>
+            <div className="text-sm text-gray-800">Value</div>
+          </div>
+          <div className="flex justify-between items-center">
+            <div className="text-sm text-gray-800">Java</div>
+            <div className="text-sm text-gray-800">Value</div>
+          </div>
+          <div className="flex justify-between items-center">
+            <div className="text-sm text-gray-800">JMH</div>
+            <div className="text-sm text-gray-800">Value</div>
+          </div>
+        </div>
+      </div>
+      <div style={{ maxWidth: "400px" }}>
+        <p className="font-bold">Measurement</p>
+        <div className="flex flex-col gap-5 mt-4">
+          <div className="flex justify-between items-center">
+            <div className="text-sm text-gray-800">Threads</div>
+            <div className="text-sm text-gray-800">Value</div>
+          </div>
+          <div className="flex justify-between items-center">
+            <div className="text-sm text-gray-800">Forks</div>
+            <div className="text-sm text-gray-800">Value</div>
+          </div>
+          <div className="flex justify-between items-center">
+            <div className="text-sm text-gray-800">Warmup</div>
+            <div className="text-sm text-gray-800">Value</div>
+          </div>
+          <div className="flex justify-between items-center">
+            <div className="text-sm text-gray-800">Measurement</div>
+            <div className="text-sm text-gray-800">Value</div>
+          </div>
+        </div>
+      </div>
+      <div className="flex self-end gap-2">
+        <button
+          className="border-2 text-sm rounded-md text-gray-800"
+          style={{
+            padding: "6px 18px",
+          }}
+          onClick={() => navigate(-1)}
+        >
+          Cancel
+        </button>
+        <button
+          className="border-2 text-sm rounded-md bg-indigo-700 border-indigo-700 text-white"
+          style={{
+            padding: "6px 30px",
+          }}
+        >
+          Save
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default InfrastructureDetails;
diff --git a/frontend/src/pages/environments-page.jsx b/frontend/src/pages/environments-page.jsx
@@ -8,6 +8,7 @@ import {
   faLinux,
 } from "@fortawesome/free-brands-svg-icons";
 import { faMemory, faMicrochip } from "@fortawesome/free-solid-svg-icons";
+import { Link } from "react-router-dom";
 
 function EnvironmentsPage() {
   const { data: environments } = useEnvironments();
@@ -117,7 +118,9 @@ function EnvironmentsPage() {
                     {currentEnvironments?.map((environment) => (
                       <tr className="group hover:bg-azure transition-colors ease-in-out duration-150">
                         <td className="whitespace-nowrap py-3.5 px-4 text-sm font-medium text-gray-900">
-                          {environment.name ?? "--"}
+                          <Link to={`/environments/${environment.id}`}>
+                            {environment.name ?? "--"}
+                          </Link>
                         </td>
                         <td className="whitespace-nowrap py-3.5 px-4 text-sm font-light text-gray-500">
                           {environment.osName === "Mac OS X" && (