Skip to content

Commit

Permalink
Merge pull request #4 from aws-samples/rdbms/connection-sharing
Browse files Browse the repository at this point in the history 
add support for connection sharing
  • Loading branch information
@rlunar
rlunar authored Nov 13, 2023
2 parents 104de45 + 732c269 commit 8595d21
Show file tree
Hide file tree
Showing 31 changed files with 4,653 additions and 9,873 deletions.
4 changes: 2 additions & 2 deletions frontend/src/components/ChartCLW01.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,7 @@ const ChartCLW = memo(({title,subtitle,height,color,namespace,dimension_name,dim
data.data.MetricDataResults.forEach(function(item) {

currentData.push({name : item.Label, data : item.Values.reverse()});
average = item.Values.reduce((a, b) => a + b, 0) / item.Values.length;
average = item.Values.reduce((a, b) => ( a || 0 ) + ( b || 0 ) , 0) / item.Values.length;
max = Math.max(...item.Values);
min = Math.min(...item.Values);
switch (format) {
Expand Down Expand Up @@ -236,7 +236,7 @@ const ChartCLW = memo(({title,subtitle,height,color,namespace,dimension_name,dim
<table style={{"width":"100%"}}>
<tr>
<td style={{"width":"30%", "text-align":"center"}}>
<span style={{"font-size": "26px", "font-weight": "500","font-family": "Orbitron", "color": font_color_value }}>{chartData.metric}</span>
<span style={{"font-size": "22px", "font-weight": "500","font-family": "Orbitron", "color": font_color_value }}>{chartData.metric}</span>
<br/>
<span style={{"font-size": "10px", "font-weight": "500", }}>{subtitle}</span>
<br/>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/ChartCLW02.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -176,7 +176,7 @@ const ChartCLW = memo(({title,subtitle,height,color,namespace,dimension_name,dim
data.data.MetricDataResults.forEach(function(item) {

currentData.push({name : item.Label, data : item.Values.reverse()});
average = item.Values.reduce((a, b) => a + b, 0) / item.Values.length ;
average = item.Values.reduce((a, b) => ( a || 0 ) + ( b || 0 ), 0) / item.Values.length ;
averageGlobal = averageGlobal + average;
max = Math.max(...item.Values);
min = Math.min(...item.Values);
Expand Down
7 changes: 3 additions & 4 deletions frontend/src/components/ChartCLW03.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -216,20 +216,19 @@ const ChartCLW = memo(({title,subtitle,height,color,namespace,dimension_name,dim
})

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

switch (current_metric_mode) {
case "total":
metricValue = lastValueTotal;
metricValue = (lastValueTotal || 0 );
break;
case "average":
metricValue = lastValueTotal / lastValue.length; ;
metricValue = (lastValueTotal / lastValue.length) || 0;
break;

}


switch (format) {
case 1:
metric = (CustomFormatNumberRaw(metricValue,metric_precision)) || 0;
Expand Down
57 changes: 3 additions & 54 deletions frontend/src/components/CompAuroraNode01.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { useState, useEffect, useRef, memo } from 'react'
import Axios from 'axios';
import { useState, useRef, memo } from 'react'
import ChartLine02 from './ChartLine02';
import ChartRadialBar01 from './ChartRadialBar01';

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


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

const [detailsVisible, setDetailsVisible] = useState(false);
const detailsVisibleState = useRef(false);
const activeSessions = useRef([]);

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

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

//-- Function Gather Active Sessions
async function fetchSessions() {
//--- API Call Gather Sessions
if (detailsVisibleState.current == true) {



//--- API Call Gather Sessions
var api_params = {
connectionId: sessionId,
clusterId : clusterId,
instanceId : nodeStats.name,
sql_statement: `
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
`
};

Axios.get(`${configuration["apps-settings"]["api_url"]}/api/aurora/mysql/cluster/sql/`,{
params: api_params
}).then((data)=>{

activeSessions.current = data.data;

})
.catch((err) => {
console.log('Timeout API Call : /api/aurora/mysql/cluster/sql/' );
console.log(err)
});



}
else {
activeSessions.current = [];
}

}


function onClickNode() {

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


useEffect(() => {
const id = setInterval(fetchSessions, configuration["apps-settings"]["refresh-interval-aurora-pgs-sessions"]);
return () => clearInterval(id);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);



return (
<>
<tr>
Expand All @@ -104,7 +53,7 @@ const ComponentObject = memo(({ sessionId, clusterId, nodeStats }) => {
<Badge color="red"> R </Badge>
}
{ nodeStats.role === "-" &&
<Badge>-</Badge>
<Badge> - </Badge>
}
&nbsp;
<Link fontSize="body-s" onFollow={() => onClickNode()}>{nodeStats.name}</Link>
Expand Down Expand Up @@ -434,7 +383,7 @@ const ComponentObject = memo(({ sessionId, clusterId, nodeStats }) => {
<CustomTable
columnsTable={columnsTable}
visibleContent={visibleContent}
dataset={activeSessions.current}
dataset={nodeStats.sessions}
title={"Active Sessions"}
/>

Expand Down
95 changes: 26 additions & 69 deletions frontend/src/components/CompAuroraNode02.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,17 +13,13 @@ import CompMetric04 from './Metric04';
import { configuration } from './../pages/Configs';
import Badge from "@awsui/components-react/badge";
import Link from "@awsui/components-react/link";
import Box from "@awsui/components-react/box";
import Table from "@awsui/components-react/table";
import Header from "@awsui/components-react/header";

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

const [detailsVisible, setDetailsVisible] = useState(false);
const detailsVisibleState = useRef(false);
const activeSessions = useRef([]);



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

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

//-- Function Gather Active Sessions
async function fetchSessions() {
//--- API Call Gather Sessions
if (detailsVisibleState.current == true) {



//--- API Call Gather Sessions
var api_params = {
connectionId: sessionId,
clusterId : clusterId,
instanceId : nodeStats.name,
sql_statement: `
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;
`
};

Axios.get(`${configuration["apps-settings"]["api_url"]}/api/aurora/postgresql/cluster/sql/`,{
params: api_params
}).then((data)=>{

activeSessions.current = data.data.rows;

})
.catch((err) => {
console.log('Timeout API Call : /api/aurora/postgresql/cluster/sql/' );
console.log(err)
});



}
else {
activeSessions.current = [];
}

}


function onClickNode() {

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


useEffect(() => {
const id = setInterval(fetchSessions, configuration["apps-settings"]["refresh-interval-aurora-pgs-sessions"]);
return () => clearInterval(id);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);


return (
<>
<tr>
Expand All @@ -102,6 +52,9 @@ const ComponentObject = memo(({ sessionId, clusterId, nodeStats }) => {
{ nodeStats.role === "R" &&
<Badge color="red"> R </Badge>
}
{ ( nodeStats.role != "P" && nodeStats.role != "R" ) &&
<Badge> - </Badge>
}
&nbsp;
<Link fontSize="body-s" onFollow={() => onClickNode()}>{nodeStats.name}</Link>
</td>
Expand Down Expand Up @@ -131,19 +84,23 @@ const ComponentObject = memo(({ sessionId, clusterId, nodeStats }) => {
chartColorLine={"#D69855"}
/>
</td>
<td style={{"width":"9%", "text-align":"center", "border-top": "1pt solid " + configuration.colors.lines.separator100}}>
<CompMetric01
value={nodeStats.numbackends || 0}
title={""}
<td style={{"width":"9%", "text-align":"center", "border-top": "1pt solid " + configuration.colors.lines.separator100}}>
<CompMetric04
value={nodeStats.tuples || 0}
precision={0}
format={3}
format={1}
height={"30px"}
width={"100px"}
history={20}
type={"line"}
fontSizeValue={"14px"}
fontColorValue={configuration.colors.fonts.metric100}
chartColorLine={"#D69855"}
/>
</td>
<td style={{"width":"9%", "text-align":"center", "border-top": "1pt solid " + configuration.colors.lines.separator100}}>
<CompMetric01
value={(nodeStats.tupInserted + nodeStats.tupDeleted + nodeStats.tupUpdated + nodeStats.tupFetched ) || 0}
value={nodeStats.numbackends || 0}
title={""}
precision={0}
format={3}
Expand Down Expand Up @@ -287,16 +244,6 @@ const ComponentObject = memo(({ sessionId, clusterId, nodeStats }) => {
fontSizeValue={"16px"}
/>
</td>
<td style={{"width":"10%", "border-left": "2px solid " + configuration.colors.lines.separator100, "padding-left": "1em"}}>
<CompMetric01
value={nodeStats.tupReturned || 0}
title={"tupReturned/sec"}
precision={0}
format={1}
fontColorValue={configuration.colors.fonts.metric100}
fontSizeValue={"16px"}
/>
</td>
<td style={{"width":"10%", "border-left": "2px solid " + configuration.colors.lines.separator100, "padding-left": "1em"}}>
<CompMetric01
value={nodeStats.tupFetched || 0}
Expand Down Expand Up @@ -337,6 +284,16 @@ const ComponentObject = memo(({ sessionId, clusterId, nodeStats }) => {
fontSizeValue={"16px"}
/>
</td>
<td style={{"width":"10%", "border-left": "2px solid " + configuration.colors.lines.separator100, "padding-left": "1em"}}>
<CompMetric01
value={nodeStats.tupReturned || 0}
title={"tupReturned/sec"}
precision={0}
format={1}
fontColorValue={configuration.colors.fonts.metric100}
fontSizeValue={"16px"}
/>
</td>
<td style={{"width":"10%", "border-left": "2px solid " + configuration.colors.lines.separator100, "padding-left": "1em"}}>
<CompMetric01
value={nodeStats.ioreads || 0}
Expand Down Expand Up @@ -405,7 +362,6 @@ const ComponentObject = memo(({ sessionId, clusterId, nodeStats }) => {
</td>
<td style={{"width":"33%", "padding-left": "1em"}}>
<ChartLine02 series={JSON.stringify([
nodeStats.history.tupReturned,
nodeStats.history.tupFetched,
nodeStats.history.tupInserted,
nodeStats.history.tupDeleted,
Expand All @@ -431,8 +387,9 @@ const ComponentObject = memo(({ sessionId, clusterId, nodeStats }) => {
<CustomTable
columnsTable={columnsTable}
visibleContent={visibleContent}
dataset={activeSessions.current}
dataset={nodeStats['sessions']}
title={"Active Sessions"}
description={"Top 10 database active sessions"}
/>
</div>
</td>
Expand Down
Loading

0 comments on commit 8595d21

Please sign in to comment.