@postgres.ai/shared 4.0.4 → 4.1.0

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

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

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

@@ -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/Instance/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 !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

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

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