Skip to content

Commit 5192410

Browse files
xkisoxkiso
authored
Merge branch 'master' into master
2 parents e7f6014 + e3fed00 commit 5192410

30 files changed

+920
-483
lines changed

‎app/charts/RouteCopy.jsx‎

Lines changed: 145 additions & 142 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,36 @@
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';
3-
import HealthContext from '../context/HealthContext';
14+
import { CommsContext } from '../context/CommsContext';
15+
// import { log } from 'console';
16+
import Graph from 'react-graph-vis';
417

518
const RouteLocations = props => {
6-
const communicationsData = useContext(HealthContext).overviewData;
19+
const communicationsData = useContext(CommsContext).commsData;
20+
console.log('commdata=======>', communicationsData);
21+
console.log('try again');
722

823
// initialize an empty object resObj.
9-
// This object will store the microservice names as values and its corresponding correlatingId or correlatingid as keys.
24+
// This object will store the microservice names as values and its corresponding correlatingid or correlatingid as keys.
1025
// The microservice names will be stored in array within the order it was to the database.
1126
const resObj = {};
1227

1328
if (communicationsData.length > 0 && communicationsData[0]._id) {
1429
// Sort the communication array from OLDEST to NEWEST documents.
1530
communicationsData.sort((a, b) => {
1631
// Note that a newer date obj IS GREATER THAN an older date obj.
17-
if (new Date(a.timeSent) > new Date(b.timeSent)) return 1;
18-
if (new Date(a.timeSent) < new Date(b.timeSent)) return -1;
32+
if (new Date(a.time) > new Date(b.time)) return 1;
33+
if (new Date(a.time) < new Date(b.time)) return -1;
1934
return 0;
2035
});
2136

@@ -25,179 +40,167 @@ const RouteLocations = props => {
2540
const element = communicationsData[i];
2641
// Pushes the microservice name & timeSent into the resObj.
2742
// Data objects w/ same corrId will be grouped in a same array.
28-
if (resObj[element.correlatingId]) {
29-
resObj[element.correlatingId].push({
30-
microservice_name: element.currentMicroservice,
31-
timeSent: element.timeSent,
43+
if (resObj[element.correlatingid]) {
44+
resObj[element.correlatingid].push({
45+
microservice: element.microservice,
46+
time: element.time
3247
});
3348
} else {
3449
// The value that corresp. to the correlationId key is an array of obj containing name and time data.
3550
// Each obj is a data point.
36-
resObj[element.correlatingId] = [
51+
resObj[element.correlatingid] = [
3752
{
38-
microservice_name: element.currentMicroservice,
39-
timeSent: element.timeSent,
53+
microservice: element.microservice,
54+
time: element.time
4055
},
4156
];
4257
}
4358
}
4459
} else {
4560
for (let i = communicationsData.length - 1; i >= 0; i--) {
4661
const element = communicationsData[i];
47-
if (resObj[element.correlatingId]) {
48-
resObj[element.correlatingId].push({
49-
microservice_name: element.currentMicroservice,
50-
timeSent: element.timeSent,
62+
if (resObj[element.correlatingid]) {
63+
resObj[element.correlatingid].push({
64+
microservice,
65+
time
5166
});
5267
} else {
5368
// The value that corresp. to the correlationId key is an array of obj containing name and time data.
5469
// Each obj is a data point.
55-
resObj[element.correlatingId] = [
70+
resObj[element.correlatingid] = [
5671
{
57-
microservice_name: element.currentMicroservice,
58-
timeSent: element.timeSent,
72+
microservice,
73+
time
5974
},
6075
];
6176
}
6277
// initializing the object with the first microservice
6378
}
79+
console.log('B', resObj)
6480
}
81+
console.log('+++RESOBJ+++');
82+
console.log(resObj);
6583

6684
// use Object.values to destructure locations
6785
// Each elem in tracePoints is an array of arrays, which contain objects (each of which is a data point).
6886
// Filter the array so that only subarrays w/ len > 1 are kept.
6987
// (len == 1 means there's only one point in the route. There's no meaningful data to be gained from those.)
7088
const tracePoints = Object.values(resObj).filter(subArray => subArray.length > 1);
71-
72-
// Construct an obj that stores data necessary for calculating avg speed of requests btw 2 pts.
73-
const avgDataObj = {};
74-
/****** Build the object here w/ nested loops ************/
75-
/****** WARNING: tracePoints arr can be very long (100+) ************/
76-
for (let i = 0; i < tracePoints.length; i += 1) {
77-
let subArr = tracePoints[i];
78-
for (let j = 0; j < subArr.length; j += 1) {
79-
let currDataObj = subArr[j];
80-
if (j < subArr.length - 1) {
81-
let nextDataObj = subArr[j + 1];
82-
let routeName = `${currDataObj.microservice_name}-${nextDataObj.microservice_name}`;
83-
// Key/value pair that keeps COUNT of two-point routes
84-
if (!avgDataObj[`${routeName}Count`]) avgDataObj[`${routeName}Count`] = 1;
85-
else avgDataObj[`${routeName}Count`] += 1;
86-
87-
// Key/value that accumulates TOTAL TIME a req travels btw 2 certain points
88-
let timeDiff = new Date(nextDataObj.timeSent) - new Date(currDataObj.timeSent);
89-
if (!avgDataObj[`${routeName}TotalTime`]) {
90-
avgDataObj[`${routeName}TotalTime`] = timeDiff;
91-
} else avgDataObj[`${routeName}TotalTime`] += timeDiff;
92-
93-
// Key/value that calculates AVG TIME of travel (dividing the 2 values above)
94-
let avgTime = avgDataObj[`${routeName}TotalTime`] / avgDataObj[`${routeName}Count`];
95-
avgDataObj[`${routeName}AvgTime`] = avgTime;
89+
console.log('tracepoints =======>', tracePoints);
90+
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({});
130+
131+
132+
133+
// ======Graphs logic =======//
134+
const nodeListObj = {};
135+
const edgeList = [];
136+
for (let route of tracePoints) {
137+
for (let i = 0; i < route.length; i += 1) {
138+
const colors = ['#75b6d7', '#cc000', '#fce356', '#888888', '#ccd8e1']
139+
// check if node exists if not then add node
140+
let id = route[i].microservice
141+
if (nodeListObj[id] === undefined) {
142+
nodeListObj[id] = { id: id, label: id, color: { background: '#24d2f1', border: 'white', hover: {background:'#4d55ec',border: 'white'} }, shape: 'circle' }
143+
}
144+
// add edge from node 1 to node 2 (repeat til end)
145+
if (i !== 0) {
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` }
148+
edgeList.push(edge)
96149
}
97150
}
98151
}
99-
100-
// Array of <divs> to be rendered. Each <div> contains route name and time difference.
101-
const resArray = [];
102-
103-
const position = communicationsData[0].correlatingid ? 0 : tracePoints.length - 1;
104-
105-
// iterate over ONE elem in tracePoints, creating a <div> for every data obj.
106-
for (let i = 0; i < tracePoints[position].length; i += 1) {
107-
if (i !== tracePoints[position].length - 1) {
108-
// Calc time difference (when not at the end of array):
109-
// Convert time str to Date obj w/ new Date(), then get the time difference.
110-
const timeDiff =
111-
new Date(tracePoints[position][i + 1].timeSent) -
112-
new Date(tracePoints[position][i].timeSent);
113-
resArray.push(
114-
<div className="RouteCircle" key={i}>
115-
{/* Altering this <p> so it displays only microsvc_name */}
116-
<p id="routeText">
117-
Point {i + 1}: {tracePoints[position][i].microservice_name}
118-
</p>
119-
{/* Adding another <p> that displays time difference btw curr obj and next obj */}
120-
<p id="routeTimeDiff">
121-
{/* Time: {tracePoints[position][i].timeSent} */}
122-
Time elapsed: {timeDiff} ms
123-
</p>
124-
</div>
125-
);
126-
} else {
127-
// If at the end of array, don't push the timeDiff <p> to resArray (only push a <p> w/ name).
128-
resArray.push(
129-
<div className="RouteCircle" key={i}>
130-
<p id="routeText">
131-
Point {i + 1}: {tracePoints[position][i].microservice_name}
132-
</p>
133-
</div>
134-
);
152+
const nodeList = Object.values(nodeListObj);
153+
console.log(edgeList);
154+
console.log(nodeList);
155+
156+
const graph = {
157+
nodes: nodeList,
158+
edges: edgeList
159+
};
160+
// const graph = {
161+
// nodes: [
162+
// { id: 'one', label: "Node 1", color: "#e04141" },
163+
// { id: 2, label: "Node 2", color: "#e09c41" },
164+
// { id: 3, label: "Node 3", color: "#e0df41" },
165+
// { id: 4, label: "Node 4", color: "#7be041" },
166+
// { id: 5, label: "Node 5", color: "#41e0c9" }
167+
// ],
168+
// edges: [{ from: 4, to: 2, label: 'hello' }, { from: 'one', to: 3 }, { from: 2, to: 4 }, { from: 2, to: 5 }]
169+
// };
170+
const options = {
171+
172+
height: '400px',
173+
width: '400px',
174+
style: 'surface',
175+
layout: {
176+
hierarchical: false
177+
},
178+
edges: {
179+
color: "#000000",
180+
physics: true,
181+
smooth: {
182+
type: "curvedCCW",
183+
forceDirection: "none",
184+
roundness: 0.3
185+
}
186+
},
187+
};
188+
189+
const events = {
190+
select: function (event) {
191+
var { nodes, edges } = event;
192+
console.log("Selected nodes:");
193+
console.log(nodes);
194+
console.log("Selected edges:");
195+
console.log(edges);
135196
}
136-
}
137-
// console.log('resArray: ', resArray);
138-
139-
/**** Making a list of avg speed-related data. ********/
140-
// const avgData = [];
141-
// Object.entries(avgDataObj).forEach((el, i) => {
142-
// avgData.push(
143-
// <span className="avgDataDetails" key={`${i}+${el[0]}`}>
144-
// {el[0]}: {el[1]}
145-
// </span>
146-
// )
147-
// })
148-
// console.log('avgData (array):', avgData);
149-
150-
/**** Making CATEGORIZED lists of avg speed-related data. ********/
151-
const avgTime = [],
152-
totalTime = [],
153-
count = [];
154-
let i = 0; // For unique keys for each <span> //
197+
};
155198

156-
for (const key in avgDataObj) {
157-
i += 1;
158-
159-
if (key.endsWith('AvgTime')) {
160-
avgTime.push(
161-
<span className="avgDataDetails" key={i}>
162-
{key.slice(0, -7)}: {avgDataObj[key]} ms
163-
</span>
164-
);
165-
}
166-
if (key.endsWith('TotalTime')) {
167-
totalTime.push(
168-
<span className="avgDataDetails" key={i}>
169-
{key.slice(0, -9)}: {avgDataObj[key]} ms
170-
</span>
171-
);
172-
}
173-
if (key.endsWith('Count')) {
174-
count.push(
175-
<span className="avgDataDetails" key={i}>
176-
{key.slice(0, -5)}: {avgDataObj[key]}
177-
</span>
178-
);
179-
}
180-
}
181-
// console.log('avgTime:', avgTime);
182-
// console.log('totalTime:', totalTime);
183-
// console.log('count:', count);
184-
/****************/
185199

186200
return (
187-
<div id="routeDataArea">
188-
{/* Data on the lastest route */}
189-
{resArray}
190-
191-
{/* Rendering avg-speed related data */}
192-
<div id="avgData">
193-
{/* {avgData} */}
194-
<span className="avgData-titles">Average time between points:</span>
195-
{avgTime}
196-
<span className="avgData-titles">Total time between points:</span>
197-
{totalTime}
198-
<span className="avgData-titles">Number of trips between points:</span>
199-
{count}
200-
</div>
201+
<div className='traceContainer'>
202+
<span id='tracesTitle'>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' }} />
201204
</div>
202205
);
203206
};

0 commit comments

Comments
 (0)