back to hosts table from new monitor

Client/src/Components/ConfigBox/index.css

@@ -0,0 +1,24 @@
+.config-box {
+  display: flex;
+  padding: 30px 40px;
+  border: 1px solid var(--env-var-color-16);
+  border-radius: var(--env-var-radius-1);
+  justify-content: space-between;
+  padding-bottom: 50px;
+}
+
+.config-box-desc {
+  width: 35%;
+}
+
+.config-box-desc-title {
+  color: var(--env-var-color-5);
+  font-size: var(--env-var-font-size-large);
+  font-weight: 700;
+  margin-bottom: var(--env-var-spacing-1);
+}
+
+.config-box-desc-text {
+  color: var(--env-var-color-5);
+  font-size: var(--env-var-font-size-medium);
+}

Client/src/Components/ConfigBox/index.jsx

@@ -0,0 +1,13 @@
+import "./index.css";
+import React from "react";
+
+const ConfigBox = ({ leftLayout, rightLayout }) => {
+  return (
+    <div className="config-box">
+      {leftLayout}
+      {rightLayout}
+    </div>
+  );
+};
+
+export default ConfigBox;

Client/src/Components/CurrentMonitors/index.css

@@ -23,7 +23,7 @@
   width: var(--env-var-spacing-2);
   height: var(--env-var-spacing-2);
   background-color: var(--env-var-color-15);
-  border: 1px solid var(--env-var-color-14);
+  border: 1px solid var(--env-var-color-6);
   border-radius: 50%;
   text-align: center;
   align-items: center;

Client/src/Components/CurrentMonitors/index.jsx

@@ -4,7 +4,7 @@ import React from "react";
 import HostsTable from "../HostsTable";
 import Pagination from "../Pagination";
 
