Feature/monitoring specifier (#80)

dqualizer · Jul 25, 2024 · 4931eb5 · 4931eb5
1 parent 19c544f
commit 4931eb5
Show file tree

Hide file tree

Showing 16 changed files with 3,569 additions and 285 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/ScenarioEditor.tsx b/src/components/ScenarioEditor.tsx
@@ -4,36 +4,44 @@ import { ResilienceTestSpecifier } from "@/components/resilience-test-specifier/
 import { useState, type Dispatch, type SetStateAction } from "react";
 import type { Edge } from "reactflow";
 import { RqaList } from "./rqaExplorer/RqaList";
+import { Monitor } from "@mui/icons-material";
+import MonitoringSpecifier from "./monitoring/MonitoringSpecifier";
 
 export default function ScenarioEditor({
-	showLoadTestSpecifier,
-	showResilienceTestSpecifier,
-	rqaExplorerShow,
-	setShowLoadTestSpecifier,
-	setShowResilienceTestSpecifier,
+  showLoadTestSpecifier,
+  showResilienceTestSpecifier,
+  rqaExplorerShow,
+  showMonitoringSpecifier,
+  setShowLoadTestSpecifier,
+  setShowResilienceTestSpecifier,
 }: {
-	showLoadTestSpecifier: boolean;
-	showResilienceTestSpecifier: boolean;
-	rqaExplorerShow: boolean;
-	setShowLoadTestSpecifier: Dispatch<SetStateAction<boolean>>;
-	setShowResilienceTestSpecifier: Dispatch<SetStateAction<boolean>>;
+  showLoadTestSpecifier: boolean;
+  showResilienceTestSpecifier: boolean;
+  rqaExplorerShow: boolean;
+  showMonitoringSpecifier: boolean;
+  setShowLoadTestSpecifier: Dispatch<SetStateAction<boolean>>;
+  setShowResilienceTestSpecifier: Dispatch<SetStateAction<boolean>>;
 }) {
-	const [selectedEdge, setSelectedEdge] = useState<Edge | null>(null);
+  const [selectedEdge, setSelectedEdge] = useState<Edge | null>(null);
 
-	return (
-		<>
-			<Conditional showWhen={showLoadTestSpecifier}>
-				<LoadTestSpecifier selectedEdge={selectedEdge} />
-			</Conditional>
-			<Conditional showWhen={showResilienceTestSpecifier}>
-				<ResilienceTestSpecifier selectedEdge={selectedEdge} />
-			</Conditional>
-			<Conditional showWhen={rqaExplorerShow}>
-				<RqaList
-					loadTestSpecifier={setShowLoadTestSpecifier}
-					resilienceTestSpecifier={setShowResilienceTestSpecifier}
-				/>
-			</Conditional>
-		</>
-	);
+  console.log(showMonitoringSpecifier);
+  return (
+    <>
+      <Conditional showWhen={showLoadTestSpecifier}>
+        <LoadTestSpecifier selectedEdge={selectedEdge} />
+      </Conditional>
+      <Conditional showWhen={showResilienceTestSpecifier}>
+        <ResilienceTestSpecifier selectedEdge={selectedEdge} />
+      </Conditional>
+      <Conditional showWhen={rqaExplorerShow}>
+        <RqaList
+          loadTestSpecifier={setShowLoadTestSpecifier}
+          resilienceTestSpecifier={setShowResilienceTestSpecifier}
+        />
+      </Conditional>
+      <Conditional showWhen={showMonitoringSpecifier}>
+        <MonitoringSpecifier />
+      </Conditional>
+    </>
+  );
 }
diff --git a/src/components/ScenarioEditorTaskbar.tsx b/src/components/ScenarioEditorTaskbar.tsx
@@ -2,42 +2,52 @@ import EqualizerIcon from "@mui/icons-material/Equalizer";
 import type { Dispatch, SetStateAction } from "react";
 
 export default function ScenarioEditorTaskbar({
-	setRqaExplorerShow,
-	setShowLoadTestSpecifier,
-	setShowResilienceTestSpecifier,
+  setRqaExplorerShow,
+  setShowLoadTestSpecifier,
+  setShowResilienceTestSpecifier,
+  setShowMonitoringSpecifier,
 }: {
-	setRqaExplorerShow: Dispatch<SetStateAction<boolean>>;
-	setShowLoadTestSpecifier: Dispatch<SetStateAction<boolean>>;
-	setShowResilienceTestSpecifier: Dispatch<SetStateAction<boolean>>;
+  setRqaExplorerShow: Dispatch<SetStateAction<boolean>>;
+  setShowLoadTestSpecifier: Dispatch<SetStateAction<boolean>>;
+  setShowResilienceTestSpecifier: Dispatch<SetStateAction<boolean>>;
+  setShowMonitoringSpecifier: Dispatch<SetStateAction<boolean>>;
 }) {
-	return (
-		<>
-			<button
-				type="button"
-				onClick={() => setRqaExplorerShow((prevState) => !prevState)}
-			>
-				<div>
-					<EqualizerIcon />
-				</div>
-			</button>
-			<button
-				type="button"
-				onClick={() => setShowLoadTestSpecifier((prevState) => !prevState)}
-			>
-				<div className="icon-domain-story-loadtest" />
-			</button>
+  return (
+    <>
+      <button
+        type="button"
+        onClick={() => setRqaExplorerShow((prevState) => !prevState)}
+      >
+        <div>
+          <EqualizerIcon />
+        </div>
+      </button>
+      <button
+        type="button"
+        onClick={() => setShowLoadTestSpecifier((prevState) => !prevState)}
+      >
+        <div className="icon-domain-story-loadtest" />
+      </button>
 
-			<button type="button">
-				<div className="icon-domain-story-monitoring" />
-			</button>
-			<button
-				type="button"
-				onClick={() =>
-					setShowResilienceTestSpecifier((prevState) => !prevState)
-				}
-			>
-				<div className="icon-domain-story-chaosexperiment" />
-			</button>
-		</>
-	);
+      <button
+        type="button"
+        onClick={() =>
+          setShowMonitoringSpecifier((prevState) => {
+            console.log(prevState);
+            return !prevState;
+          })
+        }
+      >
+        <div className="icon-domain-story-monitoring" />
+      </button>
+      <button
+        type="button"
+        onClick={() =>
+          setShowResilienceTestSpecifier((prevState) => !prevState)
+        }
+      >
+        <div className="icon-domain-story-chaosexperiment" />
+      </button>
+    </>
+  );
 }
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
@@ -9,36 +9,42 @@ import ScenarioEditor from "./ScenarioEditor";
 import ScenarioExplorer from "./ScenarioExplorer";
 
 export default function Sidebar({
-	nodes,
-	edges,
-}: { nodes: Node[]; edges: Edge[] }) {
-	// hideComponentOnViewportClick(loadtestRef, setShowLoadTestSpecifier);
-	const [scenarioMode, setScenarioMode] = useState(false);
-	const [rqaExplorer, setRqaExplorer] = useState(false);
-	const [showLoadTestSpecifier, setShowLoadTestSpecifier] = useState(false);
-	const [showResilienceTestSpecifier, setShowResilienceTestSpecifier] =
-		useState(false);
+  nodes,
+  edges,
+}: {
+  nodes: Node[];
+  edges: Edge[];
+}) {
+  // hideComponentOnViewportClick(loadtestRef, setShowLoadTestSpecifier);
+  const [scenarioMode, setScenarioMode] = useState(false);
+  const [rqaExplorer, setRqaExplorer] = useState(false);
+  const [showLoadTestSpecifier, setShowLoadTestSpecifier] = useState(false);
+  const [showResilienceTestSpecifier, setShowResilienceTestSpecifier] =
+    useState(false);
+  const [showMonitoringSpecifier, setShowMonitoringSpecifier] = useState(false);
 
-	return (
-		<div className="sidebar">
-			<Taskbar
-				scenarioMode={scenarioMode}
-				setScenarioMode={setScenarioMode}
-				setRqaExplorerShow={setRqaExplorer}
-				setShowLoadTestSpecifier={setShowLoadTestSpecifier}
-				setShowResilienceTestSpecifier={setShowResilienceTestSpecifier}
-			/>
-			{scenarioMode ? (
-				<ScenarioExplorer />
-			) : (
-				<ScenarioEditor
-					showLoadTestSpecifier={showLoadTestSpecifier}
-					showResilienceTestSpecifier={showResilienceTestSpecifier}
-					rqaExplorerShow={rqaExplorer}
-					setShowLoadTestSpecifier={setShowLoadTestSpecifier}
-					setShowResilienceTestSpecifier={setShowResilienceTestSpecifier}
-				/>
-			)}
-		</div>
-	);
+  return (
+    <div className="sidebar">
+      <Taskbar
+        scenarioMode={scenarioMode}
+        setScenarioMode={setScenarioMode}
+        setRqaExplorerShow={setRqaExplorer}
+        setShowLoadTestSpecifier={setShowLoadTestSpecifier}
+        setShowResilienceTestSpecifier={setShowResilienceTestSpecifier}
+        setShowMonitoringSpecifier={setShowMonitoringSpecifier}
+      />
+      {scenarioMode ? (
+        <ScenarioExplorer />
+      ) : (
+        <ScenarioEditor
+          showLoadTestSpecifier={showLoadTestSpecifier}
+          showResilienceTestSpecifier={showResilienceTestSpecifier}
+          rqaExplorerShow={rqaExplorer}
+          showMonitoringSpecifier={showMonitoringSpecifier}
+          setShowLoadTestSpecifier={setShowLoadTestSpecifier}
+          setShowResilienceTestSpecifier={setShowResilienceTestSpecifier}
+        />
+      )}
+    </div>
+  );
 }
