Skip to content

Commit b1f9535

Browse files
jcpoirier20jcpoirier20
committed
Resolved HealthChart issue.
Updated 'About' tab in Chronos.
1 parent 82af940 commit b1f9535

5 files changed

Lines changed: 113 additions & 122 deletions

File tree

‎app/charts/AwsChart.tsx‎

Lines changed: 59 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ interface SoloStyles {
1919
}
2020

2121
const AwsChart: React.FC<any> = React.memo(props => {
22-
const { renderService, metric, timeList, valueList, colourGenerator } = props;
22+
const { renderService, metric, timeList, valueList, colourGenerator, sizing } = props;
2323
const [solo, setSolo] = useState<SoloStyles | null>(null);
2424
setInterval(() => {
2525
if (solo !== soloStyle) {
@@ -28,71 +28,69 @@ const AwsChart: React.FC<any> = React.memo(props => {
2828
}, 20);
2929

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

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

9191
return (
9292
<div className="chart" data-testid="Health Chart">
93-
{
94-
createChart()
95-
}
93+
{createChart()}
9694
</div>
9795
);
9896
});

‎app/charts/HealthChart.tsx‎

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

42-
// pulls the current service names to be shown in the graph title from chartData
43-
const serviceNamesAsString = (chartDataObject: object): string => {
44-
let serviceNameString = '';
45-
for (const serviceName in chartDataObject) {
46-
serviceNameString += `${serviceName} | `;
47-
}
48-
return serviceNameString;
49-
};
50-
5142
// generates an array of plotly data objects to be passed into our plotly chart's data prop
5243
const generatePlotlyDataObjects = (chartDataObj: object): object[] => {
5344
const arrayOfPlotlyDataObjects: PlotlyData[] = [];
54-
// iterate through the chartData
55-
for (const serviceName in chartDataObj) {
56-
// define the metrics for this service
57-
const metrics = chartDataObj[serviceName];
58-
// loop through the list of metrics for the current service
59-
for (const metricName in metrics) {
60-
// define the value and time arrays; allow data to be reassignable in case we need to convert the bytes data into megabytes
61-
let dataArray = metrics[metricName].value;
62-
const timeArray = metrics[metricName].time;
63-
// specifically for `Megabyte` types, convert the original data of bytes into a value of megabytes before graphing
64-
if (dataType === 'Memory in Megabytes' || dataType === 'Cache in Megabytes') {
65-
dataArray = dataArray.map(value => (value / 1000000).toFixed(2));
66-
}
67-
// create the plotly object
68-
const plotlyDataObject: PlotlyData = {
69-
name: prettyMetricName(metricName),
70-
x: prettyTimeInReverse(timeArray),
71-
y: dataArray,
72-
type: 'scattergl',
73-
mode: 'lines',
74-
marker: {
75-
colors: ['#fc4039', '#4b54ea', '#32b44f', '#3788fc', '#9c27b0', '#febc2c'],
76-
},
77-
};
78-
// push the dataObject into the arrayOfPlotlyDataObjects
79-
arrayOfPlotlyDataObjects.push(plotlyDataObject);
45+
46+
// loop through the list of metrics for the current service
47+
for (const metricName in chartDataObj) {
48+
// define the value and time arrays; allow data to be reassignable in case we need to convert the bytes data into megabytes
49+
let dataArray = chartDataObj[metricName].value;
50+
const timeArray = chartDataObj[metricName].time;
51+
// specifically for `Megabyte` types, convert the original data of bytes into a value of megabytes before graphing
52+
if (dataType === 'Memory in Megabytes' || dataType === 'Cache in Megabytes') {
53+
dataArray = dataArray.map(value => (value / 1000000).toFixed(2));
8054
}
55+
// create the plotly object
56+
const plotlyDataObject: PlotlyData = {
57+
name: prettyMetricName(metricName),
58+
x: prettyTimeInReverse(timeArray),
59+
y: dataArray,
60+
type: 'scattergl',
61+
mode: 'lines',
62+
marker: {
63+
colors: ['#fc4039', '#4b54ea', '#32b44f', '#3788fc', '#9c27b0', '#febc2c'],
64+
},
65+
};
66+
// push the plotlyDataObject into the arrayOfPlotlyDataObjects
67+
arrayOfPlotlyDataObjects.push(plotlyDataObject);
8168
}
8269
// return the array of plotlyDataObject
8370
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/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: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -153,6 +153,10 @@ const HealthContainer: React.FC<HealthContainerProps> = React.memo(props => {
153153
for (const serviceName in serviceObjects) {
154154
// pass down the value of the current data type and service
155155
const chartData = serviceObjects[serviceName];
156+
console.log('dataType: ', dataType);
157+
console.log('current service Object: ', serviceObjects);
158+
console.log('current Service Name: ', serviceName);
159+
console.log('current chartData Object: ', chartData);
156160
chartsArray.push(
157161
<HealthChart
158162
key={'H' + keymaker()}

0 commit comments

Comments
 (0)