-const CurrentMonitors = () => {
+const CurrentMonitors = ({ monitors }) => {
   return (
     <div className="current-monitors">
       <div className="current-monitors-bar">
@@ -17,7 +17,7 @@ const CurrentMonitors = () => {
         </div>
       </div>
       <div className="monitors-v-gaping"></div>
-      <HostsTable />
+      <HostsTable monitors={monitors} />
       <div className="monitors-v-gaping"></div>
       <Pagination />
     </div>

Client/src/Components/HostsTable/index.jsx

@@ -1,10 +1,6 @@
 import React from "react";
-import HostStatus from "../HostStatus";
-import Host from "../Host";
-import BarChart from "../Charts/BarChart/BarChart";
-import HostActions from "../HostActions";
 
-function HostsTable() {
+const HostsTable = ({ monitors }) => {
   return (
     <div className="current-monitors-table-holder">
       <table className="current-monitors-table">
@@ -17,90 +13,18 @@ function HostsTable() {
           </tr>
         </thead>
         <tbody>
-          <tr className="tbody-row">
-            <td className="tbody-row-cell">
-              {Host("Discord", 100, "var(--env-var-color-17)")}
-            </td>
-            <td className="tbody-row-cell">
-              {HostStatus(
-                "var(--env-var-color-20)",
-                "Up",
-                "var(--env-var-color-17)"
-              )}
-            </td>
-            <td className="tbody-row-cell">
-              <BarChart />
-            </td>
-            <td className="tbody-row-cell actions-cell">{HostActions()}</td>
-          </tr>
-          <tr className="tbody-row">
-            <td className="tbody-row-cell">
-              {Host("Google", 99.9, "var(--env-var-color-17)")}
-            </td>
-            <td className="tbody-row-cell">
-              {HostStatus(
-                "var(--env-var-color-20)",
-                "Up",
-                "var(--env-var-color-17)"
-              )}
-            </td>
-            <td className="tbody-row-cell">
-              <BarChart />
-            </td>
-            <td className="tbody-row-cell actions-cell">{HostActions()}</td>
-          </tr>
-          <tr className="tbody-row">
-            <td className="tbody-row-cell">
-              {Host("NBC", 98.1, "var(--env-var-color-18)")}
-            </td>
-            <td className="tbody-row-cell">
-              {HostStatus(
-                "var(--env-var-color-20)",
-                "Up",
-                "var(--env-var-color-17)"
-              )}
-            </td>
-            <td className="tbody-row-cell">
-              <BarChart />
-            </td>
-            <td className="tbody-row-cell actions-cell">{HostActions()}</td>
-          </tr>
-          <tr className="tbody-row">
-            <td className="tbody-row-cell">
-              {Host("Google", 95.1, "var(--env-var-color-19)")}
-            </td>
-            <td className="tbody-row-cell">
-              {HostStatus(
-                "var(--env-var-color-21)",
-                "Down",
-                "var(--env-var-color-19)"
-              )}
-            </td>
-            <td className="tbody-row-cell">
-              <BarChart />
-            </td>
-            <td className="tbody-row-cell actions-cell">{HostActions()}</td>
-          </tr>
-          <tr className="tbody-row">
-            <td className="tbody-row-cell">
-              {Host("NBC", 99.9, "var(--env-var-color-17)")}
-            </td>
-            <td className="tbody-row-cell">
-              {HostStatus(
-                "var(--env-var-color-15)",
-                "Cannot resolve",
-                "var(--env-var-color-22)"
-              )}
-            </td>
-            <td className="tbody-row-cell">
-              <BarChart />
-            </td>
-            <td className="tbody-row-cell actions-cell">{HostActions()}</td>
-          </tr>
+          {monitors.map((monitor, index) => (
+            <tr className="tbody-row" key={index}>
+              <td className="tbody-row-cell">{monitor.host}</td>
+              <td className="tbody-row-cell">{monitor.status}</td>
+              <td className="tbody-row-cell">{monitor.team}</td>
+              <td className="tbody-row-cell actions-cell">{monitor.actions}</td>
+            </tr>
+          ))}
         </tbody>
       </table>
     </div>
   );
-}
+};
 
 export default HostsTable;

Client/src/Components/TextFields/Flexibile/FlexibileTextField.jsx

@@ -0,0 +1,17 @@
+import "./flexibileTextField.css";
+import React from "react";
+
+const FlexibileTextField = ({ title, type, placeholder }) => {
+  return (
+    <div className="flexibile-textfield">
+      <div className="flexibile-textfield-title">{title}</div>
+      <input
+        type={type}
+        className="flexibile-textfield-input"
+        placeholder={placeholder}
+      />
+    </div>
+  );
+};
+
+export default FlexibileTextField;

Client/src/Components/TextFields/Flexibile/flexibileTextField.css

@@ -0,0 +1,22 @@
+.flexibile-textfield-title {
+  color: var(--env-var-color-5);
+  font-size: var(--env-var-font-size-medium);
+}
+
+.flexibile-textfield-input {
+  width: 292.8px;
+  height: 6.8px;
+  padding: var(--env-var-spacing-1);
+  margin-top: 10px;
+  border: 1px solid var(--env-var-color-4);
+  border-radius: var(--env-var-radius-1);
+}
+
+.flexibile-textfield-input:focus {
+  outline: none;
+}
+
+.flexibile-textfield-input::placeholder {
+  color: var(--env-var-color-25);
+  font-size: var(--env-var-font-size-medium);
+}

Client/src/Components/TextFields/Search/searchTextField.css

@@ -18,7 +18,7 @@
   width: 150px;
   border: none;
   outline: none;
-  font-size: var(--env-var-font-size-large);
+  font-size: var(--env-var-font-size-medium);
 }
 
 .search-field::placeholder {

Client/src/Pages/Monitors/CreateNewMonitor.jsx

@@ -0,0 +1,85 @@
+import ConfigBox from "../../Components/ConfigBox";
+import FlexibileTextField from "../../Components/TextFields/Flexibile/FlexibileTextField";
+import "./index.css";
+import React from "react";
+
+const CreateNewMonitor = () => {
+  return (
+    <div>
+      <div className="monitors-gaps-medium"></div>
+      <div className="monitors-gaps-medium"></div>
+      <div className="new-monitor-header">Create new monitor</div>
+      <div className="monitors-gaps-medium"></div>
+      <ConfigBox
+        leftLayout={
+          <div className="config-box-desc">
+            <div className="config-box-desc-title">General settings</div>
+            <div className="config-box-desc-text">
+              Here you can select the URL of the host, together with the type of
+              monitor.
+            </div>
+          </div>
+        }
+        rightLayout={
+          <div className="config-box-inputs">
+            <FlexibileTextField
+              title="URL to monitor"
+              type="url"
+              placeholder="https://google.com"
+            />
+            <div className="monitors-gaps-medium"></div>
+            <FlexibileTextField
+              title="Friendly name (optional)"
+              type="text"
+              placeholder="Google"
+            />
+          </div>
+        }
+      />
+      <div className="monitors-gaps-medium"></div>
+      <div className="monitors-gaps-medium"></div>
+      <ConfigBox
+        leftLayout={
+          <div className="config-box-desc">
+            <div className="config-box-desc-title">Checks to perform</div>
+            <div className="config-box-desc-text">
+              You can always add or remove checks after adding your site.
+            </div>
+          </div>
+        }
+      />
+      <div className="monitors-gaps-medium"></div>
+      <div className="monitors-gaps-medium"></div>
+      <ConfigBox
+        leftLayout={
+          <div className="config-box-desc">
+            <div className="config-box-desc-title">Incident notifications</div>
+            <div className="config-box-desc-text">
+              When there is an incident, notify users.
+            </div>
+          </div>
+        }
+      />
+      <div className="monitors-gaps-medium"></div>
+      <div className="monitors-gaps-medium"></div>
+      <ConfigBox
+        leftLayout={
+          <div className="config-box-desc">
+            <div className="config-box-desc-title">Advanced settings</div>
+          </div>
+        }
+      />
+      <div className="monitors-gaps-medium"></div>
+      <div className="monitors-gaps-medium"></div>
+      <ConfigBox
+        leftLayout={
+          <div className="config-box-desc">
+            <div className="config-box-desc-title">Proxy settings</div>
+          </div>
+        }
+      />
+    </div>
+  );
+};
+
+export default CreateNewMonitor;

Client/src/Pages/Monitors/CurrentStats.jsx

@@ -0,0 +1,99 @@
+import React, { useEffect, useState } from "react";
+import Host from "../../Components/Host";
+import HostStatus from "../../Components/HostStatus";
+import HostActions from "../../Components/HostActions";
+import BarChart from "../../Components/Charts/BarChart/BarChart";
+import Button from "../../Components/Button";
+import ServerStatus from "../../Components/Charts/Servers/ServerStatus";
+import CurrentMonitors from "../../Components/CurrentMonitors";
+
+const hardCodedMonitors = [
+  {
+    host: Host("Discord", 100, "var(--env-var-color-17)"),
+    status: HostStatus(
+      "var(--env-var-color-20)",
+      "Up",
+      "var(--env-var-color-17)"
+    ),
+    team: <BarChart />,
+    actions: HostActions(),
+  },
+  {
+    host: Host("Google", 99.9, "var(--env-var-color-17)"),
+    status: HostStatus(
+      "var(--env-var-color-20)",
+      "Up",
+      "var(--env-var-color-17)"
+    ),
+    team: <BarChart />,
+    actions: HostActions(),
+  },
+  {
+    host: Host("NBC", 98.1, "var(--env-var-color-18)"),
+    status: HostStatus(
+      "var(--env-var-color-20)",
+      "Up",
+      "var(--env-var-color-17)"
+    ),
+    team: <BarChart />,
+    actions: HostActions(),
+  },
+  {
+    host: Host("Google", 95.1, "var(--env-var-color-19)"),
+    status: HostStatus(
+      "var(--env-var-color-21)",
+      "Down",
+      "var(--env-var-color-19)"
+    ),
+    team: <BarChart />,
+    actions: HostActions(),
+  },
+  {
+    host: Host("NBC", 99.9, "var(--env-var-color-17)"),
+    status: HostStatus(
+      "var(--env-var-color-15)",
+      "Cannot resolve",
+      "var(--env-var-color-22)"
+    ),
+    team: <BarChart />,
+    actions: HostActions(),
+  },
+];
+
+const CurrentStats = () => {
+  // The hardcoded part is passed as default value for the purpose of demonstration.
+  // Pass an empty array, [], before fetching the data
+  const [monitors, setMonitors] = useState(hardCodedMonitors);
+
+  useEffect(() => {
+    fetch("API_URL")
+      .then((response) => response.json())
+      .then((data) => setMonitors(data))
+      .catch((error) => console.error(error));
+  }, []);
+
+  return (
+    <div>
+      <div className="monitors-gaps-medium"></div>
+      <div className="monitors-gaps-medium"></div>
+      <div className="monitors-bar">
+        <div className="monitors-bar-title">Hello, Jackie</div>
+        <Button
+          level="primary"
+          label="Create new monitor"
+          sx={{ padding: "10px 20px", fontSize: "13px" }}
+        />
+      </div>
+      <div className="monitors-gaps-medium"></div>
+      <div className="monitors-stats">
+        <ServerStatus title="Up" value="4" state="up" />
+        <ServerStatus title="Down" value="0" state="down" />
+        <ServerStatus title="Paused" value="0" state="pause" />
+      </div>
+      <div className="monitors-gaps-medium"></div>
+      <CurrentMonitors monitors={monitors} />
+    </div>
+  );
+};
+
+export default CurrentStats;

Client/src/Pages/Monitors/index.css

@@ -1,4 +1,5 @@
-.monitors {
+.monitors,
+.new-monitor {
   width: 70vw;
   padding: 4vw;
 }
@@ -22,3 +23,9 @@
 .monitors-gaps-medium {
   height: var(--env-var-spacing-2);
 }
+
+.new-monitor-header {
+  color: var(--env-var-color-1);
+  font-size: var(--env-var-font-size-large-plus);
+  font-weight: 600;
+}

Client/src/Pages/Monitors/index.jsx

@@ -1,30 +1,11 @@
-import Button from "../../Components/Button";
-import ServerStatus from "../../Components/Charts/Servers/ServerStatus";
-import CurrentMonitors from "../../Components/CurrentMonitors";
+import CurrentStats from "./CurrentStats";
 import "./index.css";
 import React from "react";
 
 const Monitors = () => {
   return (
     <div className="monitors">
-      <div className="monitors-gaps-medium"></div>
-      <div className="monitors-gaps-medium"></div>
-      <div className="monitors-bar">
-        <div className="monitors-bar-title">Hello, Jackie</div>
-        <Button
-          level="primary"
-          label="Create new monitor"
-          sx={{ padding: "10px 20px", fontSize: "13px" }}
-        />
-      </div>
-      <div className="monitors-gaps-medium"></div>
-      <div className="monitors-stats">
-        <ServerStatus title="Up" value="4" state="up" />
-        <ServerStatus title="Down" value="0" state="down" />
-        <ServerStatus title="Paused" value="0" state="pause" />
-      </div>
-      <div className="monitors-gaps-medium"></div>
-      <CurrentMonitors />
+      <CurrentStats />
     </div>
   );
 };

Client/src/index.css

@@ -39,6 +39,7 @@
   --env-var-color-22: #4e5ba6;
   --env-var-color-23: #17b26a;
   --env-var-color-24: #d92d20;
+  --env-var-color-25: #667085;
 
   --env-var-radius-1: 4px;
   --env-var-radius-2: 8px;
@@ -57,6 +58,7 @@
   --env-var-font-size-medium: 13px;
   --env-var-font-size-medium-plus: 14px;
   --env-var-font-size-large: 16px;
+  --env-var-font-size-large-plus: 24px;
   --env-var-font-size-xlarge: 30px;
 
   --env-var-img-width-1: 20px;