From b481b354195caa2478370c94135d2362f03037f0 Mon Sep 17 00:00:00 2001 From: Prakash Senthil Vel <23444145+prakashsvmx@users.noreply.github.com> Date: Tue, 8 Mar 2022 02:35:21 +0000 Subject: [PATCH] Region list select in Add Tier screen (#1657) Region list select in Add Tier screen --- .../AddTierConfiguration.tsx | 17 +- .../TiersConfiguration/RegionSelect.tsx | 159 +++++++++ .../RegionSelectWrapper.tsx | 197 +++++++++++ .../TiersConfiguration/azure-regions.ts | 321 ++++++++++++++++++ .../TiersConfiguration/gcs-regions.ts | 35 ++ .../TiersConfiguration/s3-regions.tsx | 48 +++ .../TiersConfiguration/types.ts | 5 + 7 files changed, 774 insertions(+), 8 deletions(-) create mode 100644 portal-ui/src/screens/Console/Configurations/TiersConfiguration/RegionSelect.tsx create mode 100644 portal-ui/src/screens/Console/Configurations/TiersConfiguration/RegionSelectWrapper.tsx create mode 100644 portal-ui/src/screens/Console/Configurations/TiersConfiguration/azure-regions.ts create mode 100644 portal-ui/src/screens/Console/Configurations/TiersConfiguration/gcs-regions.ts create mode 100644 portal-ui/src/screens/Console/Configurations/TiersConfiguration/s3-regions.tsx diff --git a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/AddTierConfiguration.tsx b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/AddTierConfiguration.tsx index 756f78b45..74d207f5a 100644 --- a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/AddTierConfiguration.tsx +++ b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/AddTierConfiguration.tsx @@ -45,6 +45,8 @@ import BackLink from "../../../../common/BackLink"; import PageLayout from "../../Common/Layout/PageLayout"; import { IAM_PAGES } from "../../../../common/SecureComponent/permissions"; +import RegionSelectWrapper from "./RegionSelectWrapper"; + const styles = (theme: Theme) => createStyles({ ...modalBasic, @@ -483,16 +485,15 @@ const AddTierConfiguration = ({ }} required /> - ) => { - setRegion(e.target.value); + { + setRegion(value); }} required={type !== "minio"} + label={"Region"} + id="region" + name="region" + type={type} /> {type === s3ServiceName || (type === minioServiceName && ( diff --git a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/RegionSelect.tsx b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/RegionSelect.tsx new file mode 100644 index 000000000..82f0b15cc --- /dev/null +++ b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/RegionSelect.tsx @@ -0,0 +1,159 @@ +// This file is part of MinIO Console Server +// Copyright (c) 2022 MinIO, Inc. +// +// This program is free software: you can redistribute it and/or modify +// it under the terms of the GNU Affero General Public License as published by +// the Free Software Foundation, either version 3 of the License, or +// (at your option) any later version. +// +// This program is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU Affero General Public License for more details. +// +// You should have received a copy of the GNU Affero General Public License +// along with this program. If not, see . + +import React from "react"; + +import { Autocomplete, Box, TextField } from "@mui/material"; + +import s3Regions from "./s3-regions"; +import gcsRegions from "./gcs-regions"; +import azRegions from "./azure-regions"; + +const getRegions = (type: string): any => { + if (type === "s3") { + return s3Regions; + } + if (type === "gcs") { + return gcsRegions; + } + if (type === "azure") { + return azRegions; + } + + return []; +}; + +const RegionSelect = ({ + type, + onChange, + inputProps, +}: { + type: "minio" | "s3" | "gcs" | "azure" | "unsupported"; + onChange: (obj: any) => void; + inputProps?: any; +}) => { + const regionList = getRegions(type); + const [value, setValue] = React.useState(""); + + return ( + { + let newVal: any = newValue; + + if (typeof newValue === "string") { + newVal = { + label: newValue, + }; + } else if (newValue && newValue.inputValue) { + // Create a new value from the user input + newVal = { + label: newValue.inputValue, + }; + } else { + newVal = newValue; + } + setValue(newVal); + onChange(newVal?.value); + }} + value={value} + onInputChange={(e: any) => { + const { target: { value = "" } = {} } = e || {}; + onChange(value); + }} + getOptionLabel={(option) => { + // Value selected with enter, right from the input + if (typeof option === "string") { + return option; + } + // Add "xxx" option created dynamically + if (option.inputValue) { + return option.inputValue; + } + // Regular option + return option.value; + }} + options={regionList} + filterOptions={(opts: any[], state: any) => { + const filterText = state.inputValue.toLowerCase(); + + return opts.filter((opt) => + `${opt.label.toLowerCase()}${opt.value.toLowerCase()}`.includes( + filterText + ) + ); + }} + renderOption={(props: any, opt: any) => { + return ( +
  • + + {opt.value} + {opt.label} + +
    • + ); + }} + renderInput={(params) => ( + + )} + /> + ); +}; + +export default RegionSelect; diff --git a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/RegionSelectWrapper.tsx b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/RegionSelectWrapper.tsx new file mode 100644 index 000000000..dfa35fcb2 --- /dev/null +++ b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/RegionSelectWrapper.tsx @@ -0,0 +1,197 @@ +// This file is part of MinIO Console Server +// Copyright (c) 2022 MinIO, Inc. +// +// This program is free software: you can redistribute it and/or modify +// it under the terms of the GNU Affero General Public License as published by +// the Free Software Foundation, either version 3 of the License, or +// (at your option) any later version. +// +// This program is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU Affero General Public License for more details. +// +// You should have received a copy of the GNU Affero General Public License +// along with this program. If not, see . +import React from "react"; +import { Grid, IconButton, InputLabel, Tooltip } from "@mui/material"; +import { InputProps as StandardInputProps } from "@mui/material/Input"; +import { Theme } from "@mui/material/styles"; +import createStyles from "@mui/styles/createStyles"; +import makeStyles from "@mui/styles/makeStyles"; +import withStyles from "@mui/styles/withStyles"; +import { + fieldBasic, + inputFieldStyles, + tooltipHelper, +} from "../../Common/FormComponents/common/styleLibrary"; +import HelpIcon from "../../../../icons/HelpIcon"; +import clsx from "clsx"; +import RegionSelect from "./RegionSelect"; + +interface RegionSelectBoxProps { + label: string; + classes?: any; + onChange: (value: string) => void; + onKeyPress?: (e: any) => void; + value?: string | boolean; + id: string; + name: string; + disabled?: boolean; + type: "minio" | "s3" | "gcs" | "azure"; + tooltip?: string; + index?: number; + error?: string; + required?: boolean; + placeholder?: string; + overlayId?: string; + overlayIcon?: any; + overlayAction?: () => void; + overlayObject?: any; + extraInputProps?: StandardInputProps["inputProps"]; + noLabelMinWidth?: boolean; + pattern?: string; + autoFocus?: boolean; + className?: string; +} + +const styles = (theme: Theme) => + createStyles({ + ...fieldBasic, + ...tooltipHelper, + textBoxContainer: { + flexGrow: 1, + position: "relative", + minWidth: 160, + }, + overlayAction: { + position: "absolute", + right: 5, + top: 6, + "& svg": { + maxWidth: 15, + maxHeight: 15, + }, + "&.withLabel": { + top: 5, + }, + }, + inputLabel: { + ...fieldBasic.inputLabel, + fontWeight: "normal", + }, + }); + +const inputStyles = makeStyles((theme: Theme) => + createStyles({ + ...inputFieldStyles, + }) +); + +const RegionSelectWrapper = ({ + label, + onChange, + id, + name, + type, + tooltip = "", + index = 0, + error = "", + required = false, + overlayId, + overlayIcon = null, + overlayObject = null, + extraInputProps = {}, + overlayAction, + noLabelMinWidth = false, + classes, + className = "", +}: RegionSelectBoxProps) => { + const inputClasses = inputStyles(); + + let inputProps: any = { + "data-index": index, + ...extraInputProps, + name: name, + id: id, + classes: inputClasses, + }; + + return ( + + + {label !== "" && ( + + + {label} + {required ? "*" : ""} + + {tooltip !== "" && ( +
    + +
    + +
    +     +
    + )} +     + )} + +
    + + {overlayIcon && ( +
    + { + overlayAction(); + } + : () => null + } + id={overlayId} + size={"small"} + disableFocusRipple={false} + disableRipple={false} + disableTouchRipple={false} + > + {overlayIcon} + +
    + )} + {overlayObject && ( +
    + {overlayObject} +
    + )} +
    +     +     + ); +}; + +export default withStyles(styles)(RegionSelectWrapper); diff --git a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/azure-regions.ts b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/azure-regions.ts new file mode 100644 index 000000000..2103e0730 --- /dev/null +++ b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/azure-regions.ts @@ -0,0 +1,321 @@ +// This file is part of MinIO Console Server +// Copyright (c) 2022 MinIO, Inc. +// +// This program is free software: you can redistribute it and/or modify +// it under the terms of the GNU Affero General Public License as published by +// the Free Software Foundation, either version 3 of the License, or +// (at your option) any later version. +// +// This program is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU Affero General Public License for more details. +// +// You should have received a copy of the GNU Affero General Public License +// along with this program. If not, see . + +import { RegionEntry } from "./types"; + +const azureRegions: RegionEntry[] = [ + { + label: "Asia", + value: "asia", + }, + { + label: "Asia Pacific", + value: "asiapacific", + }, + { + label: "Australia", + value: "australia", + }, + { + label: "Australia Central", + value: "australiacentral", + }, + { + label: "Australia Central 2", + value: "australiacentral2", + }, + { + label: "Australia East", + value: "australiaeast", + }, + { + label: "Australia Southeast", + value: "australiasoutheast", + }, + { + label: "Brazil", + value: "brazil", + }, + { + label: "Brazil South", + value: "brazilsouth", + }, + { + label: "Brazil Southeast", + value: "brazilsoutheast", + }, + { + label: "Canada", + value: "canada", + }, + { + label: "Canada Central", + value: "canadacentral", + }, + { + label: "Canada East", + value: "canadaeast", + }, + { + label: "Central India", + value: "centralindia", + }, + { + label: "Central US", + value: "centralus", + }, + { + label: "Central US (Stage)", + value: "centralusstage", + }, + { + label: "Central US EUAP", + value: "centraluseuap", + }, + { + label: "East Asia", + value: "eastasia", + }, + { + label: "East Asia (Stage)", + value: "eastasiastage", + }, + { + label: "East US", + value: "eastus", + }, + { + label: "East US (Stage)", + value: "eastusstage", + }, + { + label: "East US 2", + value: "eastus2", + }, + { + label: "East US 2 (Stage)", + value: "eastus2stage", + }, + { + label: "East US 2 EUAP", + value: "eastus2euap", + }, + { + label: "Europe", + value: "europe", + }, + { + label: "France", + value: "france", + }, + { + label: "France Central", + value: "francecentral", + }, + { + label: "France South", + value: "francesouth", + }, + { + label: "Germany", + value: "germany", + }, + { + label: "Germany North", + value: "germanynorth", + }, + { + label: "Germany West Central", + value: "germanywestcentral", + }, + { + label: "Global", + value: "global", + }, + { + label: "India", + value: "india", + }, + { + label: "Japan", + value: "japan", + }, + { + label: "Japan East", + value: "japaneast", + }, + { + label: "Japan West", + value: "japanwest", + }, + { + label: "Jio India Central", + value: "jioindiacentral", + }, + { + label: "Jio India West", + value: "jioindiawest", + }, + { + label: "Korea", + value: "korea", + }, + { + label: "Korea Central", + value: "koreacentral", + }, + { + label: "Korea South", + value: "koreasouth", + }, + { + label: "North Central US", + value: "northcentralus", + }, + { + label: "North Central US (Stage)", + value: "northcentralusstage", + }, + { + label: "North Europe", + value: "northeurope", + }, + { + label: "Norway", + value: "norway", + }, + { + label: "Norway East", + value: "norwayeast", + }, + { + label: "Norway West", + value: "norwaywest", + }, + { + label: "South Africa", + value: "southafrica", + }, + { + label: "South Africa North", + value: "southafricanorth", + }, + { + label: "South Africa West", + value: "southafricawest", + }, + { + label: "South Central US", + value: "southcentralus", + }, + { + label: "South Central US (Stage)", + value: "southcentralusstage", + }, + { + label: "South India", + value: "southindia", + }, + { + label: "Southeast Asia", + value: "southeastasia", + }, + { + label: "Southeast Asia (Stage)", + value: "southeastasiastage", + }, + { + label: "Sweden Central", + value: "swedencentral", + }, + { + label: "Switzerland", + value: "switzerland", + }, + { + label: "Switzerland North", + value: "switzerlandnorth", + }, + { + label: "Switzerland West", + value: "switzerlandwest", + }, + { + label: "UAE Central", + value: "uaecentral", + }, + { + label: "UAE North", + value: "uaenorth", + }, + { + label: "UK South", + value: "uksouth", + }, + { + label: "UK West", + value: "ukwest", + }, + { + label: "United Arab Emirates", + value: "uae", + }, + { + label: "United Kingdom", + value: "uk", + }, + { + label: "United States", + value: "unitedstates", + }, + { + label: "United States EUAP", + value: "unitedstateseuap", + }, + { + label: "West Central US", + value: "westcentralus", + }, + { + label: "West Europe", + value: "westeurope", + }, + { + label: "West India", + value: "westindia", + }, + { + label: "West US", + value: "westus", + }, + { + label: "West US (Stage)", + value: "westusstage", + }, + { + label: "West US 2", + value: "westus2", + }, + { + label: "West US 2 (Stage)", + value: "westus2stage", + }, + { + label: "West US 3", + value: "westus3", + }, +]; +export default azureRegions; diff --git a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/gcs-regions.ts b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/gcs-regions.ts new file mode 100644 index 000000000..915c94776 --- /dev/null +++ b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/gcs-regions.ts @@ -0,0 +1,35 @@ +import { RegionEntry } from "./types"; + +const gcsRegions: RegionEntry[] = [ + { label: "Montréal", value: "NORTHAMERICA-NORTHEAST1" }, + { label: "Toronto", value: "NORTHAMERICA-NORTHEAST2" }, + { label: "Iowa", value: "US-CENTRAL1" }, + { label: "South Carolina", value: "US-EAST1" }, + { label: "Northern Virginia", value: "US-EAST4" }, + { label: "Oregon", value: "US-WEST1" }, + { label: "Los Angeles", value: "US-WEST2" }, + { label: "Salt Lake City", value: "US-WEST3" }, + { label: "Las Vegas", value: "US-WEST4" }, + { label: "São Paulo", value: "SOUTHAMERICA-EAST1" }, + { label: "Santiago", value: "SOUTHAMERICA-WEST1" }, + { label: "Warsaw", value: "EUROPE-CENTRAL2" }, + { label: "Finland", value: "EUROPE-NORTH1" }, + { label: "Belgium", value: "EUROPE-WEST1" }, + { label: "London", value: "EUROPE-WEST2" }, + { label: "Frankfurt", value: "EUROPE-WEST3" }, + { label: "Netherlands", value: "EUROPE-WEST4" }, + { label: "Zürich", value: "EUROPE-WEST6" }, + { label: "Taiwan", value: "ASIA-EAST1" }, + { label: "Hong Kong", value: "ASIA-EAST2" }, + { label: "Tokyo", value: "ASIA-NORTHEAST1" }, + { label: "Osaka", value: "ASIA-NORTHEAST2" }, + { label: "Seoul", value: "ASIA-NORTHEAST3" }, + { label: "Mumbai", value: "ASIA-SOUTH1" }, + { label: "Delhi", value: "ASIA-SOUTH2" }, + { label: "Singapore", value: "ASIA-SOUTHEAST1" }, + { label: "Jakarta", value: "ASIA-SOUTHEAST2" }, + { label: "Sydney", value: "AUSTRALIA-SOUTHEAST1" }, + { label: "Melbourne", value: "AUSTRALIA-SOUTHEAST2" }, +]; + +export default gcsRegions; diff --git a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/s3-regions.tsx b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/s3-regions.tsx new file mode 100644 index 000000000..79b06941a --- /dev/null +++ b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/s3-regions.tsx @@ -0,0 +1,48 @@ +// This file is part of MinIO Console Server +// Copyright (c) 2022 MinIO, Inc. +// +// This program is free software: you can redistribute it and/or modify +// it under the terms of the GNU Affero General Public License as published by +// the Free Software Foundation, either version 3 of the License, or +// (at your option) any later version. +// +// This program is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU Affero General Public License for more details. +// +// You should have received a copy of the GNU Affero General Public License +// along with this program. If not, see . + +import { RegionEntry } from "./types"; + +const s3Regions: RegionEntry[] = [ + { label: "US East (Ohio)", value: "us-east-2" }, + { label: "US East (N. Virginia)", value: "us-east-1" }, + { label: "US West (N. California)", value: "us-west-1" }, + { label: "US West (Oregon)", value: "us-west-2" }, + { label: "Africa (Cape Town)", value: "af-south-1" }, + { label: "Asia Pacific (Hong Kong)***", value: "ap-east-1" }, + { label: "Asia Pacific (Jakarta)", value: "ap-southeast-3" }, + { label: "Asia Pacific (Mumbai)", value: "ap-south-1" }, + { label: "Asia Pacific (Osaka)", value: "ap-northeast-3" }, + { label: "Asia Pacific (Seoul)", value: "ap-northeast-2" }, + { label: "Asia Pacific (Singapore)", value: "ap-southeast-1" }, + { label: "Asia Pacific (Sydney)", value: "ap-southeast-2" }, + { label: "Asia Pacific (Tokyo)", value: "ap-northeast-1" }, + { label: "Canada (Central)", value: "ca-central-1" }, + { label: "China (Beijing)", value: "cn-north-1" }, + { label: "China (Ningxia)", value: "cn-northwest-1" }, + { label: "Europe (Frankfurt)", value: "eu-central-1" }, + { label: "Europe (Ireland)", value: "eu-west-1" }, + { label: "Europe (London)", value: "eu-west-2" }, + { label: "Europe (Milan)", value: "eu-south-1" }, + { label: "Europe (Paris)", value: "eu-west-3" }, + { label: "Europe (Stockholm)", value: "eu-north-1" }, + { label: "South America (São Paulo)", value: "sa-east-1" }, + { label: "Middle East (Bahrain)", value: "me-south-1" }, + { label: "AWS GovCloud (US-East)", value: "us-gov-east-1" }, + { label: "AWS GovCloud (US-West)", value: "us-gov-west-1" }, +]; + +export default s3Regions; diff --git a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/types.ts b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/types.ts index 9dd3519e9..ccd26b308 100644 --- a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/types.ts +++ b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/types.ts @@ -62,3 +62,8 @@ export interface ITierUpdateCreds { secret_key: string; creds: string; } + +export interface RegionEntry { + label: string; + value: string; +}