Skip to content

Commit 01ef0f9

Browse files
sarhirisarhiri
authored
Merge pull request #1 from oslabs-beta/modularization
Modularization
2 parents 9be087c + c9db5cb commit 01ef0f9

14 files changed

Lines changed: 753 additions & 669 deletions

File tree

‎app/components/ApplicationsCard/ApplicationsCard.tsx‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
2+
import React, { useContext, useRef } from "react";
3+
import { useNavigate } from 'react-router-dom';
4+
import { Card,CardHeader,IconButton,CardContent,Typography } from "@material-ui/core";
5+
import { DashboardContext } from "../../context/DashboardContext";
6+
import { ApplicationContext } from "../../context/ApplicationContext";
7+
import HighlightOffIcon from '@material-ui/icons/HighlightOff';
8+
import UpdateIcon from '@material-ui/icons/Update';
9+
import './styles.scss'
10+
11+
type ClickEvent = React.MouseEvent<HTMLElement>;
12+
13+
const ApplicationsCard = (props) => {
14+
15+
const { application, i, setServiceModalOpen, classes } = props
16+
const { deleteApp } = useContext(DashboardContext)
17+
const { setAppIndex, setApp, setServicesData, app } = useContext(ApplicationContext)
18+
19+
//dynamic refs
20+
const delRef = useRef<any>([]);
21+
22+
const navigate = useNavigate();
23+
24+
// Handle clicks on Application cards
25+
// v10 info: when card is clicked (not on the delete button) if the service is an AWS instance,
26+
// you are redirected to AWSGraphsContainer passing in the state object containing typeOfService
27+
const handleClick = (
28+
event: ClickEvent,
29+
selectedApp: string,
30+
selectedService: string,
31+
i: number
32+
) => {
33+
//delRef refers to the delete button
34+
if (delRef.current[i] && !delRef.current[i].contains(event.target)) {
35+
if (
36+
selectedService === 'AWS' ||
37+
selectedService === 'AWS/EC2' ||
38+
selectedService === 'AWS/ECS' ||
39+
selectedService === 'AWS/EKS'
40+
) {
41+
setAppIndex(i);
42+
setApp(selectedApp);
43+
navigate(`/aws/:${app}`, { state: { typeOfService: selectedService } });
44+
} else {
45+
setAppIndex(i);
46+
setApp(selectedApp);
47+
setServicesData([]);
48+
setServiceModalOpen(true);
49+
}
50+
}
51+
};
52+
53+
// Asks user to confirm deletion
54+
const confirmDelete = (event: ClickEvent, application: string, i: number) => {
55+
const message = `The application '${app}' will be permanently deleted. Continue?`;
56+
if (confirm(message)) deleteApp(i);
57+
};
58+
59+
return (
60+
<div className="card" key={`card-${i}`} id={`card-${application[1]}`}>
61+
<Card
62+
key={`card-${i}`}
63+
className={classes.paper}
64+
variant="outlined"
65+
onClick={event => handleClick(event, application[0], application[3], i)}
66+
>
67+
<div className="databaseIconContainer">
68+
<div className="databaseIconHeader">
69+
{/* {application[1] === 'SQL' ? (
70+
<img className="databaseIcon" alt="SQL" />
71+
) : (
72+
<img className="databaseIcon" alt="MongoDB" />
73+
)} */}
74+
</div>
75+
</div>
76+
77+
<CardHeader
78+
avatar={
79+
<IconButton
80+
id="iconButton"
81+
ref={element => {
82+
delRef.current[i] = element;
83+
}}
84+
className={classes.iconbutton}
85+
aria-label="Delete"
86+
onClick={event => confirmDelete(event, application[0], i)}
87+
>
88+
<HighlightOffIcon
89+
className={classes.btnStyle}
90+
id="deleteIcon"
91+
ref={element => {
92+
delRef.current[i] = element;
93+
}}
94+
/>
95+
</IconButton>
96+
}
97+
/>
98+
<CardContent>
99+
{/* <p id="databaseName">Name:</p> */}
100+
<Typography noWrap id="databaseName" className={classes.fontStyles}>
101+
{application[0]}
102+
</Typography>
103+
<p id="serviceName">Service:</p>
104+
<Typography className={classes.fontStyles}>{application[3]}</Typography>
105+
</CardContent>
106+
<hr className="cardLine" />
107+
108+
<div className="cardFooter">
109+
<UpdateIcon className="cardFooterIcon" />
110+
<em>
111+
<p id="cardFooterText">{application[4]}</p>
112+
</em>
113+
</div>
114+
</Card>
115+
</div>
116+
)
117+
}
118+
119+
export default ApplicationsCard

