Skip to content

Commit ca015d7

Browse files
javanangjavanang
committed
merged welcome page
1 parent eca09f1 commit ca015d7

File tree

6 files changed

+287
-300
lines changed

6 files changed

+287
-300
lines changed

‎ksqLight/src/App.js

Lines changed: 72 additions & 123 deletions
Original file line numberDiff line numberDiff line change
@@ -8,65 +8,18 @@ import { PermanentDrawer } from "./components/PermanentDrawer.js";
88
import { QueryPage } from "./components/QueryPage.js";
99
import { CssBaseline, ThemeProvider, createTheme, Box, Grid } from "@mui/material";
1010
import { MetricCard } from "./components/MetricCard.js";
11-
import { green, purple } from '@mui/material/colors';
12-
import { LivenessCard } from "./components/LivenessCard.js";
1311
import { Welcomepage } from "./components/Welcomepage.js";
1412

15-
const theme = createTheme({
16-
palette: {
17-
// primary: {
18-
// main: purple[500],
19-
// },
20-
secondary: {
21-
main: green[500],
22-
},
23-
background: {
24-
default: "rgb(249, 250, 251)",
25-
},
26-
mode: 'light',
27-
},
28-
});
29-
13+
// http://localhost:9090
3014
function App() {
3115
const [fetchMetrics, setFetchMetrics] = useState(true);
3216
const [showSettings, setShowSettings] = useState(false);
33-
// const [metricsState, setMetricsState] = useState({
34-
// prometheusURL: "http://localhost:9090/",
35-
// ksqlDBURL: "",
36-
// duration: {
37-
// days: 0,
38-
// hours: 0,
39-
// minutes: 10
40-
// },
41-
// refreshRate: 2
42-
// });
43-
44-
// return (
45-
// <BrowserRouter>
46-
// <CssBaseline/>
47-
// <Header
48-
// fetchMetrics={fetchMetrics}
49-
// setFetchMetrics={setFetchMetrics}
50-
// showSettings={showSettings}
51-
// setShowSettings={setShowSettings}/>
52-
// <SettingsSidebar
53-
// showSettings={showSettings}
54-
// setShowSettings={setShowSettings}
55-
// metricsState={metricsState}
56-
// setMetricsState={setMetricsState}>
57-
// </SettingsSidebar>
58-
// <PermanentDrawer></PermanentDrawer>
59-
// <Routes>
60-
// <Route path="/" element={<Homepage metricsState={metricsState}/>}/>
61-
// <Route path="/queryPage" element={<QueryPage/>}/>
62-
// </Routes>
63-
// </BrowserRouter>
64-
6517
const [showQueries, setShowQueries] = useState(true);
6618
const [showMessages, setShowMessages] = useState(false);
6719
const [showErrors, setShowErrors] = useState(false);
20+
const [mode, setMode] = useState('light');
6821
const [metricsState, setMetricsState] = useState({
69-
prometheusURL: "http://localhost:9090/",
22+
prometheusURL: null,
7023
ksqlDBURL: "",
7124
duration: {
7225
days: 0,
@@ -76,87 +29,83 @@ function App() {
7629
refreshRate: 5
7730
});
7831

32+
const theme = createTheme({
33+
palette: {
34+
mainPage: {
35+
main: "#f3e5f5",
36+
},
37+
mode,
38+
...(mode === 'light' ?
39+
{
40+
background: {
41+
default: "#f9fafb",
42+
},
43+
chartColor: {
44+
background: "#FFFFFF"
45+
},
46+
cardColor: {
47+
background1: "rgb(209, 233, 252)",
48+
background2: "rgb(208, 242, 255)",
49+
background3: "rgb(255, 247, 205)",
50+
background4: "rgb(255, 231, 217)",
51+
}
52+
}
53+
:
54+
{
7955

56+
})
57+
},
58+
});
59+
60+
const serverCards = ["livenessIndicator", "bytesConsumed", "errorRate", "errorQueries"].map((el, i) => {
61+
return (
62+
<Grid item xs={3} md={3} lg={3}>
63+
<MetricCard key={i} type={el} index={i} />
64+
</Grid>
65+
)
66+
});
67+
console.log(metricsState);
8068
return (
81-
// <Welcomepage></Welcomepage>
82-
<BrowserRouter>
69+
!metricsState.prometheusURL ?
8370
<ThemeProvider theme={theme}>
84-
<CssBaseline />
85-
<Box sx={{
86-
display: 'flex',
87-
flexDirection: 'column'
88-
}}>
89-
90-
<Header fetchMetrics={fetchMetrics} setFetchMetrics={setFetchMetrics} showSettings={showSettings} setShowSettings={setShowSettings} />
91-
<SettingsSidebar showSettings={showSettings} setShowSettings={setShowSettings} metricsState={metricsState} setMetricsState={setMetricsState} />
92-
{/* <Box sx={{ display: 'flex' }}>
93-
<PermanentDrawer
94-
setShowQueries={setShowQueries}
95-
setShowMessages={setShowMessages}
96-
setShowErrors={setShowErrors}
97-
/>
98-
<Box sx={{
99-
display: 'flex',
100-
flexDirection: 'column'
101-
}}>
102-
<Grid container columnSpacing={9} rowSpacing={2} sx={{ display: 'flex', flexDirection: "row", p: 3, justifyContents: "center", alignItems: "center" }}>
103-
<Grid item xs={3} md={3} lg={3}>
104-
<MetricCard type="livenessIndicator" index={0} />
105-
</Grid>
106-
<Grid item xs={3} md={3} lg={3}>
107-
<MetricCard type="bytesConsumedTotal" index={1} />
108-
</Grid>
109-
<Grid item xs={3} md={3} lg={3} >
110-
<MetricCard type="errorRate" index={2} />
111-
</Grid>
112-
<Grid item xs={3} md={3} lg={3} >
113-
<MetricCard type="errorQueries" index={3} />
114-
</Grid>
71+
<Welcomepage setMetricsState={setMetricsState} metricsState={metricsState}></Welcomepage>
72+
</ThemeProvider>
73+
:
74+
<BrowserRouter>
75+
<ThemeProvider theme={theme}>
76+
<CssBaseline />
77+
<Box sx={{
78+
display: 'flex',
79+
flexDirection: 'column'
80+
}}>
81+
<Header fetchMetrics={fetchMetrics} setFetchMetrics={setFetchMetrics} showSettings={showSettings} setShowSettings={setShowSettings} mode={mode} setMode={setMode} />
82+
<SettingsSidebar showSettings={showSettings} setShowSettings={setShowSettings} metricsState={metricsState} setMetricsState={setMetricsState} />
83+
<Grid container spacing={1}>
84+
<Grid item lg={2} md={2} sm={2}>
85+
<PermanentDrawer
86+
setShowQueries={setShowQueries}
87+
setShowMessages={setShowMessages}
88+
setShowErrors={setShowErrors}
89+
/>
11590
</Grid>
116-
<Routes>
117-
<Route path="/" element={<Homepage showQueries={showQueries} showMessages={showMessages} showErrors={showErrors} />} />
118-
<Route path="/queryPage" element={<QueryPage />} />
119-
</Routes>
120-
</Box>
121-
</Box> */}
122-
<Grid container spacing={1}>
123-
<Grid item lg={2} md={2} sm={2}>
124-
<PermanentDrawer
125-
setShowQueries={setShowQueries}
126-
setShowMessages={setShowMessages}
127-
setShowErrors={setShowErrors}
128-
/>
129-
</Grid>
130-
131-
<Grid item lg={10} md={10} sm={10} sx={{
132-
display: 'flex',
133-
flexDirection: 'column'
134-
}}>
135-
<Grid container columnSpacing={9} rowSpacing={2} sx={{ p: 3, justifyContents: "center", alignItems: "center" }}>
136-
<Grid item xs={3} md={3} lg={3}>
137-
<MetricCard type="livenessIndicator" index={0} />
138-
</Grid>
139-
<Grid item xs={3} md={3} lg={3}>
140-
<MetricCard type="bytesConsumed" index={1} />
141-
</Grid>
142-
<Grid item xs={3} md={3} lg={3} >
143-
<MetricCard type="errorRate" index={2} />
91+
<Grid item lg={10} md={10} sm={10} sx={{
92+
display: 'flex',
93+
flexDirection: 'column'
94+
}}>
95+
<Grid container columnSpacing={10} sx={{ p: 3, justifyContents: "center", alignItems: "center" }}>
96+
{serverCards}
14497
</Grid>
145-
<Grid item xs={3} md={3} lg={3} >
146-
<MetricCard type="errorQueries" index={3} />
98+
<Grid container justifyContent="center" alignItems="center" sx={{ pr: "2em" }}>
99+
{/* <Routes>
100+
<Route path="/" element={<Homepage showQueries={showQueries} showMessages={showMessages} showErrors={showErrors} metricsState={metricsState} />} />
101+
<Route path="/queryPage" element={<QueryPage />} />
102+
</Routes> */}
147103
</Grid>
148104
</Grid>
149-
<Grid container justifyContent="center" alignItems="center" sx={{ pr: "2em" }}>
150-
<Routes>
151-
<Route path="/" element={<Homepage showQueries={showQueries} showMessages={showMessages} showErrors={showErrors} metricsState={metricsState} />} />
152-
<Route path="/queryPage" element={<QueryPage />} />
153-
</Routes>
154-
</Grid>
155105
</Grid>
156-
</Grid>
157-
</Box>
158-
</ThemeProvider>
159-
</BrowserRouter >
106+
</Box>
107+
</ThemeProvider>
108+
</BrowserRouter >
160109
);
161110
}
162111

‎ksqLight/src/components/Header.js

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,12 @@ import SyncIcon from '@mui/icons-material/Sync';
55
import ArticleIcon from '@mui/icons-material/Article';
66
import { useNavigate } from "react-router-dom";
77

8-
export const Header = ({ fetchMetrics, setFetchMetrics, showSettings, setShowSettings }) => {
8+
export const Header = ({ fetchMetrics, setFetchMetrics, showSettings, setShowSettings, mode, setMode }) => {
99
const navigate = useNavigate();
1010
const ksqLightTheme = createTheme({
1111
typography: {
12-
fontFamily: 'Raleway'
12+
fontFamily: 'Raleway',
13+
fontSize: 9,
1314
}
1415
})
1516
const navGithub = () => {
@@ -21,16 +22,16 @@ export const Header = ({ fetchMetrics, setFetchMetrics, showSettings, setShowSet
2122
}
2223

2324
return (
24-
<AppBar position="sticky" sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }}>
25+
<AppBar className="diagonal-hero-bg" position="sticky" sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }}>
2526
<Toolbar>
26-
<Typography onClick={navHome} theme={ksqLightTheme} variant="h3" sx={{ flexGrow: 1 }}>ksqLight</Typography>
27-
<IconButton aria-label="Documentation" onClick={() => { navGithub() }}>
27+
<Typography onClick={navHome} theme={ksqLightTheme} variant="h3" sx={{ flexGrow: 1 }} color="mainPage">ksqLight</Typography>
28+
<IconButton aria-label="Documentation" onClick={() => { navGithub() }} color="mainPage">
2829
<ArticleIcon />
2930
</IconButton>
30-
<IconButton aria-label="Refresh">
31+
<IconButton aria-label="Refresh" color="mainPage" onClick={() => mode === 'light' ? setMode('dark') : setMode('light')}>
3132
<SyncIcon />
3233
</IconButton>
33-
<IconButton aria-label="Hide" sx={{ pr: 0 }} onClick={() => setShowSettings(!showSettings)}>
34+
<IconButton aria-label="Hide" sx={{ pr: 0 }} onClick={() => setShowSettings(!showSettings)} color="mainPage">
3435
<SettingsIcon />
3536
</IconButton>
3637
</Toolbar>

0 commit comments

Comments
 (0)