Skip to content

Commit c72b307

Browse files
gridheadgridhead
committed
Include dynamic routing and state store for service
1 parent 3189709 commit c72b307

File tree

7 files changed

+372
-58
lines changed

7 files changed

+372
-58
lines changed

‎visual/src/comp/head.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,15 @@ export default function ObtainHeader() {
77
switch (location.pathname) {
88
case "/":
99
return "Resources";
10-
case "/task":
10+
case "/page_task":
1111
return "Activities";
12-
case "/proc":
12+
case "/page_proc":
1313
return "Processing";
14-
case "/memo":
14+
case "/page_memo":
1515
return "Performance";
16-
case "/ntwk":
16+
case "/page_ntwk":
1717
return "Connections";
18-
case "/disk":
18+
case "/page_disk":
1919
return "Partitions";
2020
default:
2121
return "Resources";

‎visual/src/core.tsx‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1+
import { useEffect } from "react";
12
import { BrowserRouter, Route, Routes } from "react-router";
23

4+
import packInfo from "../package.json";
35
import Disk from "./path/disk.tsx";
46
import Memo from "./path/memo.tsx";
57
import MainMenu from "./path/menu.tsx";
@@ -9,21 +11,24 @@ import Proc from "./path/proc.tsx";
911
import Task from "./path/task.tsx";
1012

1113
export default function Core() {
14+
useEffect(() => {
15+
document.title = `Observer v${packInfo.version}`;
16+
}, []);
17+
1218
return (
1319
<>
1420
<BrowserRouter>
1521
<Routes>
1622
<Route element={<MainMenu />} path="/">
1723
<Route element={<Over />} index />
18-
<Route element={<Task />} path="/task" />
19-
<Route element={<Proc />} path="/proc" />
20-
<Route element={<Memo />} path="/memo" />
21-
<Route element={<Ntwk />} path="/ntwk" />
22-
<Route element={<Disk />} path="/disk" />
24+
<Route element={<Task />} path="/page_task" />
25+
<Route element={<Proc />} path="/page_proc" />
26+
<Route element={<Memo />} path="/page_memo" />
27+
<Route element={<Ntwk />} path="/page_ntwk" />
28+
<Route element={<Disk />} path="/page_disk" />
2329
</Route>
2430
</Routes>
2531
</BrowserRouter>
26-
{/*<MainMenu />*/}
2732
</>
2833
);
2934
}

‎visual/src/cssc/core.css‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
/*
2+
SysMon
3+
Copyright (C) 2024 Akashdeep Dhar
4+
5+
This program is free software: you can redistribute it and/or modify it under
6+
the terms of the GNU Affero General Public License as published by the Free
7+
Software Foundation, either version 3 of the License, or (at your option) any
8+
later version.
9+
10+
This program is distributed in the hope that it will be useful, but WITHOUT
11+
ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
12+
FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
13+
details.
14+
15+
You should have received a copy of the GNU Affero General Public License along
16+
with this program. If not, see <https://www.gnu.org/licenses/>.
17+
18+
Any Red Hat trademarks that are incorporated in the codebase or documentation
19+
are not subject to the GNU Affero General Public License and may only be used
20+
or replicated with the express permission of Red Hat, Inc.
21+
*/
22+
23+
@font-face {
24+
font-family: "Inter";
25+
font-weight: 400;
26+
font-style: normal;
27+
src: url("../font/sans_rlar.ttf");
28+
}
29+
30+
@font-face {
31+
font-family: "Inter";
32+
font-weight: 400;
33+
font-style: italic;
34+
src: url("../font/sans_rlit.ttf");
35+
}
36+
37+
@font-face {
38+
font-family: "Inter";
39+
font-weight: 700;
40+
font-style: normal;
41+
src: url("../font/sans_bold.ttf");
42+
}
43+
44+
@font-face {
45+
font-family: "Inter";
46+
font-weight: 700;
47+
font-style: italic;
48+
src: url("../font/sans_bdit.ttf");
49+
}
50+
51+
@font-face {
52+
font-family: "JetBrains Mono";
53+
font-weight: 400;
54+
font-style: normal;
55+
src: url("../font/mono_rlar.ttf");
56+
}
57+
58+
@font-face {
59+
font-family: "JetBrains Mono";
60+
font-weight: 400;
61+
font-style: italic;
62+
src: url("../font/mono_rlit.ttf");
63+
}
64+
65+
@font-face {
66+
font-family: "JetBrains Mono";
67+
font-weight: 700;
68+
font-style: normal;
69+
src: url("../font/mono_bold.ttf");
70+
}
71+
72+
@font-face {
73+
font-family: "JetBrains Mono";
74+
font-weight: 700;
75+
font-style: italic;
76+
src: url("../font/mono_bdit.ttf");
77+
}
78+
79+
@font-face {
80+
font-family: "DIN 1451 Std Engschrift";
81+
font-weight: 700;
82+
font-style: normal;
83+
src: url("../font/dine_rlar.otf");
84+
}
85+
86+
@font-face {
87+
font-family: "DIN 1451 Std Mittelschrift";
88+
font-weight: 700;
89+
font-style: normal;
90+
src: url("../font/dinm_rlar.otf");
91+
}
92+
93+
.headelem {
94+
font-family: "DIN 1451 Std Mittelschrift", sans-serif;
95+
}
96+
97+
.dataelem {
98+
font-family: "DIN 1451 Std Engschrift", sans-serif;
99+
}
100+
101+
body {
102+
font-family: "Inter", sans-serif !important;
103+
}
104+
105+
.sidelink {
106+
all: unset;
107+
}
108+
109+
.sidelink.active {
110+
display: block;
111+
background-color: rgba(224, 224, 224, 0.5);
112+
}

‎visual/src/main.tsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,16 @@
1+
import "./cssc/core.css";
2+
13
import { StrictMode } from "react";
24
import { createRoot } from "react-dom/client";
5+
import { Provider } from "react-redux";
36

47
import Core from "./core.tsx";
8+
import { data } from "./util/data.tsx";
59

610
createRoot(document.getElementById("root")!).render(
7-
<StrictMode>
8-
<Core />
9-
</StrictMode>
11+
<Provider store={data}>
12+
<StrictMode>
13+
<Core />
14+
</StrictMode>
15+
</Provider>
1016
);

‎visual/src/path/menu.tsx‎

Lines changed: 24 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -25,14 +25,15 @@ import ListItemText from "@mui/material/ListItemText";
2525
import Toolbar from "@mui/material/Toolbar";
2626
import Typography from "@mui/material/Typography";
2727
import * as React from "react";
28+
import { useSelector } from "react-redux";
2829
import { NavLink, Outlet } from "react-router";
2930

30-
import BasicCard from "../comp/card.tsx";
3131
import ObtainHeader from "../comp/head.tsx";
3232

3333
const drawerWidth = 240;
3434

3535
export default function ResponsiveDrawer() {
36+
const vibe = useSelector((area) => area.area.vibe);
3637
const [mobileOpen, setMobileOpen] = React.useState(false);
3738
const [isClosing, setIsClosing] = React.useState(false);
3839

@@ -53,12 +54,12 @@ export default function ResponsiveDrawer() {
5354

5455
const drawer = (
5556
<div>
56-
<Toolbar variant="dense" sx={{ backgroundColor: "#008080" }}>
57-
Observer
57+
<Toolbar variant="dense" sx={{ color: vibe }}>
58+
<Typography fontWeight="bold">Observer</Typography>
5859
</Toolbar>
5960
<Divider />
6061
<List>
61-
<NavLink to="/">
62+
<NavLink to="/" className="sidelink">
6263
<ListItem disablePadding>
6364
<ListItemButton>
6465
<ListItemIcon>
@@ -68,7 +69,7 @@ export default function ResponsiveDrawer() {
6869
</ListItemButton>
6970
</ListItem>
7071
</NavLink>
71-
<NavLink to="/task">
72+
<NavLink to="/page_task" className="sidelink">
7273
<ListItem disablePadding>
7374
<ListItemButton>
7475
<ListItemIcon>
@@ -78,7 +79,7 @@ export default function ResponsiveDrawer() {
7879
</ListItemButton>
7980
</ListItem>
8081
</NavLink>
81-
<NavLink to="/proc">
82+
<NavLink to="/page_proc" className="sidelink">
8283
<ListItem disablePadding>
8384
<ListItemButton>
8485
<ListItemIcon>
@@ -88,7 +89,7 @@ export default function ResponsiveDrawer() {
8889
</ListItemButton>
8990
</ListItem>
9091
</NavLink>
91-
<NavLink to="/memo">
92+
<NavLink to="/page_memo" className="sidelink">
9293
<ListItem disablePadding>
9394
<ListItemButton>
9495
<ListItemIcon>
@@ -98,7 +99,7 @@ export default function ResponsiveDrawer() {
9899
</ListItemButton>
99100
</ListItem>
100101
</NavLink>
101-
<NavLink to="/ntwk">
102+
<NavLink to="/page_ntwk" className="sidelink">
102103
<ListItem disablePadding>
103104
<ListItemButton>
104105
<ListItemIcon>
@@ -108,7 +109,7 @@ export default function ResponsiveDrawer() {
108109
</ListItemButton>
109110
</ListItem>
110111
</NavLink>
111-
<NavLink to="/disk">
112+
<NavLink to="/page_disk" className="sidelink">
112113
<ListItem disablePadding>
113114
<ListItemButton>
114115
<ListItemIcon>
@@ -165,8 +166,9 @@ export default function ResponsiveDrawer() {
165166
sx={{
166167
width: { sm: `calc(100% - ${drawerWidth}px)` },
167168
ml: { sm: `${drawerWidth}px` },
168-
backgroundColor: "#008080",
169+
color: { vibe },
169170
}}
171+
color="default"
170172
>
171173
<Toolbar variant="dense">
172174
<IconButton
@@ -178,7 +180,9 @@ export default function ResponsiveDrawer() {
178180
>
179181
<MenuIcon />
180182
</IconButton>
181-
<ObtainHeader />
183+
<Typography className="headelem">
184+
<ObtainHeader />
185+
</Typography>
182186
</Toolbar>
183187
</AppBar>
184188
<Box component="nav" sx={{ width: { sm: drawerWidth }, flexShrink: { sm: 0 } }} aria-label="mailbox folders">
@@ -211,41 +215,17 @@ export default function ResponsiveDrawer() {
211215
{drawer}
212216
</Drawer>
213217
</Box>
214-
<Box component="main" sx={{ flexGrow: 1, p: 3, width: { sm: `calc(100% - ${drawerWidth}px)` } }}>
218+
<Box
219+
component="main"
220+
sx={{
221+
flexGrow: 1,
222+
p: 3,
223+
width: { sm: `calc(100% - ${drawerWidth}px)` },
224+
backgroundColor: "rgba(224, 224, 224, 0.5)",
225+
}}
226+
>
215227
<Toolbar variant="dense" />
216228
<Outlet />
217-
<Typography sx={{ marginBottom: 2 }}>
218-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
219-
magna aliqua. Rhoncus dolor purus non enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
220-
imperdiet. Semper risus in hendrerit gravida rutrum quisque non tellus. Convallis convallis tellus id interdum
221-
velit laoreet id donec ultrices. Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit
222-
adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra nibh cras. Metus vulputate eu
223-
scelerisque felis imperdiet proin fermentum leo. Mauris commodo quis imperdiet massa tincidunt. Cras tincidunt
224-
lobortis feugiat vivamus at augue. At augue eget arcu dictum varius duis at consectetur lorem. Velit sed
225-
ullamcorper morbi tincidunt. Lorem donec massa sapien faucibus et molestie ac.
226-
</Typography>
227-
<Typography sx={{ marginBottom: 2 }}>
228-
Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper eget nulla facilisi etiam
229-
dignissim diam. Pulvinar elementum integer enim neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus
230-
sed viverra tellus. Purus sit amet volutpat consequat mauris. Elementum eu facilisis sed odio morbi. Euismod
231-
lacinia at quis risus sed vulputate odio. Morbi tincidunt ornare massa eget egestas purus viverra accumsan in.
232-
In hendrerit gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem et tortor. Habitant
233-
morbi tristique senectus et. Adipiscing elit duis tristique sollicitudin nibh sit. Ornare aenean euismod
234-
elementum nisi quis eleifend. Commodo viverra maecenas accumsan lacus vel facilisis. Nulla posuere
235-
sollicitudin aliquam ultrices sagittis orci a.
236-
</Typography>
237-
<div
238-
style={{
239-
display: "flex",
240-
flexWrap: "wrap",
241-
gap: "1rem",
242-
justifyContent: "space-evenly",
243-
alignItems: "center",
244-
}}
245-
>
246-
<BasicCard />
247-
<BasicCard />
248-
</div>
249229
</Box>
250230
</Box>
251231
);

‎visual/src/util/data.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { configureStore } from "@reduxjs/toolkit";
2+
3+
import makeunitReducer from "./part.tsx";
4+
5+
export const data = configureStore({
6+
reducer: {
7+
area: makeunitReducer,
8+
},
9+
});

0 commit comments

Comments
 (0)