@postgres.ai/shared 3.5.1-pr-1027.0

package/pages/Clone/stores/Main.ts

@@ -0,0 +1,206 @@
+/*--------------------------------------------------------------------------
+ * 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 { makeAutoObservable } from 'mobx'
+
+import { GetInstance } from '@postgres.ai/shared/types/api/endpoints/getInstance'
+import { GetClone } from '@postgres.ai/shared/types/api/endpoints/getClone'
+import { ResetClone } from '@postgres.ai/shared/types/api/endpoints/resetClone'
+import { DestroyClone } from '@postgres.ai/shared/types/api/endpoints/destroyClone'
+import { UpdateClone } from '@postgres.ai/shared/types/api/endpoints/updateClone'
+import {
+  SnapshotsStore,
+  SnapshotsApi,
+} from '@postgres.ai/shared/stores/Snapshots'
+import { Clone } from '@postgres.ai/shared/types/api/entities/clone'
+import { Instance } from '@postgres.ai/shared/types/api/entities/instance'
+import { checkIsCloneStable } from '@postgres.ai/shared/utils/clone'
+import { getTextFromUnknownApiError } from '@postgres.ai/shared/utils/api'
+
+const UNSTABLE_CLONE_UPDATE_TIMEOUT = 1000
+
+export type Api = SnapshotsApi & {
+  getInstance: GetInstance
+  getClone: GetClone
+  resetClone: ResetClone
+  destroyClone: DestroyClone
+  updateClone: UpdateClone
+}
+
+type Error = {
+  title?: string
+  message: string
+}
+
+export class MainStore {
+  instance: Instance | null = null
+  instanceError: Error | null = null
+
+  clone: Clone | null = null
+  cloneError: Error | null = null
+
+  readonly snapshots: SnapshotsStore
+
+  isResettingClone = false
+  resetCloneError: string | null = null
+
+  isDestroyingClone = false
+  destroyCloneError: string | null = null
+
+  isUpdatingClone = false
+  updateCloneError: string | null = null
+
+  isReloading = false
+
+  private cloneUpdateTimeout?: number
+
+  private readonly api: Api
+
+  constructor(api: Api) {
+    this.snapshots = new SnapshotsStore(api)
+    this.api = api
+
+    makeAutoObservable(this)
+  }
+
+  get isCloneStable() {
+    if (!this.clone) return false
+    return checkIsCloneStable(this.clone)
+  }
+
+  load = async (instanceId: string, cloneId: string) => {
+    const [isInstanceOk, isCloneOk, isSnapshotsLoaded] = await Promise.all([
+      this.loadInstance(instanceId),
+      this.loadClone(instanceId, cloneId),
+      this.snapshots.load(instanceId),
+    ])
+
+    return isInstanceOk && isCloneOk && isSnapshotsLoaded
+  }
+
+  reload = async () => {
+    if (!this.instance || !this.clone) return false
+    this.isReloading = true
+    const isSuccess = await this.load(this.instance.id, this.clone.id)
+    this.isReloading = false
+    return isSuccess
+  }
+
+  private loadInstance = async (instanceId: string) => {
+    const { response, error } = await this.api.getInstance({
+      instanceId,
+    })
+
+    if (response) {
+      this.instance = response
+    } else {
+      this.instanceError = {
+        title: 'Error',
+        message: `Instance "${instanceId}" not found`,
+      }
+    }
+
+    if (error) {
+      this.instanceError = {
+        message: await getTextFromUnknownApiError(error),
+      }
+    }
+
+    return Boolean(response)
+  }
+
+  private loadClone = async (instanceId: string, cloneId: string) => {
+    window.clearTimeout(this.cloneUpdateTimeout)
+
+    const { response, error } = await this.api.getClone({ instanceId, cloneId })
+
+    if (response) {
+      this.clone = response
+
+      if (!this.isCloneStable)
+        this.cloneUpdateTimeout = window.setTimeout(
+          () => this.loadClone(instanceId, cloneId),
+          UNSTABLE_CLONE_UPDATE_TIMEOUT,
+        )
+    }
+
+    if (error) {
+      if (error.status === 404) {
+        this.cloneError = {
+          title: 'Error',
+          message: `Clone "${cloneId}" not found`,
+        }
+      } else {
+        this.cloneError = {
+          message: await getTextFromUnknownApiError(error),
+        }
+      }
+    }
+
+    return Boolean(response)
+  }
+
+  resetClone = async (snapshotId: string) => {
+    if (!this.instance || !this.clone) return false
+
+    this.isResettingClone = true
+
+    const { response, error } = await this.api.resetClone({
+      instanceId: this.instance.id,
+      cloneId: this.clone.id,
+      snapshotId,
+    })
+
+    if (response) await this.loadClone(this.instance.id, this.clone.id)
+
+    if (error) this.resetCloneError = await getTextFromUnknownApiError(error)
+
+    this.isResettingClone = false
+
+    return Boolean(response)
+  }
+
+  destroyClone = async () => {
+    if (!this.instance || !this.clone) return false
+
+    this.isDestroyingClone = true
+
+    const { response, error } = await this.api.destroyClone({
+      instanceId: this.instance.id,
+      cloneId: this.clone.id,
+    })
+
+    if (error) this.destroyCloneError = await getTextFromUnknownApiError(error)
+
+    this.isDestroyingClone = false
+
+    return Boolean(response)
+  }
+
+  updateClone = async (isProtected: boolean) => {
+    if (!this.instance || !this.clone) return
+
+    this.isUpdatingClone = true
+
+    const prevIsProtected = this.clone.protected
+    this.clone.protected = isProtected
+
+    const { response, error } = await this.api.updateClone({
+      instanceId: this.instance.id,
+      cloneId: this.clone.id,
+      clone: {
+        isProtected,
+      },
+    })
+
+    if (!response) this.clone.protected = prevIsProtected
+
+    if (error) this.updateCloneError = await getTextFromUnknownApiError(error)
+
+    this.isUpdatingClone = false
+  }
+}

package/pages/Clone/useCreatedStores.ts

@@ -0,0 +1,11 @@
+import { useMemo } from 'react'
+
+import { MainStore } from './stores/Main'
+
+import { Host } from './context'
+
+export const useCreatedStores = (host: Host) => ({
+  main: useMemo(() => new MainStore(host.api), []),
+})
+
+export type Stores = ReturnType<typeof useCreatedStores>

package/pages/Configuration/Header/index.tsx

@@ -0,0 +1,84 @@
+/*--------------------------------------------------------------------------
+ * 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 classNames from 'classnames'
+import { Link, Typography } from '@material-ui/core'
+import Box from '@mui/material/Box'
+import { SectionTitle } from '@postgres.ai/shared/components/SectionTitle'
+import { ExternalIcon } from '@postgres.ai/shared/icons/External'
+
+import styles from '../styles.module.scss'
+
+type Props = {
+  retrievalMode: string
+  setOpen: () => void
+}
+
+export const ConfigSectionTitle = ({ tag }: { tag: string }) => (
+  <SectionTitle
+    level={2}
+    tag="h2"
+    text={
+      <div className={styles.sectionTitle}>
+        <p>Section</p>
+        <p>"{tag}"</p>
+      </div>
+    }
+  />
+)
+
+const DOCS_URL =
+  'https://postgres.ai/docs/reference-guides/database-lab-engine-configuration-reference'
+
+export const Header = (props: Props) => (
+  <div className={styles.root}>
+    <Box mb={3}>
+      <Typography paragraph>
+        Only select parameters can be changed here.
+      </Typography>
+      <Typography paragraph>
+        However, you can still see{' '}
+        <Link
+          href="#"
+          underline="always"
+          onClick={props.setOpen}
+          className={styles.externalLink}
+        >
+          the full config
+        </Link>
+        . For details, read{' '}
+        <a href={DOCS_URL} target="_blank" className={styles.externalLink}>
+          the docs
+          <ExternalIcon className={styles.externalIcon} />
+        </a>
+        .
+      </Typography>
+      <Typography paragraph>
+        <strong>Data retrieval mode</strong>: {props.retrievalMode}
+      </Typography>
+    </Box>
+    <ConfigSectionTitle tag="global" />
+  </div>
+)
+
+export const ModalTitle = () => (
+  <div>
+    <Typography className={styles.modalTitle}>
+      Full configuration file (view only)
+    </Typography>
+    <Typography variant="h3">
+      Sensitive values are masked. For details, read{' '}
+      <a href={DOCS_URL} target="_blank" className={styles.externalLink}>
+        the docs
+        <ExternalIcon
+          className={classNames(styles.externalIcon, styles.largeIcon)}
+        />
+      </a>
+      .
+    </Typography>
+  </div>
+)

package/pages/Configuration/InputWithTooltip/index.tsx

@@ -0,0 +1,240 @@
+import classNames from 'classnames'
+import Box from '@mui/material/Box'
+import { TextField, Chip, makeStyles } from '@material-ui/core'
+
+import { Select } from '@postgres.ai/shared/components/Select'
+import { InfoIcon } from '@postgres.ai/shared/icons/Info'
+import { Tooltip } from '@postgres.ai/shared/components/Tooltip'
+import { Spinner } from '@postgres.ai/shared/components/Spinner'
+
+import { uniqueChipValue } from '../utils'
+
+import styles from '../styles.module.scss'
+
+const useStyles = makeStyles(
+  {
+    textField: {
+      '& .MuiOutlinedInput-notchedOutline': {
+        borderColor: '#000',
+      },
+    },
+    selectField: {
+      marginTop: '0',
+      '& .MuiInputBase-root': {
+        padding: '6px',
+      },
+
+      '& .MuiSelect-select:focus': {
+        backgroundColor: 'inherit',
+      },
+    },
+    label: {
+      display: 'block',
+    },
+    error: {
+      color: '#f44336',
+    },
+    absoluteSpinner: {
+      position: 'absolute',
+      left: 'calc(50% - 40px)',
+      top: 'calc(50% - 5px)',
+    },
+  },
+  { index: 1 },
+)
+
+export const InputWithTooltip = ({
+  value,
+  label,
+  error,
+  onChange,
+  tooltipText,
+  disabled,
+  type,
+}: {
+  value?: string
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
+  tooltipText: () => React.ReactNode
+  label: string
+  error?: string
+  disabled: boolean | undefined
+  type?: string
+}) => {
+  const classes = useStyles()
+
+  return (
+    <Box
+      mt={2}
+      mb={2}
+      display="flex"
+      flexDirection="column"
+      justifyContent="flex-start"
+      alignItems="flex-start"
+      gap="5px"
+    >
+      <label className={classNames(error && classes.error, classes.label)}>
+        {label}
+      </label>
+      <Box display="flex" alignItems="center" width="100%">
+        <TextField
+          type={type || 'text'}
+          className={classNames(
+            !disabled && classes.textField,
+            styles.textField,
+          )}
+          variant="outlined"
+          size="small"
+          value={value}
+          error={Boolean(error)}
+          onChange={onChange}
+          disabled={disabled}
+          multiline={type === 'textarea'}
+          spellCheck={false}
+        />
+        <Tooltip interactive content={<p>{tooltipText()}</p>}>
+          <InfoIcon className={styles.infoIcon} />
+        </Tooltip>
+      </Box>
+    </Box>
+  )
+}
+
+export const InputWithChip = ({
+  value,
+  label,
+  id,
+  onChange,
+  tooltipText,
+  disabled,
+  handleDeleteChip,
+}: {
+  value: string
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
+  tooltipText: () => React.ReactNode
+  handleDeleteChip: (
+    event: React.FormEvent<HTMLInputElement>,
+    uniqueValue: string,
+    label: string,
+  ) => void
+  label: string
+  id: string
+  disabled: boolean | undefined
+}) => {
+  const classes = useStyles()
+
+  return (
+    <Box
+      mt={2}
+      mb={1}
+      display="flex"
+      flexDirection="column"
+      justifyContent="flex-start"
+      alignItems="flex-start"
+      gap="5px"
+    >
+      <label className={classes.label}>{label}</label>
+      <Box display="flex" alignItems="center" width="100%">
+        <TextField
+          className={classNames(
+            !disabled && classes.textField,
+            styles.textField,
+          )}
+          variant="outlined"
+          onChange={onChange}
+          value={value}
+          multiline
+          disabled={disabled}
+          inputProps={{
+            name: id,
+            id: id,
+          }}
+          InputLabelProps={{
+            shrink: true,
+          }}
+        />
+        <Tooltip interactive content={<p>{tooltipText()}</p>}>
+          <InfoIcon className={styles.infoIcon} />
+        </Tooltip>
+      </Box>
+      {value && (
+        <div className={styles.chipContainer}>
+          {uniqueChipValue(value)
+            .split(' ')
+            .map((uniqueValue, index) => {
+              if (uniqueValue !== '') {
+                return (
+                  <Chip
+                    key={index}
+                    className={styles.chip}
+                    label={uniqueValue}
+                    disabled={disabled}
+                    onDelete={(event) =>
+                      handleDeleteChip(event, uniqueValue, id)
+                    }
+                    color="primary"
+                  />
+                )
+              }
+            })}
+        </div>
+      )}
+    </Box>
+  )
+}
+
+export const SelectWithTooltip = ({
+  value,
+  label,
+  error,
+  onChange,
+  tooltipText,
+  disabled,
+  loading,
+  items,
+}: {
+  value: string
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
+  tooltipText: () => React.ReactNode
+  label: string
+  error?: boolean
+  disabled: boolean | undefined
+  loading?: boolean
+  items: { value: string; children: React.ReactNode }[]
+}) => {
+  const classes = useStyles()
+
+  return (
+    <Box
+      mt={1}
+      display="flex"
+      flexDirection="column"
+      justifyContent="flex-start"
+      alignItems="flex-start"
+      position="relative"
+      gap="5px"
+    >
+      <label className={classNames(error && classes.error, classes.label)}>
+        {label}
+      </label>
+      <Box display="flex" alignItems="center" width="100%">
+        {loading && <Spinner className={classes.absoluteSpinner} />}
+        <Select
+          className={classNames(
+            classes.selectField,
+            !disabled && classes.textField,
+            styles.textField,
+          )}
+          label=""
+          error={error}
+          value={value}
+          disabled={disabled}
+          onChange={onChange}
+          items={items}
+        />
+        <Tooltip interactive content={<p>{tooltipText()}</p>}>
+          <InfoIcon className={styles.infoIcon} />
+        </Tooltip>
+      </Box>
+    </Box>
+  )
+}

package/pages/Configuration/ResponseMessage/index.tsx

@@ -0,0 +1,71 @@
+import Box from '@mui/material/Box'
+import { makeStyles } from '@material-ui/core'
+import BlockIcon from '@material-ui/icons/Block'
+import CheckCircleOutlineIcon from '@material-ui/icons/CheckCircleOutline'
+import WarningIcon from '@material-ui/icons/Warning'
+
+const useStyles = makeStyles(
+  {
+    successIcon: {
+      marginRight: 8,
+      color: 'green',
+    },
+    success: {
+      color: 'green',
+      alignItems: 'center',
+      display: 'flex',
+    },
+    errorIcon: {
+      marginRight: 8,
+      color: 'red',
+    },
+    error: {
+      color: 'red',
+      alignItems: 'center',
+      display: 'flex',
+    },
+    warning: {
+      color: '#FD8411',
+      alignItems: 'center',
+      display: 'flex',
+    },
+    warningIcon: {
+      marginRight: 8,
+      color: '#FD8411',
+    },
+  },
+  { index: 1 },
+)
+
+export const ResponseMessage = ({
+  type,
+  message,
+}: {
+  type: string
+  message: string | React.ReactNode | null
+}) => {
+  const classes = useStyles()
+
+  return (
+    <Box mt={1} mb={1}>
+      <span
+        className={
+          type === 'success' || type === 'ok'
+            ? classes.success
+            : type === 'warning' || type === 'notice'
+            ? classes.warning
+            : classes.error
+        }
+      >
+        {type === 'success' || type === 'ok' ? (
+          <CheckCircleOutlineIcon className={classes.successIcon} />
+        ) : type === 'warning' || type === 'notice' ? (
+          <WarningIcon className={classes.warningIcon} />
+        ) : (
+          <BlockIcon className={classes.errorIcon} />
+        )}
+        {message}
+      </span>
+    </Box>
+  )
+}

package/pages/Configuration/configOptions.ts

@@ -0,0 +1,60 @@
+export const dockerImageOptions = [
+  {
+    name: 'Generic Postgres (postgresai/extended-postgres)',
+    type: 'Generic Postgres',
+  },
+  { name: 'Generic Postgres with PostGIS', type: 'postgis' },
+  { name: 'Amazon RDS for Postgres', type: 'rds' },
+  { name: 'Amazon RDS Aurora for Postgres', type: 'aurora' },
+  { name: 'Heroku Postgres', type: 'heroku' },
+  { name: 'Supabase Postgres', type: 'supabase' },
+  { name: 'Google Cloud SQL for PostgreSQL', type: 'google-cloud-sql' },
+  {
+    name: 'Timescale Cloud',
+    type: 'timescale-cloud',
+  },
+  { name: 'Custom image', type: 'custom' },
+]
+
+export const imagePgOptions = [
+  {
+    optionType: 'Generic Postgres',
+    pgDumpOptions: [],
+    pgRestoreOptions: [],
+  },
+  {
+    optionType: 'postgis',
+    pgDumpOptions: [],
+    pgRestoreOptions: [],
+  },
+  {
+    optionType: 'rds',
+    pgDumpOptions: ['--exclude-schema=awsdms'],
+    pgRestoreOptions: [],
+  },
+  {
+    optionType: 'aurora',
+    pgDumpOptions: ['--exclude-schema=awsdms'],
+    pgRestoreOptions: [],
+  },
+  {
+    optionType: 'heroku',
+    pgDumpOptions: [],
+    pgRestoreOptions: [],
+  },
+  {
+    optionType: 'supabase',
+    pgDumpOptions: [],
+    pgRestoreOptions: [],
+  },
+  {
+    optionType: 'google-cloud-sql',
+    pgDumpOptions: [],
+    pgRestoreOptions: [],
+  },
+  {
+    optionType: 'timescale-cloud',
+    pgDumpOptions: [],
+    pgRestoreOptions: [],
+  },
+]