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

package/pages/Instance/components/ClonesList/ConnectionModal/index.tsx

@@ -1,196 +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 { observer } from 'mobx-react-lite'
-import { makeStyles, IconButton } from '@material-ui/core'
-import copy from 'copy-to-clipboard'
-
-import { useStores } from '@postgres.ai/shared/pages/Instance/context'
-import { Tooltip } from '@postgres.ai/shared/components/Tooltip'
-import { Modal } from '@postgres.ai/shared/components/Modal'
-import { TextField } from '@postgres.ai/shared/components/TextField'
-import { icons } from '@postgres.ai/shared/styles/icons'
-import {
-  getSshPortForwardingCommand,
-  getPsqlConnectionStr,
-  getJdbcConnectionStr,
-} from '@postgres.ai/shared/utils/connection'
-
-type Props = {
-  isOpen: boolean
-  onClose: () => void
-  cloneId: string
-}
-
-const useStyles = makeStyles(
-  {
-    root: {
-      fontSize: '14px',
-    },
-    item: {
-      '& + $item': {
-        marginTop: '16px',
-      },
-    },
-    fieldText: {
-      margin: 0,
-    },
-    field: {
-      width: 'calc(100% - 24px)',
-      margin: '16px 0 0 0',
-    },
-    fieldWrapper: {
-      display: 'flex',
-      alignItems: 'flex-end',
-    },
-    fieldInfo: {
-      display: 'flex',
-      alignItems: 'center',
-      height: '32px',
-      marginLeft: '12px',
-    },
-    copyButton: {
-      width: '32px',
-      height: '32px',
-      padding: '8px',
-    },
-    note: {
-      margin: '24px 0 0 0',
-      fontSize: '12px',
-    },
-  },
-  { index: 1 },
-)
-
-export const ConnectionModal = observer((props: Props) => {
-  const { isOpen, onClose, cloneId } = props
-
-  const classes = useStyles()
-
-  const stores = useStores()
-
-  const { instance } = stores.main
-  if (!instance) return null
-
-  const clone = instance.state?.cloning.clones.find(
-    (clone) => clone.id === cloneId,
-  )
-  if (!clone) return null
-
-  const sshPortForwardingCommand = getSshPortForwardingCommand(instance, clone)
-  const psqlConnectionStr = getPsqlConnectionStr(clone)
-  const jdbcConnectionStr = getJdbcConnectionStr(clone)
-
-  return (
-    <Modal title="Clone connection info" isOpen={isOpen} onClose={onClose}>
-      <div className={classes.root}>
-        {sshPortForwardingCommand && (
-          <div className={classes.item}>
-            <p className={classes.fieldText}>
-              In a separate console, set up SSH port forwarding
-              <br />
-              (and keep it running):
-            </p>
-            <TextField
-              label="SSH port forwarding"
-              value={sshPortForwardingCommand}
-              className={classes.field}
-              InputProps={{
-                endAdornment: (
-                  <IconButton
-                    className={classes.copyButton}
-                    onClick={() => copy(sshPortForwardingCommand)}
-                  >
-                    {icons.copyIcon}
-                  </IconButton>
-                ),
-              }}
-            />
-          </div>
-        )}
-
-        {psqlConnectionStr && (
-          <div className={classes.item}>
-            <p className={classes.fieldText}>Connect to Postgres using psql:</p>
-            <div className={classes.fieldWrapper}>
-              <TextField
-                label="psql connection string"
-                value={psqlConnectionStr}
-                className={classes.field}
-                InputProps={{
-                  endAdornment: (
-                    <IconButton
-                      className={classes.copyButton}
-                      onClick={() => copy(psqlConnectionStr)}
-                    >
-                      {icons.copyIcon}
-                    </IconButton>
-                  ),
-                }}
-              />
-
-              <Tooltip
-                content={
-                  <>
-                    Used to connect to Postgres using psql. Change DBNAME
-                    to&nbsp; name of the database you want to connect. Use
-                    PGPASSWORD&nbsp; environment variable to set database
-                    password or type&nbsp; it when prompted.
-                  </>
-                }
-              >
-                <span className={classes.fieldInfo}>{icons.infoIcon}</span>
-              </Tooltip>
-            </div>
-          </div>
-        )}
-
-        {jdbcConnectionStr && (
-          <div className={classes.item}>
-            <p className={classes.fieldText}>Connect to Postgres using JDBC:</p>
-            <div className={classes.fieldWrapper}>
-              <TextField
-                label="JDBC connection string"
-                value={jdbcConnectionStr}
-                className={classes.field}
-                InputProps={{
-                  endAdornment: (
-                    <IconButton
-                      className={classes.copyButton}
-                      onClick={() => copy(jdbcConnectionStr)}
-                    >
-                      {icons.copyIcon}
-                    </IconButton>
-                  ),
-                }}
-              />
-
-              <Tooltip
-                content={
-                  <>
-                    Used to connect to Postgres using JDBC. Change DBNAME
-                    to&nbsp; name of the database you want to connect, change
-                    DBPASSWORD&nbsp; to the password you’ve used on clone
-                    creation.
-                  </>
-                }
-              >
-                <span className={classes.fieldInfo}>{icons.infoIcon}</span>
-              </Tooltip>
-            </div>
-          </div>
-        )}
-
-        <p className={classes.note}>
-          Password was set during clone creation. It’s not being stored.
-          <br />
-          You would need to recreate a clone if the password is lost.
-        </p>
-      </div>
-    </Modal>
-  )
-})

