feat(ecommerce): Add Cloud Provider Filters (#4649)

* ✨ Add Cloud Provider Filters

* ♻️ Code review feedback

* 🔧 Update `OpenAPI` SHA

Author: abshierjoel

src/operator/ResourcesCloudCluster.tsx

@@ -0,0 +1,69 @@
+import {
+  ComponentColor,
+  DropdownMenuTheme,
+  MultiSelectDropdown,
+} from '@influxdata/clockface'
+import React, {FC, useContext} from 'react'
+import {OperatorContext} from './context/operator'
+import {getRegions} from './utils'
+
+const ResourcesCloudCluster: FC = () => {
+  const {
+    providerInfo,
+    providers,
+    regions,
+    setProviders,
+    setRegions,
+  } = useContext(OperatorContext)
+
+  const hasSelectedProvider = providers.length > 0
+
+  const providerOptions = providerInfo.providers.map(p => p.provider)
+  const regionOptions: string[] = providers
+    .flatMap(p => getRegions(p, providerInfo.regions))
+    .map(r => r.region)
+
+  const handleSelectProvider = (selectedOption: string): void => {
+    setRegions([])
+    providers.includes(selectedOption)
+      ? setProviders(prev =>
+          prev.filter(provider => provider !== selectedOption)
+        )
+      : setProviders(prev => [selectedOption, ...prev])
+  }
+
+  const handleSelectRegion = (selectedOption: string): void =>
+    regions.includes(selectedOption)
+      ? setRegions(prev => prev.filter(region => region !== selectedOption))
+      : setRegions(prev => [selectedOption, ...prev])
+
+  return (
+    <>
+      <MultiSelectDropdown
+        style={providersStyle}
+        options={providerOptions}
+        selectedOptions={providers}
+        onSelect={handleSelectProvider}
+        menuTheme={DropdownMenuTheme.Onyx}
+        emptyText="Cloud Provider"
+        buttonColor={ComponentColor.Primary}
+      />
+      {hasSelectedProvider && (
+        <MultiSelectDropdown
+          style={regionsStyle}
+          options={regionOptions}
+          selectedOptions={regions}
+          onSelect={handleSelectRegion}
+          menuTheme={DropdownMenuTheme.Onyx}
+          emptyText="Cloud Region"
+          buttonColor={ComponentColor.Primary}
+        />
+      )}
+    </>
+  )
+}
+
+const providersStyle = {width: '220px', marginRight: '10px'}
+const regionsStyle = {width: '220px', marginRight: '20px'}
+
+export default ResourcesCloudCluster

src/operator/ResourcesTable.tsx

@@ -29,9 +29,10 @@ import {OperatorRoutes} from 'src/operator/constants'
 // Types
 import {OperatorOrg, OperatorAccount} from 'src/types'
 import ResourcesAccountType from './ResourcesAccountType'
+import ResourcesCloudCluster from './ResourcesCloudCluster'
 
 const ResourcesTable: FC = () => {
-  const {pathname, accounts, organizations, status} = useContext(
+  const {accounts, organizations, pathname, status} = useContext(
     OperatorContext
   )
 
@@ -51,6 +52,7 @@ const ResourcesTable: FC = () => {
       <Tabs.TabContents>
         <FlexBox direction={FlexDirection.Row}>
           <ResourcesAccountType />
+          {isOrgsTab && <ResourcesCloudCluster />}
           <ResourcesSearchbar />
         </FlexBox>
         <PageSpinner loading={status}>

src/operator/context/operator.tsx

@@ -5,7 +5,12 @@ import {useLocation} from 'react-router-dom'
 
 // Utils
 import {notify} from 'src/shared/actions/notifications'
-import {getOperatorAccounts, getOperatorOrgs} from 'src/client/unityRoutes'
+import {
+  getOperatorAccounts,
+  getOperatorOrgs,
+  getOperatorProviders,
+  OperatorProvidersResponse,
+} from 'src/client/unityRoutes'
 import {getAccountsError, getOrgsError} from 'src/shared/copy/notifications'
 import {getQuartzMe} from 'src/me/selectors'
 
@@ -32,9 +37,17 @@ export interface OperatorContextType {
   ) => void
   handleGetAccounts: () => void
   handleGetOrgs: () => void
+  handleGetProviders: () => void
   organizations: OperatorOrg[]
   pathname: string
+  providerInfo: OperatorProvidersResponse
   searchTerm: string
+  providers: string[]
+  setProviders: (
+    providers: string[] | ((prevState: string[]) => string[])
+  ) => void
+  regions: string[]
+  setRegions: (regions: string[] | ((prevState: string[]) => string[])) => void
   setSearchTerm: (searchTerm?: string) => void
   status: RemoteDataState
   hasWritePermissions: boolean
@@ -46,9 +59,18 @@ export const DEFAULT_CONTEXT: OperatorContextType = {
   setAccountTypes: () => {},
   handleGetAccounts: () => {},
   handleGetOrgs: () => {},
+  handleGetProviders: () => {},
   organizations: [],
   pathname: OperatorRoutes.default,
+  providerInfo: {
+    providers: [],
+    regions: {},
+  },
   searchTerm: '',
+  providers: [],
+  setProviders: () => {},
+  regions: [],
+  setRegions: () => {},
   setSearchTerm: () => {},
   status: RemoteDataState.NotStarted,
   hasWritePermissions: false,
@@ -64,6 +86,11 @@ export const OperatorProvider: FC<Props> = React.memo(({children}) => {
   const [orgsStatus, setOrgsStatus] = useState(RemoteDataState.NotStarted)
   const [searchTerm, setSearchTerm] = useState('')
   const [accountTypes, setAccountTypes] = useState<AccountType[]>([])
+  const [providers, setProviders] = useState<string[]>([])
+  const [regions, setRegions] = useState<string[]>([])
+  const [providerInfo, setProviderInfo] = useState<OperatorProvidersResponse>(
+    DEFAULT_CONTEXT.providerInfo
+  )
   const dispatch = useDispatch()
   const quartzMe = useSelector(getQuartzMe)
 
@@ -96,7 +123,12 @@ export const OperatorProvider: FC<Props> = React.memo(({children}) => {
     try {
       setOrgsStatus(RemoteDataState.Loading)
       const resp = await getOperatorOrgs({
-        query: {query: searchTerm, accountTypes},
+        query: {
+          query: searchTerm,
+          accountTypes,
+          providers,
+          regions,
+        },
       })
 
       if (resp.status !== 200) {
@@ -110,7 +142,21 @@ export const OperatorProvider: FC<Props> = React.memo(({children}) => {
       setOrgsStatus(RemoteDataState.Error)
       dispatch(notify(getOrgsError()))
     }
-  }, [accountTypes, searchTerm, dispatch])
+  }, [accountTypes, searchTerm, providers, regions, dispatch])
+
+  const handleGetProviders = useCallback(async () => {
+    try {
+      const resp = await getOperatorProviders({})
+
+      if (resp.status !== 200) {
+        throw new Error(resp.data.message)
+      }
+
+      setProviderInfo(resp.data)
+    } catch (error) {
+      console.error({error})
+    }
+  }, [])
 
   const {pathname} = useLocation()
 
@@ -123,12 +169,13 @@ export const OperatorProvider: FC<Props> = React.memo(({children}) => {
         handleGetAccounts()
         break
       case OperatorRoutes.organizations:
+        handleGetProviders()
         handleGetOrgs()
         break
       default:
         return
     }
-  }, [pathname, handleGetAccounts, handleGetOrgs])
+  }, [pathname, handleGetAccounts, handleGetOrgs, handleGetProviders])
 
   let status = RemoteDataState.Done
 
@@ -153,10 +200,16 @@ export const OperatorProvider: FC<Props> = React.memo(({children}) => {
         setAccountTypes,
         handleGetAccounts,
         handleGetOrgs,
+        handleGetProviders,
         organizations,
         pathname,
+        providerInfo,
         searchTerm,
         setSearchTerm,
+        providers,
+        setProviders,
+        regions,
+        setRegions,
         status,
         hasWritePermissions,
       }}

src/operator/utils.ts

@@ -6,7 +6,7 @@ import {
 } from 'src/billing/utils/timeHelpers'
 
 // Types
-import {OperatorOrgLimits} from 'src/types'
+import {OperatorOrgLimits, OperatorRegions} from 'src/types'
 
 const updateMaxRetentionWithCallback = (
   limits: OperatorOrgLimits,
@@ -43,3 +43,23 @@ export const fromDisplayLimits = (
   const newLimits = updateMaxRetentionWithCallback(displayLimits, hoursToNs)
   return updateQueryTimeWithCallback(newLimits, secondsToNs)
 }
+
+export const getRegions = (
+  provider: string,
+  regions: {
+    Azure?: OperatorRegions
+    AWS?: OperatorRegions
+    GCP?: OperatorRegions
+  }
+) => {
+  switch (provider) {
+    case 'Azure':
+      return regions.Azure
+    case 'AWS':
+      return regions.AWS
+    case 'GCP':
+      return regions.GCP
+    default:
+      return []
+  }
+}

src/types/operator.ts

@@ -4,6 +4,8 @@ export {
   OperatorOrgLimits,
   OperatorOrganization as OperatorOrg,
   OperatorOrganizations as OperatorOrgs,
+  OperatorProviders,
+  OperatorRegions,
   OrgLimits,
   User as OperatorUser,
 } from 'src/client/unityRoutes'