Skip to content
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

Add improvements for the EKS Discover UI. #38609

Merged
merged 4 commits into from
Feb 27, 2024
Merged

Add improvements for the EKS Discover UI. #38609

Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
46e8a8f
Add improvements for the EKS Discover UI.
AntonAM Feb 26, 2024
093e8e0
Add comment about Web UI relying on the text of an error.
AntonAM Feb 26, 2024
7f35d13
Change wording.
AntonAM Feb 26, 2024
db40302
Remove usage of negative margin.
AntonAM Feb 26, 2024
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
22 changes: 19 additions & 3 deletions web/packages/teleport/src/Discover/Kubernetes/EnrollEKSCluster/EnrollEksCluster.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
*/

import React, { useState, useCallback } from 'react';
import { Box, ButtonSecondary, ButtonText, Text, Toggle } from 'design';
import { Box, ButtonSecondary, ButtonText, Link, Text, Toggle } from 'design';
import styled from 'styled-components';
import { FetchStatus } from 'design/DataTable/types';
import { Danger } from 'design/Alert';
Expand Down Expand Up @@ -218,7 +218,12 @@ export function EnrollEksCluster(props: AgentStepProps) {
emitErrorEvent(
'unknown error: no results came back from enrolling the EKS cluster.'
);
} else if (result.error) {
} else if (
result.error &&
!result.error.message.includes(
'teleport-kube-agent is already installed'
)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

does this have any specific error code we could check for instead?

Copy link
Contributor

@rudream rudream Feb 26, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Checking for error code as Michael suggested is ideal, but if we're going to check for a substring in an error message, we should make sure to leave a note where the error message in defined in the backend saying that it needs to be kept in sync with this. This way if someone changes the error message, this won't break.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not really, it's not an AWS error, just our internal message.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've added a comment 👍

) {
setEnrollmentState({
status: 'error',
error: `Cluster enrollment error: ${result.error}`,
Expand Down Expand Up @@ -293,6 +298,17 @@ export function EnrollEksCluster(props: AgentStepProps) {
{fetchClustersAttempt.status === 'failed' && !hasIamPermError && (
<Danger mt={3}>{fetchClustersAttempt.statusText}</Danger>
)}
<Text mt={4} mb={-3}>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is the purpose of the negative value here? are we doing it to try and not affect the positioning of something else?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I copied it from RDS discover where we use similar styled note, I think it's just to make margin to look better

Negative margin:
image

vs 0 margin

image

Not really sure which one looks better, I can remove negative margin if you think it's not needed.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

its a nit at this point so feel free to ignore, but it'd probably make more sense to reduce the mt of the element right below it (the Select the AWS Region... Text element) than to use negative margin here.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Makes sense, changed the margins 👍

<b>Note:</b> EKS enrollment will work only with clusters that have
access entries authentication mode enabled, see{' '}
<Link
href="https://docs.aws.amazon.com/eks/latest/userguide/access-entries.html#authentication-modes"
target="_blank"
color="text.main"
>
documentation.
</Link>
</Text>
<Text mt={4}>
Select the AWS Region you would like to see EKS clusters for:
</Text>
Expand Down Expand Up @@ -346,7 +362,7 @@ export function EnrollEksCluster(props: AgentStepProps) {
}}
pl={0}
>
Or click here to see instructions for manual enrollment
Or do manual enrollment
AntonAM marked this conversation as resolved.
Show resolved Hide resolved
</ButtonText>
</Box>
</StyledBox>
Expand Down
Loading