Skip to content

[Web] Add Discover flow for enrolling EC2 Instances with EICE #32202

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
rudream merged 1 commit into from
Sep 28, 2023
Merged

[Web] Add Discover flow for enrolling EC2 Instances with EICE #32202

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 14 additions & 7 deletions lib/web/servers.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -339,12 +339,12 @@ type desktopIsActive struct {

// createNodeRequest contains the required information to create a Node.
type createNodeRequest struct {
Name string `json:"name,omitempty"`
SubKind string `json:"subKind,omitempty"`
Hostname string `json:"hostname,omitempty"`
Addr string `json:"addr,omitempty"`
Labels []ui.Label `json:"labels,omitempty"`
AWSInfo *types.AWSInfo `json:"aws,omitempty"`
Name string `json:"name,omitempty"`
SubKind string `json:"subKind,omitempty"`
Hostname string `json:"hostname,omitempty"`
Addr string `json:"addr,omitempty"`
Labels []ui.Label `json:"labels,omitempty"`
AWSInfo *ui.AWSMetadata `json:"aws,omitempty"`
}

func (r *createNodeRequest) checkAndSetDefaults() error {
Expand Down Expand Up @@ -402,7 +402,14 @@ func (h *Handler) handleNodeCreate(w http.ResponseWriter, r *http.Request, p htt
Hostname: req.Hostname,
Addr: req.Addr,
CloudMetadata: &types.CloudMetadata{
AWS: req.AWSInfo,
AWS: &types.AWSInfo{
AccountID: req.AWSInfo.AccountID,
InstanceID: req.AWSInfo.InstanceID,
Region: req.AWSInfo.Region,
VPCID: req.AWSInfo.VPCID,
Integration: req.AWSInfo.Integration,
SubnetID: req.AWSInfo.SubnetID,
},
},
},
labels,
Expand Down
11 changes: 9 additions & 2 deletions lib/web/servers_test.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ func TestCreateNode(t *testing.T) {
Hostname: "myhostname",
Addr: "172.31.1.1:22",
Labels: []ui.Label{},
AWSInfo: &types.AWSInfo{
AWSInfo: &ui.AWSMetadata{
AccountID: "123456789012",
InstanceID: "i-123",
Region: "us-east-1",
Expand Down Expand Up @@ -155,7 +155,14 @@ func TestCreateNode(t *testing.T) {
require.NoError(t, err)

require.Equal(t, node.GetName(), tt.req.Name)
require.Equal(t, node.GetCloudMetadata().AWS, tt.req.AWSInfo)
require.Equal(t, node.GetAWSInfo(), &types.AWSInfo{
AccountID: tt.req.AWSInfo.AccountID,
InstanceID: tt.req.AWSInfo.InstanceID,
Region: tt.req.AWSInfo.Region,
VPCID: tt.req.AWSInfo.VPCID,
Integration: tt.req.AWSInfo.Integration,
SubnetID: tt.req.AWSInfo.SubnetID,
})
}
})

Expand Down
1 change: 1 addition & 0 deletions lib/web/ui/server.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,6 +117,7 @@ func MakeServer(clusterName string, server types.Server, accessChecker services.
Region: awsMetadata.Region,
Integration: awsMetadata.Integration,
SubnetID: awsMetadata.SubnetID,
VPCID: awsMetadata.VPCID,
}
}

Expand Down
123 changes: 21 additions & 102 deletions web/packages/teleport/src/Discover/Database/EnrollRdsDatabase/RdsDatabaseList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,16 @@

import React from 'react';
import styled from 'styled-components';
import { Flex, Box, Label as Pill } from 'design';
import Table, { Cell as TableCell } from 'design/DataTable';
import { Flex, Box } from 'design';
import Table from 'design/DataTable';
import { FetchStatus } from 'design/DataTable/types';

import { Label } from 'teleport/types';
import {
DisableableCell as Cell,
Comment thread
rudream marked this conversation as resolved.
Outdated
RadioCell,
Labels,
labelMatcher,
} from 'teleport/Discover/Shared';

import { CheckedAwsRdsDatabase } from './EnrollRdsDatabase';

Expand All @@ -32,6 +37,8 @@ type Props = {
selectedDatabase?: CheckedAwsRdsDatabase;
};

const disabledText = `This RDS database is already enrolled and is a part of this cluster`;

export const DatabaseList = ({
items = [],
fetchStatus = '',
Expand All @@ -51,12 +58,14 @@ export const DatabaseList = ({
item.name === selectedDatabase?.name &&
item.engine === selectedDatabase?.engine;
return (
<RadioCell
<RadioCell<CheckedAwsRdsDatabase>
disabledText={disabledText}
item={item}
key={`${item.name}${item.resourceId}`}
isChecked={isChecked}
onChange={onSelectDatabase}
disabled={item.dbServerExists}
value={item.name}
/>
);
},
Expand All @@ -65,21 +74,25 @@ export const DatabaseList = ({
key: 'name',
headerText: 'Name',
render: ({ name, dbServerExists }) => (
<Cell disabled={dbServerExists}>{name}</Cell>
<Cell disabledText={disabledText} disabled={dbServerExists}>
{name}
</Cell>
),
},
{
key: 'engine',
headerText: 'Engine',
render: ({ engine, dbServerExists }) => (
<Cell disabled={dbServerExists}>{engine}</Cell>
<Cell disabledText={disabledText} disabled={dbServerExists}>
{engine}
</Cell>
),
},
{
key: 'labels',
headerText: 'Labels',
render: ({ labels, dbServerExists }) => (
<Cell disabled={dbServerExists}>
<Cell disabledText={disabledText} disabled={dbServerExists}>
<Labels labels={labels} />
</Cell>
),
Expand All @@ -103,7 +116,7 @@ const StatusCell = ({ item }: { item: CheckedAwsRdsDatabase }) => {
const status = getStatus(item);

return (
<Cell disabled={item.dbServerExists}>
<Cell disabledText={disabledText} disabled={item.dbServerExists}>
<Flex alignItems="center">
<StatusLight status={status} />
{item.status}
Expand All @@ -112,42 +125,6 @@ const StatusCell = ({ item }: { item: CheckedAwsRdsDatabase }) => {
);
};

function RadioCell({
item,
isChecked,
onChange,
disabled,
}: {
item: CheckedAwsRdsDatabase;
isChecked: boolean;
onChange(selectedItem: CheckedAwsRdsDatabase): void;
disabled: boolean;
}) {
return (
<Cell width="20px" disabled={disabled}>
<Flex alignItems="center" my={2} justifyContent="center">
<input
css={`
margin: 0 ${props => props.theme.space[2]}px 0 0;
accent-color: ${props => props.theme.colors.brand.accent};
cursor: pointer;

&:disabled {
cursor: not-allowed;
}
`}
type="radio"
name={item.name}
checked={isChecked}
onChange={() => onChange(item)}
value={item.name}
disabled={disabled}
/>
</Flex>
</Cell>
);
}

enum Status {
Success,
Warning,
Expand Down Expand Up @@ -185,61 +162,3 @@ const StatusLight = styled(Box)`
return theme.colors.grey[300]; // Unknown
}};
`;

const Labels = ({ labels }: { labels: Label[] }) => {
const $labels = labels.map((label, index) => {
const labelText = `${label.name}: ${label.value}`;

return (
<Pill key={`${label.name}${label.value}${index}`} mr="1" kind="secondary">
{labelText}
</Pill>
);
});

return <Flex flexWrap="wrap">{$labels}</Flex>;
};

// labelMatcher allows user to client search by labels in the format
// 1) `key: value` or
// 2) `key:value` or
// 3) `key` or `value`
function labelMatcher(
targetValue: any,
searchValue: string,
propName: keyof CheckedAwsRdsDatabase & string
) {
if (propName === 'labels') {
return targetValue.some((label: Label) => {
const convertedKey = label.name.toLocaleUpperCase();
const convertedVal = label.value.toLocaleUpperCase();
const formattedWords = [
`${convertedKey}:${convertedVal}`,
`${convertedKey}: ${convertedVal}`,
];
return formattedWords.some(w => w.includes(searchValue));
});
}
}

const Cell: React.FC<{ disabled: boolean; width?: string }> = ({
disabled,
width,
children,
}) => {
return (
<TableCell
width={width}
title={
disabled
? 'this RDS database is already enrolled and is a part of this cluster'
: null
}
css={`
opacity: ${disabled ? '0.5' : '1'};
`}
>
{children}
</TableCell>
);
};
5 changes: 2 additions & 3 deletions web/packages/teleport/src/Discover/Database/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@

import React from 'react';

import { ResourceKind, Finished } from 'teleport/Discover/Shared';
import { AwsAccount, ResourceKind, Finished } from 'teleport/Discover/Shared';
import { ResourceViewConfig } from 'teleport/Discover/flow';
import { DatabaseWrapper } from 'teleport/Discover/Database/DatabaseWrapper';
import {
Expand All @@ -31,7 +31,6 @@ import { ManualDeploy } from 'teleport/Discover/Database/DeployService/ManualDep
import { MutualTls } from 'teleport/Discover/Database/MutualTls';
import { TestConnection } from 'teleport/Discover/Database/TestConnection';
import { DiscoverEvent } from 'teleport/services/userEvent';
import { ConnectAwsAccount } from 'teleport/Discover/Database/ConnectAwsAccount';
import { EnrollRdsDatabase } from 'teleport/Discover/Database/EnrollRdsDatabase';
import { IamPolicy } from 'teleport/Discover/Database/IamPolicy';

Expand Down Expand Up @@ -59,7 +58,7 @@ export const DatabaseResource: ResourceViewConfig<ResourceSpec> = {
configureResourceViews = [
{
title: 'Connect AWS Account',
component: ConnectAwsAccount,
component: AwsAccount,
eventName: DiscoverEvent.IntegrationAWSOIDCConnectEvent,
},
{
Expand Down
Loading