From 8fbd40b7d98115c5de9484d58d28afcd6c219665 Mon Sep 17 00:00:00 2001 From: Michael Quigley Date: Tue, 17 Dec 2024 16:25:16 -0500 Subject: [PATCH] roughed in all the side panel types and the necessary responsive layout tweaks (#804) --- ui100/src/AccessPanel.tsx | 24 +++++++++++++++++ ui100/{ => src}/AccountNode.tsx | 0 ui100/src/AccountPanel.tsx | 24 +++++++++++++++++ ui100/src/ApiConsole.tsx | 46 +++++++++++++++++++++++++++------ ui100/src/EnvironmentPanel.tsx | 24 +++++++++++++++++ ui100/src/SharePanel.tsx | 24 +++++++++++++++++ ui100/src/Visualizer.tsx | 7 ++--- 7 files changed, 138 insertions(+), 11 deletions(-) create mode 100644 ui100/src/AccessPanel.tsx rename ui100/{ => src}/AccountNode.tsx (100%) create mode 100644 ui100/src/AccountPanel.tsx create mode 100644 ui100/src/EnvironmentPanel.tsx create mode 100644 ui100/src/SharePanel.tsx diff --git a/ui100/src/AccessPanel.tsx b/ui100/src/AccessPanel.tsx new file mode 100644 index 00000000..29aafcb9 --- /dev/null +++ b/ui100/src/AccessPanel.tsx @@ -0,0 +1,24 @@ +import {Node} from "@xyflow/react"; +import {Grid2, Typography} from "@mui/material"; +import AccessIcon from "@mui/icons-material/Lan"; + +interface AccessPanelProps { + access: Node; +} + +const AccessPanel = ({ access }: AccessPanelProps) => { + return ( + + + + + + {String(access.data.label)} + + + + + ); +} + +export default AccessPanel; diff --git a/ui100/AccountNode.tsx b/ui100/src/AccountNode.tsx similarity index 100% rename from ui100/AccountNode.tsx rename to ui100/src/AccountNode.tsx diff --git a/ui100/src/AccountPanel.tsx b/ui100/src/AccountPanel.tsx new file mode 100644 index 00000000..75149ddd --- /dev/null +++ b/ui100/src/AccountPanel.tsx @@ -0,0 +1,24 @@ +import {Node} from "@xyflow/react"; +import {Grid2, Typography} from "@mui/material"; +import AccountIcon from "@mui/icons-material/Person4"; + +interface AccountPanelProps { + account: Node; +} + +const AccountPanel = ({ account }: AccountPanelProps) => { + return ( + + + + + + {String(account.data.label)} + + + + + ); +} + +export default AccountPanel; diff --git a/ui100/src/ApiConsole.tsx b/ui100/src/ApiConsole.tsx index 7f9535f4..e1de7a6b 100644 --- a/ui100/src/ApiConsole.tsx +++ b/ui100/src/ApiConsole.tsx @@ -1,11 +1,15 @@ import {useEffect, useRef, useState} from "react"; import {Configuration, MetadataApi} from "./api"; import {mergeVisualOverview, nodesEqual, VisualOverview} from "./model/visualizer.ts"; -import {Box} from "@mui/material"; +import {Grid2} from "@mui/material"; import NavBar from "./NavBar.tsx"; import {User} from "./model/user.ts"; import Visualizer from "./Visualizer.tsx"; import {Node} from "@xyflow/react"; +import AccountPanel from "./AccountPanel.tsx"; +import EnvironmentPanel from "./EnvironmentPanel.tsx"; +import SharePanel from "./SharePanel.tsx"; +import AccessPanel from "./AccessPanel.tsx"; interface ApiConsoleProps { user: User; @@ -16,6 +20,7 @@ const ApiConsole = ({ user, logout }: ApiConsoleProps) => { const [version, setVersion] = useState("no version set"); const [overview, setOverview] = useState(new VisualOverview()); const [selectedNode, setSelectedNode] = useState(null as Node); + const [sidePanel, setSidePanel] = useState(<>); const oldVov = useRef(overview); useEffect(() => { @@ -64,16 +69,41 @@ const ApiConsole = ({ user, logout }: ApiConsoleProps) => { } }, []); + useEffect(() => { + if(selectedNode) { + switch(selectedNode.type) { + case "account": + setSidePanel(); + break; + + case "environment": + setSidePanel(); + break; + + case "share": + setSidePanel(); + break; + + case "access": + setSidePanel(); + break; + } + } else { + setSidePanel(<>); + } + }, [selectedNode]); + return (
- - -
-

Hello

- 

{JSON.stringify(selectedNode)}

-
- + + + + + + {sidePanel} + +
); } diff --git a/ui100/src/EnvironmentPanel.tsx b/ui100/src/EnvironmentPanel.tsx new file mode 100644 index 00000000..75bcedaa --- /dev/null +++ b/ui100/src/EnvironmentPanel.tsx @@ -0,0 +1,24 @@ +import {Node} from "@xyflow/react"; +import {Grid2, Typography} from "@mui/material"; +import EnvironmentIcon from "@mui/icons-material/Computer"; + +interface EnvironmentPanelProps { + environment: Node; +} + +const EnvironmentPanel = ({ environment }: EnvironmentPanelProps) => { + return ( + + + + + + {String(environment.data.label)} + + + + + ); +} + +export default EnvironmentPanel; \ No newline at end of file diff --git a/ui100/src/SharePanel.tsx b/ui100/src/SharePanel.tsx new file mode 100644 index 00000000..84981fdf --- /dev/null +++ b/ui100/src/SharePanel.tsx @@ -0,0 +1,24 @@ +import {Node} from "@xyflow/react"; +import {Card, Grid2, Typography} from "@mui/material"; +import ShareIcon from "@mui/icons-material/Share"; + +interface SharePanelProps { + share: Node; +} + +const SharePanel = ({ share }: SharePanelProps) => { + return ( + + + + + + {String(share.data.label)} + + + + + ); +} + +export default SharePanel; diff --git a/ui100/src/Visualizer.tsx b/ui100/src/Visualizer.tsx index d0c57c12..59dd4956 100644 --- a/ui100/src/Visualizer.tsx +++ b/ui100/src/Visualizer.tsx @@ -15,8 +15,9 @@ import {useEffect} from "react"; import {stratify, tree} from "d3-hierarchy"; import ShareNode from "./ShareNode.tsx"; import EnvironmentNode from "./EnvironmentNode.tsx"; -import AccountNode from "../AccountNode.tsx"; +import AccountNode from "./AccountNode.tsx"; import AccessNode from "./AccessNode.tsx"; +import {Box} from "@mui/material"; interface VisualizerProps { vov: VisualOverview; @@ -89,10 +90,10 @@ const Visualizer = ({ vov, onSelectionChanged }: VisualizerProps) => { export default ({ vov, onSelectionChanged }: VisualizerProps) => { return ( -
+ -
+ ); } \ No newline at end of file