Skip to content

Commit 8595d21

Browse files
rlunarrlunar
authored
Merge pull request #4 from aws-samples/rdbms/connection-sharing
add support for connection sharing
2 parents 104de45 + 732c269 commit 8595d21

31 files changed

+4653
-9873
lines changed

‎frontend/src/components/ChartCLW01.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -138,7 +138,7 @@ const ChartCLW = memo(({title,subtitle,height,color,namespace,dimension_name,dim
138138
data.data.MetricDataResults.forEach(function(item) {
139139

140140
currentData.push({name : item.Label, data : item.Values.reverse()});
141-
average = item.Values.reduce((a, b) => a + b, 0) / item.Values.length;
141+
average = item.Values.reduce((a, b) => ( a || 0 ) + ( b || 0 ) , 0) / item.Values.length;
142142
max = Math.max(...item.Values);
143143
min = Math.min(...item.Values);
144144
switch (format) {
@@ -236,7 +236,7 @@ const ChartCLW = memo(({title,subtitle,height,color,namespace,dimension_name,dim
236236
<table style={{"width":"100%"}}>
237237
<tr>
238238
<td style={{"width":"30%", "text-align":"center"}}>
239-
<span style={{"font-size": "26px", "font-weight": "500","font-family": "Orbitron", "color": font_color_value }}>{chartData.metric}</span>
239+
<span style={{"font-size": "22px", "font-weight": "500","font-family": "Orbitron", "color": font_color_value }}>{chartData.metric}</span>
240240
<br/>
241241
<span style={{"font-size": "10px", "font-weight": "500", }}>{subtitle}</span>
242242
<br/>

‎frontend/src/components/ChartCLW02.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -176,7 +176,7 @@ const ChartCLW = memo(({title,subtitle,height,color,namespace,dimension_name,dim
176176
data.data.MetricDataResults.forEach(function(item) {
177177

178178
currentData.push({name : item.Label, data : item.Values.reverse()});
179-
average = item.Values.reduce((a, b) => a + b, 0) / item.Values.length ;
179+
average = item.Values.reduce((a, b) => ( a || 0 ) + ( b || 0 ), 0) / item.Values.length ;
180180
averageGlobal = averageGlobal + average;
181181
max = Math.max(...item.Values);
182182
min = Math.min(...item.Values);

‎frontend/src/components/ChartCLW03.js

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -216,20 +216,19 @@ const ChartCLW = memo(({title,subtitle,height,color,namespace,dimension_name,dim
216216
})
217217

218218
averageGlobal = averageGlobal / data.data.MetricDataResults.length;
219-
var lastValueTotal = lastValue.reduce((a, b) => a + b, 0);
219+
var lastValueTotal = lastValue.reduce((a, b) => (a || 0) + (b || 0), 0);
220220
var metricValue = 0;
221221

222222
switch (current_metric_mode) {
223223
case "total":
224-
metricValue = lastValueTotal;
224+
metricValue = (lastValueTotal || 0 );
225225
break;
226226
case "average":
227-
metricValue = lastValueTotal / lastValue.length; ;
227+
metricValue = (lastValueTotal / lastValue.length) || 0;
228228
break;
229229

230230
}
231231

232-
233232
switch (format) {
234233
case 1:
235234
metric = (CustomFormatNumberRaw(metricValue,metric_precision)) || 0;

‎frontend/src/components/CompAuroraNode01.js

Lines changed: 3 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import { useState, useEffect, useRef, memo } from 'react'
2-
import Axios from 'axios';
1+
import { useState, useRef, memo } from 'react'
32
import ChartLine02 from './ChartLine02';
43
import ChartRadialBar01 from './ChartRadialBar01';
54

@@ -13,16 +12,13 @@ import CompMetric04 from './Metric04';
1312
import { configuration } from './../pages/Configs';
1413
import Badge from "@awsui/components-react/badge";
1514
import Link from "@awsui/components-react/link";
16-
import Box from "@awsui/components-react/box";
17-
import Table from "@awsui/components-react/table";
1815
import Header from "@awsui/components-react/header";
1916

2017

2118
const ComponentObject = memo(({ sessionId, clusterId, nodeStats }) => {
2219

2320
const [detailsVisible, setDetailsVisible] = useState(false);
2421
const detailsVisibleState = useRef(false);
25-
const activeSessions = useRef([]);
2622

2723
const columnsTable = [
2824
{id: 'ThreadID',header: 'ThreadID',cell: item => item['ThreadID'],ariaLabel: createLabelFunction('ThreadID'),sortingField: 'ThreadID',},
@@ -38,45 +34,6 @@ const ComponentObject = memo(({ sessionId, clusterId, nodeStats }) => {
3834

3935
const visibleContent = ['ThreadID', 'State', 'Username', 'Host', 'Database', 'Command', 'ElapsedTime', 'SQLText' ];
4036

41-
//-- Function Gather Active Sessions
42-
async function fetchSessions() {
43-
//--- API Call Gather Sessions
44-
if (detailsVisibleState.current == true) {
45-
46-
47-
48-
//--- API Call Gather Sessions
49-
var api_params = {
50-
connectionId: sessionId,
51-
clusterId : clusterId,
52-
instanceId : nodeStats.name,
53-
sql_statement: `
54-
SELECT ID as 'ThreadID',USER as 'Username',HOST as 'Host',DB as 'Database',COMMAND as 'Command',SEC_TO_TIME(TIME) as 'Time',STATE as 'State',INFO as 'SQLText' FROM INFORMATION_SCHEMA.PROCESSLIST WHERE COMMAND <> 'Sleep' AND COMMAND <> 'Daemon' AND CONNECTION_ID()<> ID ORDER BY TIME DESC LIMIT 250
55-
`
56-
};
57-
58-
Axios.get(`${configuration["apps-settings"]["api_url"]}/api/aurora/mysql/cluster/sql/`,{
59-
params: api_params
60-
}).then((data)=>{
61-
62-
activeSessions.current = data.data;
63-
64-
})
65-
.catch((err) => {
66-
console.log('Timeout API Call : /api/aurora/mysql/cluster/sql/' );
67-
console.log(err)
68-
});
69-
70-
71-
72-
}
73-
else {
74-
activeSessions.current = [];
75-
}
76-
77-
}
78-
79-
8037
function onClickNode() {
8138

8239
detailsVisibleState.current = (!(detailsVisibleState.current));
@@ -85,14 +42,6 @@ const ComponentObject = memo(({ sessionId, clusterId, nodeStats }) => {
8542
}
8643

8744

88-
useEffect(() => {
89-
const id = setInterval(fetchSessions, configuration["apps-settings"]["refresh-interval-aurora-pgs-sessions"]);
90-
return () => clearInterval(id);
91-
// eslint-disable-next-line react-hooks/exhaustive-deps
92-
}, []);
93-
94-
95-
9645
return (
9746
<>
9847
<tr>
@@ -104,7 +53,7 @@ const ComponentObject = memo(({ sessionId, clusterId, nodeStats }) => {
10453
<Badge color="red"> R </Badge>
10554
}
10655
{ nodeStats.role === "-" &&
107-
<Badge>-</Badge>
56+
<Badge> - </Badge>
10857
}
10958
&nbsp;
11059
<Link fontSize="body-s" onFollow={() => onClickNode()}>{nodeStats.name}</Link>
@@ -434,7 +383,7 @@ const ComponentObject = memo(({ sessionId, clusterId, nodeStats }) => {
434383
<CustomTable
435384
columnsTable={columnsTable}
436385
visibleContent={visibleContent}
437-
dataset={activeSessions.current}
386+
dataset={nodeStats.sessions}
438387
title={"Active Sessions"}
439388
/>
440389

‎frontend/src/components/CompAuroraNode02.js

Lines changed: 26 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -13,17 +13,13 @@ import CompMetric04 from './Metric04';
1313
import { configuration } from './../pages/Configs';
1414
import Badge from "@awsui/components-react/badge";
1515
import Link from "@awsui/components-react/link";
16-
import Box from "@awsui/components-react/box";
17-
import Table from "@awsui/components-react/table";
1816
import Header from "@awsui/components-react/header";
1917

2018
const ComponentObject = memo(({ sessionId, clusterId, nodeStats }) => {
2119

2220
const [detailsVisible, setDetailsVisible] = useState(false);
2321
const detailsVisibleState = useRef(false);
24-
const activeSessions = useRef([]);
25-
26-
22+
2723
const columnsTable = [
2824
{id: 'PID',header: 'PID',cell: item => item['PID'],ariaLabel: createLabelFunction('PID'),sortingField: 'ThreadID',},
2925
{id: 'Username',header: 'Username',cell: item => item['Username'],ariaLabel: createLabelFunction('Username'),sortingField: 'Username',},
@@ -38,45 +34,6 @@ const ComponentObject = memo(({ sessionId, clusterId, nodeStats }) => {
3834

3935
const visibleContent = ['PID', 'Username', 'State', 'Host', 'WaitEvent', 'Database', 'ElapsedTime', 'AppName', 'SQLText' ];
4036

41-
//-- Function Gather Active Sessions
42-
async function fetchSessions() {
43-
//--- API Call Gather Sessions
44-
if (detailsVisibleState.current == true) {
45-
46-
47-
48-
//--- API Call Gather Sessions
49-
var api_params = {
50-
connectionId: sessionId,
51-
clusterId : clusterId,
52-
instanceId : nodeStats.name,
53-
sql_statement: `
54-
select pid as "PID",usename as "Username",state as "State",wait_event as "WaitEvent",datname as "Database",CAST(CURRENT_TIMESTAMP-query_start AS VARCHAR) as "ElapsedTime",application_name as "AppName",client_addr as "Host",query as "SQLText" from pg_stat_activity where pid <> pg_backend_pid() and state = \'active\' order by query_start asc limit 250;
55-
`
56-
};
57-
58-
Axios.get(`${configuration["apps-settings"]["api_url"]}/api/aurora/postgresql/cluster/sql/`,{
59-
params: api_params
60-
}).then((data)=>{
61-
62-
activeSessions.current = data.data.rows;
63-
64-
})
65-
.catch((err) => {
66-
console.log('Timeout API Call : /api/aurora/postgresql/cluster/sql/' );
67-
console.log(err)
68-
});
69-
70-
71-
72-
}
73-
else {
74-
activeSessions.current = [];
75-
}
76-
77-
}
78-
79-
8037
function onClickNode() {
8138

8239
detailsVisibleState.current = (!(detailsVisibleState.current));
@@ -85,13 +42,6 @@ const ComponentObject = memo(({ sessionId, clusterId, nodeStats }) => {
8542
}
8643

8744

88-
useEffect(() => {
89-
const id = setInterval(fetchSessions, configuration["apps-settings"]["refresh-interval-aurora-pgs-sessions"]);
90-
return () => clearInterval(id);
91-
// eslint-disable-next-line react-hooks/exhaustive-deps
92-
}, []);
93-
94-
9545
return (
9646
<>
9747
<tr>
@@ -102,6 +52,9 @@ const ComponentObject = memo(({ sessionId, clusterId, nodeStats }) => {
10252
{ nodeStats.role === "R" &&
10353
<Badge color="red"> R </Badge>
10454
}
55+
{ ( nodeStats.role != "P" && nodeStats.role != "R" ) &&
56+
<Badge> - </Badge>
57+
}
10558
&nbsp;
10659
<Link fontSize="body-s" onFollow={() => onClickNode()}>{nodeStats.name}</Link>
10760
</td>
@@ -131,19 +84,23 @@ const ComponentObject = memo(({ sessionId, clusterId, nodeStats }) => {
13184
chartColorLine={"#D69855"}
13285
/>
13386
</td>
134-
<td style={{"width":"9%", "text-align":"center", "border-top": "1pt solid " + configuration.colors.lines.separator100}}>
135-
<CompMetric01
136-
value={nodeStats.numbackends || 0}
137-
title={""}
87+
<td style={{"width":"9%", "text-align":"center", "border-top": "1pt solid " + configuration.colors.lines.separator100}}>
88+
<CompMetric04
89+
value={nodeStats.tuples || 0}
13890
precision={0}
139-
format={3}
91+
format={1}
92+
height={"30px"}
93+
width={"100px"}
94+
history={20}
95+
type={"line"}
14096
fontSizeValue={"14px"}
14197
fontColorValue={configuration.colors.fonts.metric100}
98+
chartColorLine={"#D69855"}
14299
/>
143100
</td>
144101
<td style={{"width":"9%", "text-align":"center", "border-top": "1pt solid " + configuration.colors.lines.separator100}}>
145102
<CompMetric01
146-
value={(nodeStats.tupInserted + nodeStats.tupDeleted + nodeStats.tupUpdated + nodeStats.tupFetched ) || 0}
103+
value={nodeStats.numbackends || 0}
147104
title={""}
148105
precision={0}
149106
format={3}
@@ -287,16 +244,6 @@ const ComponentObject = memo(({ sessionId, clusterId, nodeStats }) => {
287244
fontSizeValue={"16px"}
288245
/>
289246
</td>
290-
<td style={{"width":"10%", "border-left": "2px solid " + configuration.colors.lines.separator100, "padding-left": "1em"}}>
291-
<CompMetric01
292-
value={nodeStats.tupReturned || 0}
293-
title={"tupReturned/sec"}
294-
precision={0}
295-
format={1}
296-
fontColorValue={configuration.colors.fonts.metric100}
297-
fontSizeValue={"16px"}
298-
/>
299-
</td>
300247
<td style={{"width":"10%", "border-left": "2px solid " + configuration.colors.lines.separator100, "padding-left": "1em"}}>
301248
<CompMetric01
302249
value={nodeStats.tupFetched || 0}
@@ -337,6 +284,16 @@ const ComponentObject = memo(({ sessionId, clusterId, nodeStats }) => {
337284
fontSizeValue={"16px"}
338285
/>
339286
</td>
287+
<td style={{"width":"10%", "border-left": "2px solid " + configuration.colors.lines.separator100, "padding-left": "1em"}}>
288+
<CompMetric01
289+
value={nodeStats.tupReturned || 0}
290+
title={"tupReturned/sec"}
291+
precision={0}
292+
format={1}
293+
fontColorValue={configuration.colors.fonts.metric100}
294+
fontSizeValue={"16px"}
295+
/>
296+
</td>
340297
<td style={{"width":"10%", "border-left": "2px solid " + configuration.colors.lines.separator100, "padding-left": "1em"}}>
341298
<CompMetric01
342299
value={nodeStats.ioreads || 0}
@@ -405,7 +362,6 @@ const ComponentObject = memo(({ sessionId, clusterId, nodeStats }) => {
405362
</td>
406363
<td style={{"width":"33%", "padding-left": "1em"}}>
407364
<ChartLine02 series={JSON.stringify([
408-
nodeStats.history.tupReturned,
409365
nodeStats.history.tupFetched,
410366
nodeStats.history.tupInserted,
411367
nodeStats.history.tupDeleted,
@@ -431,8 +387,9 @@ const ComponentObject = memo(({ sessionId, clusterId, nodeStats }) => {
431387
<CustomTable
432388
columnsTable={columnsTable}
433389
visibleContent={visibleContent}
434-
dataset={activeSessions.current}
390+
dataset={nodeStats['sessions']}
435391
title={"Active Sessions"}
392+
description={"Top 10 database active sessions"}
436393
/>
437394
</div>
438395
</td>

0 commit comments

Comments
 (0)