Skip to content

Commit

Permalink
feat: UI error component (#613)
Browse files Browse the repository at this point in the history 
Signed-off-by: veds-g <guptavedant2312@gmail.com>
  • Loading branch information
@veds-g @whynowy
veds-g authored and whynowy committed Apr 3, 2023
1 parent 90ca505 commit 4ec4b3d
Show file tree
Hide file tree
Showing 9 changed files with 301 additions and 119 deletions.
3 changes: 2 additions & 1 deletion ui/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@
"react-json-view": "^1.21.3",
"react-router-dom": "6",
"react-test-renderer": "^18.0.0",
"react-toastify": "^9.1.1",
"reactflow": "^11.5.5",
"resize-observer-polyfill": "^1.5.1",
"typescript": "^4.4.2",
Expand Down Expand Up @@ -74,7 +75,7 @@
},
"jest": {
"transformIgnorePatterns": [
"/node_modules/(?!d3|d3-array|internmap|delaunator|robust-predicates|reactflow)"
"/node_modules/(?!d3|d3-array|internmap|delaunator|robust-predicates|reactflow|react-toastify)"
]
}
}
198 changes: 107 additions & 91 deletions ui/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,119 +15,135 @@ import { Namespaces } from "./components/namespaces/Namespaces";
import { Pipeline } from "./components/pipeline/Pipeline";
import logo from "./images/icon-on-blue-bg.png";
import "./App.css";
import {Slide, ToastContainer} from "react-toastify";
import "react-toastify/dist/ReactToastify.css";

const drawerWidth = 240;

function App() {
return (
<ScopedCssBaseline>
<Box
sx={{
display: "flex",
flexDirection: "column",
width: "100% ",
}}
>
<>
<ScopedCssBaseline>
<Box
sx={{
height: "64px",
display: "flex",
flexDirection: "column",
width: "100% ",
}}
>
<AppBar
position="fixed"
<Box
sx={{
zIndex: (theme) => theme.zIndex.drawer + 1,
height: "64px",
}}
>
<Toolbar>
<img src={logo} alt="logo" className={'logo'}/>
<Typography
sx={{
fontSize: "1.25rem",
fontWeight: 500,
marginLeft: "20px"
}}
variant="h6"
noWrap
component="div"
>
Numaflow
</Typography>
</Toolbar>
</AppBar>
</Box>
<Box
sx={{
display: "flex",
flexDirection: "row",
width: "100% ",
}}
>
<div className="App-side-nav">
<Drawer
variant="permanent"
<AppBar
position="fixed"
sx={{
width: drawerWidth,
flexShrink: 0,
[`& .MuiDrawer-paper`]: {
width: drawerWidth,
boxSizing: "border-box",
fontFamily: "IBM Plex Sans",
fontSize: "1rem",
fontWeight: 400,
},
zIndex: (theme) => theme.zIndex.drawer + 1,
}}
>
<Toolbar />

<Box
sx={{
overflow: "auto",
backgroundColor: "#f4f5f8",
}}
>
<List>
<Link to="/" className="App-side-nav-link">
<ListItem button key="namespaces">
<ListItemIcon>
<InboxIcon />
</ListItemIcon>
<ListItemText primary={"Namespaces"} />
</ListItem>
</Link>
</List>
</Box>
</Drawer>
</div>
<Toolbar>
<img src={logo} alt="logo" className={'logo'}/>
<Typography
sx={{
fontSize: "1.25rem",
fontWeight: 500,
marginLeft: "20px"
}}
variant="h6"
noWrap
component="div"
>
Numaflow
</Typography>
</Toolbar>
</AppBar>
</Box>
<Box
sx={{
display: "flex",
flexDirection: "column",
padding: "25px",
width: "calc(100% - 240px)",
overflow: "auto",
flexDirection: "row",
width: "100% ",
}}
>
<Breadcrumbs />
<Routes>
<Route path="/" element={<Namespaces />} />
<Route
path="/namespaces/:namespaceId/pipelines/:pipelineId"
element={<Pipeline />}
/>
<Route
path="*"
element={
<main style={{ padding: "1rem" }}>
<p>There's nothing here!</p>
</main>
}
/>
</Routes>
<div className="App-side-nav">
<Drawer
variant="permanent"
sx={{
width: drawerWidth,
flexShrink: 0,
[`& .MuiDrawer-paper`]: {
width: drawerWidth,
boxSizing: "border-box",
fontFamily: "IBM Plex Sans",
fontSize: "1rem",
fontWeight: 400,
},
}}
>
<Toolbar />

<Box
sx={{
overflow: "auto",
backgroundColor: "#f4f5f8",
}}
>
<List>
<Link to="/" className="App-side-nav-link">
<ListItem button key="namespaces">
<ListItemIcon>
<InboxIcon />
</ListItemIcon>
<ListItemText primary={"Namespaces"} />
</ListItem>
</Link>
</List>
</Box>
</Drawer>
</div>
<Box
sx={{
display: "flex",
flexDirection: "column",
padding: "25px",
width: "calc(100% - 240px)",
overflow: "auto",
}}
>
<Breadcrumbs />
<Routes>
<Route path="/" element={<Namespaces />} />
<Route
path="/namespaces/:namespaceId/pipelines/:pipelineId"
element={<Pipeline />}
/>
<Route
path="*"
element={
<main style={{ padding: "1rem" }}>
<p>There's nothing here!</p>
</main>
}
/>
</Routes>
</Box>
</Box>
</Box>
</Box>
</ScopedCssBaseline>
</ScopedCssBaseline>
<ToastContainer
position="bottom-right"
autoClose={6000}
hideProgressBar={false}
newestOnTop={false}
closeOnClick={false}
rtl={false}
draggable={true}
pauseOnHover={true}
transition={Slide}
theme="light"
/>
</>
);
}

Expand Down
14 changes: 13 additions & 1 deletion ui/src/components/namespaces/NamespaceRowContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ import { Link } from "react-router-dom";
import List from "@mui/material/List";
import ListItem from "@mui/material/ListItem";
import { useNamespaceFetch } from "../../utils/fetchWrappers/namespaceFetch";
import { notifyError } from "../../utils/error";
import { useEffect } from "react";

interface NamespaceRowContentProps {
namespaceId: string;
Expand All @@ -29,7 +31,17 @@ export function NamespaceRowContent(props: NamespaceRowContentProps) {
</div>
);
} else {
const {pipelines} = useNamespaceFetch(namespaceId);
const {pipelines, error: pipelineError} = useNamespaceFetch(namespaceId);

useEffect(() => {
if (pipelineError) {
notifyError([{
error: "Failed to fetch the pipelines for the provided namespace",
options: {toastId: "ns-server", autoClose: false}
}]);
}
}, [pipelineError]);

return (
<div className={"NamespaceRowContent"} data-testid="namespace-row-content">
<Box
Expand Down

0 comments on commit 4ec4b3d

Please sign in to comment.