47 | {datum.label}: {datum.value}
48 |
49 | );
50 |
51 | useEffect(() => {
52 | if (userId && serviceName && accountName && region && clusterName) {
53 | // Connect to WebSocket using userId and serviceName
54 | const ws = connectWebSocketToPieChart(userId, accountName, region, clusterName, serviceName, (rawData) => {
55 | const transformedData = transformData(rawData);
56 | setData(transformedData);
57 | setLoading(false);
58 | },
59 | (error) => {
60 | setError(error.message);
61 | setLoading(false);
62 | },
63 | () => {
64 | console.log('WebSocket from Pie closed');
65 | }
66 | );
67 |
68 | // Cleanup WebSocket on component unmount
69 | return () => {
70 | ws.close();
71 | };
72 | }
73 | }, [userId, accountName, region, clusterName, serviceName]);
74 |
75 | // Loading state
76 | if (loading) {
77 | return Loading...
;
78 | }
79 |
80 | // Error state
81 | if (error) {
82 | return Error: {error}
;
83 | }
84 |
85 | return (
86 |
87 |
138 | );
139 | };
140 |
141 | export default PieChart;
142 |
--------------------------------------------------------------------------------
/client/src/components/Service.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react'
2 | import TextField from '@mui/material/TextField'
3 | import Autocomplete from '@mui/material/Autocomplete'
4 | import Card from '@mui/material/Card'
5 | import CardContent from '@mui/material/CardContent'
6 | import Typography from '@mui/material/Typography'
7 | import {
8 | Button,
9 | CardActionArea,
10 | CardActions,
11 | CircularProgress,
12 | } from '@mui/material'
13 | import { useTheme } from '@emotion/react'
14 | import { useSelector, useDispatch } from 'react-redux'
15 | import { setServiceName } from '../redux/userSlice.js'
16 |
17 | /**
18 | * Service component that allows users to select a service and view its status.
19 | * @param {Object} props - Component properties.
20 | * @param {string} props.userId - The ID of the user.
21 | */
22 |
23 | const Service = ({ userId, accountName, region, clusterName }) => {
24 | const theme = useTheme()
25 | const [serviceName, setServiceNameLocal] = useState(null)
26 | const [serviceNames, setServiceNames] = useState([])
27 | const [inputValue, setInputValue] = useState('')
28 | const [serviceStatus, setServiceStatus] = useState(null)
29 | const [loading, setLoading] = useState(false)
30 | const [error, setError] = useState(null)
31 | const dispatch = useDispatch()
32 |
33 | useEffect(() => {
34 | if (userId && accountName && region && clusterName) {
35 | setLoading(true)
36 | setError(null)
37 |
38 | // Fetch the list of services for the given userId
39 | fetch(
40 | `http://localhost:3000/list/AllServices?userId=${userId}&accountName=${accountName}&clusterName=${clusterName}®ion=${region}`
41 | )
42 | .then((response) => response.json())
43 | .then((data) => {
44 | console.log('Fetching service names -->', data)
45 | if (data && data.length > 0) {
46 | setServiceNames(data)
47 | setServiceNameLocal(data[0])
48 | dispatch(setServiceName(data[0])) // Update Redux state
49 | } else {
50 | throw new Error('No services found')
51 | }
52 | setLoading(false)
53 | })
54 | .catch((error) => {
55 | console.error('Error fetching service names:', error)
56 | setError('Error fetching service names')
57 | setLoading(false)
58 | })
59 | }
60 | }, [userId])
61 |
62 | useEffect(() => {
63 | if (userId && accountName && region && clusterName && serviceName) {
64 | setLoading(true)
65 | setError(null)
66 |
67 | // change to redux later:
68 | const ws = new WebSocket(
69 | `ws://localhost:3000/getMetricData?userId=${userId}&accountName=${accountName}®ion=${region}&clusterName=${clusterName}&serviceName=${serviceName}&metricName=serviceStatus`
70 | )
71 | ws.onopen = () => {
72 | console.log('WebSocket connection opened')
73 | }
74 |
75 | ws.onmessage = (event) => {
76 | const data = JSON.parse(event.data)
77 | setServiceStatus(data[0] || 'UNKNOWN')
78 | setLoading(false)
79 | }
80 |
81 | ws.onerror = (error) => {
82 | console.error('WebSocket error:', error)
83 | setError('Error fetching service status')
84 | setLoading(false)
85 | }
86 |
87 | ws.onclose = (event) => {
88 | console.log('WebSocket connection closed:', event)
89 | }
90 |
91 | // Cleanup WebSocket on component unmount
92 | return () => {
93 | ws.close()
94 | }
95 | }
96 | }, [userId, serviceName])
97 |
98 | return (
99 |
100 |
106 | {
109 | setServiceNameLocal(newValue)
110 | dispatch(setServiceName(newValue)) // Update Redux state
111 | }}
112 | inputValue={inputValue}
113 | onInputChange={(event, newInputValue) => {
114 | setInputValue(newInputValue)
115 | }}
116 | id="controllable-states-demo"
117 | options={serviceNames}
118 | sx={{ minWidth: 300, maxWidth: 330 }}
119 | renderInput={(params) => (
120 |
131 |
132 |
133 | {loading ? (
134 |
137 | {error}
138 |
139 | ) : (
140 |
146 | Service Status: {serviceStatus || 'UNKNOWN'}
147 |
148 | )}
149 |
150 |
151 |
152 |
162 |
163 |
164 |
165 | )
166 | }
167 |
168 | export default Service
169 |
--------------------------------------------------------------------------------
/client/src/components/Sidebar.jsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from 'react';
2 | import {
3 | Box,
4 | Divider,
5 | Drawer,
6 | IconButton,
7 | List,
8 | ListItem,
9 | ListItemButton,
10 | ListItemIcon,
11 | ListItemText,
12 | Typography,
13 | useTheme,
14 | } from '@mui/material';
15 | import {
16 | ChevronLeft,
17 | ChevronRightOutlined,
18 | HomeOutlined,
19 | CalendarMonthOutlined,
20 | AdminPanelSettingsOutlined,
21 | } from '@mui/icons-material';
22 | import { useLocation, useNavigate } from 'react-router-dom';
23 | import FlexBetween from './FlexBetween';
24 | import profileImage from '../assets/profile.png';
25 | import SsidChartOutlinedIcon from '@mui/icons-material/SsidChartOutlined';
26 | import LanOutlinedIcon from '@mui/icons-material/LanOutlined';
27 | import logo from '../assets/logo.png';
28 | import { useSelector, useDispatch } from 'react-redux';
29 | import {
30 | fetchAccounts,
31 | selectAccount,
32 | fetchSubAccountDetails,
33 | } from '../redux/userSlice';
34 | import AccountsSection from './accSection';
35 |
36 | // Sidebar component
37 | const Sidebar = ({
38 | isNonMobile,
39 | drawerWidth,
40 | isSidebarOpen,
41 | setIsSidebarOpen,
42 | }) => {
43 | // grap the path that we currently at
44 | const { pathname } = useLocation();
45 | // state of currently page or track of which page is active right now
46 | const [active, setActive] = useState('');
47 | const navigate = useNavigate();
48 | // from theme color
49 | const theme = useTheme();
50 | const user = useSelector((state) => state.user);
51 | console.log('user login -->', user);
52 | const dispatch = useDispatch();
53 | const userId = useSelector((state) => state.user.userId);
54 |
55 | // everytime path name has changed , set the active to the current page
56 | useEffect(() => {
57 | // set to currect url and determain which page we are on
58 | setActive(pathname.substring(1));
59 | }, [pathname]);
60 |
61 | // Navigation items
62 | const navItems = [
63 | {
64 | text: 'Dashboard',
65 | icon: {`Service: ${
101 | serviceName !== null
102 | ? `'${serviceName}'`
103 | : 'Please choose your service name'
104 | }`}
105 | 106 |
-
137 | {navItems.map(({ text, icon }) => {
138 | const lowerCaseText = text.toLowerCase().replace(' ', '');
139 | return (
140 |
-
102 | {rootAccounts.map((account) => (
103 |
-
133 | {subAccounts.map((account) => (
134 |
6 |
9 | );
10 | };
11 |
12 | export default Home;
13 |
--------------------------------------------------------------------------------
/client/src/components/info.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const Info = () => {
4 | return (
5 | Welcome to DeClustor
7 |This is the home page.
8 |
6 |
9 | );
10 | };
11 |
12 | export default Info;
13 |
--------------------------------------------------------------------------------
/client/src/components/login.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const Login = () => {
4 | return Info Component
7 |This is the info page.
8 |Hello World!
; 5 | }; 6 | 7 | export default Login; 8 | -------------------------------------------------------------------------------- /client/src/components/mockStore.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from '@testing-library/react'; 3 | import { BrowserRouter as Router } from 'react-router-dom'; 4 | import { Provider } from 'react-redux'; 5 | import configureStore from 'redux-mock-store'; // Import the mock store 6 | import { createStore } from 'redux'; 7 | import rootReducer from '../redux/rootReducer'; // Adjust the path 8 | 9 | const mockStore = configureStore([]); 10 | 11 | export const renderWithRouterAndRedux = ( 12 | ui, 13 | { route = '/', initialState = {} } = {} 14 | ) => { 15 | window.history.pushState({}, 'Test page', route); 16 | 17 | const store = mockStore(initialState); // Create a mock store with initial state 18 | 19 | return render( 20 |
86 |
87 |
125 | {/* rows props*/}
126 |
128 | )
129 | }
130 |
131 | export default LogsNotification;
132 |
--------------------------------------------------------------------------------
/client/src/pages/Overview.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react'
2 | import {
3 | Box,
4 | useTheme,
5 | Typography,
6 | Autocomplete,
7 | TextField,
8 | Tabs,
9 | Tab,
10 | } from '@mui/material'
11 | import { useDispatch, useSelector } from 'react-redux'
12 | import { setServiceName, setAccountName, setClusterName, fetchAccounts, fetchClusters } from '../redux/userSlice.js'
13 | import PieChart from '../components/PieChart.jsx'
14 |
15 |
16 | const Overview = () => {
17 | const [serviceNames, setServiceNames] = useState([]);
18 | const [accountNames, setAccountNames] = useState([]);
19 | const [clusterNames, setClusterNames] = useState([]);
20 | const [inputValueService, setInputValueService] = useState('')
21 | const [inputValueAccount, setInputValueAccount] = useState('')
22 | const [inputValueCluster, setInputValueCluster] = useState('')
23 | const dispatch = useDispatch()
24 | const theme = useTheme();
25 |
26 | const { userId, accountName, clusterName, serviceName, region } = useSelector((state) => ({
27 | userId: state.user.userId,
28 | accountName: state.user.accountName,
29 | clusterName: state.user.clusterName,
30 | serviceName: state.user.serviceName,
31 | region: state.user.region
32 | }));
33 |
34 | useEffect(() => {
35 | if (userId) {
36 | dispatch(fetchAccounts(userId))
37 | .unwrap()
38 | .then((data) => {
39 | const combinedAccountNames = [
40 | ...data.root.map(account => account.account_name),
41 | ...data.subaccount.map(account => account.account_name)
42 | ];
43 | setAccountNames(combinedAccountNames);
44 | })
45 | .catch((error) => {
46 | console.error('Error fetching account names:', error);
47 | });
48 | }
49 | }, [userId, dispatch]);
50 |
51 | useEffect(() => {
52 | if (userId && accountName) {
53 | dispatch(fetchClusters({ userId, accountName }))
54 | .unwrap()
55 | .then((data) => {
56 | const clusterNames = data.flatMap(regionData => regionData.clusters.map(cluster => cluster.clusterName));
57 | setClusterNames(clusterNames);
58 | })
59 | .catch((error) => {
60 | console.error('Error fetching cluster names:', error);
61 | });
62 | }
63 | }, [userId, accountName, dispatch]);
64 |
65 | // fetching services from backend
66 | useEffect(() => {
67 | if (userId && accountName && clusterName) {
68 | fetch(
69 | `http://localhost:3000/list/AllServices?userId=${userId}&accountName=${accountName}&clusterName=${clusterName}®ion=${region}`
70 | )
71 | .then((response) => response.json())
72 | .then((data) => {
73 | console.log('Fetching service names -->', data)
74 | if (data && data.length > 0) {
75 | setServiceNames(data)
76 | dispatch(setServiceName(data[0]));
77 | } else {
78 | setServiceNames([]);
79 | dispatch(setServiceName(null));
80 | throw new Error('No services found')
81 | }
82 | })
83 | .catch((error) => {
84 | console.error('Error fetching service names:', error)
85 | })
86 | }
87 | }, [userId, accountName, clusterName, region, dispatch])
88 |
89 |
90 |
91 | return (
92 |
98 | {/* Navbar component */}
99 |
101 | {/* Form container */}
102 |
110 | {/* set onSubmit form function handleSubmit */}
111 |
127 | {/*
128 | User Profile
129 | */}
130 |
143 | {error}
144 |
145 | )}
146 | {success && (
147 |
148 | {success}
149 |
150 | )}
151 |
156 | Credentials
157 |
158 | {/* first name // unable to change */}
159 | setNewUsername(e.target.value)}
181 | fullWidth
182 | disabled={!isEditing}
183 | sx={{
184 | backgroundColor: isEditing
185 | ? theme.palette.action.selected
186 | : 'inherit',
187 | }}
188 | />
189 |
190 | {/* email // setNewEmail */}
191 | setNewEmail(e.target.value)}
197 | fullWidth
198 | disabled={!isEditing}
199 | sx={{
200 | backgroundColor: isEditing
201 | ? theme.palette.action.selected
202 | : 'inherit',
203 | }}
204 | />
205 |
206 | {/* if editing mode */}
207 | {isEditing ? (
208 | // if it's in editng mode
209 |
217 |
218 |
223 | {/* Save button */}
224 |
226 |
227 |
228 |
229 |
230 | {/* cancel button */}
231 |
233 |
234 |
235 | ) : (
236 | // if not in editing
237 |
238 |
243 | {/* edit button */}
244 |
246 |
247 | )}
248 |
257 |
258 |
259 |
260 |
261 | )
262 | }
263 |
264 | export default UserProfile
265 |
--------------------------------------------------------------------------------
/client/src/pages/accounts.jsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from 'react'
2 | import { useSelector, useDispatch } from 'react-redux'
3 | import { Box, Typography, useTheme, Grid, Paper } from '@mui/material'
4 | import { useNavigate } from 'react-router-dom'
5 | import {
6 | fetchAccounts,
7 | fetchSubAccountDetails,
8 | selectAccount,
9 | } from '../redux/userSlice.js'
10 | import AccountDetails from '../components/accountDetails.jsx'
11 | import BreadcrumbsNav from '../components/breadcrumbs.jsx'
12 |
13 | const Accounts = () => {
14 | const theme = useTheme()
15 | const dispatch = useDispatch()
16 | const navigate = useNavigate()
17 | const {
18 | userId,
19 | rootAccounts = [],
20 | subAccounts = [],
21 | accountsLoading,
22 | accountsError,
23 | selectedSubAccountDetails = [],
24 | } = useSelector((state) => state.user)
25 |
26 | useEffect(() => {
27 | if (userId) {
28 | dispatch(fetchAccounts(userId))
29 | }
30 | }, [dispatch, userId])
31 |
32 | const handleAccountClick = (account, accountType) => {
33 | if (account) {
34 | dispatch(selectAccount({ account, accountType }))
35 | if (accountType === 'Root') {
36 | dispatch(
37 | fetchSubAccountDetails({ userId, accountName: account.account_name })
38 | )
39 | }
40 | }
41 | }
42 |
43 | if (accountsLoading) {
44 | return -
141 | // {clusters.map((regionCluster, index) => (
142 | //
70 |
77 |
85 |
97 |
105 | Enter AWS Credentials
106 |
107 |
116 |
117 |
121 | Account Type
122 |
123 |
133 |
134 | setAccessKey(e.target.value)}
139 | required
140 | fullWidth
141 | InputLabelProps={{
142 | style: { color: theme.palette.primary.contrastText },
143 | }}
144 | InputProps={{
145 | style: { color: theme.palette.primary.contrastText },
146 | }}
147 | />
148 | setSecretKey(e.target.value)}
153 | required
154 | fullWidth
155 | InputLabelProps={{
156 | style: { color: theme.palette.primary.contrastText },
157 | }}
158 | InputProps={{
159 | style: { color: theme.palette.primary.contrastText },
160 | }}
161 | />
162 | setAccName(e.target.value)}
167 | required
168 | fullWidth
169 | InputLabelProps={{
170 | style: { color: theme.palette.primary.contrastText },
171 | }}
172 | InputProps={{
173 | style: { color: theme.palette.primary.contrastText },
174 | }}
175 | />
176 |
185 |
186 | Can't find it? Return to home and read our Get Started to access
187 | these information.
188 |
189 |
198 |
199 |
200 |
201 |
202 |
203 | );
204 | };
205 |
206 | export default Credentials;
207 |
--------------------------------------------------------------------------------
/client/src/pages/getstarted.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Container, Box, Typography, Paper } from '@mui/material';
3 | import { useTheme } from '@mui/material/styles';
4 | import Tutorial from '../components/tutorial';
5 |
6 | const GetStarted = () => {
7 | const theme = useTheme();
8 |
9 | return (
10 |
84 |
91 |
99 |
100 |
102 |
103 | Login In
104 |
105 | {error && (
106 |
115 | {error}
116 |
117 | )}
118 |
134 | {/* Email input field */}
135 | setEmail(e.target.value)}
140 | required
141 | fullWidth
142 | />
143 | setPassword(e.target.value)}
149 | required
150 | fullWidth
151 | />
152 |
161 |
170 |
194 |
218 |
219 |
226 |
233 |
234 |
235 |
236 |
237 | );
238 | };
239 |
240 | export default Login;
241 |
--------------------------------------------------------------------------------
/client/src/pages/team.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Box, Container, Typography, Grid, Avatar , useTheme } from '@mui/material';
3 | import grace from '../assets/grace.png';
4 | import aria from '../assets/aria.png';
5 | import will from '../assets/will.png';
6 | import ploy from '../assets/ploy.png';
7 |
8 | // Array of team member objects with their names and image paths
9 | const teamMembers = [
10 | { name: 'Grace Lo', img: grace },
11 | { name: 'Aria Liang', img: aria },
12 | { name: 'Will Di', img: will },
13 | { name: 'Ploynapa Yang', img: ploy },
14 | ];
15 |
16 | // Team component
17 | const Team = () => {
18 | const theme = useTheme(); // Hook to access the current theme
19 |
20 | return (
21 |