@postgres.ai/shared 3.5.1-pr-1027.0 → 4.0.0-pr-1028

package/pages/Clone/stores/Main.ts

@@ -1,206 +0,0 @@
-/*--------------------------------------------------------------------------
- * 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

@@ -1,11 +0,0 @@
-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

@@ -1,84 +0,0 @@
-/*--------------------------------------------------------------------------
- * 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

@@ -1,240 +0,0 @@
-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

@@ -1,71 +0,0 @@
-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

@@ -1,60 +0,0 @@
-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: [],
-  },
-]