package/pages/Instance/components/ClonesList/MenuCell/index.tsx

@@ -1,98 +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 { observer } from 'mobx-react-lite'
-
-import { Clone } from '@postgres.ai/shared/types/api/entities/clone'
-import { useStores } from '@postgres.ai/shared/pages/Instance/context'
-import { TableBodyCellMenu } from '@postgres.ai/shared/components/Table'
-
-import { DestroyCloneModal } from '@postgres.ai/shared/components/DestroyCloneModal'
-import { DestroyCloneRestrictionModal } from '@postgres.ai/shared/components/DestroyCloneRestrictionModal'
-import { ResetCloneModal } from '@postgres.ai/shared/components/ResetCloneModal'
-
-type Props = {
-  clone: Clone
-  onConnect: (cloneId: string) => void
-  clonePagePath: string
-}
-
-export const MenuCell = observer((props: Props) => {
-  const { clone, onConnect, clonePagePath } = props
-
-  const stores = useStores()
-
-  const [
-    isOpenCloneDestroyRestrictionModal,
-    setIsOpenCloneDestroyRestrictionModal,
-  ] = useState(false)
-
-  const [isOpenCloneDestroyModal, setIsOpenCloneDestroyModal] = useState(false)
-
-  const [isOpenResetCloneModal, setIsOpenResetCloneModal] = useState(false)
-
-  const handleClickDestroyClone = () => {
-    if (clone.protected) return setIsOpenCloneDestroyRestrictionModal(true)
-    setIsOpenCloneDestroyModal(true)
-  }
-
-  const handleClickResetClone = async () => {
-    setIsOpenResetCloneModal(true)
-  }
-
-  const isLoading = stores.main.unstableClones.has(clone.id)
-
-  if (!stores.main.instance) return null
-
-  const hasSnapshots = Boolean(stores.main.snapshots.data?.length)
-
-  return (
-    <TableBodyCellMenu
-      isLoading={isLoading}
-      isDisabled={stores.main.isDisabledInstance}
-      actions={[
-        {
-          name: 'Connect',
-          onClick: () => onConnect(clone.id),
-        },
-        {
-          name: 'Destroy clone',
-          onClick: handleClickDestroyClone,
-        },
-        {
-          name: 'Reset clone',
-          onClick: handleClickResetClone,
-          isDisabled: !hasSnapshots,
-        },
-      ]}
-    >
-      <DestroyCloneRestrictionModal
-        cloneId={clone.id}
-        isOpen={isOpenCloneDestroyRestrictionModal}
-        onClose={() => setIsOpenCloneDestroyRestrictionModal(false)}
-        clonePagePath={clonePagePath}
-      />
-      <DestroyCloneModal
-        cloneId={clone.id}
-        isOpen={isOpenCloneDestroyModal}
-        onClose={() => setIsOpenCloneDestroyModal(false)}
-        onDestroyClone={() => stores.main.destroyClone(clone.id)}
-      />
-      <ResetCloneModal
-        clone={clone}
-        snapshots={stores.main.snapshots.data}
-        isOpen={isOpenResetCloneModal}
-        onClose={() => setIsOpenResetCloneModal(false)}
-        onResetClone={(snapshotId) =>
-          stores.main.resetClone(clone.id, snapshotId)
-        }
-        version={stores.main.instance.state?.engine.version}
-      />
-    </TableBodyCellMenu>
-  )
-})

