Skip to content

Commit

Permalink
[Backport to 2.3][YW][#6094, #6020] Final touches for releasing Azure…
Browse files Browse the repository at this point in the history 
… provider as beta

Summary:
- remove feature flag check
- add "BETA" tag to the provider tab
- rearrange form fields
- add tooltips next to inputs
- show full region names in the regions list
{F14276}
{F14275}

Test Plan: Run UI, open provider configs page, navigate to Azure tab

Reviewers: andrew

Reviewed By: andrew

Subscribers: streddy, cnarang, ui

Differential Revision: https://phabricator.dev.yugabyte.com/D9711
  • Loading branch information
@sshev
sshev committed Oct 22, 2020
1 parent d4f4245 commit 4c6486f
Show file tree
Hide file tree
Showing 5 changed files with 158 additions and 107 deletions.
17 changes: 15 additions & 2 deletions managed/ui/src/components/config/ConfigProvider/providerConfig.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,7 @@
font-size: 14px;

&:first-child {

div {
padding-bottom: 10px;
}
Expand Down Expand Up @@ -315,7 +315,7 @@

img {
height: 50px;

&.aws-logo {
height: 42px;
margin-top: 5px;
Expand Down Expand Up @@ -377,3 +377,16 @@
.yb-hidden {
display: none !important;
}

#cloud-config-tab-panel-tab-azure:before {
content: 'BETA';
position: absolute;
padding: 3px 7px;
top: 0;
right: 0;
background-color: $YB_ORANGE;
border-radius: 4px;
color: $YB_BACKGROUND;
font-weight: 700;
font-size: 14px;
}
2 changes: 1 addition & 1 deletion managed/ui/src/components/config/PublicCloud/ProviderConfiguration.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ class ProviderConfiguration extends Component {
switch (this.props.providerType) {
case 'aws': return <AWSProviderInitView {...this.props} />;
case 'gcp': return <GCPProviderInitView {...this.props} />;
case 'azu': return <AzureProviderInitView featureFlags={this.props.featureFlags} createAzureProvider={this.props.createAzureProvider} />;
case 'azu': return <AzureProviderInitView createAzureProvider={this.props.createAzureProvider} />;
default: return <div>Unknown provider type <strong>{this.props.providerType}</strong></div>;
}
};
Expand Down
3 changes: 1 addition & 2 deletions managed/ui/src/components/config/PublicCloud/ProviderConfigurationContainer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -164,8 +164,7 @@ const mapStateToProps = (state) => {
hostInfo: state.customer.hostInfo,
modal: state.modal,
cloud: state.cloud,
tasks: state.tasks,
featureFlags: state.customer.currentCustomer?.data?.features,
tasks: state.tasks
};
};

Expand Down
228 changes: 128 additions & 100 deletions managed/ui/src/components/config/PublicCloud/views/AzureProviderInitView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ import React, { useState } from 'react';
import { Field, Form, Formik } from 'formik';
import { Row, Col } from 'react-bootstrap';
import { YBButton, YBFormInput } from '../../../common/forms/fields';
import { isEnabled } from '../../../../utils/LayoutUtils';
import { AzureRegions } from './AzureRegions';
import YBInfoTip from '../../../common/descriptors/YBInfoTip';

const initialValues = {
providerName: '', // not a part of config payload
Expand Down Expand Up @@ -48,9 +48,8 @@ const convertFormDataToPayload = (formData) => {
return { perRegionMetadata };
};

export const AzureProviderInitView = ({ featureFlags, createAzureProvider }) => {
export const AzureProviderInitView = ({ createAzureProvider }) => {
const [regionsFormData, setRegionsFormData] = useState([]);
const isAzureEnabled = isEnabled(featureFlags, 'universes.providers.azure', false);

const createProviderConfig = (values) => {
const config = _.omit(values, 'providerName', 'networkSetup');
Expand All @@ -60,104 +59,133 @@ export const AzureProviderInitView = ({ featureFlags, createAzureProvider }) =>

return (
<div className="provider-config-container">
{isAzureEnabled ? (
<Formik
initialValues={initialValues}
validationSchema={validationSchema}
onSubmit={createProviderConfig}
>
{({ isValid }) => (
<Form>
<Row>
<Col lg={10}>
<Row className="config-provider-row">
<Col lg={3}>
<div className="form-item-custom-label">Provider Name</div>
</Col>
<Col lg={7}>
<Field name="providerName" placeholder="Provider Name" component={YBFormInput} />
</Col>
</Row>
<Row className="config-provider-row">
<Col lg={3}>
<div className="form-item-custom-label">Client ID</div>
</Col>
<Col lg={7}>
<Field name="AZURE_CLIENT_ID" placeholder="Client ID" component={YBFormInput} />
</Col>
</Row>
<Row className="config-provider-row">
<Col lg={3}>
<div className="form-item-custom-label">Client Secret</div>
</Col>
<Col lg={7}>
<Field name="AZURE_CLIENT_SECRET" placeholder="Client Secret" component={YBFormInput} />
</Col>
</Row>
<Row className="config-provider-row">
<Col lg={3}>
<div className="form-item-custom-label">Tenant ID</div>
</Col>
<Col lg={7}>
<Field name="AZURE_TENANT_ID" placeholder="Tenant ID" component={YBFormInput} />
</Col>
</Row>
<Row className="config-provider-row">
<Col lg={3}>
<div className="form-item-custom-label">Subscription ID</div>
</Col>
<Col lg={7}>
<Field name="AZURE_SUBSCRIPTION_ID" placeholder="Subscription ID" component={YBFormInput} />
</Col>
</Row>
<Row className="config-provider-row">
<Col lg={3}>
<div className="form-item-custom-label">Resource Group</div>
</Col>
<Col lg={7}>
<Field name="AZURE_RG" placeholder="Resource Group" component={YBFormInput} />
</Col>
</Row>
<Formik
initialValues={initialValues}
validationSchema={validationSchema}
onSubmit={createProviderConfig}
>
{({ isValid }) => (
<Form>
<Row>
<Col lg={10}>
<Row className="config-provider-row">
<Col lg={3}>
<div className="form-item-custom-label">Provider Name</div>
</Col>
<Col lg={7}>
<Field name="providerName" placeholder="Provider Name" component={YBFormInput} />
</Col>
</Row>
<Row className="config-provider-row">
<Col lg={3}>
<div className="form-item-custom-label">Subscription ID</div>
</Col>
<Col lg={7}>
<Field name="AZURE_SUBSCRIPTION_ID" placeholder="Subscription ID" component={YBFormInput} />
</Col>
<Col lg={1} className="config-provider-tooltip">
<YBInfoTip
title="Azure Config"
content="The subscription ID is a unique ID that uniquely identifies your subscription to use Azure services."
/>
</Col>
</Row>
<Row className="config-provider-row">
<Col lg={3}>
<div className="form-item-custom-label">Resource Group</div>
</Col>
<Col lg={7}>
<Field name="AZURE_RG" placeholder="Resource Group" component={YBFormInput} />
</Col>
<Col lg={1} className="config-provider-tooltip">
<YBInfoTip
title="Azure Config"
content="Azure resource group includes those resources that you want to manage as a group."
/>
</Col>
</Row>
<Row className="config-provider-row">
<Col lg={3}>
<div className="form-item-custom-label">Tenant ID</div>
</Col>
<Col lg={7}>
<Field name="AZURE_TENANT_ID" placeholder="Tenant ID" component={YBFormInput} />
</Col>
<Col lg={1} className="config-provider-tooltip">
<YBInfoTip
title="Azure Config"
content="This is the unique identifier of the Azure Active Directory instance. "
/>
</Col>
</Row>
<Row className="config-provider-row">
<Col lg={3}>
<div className="form-item-custom-label">Client ID</div>
</Col>
<Col lg={7}>
<Field name="AZURE_CLIENT_ID" placeholder="Client ID" component={YBFormInput} />
</Col>
<Col lg={1} className="config-provider-tooltip">
<YBInfoTip
title="Azure Config"
content="This is the unique identifier of an application registered in the Azure Active Directory instance."
/>
</Col>
</Row>
<Row className="config-provider-row">
<Col lg={3}>
<div className="form-item-custom-label">Client Secret</div>
</Col>
<Col lg={7}>
<Field name="AZURE_CLIENT_SECRET" placeholder="Client Secret" component={YBFormInput} />
</Col>
<Col lg={1} className="config-provider-tooltip">
<YBInfoTip
title="Azure Config"
content="This is the secret key of an application registered in the Azure Active Directory instance."
/>
</Col>
</Row>
<Row className="config-provider-row">
<Col lg={3}>
<div className="form-item-custom-label">Virtual Network Setup</div>
</Col>
<Col lg={7}>
<Field name="networkSetup">
{({ field }) => (
<select
name="networkSetup"
className="form-control"
value={field.value}
onChange={field.onChange}
>
<option key={1} value="new_vpc" disabled={true}>Create a new Virtual Network</option>
<option key={2} value="existing_vpc">Specify an existing Virtual Network</option>
</select>
)}
</Field>
</Col>
<Col lg={1} className="config-provider-tooltip">
<YBInfoTip
title="Azure Config"
content="An Azure Virtual Network (VNet) is a representation of your own network in the cloud. It is a logical isolation of the Azure cloud dedicated to your subscription."
/>
</Col>
</Row>
<Row className="config-provider-row">
<Col lg={10}>
<AzureRegions regions={regionsFormData} onChange={value => setRegionsFormData(value)} />
</Col>
</Row>

<Row className="config-provider-row">
<Col lg={3}>
<div className="form-item-custom-label">Virtual Network Setup</div>
</Col>
<Col lg={7}>
<Field name="networkSetup">
{({ field }) => (
<select
name="networkSetup"
className="form-control"
value={field.value}
onChange={field.onChange}
>
<option key={1} value="new_vpc" disabled={true}>Create a new Virtual Network</option>
<option key={2} value="existing_vpc">Specify an existing Virtual Network</option>
</select>
)}
</Field>
</Col>
</Row>
<Row className="config-provider-row">
<Col lg={10}>
<AzureRegions regions={regionsFormData} onChange={value => setRegionsFormData(value)} />
</Col>
</Row>

</Col>
</Row>
<div className="form-action-button-container">
<YBButton btnType="submit" btnClass="btn btn-default save-btn" btnText="Save" disabled={!isValid} />
</div>
</Form>
)}
</Formik>
) : (
<div className="provider-config-container">
Stay tuned for our Microsoft Azure integration.
</div>
)}
</Col>
</Row>
<div className="form-action-button-container">
<YBButton btnType="submit" btnClass="btn btn-default save-btn" btnText="Save" disabled={!isValid} />
</div>
</Form>
)}
</Formik>
</div>
);
};
Expand Down
15 changes: 13 additions & 2 deletions managed/ui/src/components/config/PublicCloud/views/AzureRegions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,46 +8,57 @@ import { YBFormInput, YBFormSelect, YBModal } from '../../../common/forms/fields
const AZURE_REGIONS = [
{
region: 'westus2',
name: 'US West 2 (Washington)',
zones: ['westus2-1', 'westus2-2', 'westus2-3']
},
{
region: 'centralus',
name: 'US Central (Iowa)',
zones: ['centralus-1', 'centralus-2', 'centralus-3']
},
{
region: 'eastus',
name: 'US East (Virginia)',
zones: ['eastus-1', 'eastus-2', 'eastus-3']
},
{
region: 'eastus2',
name: 'US East 2 (Virginia)',
zones: ['eastus2-1', 'eastus2-2', 'eastus2-3']
},
{
region: 'westeurope',
name: 'West Europe (Netherlands)',
zones: ['westeurope-1', 'westeurope-2', 'westeurope-3']
},
{
region: 'northeurope',
name: 'North Europe (Ireland)',
zones: ['northeurope-1', 'northeurope-2', 'northeurope-3']
},
{
region: 'japaneast',
name: 'Japan East (Tokyo)',
zones: ['japaneast-1', 'japaneast-2', 'japaneast-3']
},
{
region: 'southeastasia',
name: 'Southeast Asia (Singapore)',
zones: ['southeastasia-1', 'southeastasia-2', 'southeastasia-3']
},
{
region: 'australiaeast',
name: 'Australia East (New South Wales)',
zones: ['australiaeast-1', 'australiaeast-2', 'australiaeast-3']
},
{
region: 'uksouth',
name: 'UK South (London)',
zones: ['uksouth-1', 'uksouth-2', 'uksouth-3']
},
{
region: 'francecentral',
name: 'France Central (Paris)',
zones: ['francecentral-1', 'francecentral-2', 'francecentral-3']
}
];
Expand Down Expand Up @@ -99,7 +110,7 @@ export const AzureRegions = ({ regions, onChange }) => {
const selectedRegions = _.map(regions, 'region.value');
const result = AZURE_REGIONS
.filter(item => !selectedRegions.includes(item.region))
.map((region) => ({ value: region.region, label: region.region }));
.map((region) => ({ value: region.region, label: region.name }));

// when editing existing region - make sure to keep it in dropdown options
if (currentRegion) {
Expand Down Expand Up @@ -132,7 +143,7 @@ export const AzureRegions = ({ regions, onChange }) => {
{regions.map((item) => (
<li key={item.region.value} onClick={() => editRegion(item)}>
<div>
<strong>{item.region.value}</strong>
<strong>{item.region.label}</strong>
</div>
<div>
{item.vpcId}
Expand Down

0 comments on commit 4c6486f

Please sign in to comment.