@postgres.ai/shared 4.1.3 → 4.2.0-pr-1200

package/pages/Instance/Clones/Header/index.tsx

@@ -1,74 +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 { formatBytesIEC } from '@postgres.ai/shared/utils/units'
-
-import { Item } from './Item'
-
-import styles from './styles.module.scss'
-
-type Props = {
-  expectedCloningTimeS: number
-  logicalSize: number | null
-  clonesCount: number
-  clonesCountLastMonth?: number
-}
-
-export const Header = (props: Props) => {
-  const {
-    expectedCloningTimeS,
-    logicalSize,
-    clonesCount,
-    clonesCountLastMonth,
-  } = props
-
-  return (
-    <div className={styles.root}>
-      <Item value={expectedCloningTimeS ? `${expectedCloningTimeS} s` : '-'}>
-        average
-        <br />
-        cloning time
-      </Item>
-
-      <Item
-        value={
-          logicalSize ? formatBytesIEC(logicalSize, { precision: 2 }) : '-'
-        }
-      >
-        logical
-        <br />
-        data size
-      </Item>
-
-      <Item value={clonesCount}>
-        clones
-        <br />
-        now
-      </Item>
-
-      <Item
-        value={
-          logicalSize
-            ? formatBytesIEC(logicalSize * clonesCount, { precision: 2 })
-            : '-'
-        }
-      >
-        total
-        <br />
-        size of clones
-      </Item>
-
-      {clonesCountLastMonth && (
-        <Item value={clonesCountLastMonth}>
-          clones
-          <br />
-          in last month
-        </Item>
-      )}
-    </div>
-  )
-}

package/pages/Instance/Clones/index.tsx

@@ -1,141 +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 { useState } from 'react'
-import { makeStyles, Theme, useMediaQuery } from '@material-ui/core'
-import { useHistory } from 'react-router-dom'
-import { observer } from 'mobx-react-lite'
-
-import { SectionTitle } from '@postgres.ai/shared/components/SectionTitle'
-import { Button } from '@postgres.ai/shared/components/Button2'
-import { round } from '@postgres.ai/shared/utils/numbers'
-import { Tooltip } from '@postgres.ai/shared/components/Tooltip'
-import { InfoIcon } from '@postgres.ai/shared/icons/Info'
-
-import { useStores, useHost } from '@postgres.ai/shared/pages/Instance/context'
-
-import { ClonesList } from './ClonesList'
-import { Header } from './Header'
-
-const SHORT_LIST_SIZE = 3
-
-interface ClonesProps {
-  onlyRenderList?: boolean
-  hideBranchingFeatures?: boolean
-}
-
-const useStyles = makeStyles(
-  (theme) => ({
-    root: {
-      width: 0,
-      flex: '1 1 100%',
-      marginRight: '40px',
-      height: '100%',
-
-      [theme.breakpoints.down('sm')]: {
-        width: '100%',
-        marginRight: 0,
-      },
-    },
-    listSizeButton: {
-      marginTop: '12px',
-    },
-    infoIcon: {
-      height: '12px',
-      width: '12px',
-      marginLeft: '8px',
-      color: '#808080',
-    },
-  }),
-  { index: 1 },
-)
-
-export const Clones = observer((props: ClonesProps) => {
-  const onlyRenderList = props?.onlyRenderList
-  const classes = useStyles()
-  const history = useHistory()
-  const isMobile = useMediaQuery<Theme>((theme) => theme.breakpoints.down('sm'))
-  const [isShortListForMobile, setIsShortListForMobile] = useState(true)
-
-  const stores = useStores()
-  const host = useHost()
-
-  const { instance } = stores.main
-  if (!instance || !instance.state) return null
-
-  const isShortList = isMobile && isShortListForMobile && !onlyRenderList
-  const toggleListSize = () => setIsShortListForMobile(!isShortListForMobile)
-
-  const goToCloneAddPage = () => history.push(host.routes.createClone())
-
-  const showListSizeButton =
-    instance.state?.cloning.clones?.length > SHORT_LIST_SIZE && isMobile
-
-  const isLoadingSnapshots = stores.main.snapshots.isLoading
-  const hasSnapshots = Boolean(stores.main.snapshots.data?.length)
-  const canCreateClone = hasSnapshots && !stores.main.isDisabledInstance
-
-  return (
-    <div className={classes.root}>
-      {!onlyRenderList && (
-        <>
-          <SectionTitle level={2} tag="h2" text="Cloning summary" />
-          <Header
-            expectedCloningTimeS={round(
-              instance.state.cloning.expectedCloningTime,
-              2,
-            )}
-            logicalSize={instance.state.dataSize}
-            clonesCount={instance.state.cloning.clones.length}
-          />
-        </>
-      )}
-      <SectionTitle
-        level={2}
-        tag="h3"
-        text={`Clones (${instance.state.cloning.clones.length})`}
-        rightContent={
-          <>
-            <Button
-              theme="primary"
-              onClick={goToCloneAddPage}
-              isDisabled={!canCreateClone}
-              isLoading={isLoadingSnapshots}
-            >
-              Create clone
-            </Button>
-
-            {!hasSnapshots && (
-              <Tooltip content="No snapshots">
-                <div style={{ display: 'flex' }}>
-                  <InfoIcon className={classes.infoIcon} />
-                </div>
-              </Tooltip>
-            )}
-          </>
-        }
-      />
-
-      <ClonesList
-        clones={
-          isShortList
-            ? instance.state.cloning.clones.slice(0, SHORT_LIST_SIZE)
-            : instance.state.cloning.clones
-        }
-        isDisabled={stores.main.isDisabledInstance}
-        emptyStubText="This instance has no active clones."
-        hideBranchingFeatures={props.hideBranchingFeatures}
-      />
-
-      {showListSizeButton && !onlyRenderList && (
-        <Button className={classes.listSizeButton} onClick={toggleListSize}>
-          {isShortList ? 'Show more' : 'Show less'}
-        </Button>
-      )}
-    </div>
-  )
-})

