Skip to content

Commit 5b1ae0f

Browse files
matthewxing1matthewxing1
committed
added a permanent drawer and styling changes
1 parent 83b17d3 commit 5b1ae0f

File tree

9 files changed

+141
-29
lines changed

9 files changed

+141
-29
lines changed

‎ksqLight/package-lock.json

Lines changed: 34 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎ksqLight/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
"@electron/remote": "^2.0.8",
77
"@emotion/react": "^11.9.3",
88
"@emotion/styled": "^11.9.3",
9+
"@mui/icons-material": "^5.8.4",
910
"@mui/material": "^5.9.0",
1011
"@testing-library/jest-dom": "^5.16.4",
1112
"@testing-library/react": "^13.3.0",

‎ksqLight/src/App.js

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,23 @@ import { BrowserRouter, Routes, Route } from "react-router-dom";
44
import { Header } from "./components/Header.js";
55
import { Homepage } from "./components/Homepage.js";
66
import { SettingsSidebar } from "./components/SettingsSidebar.js";
7-
import { Drawer, CssBaseline } from "@mui/material";
7+
import { PermanentDrawer } from "./components/PermanentDrawer.js";
8+
import { QueryPage } from "./components/QueryPage.js";
9+
import { CssBaseline } from "@mui/material";
810

