Skip to content

Commit 207f957

Browse files
Umius-BrianUmius-Brian
committed
Complete UX color and font overhaul
2 parents fc910fa + 477f08d commit 207f957

22 files changed

Lines changed: 187 additions & 212 deletions

‎app/charts/latency-chart.jsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ const LatencyChart = (props) => {
2020
return (
2121
<Plot
2222
data = {[{
23+
name: 'CPU Latency',
2324
type: 'scatter',
2425
x: xAxis,
2526
y: yAxis,
@@ -31,10 +32,14 @@ const LatencyChart = (props) => {
3132
},
3233
}]}
3334
layout = {{
34-
width: 400,
3535
height: 400,
36-
paper_bgcolor: '#fffbe0',
37-
plot_bgcolor: '#fffbe0',
36+
width: 400,
37+
font: {
38+
color: 'azure',
39+
size: 15
40+
},
41+
paper_bgcolor: '#8BA6B9',
42+
plot_bgcolor: '#8BA6B9',
3843
showlegend: true,
3944
legend: {
4045
orientation: 'h',

‎app/charts/memory-chart.jsx‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ const MemoryChart = (props) => {
3737
{
3838
type: 'scatter',
3939
fill: 'tozeroy',
40-
fillcolor: 'rgb(14, 49, 80)',
40+
fillcolor: 'rgb(193, 225, 220)',
4141
mode: 'none',
4242
x: {autorange: true},
4343
y: free,
@@ -47,7 +47,7 @@ const MemoryChart = (props) => {
4747
{
4848
type: 'scatter',
4949
fill: 'tozeroy',
50-
fillcolor: 'rgba(255, 64, 87, .3)',
50+
fillcolor: 'rgba(255, 235, 148, .3)',
5151
mode: 'none',
5252
x: {autorange: true},
5353
y: used,
@@ -57,7 +57,7 @@ const MemoryChart = (props) => {
5757
{
5858
type: 'scatter',
5959
fill: 'tozeroy',
60-
fillcolor: 'rgba(144, 0, 72, .4)',
60+
fillcolor: 'rgba(253, 212, 117, .4)',
6161
mode: 'none',
6262
x: {autorange: true},
6363
y: active,
@@ -67,10 +67,14 @@ const MemoryChart = (props) => {
6767
{label: xAxis},
6868
]}
6969
layout = {{
70-
width: 400,
7170
height: 400,
72-
paper_bgcolor: '#fffbe0',
73-
plot_bgcolor: '#fffbe0',
71+
width: 400,
72+
font: {
73+
color: 'azure',
74+
size: 15
75+
},
76+
paper_bgcolor: '#8BA6B9',
77+
plot_bgcolor: '#8BA6B9',
7478
legend: {
7579
itemsizing: 'constant',
7680
orientation: 'h',

‎app/charts/microservice-traffic.jsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -94,10 +94,14 @@ const MicroServiceTraffic = (props) => {
9494
}]}
9595
layout = {
9696
{
97-
width: 400,
9897
height: 400,
99-
paper_bgcolor: '#fffbe0',
100-
plot_bgcolor: '#fffbe0',
98+
width: 400,
99+
font: {
100+
color: 'azure',
101+
size: 15
102+
},
103+
paper_bgcolor: '#8BA6B9',
104+
plot_bgcolor: '#8BA6B9',
101105
legend: {
102106
orientation: 'h',
103107
xanchor: 'center',

‎app/charts/processes-chart.jsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -71,10 +71,14 @@ const ProcessesChart = (props) => {
7171
{label: communicationLabel},
7272
]}
7373
layout = {{
74-
width: 400,
7574
height: 400,
76-
paper_bgcolor: '#fffbe0',
77-
plot_bgcolor: '#fffbe0',
75+
width: 400,
76+
font: {
77+
color: 'azure',
78+
size: 15
79+
},
80+
paper_bgcolor: '#8BA6B9',
81+
plot_bgcolor: '#8BA6B9',
7882
legend: {
7983
itemsizing: 'constant',
8084
orientation: 'h',

‎app/charts/request-type-chart.jsx‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -29,22 +29,27 @@ const RequestTypesChart = (props) => {
2929
values: Object.values(requestObj),
3030
labels: ['DELETE', 'GET', 'PATCH', 'POST', 'PUSH', 'PUT'],
3131
type: 'pie',
32+
name: 'Request Types',
3233
marker: {
3334
'colors': [
34-
'#95e1d3',
35-
'#fce38a',
36-
'#fcbad3',
37-
'#aa96da',
38-
'#a8d8ea',
39-
'#f38181',
35+
'#c1e1dc',
36+
'#008dcb',
37+
'#ffeb94',
38+
'#f47d4a',
39+
'#73605b',
40+
'#d09683',
4041
]
4142
},
4243
}]}
4344
layout = {{
4445
height: 400,
4546
width: 400,
47+
font: {
48+
color: 'azure',
49+
size: 15
50+
},
4651
displaylogo: false,
47-
paper_bgcolor: '#fffbe0',
52+
paper_bgcolor: '#8BA6B9',
4853
legend: {
4954
orientation: 'h',
5055
xanchor: 'center',

‎app/charts/response-code-chart.jsx‎

Lines changed: 51 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -5,22 +5,20 @@ import CommunicationsContext from '../context/OverviewContext';
55
const ResponseCodeChart = (props) => {
66
const communicationsData = useContext(CommunicationsContext).overviewData;
77

8-
9-
108
const createChart = () => {
119
const responseCodes = {
1210
'100-199': 0,
1311
'200-299': 0,
1412
'300-399': 0,
1513
'400-499': 0,
1614
'500-599': 0,
17-
'NULL': 0,
15+
NULL: 0,
1816
};
1917

2018
for (let i = 0; i < communicationsData.length; i += 1) {
2119
const element = communicationsData[i];
2220
// If Mongo Else SQL
23-
if ((element.currentMicroservice === props.service) && element.resStatus) {
21+
if (element.currentMicroservice === props.service && element.resStatus) {
2422
const statusCode = element.resStatus;
2523
if (statusCode <= 199) {
2624
responseCodes['100-199'] += 1;
@@ -33,9 +31,12 @@ const ResponseCodeChart = (props) => {
3331
} else if (statusCode <= 599) {
3432
responseCodes['500-599'] += 1;
3533
} else {
36-
responseCodes['NULL'] += 1;
34+
responseCodes.NULL += 1;
3735
}
38-
} else if ((element.currentmicroservice === props.service) && element.resstatus) {
36+
} else if (
37+
element.currentmicroservice === props.service &&
38+
element.resstatus
39+
) {
3940
const statusCode = element.resstatus;
4041
if (statusCode <= 199) {
4142
responseCodes['100-199'] += 1;
@@ -48,44 +49,57 @@ const ResponseCodeChart = (props) => {
4849
} else if (statusCode <= 599) {
4950
responseCodes['500-599'] += 1;
5051
} else {
51-
responseCodes['NULL'] += 1;
52+
responseCodes.NULL += 1;
5253
}
5354
}
5455
}
5556

5657
return (
5758
<Plot
58-
data = {[{
59-
values: Object.values(responseCodes),
60-
labels: ['Informational 1xx', 'Successful 2xx', 'Redirection 3xx', 'Client Error 4xx', 'Server Error 5xx'],
61-
type: 'pie',
62-
domain: {y: [0 , 2]},
63-
marker: {
64-
'colors': [
65-
'#f38181',
66-
'#fce38a',
67-
'#fcbad3',
68-
'#95e1d3',
69-
'#a8d8ea',
70-
'#aa96da',
71-
]
72-
}
73-
}]}
74-
layout = {{
75-
height: 400,
76-
width: 400,
77-
displaylogo: false,
78-
paper_bgcolor: '#fffbe0',
79-
legend: {
80-
orientation: 'h',
81-
xanchor: 'center',
82-
x: .5,
83-
y: 5
84-
}
85-
}}
86-
/>)
59+
data={[
60+
{
61+
values: Object.values(responseCodes),
62+
labels: [
63+
'Informational 1xx',
64+
'Successful 2xx',
65+
'Redirection 3xx',
66+
'Client Error 4xx',
67+
'Server Error 5xx',
68+
],
69+
type: 'pie',
70+
domain: { y: [0, 2] },
71+
marker: {
72+
colors: [
73+
'#4897d8',
74+
'#ffdb5c',
75+
'#fa6e59',
76+
'#f8a055',
77+
'#73605b',
78+
'#d09683',
79+
],
80+
},
81+
},
82+
]}
83+
layout={{
84+
height: 400,
85+
width: 400,
86+
font: {
87+
color: 'azure',
88+
size: 15
89+
},
90+
displaylogo: false,
91+
paper_bgcolor: '#8BA6B9',
92+
legend: {
93+
orientation: 'h',
94+
xanchor: 'center',
95+
x: 0.5,
96+
y: 5,
97+
},
98+
}}
99+
/>
100+
);
87101
};
88-
102+
89103
return <div>{createChart()}</div>;
90104
};
91105

‎app/charts/speed-chart.jsx‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -31,19 +31,19 @@ const SpeedChart = (props) => {
3131
type: 'indicator',
3232
value: yAxis[yAxis.length - 1],
3333
title: {'text': "Speed Chart"},
34-
delta: {'reference': 3.5, 'increasing': {'color': "mistyrose"}},
34+
delta: {'reference': 3.5, 'increasing': {'color': 'white'}},
3535
mode: "gauge+number+delta",
3636
gauge: { axis: { range: [null, 8] },
3737
'tickwidth': 1,
38-
'tickcolor': "#fce38a",
39-
'bar': {'color': "#6eb6ff"},
40-
'bordercolor': "#a3de83",
38+
'tickcolor': "#92aac7",
39+
'bar': {'color': "#e1315b"},
40+
'bordercolor': "#a1be95",
4141
'steps': [
42-
{'range': [0, 4], 'color': '#edf798'},
42+
{'range': [0, 4], 'color': '#e2dfa2'},
4343
{'range': [4, 6], 'color': '#fab57a'}
4444
],
4545
'threshold': {
46-
'line': {'color': "red", 'width': 3.5},
46+
'line': {'color': 'white', 'width': 3.5},
4747
'thickness': 0.75,
4848
'value': 7.5
4949
}
@@ -52,7 +52,11 @@ const SpeedChart = (props) => {
5252
layout = {{
5353
height: 400,
5454
width: 400,
55-
paper_bgcolor: '#fffbe0',
55+
font: {
56+
color: 'azure',
57+
size: 15
58+
},
59+
paper_bgcolor: '#8BA6B9',
5660
legend: {
5761
orientation: 'h',
5862
xanchor: 'center',

‎app/charts/temperature-chart.jsx‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ const TemperatureChart = (props) => {
2929
data = {[{
3030
type: 'scatter',
3131
fill: 'tozeroy',
32-
fillcolor: 'rgba(224, 62, 54, .6)',
32+
fillcolor: 'rgba(224, 62, 54, .4)',
3333
mode: 'none',
3434
x: yAxis,
3535
y: xAxis,
@@ -38,10 +38,15 @@ const TemperatureChart = (props) => {
3838
}]}
3939
layout = {
4040
{
41-
width: 400,
4241
height: 400,
43-
paper_bgcolor: '#fffbe0',
44-
plot_bgcolor: '#fffbe0',
42+
width: 400,
43+
font: {
44+
color: 'azure',
45+
size: 15
46+
},
47+
paper_bgcolor: '#8BA6B9',
48+
plot_bgcolor: '#8BA6B9',
49+
4550
legend: {
4651
orientation: 'h',
4752
xanchor: 'center',

‎app/components/ServiceDetails.jsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/* eslint-disable react/jsx-one-expression-per-line */
2-
import React, { useState } from 'react';
2+
import React from 'react';
33
// import Modal from './Modal.jsx';
44
import GraphsContainer from '../containers/GraphsContainer.jsx';
55

@@ -8,9 +8,12 @@ const ServiceDetails = (props) => {
88
// Renders health info detail buttons
99
const { service } = props;
1010

11+
//Capitalize service name
12+
const title = service[0].toUpperCase() + service.substring(1);
13+
1114
return (
1215
<div id="serviceDetailsContainer">
13-
<h3 id="microserviceHealthTitle">Microservice Health - {service}</h3>
16+
<h3 id="microserviceHealthTitle">{title}</h3>
1417
<GraphsContainer service={service} />
1518
</div>
1619
);

‎app/containers/DashboardContainer.jsx‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,14 @@ import SidebarContainer from './SideBarContainer.jsx';
44
import '../stylesheets/dashboard.css';
55

66
const DashboardContainer = () => {
7-
87
const [detailsSelected, setDetails] = useState();
98

109
return (
11-
<div className="servicesDashboardContainer">
10+
<div className="MainDashboardContainer">
1211
<SidebarContainer setDetails={setDetails} />
13-
<div className="databsaseList">
14-
<Monitoring detailsSelected={detailsSelected} />
15-
</div>
12+
<Monitoring detailsSelected={detailsSelected} />
1613
</div>
1714
);
1815
};
1916

2017
export default DashboardContainer;
21-
22-

0 commit comments

Comments
 (0)