‎app/components/ApplicationsCard/styles.scss‎

Lines changed: 206 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,206 @@
1+
2+
@import '../../stylesheets/constants.scss';
3+
4+
.card {
5+
display: flex;
6+
flex-direction: row;
7+
justify-content: space-around;
8+
margin: 20px;
9+
padding: 0;
10+
cursor: pointer;
11+
transition: all 0.5s;
12+
13+
&:after,
14+
&:before {
15+
content: ' ';
16+
width: 10px;
17+
height: 10px;
18+
position: absolute;
19+
transition: all 0.5s;
20+
}
21+
22+
&:hover {
23+
position: relative;
24+
border-top-right-radius: 0px;
25+
border-bottom-left-radius: 0px;
26+
27+
&:before,
28+
&:after {
29+
width: 25%;
30+
height: 25%;
31+
}
32+
}
33+
}
34+
35+
.card {
36+
&:hover .databaseIconHeader {
37+
visibility: hidden;
38+
// background-color: $gblue;
39+
// opacity: 0.7;
40+
// box-shadow: 0 4px 20px 0 rgba(0, 0, 0,.14), 0 7px 10px -5px rgba(255, 255, 255, 0.4);
41+
}
42+
43+
&:hover p {
44+
color: $background;
45+
font-weight: 400;
46+
}
47+
48+
&:hover .cardFooter {
49+
color: $background;
50+
}
51+
52+
&:hover .cardLine {
53+
background-color: $background;
54+
}
55+
56+
&:hover #cardFooterText {
57+
color: $background;
58+
}
59+
60+
&:hover .cardFooterIcon {
61+
color: $background;
62+
}
63+
64+
&:hover #databaseName {
65+
color: $background;
66+
}
67+
}
68+
69+
70+
#card-MongoDB {
71+
&:hover .databaseIconHeader {
72+
visibility: hidden;
73+
// background-color: $gblue;
74+
// opacity: 0.7;
75+
// box-shadow: 0 4px 20px 0 rgba(0, 0, 0,.14), 0 7px 10px -5px rgba(255, 255, 255, 0.4);
76+
}
77+
78+
.databaseIconContainer {
79+
display: inline-block;
80+
overflow: visible;
81+
}
82+
83+
.databaseIconHeader {
84+
position: absolute;
85+
background-color: $ggreen;
86+
display: flex;
87+
justify-content: center;
88+
align-items: center;
89+
width: 90px;
90+
height: 90px;
91+
padding: 15px;
92+
float: left;
93+
top: -20px;
94+
left: 180px;
95+
border-radius: 3px;
96+
box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(0, 255, 42, 0.4);
97+
background-image: url('../../assets/mongo-icon-white.png');
98+
background-position: center;
99+
background-size: 70%;
100+
background-repeat: no-repeat;
101+
102+
.databaseIcon {
103+
width: 55px;
104+
height: 55px;
105+
visibility: hidden;
106+
}
107+
}
108+
}
109+
110+
#card-SQL {
111+
&:hover .databaseIconHeader {
112+
visibility: hidden;
113+
// background-color: $gblue;
114+
// opacity: 0.7;
115+
// box-shadow: 0 4px 20px 0 rgba(0, 0, 0,.14), 0 7px 10px -5px rgba(255, 255, 255, 0.4);
116+
}
117+
118+
.databaseIconContainer {
119+
display: inline-block;
120+
overflow: visible;
121+
}
122+
123+
.databaseIconHeader {
124+
position: absolute;
125+
background-color: $gyellow;
126+
display: flex;
127+
justify-content: center;
128+
align-items: center;
129+
width: 90px;
130+
height: 90px;
131+
padding: 15px;
132+
float: left;
133+
top: -20px;
134+
left: 180px;
135+
border-radius: 3px;
136+
box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(255, 152, 0, 0.4);
137+
background-image: url('../../assets/postgres-icon-white.png');
138+
background-size: cover;
139+
140+
.databaseIcon {
141+
visibility: hidden;
142+
}
143+
}
144+
}
145+
146+
#card-AWS {
147+
&:hover .databaseIconHeader {
148+
visibility: hidden;
149+
// background-color: $gblue;
150+
// opacity: 0.7;
151+
// box-shadow: 0 4px 20px 0 rgba(0, 0, 0,.14), 0 7px 10px -5px rgba(255, 255, 255, 0.4);
152+
}
153+
154+
.databaseIconContainer {
155+
display: inline-block;
156+
overflow: visible;
157+
}
158+
159+
.databaseIconHeader {
160+
position: absolute;
161+
background-color: $gorange;
162+
display: flex;
163+
justify-content: center;
164+
align-items: center;
165+
width: 90px;
166+
height: 90px;
167+
padding: 15px;
168+
float: left;
169+
top: -20px;
170+
left: 180px;
171+
border-radius: 3px;
172+
box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(255, 152, 0, 0.4);
173+
background-image: url('../../assets/aws-icon-white.png');
174+
background-size: cover;
175+
176+
.databaseIcon {
177+
visibility: hidden;
178+
}
179+
}
180+
}
181+
182+
.databaseIconContainer {
183+
display: inline-block;
184+
overflow: visible;
185+
}
186+
187+
.databaseIconHeader {
188+
position: absolute;
189+
background-color: $ggreen;
190+
display: flex;
191+
justify-content: center;
192+
align-items: center;
193+
width: 90px;
194+
height: 90px;
195+
padding: 15px;
196+
float: left;
197+
top: -20px;
198+
left: 180px;
199+
border-radius: 3px;
200+
box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(0, 255, 42, 0.4);
201+
202+
.databaseIcon {
203+
width: 55px;
204+
height: 55px;
205+
}
206+
}

