Skip to content

Commit 06d0251

Browse files
alon25alon25
committed
Styling Merged
2 parents abc50da + 29dd8a0 commit 06d0251

17 files changed

Lines changed: 94 additions & 139 deletions

‎app/AComp/SidebarHeader.jsx‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,12 @@ import '../stylesheets/SidebarHeader.css';
44
const Header = (props) => {
55
return (
66
<>
7-
<div className="logoAndTitle">
87
<img
98
alt="Chronos Logo"
109
src="app/assets/icon2Cropped.png"
1110
id="serviceDashLogo"
1211
/>
13-
</div>
14-
<div className="left-top">
1512
<h2 className="dashboardHeader">Databases</h2>
16-
</div>
1713
</>
1814
);
1915
};

‎app/charts/latency-chart.jsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,18 +28,18 @@ const LatencyChart = (props) => {
2828
rangemode: 'nonnegative',
2929
name: `${props.service} CPU Latency`,
3030
marker: {
31-
color: '#155263',
31+
color: 'rgb(218, 170, 23',
3232
},
3333
}]}
3434
layout = {{
3535
height: 400,
3636
width: 650,
3737
font: {
38-
color: 'azure',
38+
color: 'black',
3939
size: 15
4040
},
41-
paper_bgcolor: '#8BA6B9',
42-
plot_bgcolor: '#8BA6B9',
41+
paper_bgcolor: 'white',
42+
plot_bgcolor: 'white',
4343
showlegend: true,
4444
legend: {
4545
orientation: 'h',

‎app/charts/memory-chart.jsx‎

Lines changed: 6 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(193, 225, 220)',
40+
fillcolor: 'rgb(0, 237, 160)',
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, 235, 148, .3)',
50+
fillcolor: 'rgba(0, 237, 160, .5)',
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(253, 212, 117, .4)',
60+
fillcolor: 'rgba(74, 78, 238, .7)',
6161
mode: 'none',
6262
x: {autorange: true},
6363
y: active,
@@ -70,11 +70,11 @@ const MemoryChart = (props) => {
7070
height: 400,
7171
width: 400,
7272
font: {
73-
color: 'azure',
73+
color: 'black',
7474
size: 15
7575
},
76-
paper_bgcolor: '#8BA6B9',
77-
plot_bgcolor: '#8BA6B9',
76+
paper_bgcolor: 'white',
77+
plot_bgcolor: 'white',
7878
legend: {
7979
itemsizing: 'constant',
8080
orientation: 'h',

‎app/charts/microservice-traffic.jsx‎

Lines changed: 18 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -76,36 +76,28 @@ const MicroServiceTraffic = (props) => {
7676
};
7777

7878
return (
79-
<div className="trafficChart">
80-
<Plot
81-
data={[
82-
{
83-
type: 'bar',
84-
x: [
85-
'Orders',
86-
'Customers',
87-
'Books',
88-
'Reverse-Proxy',
89-
'ReverseProxy',
90-
],
91-
y: [...serverPingCount, 0, yAxisHeadRoom],
92-
fill: 'tozeroy',
93-
marker: { color: '#5C80FF' },
94-
opacity: 0.7,
95-
mode: 'none',
96-
name: 'Times Server Pinged',
97-
showlegend: true,
98-
},
99-
]}
100-
layout={{
79+
<Plot
80+
data = {[{
81+
type: 'bar',
82+
x: ['Orders', 'Customers', 'Books', 'Reverse-Proxy', 'ReverseProxy'],
83+
y: [...serverPingCount, 0, yAxisHeadRoom],
84+
fill: 'tozeroy',
85+
marker: {'color': '#5C80FF'},
86+
// opacity: .7,
87+
mode: 'none',
88+
name: 'Times Server Pinged',
89+
showlegend: true
90+
}]}
91+
layout = {
92+
{
10193
height: 400,
10294
width: 400,
10395
font: {
104-
color: 'azure',
105-
size: 15,
96+
color: 'black',
97+
size: 15
10698
},
107-
paper_bgcolor: '#8BA6B9',
108-
plot_bgcolor: '#8BA6B9',
99+
paper_bgcolor: 'white',
100+
plot_bgcolor: 'white',
109101
legend: {
110102
orientation: 'h',
111103
xanchor: 'center',
@@ -115,7 +107,6 @@ const MicroServiceTraffic = (props) => {
115107
yaxis: { rangemode: 'nonnegative' },
116108
}}
117109
/>
118-
</div>
119110
);
120111
};
121112

‎app/charts/processes-chart.jsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ const ProcessesChart = (props) => {
4343
rangemode: 'nonnegative',
4444
name: 'Running Processes',
4545
marker: {
46-
color: '#3ec1d3',
46+
color: '#00d3f2',
4747
size: 3
4848
}},
4949
{
@@ -54,7 +54,7 @@ const ProcessesChart = (props) => {
5454
rangemode: 'nonnegative',
5555
name: 'Blocked Processes',
5656
marker: {
57-
color: '#ff9a00',
57+
color: '#00eda0',
5858
size: 3
5959
}},
6060
{
@@ -65,7 +65,7 @@ const ProcessesChart = (props) => {
6565
rangemode: 'nonnegative',
6666
name: 'Sleeping Processes',
6767
marker: {
68-
color: '#ff165d',
68+
color: '#4a4eee',
6969
size: 3
7070
}},
7171
{label: communicationLabel},
@@ -74,11 +74,11 @@ const ProcessesChart = (props) => {
7474
height: 400,
7575
width: 650,
7676
font: {
77-
color: 'azure',
77+
color: 'black',
7878
size: 15
7979
},
80-
paper_bgcolor: '#8BA6B9',
81-
plot_bgcolor: '#8BA6B9',
80+
paper_bgcolor: 'white',
81+
plot_bgcolor: 'white',
8282
legend: {
8383
itemsizing: 'constant',
8484
orientation: 'h',

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -32,10 +32,10 @@ const RequestTypesChart = (props) => {
3232
name: 'Request Types',
3333
marker: {
3434
'colors': [
35-
'#c1e1dc',
36-
'#8369E3',
37-
'#ffeb94',
38-
'#69C9E3',
35+
'#fa1a58',
36+
'#4a4eee',
37+
'#00eda0',
38+
'#00d3f2',
3939
'#73605b',
4040
'#d09683',
4141
]
@@ -45,11 +45,11 @@ const RequestTypesChart = (props) => {
4545
height: 400,
4646
width: 400,
4747
font: {
48-
color: 'azure',
48+
color: 'black',
4949
size: 15
5050
},
5151
displaylogo: false,
52-
paper_bgcolor: '#8BA6B9',
52+
paper_bgcolor: 'white',
5353
legend: {
5454
orientation: 'h',
5555
xanchor: 'center',

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -70,10 +70,10 @@ const ResponseCodeChart = (props) => {
7070
domain: { y: [0, 2] },
7171
marker: {
7272
colors: [
73-
'#4897d8',
74-
'#ffd480',
75-
'#fffe9f',
76-
'#f8a055',
73+
'#fa1a58',
74+
'#f3f5fa',
75+
'#00eda0',
76+
'#00fff2',
7777
'#73605b',
7878
],
7979
},
@@ -83,11 +83,11 @@ const ResponseCodeChart = (props) => {
8383
height: 400,
8484
width: 400,
8585
font: {
86-
color: 'azure',
86+
color: 'black',
8787
size: 15
8888
},
8989
displaylogo: false,
90-
paper_bgcolor: '#8BA6B9',
90+
paper_bgcolor: 'white',
9191
legend: {
9292
orientation: 'h',
9393
xanchor: 'center',

‎app/charts/speed-chart.jsx‎

Lines changed: 8 additions & 8 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, 'decreasing': {'color': 'mistyrose'}},
34+
delta: {'reference': 3.5, 'decreasing': {'color': '#FA1A58'}},
3535
mode: "gauge+number+delta",
3636
gauge: { axis: { range: [null, 8] },
3737
'tickwidth': 1,
38-
'tickcolor': 'mistyrose',
39-
'bar': {'color': "#e1315b"},
38+
'tickcolor': '#FA1A58',
39+
'bar': {'color': '#00eda0'},
4040
'bordercolor': "#a1be95",
4141
'steps': [
42-
{'range': [0, 4], 'color': '#e2dfa2'},
43-
{'range': [4, 6], 'color': '#fab57a'}
42+
{'range': [0, 4], 'color': '#fef5fa'},
43+
{'range': [4, 6], 'color': '#4a4eee'}
4444
],
4545
'threshold': {
46-
'line': {'color': 'mistyrose', 'width': 3.5},
46+
'line': {'color': '#FA1A58', 'width': 3.5},
4747
'thickness': 0.75,
4848
'value': 7.5
4949
}
@@ -53,10 +53,10 @@ const SpeedChart = (props) => {
5353
height: 250,
5454
width: 250,
5555
font: {
56-
color: 'Black',
56+
color: 'black',
5757
size: 15
5858
},
59-
borderRadius: 10,
59+
paper_bgcolor: 'white',
6060
legend: {
6161
orientation: 'h',
6262
xanchor: 'center',

‎app/charts/temperature-chart.jsx‎

Lines changed: 4 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, .4)',
32+
fillcolor: 'rgb(250, 26, 88)',
3333
mode: 'none',
3434
x: yAxis,
3535
y: xAxis,
@@ -41,11 +41,11 @@ const TemperatureChart = (props) => {
4141
height: 400,
4242
width: 400,
4343
font: {
44-
color: 'azure',
44+
color: 'black',
4545
size: 15
4646
},
47-
paper_bgcolor: '#8BA6B9',
48-
plot_bgcolor: '#8BA6B9',
47+
paper_bgcolor: 'white',
48+
plot_bgcolor: 'white',
4949

5050
legend: {
5151
orientation: 'h',

‎app/containers/SideBarContainer.jsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -59,16 +59,16 @@ const SidebarContainer = (props) => {
5959
context={serviceList}
6060
Click={ServicesClick}
6161
isclicked={isclicked}
62-
/>
62+
/>
6363
{isclicked === 'true' ? (
6464
<ServicesList index={index} setDetails={setDetails} />
65-
) : null}
65+
) : null}
6666
<Extras
6767
AddClick={AddClick}
6868
DeleteClick={DeleteClick}
6969
RefreshClick={RefreshClick}
70-
/>
71-
</div>
70+
/>
71+
</div>
7272
</div>
7373
);
7474
};

0 commit comments

Comments
 (0)