911
function App() {
1012
const [fetchMetrics, setFetchMetrics] = useState(true);
1113
const [showSettings, setShowSettings] = useState(false);
1214

1315
return (
1416
<BrowserRouter>
15-
<CssBaseline/>
17+
<CssBaseline/>
1618
<Header fetchMetrics={fetchMetrics} setFetchMetrics={setFetchMetrics} showSettings={showSettings} setShowSettings={setShowSettings}/>
17-
<SettingsSidebar showSettings={showSettings}></SettingsSidebar>
19+
<SettingsSidebar showSettings={showSettings} setShowSettings={setShowSettings}></SettingsSidebar>
20+
<PermanentDrawer></PermanentDrawer>
1821
<Routes>
1922
<Route path="/" element={<Homepage/>}/>
23+
<Route path="/queryPage" element={<QueryPage/>}/>
2024
</Routes>
2125
</BrowserRouter>
2226

‎ksqLight/src/components/Chart.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { Grid, Typography } from "@mui/material";
44
export const Chart = ({ content }) => {
55

66
return (
7-
<Grid item xs={4}>
7+
<Grid item xs={3}>
88
<Typography color="primary">{content}</Typography>
99
</Grid>
1010
)

‎ksqLight/src/components/Header.js

Lines changed: 24 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,38 @@
11
import React from "react";
2+
import { Typography, createTheme, Toolbar, AppBar, IconButton } from "@mui/material";
3+
import SettingsIcon from '@mui/icons-material/Settings';
4+
import SyncIcon from '@mui/icons-material/Sync';
5+
import ArticleIcon from '@mui/icons-material/Article';
26
import { useNavigate } from "react-router-dom";
3-
import { Typography, createTheme, Toolbar, AppBar } from "@mui/material";
4-
import { useTheme } from "@mui/material/styles";
5-
// import { styled } from "@mui/styles";
6-
7-
// const useStyles = makeStyles(() => {
8-
// return ({
9-
// appBar: {
10-
// zIndex: (theme) => theme.zIndex.drawer + 1
11-
// }
12-
// })
13-
// })
147

158
export const Header = ({ fetchMetrics, setFetchMetrics, showSettings, setShowSettings }) => {
16-
let navigate = useNavigate();
17-
9+
const navigate = useNavigate();
1810
const ksqLightTheme = createTheme({
1911
typography:{
2012
fontFamily: 'Raleway'
2113
}
2214
})
23-
// const theme = useTheme();
24-
// const classes = useStyles(theme);
15+
const navGithub = () => {
16+
window.open(
17+
"https://github.com/oslabs-beta/ksqljs/", "_blank");
18+
}
19+
const navHome = () => {
20+
navigate("/");
21+
}
2522

2623
return (
27-
28-
<AppBar position="fixed" >
29-
<Toolbar>
30-
<Typography theme={ksqLightTheme} variant="h3">ksqLight</Typography>
24+
<AppBar position="fixed" sx={{ zIndex:"snackbar" }} >
25+
<Toolbar className="bg-gradient-to-r h-16 from-cyan-700 to-sky-700 background-animate">
26+
<Typography onClick={navHome} theme={ksqLightTheme} variant="h3" sx={{ flexGrow: 1 }}>ksqLight</Typography>
27+
<IconButton aria-label="Documentation" onClick={() => {navGithub()}}>
28+
<ArticleIcon/>
29+
</IconButton>
30+
<IconButton aria-label="Refresh">
31+
<SyncIcon/>
32+
</IconButton>
33+
<IconButton aria-label="Hide" sx={{ pr: 0 }} onClick={() => setShowSettings(!showSettings)}>
34+
<SettingsIcon/>
35+
</IconButton>
3136
</Toolbar>
3237
</AppBar>
3338
)

‎ksqLight/src/components/Homepage.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@ import { Typography, Grid, Toolbar } from "@mui/material";
44
import { Chart } from "./Chart.js";
55

66
export const Homepage = () => {
7-
const [content, setContent] = useState('Content example');
7+
const [content, setContent] = useState('Chart placeholder');
88
return (
99
<div>
1010
<Toolbar></Toolbar>
1111
<Typography color="primary">Homepage</Typography>
12-
<Grid container spacing={2} justifyContent="flex-start" alignItems="flex-start">
12+
<Grid container spacing={2} justifyContent="flex-start" alignItems="flex-start" sx={{ pl: 28 }}>
1313
<Chart content={content}></Chart>
1414
<Chart content={content}></Chart>
1515
<Chart content={content}></Chart>

‎ksqLight/src/components/PermanentDrawer.js

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import React from "react";
2+
import { useNavigate } from "react-router-dom";
3+
import { Drawer, List, ListItem, ListItemButton, ListItemIcon, ListItemText, ThemeProvider, Toolbar, createTheme } from "@mui/material";
4+
import StackedLineChartIcon from '@mui/icons-material/StackedLineChart';
5+
import MailIcon from '@mui/icons-material/Mail';
6+
7+
export const PermanentDrawer = () => {
8+
let navigate = useNavigate();
9+
const theme = createTheme({
10+
background: {
11+
color: '#1e293b'
12+
}
13+
})
14+
const navQueryPage = () => {
15+
navigate("/queryPage");
16+
}
17+
18+
return (
19+
<ThemeProvider theme={theme}>
20+
<Drawer variant="permanent" anchor="left" open={true} PaperProps={{ sx: {backgroundColor: "#1e293b"}}}>
21+
<Toolbar></Toolbar>
22+
<List sx={{ color:'white' }}>
23+
<ListItem>
24+
<ListItemButton>
25+
<ListItemIcon sx={{ color:'white' }}>
26+
<StackedLineChartIcon/>
27+
</ListItemIcon>
28+
<ListItemText primary="Prometheus" />
29+
</ListItemButton>
30+
</ListItem>
31+
<ListItem>
32+
<ListItemButton>
33+
<ListItemIcon sx={{ color:'white' }}>
34+
<StackedLineChartIcon/>
35+
</ListItemIcon>
36+
<ListItemText primary="ksqlDB" />
37+
</ListItemButton>
38+
</ListItem>
39+
<ListItem>
40+
<ListItemButton onClick={navQueryPage}>
41+
<ListItemIcon sx={{ color:'white' }}>
42+
<MailIcon/>
43+
</ListItemIcon>
44+
<ListItemText primary="SQL Query" />
45+
</ListItemButton>
46+
</ListItem>
47+
</List>
48+
</Drawer>
49+
</ThemeProvider>
50+
)
51+
}

‎ksqLight/src/components/QueryPage.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React from "react";
2+
import { Typography, Toolbar } from "@mui/material";
3+
4+
export const QueryPage = () => {
5+
6+
return (
7+
<div>
8+
<Toolbar></Toolbar>
9+
<Typography color="primary" sx={{ pl: 28 }}>Query Page</Typography>
10+
</div>
11+
12+
)
13+
}

‎ksqLight/src/components/SettingsSidebar.js

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import React from "react";
2-
import clsx from "clsx";
32
import { useState } from "react";
4-
import { TextField, Typography, MenuItem, Select, Drawer, Toolbar } from "@mui/material";
3+
import { TextField, Typography, MenuItem, Select, Drawer, IconButton } from "@mui/material"
4+
import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew';
5+
;
56

6-
export const SettingsSidebar = ({ showSettings }) => {
7+
export const SettingsSidebar = ({ showSettings, setShowSettings }) => {
78
const [timeWindowDays, setTimeWindowDays] = useState(0);
89
const [timeWindowHours, setTimeWindowHours] = useState(1);
910
const [timeWindowMinutes, setTimeWindowMinutes] = useState(30);
@@ -31,9 +32,12 @@ export const SettingsSidebar = ({ showSettings }) => {
3132
}
3233

3334
return(
34-
<Drawer variant="temporary" anchor="right" open={showSettings}>
35+
<Drawer variant="temporary" anchor="right" open={showSettings} sx={{ zIndex:"tooltip" }}>
3536
<div className="flex-1 w-full header-viewport bg-slate-800 p-4">
3637
<form noValidate autoComplete="off">
38+
<IconButton aria-label="Hide" onClick={() => setShowSettings(!showSettings)}>
39+
<ArrowBackIosNewIcon/>
40+
</IconButton>
3741
<Typography variant="h5">Prometheus Connection</Typography>
3842
<hr className="w-full mb-3 mt-1"></hr>
3943
<TextField

0 commit comments

Comments
 (0)