Skip to content

Commit 2e4d15a

Browse files
gridheadgridhead
committed
Add core components and proxy forwarding for performance
Signed-off-by: Akashdeep Dhar <akashdeep.dhar@gmail.com>
1 parent adcb675 commit 2e4d15a

File tree

3 files changed

+297
-5
lines changed

3 files changed

+297
-5
lines changed

‎visual/src/path/memo.tsx‎

Lines changed: 277 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,283 @@
1-
import Typography from "@mui/material/Typography";
1+
import { Contrast, Memory, PieChart, TableChart, Tag } from "@mui/icons-material";
2+
import { CardHeader, Grid2 as Grid } from "@mui/material";
3+
import Avatar from "@mui/material/Avatar";
4+
import Card from "@mui/material/Card";
5+
import CardContent from "@mui/material/CardContent";
6+
import Divider from "@mui/material/Divider";
7+
import IconButton from "@mui/material/IconButton";
8+
import List from "@mui/material/List";
9+
import ListItem from "@mui/material/ListItem";
10+
import ListItemAvatar from "@mui/material/ListItemAvatar";
11+
import ListItemText from "@mui/material/ListItemText";
12+
import { useCallback, useEffect } from "react";
13+
import { useDispatch, useSelector } from "react-redux";
14+
import { Area, AreaChart, CartesianGrid, Legend, ResponsiveContainer, XAxis, YAxis } from "recharts";
15+
import { Tooltip as RCTooltip } from "recharts";
216

3-
import ObtainHeader from "../comp/head.tsx";
17+
import { EaseSize } from "../util/conv.tsx";
18+
import { makeMemoOverflow, makeMemoPhysical, makeMemoRcrd } from "../util/part.tsx";
419

