Skip to content

G
gitlab-ce
Commit 5c31d667 authored by Hordur Freyr Yngvason's avatar Hordur Freyr Yngvason Committed by Enrique Alcántara
Browse files
Options

Move EKS creation form to GlLink and GlSprintf 

See https://gitlab.com/gitlab-org/gitlab/-/issues/250999
parent 19a0c69e
Hide whitespace changes
Inline Side-by-side
Showing with 158 additions and 164 deletions
app/assets/javascripts/create_cluster/eks_cluster/components/eks_cluster_configuration_form.vue
View file @ 5c31d667
<script>
/* eslint-disable vue/no-v-html */
import { createNamespacedHelpers, mapState, mapActions, mapGetters } from 'vuex';
import { escape } from 'lodash';
import { GlFormInput, GlFormCheckbox } from '@gitlab/ui';
import { sprintf, s__ } from '~/locale';
import { GlFormInput, GlFormCheckbox, GlIcon, GlLink, GlSprintf } from '@gitlab/ui';
import { s__ } from '~/locale';
import ClusterFormDropdown from '~/create_cluster/components/cluster_form_dropdown.vue';
import { KUBERNETES_VERSIONS } from '../constants';
import LoadingButton from '~/vue_shared/components/loading_button.vue';
......@@ -28,8 +26,11 @@ const { mapState: mapInstanceTypesState } = createNamespacedHelpers('instanceTyp
export default {
components: {
ClusterFormDropdown,
GlFormInput,
GlFormCheckbox,
GlFormInput,
GlIcon,
GlLink,
GlSprintf,
LoadingButton,
},
props: {
......@@ -50,6 +51,49 @@ export default {
required: true,
},
},
i18n: {
kubernetesIntegrationHelpText: s__(
'ClusterIntegration|Read our %{linkStart}help page%{linkEnd} on Kubernetes cluster integration.',
),
roleDropdownHelpText: s__(
'ClusterIntegration|Your service role is distinct from the provision role used when authenticating. It will allow Amazon EKS and the Kubernetes control plane to manage AWS resources on your behalf. To use a new role, first create one on %{linkStart}Amazon Web Services%{linkEnd}.',
),
roleDropdownHelpPath:
'https://docs.aws.amazon.com/eks/latest/userguide/service_IAM_role.html#create-service-role',
regionsDropdownHelpText: s__(
'ClusterIntegration|Learn more about %{linkStart}Regions%{linkEnd}.',
),
regionsDropdownHelpPath:
'https://aws.amazon.com/about-aws/global-infrastructure/regional-product-services/',
keyPairDropdownHelpText: s__(
'ClusterIntegration|Select the key pair name that will be used to create EC2 nodes. To use a new key pair name, first create one on %{linkStart}Amazon Web Services%{linkEnd}.',
),
keyPairDropdownHelpPath:
'https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/ec2-key-pairs.html#having-ec2-create-your-key-pair',
vpcDropdownHelpText: s__(
'ClusterIntegration|Select a VPC to use for your EKS Cluster resources. To use a new VPC, first create one on %{linkStart}Amazon Web Services %{linkEnd}.',
),
vpcDropdownHelpPath:
'https://docs.aws.amazon.com/eks/latest/userguide/getting-started-console.html#vpc-create',
subnetDropdownHelpText: s__(
'ClusterIntegration|Choose the %{linkStart}subnets %{linkEnd} in your VPC where your worker nodes will run.',
),
subnetDropdownHelpPath: 'https://console.aws.amazon.com/vpc/home?#subnets',
securityGroupDropdownHelpText: s__(
'ClusterIntegration|Choose the %{linkStart}security group %{linkEnd} to apply to the EKS-managed Elastic Network Interfaces that are created in your worker node subnets.',
),
securityGroupDropdownHelpPath: 'https://console.aws.amazon.com/vpc/home?#securityGroups',
instanceTypesDropdownHelpText: s__(
'ClusterIntegration|Choose the worker node %{linkStart}instance type%{linkEnd}.',
),
instanceTypesDropdownHelpPath: 'https://aws.amazon.com/ec2/instance-types',
gitlabManagedClusterHelpText: s__(
'ClusterIntegration|Allow GitLab to manage namespace and service accounts for this cluster. %{linkStart}More information%{linkEnd}',
),
namespacePerEnvironmentHelpText: s__(
'ClusterIntegration|Deploy each environment to its own namespace. Otherwise, environments within a project share a project-wide namespace. Note that anyone who can trigger a deployment of a namespace can read its secrets. If modified, existing environments will use their current namespaces until the cluster cache is cleared. %{linkStart}More information%{linkEnd}',
),
},
computed: {
...mapState([
'clusterName',
......@@ -142,90 +186,6 @@ export default {
? s__('ClusterIntegration|Creating Kubernetes cluster')
: s__('ClusterIntegration|Create Kubernetes cluster');
},
kubernetesIntegrationHelpText() {
const escapedUrl = escape(this.kubernetesIntegrationHelpPath);
return sprintf(
s__(
'ClusterIntegration|Read our %{link_start}help page%{link_end} on Kubernetes cluster integration.',
),
{
link_start: `<a href="${escapedUrl}" target="_blank" rel="noopener noreferrer">`,
link_end: '</a>',
},
false,
);
},
roleDropdownHelpText() {
return sprintf(
s__(
'ClusterIntegration|Your service role is distinct from the provision role used when authenticating. It will allow Amazon EKS and the Kubernetes control plane to manage AWS resources on your behalf. To use a new role, first create one on %{startLink}Amazon Web Services %{externalLinkIcon} %{endLink}.',
),
{
startLink:
'<a href="https://docs.aws.amazon.com/eks/latest/userguide/service_IAM_role.html#create-service-role" target="_blank" rel="noopener noreferrer">',
externalLinkIcon: this.externalLinkIcon,
endLink: '</a>',
},
false,
);
},
regionsDropdownHelpText() {
return sprintf(
s__(
'ClusterIntegration|Learn more about %{startLink}Regions %{externalLinkIcon}%{endLink}.',
),
{
startLink:
'<a href="https://aws.amazon.com/about-aws/global-infrastructure/regional-product-services/" target="_blank" rel="noopener noreferrer">',
externalLinkIcon: this.externalLinkIcon,
endLink: '</a>',
},
false,
);
},
keyPairDropdownHelpText() {
return sprintf(
s__(
'ClusterIntegration|Select the key pair name that will be used to create EC2 nodes. To use a new key pair name, first create one on %{startLink}Amazon Web Services %{externalLinkIcon} %{endLink}.',
),
{
startLink:
'<a href="https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/ec2-key-pairs.html#having-ec2-create-your-key-pair" target="_blank" rel="noopener noreferrer">',
externalLinkIcon: this.externalLinkIcon,
endLink: '</a>',
},
false,
);
},
vpcDropdownHelpText() {
return sprintf(
s__(
'ClusterIntegration|Select a VPC to use for your EKS Cluster resources. To use a new VPC, first create one on %{startLink}Amazon Web Services %{externalLinkIcon} %{endLink}.',
),
{
startLink:
'<a href="https://docs.aws.amazon.com/eks/latest/userguide/getting-started-console.html#vpc-create" target="_blank" rel="noopener noreferrer">',
externalLinkIcon: this.externalLinkIcon,
endLink: '</a>',
},
false,
);
},
subnetDropdownHelpText() {
return sprintf(
s__(
'ClusterIntegration|Choose the %{startLink}subnets %{externalLinkIcon} %{endLink} in your VPC where your worker nodes will run.',
),
{
startLink:
'<a href="https://console.aws.amazon.com/vpc/home?#subnets" target="_blank" rel="noopener noreferrer">',
externalLinkIcon: this.externalLinkIcon,
endLink: '</a>',
},
false,
);
},
subnetValidationErrorText() {
if (this.loadingSubnetsError) {
return s__('ClusterIntegration|Could not load subnets for the selected VPC');
......@@ -233,62 +193,6 @@ export default {
return s__('ClusterIntegration|You should select at least two subnets');
},
securityGroupDropdownHelpText() {
return sprintf(
s__(
'ClusterIntegration|Choose the %{startLink}security group %{externalLinkIcon} %{endLink} to apply to the EKS-managed Elastic Network Interfaces that are created in your worker node subnets.',
),
{
startLink:
'<a href="https://console.aws.amazon.com/vpc/home?#securityGroups" target="_blank" rel="noopener noreferrer">',
externalLinkIcon: this.externalLinkIcon,
endLink: '</a>',
},
false,
);
},
instanceTypesDropdownHelpText() {
return sprintf(
s__(
'ClusterIntegration|Choose the worker node %{startLink}instance type %{externalLinkIcon} %{endLink}.',
),
{
startLink:
'<a href="https://aws.amazon.com/ec2/instance-types" target="_blank" rel="noopener noreferrer">',
externalLinkIcon: this.externalLinkIcon,
endLink: '</a>',
},
false,
);
},
gitlabManagedHelpText() {
const escapedUrl = escape(this.gitlabManagedClusterHelpPath);
return sprintf(
s__(
'ClusterIntegration|Allow GitLab to manage namespace and service accounts for this cluster. %{startLink}More information%{endLink}',
),
{
startLink: `<a href="${escapedUrl}" target="_blank" rel="noopener noreferrer">`,
endLink: '</a>',
},
false,
);
},
namespacePerEnvironmentHelpText() {
const escapedUrl = escape(this.namespacePerEnvironmentClusterHelpPath);
return sprintf(
s__(
'ClusterIntegration|Deploy each environment to its own namespace. Otherwise, environments within a project share a project-wide namespace. Note that anyone who can trigger a deployment of a namespace can read its secrets. If modified, existing environments will use their current namespaces until the cluster cache is cleared. %{startLink}More information%{endLink}',
),
{
startLink: `<a href="${escapedUrl}" target="_blank" rel="noopener noreferrer">`,
endLink: '</a>',
},
false,
);
},
},
mounted() {
this.fetchRegions();
......@@ -341,7 +245,15 @@ export default {
<h4>
{{ s__('ClusterIntegration|Enter the details for your Amazon EKS Kubernetes cluster') }}
</h4>
<div class="mb-3" v-html="kubernetesIntegrationHelpText"></div>
<div class="mb-3">
<gl-sprintf :message="$options.i18n.kubernetesIntegrationHelpText">
<template #link="{ content }">
<gl-link :href="kubernetesIntegrationHelpPath">
{{ content }}
</gl-link>
</template>
</gl-sprintf>
</div>
<div class="form-group">
<label class="label-bold" for="eks-cluster-name">{{
s__('ClusterIntegration|Kubernetes cluster name')
......@@ -391,7 +303,16 @@ export default {
:error-message="s__('ClusterIntegration|Could not load IAM roles')"
@input="setRole({ role: $event })"
/>
<p class="form-text text-muted" v-html="roleDropdownHelpText"></p>
<p class="form-text text-muted">
<gl-sprintf :message="$options.i18n.roleDropdownHelpText">
<template #link="{ content }">
<gl-link :href="$options.i18n.roleDropdownHelpPath" target="_blank">
{{ content }}
<gl-icon name="external-link" class="gl-vertical-align-middle" />
</gl-link>
</template>
</gl-sprintf>
</p>
</div>
<div class="form-group">
<label class="label-bold" for="eks-role">{{ s__('ClusterIntegration|Region') }}</label>
......@@ -409,7 +330,16 @@ export default {
:error-message="s__('ClusterIntegration|Could not load regions from your AWS account')"
@input="setRegionAndFetchVpcsAndKeyPairs($event)"
/>
<p class="form-text text-muted" v-html="regionsDropdownHelpText"></p>
<p class="form-text text-muted">
<gl-sprintf :message="$options.i18n.regionsDropdownHelpText">
<template #link="{ content }">
<gl-link :href="$options.i18n.regionsDropdownHelpPath" target="_blank">
{{ content }}
<gl-icon name="external-link" class="gl-vertical-align-middle" />
</gl-link>
</template>
</gl-sprintf>
</p>
</div>
<div class="form-group">
<label class="label-bold" for="eks-key-pair">{{
......@@ -431,7 +361,16 @@ export default {
:error-message="s__('ClusterIntegration|Could not load Key Pairs')"
@input="setKeyPair({ keyPair: $event })"
/>
<p class="form-text text-muted" v-html="keyPairDropdownHelpText"></p>
<p class="form-text text-muted">
<gl-sprintf :message="$options.i18n.keyPairDropdownHelpText">
<template #link="{ content }">
<gl-link :href="$options.i18n.keyPairDropdownHelpPath" target="_blank">
{{ content }}
<gl-icon name="external-link" class="gl-vertical-align-middle" />
</gl-link>
</template>
</gl-sprintf>
</p>
</div>
<div class="form-group">
<label class="label-bold" for="eks-vpc">{{ s__('ClusterIntegration|VPC') }}</label>
......@@ -451,7 +390,16 @@ export default {
:error-message="s__('ClusterIntegration|Could not load VPCs for the selected region')"
@input="setVpcAndFetchSubnets($event)"
/>
<p class="form-text text-muted" v-html="vpcDropdownHelpText"></p>
<p class="form-text text-muted">
<gl-sprintf :message="$options.i18n.vpcDropdownHelpText">
<template #link="{ content }">
<gl-link :href="$options.i18n.vpcDropdownHelpPath" target="_blank">
{{ content }}
<gl-icon name="external-link" class="gl-vertical-align-middle" />
</gl-link>
</template>
</gl-sprintf>
</p>
</div>
<div class="form-group">
<label class="label-bold" for="eks-role">{{ s__('ClusterIntegration|Subnets') }}</label>
......@@ -472,7 +420,16 @@ export default {
:error-message="subnetValidationErrorText"
@input="setSubnet({ subnet: $event })"
/>
<p class="form-text text-muted" v-html="subnetDropdownHelpText"></p>
<p class="form-text text-muted">
<gl-sprintf :message="$options.i18n.subnetDropdownHelpText">
<template #link="{ content }">
<gl-link :href="$options.i18n.subnetDropdownHelpPath" target="_blank">
{{ content }}
<gl-icon name="external-link" class="gl-vertical-align-middle" />
</gl-link>
</template>
</gl-sprintf>
</p>
</div>
<div class="form-group">
<label class="label-bold" for="eks-security-group">{{
......@@ -496,7 +453,16 @@ export default {
"
@input="setSecurityGroup({ securityGroup: $event })"
/>
<p class="form-text text-muted" v-html="securityGroupDropdownHelpText"></p>
<p class="form-text text-muted">
<gl-sprintf :message="$options.i18n.securityGroupDropdownHelpText">
<template #link="{ content }">
<gl-link :href="$options.i18n.securityGroupDropdownHelpPath" target="_blank">
{{ content }}
<gl-icon name="external-link" class="gl-vertical-align-middle" />
</gl-link>
</template>
</gl-sprintf>
</p>
</div>
<div class="form-group">
<label class="label-bold" for="eks-instance-type">{{
......@@ -516,7 +482,16 @@ export default {
:error-message="s__('ClusterIntegration|Could not load instance types')"
@input="setInstanceType({ instanceType: $event })"
/>
<p class="form-text text-muted" v-html="instanceTypesDropdownHelpText"></p>
<p class="form-text text-muted">
<gl-sprintf :message="$options.i18n.instanceTypesDropdownHelpText">
<template #link="{ content }">
<gl-link :href="$options.i18n.instanceTypesDropdownHelpPath" target="_blank">
{{ content }}
<gl-icon name="external-link" class="gl-vertical-align-middle" />
</gl-link>
</template>
</gl-sprintf>
</p>
</div>
<div class="form-group">
<label class="label-bold" for="eks-node-count">{{
......@@ -537,7 +512,15 @@ export default {
@input="setGitlabManagedCluster({ gitlabManagedCluster: $event })"
>{{ s__('ClusterIntegration|GitLab-managed cluster') }}</gl-form-checkbox
>
<p class="form-text text-muted" v-html="gitlabManagedHelpText"></p>
<p class="form text text-muted">
<gl-sprintf :message="$options.i18n.gitlabManagedClusterHelpText">
<template #link="{ content }">
<gl-link :href="gitlabManagedClusterHelpPath" target="_blank">
{{ content }}
</gl-link>
</template>
</gl-sprintf>
</p>
</div>
<div class="form-group">
<gl-form-checkbox
......@@ -545,7 +528,15 @@ export default {
@input="setNamespacePerEnvironment({ namespacePerEnvironment: $event })"
>{{ s__('ClusterIntegration|Namespace per environment') }}</gl-form-checkbox
>
<p class="form-text text-muted" v-html="namespacePerEnvironmentHelpText"></p>
<p class="form text text-muted">
<gl-sprintf :message="$options.i18n.namespacePerEnvironmentHelpText">
<template #link="{ content }">
<gl-link :href="namespacePerEnvironmentHelpPath" target="_blank">
{{ content }}
</gl-link>
</template>
</gl-sprintf>
</p>
</div>
<div class="form-group">
<loading-button
......
locale/gitlab.pot
View file @ 5c31d667
......@@ -5400,7 +5400,7 @@ msgstr ""
msgid "ClusterIntegration|All installed applications and related resources"
msgstr ""
msgid "ClusterIntegration|Allow GitLab to manage namespace and service accounts for this cluster. %{startLink}More information%{endLink}"
msgid "ClusterIntegration|Allow GitLab to manage namespace and service accounts for this cluster. %{linkStart}More information%{linkEnd}"
msgstr ""
msgid "ClusterIntegration|Allow GitLab to manage namespaces and service accounts for this cluster."
......@@ -5472,13 +5472,13 @@ msgstr ""
msgid "ClusterIntegration|Check your token"
msgstr ""
msgid "ClusterIntegration|Choose the %{startLink}security group %{externalLinkIcon} %{endLink} to apply to the EKS-managed Elastic Network Interfaces that are created in your worker node subnets."
msgid "ClusterIntegration|Choose the %{linkStart}security group %{linkEnd} to apply to the EKS-managed Elastic Network Interfaces that are created in your worker node subnets."
msgstr ""
msgid "ClusterIntegration|Choose the %{startLink}subnets %{externalLinkIcon} %{endLink} in your VPC where your worker nodes will run."
msgid "ClusterIntegration|Choose the %{linkStart}subnets %{linkEnd} in your VPC where your worker nodes will run."
msgstr ""
msgid "ClusterIntegration|Choose the worker node %{startLink}instance type %{externalLinkIcon} %{endLink}."
msgid "ClusterIntegration|Choose the worker node %{linkStart}instance type%{linkEnd}."
msgstr ""
msgid "ClusterIntegration|Choose which applications to install on your Kubernetes cluster."
......@@ -5589,7 +5589,7 @@ msgstr ""
msgid "ClusterIntegration|Deploy each environment to its own namespace. Otherwise, environments within a project share a project-wide namespace. Note that anyone who can trigger a deployment of a namespace can read its secrets. If modified, existing environments will use their current namespaces until the cluster cache is cleared."
msgstr ""
msgid "ClusterIntegration|Deploy each environment to its own namespace. Otherwise, environments within a project share a project-wide namespace. Note that anyone who can trigger a deployment of a namespace can read its secrets. If modified, existing environments will use their current namespaces until the cluster cache is cleared. %{startLink}More information%{endLink}"
msgid "ClusterIntegration|Deploy each environment to its own namespace. Otherwise, environments within a project share a project-wide namespace. Note that anyone who can trigger a deployment of a namespace can read its secrets. If modified, existing environments will use their current namespaces until the cluster cache is cleared. %{linkStart}More information%{linkEnd}"
msgstr ""
msgid "ClusterIntegration|Did you know?"
......@@ -5799,7 +5799,7 @@ msgstr ""
msgid "ClusterIntegration|Learn more about %{help_link_start}zones%{help_link_end}."
msgstr ""
msgid "ClusterIntegration|Learn more about %{startLink}Regions %{externalLinkIcon}%{endLink}."
msgid "ClusterIntegration|Learn more about %{linkStart}Regions%{linkEnd}."
msgstr ""
msgid "ClusterIntegration|Learn more about Kubernetes"
......@@ -5946,6 +5946,9 @@ msgstr ""
msgid "ClusterIntegration|RBAC-enabled cluster"
msgstr ""
msgid "ClusterIntegration|Read our %{linkStart}help page%{linkEnd} on Kubernetes cluster integration."
msgstr ""
msgid "ClusterIntegration|Read our %{link_start}help page%{link_end} on Kubernetes cluster integration."
msgstr ""
......@@ -6048,7 +6051,7 @@ msgstr ""
msgid "ClusterIntegration|Select a VPC to choose a subnet"
msgstr ""
msgid "ClusterIntegration|Select a VPC to use for your EKS Cluster resources. To use a new VPC, first create one on %{startLink}Amazon Web Services %{externalLinkIcon} %{endLink}."
msgid "ClusterIntegration|Select a VPC to use for your EKS Cluster resources. To use a new VPC, first create one on %{linkStart}Amazon Web Services %{linkEnd}."
msgstr ""
msgid "ClusterIntegration|Select a network to choose a subnetwork"
......@@ -6081,7 +6084,7 @@ msgstr ""
msgid "ClusterIntegration|Select project to choose zone"
msgstr ""
msgid "ClusterIntegration|Select the key pair name that will be used to create EC2 nodes. To use a new key pair name, first create one on %{startLink}Amazon Web Services %{externalLinkIcon} %{endLink}."
msgid "ClusterIntegration|Select the key pair name that will be used to create EC2 nodes. To use a new key pair name, first create one on %{linkStart}Amazon Web Services%{linkEnd}."
msgstr ""
msgid "ClusterIntegration|Select zone"
......@@ -6276,7 +6279,7 @@ msgstr ""
msgid "ClusterIntegration|Your cluster API is unreachable. Please ensure your API URL is correct."
msgstr ""
msgid "ClusterIntegration|Your service role is distinct from the provision role used when authenticating. It will allow Amazon EKS and the Kubernetes control plane to manage AWS resources on your behalf. To use a new role, first create one on %{startLink}Amazon Web Services %{externalLinkIcon} %{endLink}."
msgid "ClusterIntegration|Your service role is distinct from the provision role used when authenticating. It will allow Amazon EKS and the Kubernetes control plane to manage AWS resources on your behalf. To use a new role, first create one on %{linkStart}Amazon Web Services%{linkEnd}."
msgstr ""
msgid "ClusterIntegration|Zone"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7