diff --git a/src/components/Taskbar.tsx b/src/components/Taskbar.tsx
@@ -5,39 +5,42 @@ import ScenarioEditorTaskbar from "./ScenarioEditorTaskbar";
 import ScenarioExplorerTaskbar from "./ScenarioExporerTaskbar";
 
 export default function Taskbar({
-	scenarioMode,
-	setScenarioMode,
-	setRqaExplorerShow,
-	setShowLoadTestSpecifier,
-	setShowResilienceTestSpecifier,
+  scenarioMode,
+  setScenarioMode,
+  setRqaExplorerShow,
+  setShowLoadTestSpecifier,
+  setShowResilienceTestSpecifier,
+  setShowMonitoringSpecifier,
 }: {
-	scenarioMode: boolean;
-	setScenarioMode: Dispatch<SetStateAction<boolean>>;
-	setRqaExplorerShow: Dispatch<SetStateAction<boolean>>;
-	setShowLoadTestSpecifier: Dispatch<SetStateAction<boolean>>;
-	setShowResilienceTestSpecifier: Dispatch<SetStateAction<boolean>>;
+  scenarioMode: boolean;
+  setScenarioMode: Dispatch<SetStateAction<boolean>>;
+  setRqaExplorerShow: Dispatch<SetStateAction<boolean>>;
+  setShowLoadTestSpecifier: Dispatch<SetStateAction<boolean>>;
+  setShowResilienceTestSpecifier: Dispatch<SetStateAction<boolean>>;
+  setShowMonitoringSpecifier: Dispatch<SetStateAction<boolean>>;
 }) {
-	return (
-		<div className="taskbar-container">
-			<button
-				type="button"
-				className="change-mode"
-				onClick={() => setScenarioMode((prevState) => !prevState)}
-			>
-				<div>{scenarioMode ? <CloudQueueIcon /> : <CloudOffIcon />}</div>
-			</button>
+  return (
+    <div className="taskbar-container">
+      <button
+        type="button"
+        className="change-mode"
+        onClick={() => setScenarioMode((prevState) => !prevState)}
+      >
+        <div>{scenarioMode ? <CloudQueueIcon /> : <CloudOffIcon />}</div>
+      </button>
 
-			{scenarioMode ? (
-				<ScenarioExplorerTaskbar />
-			) : (
-				<ScenarioEditorTaskbar
-					{...{
-						setRqaExplorerShow,
-						setShowLoadTestSpecifier,
-						setShowResilienceTestSpecifier,
-					}}
-				/>
-			)}
-		</div>
-	);
+      {scenarioMode ? (
+        <ScenarioExplorerTaskbar />
+      ) : (
+        <ScenarioEditorTaskbar
+          {...{
+            setRqaExplorerShow,
+            setShowLoadTestSpecifier,
+            setShowResilienceTestSpecifier,
+            setShowMonitoringSpecifier,
+          }}
+        />
+      )}
+    </div>
+  );
 }