diff --git a/ngui/ui/src/components/forms/UpdateDataSourceCredentialsForm/FormElements/Credentials/AwsAuthenticationTypeAlert.tsx b/ngui/ui/src/components/forms/UpdateDataSourceCredentialsForm/FormElements/Credentials/AwsAuthenticationTypeAlert.tsx new file mode 100644 index 000000000..26bef5aa8 --- /dev/null +++ b/ngui/ui/src/components/forms/UpdateDataSourceCredentialsForm/FormElements/Credentials/AwsAuthenticationTypeAlert.tsx @@ -0,0 +1,70 @@ +import { Alert, Link, SxProps, Theme, Typography } from "@mui/material"; +import { FormattedMessage } from "react-intl"; +import { ReactNode } from "react-markdown/lib/react-markdown"; +import { DOCS_AWS_CREDENTIALS_ACCESS_KEYS, DOCS_FINOPS_AUTHENTICATION_TYPE_MIGRATION } from "urls"; +import { SPACING_2 } from "utils/layouts"; + +const ParagraphHelper = ({ messageId, link, sx }: { messageId: string; link?: string; sx?: SxProps }) => ( + + { + const linkText = chunks.length > 0 ? chunks : link; + return ( + + {linkText} + + ); + }, + strong: (chunks: ReactNode) => {chunks}, + break:
+ }} + /> + +); + +const AwsAuthenticationTypeAlert = ({ authenticationType }: { authenticationType: string }) => { + const getAlert = (authenticationType: string) => { + switch (authenticationType) { + case "assumedRole": + return ( + <> + + + + + ); + case "assumedRoleLinked": + return ( + <> + + + + ); + case "accessKeyLinked": + case "accessKey": + return ( + <> + + + + ); + + default: + return <>; + } + }; + + return ( + + {getAlert(authenticationType)} + + ); +}; + +export default AwsAuthenticationTypeAlert; diff --git a/ngui/ui/src/components/forms/UpdateDataSourceCredentialsForm/FormElements/Credentials/AwsCredentials.tsx b/ngui/ui/src/components/forms/UpdateDataSourceCredentialsForm/FormElements/Credentials/AwsCredentials.tsx index cba86cb37..f4fc180f5 100644 --- a/ngui/ui/src/components/forms/UpdateDataSourceCredentialsForm/FormElements/Credentials/AwsCredentials.tsx +++ b/ngui/ui/src/components/forms/UpdateDataSourceCredentialsForm/FormElements/Credentials/AwsCredentials.tsx @@ -14,6 +14,7 @@ import { AUTHENTICATION_TYPES, AuthenticationTypeSelector } from "components/forms/ConnectCloudAccountForm/FormElements/AwsConnectionForm"; +import AwsAuthenticationTypeAlert from "./AwsAuthenticationTypeAlert"; import AwsDescription from "./AwsDescription"; const CostAndUsageReport = () => ( @@ -36,9 +37,9 @@ const getAwsAuthType = (config) => { const AwsCredentials = ({ config }) => { const currentAuthType = getAwsAuthType(config); const [authenticationType, setAuthenticationType] = useState(currentAuthType); - const getAwsInputs = (config) => { - const fullAuthenticationType: string = authenticationType + (config.linked ? "Linked" : ""); + const fullAuthenticationType: string = authenticationType + (config.linked ? "Linked" : ""); + const getAwsInputs = (config) => { switch (fullAuthenticationType) { case "assumedRole": case "assumedRoleLinked": @@ -63,8 +64,13 @@ const AwsCredentials = ({ config }) => { }; return ( <> - - + {currentAuthType === AUTHENTICATION_TYPES.ACCESS_KEY && ( + <> + + + + )} + {getAwsInputs(config)} ); diff --git a/ngui/ui/src/components/forms/UpdateDataSourceCredentialsForm/FormElements/Credentials/AwsDescription.tsx b/ngui/ui/src/components/forms/UpdateDataSourceCredentialsForm/FormElements/Credentials/AwsDescription.tsx index 669dec0b3..e65afae47 100644 --- a/ngui/ui/src/components/forms/UpdateDataSourceCredentialsForm/FormElements/Credentials/AwsDescription.tsx +++ b/ngui/ui/src/components/forms/UpdateDataSourceCredentialsForm/FormElements/Credentials/AwsDescription.tsx @@ -1,95 +1,57 @@ -import { Typography } from "@mui/material"; +import { ReactNode } from "react"; +import { Link, SxProps, Theme, Typography } from "@mui/material"; import { FormattedMessage } from "react-intl"; -import { Link } from "react-router-dom"; -import { intl } from "translations/react-intl-config"; -import { - DOCS_HYSTAX_AWS_LINKED_DISCOVER_RESOURCES, - DOCS_HYSTAX_CONNECT_AWS_ROOT, - DOCS_HYSTAX_MIGRATE_FROM_CUR_TO_DATA_EXPORTS_CUR_2_0 -} from "urls"; +import { DOCS_FINOPS_AWS_DATA_SOURCE, DOCS_FINOPS_AWS_DATA_SOURCE_MIGRATE_CUR_2_0 } from "urls"; import { SPACING_2 } from "utils/layouts"; -const AwsDescription = ({ config, authenticationType }) => { - const getAwsDescription = (config) => { - if (authenticationType === "assumedRole") { - if (config.linked) { +const ParagraphHelper = ({ messageId, link, sx }: { messageId: string; link?: string; sx?: SxProps }) => ( + + { + const linkText = chunks.length > 0 ? chunks : link; + return ( + + {linkText} + + ); + } + }} + /> + +); + +const AwsDescription = ({ authenticationType }: { authenticationType: string }) => { + const getAwsDescription = (authenticationType: string) => { + switch (authenticationType) { + case "assumedRoleLinked": + case "accessKeyLinked": + return ( + + ); + case "assumedRole": + case "accessKey": return ( - - + + - + ); - } - - return ( - - - - ); + default: + return <>; } - - if (config.linked) { - return ( - - ( - - {chunks} - - ) - }} - /> - - ); - } - - return ( - -
- ( - - {chunks} - - ), - strong: (chunks) => {chunks} - }} - /> -
-
- ( - - {chunks} - - ), - strong: (chunks) => {chunks} - }} - /> -
- - ); }; - return <>{getAwsDescription(config)}; + return <>{getAwsDescription(authenticationType)}; }; export default AwsDescription; diff --git a/ngui/ui/src/components/forms/UpdateDataSourceCredentialsForm/UpdateDataSourceCredentialsForm.tsx b/ngui/ui/src/components/forms/UpdateDataSourceCredentialsForm/UpdateDataSourceCredentialsForm.tsx index ba8b6ddcc..6bb0f0406 100644 --- a/ngui/ui/src/components/forms/UpdateDataSourceCredentialsForm/UpdateDataSourceCredentialsForm.tsx +++ b/ngui/ui/src/components/forms/UpdateDataSourceCredentialsForm/UpdateDataSourceCredentialsForm.tsx @@ -524,8 +524,6 @@ const UpdateDataSourceCredentialsForm = ({ const { handleSubmit } = methods; - const isAssumedRole = Boolean(config?.assume_role_account_id && config?.assume_role_name); - return (
- {!isAssumedRole && } + not recommended by SoftwareOne or AWS - use an assumed role where possible.", + "awsAuthenticationTypeAlert:accessKeyP2": "More information", + "awsAuthenticationTypeAlert:assumedRoleP1": "Switching from an access key to an assumed role is permanent. After you make this change, you can’t switch back to using an access key for this data source.", + "awsAuthenticationTypeAlert:assumedRoleP2": "If you later want to use an access key again, you’ll need to delete this data source and recreate it with access key credentials. This will delete all existing data for this data source and require a full reimport of the resource and billing data.", + "awsAuthenticationTypeAlert:assumedRoleP3": "This will also affect all the billing data of any member account data sources linked to this management account.", + "awsDataSourceUpdateDescriptionP1": "For detailed information on how to add and manage AWS data sources, refer to our documentation.", + "awsDataSourceUpdateDescriptionP2": "To switch from legacy cost and usage reports to cost and usage reports 2.0, follow these steps.", "awsDataSourcesBackdropMessage": "To get real data, please connect an AWS data source.", "awsDataSourcesContactManagerBackdropMessage": "Please contact your organization manager to connect an AWS data source to get real data.", "awsLinked": "AWS linked", @@ -370,7 +377,7 @@ "createAlibabaDocumentationReference": "Please provide programmatic credentials for a RAM user with a ReadOnlyAccess permission attached. Read this guide for more details.", "createAnomalyDetectionPolicyTitle": "Create anomaly detection policy", "createAutomaticAssignmentRuleBackdropMessage": "Please add an assignment rule to let FinOps For Cloud automatically assign newly discovered resources to a pool.", - "createAwsAssumedRoleDescription": "Connection through Assumed Role provides the most modern and secure way to connect FinOps for Cloud to your AWS account. Please fill the fields below with the necessary information, then click the \"Show Role\" button to get the Assumed Role definition. Once you create the corresponding Role in the AWS Account you're connecting, click the {action} button.", + "createAwsAssumedRoleDescription": "Connection through Assumed Role provides the most modern and secure way to connect FinOps for Cloud to your AWS account. Please fill the fields below with the necessary information, then click the {action} button.", "createAwsAssumedRoleLinkedDescription": "Connection through Assumed Role provides the most modern and secure way to connect FinOps for Cloud to your AWS account. Please fill the fields below with the necessary information, then click the {action} button.", "createAwsDefaultAssumedRoleDDocumentationReference1": "SoftwareOne recommends using the Assume Role method to provide access to your AWS account. For more information, please see AWS documentation. View documentation", "createAwsDefaultAssumedRoleDDocumentationReference2": "Please provide programmatic credentials for an IAM user with access to resource and billing data.", diff --git a/ngui/ui/src/urls.ts b/ngui/ui/src/urls.ts index 8a11aec55..58afb405a 100644 --- a/ngui/ui/src/urls.ts +++ b/ngui/ui/src/urls.ts @@ -595,6 +595,11 @@ export const DOCS_HYSTAX_SLACK_INTEGRATION = `${DOCS_HYSTAX_OPTSCALE}integration export const DOCS_HYSTAX_GOOGLE_CALENDAR_INTEGRATION = `${DOCS_HYSTAX_OPTSCALE}integrations.html#google-calendar`; export const DOCS_HYSTAX_CONNECT_ALIBABA_CLOUD = dataSourceConnectionDocUrl("e2e_alibaba.html"); +export const DOCS_FINOPS_AUTHENTICATION_TYPE_MIGRATION = `${DOCS_HYSTAX_OPTSCALE}system/data-sources/amazon-web-services#aws-organizations`; +export const DOCS_FINOPS_AWS_DATA_SOURCE = `${DOCS_HYSTAX_OPTSCALE}system/data-sources/amazon-web-services`; +export const DOCS_FINOPS_AWS_DATA_SOURCE_MIGRATE_CUR_2_0 = `${DOCS_HYSTAX_OPTSCALE}system/data-sources/amazon-web-services/migrate-from-legacy-cur-to-cur-2.0`; +export const DOCS_AWS_CREDENTIALS_ACCESS_KEYS = `https://docs.aws.amazon.com/IAM/latest/UserGuide/id_credentials_access-keys.html`; + // Hystax open source links export const GITHUB_HYSTAX_K8S_COST_METRICS_COLLECTOR = "https://github.com/hystax/helm-charts/tree/main/charts/kube-cost-metrics-collector";