package/pages/Instance/components/ClonesList/MenuCell/utils.ts

@@ -1,21 +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
- *--------------------------------------------------------------------------
- */
-
-export const destroyRestriction = (cloneId: string) => {
-  const message = `The clone "${cloneId}" is marked as protected. To destroy it, disable the destroy protection first.`
-  window.alert(message)
-}
-
-export const getResetApprove = (cloneId: string) => {
-  const message = `Are you sure you want to reset the Database Lab clone: "${cloneId}"?`
-  return window.confirm(message)
-}
-
-export const getDestroyApprove = (cloneId: string) => {
-  const message = `Are you sure you want to destroy the Database Lab clone: "${cloneId}"?`
-  return window.confirm(message)
-}

package/pages/Instance/components/ClonesList/index.tsx

@@ -1,189 +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 cn from 'classnames'
-import { formatDistanceToNowStrict } from 'date-fns'
-import { useHistory } from 'react-router-dom'
-
-import {
-  Table,
-  TableHead,
-  TableRow,
-  TableHeaderCell,
-  TableBody,
-  TableBodyCell,
-} from '@postgres.ai/shared/components/Table'
-import { ArrowDropDownIcon } from '@postgres.ai/shared/icons/ArrowDropDown'
-import { ShieldIcon } from '@postgres.ai/shared/icons/Shield'
-import { RenewableIcon } from '@postgres.ai/shared/icons/Renewable'
-import { InfoIcon } from '@postgres.ai/shared/icons/Info'
-import { HorizontalScrollContainer } from '@postgres.ai/shared/components/HorizontalScrollContainer'
-import { Status } from '@postgres.ai/shared/components/Status'
-import { Tooltip } from '@postgres.ai/shared/components/Tooltip'
-import { Clone } from '@postgres.ai/shared/types/api/entities/clone'
-import { useHost } from '@postgres.ai/shared/pages/Instance/context'
-import {
-  getCloneStatusType,
-  getCloneStatusText,
-} from '@postgres.ai/shared/utils/clone'
-import { formatBytesIEC } from '@postgres.ai/shared/utils/units'
-
-import { MenuCell } from './MenuCell'
-import { ConnectionModal } from './ConnectionModal'
-
-import styles from './styles.module.scss'
-
-type Props = {
-  clones?: Clone[]
-  isDisabled: boolean
-  emptyStubText: string
-}
-
-export const ClonesList = (props: Props) => {
-  const host = useHost()
-  const history = useHistory()
-
-  const [cloneIdForConnect, setCloneIdForConnect] = useState<null | string>(
-    null,
-  )
-  const [isOpenConnectionModal, setIsOpenConnectionModal] = useState(false)
-
-  const openConnectionModal = (cloneId: string) => {
-    setCloneIdForConnect(cloneId)
-    setIsOpenConnectionModal(true)
-  }
-
-  const closeConnectionModal = () => {
-    setIsOpenConnectionModal(false)
-  }
-
-  if (!props.clones?.length)
-    return <p className={styles.emptyStub}>{props.emptyStubText}</p>
-
-  return (
-    <>
-      <HorizontalScrollContainer>
-        <Table>
-          <TableHead>
-            <TableRow>
-              <TableHeaderCell />
-              <TableHeaderCell>Status</TableHeaderCell>
-              <TableHeaderCell>ID</TableHeaderCell>
-              <TableHeaderCell>
-                <Tooltip content="When enabled, neither manual nor automated deletion of this clone is possible. Note that abandoned protected clones may lead to out-of-disk-space events because they hold old data, blocking cleanup and refresh processes.">
-                  <div className={styles.verticalCentered}>
-                    Protected
-                    <InfoIcon className={styles.infoIcon} />
-                  </div>
-                </Tooltip>
-              </TableHeaderCell>
-              <TableHeaderCell>
-                <div className={styles.verticalCentered}>
-                  Created
-                  <ArrowDropDownIcon className={styles.sortIcon} />
-                </div>
-              </TableHeaderCell>
-              <TableHeaderCell>Port</TableHeaderCell>
-              <TableHeaderCell>DB user</TableHeaderCell>
-              <TableHeaderCell>
-                <Tooltip content="Clone's own size – how much data was added or modified.">
-                  <div className={styles.verticalCentered}>
-                    Diff size
-                    <InfoIcon className={styles.infoIcon} />
-                  </div>
-                </Tooltip>
-              </TableHeaderCell>
-              <TableHeaderCell>Disk</TableHeaderCell>
-              <TableHeaderCell>Data state time</TableHeaderCell>
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {props.clones.map((clone) => {
-              const clonePagePath = host.routes.clone(clone.id)
-
-              return (
-                <TableRow
-                  hover={!props.isDisabled}
-                  key={clone.id}
-                  onClick={
-                    props.isDisabled
-                      ? undefined
-                      : () => history.push(clonePagePath)
-                  }
-                  className={cn(!props.isDisabled && styles.interactiveRow)}
-                >
-                  <MenuCell
-                    clone={clone}
-                    onConnect={openConnectionModal}
-                    clonePagePath={clonePagePath}
-                  />
-                  <TableBodyCell>
-                    <Tooltip content={clone.status.message}>
-                      <Status type={getCloneStatusType(clone.status.code)}>
-                        {getCloneStatusText(clone.status.code)}
-                      </Status>
-                    </Tooltip>
-                  </TableBodyCell>
-                  <TableBodyCell>{clone.id}</TableBodyCell>
-                  <TableBodyCell>
-                    {clone.protected ? (
-                      <Tooltip content="Clone is protected from manual and automated deletion. Note that abandoned protected clones may lead to out-of-disk-space events because they hold old data, blocking cleanup and refresh processes.">
-                        <ShieldIcon className={styles.protectionIcon} />
-                      </Tooltip>
-                    ) : (
-                      <Tooltip content="Clone is not protected from deletion. To save disk space it will be automatically deleted if there is no activity for a long time.">
-                        <RenewableIcon className={styles.protectionIcon} />
-                      </Tooltip>
-                    )}
-                  </TableBodyCell>
-                  <TableBodyCell>
-                    {clone.createdAt} (
-                    {formatDistanceToNowStrict(clone.createdAtDate, {
-                      addSuffix: true,
-                    })}
-                    )
-                  </TableBodyCell>
-                  <TableBodyCell>{clone.db.port}</TableBodyCell>
-                  <TableBodyCell>{clone.db.username}</TableBodyCell>
-                  <TableBodyCell>
-                    {formatBytesIEC(clone.metadata.cloneDiffSize)}
-                  </TableBodyCell>
-                  <TableBodyCell>{clone.snapshot?.pool ?? '-'}</TableBodyCell>
-                  <TableBodyCell>
-                    {clone.snapshot ? (
-                      <>
-                        {clone.snapshot.dataStateAt} (
-                        {formatDistanceToNowStrict(
-                          clone.snapshot.dataStateAtDate,
-                          {
-                            addSuffix: true,
-                          },
-                        )}
-                        )
-                      </>
-                    ) : (
-                      '-'
-                    )}
-                  </TableBodyCell>
-                </TableRow>
-              )
-            })}
-          </TableBody>
-        </Table>
-      </HorizontalScrollContainer>
-
-      {cloneIdForConnect && (
-        <ConnectionModal
-          cloneId={cloneIdForConnect}
-          isOpen={isOpenConnectionModal}
-          onClose={closeConnectionModal}
-        />
-      )}
-    </>
-  )
-}

