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

package/pages/Instance/Clones/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 PostgreSQL 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 PostgreSQL using psql. Change DBNAME
-                    to the name of the database you want to connect to. Use
-                    the PGPASSWORD environment variable to set the database
-                    password or type it when prompted.
-                  </>
-                }
-              >
-                <span className={classes.fieldInfo}>{icons.infoIcon}</span>
-              </Tooltip>
-            </div>
-          </div>
-        )}
-
-        {jdbcConnectionStr && (
-          <div className={classes.item}>
-            <p className={classes.fieldText}>Connect to PostgreSQL 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 PostgreSQL using JDBC. Change DBNAME
-                    to the name of the database you want to connect to, and
-                    change DBPASSWORD to the password you used when creating
-                    the clone.
-                  </>
-                }
-              >
-                <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/Clones/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: 'Delete 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/Clones/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 delete it, disable the delete 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 delete the Database Lab clone: "${cloneId}"?`
-  return window.confirm(message)
-}

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

@@ -1,246 +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 { 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 { formatDateWithDistance } from '@postgres.ai/shared/utils/date'
-
-import { MenuCell } from './MenuCell'
-import { ConnectionModal } from './ConnectionModal'
-
-import styles from './styles.module.scss'
-
-type Props = {
-  clones?: Clone[]
-  isDisabled: boolean
-  emptyStubText: string
-  hideBranchingFeatures?: boolean
-}
-
-export const ClonesList = (props: Props) => {
-  const host = useHost()
-  const history = useHistory()
-
-  const [state, setState] = useState({
-    sortByBranch: 'desc',
-    sortByCreated: 'desc',
-    clones: props.clones ?? [],
-  })
-
-  const [cloneIdForConnect, setCloneIdForConnect] = useState<null | string>(
-    null,
-  )
-  const [isOpenConnectionModal, setIsOpenConnectionModal] = useState(false)
-
-  const openConnectionModal = (cloneId: string) => {
-    setCloneIdForConnect(cloneId)
-    setIsOpenConnectionModal(true)
-  }
-
-  const closeConnectionModal = () => {
-    setIsOpenConnectionModal(false)
-  }
-
-  const handleSortByBranch = () => {
-    const sortByBranch = state.sortByBranch === 'desc' ? 'asc' : 'desc'
-
-    const sortedClones = [...state.clones].sort((a, b) => {
-      if (sortByBranch === 'asc') {
-        return a.branch.localeCompare(b.branch)
-      } else {
-        return b.branch.localeCompare(a.branch)
-      }
-    })
-
-    setState({
-      ...state,
-      sortByBranch,
-      clones: sortedClones,
-    })
-  }
-
-  const handleSortByCreated = () => {
-    const sortByCreated = state.sortByCreated === 'desc' ? 'asc' : 'desc'
-
-    const sortedClones = [...state.clones].sort((a, b) => {
-      if (sortByCreated === 'asc') {
-        return (
-          new Date(a.createdAtDate).getTime() -
-          new Date(b.createdAtDate).getTime()
-        )
-      } else {
-        return (
-          new Date(b.createdAtDate).getTime() -
-          new Date(a.createdAtDate).getTime()
-        )
-      }
-    })
-
-    setState({
-      ...state,
-      sortByCreated,
-      clones: sortedClones,
-    })
-  }
-
-  if (!state.clones?.length)
-    return <p className={styles.emptyStub}>{props.emptyStubText}</p>
-
-  return (
-    <>
-      <HorizontalScrollContainer>
-        <Table>
-          <TableHead>
-            <TableRow>
-              <TableHeaderCell />
-              <TableHeaderCell>Status</TableHeaderCell>
-              <TableHeaderCell>ID</TableHeaderCell>
-              {!props.hideBranchingFeatures && <TableHeaderCell>
-                <div
-                  onClick={handleSortByBranch}
-                  className={cn(styles.interactiveRow, styles.verticalCentered)}
-                >
-                  Branch
-                  <ArrowDropDownIcon
-                    className={cn(
-                      state.sortByCreated === 'asc' && styles.hideSortIcon,
-                      state.sortByBranch === 'asc' && styles.sortIconUp,
-                      styles.sortIcon,
-                    )}
-                  />
-                </div>
-              </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
-                  onClick={handleSortByCreated}
-                  className={cn(styles.interactiveRow, styles.verticalCentered)}
-                >
-                  Created
-                  <ArrowDropDownIcon
-                    className={cn(
-                      state.sortByBranch === 'asc' && styles.hideSortIcon,
-                      state.sortByCreated === 'asc' && styles.sortIconUp,
-                      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>
-            {state.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>
-                  {!props.hideBranchingFeatures && <TableBodyCell>{clone.branch}</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>
-                    {formatDateWithDistance(clone.createdAt, clone.createdAtDate)}
-                  </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 ? formatDateWithDistance(clone.snapshot.dataStateAt, clone.snapshot.dataStateAtDate) : '-'}
-                  </TableBodyCell>
-                </TableRow>
-              )
-            })}
-          </TableBody>
-        </Table>
-      </HorizontalScrollContainer>
-
-      {cloneIdForConnect && (
-        <ConnectionModal
-          cloneId={cloneIdForConnect}
-          isOpen={isOpenConnectionModal}
-          onClose={closeConnectionModal}
-        />
-      )}
-    </>
-  )
-}

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

@@ -1,71 +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 { observer } from 'mobx-react-lite'
-
-import { useStores } from '@postgres.ai/shared/pages/Instance/context'
-import { Modal } from '@postgres.ai/shared/components/Modal'
-import { ClonesList } from '@postgres.ai/shared/pages/Instance/Clones/ClonesList'
-import { Tags } from '@postgres.ai/shared/pages/Instance/components/Tags'
-import { ModalReloadButton } from '@postgres.ai/shared/pages/Instance/components/ModalReloadButton'
-
-import { getTags } from './utils'
-
-const useStyles = makeStyles(
-  {
-    root: {
-      marginTop: 0,
-    },
-  },
-  { index: 1 },
-)
-
-export const ClonesModal = observer(() => {
-  const classes = useStyles()
-  const stores = useStores()
-
-  const { instance } = stores.main
-  if (!instance) return null
-
-  const { pool, snapshotId, isOpenModal, closeModal } = stores.clonesModal
-
-  return (
-    <Modal
-      title={`Clones (${instance.state?.cloning.clones?.length})`}
-      isOpen={isOpenModal}
-      onClose={closeModal}
-      size="md"
-      titleRightContent={
-        <ModalReloadButton
-          isReloading={stores.main.isReloadingClones}
-          onReload={stores.main.reloadClones}
-        />
-      }
-      headerContent={
-        <Tags
-          data={getTags({
-            pool,
-            snapshotId,
-          })}
-        />
-      }
-      classes={{ content: classes.root }}
-    >
-      <ClonesList
-        isDisabled={false}
-        clones={instance.state?.cloning.clones.filter((clone) => {
-          const isMatchedByPool = !pool || pool === clone.snapshot?.pool
-          const isMatchedBySnapshot =
-            !snapshotId || snapshotId === clone.snapshot?.id
-          return isMatchedByPool && isMatchedBySnapshot
-        })}
-        emptyStubText="No clones found."
-      />
-    </Modal>
-  )
-})

package/pages/Instance/Clones/ClonesModal/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 getTags = ({
-  pool,
-  snapshotId,
-}: {
-  pool: string | null
-  snapshotId: string | null
-}) => {
-  const tags = []
-
-  if (pool) tags.push({ name: 'Disk', value: pool })
-  if (snapshotId) tags.push({ name: 'Snapshot', value: snapshotId })
-
-  return tags
-}

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

@@ -1,15 +0,0 @@
-import styles from './styles.module.scss'
-
-type Props = {
-  value: React.ReactNode
-  children: React.ReactNode
-}
-
-export const Item = (props: Props) => {
-  return (
-    <div className={styles.root}>
-      <div className={styles.value}>{props.value}</div>
-      <div className={styles.description}>{props.children}</div>
-    </div>
-  )
-}