@postgres.ai/shared 3.5.1-pr-1027.0

package/pages/Configuration/styles.module.scss

@@ -0,0 +1,122 @@
+.textField {
+  width: 400px;
+  max-width: 100%;
+
+  input,
+  label {
+    font-family: 'Fira Code', monospace;
+    color: #000;
+  }
+
+  label {
+    font-size: 10px;
+  }
+
+  :disabled {
+    cursor: not-allowed;
+    color: rgba(0, 0, 0, 0.38);
+  }
+
+  @media (max-width: 600px) {
+    width: 100%;
+  }
+}
+
+.chipContainer {
+  width: 350px;
+  max-width: 100%;
+  margin-bottom: 0;
+}
+
+.databasesContainer {
+  width: 350px;
+  max-width: 100%;
+}
+
+.chip {
+  margin-right: 8px;
+  margin-top: 8px;
+}
+
+.underline {
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.root {
+  font-size: 12px;
+  max-width: 450px;
+}
+
+.spinner {
+  margin-left: 8px;
+}
+
+.spinnerContainer {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.infoIcon {
+  margin-left: 6px;
+  height: 12px;
+  width: 12px;
+}
+
+.externalIcon {
+  margin-left: 2px;
+  height: 12px;
+  width: 12px;
+}
+
+.externalLink {
+  display: inline-flex;
+  align-items: center;
+  width: max-content;
+
+  &:link,
+  &:hover {
+    color: #0000ee;
+  }
+
+  &:visited {
+    color: #551a8b;
+  }
+}
+
+.largeIcon {
+  height: 15px;
+  width: 15px;
+}
+
+.subsection {
+  margin-bottom: 0.25rem;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.modalTitle {
+  font-size: 16px;
+  font-weight: bold !important;
+}
+
+.sectionTitle {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+}
+
+.firaCodeFont {
+  font-family: 'Fira Code', monospace !important;
+}
+
+.snackbar {
+  div {
+    background-color: #ff6212;
+    color: #fff;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+}

package/pages/Configuration/tooltipText.tsx

@@ -0,0 +1,157 @@
+import styles from './styles.module.scss'
+
+export const tooltipText = {
+  dockerTag: () => (
+    <div>
+      Docker image version - latest ones listed first. If unsure, pick the top
+      one
+    </div>
+  ),
+  dockerImage: () => (
+    <div>
+      Major PostgreSQL version (e.g., "9.6", "15"). For logical provisioning
+      mode, the version used by DBLab doesn't need to match the version used on
+      the source (although, it's recommended). <br />
+      If you need a version that is not listed here, contact support.
+    </div>
+  ),
+  dockerImageType: () => (
+    <div>
+      Docker image used to run all database containers – clones, snapshot
+      preparation containers, sync containers. Although such images are based on
+      traditional Docker images for Postgres, DBLab expects slightly different
+      behavior: e.g., Postgres is not the first process used to start container,
+      so Postgres restarts are possible, they do not trigger container state
+      change. For details, see{' '}
+      <a
+        target={'_blank'}
+        href={'https://postgres.ai/docs/database-lab/supported-databases'}
+        className={styles.externalLink}
+      >
+        the docs
+      </a>
+      .
+    </div>
+  ),
+  sharedBuffers: () => (
+    <div>
+      Defines default buffer pool size of each Postgres instance managed by DBLab.
+      Note, that this amount of RAM is immediately allocated at Postgres startup
+      time. For example, if the machine running DBLab has 32 GiB of RAM, and the
+      value used here is '1GB', then the theoretical limit of the number of
+      clones is 32. Practically, this limit is even lower because some memory is
+      consumed by various other processes. If you need more clones, reduce the
+      value of{' '}
+      <span className={styles.firaCodeFont}>configs.shared_buffers</span>.
+    </div>
+  ),
+  sharedPreloadLibraries: () => (
+    <div>
+      Specifies one or more shared libraries (comma-separated list) to be
+      preloaded at Postgres server start (
+      <a
+        target={'_blank'}
+        href={'https://postgresqlco.nf/doc/en/param/shared_preload_libraries/'}
+        className={styles.externalLink}
+      >
+        details
+      </a>
+      ). If some libraries/extensions are missing, Postgres fails to start, so
+      make sure that <span className={styles.firaCodeFont}>dockerImage</span>{' '}
+      used above contains all the needed extensions.
+    </div>
+  ),
+  host: () => (
+    <div>
+      Hostname/IP of database that will be used as source for data retrieval
+      (full data refresh).
+    </div>
+  ),
+  port: () => (
+    <div>
+      Port of database that will be used as source for data retrieval (full data
+      refresh).
+    </div>
+  ),
+  username: () => (
+    <div>
+      Username used to connect to database that will be used as source for data
+      retrieval (full data refresh).
+    </div>
+  ),
+  password: () => (
+    <div>
+      Password used to connect to database that will be used as source for data
+      retrieval (full data refresh).
+    </div>
+  ),
+  dbname: () => (
+    <div>
+      Database name used to connect to the source to run diagnostics queries.
+      This database is not necesserarily to be copied (another field,{' '}
+      <span className={styles.firaCodeFont}>databases</span>, defines which
+      database to copy).
+    </div>
+  ),
+  databases: () => (
+    <div>
+      Specifies list of databases Postgres server to copy at data retrieval
+      (full data refresh). To specify multiple database names, provide each
+      value in a separte line or use space as a divider. To copy all available
+      databases, leave this value empty.
+    </div>
+  ),
+  dumpParallelJobs: () => (
+    <div>
+      Number of parallel workers used to dump the source databases to disk. If
+      the source is production server under load, it is not recommended to use
+      more than 50% of its number of vCPUs. The higher number, the faster
+      dumping is, but the higher risks of performance issues on the source
+      (e.g., due to CPU or disk IO saturation).
+    </div>
+  ),
+  pgDumpCustomOptions: () => (
+    <div>
+      pg_dump options to be used to create a database dump, for example:
+      '--exclude-schema=repack --exclude-schema="camelStyleSchemaName"'. Note
+      that due to security reasons, the current implementation supports only
+      letters, numbers, hyphen, underscore, equal sign, and double quotes.
+    </div>
+  ),
+  restoreParallelJobs: () => (
+    <div>
+      Number of parallel workers used to restore databases from dump to Postgres
+      managed by DBLab. For initial data retrieval (very first data refresh), it
+      is recommended to use the number of vCPUs available on machine running
+      DBLab. With this approach, we have faster restore time, but we need to keep
+      in mind that we can also have higher usage of CPU and disk IO on this
+      machine (up to temporary saturation of resources). For subsequent
+      refreshes, if DBLab is constantly used, it is recommended to reduce this
+      value by 50% to keep some room for normal use of DBLab (such as work with
+      clones).
+    </div>
+  ),
+  pgRestoreCustomOptions: () => (
+    <div>
+      pg_restore options to be used to restore from a database dump, for
+      example: '--exclude-schema=repack
+      --exclude-schema="camelStyleSchemaName"'. Note that due to security
+      reasons, the current implementation supports only letters, numbers,
+      hyphen, underscore, equal sign, and double quotes.
+    </div>
+  ),
+  timetable: () => (
+    <div>
+      Schedule for full data refreshes, in{' '}
+      <a
+        target={'_blank'}
+        href={'https://en.wikipedia.org/wiki/Cron#Overview'}
+        className={styles.externalLink}
+      >
+        crontab format
+      </a>
+      .
+    </div>
+  ),
+  tuningParams: () => <div>Test</div>,
+}

package/pages/Configuration/useForm.ts

@@ -0,0 +1,108 @@
+/*--------------------------------------------------------------------------
+ * Copyright (c) 2019-2021, Postgres.ai, Nikolay Samokhvalov nik@postgres.ai
+ * All Rights Reserved. Proprietary and confidential.
+ * Unauthorized copying of this file, via any medium is strictly prohibited
+ *--------------------------------------------------------------------------
+ */
+
+import { useFormik } from 'formik'
+import * as Yup from 'yup'
+
+export type FormValues = {
+  debug: boolean
+  dockerImage: string
+  dockerTag: string
+  dockerPath: string
+  dockerImageType: string
+  sharedBuffers: string
+  sharedPreloadLibraries: string
+  tuningParams: string
+  timetable: string
+  dbname: string
+  host: string
+  port: string
+  username: string
+  password: string
+  databases: string
+  dumpParallelJobs: string
+  dumpIgnoreErrors: boolean
+  restoreParallelJobs: string
+  restoreIgnoreErrors: boolean
+  pgDumpCustomOptions: string
+  pgRestoreCustomOptions: string
+}
+
+const Schema = Yup.object().shape({
+  dockerImage: Yup.string().required('Docker image is required'),
+  dbname: Yup.string().required('Dbname is required'),
+  host: Yup.string().required('Host is required'),
+  port: Yup.string().required('Port is required'),
+  username: Yup.string().required('Username is required'),
+})
+
+export const useForm = (onSubmit: (values: FormValues) => void) => {
+  const formik = useFormik<FormValues>({
+    initialValues: {
+      debug: false,
+      dockerImage: '',
+      dockerTag: '',
+      dockerPath: '',
+      dockerImageType: '',
+      sharedBuffers: '',
+      sharedPreloadLibraries: '',
+      tuningParams: '',
+      timetable: '',
+      dbname: '',
+      host: '',
+      port: '',
+      username: '',
+      password: '',
+      databases: '',
+      dumpParallelJobs: '',
+      restoreParallelJobs: '',
+      pgDumpCustomOptions: '',
+      pgRestoreCustomOptions: '',
+      dumpIgnoreErrors: false,
+      restoreIgnoreErrors: false,
+    },
+    validationSchema: Schema,
+    onSubmit,
+    validateOnBlur: false,
+    validateOnChange: false,
+  })
+
+  const formatDatabaseArray = (database: string) => {
+    let databases = []
+    const splitDatabaseArray = database.split(/[,(\s)(\n)(\r)(\t)(\r\n)]/)
+
+    for (let i = 0; i < splitDatabaseArray.length; i++) {
+      if (splitDatabaseArray[i] !== '') {
+        databases.push(splitDatabaseArray[i])
+      }
+    }
+
+    return databases
+  }
+
+  const connectionData = {
+    host: formik.values.host,
+    port: formik.values.port,
+    username: formik.values.username,
+    password: formik.values.password,
+    dbname: formik.values.dbname,
+    ...(formik.values.databases && {
+      db_list: formatDatabaseArray(formik.values.databases),
+    }),
+    ...(formik.values.dockerImageType === 'custom' && {
+      dockerImage: formik.values.dockerImage,
+    }),
+  }
+
+  const isConnectionDataValid =
+    formik.values.host &&
+    formik.values.port &&
+    formik.values.username &&
+    formik.values.dbname
+
+  return [{ formik, connectionData, isConnectionDataValid }]
+}

package/pages/Configuration/utils/index.ts

@@ -0,0 +1,153 @@
+import { DatabaseType } from '@postgres.ai/shared/types/api/entities/config'
+
+import { dockerImageOptions } from '../configOptions'
+import { FormValues } from '../useForm'
+
+const seContainerRegistry = 'se-images'
+const genericImagePrefix = 'postgresai/extended-postgres'
+// since some tags are rc, we need to specify the exact tags to use
+const dockerImagesConfig = {
+  '9.6': ['0.5.2', '0.5.1', '0.4.6'],
+  '10': ['0.5.2', '0.5.1', '0.4.6'],
+  '11': ['0.5.2', '0.5.1', '0.4.6'],
+  '12': ['0.5.2', '0.5.1', '0.4.6'],
+  '13': ['0.5.2', '0.5.1', '0.4.6'],
+  '14': ['0.5.2', '0.5.1', '0.4.6'],
+  '15': ['0.5.2', '0.5.1', '0.4.6'],
+  '16': ['0.5.2', '0.5.1', '0.4.6'],
+  '17': ['0.5.2', '0.5.1'],
+}
+
+export type FormValuesKey = keyof FormValues
+
+interface DockerImage {
+  package_group: string
+  pg_major_version: string
+  tag: string
+  location: string
+}
+
+type DockerImagesConfig = Record<string, string[]>
+
+export const uniqueChipValue = (values: string) => {
+  const splitChipArray = values.split(/[,(\s)(\n)(\r)(\t)(\r\n)]/)
+  let databaseArray = []
+
+  for (let i in splitChipArray) {
+    if (
+      splitChipArray[i] !== '' &&
+      databaseArray.indexOf(splitChipArray[i]) === -1
+    ) {
+      databaseArray.push(splitChipArray[i])
+    }
+  }
+
+  return databaseArray.join(' ')
+}
+
+export const postUniqueDatabases = (values: string) => {
+  const splitDatabaseArray = values.split(/[,(\s)(\n)(\r)(\t)(\r\n)]/)
+
+  const databases = splitDatabaseArray.reduce((acc: DatabaseType, curr) => {
+    acc[curr] = {}
+    return acc
+  }, {})
+
+  const nonEmptyDatabase = Object.fromEntries(
+    Object.entries(databases).filter(([name]) => name != ''),
+  )
+
+  return values.length !== 0 ? nonEmptyDatabase : null
+}
+
+const createDockerImages = (
+  dockerImagesConfig: DockerImagesConfig,
+): DockerImage[] => {
+  const dockerImages: DockerImage[] = []
+
+  for (const pg_major_version in dockerImagesConfig) {
+    if (dockerImagesConfig.hasOwnProperty(pg_major_version)) {
+      const customTags = dockerImagesConfig[pg_major_version]
+
+      customTags.forEach((tag) => {
+        const image: DockerImage = {
+          package_group: 'postgresai',
+          pg_major_version,
+          tag: `${pg_major_version}-${tag}`,
+          location: `${genericImagePrefix}:${pg_major_version}-${tag}`,
+        }
+
+        dockerImages.push(image)
+      })
+    }
+  }
+
+  return dockerImages
+}
+
+export const genericDockerImages = createDockerImages(dockerImagesConfig)
+
+export const isSeDockerImage = (dockerImage: string | undefined) => {
+  const dockerImageType =
+    dockerImage?.includes(seContainerRegistry) &&
+    dockerImage.split(`${seContainerRegistry}/`)[1]?.split(':')[0]
+
+  return dockerImageOptions.some((element) => element.type === dockerImageType)
+}
+
+export const getImageType = (imageUrl: string) => {
+  const postgresCustomImageType =
+    imageUrl.includes(seContainerRegistry) &&
+    imageUrl.split(`${seContainerRegistry}/`)[1]?.split(':')[0]
+
+  if (imageUrl.includes(genericImagePrefix)) {
+    return 'Generic Postgres'
+  } else if (postgresCustomImageType && isSeDockerImage(imageUrl)) {
+    return postgresCustomImageType
+  } else {
+    return 'custom'
+  }
+}
+
+export const getImageMajorVersion = (pgImage: string | undefined) => {
+  const pgImageVersion = pgImage?.split(':')[1]
+  const pgServerVersion = pgImageVersion?.split('-')[0]
+  return pgServerVersion?.includes('.')
+    ? pgServerVersion?.split('.')[0]
+    : pgServerVersion
+}
+
+export const formatDatabases = (databases: DatabaseType | null) => {
+  let formattedDatabases = ''
+
+  if (databases !== null) {
+    Object.keys(databases).forEach(function (key) {
+      formattedDatabases += key + ' '
+    })
+  }
+
+  return formattedDatabases
+}
+
+export const formatDumpCustomOptions = (options: string[] | null) => {
+  let formattedOptions = ''
+
+  if (options !== null) {
+    options.forEach(function (key) {
+      formattedOptions += key + ' '
+    })
+  }
+
+  return formattedOptions
+}
+
+export const postUniqueCustomOptions = (options: string) => {
+  const splitOptionsArray = options.split(/[,(\s)(\n)(\r)(\t)(\r\n)]/)
+  const uniqueOptions = splitOptionsArray.filter(
+    (item, index) => splitOptionsArray.indexOf(item) === index && item !== '',
+  )
+  return uniqueOptions
+}
+
+export const customOrGenericImage = (dockerImage: string | undefined) =>
+  dockerImage === 'Generic Postgres' || dockerImage === 'custom'