520
export default function Memo() {
21+
const dispatch = useDispatch();
22+
const freq = useSelector((area) => area.area.freq);
23+
const memo = useSelector((area) => area.area.memo);
24+
const vibe = useSelector((area) => area.area.vibe);
25+
26+
const obtain_data = useCallback(async () => {
27+
const intervalPhysical = fetch("/memo/physical", { method: "GET", credentials: "include" }).then(
28+
async (response) => {
29+
if (response.status === 200) {
30+
return await response.json();
31+
}
32+
}
33+
);
34+
35+
const intervalOverflow = fetch("/memo/overflow", { method: "GET", credentials: "include" }).then(
36+
async (response) => {
37+
if (response.status === 200) {
38+
return await response.json();
39+
}
40+
}
41+
);
42+
43+
const [dataPhysical, dataOverflow] = await Promise.all([intervalPhysical, intervalOverflow]);
44+
dispatch(makeMemoPhysical(dataPhysical));
45+
dispatch(makeMemoOverflow(dataOverflow));
46+
dispatch(makeMemoRcrd());
47+
}, [dispatch]);
48+
49+
useEffect(() => {
50+
const interval = setInterval(obtain_data, freq);
51+
return () => {
52+
clearInterval(interval);
53+
};
54+
}, [obtain_data, freq]);
55+
656
return (
7-
<Typography sx={{ marginBottom: 2 }} variant="h4">
8-
<ObtainHeader />
9-
</Typography>
57+
<>
58+
<div>
59+
<Grid container spacing={2}>
60+
<Grid container size={{ xs: 12, md: 6, lg: 6 }}>
61+
<Card sx={{ width: "100%", marginTop: 0, padding: 0 }}>
62+
<CardHeader
63+
avatar={
64+
<Avatar sx={{ bgcolor: vibe }}>
65+
<PieChart />
66+
</Avatar>
67+
}
68+
action={
69+
<IconButton disabled={true}>
70+
<Avatar sx={{ bgcolor: vibe }}>
71+
<Tag />
72+
</Avatar>
73+
</IconButton>
74+
}
75+
title="Memory"
76+
subheader="Physical"
77+
style={{ padding: "6px 10px 6px 10px" }}
78+
/>
79+
<Divider />
80+
<CardContent style={{ padding: "6px 10px 6px 10px" }}>
81+
<List sx={{ paddingTop: "0px", paddingBottom: "0px" }}>
82+
<ListItem disableGutters={true} disablePadding={true} dense={true}>
83+
<ListItemAvatar>
84+
<Avatar sx={{ bgcolor: "rgba(128, 128, 128, 0.5)", color: vibe }}>
85+
<Memory />
86+
</Avatar>
87+
</ListItemAvatar>
88+
<ListItemText primary={EaseSize(memo.physical.absolute.full)} secondary="Total"></ListItemText>
89+
<IconButton edge="end" disabled={true}>
90+
<span className="dataelem">100.0%</span>
91+
</IconButton>
92+
</ListItem>
93+
<ListItem disableGutters={true} disablePadding={true} dense={true}>
94+
<ListItemAvatar>
95+
<Avatar sx={{ bgcolor: "rgba(128, 128, 128, 0.5)", color: vibe }}>
96+
<Memory />
97+
</Avatar>
98+
</ListItemAvatar>
99+
<ListItemText primary={EaseSize(memo.physical.absolute.used)} secondary="Used"></ListItemText>
100+
<IconButton edge="end" disabled={true}>
101+
<span className="dataelem">{memo.physical.relative.toFixed(1)}%</span>
102+
</IconButton>
103+
</ListItem>
104+
<ListItem disableGutters={true} disablePadding={true} dense={true}>
105+
<ListItemAvatar>
106+
<Avatar sx={{ bgcolor: "rgba(128, 128, 128, 0.5)", color: vibe }}>
107+
<Memory />
108+
</Avatar>
109+
</ListItemAvatar>
110+
<ListItemText primary={EaseSize(memo.physical.absolute.avbl)} secondary="Available"></ListItemText>
111+
<IconButton edge="end" disabled={true}>
112+
<span className="dataelem">{(100 - memo.physical.relative).toFixed(1)}%</span>
113+
</IconButton>
114+
</ListItem>
115+
</List>
116+
</CardContent>
117+
</Card>
118+
</Grid>
119+
120+
<Grid container size={{ xs: 12, md: 6, lg: 6 }}>
121+
<Card sx={{ width: "100%", marginTop: 0, padding: 0 }}>
122+
<CardHeader
123+
avatar={
124+
<Avatar sx={{ bgcolor: vibe }}>
125+
<PieChart />
126+
</Avatar>
127+
}
128+
action={
129+
<IconButton disabled={true}>
130+
<Avatar sx={{ bgcolor: vibe }}>
131+
<Tag />
132+
</Avatar>
133+
</IconButton>
134+
}
135+
title="Memory"
136+
subheader="Overflow"
137+
style={{ padding: "6px 10px 6px 10px" }}
138+
/>
139+
<Divider />
140+
<CardContent style={{ padding: "6px 10px 6px 10px" }}>
141+
<List sx={{ paddingTop: "0px", paddingBottom: "0px" }}>
142+
<ListItem disableGutters={true} disablePadding={true} dense={true}>
143+
<ListItemAvatar>
144+
<Avatar sx={{ bgcolor: "rgba(128, 128, 128, 0.5)", color: vibe }}>
145+
<Memory />
146+
</Avatar>
147+
</ListItemAvatar>
148+
<ListItemText primary={EaseSize(memo.overflow.absolute.full)} secondary="Total"></ListItemText>
149+
<IconButton edge="end" disabled={true}>
150+
<span className="dataelem">100.0%</span>
151+
</IconButton>
152+
</ListItem>
153+
<ListItem disableGutters={true} disablePadding={true} dense={true}>
154+
<ListItemAvatar>
155+
<Avatar sx={{ bgcolor: "rgba(128, 128, 128, 0.5)", color: vibe }}>
156+
<Memory />
157+
</Avatar>
158+
</ListItemAvatar>
159+
<ListItemText primary={EaseSize(memo.overflow.absolute.used)} secondary="Used"></ListItemText>
160+
<IconButton edge="end" disabled={true}>
161+
<span className="dataelem">{memo.overflow.relative.toFixed(1)}%</span>
162+
</IconButton>
163+
</ListItem>
164+
<ListItem disableGutters={true} disablePadding={true} dense={true}>
165+
<ListItemAvatar>
166+
<Avatar sx={{ bgcolor: "rgba(128, 128, 128, 0.5)", color: vibe }}>
167+
<Memory />
168+
</Avatar>
169+
</ListItemAvatar>
170+
<ListItemText primary={EaseSize(memo.overflow.absolute.avbl)} secondary="Available"></ListItemText>
171+
<IconButton edge="end" disabled={true}>
172+
<span className="dataelem">{(100 - memo.overflow.relative).toFixed(1)}%</span>
173+
</IconButton>
174+
</ListItem>
175+
</List>
176+
</CardContent>
177+
</Card>
178+
</Grid>
179+
180+
<Grid size={{ xs: 12, md: 6, lg: 6 }}>
181+
<Card sx={{ width: "100%", marginTop: 0, padding: 0 }}>
182+
<CardHeader
183+
avatar={
184+
<Avatar sx={{ bgcolor: vibe }}>
185+
<Contrast />
186+
</Avatar>
187+
}
188+
action={
189+
<IconButton disabled={true}>
190+
<Avatar sx={{ bgcolor: vibe }}>
191+
<TableChart />
192+
</Avatar>
193+
</IconButton>
194+
}
195+
title="Memory"
196+
subheader="Physical"
197+
style={{ padding: "6px 10px 6px 10px" }}
198+
/>
199+
<Divider />
200+
<CardContent style={{ padding: "6px 10px 6px 10px" }}>
201+
<ResponsiveContainer width={"100%"} height={400}>
202+
<AreaChart
203+
data={memo.rcrd.physical}
204+
width={800}
205+
height={600}
206+
margin={{ top: 0, right: 0, left: 0, bottom: 0 }}
207+
>
208+
<CartesianGrid stroke={vibe} strokeDasharray="5 5" />
209+
<XAxis tick={{ fontSize: 10 }} tickCount={20} height={20} dataKey="time" />
210+
<YAxis
211+
tick={{ fontSize: 10 }}
212+
tickCount={20}
213+
width={34}
214+
domain={[0, memo.physical.absolute.full]}
215+
hide={true}
216+
/>
217+
<RCTooltip
218+
formatter={(data) => `${EaseSize(data)}`}
219+
contentStyle={{ fontSize: "10px", padding: "6px" }}
220+
itemStyle={{ padding: "0" }}
221+
/>
222+
<Legend />
223+
<Area type="monotone" dataKey="size" stroke={vibe} fill={vibe} legendType="none" yAxisId={0} />
224+
</AreaChart>
225+
</ResponsiveContainer>
226+
</CardContent>
227+
</Card>
228+
</Grid>
229+
230+
<Grid size={{ xs: 12, md: 6, lg: 6 }}>
231+
<Card sx={{ width: "100%", marginTop: 0, padding: 0 }}>
232+
<CardHeader
233+
avatar={
234+
<Avatar sx={{ bgcolor: vibe }}>
235+
<Contrast />
236+
</Avatar>
237+
}
238+
action={
239+
<IconButton disabled={true}>
240+
<Avatar sx={{ bgcolor: vibe }}>
241+
<TableChart />
242+
</Avatar>
243+
</IconButton>
244+
}
245+
title="Memory"
246+
subheader="Overflow"
247+
style={{ padding: "6px 10px 6px 10px" }}
248+
/>
249+
<Divider />
250+
<CardContent style={{ padding: "6px 10px 6px 10px" }}>
251+
<ResponsiveContainer width={"100%"} height={400}>
252+
<AreaChart
253+
data={memo.rcrd.overflow}
254+
width={800}
255+
height={600}
256+
margin={{ top: 0, right: 0, left: 0, bottom: 0 }}
257+
>
258+
<CartesianGrid stroke={vibe} strokeDasharray="5 5" />
259+
<XAxis tick={{ fontSize: 10 }} tickCount={20} height={20} dataKey="time" />
260+
<YAxis
261+
tick={{ fontSize: 10 }}
262+
tickCount={20}
263+
width={34}
264+
domain={[0, memo.overflow.absolute.full]}
265+
hide={true}
266+
/>
267+
<RCTooltip
268+
formatter={(data) => `${EaseSize(data)}`}
269+
contentStyle={{ fontSize: "10px", padding: "6px" }}
270+
itemStyle={{ padding: "0" }}
271+
/>
272+
<Legend />
273+
<Area type="monotone" dataKey="size" stroke={vibe} fill={vibe} legendType="none" yAxisId={0} />
274+
</AreaChart>
275+
</ResponsiveContainer>
276+
</CardContent>
277+
</Card>
278+
</Grid>
279+
</Grid>
280+
</div>
281+
</>
10282
);
11283
}

‎visual/src/util/conv.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
export function EaseSize(size: number): string {
2+
const unitList: string[] = ["B", "KiB", "MiB", "GiB", "TiB", "PiB"];
3+
let indx = 0,
4+
otpt = size;
5+
6+
if (size === 0) {
7+
return "0.00B";
8+
} else {
9+
while (otpt >= 1024 && indx < unitList.length - 1) {
10+
otpt /= 1024.0;
11+
indx++;
12+
}
13+
return `${otpt.toFixed(2)}${unitList[indx]}`;
14+
}
15+
}

‎visual/vite.config.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,11 @@ export default defineConfig({
1111
changeOrigin: true,
1212
rewrite: (path) => path.replace(/^\/proc/, "/proc"),
1313
},
14+
"/memo": {
15+
target: "http://localhost:8080",
16+
changeOrigin: true,
17+
rewrite: (path) => path.replace("/^\/memo/", "/memo"),
18+
},
1419
},
1520
},
1621
});

0 commit comments

Comments
 (0)