@postgres.ai/shared 4.0.3 → 4.1.0

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

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

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

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

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

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

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

@@ -0,0 +1,15 @@
+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>
+  )
+}