Skip to content

Commit 5ed4ab7

Browse files
snmatussnmatus
authored
Merge pull request #20 from aws-samples/aurora/limitless
improve gui for aurora limitless
2 parents 0e53652 + 29e4a2c commit 5ed4ab7

File tree

15 files changed

+1943
-689
lines changed

15 files changed

+1943
-689
lines changed

‎conf/update.sh‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,11 @@ git clone https://github.com/GitHubRepository/db-top-monitoring.git
99
cd db-top-monitoring
1010
sudo cp -r server frontend /aws/apps
1111

12+
#Copy aws-exports.json
13+
cp /aws/apps/conf/aws-exports.json /aws/apps/frontend/public/
14+
cp /aws/apps/conf/aws-exports.json /aws/apps/server/
15+
16+
1217
#React Application Installation
1318
cd /aws/apps/frontend/; npm install; npm run build;
1419

‎frontend/public/version.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
{
2-
"release": "0.1.1",
3-
"date":"2023-09-01"
2+
"release": "0.1.5",
3+
"date":"2025-01-06"
44
}

‎frontend/src/components/ChartArea03.js‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
import {memo} from 'react';
2+
import Chart from 'react-apexcharts';
3+
4+
const ChartLine = memo(({series, categories,history, height, width="100%", title, border=2, stacked=false }) => {
5+
6+
var options = {
7+
chart: {
8+
height: height,
9+
type: 'area',
10+
foreColor: '#9e9b9a',
11+
stacked : stacked,
12+
zoom: {
13+
enabled: false
14+
},
15+
animations: {
16+
enabled: true,
17+
},
18+
dynamicAnimation :
19+
{
20+
enabled: true,
21+
},
22+
toolbar: {
23+
show: false,
24+
},
25+
dropShadow: {
26+
enabled: false,
27+
top: 2,
28+
left: 2,
29+
blur: 4,
30+
opacity: 1,
31+
}
32+
33+
},
34+
markers: {
35+
size: 5,
36+
radius: 0,
37+
strokeWidth: 2,
38+
fillOpacity: 1,
39+
shape: "circle",
40+
},
41+
dataLabels: {
42+
enabled: false
43+
},
44+
legend: {
45+
show: true,
46+
showForSingleSeries: true,
47+
fontSize: '11px',
48+
fontFamily: 'Lato',
49+
},
50+
theme: {
51+
palette : "palette2",
52+
monochrome: {
53+
enabled: true
54+
}
55+
},
56+
stroke: {
57+
curve: 'straight',
58+
width: border
59+
},
60+
title: {
61+
text : title,
62+
align: "center",
63+
show: false,
64+
style: {
65+
fontSize: '14px',
66+
fontWeight: 'bold',
67+
fontFamily: 'Lato',
68+
}
69+
70+
},
71+
grid: {
72+
show: false,
73+
yaxis: {
74+
lines: {
75+
show: false
76+
}
77+
},
78+
xaxis: {
79+
lines: {
80+
show: false
81+
}
82+
}
83+
},
84+
tooltip: {
85+
theme: "dark",
86+
x : {
87+
format: 'HH:mm',
88+
}
89+
},
90+
xaxis: {
91+
type: 'datetime',
92+
labels: {
93+
format: 'HH:mm',
94+
style: {
95+
fontSize: '11px',
96+
fontFamily: 'Lato',
97+
},
98+
}
99+
},
100+
yaxis: {
101+
tickAmount: 5,
102+
axisTicks: {
103+
show: true,
104+
},
105+
axisBorder: {
106+
show: true,
107+
color: '#78909C',
108+
offsetX: 0,
109+
offsetY: 0
110+
},
111+
min : 0,
112+
labels : {
113+
formatter: function(val, index) {
114+
115+
if(val === 0) return '0';
116+
if(val < 1000) return parseFloat(val).toFixed(1);
117+
118+
var k = 1000,
119+
sizes = ['', 'K', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y'],
120+
i = Math.floor(Math.log(val) / Math.log(k));
121+
return parseFloat((val / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
122+
123+
},
124+
style: {
125+
fontSize: '11px',
126+
fontFamily: 'Lato',
127+
},
128+
},
129+
130+
}
131+
};
132+
133+
134+
return (
135+
<div>
136+
<Chart options={options} series={JSON.parse(series)} type="area" width={width} height={height} />
137+
</div>
138+
);
139+
});
140+
141+
export default ChartLine;

‎frontend/src/components/ChartBar01.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,13 @@ import {memo} from 'react';
22
import Chart from 'react-apexcharts';
33

44

5-
const ChartBar = memo(({series,history, height, width="100%", title, colors=[], border=2, timestamp }) => {
5+
const ChartBar = memo(({series,history, height, width="100%", title, colors=[], border=2, timestamp, stacked=false }) => {
66

77
var options = {
88
chart: {
99
height: height,
1010
type: 'bar',
11+
stacked : stacked,
1112
foreColor: '#2ea597',
1213
zoom: {
1314
enabled: false
@@ -33,6 +34,9 @@ const ChartBar = memo(({series,history, height, width="100%", title, colors=[],
3334
curve: 'smooth',
3435
width: 1
3536
},
37+
theme: {
38+
palette : "palette2"
39+
},
3640
markers: {
3741
size: 3,
3842
strokeWidth: 0,

‎frontend/src/components/ChartBar05.js‎

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
import {memo} from 'react';
2+
import Chart from 'react-apexcharts';
3+
4+
5+
const ChartBar = memo(({series,history, height, width="100%", title, colors=[], border=2, timestamp, maximum=100 }) => {
6+
7+
var options = {
8+
chart: {
9+
height: height,
10+
type: 'bar',
11+
foreColor: '#2ea597',
12+
zoom: {
13+
enabled: false
14+
},
15+
animations: {
16+
enabled: true,
17+
easing: 'easeinout',
18+
},
19+
dynamicAnimation :
20+
{
21+
enabled: true,
22+
},
23+
toolbar: {
24+
show: false,
25+
}
26+
27+
},
28+
dataLabels: {
29+
enabled: false
30+
},
31+
colors : colors,
32+
stroke: {
33+
curve: 'smooth',
34+
width: 1
35+
},
36+
markers: {
37+
size: 3,
38+
strokeWidth: 0,
39+
hover: {
40+
size: 9
41+
}
42+
},
43+
plotOptions: {
44+
bar: {
45+
borderRadius: 2,
46+
47+
}
48+
},
49+
tooltip: {
50+
theme: "dark",
51+
x : {
52+
format: 'HH:mm',
53+
}
54+
},
55+
title: {
56+
text : title,
57+
align: "center",
58+
show: false,
59+
style: {
60+
fontSize: '14px',
61+
fontWeight: 'bold',
62+
fontFamily: "Lato",
63+
color : "#2ea597"
64+
}
65+
66+
},
67+
grid: {
68+
show: false,
69+
yaxis: {
70+
lines: {
71+
show: false
72+
}
73+
},
74+
xaxis: {
75+
lines: {
76+
show: false
77+
}
78+
}
79+
},
80+
xaxis: {
81+
type: 'datetime',
82+
labels: {
83+
format: 'HH:mm',
84+
style: {
85+
fontSize: '11px',
86+
fontFamily: 'Lato',
87+
},
88+
}
89+
},
90+
yaxis: {
91+
tickAmount: 5,
92+
axisTicks: {
93+
show: true,
94+
},
95+
axisBorder: {
96+
show: true,
97+
color: '#78909C',
98+
offsetX: 0,
99+
offsetY: 0
100+
},
101+
min : 0,
102+
max : maximum,
103+
labels : {
104+
formatter: function(val, index) {
105+
106+
if(val === 0) return '0';
107+
if(val < 1000) return parseFloat(val).toFixed(0);
108+
109+
var k = 1000,
110+
sizes = ['', 'K', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y'],
111+
i = Math.floor(Math.log(val) / Math.log(k));
112+
return parseFloat((val / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
113+
114+
},
115+
style: {
116+
fontSize: '11px',
117+
fontFamily: 'Lato',
118+
},
119+
},
120+
121+
},
122+
annotations: {
123+
yaxis: [
124+
{
125+
y: maximum,
126+
strokeDashArray: 10,
127+
borderColor: 'gray'
128+
},
129+
],
130+
},
131+
};
132+
133+
function CustomFormatNumberData(value,decimalLength) {
134+
if(value == 0) return '0';
135+
if(value < 1024) return parseFloat(value).toFixed(decimalLength);
136+
137+
var k = 1024,
138+
sizes = ['', 'K', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y'],
139+
i = Math.floor(Math.log(value) / Math.log(k));
140+
return parseFloat((value / Math.pow(k, i)).toFixed(decimalLength)) + ' ' + sizes[i];
141+
}
142+
143+
return (
144+
<div>
145+
<Chart options={options} series={JSON.parse(series)} type="bar" width={width} height={height} />
146+
</div>
147+
);
148+
});
149+
150+
export default ChartBar;

‎frontend/src/components/ChartLine04.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import {memo} from 'react';
22
import Chart from 'react-apexcharts';
33

4-
const ChartLine = memo(({series, categories,history, height, width="100%", title, border=2 }) => {
4+
const ChartLine = memo(({series, categories,history, height, width="100%", title, border=2, stacked = false }) => {
55

66
var options = {
77
chart: {
88
height: height,
99
type: 'line',
10-
foreColor: '#9e9b9a',
10+
foreColor: '#9e9b9a',
11+
stacked : stacked,
1112
zoom: {
1213
enabled: false
1314
},

0 commit comments

Comments
 (0)