Skip to content

Commit 3b364ef

Browse files
javanangjavanang
committed
fixed bugs
1 parent b521651 commit 3b364ef

File tree

5 files changed

+67
-20
lines changed

5 files changed

+67
-20
lines changed

‎ksqLight/src/App.js

Lines changed: 45 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,19 @@ 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';
1112

1213
const theme = createTheme({
1314
palette: {
15+
// primary: {
16+
// main: purple[500],
17+
// },
18+
secondary: {
19+
main: green[500],
20+
},
21+
background:{
22+
default: "rgb(249, 250, 251)",
23+
},
1424
mode: 'light',
1525
},
1626
});
@@ -34,7 +44,7 @@ function App() {
3444

3545
<Header fetchMetrics={fetchMetrics} setFetchMetrics={setFetchMetrics} showSettings={showSettings} setShowSettings={setShowSettings} />
3646
<SettingsSidebar showSettings={showSettings} setShowSettings={setShowSettings}></SettingsSidebar>
37-
<Box sx={{ display: 'flex' }}>
47+
{/* <Box sx={{ display: 'flex' }}>
3848
<PermanentDrawer
3949
setShowQueries={setShowQueries}
4050
setShowMessages={setShowMessages}
@@ -63,7 +73,40 @@ function App() {
6373
<Route path="/queryPage" element={<QueryPage />} />
6474
</Routes>
6575
</Box>
66-
</Box>
76+
</Box> */}
77+
<Grid container spacing={1}>
78+
<Grid item lg={2} md={2} sm={2}>
79+
<PermanentDrawer
80+
setShowQueries={setShowQueries}
81+
setShowMessages={setShowMessages}
82+
setShowErrors={setShowErrors}
83+
/>
84+
</Grid>
85+
86+
<Grid item lg={10} md={10} sm={10} sx={{
87+
display: 'flex',
88+
flexDirection: 'column'
89+
}}>
90+
<Grid container columnSpacing={9} rowSpacing={2} sx={{ display: 'flex', flexDirection: "row", p: 3, justifyContents: "center", alignItems: "center" }}>
91+
<Grid item xs={3} md={3} lg={3}>
92+
<MetricCard type="livenessIndicator" index={0} />
93+
</Grid>
94+
<Grid item xs={3} md={3} lg={3}>
95+
<MetricCard type="bytesConsumedTotal" index={1} />
96+
</Grid>
97+
<Grid item xs={3} md={3} lg={3} >
98+
<MetricCard type="errorRate" index={2} />
99+
</Grid>
100+
<Grid item xs={3} md={3} lg={3} >
101+
<MetricCard type="errorQueries" index={3} />
102+
</Grid>
103+
</Grid>
104+
<Routes>
105+
<Route path="/" element={<Homepage showQueries={showQueries} showMessages={showMessages} showErrors={showErrors} />} />
106+
<Route path="/queryPage" element={<QueryPage />} />
107+
</Routes>
108+
</Grid>
109+
</Grid>
67110
</Box>
68111
</ThemeProvider>
69112
</BrowserRouter >

‎ksqLight/src/components/Homepage.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ export const Homepage = ({ showQueries, showMessages, showErrors }) => {
8080
</Grid>
8181
</Grid> */}
8282

83-
<Grid container spacing={0} sx={{}}>
83+
<Grid container spacing={4} sx={{}}>
8484
{showQueries &&
8585
queriesCharts.map(([query, description], index) =>
8686
<LineChart description={description} metric={query} key={index} />)

‎ksqLight/src/components/LineChart.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ export default function LineChart({ metric, description }) {
6565
data: {
6666
datasets: [{
6767
data: initialData,
68-
// data: "0", // empty at the beginning,
68+
// data: [], // empty at the beginning,
6969
borderColor: 'rgba(58, 123, 213, 1)',
7070
pointRadius: 0,
7171
hitRadius: 30,

‎ksqLight/src/components/MetricCard.js

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useEffect, useRef } from "react";
1+
import React, { useEffect, useState } from "react";
22
import {
33
ApolloClient,
44
InMemoryCache,
@@ -17,7 +17,7 @@ const client = new ApolloClient({
1717

1818
export const MetricCard = ({ type, index }) => {
1919

20-
const data = useRef([]);
20+
const [data, setData] = useState(null);
2121

2222
const metricType = ["Liveness Indicator", "Error Rate", "Error Queries", "Bytes Consumed"];
2323
const iconColor = ["rgb(6, 27, 100)", "rgb(4, 41, 122)", "rgb(122, 79, 1)", "rgb(122, 12, 46)"];
@@ -27,7 +27,7 @@ export const MetricCard = ({ type, index }) => {
2727
`linear-gradient(135deg, rgba(12, 83, 183, 0) 0%, rgba(12, 83, 183, 0.24) 100%)`,
2828
`linear-gradient(135deg, rgba(183, 129, 3, 0) 0%, rgba(183, 129, 3, 0.24) 100%)`,
2929
`linear-gradient(135deg, rgba(183, 33, 54, 0) 0%, rgba(183, 33, 54, 0.24) 100%)`];
30-
const dataToShow = [];
30+
3131

3232
const flipCard = () => {
3333
// supposed to flip liveness card here
@@ -40,26 +40,30 @@ export const MetricCard = ({ type, index }) => {
4040
client.query({
4141
query: gql`
4242
query testQuery {
43-
ksqlDBMetrics(metric: "${metric}", resolution: 2, start: ${Math.round(new Date().getTime() / 1000) - 3000}, end: ${Math.round(new Date().getTime() / 1000)}) {
43+
ksqlDBMetrics(metric: "${metric}", resolution: 2, start: ${Math.round(new Date().getTime() / 1000) - 5}, end: ${Math.round(new Date().getTime() / 1000)}) {
4444
x,
4545
y
4646
}
4747
}
4848
`
4949
})
5050
.then(res => {
51+
console.log(res);
5152
// chart.data.datasets[0].data.push(...[{x: new Date(), y: 1}]);
52-
data.current = res.data.ksqlDBMetrics.map((queryObj) => {
53-
return {
54-
x: new Date(queryObj.x * 1000),
55-
y: queryObj.y
56-
}
57-
});
53+
// setData(res.data.ksqlDBMetrics.map((queryObj) => {
54+
// return {
55+
// x: new Date(queryObj.x * 1000),
56+
// y: queryObj.y
57+
// }
58+
// }));
5859
// chart.data.datasets[0].data = data;
60+
setData(res);
5961
})
6062
.catch(error => console.log(error));
6163
}, []) //useEffect dependency here
6264

65+
66+
6367
return (
6468
<CardContent
6569
sx={{ display: 'flex', justifyContent: "center", alignItems: "center", flexDirection: "column", bgcolor: bgColor[index], boxShadow: 0, borderRadius: '16px' }}>
@@ -70,16 +74,16 @@ export const MetricCard = ({ type, index }) => {
7074
onClick={() => console.log('')} // placeholder for flipping card
7175
>
7276
{index === 0 && <MonitorHeartIcon />}
73-
{index === 1 && <ErrorIcon />}
77+
{/* {index === 1 && <ErrorIcon />}
7478
{index === 2 && <BugReportIcon />}
75-
{index === 3 && <DataThresholdingIcon />}
79+
{index === 3 && <DataThresholdingIcon />} */}
7680
</IconButton>
7781

7882
<Typography variant='h3' sx={{ textAlign: 'center', pt: '1.2rem', fontWeight: 700, lineHeight: 1.5, fontSize: '1.8rem', fontFamily: 'Public Sans', color: textColor[index] }}>
79-
{index === 0 && (data[data.length - 1] ? 'Running' : 'Down')}
80-
{index === 1 && (data[data.length - 1] ? data[data.length - 1] : 0)}
83+
{index === 0 && (data?.data?.ksqlDBMetrics[0].y ? 'Running' : 'Down')}
84+
{/* {index === 1 && (data[data.length - 1] ? data[data.length - 1] : 0)}
8185
{index === 2 && (data[data.length - 1] ? data[data.length - 1] : 0)}
82-
{index === 3 && (data[data.length - 1] ? data[data.length - 1] : 0)}
86+
{index === 3 && (data[data.length - 1] ? data[data.length - 1] : 0)} */}
8387
</Typography>
8488

8589
<Typography variant='h6' sx={{ fontWeight: 600, lineHeight: 1.5, fontSize: '0.96rem', fontFamily: 'Public Sans', opacity: 0.72, color: textColor[index] }}>

‎ksqLight/src/components/PermanentDrawer.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ export const PermanentDrawer = ({ setShowQueries, setShowMessages, setShowErrors
7676
<ThemeProvider theme={theme}>
7777
<CssBaseline />
7878
<Box sx={{
79-
width: 400,
79+
width: "100%",
8080
height: 'auto', // changed this from auto
8181
// marginBottom: "-2000px", /* any large number will do */
8282
// paddingBottom: "2000px",

0 commit comments

Comments
 (0)