package/pages/Instance/components/ErrorStub/index.tsx

@@ -1,77 +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 React from 'react'
-import { Paper, makeStyles } from '@material-ui/core'
-import clsx from 'clsx'
-
-type Props = {
-  title?: string
-  message: string
-  className?: string
-  size?: 'big' | 'normal'
-}
-
-const useStyles = makeStyles(
-  {
-    '*': {
-      margin: 0,
-    },
-    root: {
-      color: '#c00111',
-      overflowWrap: 'break-word',
-    },
-    rootBig: {
-      padding: '16px 24px',
-
-      '& $title': {
-        fontSize: '16px',
-      },
-      '& $message': {
-        marginTop: '16px',
-        fontSize: '14px',
-      },
-    },
-    rootNormal: {
-      padding: '8px 16px',
-
-      '& $title': {
-        fontSize: '14px',
-      },
-      '& $message': {
-        marginTop: '12px',
-        fontSize: '12px',
-      },
-    },
-    title: {
-      fontWeight: 700,
-      textTransform: 'uppercase',
-    },
-    message: {},
-  },
-  { index: 1 },
-)
-
-export const ErrorStub = (props: Props) => {
-  const { title = 'Unknown error', message, className, size = 'big' } = props
-
-  const classes = useStyles()
-
-  return (
-    <Paper
-      className={clsx(
-        classes.root,
-        size === 'big' && classes.rootBig,
-        size === 'normal' && classes.rootNormal,
-        className,
-      )}
-    >
-      <h2 className={classes.title}>{title}</h2>
-      <p className={classes.message}>{message}</p>
-    </Paper>
-  )
-}

