@postgres.ai/shared 4.0.3 → 4.1.0

package/pages/Instance/Configuration/tooltipText.tsx

@@ -0,0 +1,170 @@
+import styles from './styles.module.scss'
+
+export const tooltipText = {
+  dockerTag: () => (
+    <div>
+      Docker image version — the latest ones are listed first. If you are unsure,
+      pick the first one.
+    </div>
+  ),
+  dockerImage: () => (
+    <div>
+      Major PostgreSQL version (e.g., "9.6", "15"). For logical provisioning
+      mode, the version used by DBLab does not need to match the version on the
+      source, although matching versions is 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, and sync containers. Although such images are based on
+      traditional Docker images for PostgreSQL, DBLab expects slightly different
+      behavior: for example, PostgreSQL is not the first process used to start the
+      container, so PostgreSQL restarts do not trigger a 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 the default buffer pool size for each PostgreSQL instance managed by
+      DBLab. Note that this amount of RAM is immediately allocated at PostgreSQL
+      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 clones is 32.
+      Practically, this limit is even lower because some memory is consumed by
+      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 PostgreSQL server start (
+      <a
+        target={'_blank'}
+        href={'https://postgresqlco.nf/doc/en/param/shared_preload_libraries/'}
+        className={styles.externalLink}
+      >
+        details
+      </a>
+      ). If some libraries or extensions are missing, PostgreSQL fails to start,
+      so make sure that <span className={styles.firaCodeFont}>dockerImage</span>{' '}
+      used above contains all required extensions.
+    </div>
+  ),
+  host: () => (
+    <div>
+      Hostname or IP of the database that will be used as the source for data
+      retrieval (full data refresh).
+    </div>
+  ),
+  port: () => (
+    <div>
+      Port of the database that will be used as the source for data retrieval
+      (full data refresh).
+    </div>
+  ),
+  username: () => (
+    <div>
+      Username used to connect to the database that will be used as the source
+      for data retrieval (full data refresh).
+    </div>
+  ),
+  password: () => (
+    <div>
+      Password used to connect to the database that will be used as the source
+      for data retrieval (full data refresh).
+    </div>
+  ),
+  dbname: () => (
+    <div>
+      Database name used to connect to the source to run diagnostic queries.
+      This database is not necessarily copied (another field,{' '}
+      <span className={styles.firaCodeFont}>databases</span>, defines which
+      database to copy).
+    </div>
+  ),
+  databases: () => (
+    <div>
+      Specifies the list of databases the PostgreSQL server will copy during data
+      retrieval (full data refresh). To specify multiple database names, provide
+      each value on a separate line or use spaces as dividers. 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 a production server under load, it is not recommended to use
+      more than 50% of its available vCPUs. Increasing this number speeds up
+      dumping but increases the risk of performance issues on the source (e.g.,
+      due to CPU or disk I/O 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
+      PostgreSQL managed by DBLab. For initial data retrieval (the first data
+      refresh), it is recommended to match the number of available vCPUs on the
+      machine running DBLab. This yields faster restore times but can increase
+      CPU and disk I/O usage on that machine (up to temporary resource
+      saturation). For subsequent refreshes, if DBLab is in continuous use, it is
+      recommended to reduce this value by 50% to reserve capacity for normal
+      DBLab operations (such as working 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>
+      Query tuning parameters. These are essential to ensure that cloned
+      PostgreSQL instances generate the same plans as the source (specifically,
+      they are crucial for query performance troubleshooting and optimization,
+      including working with EXPLAIN plans). For details, see the{' '}
+      <a
+        target={'_blank'}
+        href={'https://postgres.ai/docs/how-to-guides/administration/postgresql-configuration#postgresql-configuration-in-clones'}
+        className={styles.externalLink}
+      >
+        docs
+      </a>
+      .
+    </div>
+  ),
+}

package/pages/Instance/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/Instance/Configuration/utils/index.ts

@@ -0,0 +1,236 @@
+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'
+// Predefined list of Docker images for UI display
+// This list is shown to users for convenient selection
+// IMPORTANT: if user specified an image in config that's not in this list,
+// it will be automatically added via createEnhancedDockerImages()
+const dockerImagesConfig = {
+  '9.6': ['0.5.3', '0.5.2', '0.5.1'],
+  '10': ['0.5.3', '0.5.2', '0.5.1'],
+  '11': ['0.5.3', '0.5.2', '0.5.1'],
+  '12': ['0.5.3', '0.5.2', '0.5.1'],
+  '13': ['0.5.3', '0.5.2', '0.5.1'],
+  '14': ['0.5.3', '0.5.2', '0.5.1'],
+  '15': ['0.5.3', '0.5.2', '0.5.1'],
+  '16': ['0.5.3', '0.5.2', '0.5.1'],
+  '17': ['0.5.3', '0.5.2', '0.5.1'],
+  '18': ['0.6.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) => {
+  if (!pgImage) return undefined
+  
+  try {
+    const pgImageVersion = pgImage.split(':')[1]
+    if (!pgImageVersion) return undefined
+    
+    const pgServerVersion = pgImageVersion.split('-')[0]
+    if (!pgServerVersion) return undefined
+    
+    return pgServerVersion.includes('.')
+      ? pgServerVersion.split('.')[0]
+      : pgServerVersion
+  } catch (error) {
+    // Return undefined for malformed image strings
+    return undefined
+  }
+}
+
+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'
+
+export const createFallbackDockerImage = (
+  dockerPath: string,
+  dockerTag: string,
+): DockerImage => {
+  const majorVersion = getImageMajorVersion(dockerPath) || '18' // Default to 18 if version can't be extracted
+  
+  return {
+    package_group: 'postgresai',
+    pg_major_version: majorVersion,
+    tag: dockerTag || `${majorVersion}-custom`,
+    location: dockerPath,
+  }
+}
+
+// Creates enhanced list of Docker images, including image from configuration
+export const createEnhancedDockerImages = (
+  configDockerPath?: string,
+  configDockerTag?: string,
+): DockerImage[] => {
+  let enhancedImages = [...genericDockerImages]
+
+  // If there's an image in config, check if we need to add it
+  if (configDockerPath && configDockerTag) {
+    const existingImage = genericDockerImages.find(
+      (image) => image.location === configDockerPath || image.tag === configDockerTag
+    )
+
+    // If image not found in predefined list, add it
+    if (!existingImage) {
+      // Check if this is a Generic Postgres image
+      if (configDockerPath.includes(genericImagePrefix)) {
+        // For Generic Postgres images create proper structure
+        const majorVersion = getImageMajorVersion(configDockerPath)
+        if (majorVersion) {
+          const configImage: DockerImage = {
+            package_group: 'postgresai',
+            pg_major_version: majorVersion,
+            tag: configDockerTag,
+            location: configDockerPath,
+          }
+          enhancedImages.push(configImage)
+        } else {
+          // Fallback if version extraction failed
+          const configImage = createFallbackDockerImage(configDockerPath, configDockerTag)
+          enhancedImages.push(configImage)
+        }
+      } else {
+        // For custom images use fallback
+        const configImage = createFallbackDockerImage(configDockerPath, configDockerTag)
+        enhancedImages.push(configImage)
+      }
+    }
+  }
+
+  return enhancedImages
+}
+
+// Checks if image is loaded from configuration (not from predefined list)
+export const isConfigLoadedImage = (
+  dockerPath: string,
+  dockerTag: string,
+): boolean => {
+  const existingImage = genericDockerImages.find(
+    (image) => image.location === dockerPath || image.tag === dockerTag
+  )
+  return !existingImage
+}

package/pages/Instance/InactiveInstance/index.tsx

@@ -0,0 +1,157 @@
+import { Tooltip } from '@material-ui/core'
+import { makeStyles } from '@material-ui/core'
+import { formatDistanceSafe } from '@postgres.ai/shared/utils/date'
+
+import { Link } from '@postgres.ai/shared/components/Link2'
+import { Instance } from '@postgres.ai/shared/types/api/entities/instance'
+
+import { formatTimestampUtc } from './utils'
+
+const useStyles = makeStyles(
+  {
+    container: {
+      maxWidth: '650px',
+      width: '100%',
+    },
+    timeLabel: {
+      lineHeight: '16px',
+      fontSize: 14,
+      cursor: 'pointer',
+      flex: '2 1 0',
+
+      '& span': {
+        fontWeight: 'normal !important',
+      },
+    },
+    toolTip: {
+      fontSize: '10px !important',
+      maxWidth: '100%',
+    },
+    content: {
+      margin: '25px 0',
+    },
+    flexContainer: {
+      display: 'flex',
+      alignItems: 'center',
+      flexDirection: 'row',
+      padding: '10px 0',
+      borderBottom: '1px solid rgba(224, 224, 224, 1)',
+
+      '& span:first-child': {
+        flex: '1 1 0',
+        fontWeight: '500',
+      },
+
+      '& span': {
+        flex: '2 1 0',
+        margin: '0',
+      },
+    },
+  },
+  { index: 1 },
+)
+
+export const InactiveInstance = ({
+  org,
+  instance,
+}: {
+  org: string
+  instance: Instance | null
+}) => {
+  const classes = useStyles()
+
+  const getVersionDigits = (str: string | undefined | null) => {
+    if (!str) {
+      return 'N/A'
+    }
+
+    const digits = str.match(/\d+/g)
+
+    if (digits && digits.length > 0) {
+      return `${digits[0]}.${digits[1]}.${digits[2]}`
+    }
+    return ''
+  }
+
+  return (
+    <div className={classes.container}>
+      <div className={classes.flexContainer}>
+        <span>Plan</span>
+        <span>{instance?.dto.plan || '---'}</span>
+      </div>
+      <div className={classes.flexContainer}>
+        <span>Version</span>
+        <span>
+          {getVersionDigits(
+            instance?.state && (instance?.state?.engine?.version as string),
+          )}
+        </span>
+      </div>
+      <div className={classes.flexContainer}>
+        <span>Registered</span>
+        <span className={classes.timeLabel}>
+          <Tooltip
+            title={formatTimestampUtc(instance?.createdAt) ?? ''}
+            classes={{ tooltip: classes.toolTip }}
+          >
+            <span>
+              {instance?.createdAt ? formatDistanceSafe(new Date(instance?.createdAt)) : '-'}
+            </span>
+          </Tooltip>
+        </span>
+      </div>
+      {instance?.telemetryLastReportedAt && (
+        <div className={classes.flexContainer}>
+          <span>Telemetry last reported</span>
+          <span className={classes.timeLabel}>
+            <Tooltip
+              title={
+                formatTimestampUtc(instance?.telemetryLastReportedAt) ?? ''
+              }
+              classes={{ tooltip: classes.toolTip }}
+            >
+              <span>
+                {instance?.telemetryLastReportedAt ? formatDistanceSafe(new Date(instance?.telemetryLastReportedAt)) : '-'}
+              </span>
+            </Tooltip>
+          </span>
+        </div>
+      )}
+      <div className={classes.flexContainer}>
+        <span>Instance ID</span>
+        <span>
+          <span
+            style={{
+              fontWeight: 'normal',
+            }}
+          >
+            <Link to={`/${org}/instances/${instance?.id}`}>{instance?.id}</Link>
+            &nbsp; (self-assigned:{' '}
+            {instance?.dto?.selfassigned_instance_id || 'N/A'})
+          </span>
+        </span>
+      </div>
+      {instance?.dto.plan !== 'CE' && (
+        <div className={classes.flexContainer}>
+          <span>Billing data</span>
+          <span>
+            <Link to={`/${org}/billing`}>Billing data</Link>
+          </span>
+        </div>
+      )}
+      <p className={classes.content}>
+        To work with this instance, access its UI or API directly. Full
+        integration of UI to the Platform is currently available only to the EE
+        users. If you have any questions, reach out to{' '}
+        <a
+          href="https://postgres.ai/contact"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          the Postgres.ai team
+        </a>
+        .
+      </p>
+    </div>
+  )
+}

package/pages/Instance/InactiveInstance/utils.ts

@@ -0,0 +1,9 @@
+import moment from 'moment'
+
+export const formatTimestampUtc = (timestamp: moment.MomentInput) => {
+  if (!timestamp) {
+    return null
+  }
+
+  return moment(timestamp).utc().format('YYYY-MM-DD HH:mm:ss UTC')
+}