Skip to content

Commit 770bec8

Browse files
author
Jeffrey Na
committed
Merge branch 'dev' into jeffrey/comments
2 parents 0f1ea2e + 1ef3134 commit 770bec8

File tree

20 files changed

+997
-2345
lines changed

20 files changed

+997
-2345
lines changed

‎app/charts/AwsChart.tsx‎

Lines changed: 59 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ interface SoloStyles {
2424
* @returns {JSX.Element} The JSX element with the AWS chart.
2525
*/
2626
const AwsChart: React.FC<any> = React.memo(props => {
27-
const { renderService, metric, timeList, valueList, colourGenerator } = props;
27+
const { renderService, metric, timeList, valueList, colourGenerator, sizing } = props;
2828
const [solo, setSolo] = useState<SoloStyles | null>(null);
2929
setInterval(() => {
3030
if (solo !== soloStyle) {
@@ -33,71 +33,69 @@ const AwsChart: React.FC<any> = React.memo(props => {
3333
}, 20);
3434

3535
const createChart = () => {
36-
const timeArr = timeList?.map((el: any) => moment(el).format('kk:mm:ss'));
37-
// const hashedColour = colourGenerator(renderService);
38-
let plotlyData: {
39-
name: any;
40-
x: any;
41-
y: any;
42-
type: any;
43-
mode: any;
44-
marker: { color: string };
45-
};
46-
plotlyData = {
47-
name: metric,
48-
x: timeArr,
49-
y: valueList,
50-
type: 'scattergl',
51-
mode: 'lines',
52-
marker: { color: colourGenerator() },
53-
};
54-
// const sizeSwitch = sizing === 'all' ? all : solo;
36+
const timeArr = timeList?.map((el: any) => moment(el).format('kk:mm:ss'));
37+
// const hashedColour = colourGenerator(renderService);
38+
let plotlyData: {
39+
name: any;
40+
x: any;
41+
y: any;
42+
type: any;
43+
mode: any;
44+
marker: { color: string };
45+
};
46+
plotlyData = {
47+
name: metric,
48+
x: timeArr,
49+
y: valueList,
50+
type: 'scattergl',
51+
mode: 'lines',
52+
marker: { color: colourGenerator() },
53+
};
54+
const sizeSwitch = sizing === 'all' ? all : solo;
5555

56-
return (
57-
<Plot
58-
data={[plotlyData]}
59-
config={{ displayModeBar: false }}
60-
layout={{
61-
title: `${renderService} | ${metric}`,
62-
// ...sizeSwitch,
63-
font: {
64-
color: '#444d56',
65-
size: 11.5,
66-
family: 'Roboto',
67-
},
68-
paper_bgcolor: 'white',
69-
plot_bgcolor: 'white',
70-
showlegend: true,
71-
legend: {
72-
orientation: 'h',
73-
xanchor: 'center',
74-
x: 0.5,
75-
y: 5,
76-
},
77-
xaxis: {
78-
title: 'Time',
79-
tickmode: 'auto',
80-
tick0: 0,
81-
dtick: 10,
82-
rangemode: 'nonnegative',
83-
mirror: false,
84-
ticks: 'outside',
85-
showline: true,
86-
},
87-
yaxis: {
88-
rangemode: 'nonnegative',
89-
title: metric,
90-
},
91-
}}
92-
/>
93-
);
56+
return (
57+
<Plot
58+
data={[plotlyData]}
59+
config={{ displayModeBar: false }}
60+
layout={{
61+
title: `${renderService} | ${metric}`,
62+
...sizeSwitch,
63+
font: {
64+
color: '#444d56',
65+
size: 11.5,
66+
family: 'Roboto',
67+
},
68+
paper_bgcolor: 'white',
69+
plot_bgcolor: 'white',
70+
showlegend: true,
71+
legend: {
72+
orientation: 'h',
73+
xanchor: 'center',
74+
x: 0.5,
75+
y: 5,
76+
},
77+
xaxis: {
78+
title: 'Time',
79+
tickmode: 'auto',
80+
tick0: 0,
81+
dtick: 10,
82+
rangemode: 'nonnegative',
83+
mirror: false,
84+
ticks: 'outside',
85+
showline: true,
86+
},
87+
yaxis: {
88+
rangemode: 'nonnegative',
89+
title: metric,
90+
},
91+
}}
92+
/>
93+
);
9494
};
9595

9696
return (
9797
<div className="chart" data-testid="Health Chart">
98-
{
99-
createChart()
100-
}
98+
{createChart()}
10199
</div>
102100
);
103101
});

‎app/charts/HealthChart.tsx‎

Lines changed: 22 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -44,45 +44,32 @@ const HealthChart: React.FC<HealthChartProps> = React.memo(props => {
4444
return metricName.replace(/_/g, ' ');
4545
};
4646

47-
// pulls the current service names to be shown in the graph title from chartData
48-
const serviceNamesAsString = (chartDataObject: object): string => {
49-
let serviceNameString = '';
50-
for (const serviceName in chartDataObject) {
51-
serviceNameString += `${serviceName} | `;
52-
}
53-
return serviceNameString;
54-
};
55-
5647
// generates an array of plotly data objects to be passed into our plotly chart's data prop
5748
const generatePlotlyDataObjects = (chartDataObj: object): object[] => {
5849
const arrayOfPlotlyDataObjects: PlotlyData[] = [];
59-
// iterate through the chartData
60-
for (const serviceName in chartDataObj) {
61-
// define the metrics for this service
62-
const metrics = chartDataObj[serviceName];
63-
// loop through the list of metrics for the current service
64-
for (const metricName in metrics) {
65-
// define the value and time arrays; allow data to be reassignable in case we need to convert the bytes data into megabytes
66-
let dataArray = metrics[metricName].value;
67-
const timeArray = metrics[metricName].time;
68-
// specifically for `Megabyte` types, convert the original data of bytes into a value of megabytes before graphing
69-
if (dataType === 'Memory in Megabytes' || dataType === 'Cache in Megabytes') {
70-
dataArray = dataArray.map(value => (value / 1000000).toFixed(2));
71-
}
72-
// create the plotly object
73-
const plotlyDataObject: PlotlyData = {
74-
name: prettyMetricName(metricName),
75-
x: prettyTimeInReverse(timeArray),
76-
y: dataArray,
77-
type: 'scattergl',
78-
mode: 'lines',
79-
marker: {
80-
colors: ['#fc4039', '#4b54ea', '#32b44f', '#3788fc', '#9c27b0', '#febc2c'],
81-
},
82-
};
83-
// push the dataObject into the arrayOfPlotlyDataObjects
84-
arrayOfPlotlyDataObjects.push(plotlyDataObject);
50+
51+
// loop through the list of metrics for the current service
52+
for (const metricName in chartDataObj) {
53+
// define the value and time arrays; allow data to be reassignable in case we need to convert the bytes data into megabytes
54+
let dataArray = chartDataObj[metricName].value;
55+
const timeArray = chartDataObj[metricName].time;
56+
// specifically for `Megabyte` types, convert the original data of bytes into a value of megabytes before graphing
57+
if (dataType === 'Memory in Megabytes' || dataType === 'Cache in Megabytes') {
58+
dataArray = dataArray.map(value => (value / 1000000).toFixed(2));
8559
}
60+
// create the plotly object
61+
const plotlyDataObject: PlotlyData = {
62+
name: prettyMetricName(metricName),
63+
x: prettyTimeInReverse(timeArray),
64+
y: dataArray,
65+
type: 'scattergl',
66+
mode: 'lines',
67+
marker: {
68+
colors: ['#fc4039', '#4b54ea', '#32b44f', '#3788fc', '#9c27b0', '#febc2c'],
69+
},
70+
};
71+
// push the plotlyDataObject into the arrayOfPlotlyDataObjects
72+
arrayOfPlotlyDataObjects.push(plotlyDataObject);
8673
}
8774
// return the array of plotlyDataObject
8875
return arrayOfPlotlyDataObjects;

‎app/components/About.tsx‎

Lines changed: 26 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -9,45 +9,47 @@ const About: React.FC = React.memo(() => {
99
const currentMode =
1010
mode === 'light' ? lightAndDark.lightModeText : lightAndDark.darkModeText;
1111

12+
/**
13+
* Enter your OSP group's names into the explicit array of names in nameArray, and it will render them Chronos appropriately.
14+
* Feel free to change the header for the list of names.
15+
*
16+
*/
17+
const nameArray: JSX.Element[] = ['Brisa', 'Kelsi', 'Lucie', 'Jeffrey', 'Justin'].map(name => {
18+
return (
19+
<span style={currentMode} className="text">
20+
<p>{`${name}`}</p>
21+
</span>
22+
);
23+
});
24+
1225
return (
1326
<div className="about">
1427
<div className="blurb" data-testid="aboutPage">
1528
<h3 style={currentMode} className="mainTitle">
1629
About
1730
</h3>
1831
<p style={currentMode} className="text">
19-
The Chronos Team has always had a passion for Open Source endeavors that would greatly
20-
benefit the developer community. With many existing subscription services being difficult
21-
to use and expensive to operate, Chronos was born. Chronos is an all-in-one network and
22-
health monitoring tool for your application or microservice, containerized or not! Now it
23-
can also monitor applications deployed using AWS EC2 and ECS services.
32+
The Chronos Team has a passion for building tools that are powerful, beautifully
33+
designed, and easy to use. Chronos was conceived as an Open Source endeavor that directly benefits the developer
34+
community. Together, the Chronos application and NPM package make up an all-in-one network and health monitoring
35+
tool for your containerized or non-conatinerized applications or microservices. It can also
36+
monitor applications deployed using AWS, EC2, and ECS from Amazon.
2437
</p>
25-
<br>
26-
</br>
38+
<br></br>
2739
<h3 style={currentMode} className="title">
28-
Fantastic Four
40+
Current Version Authors
2941
</h3>
30-
<div>
31-
<span style={currentMode} className="text">
32-
<p>Snow</p>
33-
</span>
34-
<span style={currentMode} className="text">
35-
<p>Taylor</p>
36-
</span>
37-
<span style={currentMode} className="text">
38-
<p>Tim</p>
39-
</span>
40-
<span style={currentMode} className="text">
41-
<p>Roberto</p>
42-
</span>
42+
<div id='OSPNames'>
43+
{nameArray}
4344
<br />
4445
</div>
4546
<h3 style={currentMode} className="title">
46-
Contributors
47+
Past Contributors
4748
</h3>
4849
<p style={currentMode} className="text">
49-
Nachiket, Tiffany, Bruno, Danny, Vince, Matt, Derek, Kit, Grace, Jen, Patty, Stella, Michael, Ronelle, Todd, Greg, Brianna,
50-
Brian, Alon, Alan, Ousman, Ben, Chris, Jenae, Tim, Kirk, Jess, William, Alexander, Elisa, Josh, Troy, Gahl
50+
Snow, Taylor, Tim, Roberto, Nachiket, Tiffany, Bruno, Danny, Vince, Matt, Derek, Kit,
51+
Grace, Jen, Patty, Stella, Michael, Ronelle, Todd, Greg, Brianna, Brian, Alon, Alan,
52+
Ousman, Ben, Chris, Jenae, Tim, Kirk, Jess, William, Alexander, Elisa, Josh, Troy, Gahl
5153
</p>
5254
<br />
5355
</div>

‎app/components/Header.tsx‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useContext, useState } from 'react';
2-
import { useNavigate} from 'react-router-dom';
2+
import { useNavigate } from 'react-router-dom';
33
import { ApplicationContext } from '../context/ApplicationContext';
44
import { DashboardContext } from '../context/DashboardContext';
55
import '../stylesheets/Header.scss';
@@ -37,7 +37,7 @@ const Header: React.FC<HeaderProps> = React.memo(({ app, service, setLive, live
3737
left: 0,
3838
behavior: 'smooth',
3939
});
40-
40+
4141
/** From Version 5.2 Team:
4242
* Can't remove ! in Lines 45 and 49 as they are strictNullChecks
4343
*/
@@ -53,7 +53,7 @@ const Header: React.FC<HeaderProps> = React.memo(({ app, service, setLive, live
5353

5454
const handleServices = () => {
5555
const joinedServices = selectedServices.join(' ');
56-
navigate(joinedServices);
56+
navigate(`/applications/${app}/${joinedServices}`);
5757
setLive(false);
5858
};
5959

@@ -65,7 +65,9 @@ const Header: React.FC<HeaderProps> = React.memo(({ app, service, setLive, live
6565
<h1 className="microserviceTitle">{app}</h1>
6666

6767
{selectModal && <div className="filter" onClick={dropdownClickHandler}></div>}
68-
<div><span>select services to display</span></div>
68+
<div>
69+
<span>select services to display</span>
70+
</div>
6971
<div className={selectModal ? 'dropdown active' : 'dropdown'}>
7072
<div
7173
className={selectModal ? 'select disabled' : 'select'}
@@ -85,7 +87,8 @@ const Header: React.FC<HeaderProps> = React.memo(({ app, service, setLive, live
8587
value={`${microservice}`}
8688
id={`${microservice}`}
8789
name={`${microservice}`}
88-
onChange={handleCheckbox} />
90+
onChange={handleCheckbox}
91+
/>
8992
</label>
9093
);
9194
})}

‎app/containers/EventContainer.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,8 +49,8 @@ const EventContainer: React.FC<EventContainerProps> = React.memo(props => {
4949

5050
/*
5151
Chronos11 -- Unfortunately, eventData is not in a good place for UI/UX purposes. These charts are being rendered 1:1 with the list of metrics (over 500).
52-
These metrics are scraped and generated by Prometheus, and should be sent to a Grafana instance
53-
to be displayed with a Grafana dashboard, but we didn't realize this was happening until we were too close to launch to fix it.
52+
These metrics are scraped and generated by Prometheus, and should be sent to a Grafana instance to be displayed with
53+
a Grafana dashboard, but we didn't realize this was happening until we were too close to launch to fix it.
5454
It would be wonderful if a future iteration could manipulate the prometheus configuration in the kubernetes example to send its data
5555
to an instance of Grafana, and integrate Grafana's dashboard into Chronos to visualize the data.
5656
*/

‎app/containers/HealthContainer.tsx‎

Lines changed: 6 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -20,22 +20,14 @@ interface DataObject {
2020
}
2121

2222
const HealthContainer: React.FC<HealthContainerProps> = React.memo(props => {
23-
/*
24-
healthData - Pull in all the health data via HealthContext
25-
selectedMetrics - Pull in the list of ALL user-selected metrics via QueryContext as strings, even if they don't pertain to this category.
26-
category - Destructure category from props. This category was passed down from the GraphsContainer and creates a new tab in Chronos to view charts pertaining only to the category.
27-
Think of each <HealthContainer /> as the new tab in Chronos. It will only create charts pertaining to that category.
28-
healthChartsArr - local state that gets updated with an array of <HealthChart />'s that display user-selected data.
29-
`service` - only used to determine if we should display our health charts (because kafka and kubernetes specifically don't use HealthChart to display data).
30-
*/
3123
const { healthData } = useContext(HealthContext);
3224
const { selectedMetrics } = useContext(QueryContext);
3325
const { service } = useParams<keyof Params>() as Params;
3426
const [healthChartsArr, setHealthChartsArr] = useState<JSX.Element[]>([]);
3527
const { category, sizing, colourGenerator } = props;
36-
/*
37-
This function filters the selectedMetrics array down to only metrics that match the category of this instance of HealthContainer.
38-
Once that has finished, it then filters the healthData down to the current category and the filteredMetrics.
28+
/**
29+
* This function filters the selectedMetrics array down to only metrics that match the category of this instance of HealthContainer.
30+
* Once that has finished, it then filters the healthData down to the current category and the filteredMetrics.
3931
*/
4032
const filterSelectedMetricsAndHealthData = (): DataObject => {
4133
// define a filtered health data object for output
@@ -79,9 +71,9 @@ const HealthContainer: React.FC<HealthContainerProps> = React.memo(props => {
7971
// function to create a version of the healthData based on the value type
8072
// current healthData value types: GHz, bytes, temperature, percent, ticks, processes, num, latency
8173
const defineDataValueType = (metricName: string): string => {
82-
/*
83-
define a dictionary of data types where the key is the expected chars to be found in the parameter
84-
and the value is the desired data type label
74+
/**
75+
* Define a dictionary of data types where the key is the expected chars to be found in the parameter
76+
* and the value is the desired data type label.
8577
*/
8678
const typeDictionary = {
8779
GHz: 'Speed in GHz',

0 commit comments

Comments
 (0)