‎app/components/DashboardIcons/DashboardIcons.tsx‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import { CommsContext } from "../../context/CommsContext"
2+
import { DashboardContext } from "../../context/DashboardContext"
3+
import DashboardIcon from '@material-ui/icons/Dashboard';
4+
import NotificationsIcon from '@material-ui/icons/Notifications';
5+
import Badge from '@material-ui/core/Badge';
6+
import PersonIcon from '@material-ui/icons/Person';
7+
import { Button } from '@material-ui/core';
8+
import React, { useContext,useState } from "react"
9+
import './styles.scss'
10+
11+
const DashboardIcons = (props) => {
12+
13+
const { setPersonModalOpen } = props
14+
const { applications } = useContext(DashboardContext)
15+
const { commsData } = useContext(CommsContext)
16+
17+
const [clickedAt, setClickedAt] = useState<string>('2000-01-01T00:00:00Z');
18+
19+
const notification = commsData
20+
.filter((item: { responsestatus: number }) => item.responsestatus >= 400)
21+
.filter((item: { time: string }) => {
22+
const d1 = new Date(item.time);
23+
const d2 = new Date(clickedAt);
24+
return d1 > d2;
25+
});
26+
27+
return (
28+
<div className="dashboardIconWrapper">
29+
<div className="dashboardIconArea">
30+
<span className="dashboardTooltip">
31+
You have {applications ? applications.length : 0} active databases
32+
</span>
33+
<DashboardIcon className="navIcon" id="dashboardIcon" />
34+
</div>
35+
36+
<div className="notificationsIconArea">
37+
<span className="notificationsTooltip">
38+
You have {notification ? notification.length : 0} new alerts
39+
</span>
40+
<NotificationsIcon className="navIcon" id="notificationsIcon" />
41+
<Badge
42+
overlap="rectangular"
43+
badgeContent={notification ? notification.length : 0}
44+
color="secondary"
45+
/>
46+
</div>
47+
48+
<div className="personIconArea">
49+
<Button className="personTooltip" onClick={() => setPersonModalOpen(true)}>
50+
<PersonIcon className="navIcon" id="personIcon" />
51+
</Button>
52+
</div>
53+
</div>
54+
)
55+
}
56+
57+
export default DashboardIcons

0 commit comments

Comments
 (0)