[v16] display all security group rules for a port range

web/packages/teleport/src/Discover/Database/EnrollRdsDatabase/SingleEnrollment.tsx

@@ -201,7 +201,7 @@ export function SingleEnrollment({
     <>
       {showTable && (
         <>
-          <Text mt={3}>Select an RDS to enroll:</Text>
+          <Text mt={3}>Select an RDS database to enroll:</Text>
           <DatabaseList
             wantAutoDiscover={false}
             items={tableData?.items || []}

web/packages/teleport/src/Discover/Shared/SecurityGroupPicker/SecurityGroupPicker.tsx

@@ -27,6 +27,7 @@ import { FetchStatus } from 'design/DataTable/types';
 import { Attempt } from 'shared/hooks/useAttemptNext';
 
 import { SecurityGroup } from 'teleport/services/integrations';
+import { SecurityGroupRule } from 'teleport/services/integrations';
 
 import { SecurityGroupRulesDialog } from './SecurityGroupRulesDialog';
 
@@ -43,7 +44,8 @@ type Props = {
 };
 
 export type ViewRulesSelection = {
-  sg: SecurityGroup;
+  name: string;
+  rules: ExpandedSecurityGroupRule[];
   ruleType: 'inbound' | 'outbound';
 };
 
@@ -102,15 +104,20 @@ export const SecurityGroupPicker = ({
             altKey: 'inboundRules',
             headerText: 'Inbound Rules',
             render: sg => {
+              const rules = expandSecurityGroupRules(sg.inboundRules);
               return (
                 <Cell>
                   <Link
                     style={{ cursor: 'pointer' }}
                     onClick={() =>
-                      setViewRulesSelection({ sg, ruleType: 'inbound' })
+                      setViewRulesSelection({
+                        name: sg.name,
+                        rules: rules,
+                        ruleType: 'inbound',
+                      })
                     }
                   >
-                    View ({sg.inboundRules.length})
+                    View ({rules.length})
                   </Link>
                 </Cell>
               );
@@ -120,15 +127,20 @@ export const SecurityGroupPicker = ({
             altKey: 'outboundRules',
             headerText: 'Outbound Rules',
             render: sg => {
+              const rules = expandSecurityGroupRules(sg.outboundRules);
               return (
                 <Cell>
                   <Link
                     style={{ cursor: 'pointer' }}
                     onClick={() =>
-                      setViewRulesSelection({ sg, ruleType: 'outbound' })
+                      setViewRulesSelection({
+                        name: sg.name,
+                        rules: rules,
+                        ruleType: 'outbound',
+                      })
                     }
                   >
-                    View ({sg.outboundRules.length})
+                    View ({rules.length})
                   </Link>
                 </Cell>
               );
@@ -178,3 +190,39 @@ function CheckboxCell({
     </Cell>
   );
 }
+
+type ExpandedSecurityGroupRule = {
+  // IPProtocol is the protocol used to describe the rule.
+  ipProtocol: string;
+  // FromPort is the inclusive start of the Port range for the Rule.
+  fromPort: string;
+  // ToPort is the inclusive end of the Port range for the Rule.
+  toPort: string;
+  // Source is IP range, security group ID, or prefix list that the rule applies to.
+  source: string;
+  // Description contains a small text describing the source.
+  description: string;
+};
+
+// expandSecurityGroupRule takes a security group rule in the compact form that
+// AWS API returns, wherein rules are grouped by port range, and expands the
+// rule into a list of rules that is not grouped by port range.
+// This is the same display format that the AWS console uses when you view a
+// security group's rules.
+function expandSecurityGroupRule(
+  rule: SecurityGroupRule
+): ExpandedSecurityGroupRule[] {
+  return rule.cidrs.map(source => ({
+    ipProtocol: rule.ipProtocol,
+    fromPort: rule.fromPort,
+    toPort: rule.toPort,
+    source: source.cidr,
+    description: source.description,
+  }));
+}
+
+function expandSecurityGroupRules(
+  rules: SecurityGroupRule[]
+): ExpandedSecurityGroupRule[] {
+  return rules.flatMap(rule => expandSecurityGroupRule(rule));
+}

web/packages/teleport/src/Discover/Shared/SecurityGroupPicker/SecurityGroupRulesDialog.tsx

@@ -32,8 +32,7 @@ export function SecurityGroupRulesDialog({
   viewRulesSelection: ViewRulesSelection;
   onClose: () => void;
 }) {
-  const { ruleType, sg } = viewRulesSelection;
-  const data = ruleType === 'inbound' ? sg.inboundRules : sg.outboundRules;
+  const { name, rules, ruleType } = viewRulesSelection;
 
   return (
     <Dialog disableEscapeKeyDown={false} open={true}>
@@ -44,11 +43,10 @@ export function SecurityGroupRulesDialog({
         textAlign="center"
       >
         <Text mb={4} typography="h4">
-          {ruleType === 'inbound' ? 'Inbound' : 'Outbound'} Rules for [{sg.name}
-          ]
+          {ruleType === 'inbound' ? 'Inbound' : 'Outbound'} Rules for [{name}]
         </Text>
         <StyledTable
-          data={data}
+          data={rules}
           columns={[
             {
               key: 'ipProtocol',
@@ -67,23 +65,19 @@ export function SecurityGroupRulesDialog({
             {
               altKey: 'source',
               headerText: 'Source',
-              render: ({ cidrs }) => {
-                // The AWS API returns an array, however it appears it's not actually possible to have multiple CIDR's for a single rule.
-                // As a fallback we just display the first one.
-                const cidr = cidrs[0];
-                if (cidr) {
-                  return <Cell>{cidr.cidr}</Cell>;
+              render: ({ source }) => {
+                if (source) {
+                  return <Cell>{source}</Cell>;
                 }
                 return null;
               },
             },
             {
               altKey: 'description',
               headerText: 'Description',
-              render: ({ cidrs }) => {
-                const cidr = cidrs[0];
-                if (cidr) {
-                  return <Cell>{cidr.description}</Cell>;
+              render: ({ description }) => {
+                if (description) {
+                  return <Cell>{description}</Cell>;
                 }
                 return null;
               },

web/packages/teleport/src/config.ts

@@ -321,7 +321,7 @@ const cfg = {
     awsRdsDbRequiredVpcsPath:
       '/v1/webapi/sites/:clusterId/integrations/aws-oidc/:name/requireddatabasesvpcs',
     awsDatabaseVpcsPath:
-      '/webapi/sites/:clusterId/integrations/aws-oidc/:name/databasevpcs',
+      '/v1/webapi/sites/:clusterId/integrations/aws-oidc/:name/databasevpcs',
     awsRdsDbListPath:
       '/v1/webapi/sites/:clusterId/integrations/aws-oidc/:name/databases',
     awsDeployTeleportServicePath: