DB Fileupload changes

Uploading now works on a per-service basis
Added new selector to get a map of services to s3 buckets
Minor cleanup

Author: tobuck-aws

client/web/src/settings/ApplicationComponent.js

@@ -20,15 +20,7 @@ import { useDispatch } from 'react-redux'
 import { Formik, Form } from 'formik'
 import { PropTypes } from 'prop-types'
 import * as Yup from 'yup'
-import {
-  Button,
-  Row,
-  Col,
-  Card,
-  CardBody,
-  Alert,
-  FormFeedback,
-} from 'reactstrap'
+import { Button, Row, Col, Card, CardBody, Alert } from 'reactstrap'
 import LoadingOverlay from '@ronchalant/react-loading-overlay'
 
 import AppSettingsSubform from './AppSettingsSubform'
@@ -64,7 +56,6 @@ export function ApplicationComponent(props) {
     tiers,
   } = props
 
-  console.log('App Config:', appConfig)
   const LINUX = 'LINUX'
   const WINDOWS = 'WINDOWS'
   const FSX = 'FSX'
@@ -233,10 +224,15 @@ export function ApplicationComponent(props) {
           username: Yup.string()
             .matches('^[a-zA-Z]+[a-zA-Z0-9_$]*$', 'Username is not valid')
             .required('Username is required'),
-          password: Yup.string().when('hasEncryptedPassword', {
-            is: false,
-            then: Yup.string().matches('^[a-zA-Z0-9/@"\' ]{8,}$', 'Password must be longer than 8 characters and can only contain alphanumberic characters or / @ " \' and spaces')
-          }).required('Password is required'),
+          password: Yup.string()
+            .when('hasEncryptedPassword', {
+              is: false,
+              then: Yup.string().matches(
+                '^[a-zA-Z0-9/@"\' ]{8,}$',
+                'Password must be longer than 8 characters and can only contain alphanumberic characters or / @ " \' and spaces'
+              ),
+            })
+            .required('Password is required'),
           database: Yup.string(),
         }),
         otherwise: Yup.object(),
@@ -323,13 +319,18 @@ export function ApplicationComponent(props) {
     services: Yup.array(
       Yup.object({
         public: Yup.boolean().required(),
-        name: Yup.string().when('tombstone', (tombstone, schema) => {
-          return requiredIfNotTombstoned(
-            tombstone,
-            schema,
-            'Service Name is a required field.'
-          )
-        }).matches(/^[\.\-_a-zA-Z0-9]+$/, 'Name must only contain alphanumeric characters or .-_'),
+        name: Yup.string()
+          .when('tombstone', (tombstone, schema) => {
+            return requiredIfNotTombstoned(
+              tombstone,
+              schema,
+              'Service Name is a required field.'
+            )
+          })
+          .matches(
+            /^[\.\-_a-zA-Z0-9]+$/,
+            'Name must only contain alphanumeric characters or .-_'
+          ),
         description: Yup.string(),
         path: Yup.string()
           .when(['public', 'tombstone'], (isPublic, tombstone, schema) => {
@@ -378,9 +379,8 @@ export function ApplicationComponent(props) {
     provisionBilling: Yup.boolean(),
   })
 
-  const onFileSelected = (databaseObject, file) => {
-    databaseObject.bootstrapFilename = file.name
-    props.onFileSelected(file)
+  const onFileSelected = (serviceName, file) => {
+    props.onFileSelected({ serviceName, file })
   }
 
   const dismissError = () => {

client/web/src/settings/ApplicationContainer.js

@@ -17,25 +17,26 @@
 import React, { useEffect, useState } from 'react'
 import { Switch, Route } from 'react-router-dom'
 import { useDispatch, useSelector } from 'react-redux'
-
+import {
+  saveToPresignedBucket,
+  selectServiceToS3BucketMap,
+} from '../settings/ducks'
 import {
   fetchSettings,
   fetchConfig,
   updateConfig,
-  saveToPresignedBucket,
   selectAllSettings,
   dismissError,
   selectLoading,
   selectConfig,
   selectConfigLoading,
   selectConfigError,
   selectConfigMessage,
-  createConfig,
 } from './ducks'
 
 import { ApplicationComponent } from './ApplicationComponent'
 import { ConfirmModal } from './ConfirmModal'
-import { selectDbOptions, selectOsOptions, selectDbUploadUrl } from '../options/ducks'
+import { selectDbOptions, selectOsOptions } from '../options/ducks'
 import { fetchTenantsThunk, selectAllTenants } from '../tenant/ducks'
 import { fetchTiersThunk, selectAllTiers } from '../tier/ducks'
 
@@ -53,7 +54,8 @@ export function ApplicationContainer(props) {
   const configLoading = useSelector(selectConfigLoading)
   const configMessage = useSelector(selectConfigMessage)
   const configError = useSelector(selectConfigError)
-  const dbUploadUrl = useSelector(selectDbUploadUrl)
+  const serviceToS3BucketMap = useSelector(selectServiceToS3BucketMap)
+
   const hasTenants = useSelector((state) => {
     return selectAllTenants(state)?.length > 0
   })
@@ -114,6 +116,21 @@ export function ApplicationContainer(props) {
     }
   }, [dispatch])
 
+  useEffect(() => {
+    Object.keys(file).forEach((fn) => {
+      const dbFile = file[fn]
+      const url = serviceToS3BucketMap[fn]
+      if (dbFile && url) {
+        dispatch(
+          saveToPresignedBucket({
+            dbFile,
+            url,
+          })
+        )
+      }
+    })
+  }, [serviceToS3BucketMap, appConfig, dispatch, file])
+
   const presubmitCheck = (values) => {
     setFormValues(values)
     if (hasTenants) {
@@ -143,16 +160,8 @@ export function ApplicationContainer(props) {
       return encryptedPw.substring(0, 8) === pw
     }
 
-    console.log("updateConfiguration!")
-    console.log(values)
-
     try {
-      const {
-        services,
-        billing,
-        provisionBilling,
-        ...rest
-      } = values
+      const { services, billing, provisionBilling, ...rest } = values
       let cleanedServicesMap = {}
       for (var serviceIndex in services) {
         let thisService = services[serviceIndex]
@@ -169,7 +178,11 @@ export function ApplicationContainer(props) {
             ...rest
           } = thisService.tiers[tierName]
           let { filesystemLifecycle, ...cleanedFs } = filesystem
-          let { weeklyMaintenanceDay, weeklyMaintenanceTime: time, ...cleanedFsx } = cleanedFs.fsx
+          let {
+            weeklyMaintenanceDay,
+            weeklyMaintenanceTime: time,
+            ...cleanedFsx
+          } = cleanedFs.fsx
           const weeklyTime = getFormattedTime(time)
           const fsx = {
             ...cleanedFsx,
@@ -180,13 +193,20 @@ export function ApplicationContainer(props) {
             efs: cleanedFs.fileSystemType === EFS ? cleanedFs.efs : null,
             fsx: cleanedFs.fileSystemType === FSX ? fsx : null,
           }
-          const { port, hasEncryptedPassword, encryptedPassword, ...restDb } = database
+          const {
+            port,
+            hasEncryptedPassword,
+            encryptedPassword,
+            bootstrapFilename,
+            ...restDb
+          } = database
           // If we detected an encrypted password coming in, and it looks like they haven't changed it
           // then send the encrypted password back to the server. Otherwise send what they changed.
           const cleanedDb = {
             ...restDb,
             password:
-              hasEncryptedPassword && isMatch(restDb.password, encryptedPassword)
+              hasEncryptedPassword &&
+              isMatch(restDb.password, encryptedPassword)
                 ? encryptedPassword
                 : restDb.password,
           }
@@ -219,21 +239,14 @@ export function ApplicationContainer(props) {
         billing: provisionBilling ? billing : null,
         services: cleanedServicesMap,
       }
-
-// TODO this file is controlled as a single state and setter passed to all DB forms
-// TODO also, the settings API implementation of the DB init file will need to change for multiple services as well
-//      if (!!file && file.name && provisionDb) {
-//        await dispatch(saveToPresignedBucket({ dbFile: file, url: dbUploadUrl }))
-//      }
-      console.log('dispatching the following appConfig...')
-      console.log(configToSend)
-      await dispatch(updateConfig(configToSend))
+      dispatch(updateConfig(configToSend))
     } catch (e) {
       console.error(e)
     }
   }
 
-  const handleFileSelected = (file) => {
+  const handleFileSelected = (newFile) => {
+    file[newFile.serviceName] = newFile.file
     setFile(file)
   }
 
@@ -262,7 +275,11 @@ export function ApplicationContainer(props) {
               settingsObj={settingsObj}
               error={configError}
               message={configMessage}
-              loading={loading === 'idle' && configLoading === 'idle' ? 'idle' : 'pending'}
+              loading={
+                loading === 'idle' && configLoading === 'idle'
+                  ? 'idle'
+                  : 'pending'
+              }
               updateConfiguration={presubmitCheck}
               tiers={tiers}
               {...props}

client/web/src/settings/ServicesComponent.js

@@ -41,7 +41,6 @@ const ServicesComponent = (props) => {
   }
 
   const addService = (serviceName) => {
-    console.log('addService ' + serviceName)
     let newService = initService(serviceName)
     formik.values.services.push(newService)
     setServices([...formik.values.services])
@@ -86,8 +85,8 @@ const ServicesComponent = (props) => {
                       <TierServiceSettingsSubform
                         tiers={tiers}
                         isLocked={hasTenants}
+                        serviceName={service.name}
                         serviceValues={formik.values.services[index]}
-                        setFieldValue={formik.setFieldValue}
                         dbOptions={dbOptions}
                         onFileSelected={onFileSelected}
                         formikServicePrefix={'services[' + index + ']'}

client/web/src/settings/TierServiceSettingsSubform.js

@@ -15,25 +15,10 @@
  */
 
 import React, { useState } from 'react'
-import {
-  Row,
-  Col,
-  Card,
-  CardBody,
-  CardHeader,
-  FormGroup,
-  Label,
-  FormFeedback,
-} from 'reactstrap'
-import { Field } from 'formik'
-import {
-  SaasBoostSelect,
-  SaasBoostCheckbox,
-  SaasBoostInput,
-} from '../components/FormComponents'
+import { Row, Col, Card, CardBody, CardHeader } from 'reactstrap'
+import { SaasBoostSelect, SaasBoostInput } from '../components/FormComponents'
 import {
   CDropdown,
-  CDropdownHeader,
   CDropdownItem,
   CDropdownMenu,
   CDropdownToggle,
@@ -44,13 +29,13 @@ import DatabaseSubform from './DatabaseSubform'
 
 const TierServiceSettingsSubform = (props) => {
   const {
-    isLocked,
-    formikServicePrefix,
-    serviceIndex,
     tiers,
+    isLocked,
+    serviceName,
+    serviceValues,
     dbOptions,
     onFileSelected,
-    serviceValues,
+    formikServicePrefix,
   } = props
 
   const [selectedTier, setSelectedTier] = useState(tiers[0].name)
@@ -59,7 +44,6 @@ const TierServiceSettingsSubform = (props) => {
   // TODO does that need to be controlled by the ApplicationContainer.. wherever the initialValues are set?
   // TODO I think we can override initialValues as we go along
   // TODO the only important thing is that it's set going back
-
   return (
     <>
       <Row>
@@ -69,7 +53,7 @@ const TierServiceSettingsSubform = (props) => {
               <CDropdown>
                 <CDropdownToggle>{selectedTier}</CDropdownToggle>
                 <CDropdownMenu>
-                  {tiers.map(tier => (
+                  {tiers.map((tier) => (
                     <CDropdownItem
                       onClick={() => setSelectedTier(tier.name)}
                       key={formikServicePrefix + '-' + tier.name}
@@ -169,12 +153,7 @@ const TierServiceSettingsSubform = (props) => {
                       serviceValues?.tiers[selectedTier]?.provisionDb
                     }
                     values={serviceValues?.tiers[selectedTier]?.database}
-                    onFileSelected={(file) =>
-                      onFileSelected(
-                        serviceValues?.tiers[selectedTier]?.database,
-                        file
-                      )
-                    }
+                    onFileSelected={(file) => onFileSelected(serviceName, file)}
                   ></DatabaseSubform>
                 </Col>
               </Row>