package/pages/Instance/components/ModalReloadButton/index.tsx

@@ -1,43 +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 { makeStyles } from '@material-ui/core'
-
-import { Button } from '@postgres.ai/shared/components/Button2'
-
-type Props = {
-  isReloading: boolean
-  onReload: () => void
-}
-
-const useStyles = makeStyles(
-  {
-    spinner: {
-      margin: '5px',
-    },
-    content: {
-      flex: '0 0 auto',
-      alignSelf: 'flex-start',
-    },
-  },
-  { index: 1 },
-)
-
-export const ModalReloadButton = (props: Props) => {
-  const classes = useStyles()
-
-  return (
-    <Button
-      onClick={props.onReload}
-      className={classes.content}
-      isLoading={props.isReloading}
-      isDisabled={props.isReloading}
-    >
-      Reload info
-    </Button>
-  )
-}

package/pages/Instance/components/Tags/Tag/index.tsx

@@ -1,60 +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 React from 'react'
-import { makeStyles } from '@material-ui/core'
-
-import { HorizontalScrollContainer } from '@postgres.ai/shared/components/HorizontalScrollContainer'
-import { colors } from '@postgres.ai/shared/styles/vars'
-
-type Props = {
-  name: string
-  children: React.ReactNode
-}
-
-const useStyles = makeStyles(
-  {
-    root: {
-      fontSize: '12px',
-      marginRight: '8px',
-      marginBottom: '8px',
-      borderRadius: '12px',
-      background: colors.gray,
-    },
-    content: {
-      padding: '5px 8px',
-      whiteSpace: 'nowrap',
-    },
-    curtainLeft: {
-      background: 'linear-gradient(to right, rgba(0,0,0,0.1), transparent);',
-    },
-    curtainRight: {
-      background: 'linear-gradient(to left, rgba(0,0,0,0.1), transparent);',
-    },
-    value: {
-      fontWeight: 700,
-    },
-  },
-  { index: 1 },
-)
-
-export const Tag = (props: Props) => {
-  const classes = useStyles()
-
-  return (
-    <HorizontalScrollContainer
-      classes={{
-        root: classes.root,
-        content: classes.content,
-        curtainLeft: classes.curtainLeft,
-        curtainRight: classes.curtainRight,
-      }}
-    >
-      {props.name}: <span className={classes.value}>{props.children}</span>
-    </HorizontalScrollContainer>
-  )
-}