package/pages/Instance/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/Instance/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 !important',
-      },
-    },
-    selectField: {
-      marginTop: '0',
-      '& .MuiInputBase-root': {
-        padding: '6px',
-      },
-
-      '& .MuiSelect-select:focus': {
-        backgroundColor: 'inherit',
-      },
-    },
-    label: {
-      display: 'block',
-    },
-    error: {
-      color: '#f44336',
-    },
-    infoIcon: {
-      position: 'relative',
-    },
-    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>}>
-          <div className={styles.infoIcon}>
-            <InfoIcon />
-          </div>
-        </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={2}>
-      <Box display="flex" alignItems="center">
-        <TextField
-          className={classNames(
-            !disabled && classes.textField,
-            styles.textField,
-          )}
-          variant="outlined"
-          onChange={onChange}
-          value={value}
-          multiline
-          disabled={disabled}
-          label={label}
-          inputProps={{
-            name: id,
-            id: id,
-          }}
-          InputLabelProps={{
-            shrink: true,
-          }}
-        />
-        <Tooltip interactive content={<p>{tooltipText()}</p>}>
-          <div className={styles.infoIcon}>
-            <InfoIcon />
-          </div>
-        </Tooltip>
-      </Box>
-      <div className={styles.chipContainer}>
-        {value &&
-          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>}>
-          <div className={styles.infoIcon}>
-            <InfoIcon />
-          </div>
-        </Tooltip>
-      </Box>
-    </Box>
-  )
-}

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

@@ -1,60 +0,0 @@
-export const dockerImageOptions = [
-  {
-    name: 'Generic PostgreSQL (postgresai/extended-postgres)',
-    type: 'Generic Postgres',
-  },
-  { name: 'Generic PostgreSQL with PostGIS', type: 'postgis' },
-  { name: 'Amazon RDS for PostgreSQL', type: 'rds' },
-  { name: 'Amazon RDS Aurora for PostgreSQL', type: 'aurora' },
-  { name: 'Heroku PostgreSQL', type: 'heroku' },
-  { name: 'Supabase PostgreSQL', 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: [],
-  },
-]