Skip to content

Commit 23c3a91

Browse files
patpat20patpat20
committed
added styling changes
1 parent 63f1e63 commit 23c3a91

9 files changed

Lines changed: 191 additions & 175 deletions

File tree

‎app/charts/RouteCopy.jsx‎

Lines changed: 66 additions & 133 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,14 @@
1+
import {
2+
IconButton,
3+
Modal,
4+
Card,
5+
CardHeader,
6+
CardContent,
7+
Button,
8+
Typography
9+
} from '@material-ui/core';
10+
import { Theme, makeStyles } from '@material-ui/core/styles';
11+
import { BaseCSSProperties } from '@material-ui/core/styles/withStyles';
112
import React, { useContext } from 'react';
213
// import OverviewContext from '../context/OverviewContext';
314
import { CommsContext } from '../context/CommsContext';
@@ -77,133 +88,63 @@ const RouteLocations = props => {
7788
const tracePoints = Object.values(resObj).filter(subArray => subArray.length > 1);
7889
console.log('tracepoints =======>', tracePoints);
7990

80-
// // Construct an obj that stores data necessary for calculating avg speed of requests btw 2 pts.
81-
// const avgDataObj = {};
82-
// /****** Build the object here w/ nested loops ************/
83-
// /****** WARNING: tracePoints arr can be very long (100+) ************/
84-
// for (let i = 0; i < tracePoints.length; i += 1) {
85-
// let subArr = tracePoints[i];
86-
// for (let j = 0; j < subArr.length; j += 1) {
87-
// let currDataObj = subArr[j];
88-
// if (j < subArr.length - 1) {
89-
// let nextDataObj = subArr[j + 1];
90-
// let routeName = `${currDataObj.microservice}-${nextDataObj.microservice}`;
91-
// // Key/value pair that keeps COUNT of two-point routes
92-
// if (!avgDataObj[`${routeName}Count`]) avgDataObj[`${routeName}Count`] = 1;
93-
// else avgDataObj[`${routeName}Count`] += 1;
94-
95-
// // Key/value that accumulates TOTAL TIME a req travels btw 2 certain points
96-
// let timeDiff = new Date(nextDataObj.time) - new Date(currDataObj.time);
97-
// if (!avgDataObj[`${routeName}TotalTime`]) {
98-
// avgDataObj[`${routeName}TotalTime`] = timeDiff;
99-
// } else avgDataObj[`${routeName}TotalTime`] += timeDiff;
100-
101-
// // Key/value that calculates AVG TIME of travel (dividing the 2 values above)
102-
// let avgTime = avgDataObj[`${routeName}TotalTime`] / avgDataObj[`${routeName}Count`];
103-
// avgDataObj[`${routeName}AvgTime`] = avgTime;
104-
// }
105-
// }
106-
// }
107-
108-
// Array of <divs> to be rendered. Each <div> contains route name and time difference.
109-
// const resArray = []
110-
111-
// // const position = communicationsData[0].correlatingid ? 0 : tracePoints.length - 1;
112-
// const position = 0;
113-
114-
// // iterate over ONE elem in tracePoints, creating a <div> for every data obj.
115-
// for (let i = 0; i < tracePoints[position].length; i += 1) {
116-
// if (i !== tracePoints[position].length - 1) {
117-
// // Calc time difference (when not at the end of array):
118-
// // Convert time str to Date obj w/ new Date(), then get the time difference.
119-
// const timeDiff =
120-
// new Date(tracePoints[position][i + 1].timeSent) -
121-
// new Date(tracePoints[position][i].timeSent);
122-
// resArray.push(
123-
// <div className="RouteCircle" key={i}>
124-
// {/* Altering this <p> so it displays only microsvc_name */}
125-
// <p id="routeText">
126-
// Point {i + 1}: {tracePoints[position][i].microservice_name}
127-
// </p>
128-
// {/* Adding another <p> that displays time difference btw curr obj and next obj */}
129-
// <p id="routeTimeDiff">
130-
// {/* Time: {tracePoints[position][i].timeSent} */}
131-
// Time elapsed: {timeDiff} ms
132-
// </p>
133-
// </div>
134-
// );
135-
// } else {
136-
// // If at the end of array, don't push the timeDiff <p> to resArray (only push a <p> w/ name).
137-
// resArray.push(
138-
// <div className="RouteCircle" key={i}>
139-
// <p id="routeText">
140-
// Point {i + 1}: {tracePoints[position][i].microservice_name}
141-
// </p>
142-
// </div>
143-
// );
144-
// }
145-
// }
146-
// // console.log('resArray: ', resArray);
147-
148-
/**** Making a list of avg speed-related data. ********/
149-
// const avgData = [];
150-
// Object.entries(avgDataObj).forEach((el, i) => {
151-
// avgData.push(
152-
// <span className="avgDataDetails" key={`${i}+${el[0]}`}>
153-
// {el[0]}: {el[1]}
154-
// </span>
155-
// )
156-
// })
157-
// console.log('avgData (array):', avgData);
91+
const useStyles = makeStyles(theme => ({
92+
paper: {
93+
height: 280,
94+
width: 280,
95+
textAlign: 'center',
96+
color: '#888888',
97+
whiteSpace: 'nowrap',
98+
backgroundColor: '#ffffff',
99+
borderRadius: 8,
100+
border: '0',
101+
boxShadow: '0 6px 6px 0 rgba(153, 153, 153, 0.14), 0 6px 6px -2px rgba(153, 153, 153, 0.2), 0 6px 8px 0 rgba(153, 153, 153, 0.12)',
102+
'&:hover, &.Mui-focusVisible': {
103+
backgroundColor: `#ccd8e1`,
104+
color: '#ffffff',
105+
},
106+
},
107+
hover: {
108+
boxShadow: 'none',
109+
color: 'transparent'
110+
},
111+
btnStyle: {
112+
position: 'absolute',
113+
top: -10,
114+
left: -10,
115+
margin: '0',
116+
color: '#eeeeee',
117+
borderRadius: '0',
118+
backgroundColor: 'transparent',
119+
'&:hover': {
120+
backgroundColor: 'none'
121+
}
122+
},
123+
icon: {
124+
width: '75px',
125+
height: '75px',
126+
boxShadow: 'none',
127+
},
128+
}));
129+
const classes = useStyles({});
158130

159-
// /**** Making CATEGORIZED lists of avg speed-related data. ********/
160-
// const avgTime = [],
161-
// totalTime = [],
162-
// count = [];
163-
// let i = 0; // For unique keys for each <span> //
164131

165-
// for (const key in avgDataObj) {
166-
// i += 1;
167132

168-
// if (key.endsWith('AvgTime')) {
169-
// avgTime.push(
170-
// <span className="avgDataDetails" key={i}>
171-
// {key.slice(0, -7)}: {avgDataObj[key]} ms
172-
// </span>
173-
// );
174-
// }
175-
// if (key.endsWith('TotalTime')) {
176-
// totalTime.push(
177-
// <span className="avgDataDetails" key={i}>
178-
// {key.slice(0, -9)}: {avgDataObj[key]} ms
179-
// </span>
180-
// );
181-
// }
182-
// if (key.endsWith('Count')) {
183-
// count.push(
184-
// <span className="avgDataDetails" key={i}>
185-
// {key.slice(0, -5)}: {avgDataObj[key]}
186-
// </span>
187-
// );
188-
// }
189-
// }
190-
// console.log('avgTime:', avgTime);
191-
// console.log('totalTime:', totalTime);
192-
// console.log('count:', count);
193-
/****************/
133+
// ======Graphs logic =======//
194134
const nodeListObj = {};
195135
const edgeList = [];
196136
for (let route of tracePoints) {
197137
for (let i = 0; i < route.length; i += 1) {
138+
const colors = ['#75b6d7', '#cc000', '#fce356', '#888888', '#ccd8e1']
198139
// check if node exists if not then add node
199140
let id = route[i].microservice
200141
if (nodeListObj[id] === undefined) {
201-
nodeListObj[id] = { id: id, label: id, color: '#e04141' }
142+
nodeListObj[id] = { id: id, label: id, color: { background: '#24d2f1', border: 'white', hover: {background:'#4d55ec',border: 'white'} }, shape: 'circle' }
202143
}
203144
// add edge from node 1 to node 2 (repeat til end)
204145
if (i !== 0) {
205-
let duration = new Date(route[i].time) - new Date(route[i-1].time);
206-
let edge = { from: route[i - 1].microservice, to: id, label: `${duration} ms`}
146+
let duration = new Date(route[i].time) - new Date(route[i - 1].time);
147+
let edge = { from: route[i - 1].microservice, to: id, label: `${duration * 100} ms` }
207148
edgeList.push(edge)
208149
}
209150
}
@@ -227,15 +168,20 @@ const RouteLocations = props => {
227168
// edges: [{ from: 4, to: 2, label: 'hello' }, { from: 'one', to: 3 }, { from: 2, to: 4 }, { from: 2, to: 5 }]
228169
// };
229170
const options = {
171+
172+
height: '400px',
173+
width: '400px',
174+
style: 'surface',
230175
layout: {
231176
hierarchical: false
232177
},
233178
edges: {
234179
color: "#000000",
235-
physics: false,
180+
physics: true,
236181
smooth: {
237182
type: "curvedCCW",
238-
forceDirection: "none"
183+
forceDirection: "none",
184+
roundness: 0.3
239185
}
240186
},
241187
};
@@ -252,23 +198,10 @@ const RouteLocations = props => {
252198

253199

254200
return (
255-
// <div id="routeDataArea">
256-
// {/* Data on the lastest route */}
257-
// {resArray}
258-
259-
// {/* Rendering avg-speed related data */}
260-
// <div id="avgData">
261-
// {/* {avgData} */}
262-
// {/* <span className="avgData-titles">Average time between points:</span>
263-
// {avgTime}
264-
// <span className="avgData-titles">Total time between points:</span>
265-
// {totalTime}
266-
// <span className="avgData-titles">Number of trips between points:</span>
267-
// {count} */}
268-
// </div>
269-
// </div>
270-
// <h1>ROUTE COPY</h1>
271-
<Graph graph={graph} options={options} events={events} style={{ height: "640px" }} />
201+
<div className='traceContainer'>
202+
<span id='trace'>Traces</span>
203+
<Graph className={classes.paper} graph={graph} options={options} events={events} style={{ fontSize: '8px', color: '#555555', fontFamily: 'Open Sans', boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)', backgroundColor: 'white' }} />
204+
</div>
272205
);
273206
};
274207

‎app/components/About.tsx‎

Lines changed: 24 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,32 @@
11
import React from 'react';
2-
2+
import '../stylesheets/About.scss';
33
const About: React.FC = () => {
44
return (
55
<div className="home">
6-
<h1>About</h1>
7-
<p>
8-
The Chronos Team has always had passion for Open Source endeavors that would greatly benefit
9-
the developer community.
10-
</p>
11-
<p>
12-
With many existing paid options being difficult to use and expensive to operate, Chronos was
13-
born...
14-
</p>
15-
<p>
16-
Chronos is an all-in-one network and health monitoring tool for your application or
17-
microservice, containerized or not!
18-
</p>
19-
<p>Insert snippets from the github readme on how to use it</p>
20-
<h1>Team</h1>
21-
<div>
22-
<span>Michael </span>
23-
<span>Greg </span>
24-
<span>Ronelle </span>
25-
<span>Todd </span>
26-
<span>Alan </span>
27-
</div>
28-
<h1>History</h1>
29-
<div>
30-
<span>Maybe have past teams put what they want here</span>
6+
<div className="blurb">
7+
<h3 className="para">About</h3>
8+
<p className="para">
9+
The Chronos Team has always had passion for Open Source endeavors that would greatly benefit
10+
the developer community. With many existing paid options being difficult to use and expensive to operate, Chronos was
11+
born. Chronos is an all-in-one network and health monitoring tool for your application or
12+
microservice, containerized or not!
13+
</p>
14+
<div className="doya">
15+
<h3 className="para">Team Doya</h3><span id="sproutSpan"><img className="sprout" src="../assets/clean-sprout.gif" alt="sprout"></img></span>
16+
<br/>
17+
<div>
18+
<span className="para">Grace </span><br />
19+
<span className="para">Jen </span><br />
20+
<span className="para">Patty </span><br />
21+
<span className="para">Stella </span><br /><br />
22+
</div>
23+
</div>
24+
<h3 className="para">Contributors</h3>
25+
<p className="para">Michael, Ronelle, Todd, Greg
26+
Brianna, Brian, Alon, Alan
27+
Ousman, Ben, Chris, Jenae, Tim</p>
3128
</div>
3229
</div>
3330
);
3431
};
35-
36-
export default About;
32+
export default About;

‎app/components/Header.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ const Header: React.SFC<HeaderProps> = ({ app, service, setLive, live }) => {
3737
<span className="dot"></span>Live
3838
</div>
3939
) : (
40-
<div>Gather Live Data</div>
40+
<div id='gather'>Gather Live Data</div>
4141
)}
4242
</button>
4343
</div>

‎app/components/Occupied.tsx‎

Lines changed: 19 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import MoreVertIcon from '@material-ui/icons/MoreVert';
1717
import AddCircleOutlineTwoToneIcon from '@material-ui/icons/AddCircleOutlineTwoTone';
1818
import DeleteForeverOutlinedIcon from '@material-ui/icons/DeleteForeverOutlined';
1919
import ListIcon from '@material-ui/icons/List';
20+
import HighlightOffIcon from '@material-ui/icons/HighlightOff';
2021
import SearchIcon from '@material-ui/icons/Search';
2122
import DashboardIcon from '@material-ui/icons/Dashboard';
2223
import NotificationsIcon from '@material-ui/icons/Notifications';
@@ -67,14 +68,13 @@ const Occupied: React.FC = () => {
6768
setOpen(true);
6869
}
6970
};
70-
7171
const useStyles = makeStyles<Theme, StyleProps>(theme => ({
7272
// card: "+" button only
7373
paper: {
7474
height: 280,
7575
width: 280,
7676
textAlign: 'center',
77-
color: 'rgba(33, 34, 41, 1.2)',
77+
color: '#888888',
7878
whiteSpace: 'nowrap',
7979
backgroundColor: '#ffffff',
8080
borderRadius: 8,
@@ -85,21 +85,30 @@ const Occupied: React.FC = () => {
8585
color: '#ffffff',
8686
},
8787
},
88+
hover: {
89+
boxShadow: 'none',
90+
color: 'transparent'
91+
},
92+
btnStyle: {
93+
position: 'absolute',
94+
top: -10,
95+
left: -10,
96+
margin: '0',
97+
color: '#eeeeee',
98+
borderRadius: '0',
99+
backgroundColor: 'transparent',
100+
'&:hover' : {
101+
backgroundColor: 'none'
102+
}
103+
},
88104
icon: {
89105
width: '75px',
90106
height: '75px',
91107
boxShadow: 'none',
92-
color: '#999999',
93108
},
94109
}));
95110

96111
const classes = useStyles({} as StyleProps);
97-
98-
function append(parent:any, child:any) {
99-
const parentNode: HTMLElement = document.querySelector(parent);
100-
const childNode: HTMLElement = document.querySelector(child);
101-
return parentNode.append(childNode);
102-
};
103112

104113
return (
105114

@@ -150,7 +159,7 @@ const Occupied: React.FC = () => {
150159
aria-label="Delete"
151160
onClick={event => confirmDelete(event, app[0], i)}
152161
>
153-
<DeleteForeverOutlinedIcon />
162+
<HighlightOffIcon className={classes.btnStyle} id='deleteIcon' />
154163
</IconButton>
155164
}
156165
></CardHeader>

0 commit comments

Comments
 (0)