@postgres.ai/shared 4.0.3 → 4.1.0

package/pages/Branches/components/BranchesTable/index.tsx

@@ -0,0 +1,194 @@
+/*--------------------------------------------------------------------------
+ * 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 cn from 'classnames'
+import { useEffect, useState } from 'react'
+import copy from 'copy-to-clipboard'
+import { makeStyles } from '@material-ui/core'
+import { useHistory } from 'react-router-dom'
+import { formatDateWithDistance } from '@postgres.ai/shared/utils/date'
+import { ArrowDropDownIcon } from '@postgres.ai/shared/icons/ArrowDropDown'
+import { Branch } from '@postgres.ai/shared/types/api/endpoints/getBranches'
+import { HorizontalScrollContainer } from '@postgres.ai/shared/components/HorizontalScrollContainer'
+import { useHost } from '@postgres.ai/shared/pages/Instance/context'
+import {
+  Table,
+  TableHead,
+  TableRow,
+  TableBody,
+  TableHeaderCell,
+  TableBodyCell,
+  TableBodyCellMenu,
+} from '@postgres.ai/shared/components/Table'
+
+import { DeleteBranchModal } from '../Modals/DeleteBranchModal'
+import { DeleteBranch } from '@postgres.ai/shared/types/api/endpoints/deleteBranch'
+
+const useStyles = makeStyles(
+  {
+    cellContentCentered: {
+      display: 'flex',
+      alignItems: 'center',
+    },
+    pointerCursor: {
+      cursor: 'pointer',
+    },
+    sortIcon: {
+      marginLeft: '8px',
+      width: '10px',
+    },
+    interactiveRow: {
+      cursor: 'pointer',
+    },
+    verticalCentered: {
+      display: 'flex',
+      alignItems: 'center',
+    },
+    marginTop: {
+      marginTop: '16px',
+    },
+    sortIconUp: {
+      transform: 'rotate(180deg)',
+    },
+  },
+  { index: 1 },
+)
+
+export const BranchesTable = ({
+  branches,
+  emptyTableText,
+  deleteBranch,
+  branchesRoute,
+  reloadBranches,
+}: {
+  branches: Branch[]
+  emptyTableText: string
+  deleteBranch: DeleteBranch
+  branchesRoute: string
+  reloadBranches: () => void
+}) => {
+  const host = useHost()
+  const history = useHistory()
+  const classes = useStyles()
+
+  const [state, setState] = useState({
+    sortByParent: 'desc',
+    branches: [] as Branch[],
+  })
+  const [branchId, setBranchId] = useState('')
+  const [isOpenDestroyModal, setIsOpenDestroyModal] = useState(false)
+
+  const handlesortByParent = () => {
+    const sortByParent = state.sortByParent === 'desc' ? 'asc' : 'desc'
+
+    const sortedBranches = [...state.branches].sort((a, b) => {
+      if (sortByParent === 'asc') {
+        return a.parent.localeCompare(b.parent)
+      } else {
+        return b.parent.localeCompare(a.parent)
+      }
+    })
+
+    setState({
+      sortByParent,
+      branches: sortedBranches,
+    })
+  }
+
+  useEffect(() => {
+    setState({
+      sortByParent: 'desc',
+      branches: branches ?? [],
+    })
+  }, [branches])
+
+  if (!state.branches.length) {
+    return <p className={classes.marginTop}>{emptyTableText}</p>
+  }
+
+  return (
+    <HorizontalScrollContainer>
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableHeaderCell />
+            <TableHeaderCell>Branch</TableHeaderCell>
+            <TableHeaderCell>
+              <div
+                onClick={handlesortByParent}
+                className={cn(classes.interactiveRow, classes.verticalCentered)}
+              >
+                Parent
+                <ArrowDropDownIcon
+                  className={cn(
+                    state.sortByParent === 'asc' && classes.sortIconUp,
+                    classes.sortIcon,
+                  )}
+                />
+              </div>
+            </TableHeaderCell>
+            <TableHeaderCell>Data state time</TableHeaderCell>
+            <TableHeaderCell>Latest Snapshot ID</TableHeaderCell>
+            <TableHeaderCell>Number of snapshots</TableHeaderCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {state.branches?.map((branch) => {
+            const branchPagePath = host.routes.branch(branch.name)
+
+            return (
+              <TableRow
+                key={branch.name}
+                hover
+                onClick={() => history.push(branchPagePath)}
+                className={classes.pointerCursor}
+              >
+                <TableBodyCellMenu
+                  actions={[
+                    {
+                      name: 'Copy snapshot ID',
+                      onClick: () => copy(branch.snapshotID),
+                    },
+                    {
+                      name: 'Delete branch',
+                      onClick: () => {
+                        setBranchId(branch.name)
+                        setIsOpenDestroyModal(true)
+                      },
+                    },
+                  ]}
+                />
+
+                <TableBodyCell>{branch.name}</TableBodyCell>
+                <TableBodyCell>{branch.parent}</TableBodyCell>
+                <TableBodyCell>
+                  {formatDateWithDistance(branch.dataStateAt, new Date(branch.dataStateAt))}
+                </TableBodyCell>
+                <TableBodyCell>{branch.snapshotID}</TableBodyCell>
+                <TableBodyCell>{branch.numSnapshots}</TableBodyCell>
+              </TableRow>
+            )
+          })}
+        </TableBody>
+        <DeleteBranchModal
+          isOpen={isOpenDestroyModal}
+          onClose={() => {
+            setIsOpenDestroyModal(false)
+            setBranchId('')
+          }}
+          deleteBranch={deleteBranch}
+          branchName={branchId}
+          instanceId={host.instanceId}
+          afterSubmitClick={() => {
+            reloadBranches()
+            history.push(branchesRoute)
+          }}
+        />
+      </Table>
+    </HorizontalScrollContainer>
+  )
+}

package/pages/Branches/components/Modals/DeleteBranchModal/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 { useState } from 'react'
+import { makeStyles } from '@material-ui/core'
+
+import { Modal } from '@postgres.ai/shared/components/Modal'
+import { ModalProps } from '@postgres.ai/shared/pages/Branches/components/Modals/types'
+import { SimpleModalControls } from '@postgres.ai/shared/components/SimpleModalControls'
+import { ImportantText } from '@postgres.ai/shared/components/ImportantText'
+import { Text } from '@postgres.ai/shared/components/Text'
+import { DeleteBranch } from '@postgres.ai/shared/types/api/endpoints/deleteBranch'
+interface DeleteBranchModalProps extends ModalProps {
+  deleteBranch: DeleteBranch
+  branchName: string
+  instanceId: string
+  afterSubmitClick: () => void
+}
+
+const useStyles = makeStyles(
+  {
+    errorMessage: {
+      color: 'red',
+      marginTop: '10px',
+    },
+  },
+  { index: 1 },
+)
+
+export const DeleteBranchModal = ({
+  isOpen,
+  onClose,
+  deleteBranch,
+  branchName,
+  instanceId,
+  afterSubmitClick,
+}: DeleteBranchModalProps) => {
+  const classes = useStyles()
+  const [deleteError, setDeleteError] = useState<string | null>(null)
+
+  const handleDelete = async () => {
+    const deleteRes = await deleteBranch(branchName, instanceId)
+
+    if (deleteRes?.error) {
+      setDeleteError(deleteRes.error?.message)
+    } else {
+      afterSubmitClick()
+    }
+  }
+
+  const handleClose = () => {
+    setDeleteError(null)
+    onClose()
+  }
+
+  return (
+    <Modal title="Confirmation" onClose={handleClose} isOpen={isOpen} size="xs">
+      <Text>
+        Are you sure you want to delete branch{' '}
+        <ImportantText>{branchName}</ImportantText>? This action cannot be
+        undone.
+      </Text>
+      {deleteError && <p className={classes.errorMessage}>{deleteError}</p>}
+      <SimpleModalControls
+        items={[
+          {
+            text: 'Cancel',
+            onClick: handleClose,
+          },
+          {
+            text: 'Delete branch',
+            variant: 'primary',
+            onClick: handleDelete,
+            isDisabled: branchName === 'main',
+          },
+        ]}
+      />
+    </Modal>
+  )
+}

package/pages/Branches/components/Modals/types.ts

@@ -0,0 +1,4 @@
+export interface ModalProps {
+  isOpen: boolean
+  onClose: () => void
+}

package/pages/Branches/index.tsx

@@ -0,0 +1,128 @@
+/*--------------------------------------------------------------------------
+ * 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 { useHistory } from 'react-router'
+import { makeStyles } from '@material-ui/core'
+import React, { useEffect, useState } from 'react'
+
+import { useStores, useHost } from '@postgres.ai/shared/pages/Instance/context'
+import { Button } from '@postgres.ai/shared/components/Button2'
+import { Branch } from '@postgres.ai/shared/types/api/endpoints/getBranches'
+import { Spinner } from '@postgres.ai/shared/components/Spinner'
+import { ErrorStub } from '@postgres.ai/shared/components/ErrorStub'
+import { BranchesTable } from '@postgres.ai/shared/pages/Branches/components/BranchesTable'
+import { SectionTitle } from '@postgres.ai/shared/components/SectionTitle'
+import { Tooltip } from '@postgres.ai/shared/components/Tooltip'
+import { InfoIcon } from '@postgres.ai/shared/icons/Info'
+import { DeleteBranch } from '@postgres.ai/shared/types/api/endpoints/deleteBranch'
+
+const useStyles = makeStyles(
+  {
+    container: {
+      marginTop: '16px',
+    },
+    infoIcon: {
+      height: '12px',
+      width: '12px',
+      marginLeft: '8px',
+      color: '#808080',
+    },
+    spinner: {
+      position: 'absolute',
+      right: '50%',
+      transform: 'translate(-50%, -50%)',
+    },
+  },
+  { index: 1 },
+)
+
+interface BranchesProps {
+  instanceId: string
+}
+
+export const Branches: React.FC<BranchesProps> = observer(({ instanceId }) => {
+  const host = useHost()
+  const stores = useStores()
+  const classes = useStyles()
+  const history = useHistory()
+  const [branches, setBranches] = useState<Branch[]>([])
+  const [isLoading, setIsLoading] = useState(true)
+  const {
+    instance,
+    getBranches,
+    isBranchesLoading,
+    getBranchesError,
+    deleteBranch,
+  } = stores.main
+
+  const goToBranchAddPage = () => history.push(host.routes.createBranch())
+
+  const loadBranches = () => {
+    getBranches(instanceId)
+      .then((response) => {
+        response && setBranches(response)
+      })
+      .finally(() => setIsLoading(false))
+  }
+
+  useEffect(() => {
+    loadBranches()
+  }, [])
+
+  if (!instance && !isBranchesLoading) return <></>
+
+  if (getBranchesError)
+    return (
+      <ErrorStub
+        title={getBranchesError?.title}
+        message={getBranchesError?.message}
+      />
+    )
+
+  return (
+    <div className={classes.container}>
+      {isBranchesLoading || isLoading ? (
+        <Spinner size="lg" className={classes.spinner} />
+      ) : (
+        <>
+          <SectionTitle
+            level={2}
+            tag="h2"
+            text={`Branches (${branches?.length || 0})`}
+            rightContent={
+              <>
+                <Button
+                  theme="primary"
+                  isDisabled={!branches.length}
+                  onClick={goToBranchAddPage}
+                >
+                  Create branch
+                </Button>
+
+                {!branches.length && (
+                  <Tooltip content="No existing branch">
+                    <div style={{ display: 'flex' }}>
+                      <InfoIcon className={classes.infoIcon} />
+                    </div>
+                  </Tooltip>
+                )}
+              </>
+            }
+          />
+          <BranchesTable
+            branches={branches}
+            branchesRoute={host.routes.branches()}
+            reloadBranches={loadBranches}
+            deleteBranch={deleteBranch as DeleteBranch}
+            emptyTableText="This instance has no active branches."
+          />
+        </>
+      )}
+    </div>
+  )
+})

package/pages/Clone/Status/index.tsx

@@ -0,0 +1,73 @@
+/*--------------------------------------------------------------------------
+ * 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 clsx from 'clsx'
+
+import {
+  CloneDto,
+  formatCloneDto,
+} from '@postgres.ai/shared/types/api/entities/clone'
+import { Status as StatusBase } from '@postgres.ai/shared/components/Status'
+import { FormattedText } from '@postgres.ai/shared/components/FormattedText'
+import {
+  getCloneStatusType,
+  getCloneStatusText,
+} from '@postgres.ai/shared/utils/clone'
+
+type Props = {
+  rawClone: CloneDto
+  className?: string
+}
+
+const useStyles = makeStyles(
+  {
+    root: {
+      marginTop: '2px',
+    },
+    status: {
+      fontWeight: 500,
+    },
+    message: {
+      margin: '4px 0 0 0',
+    },
+    errorMessage: {
+      marginTop: '8px',
+    },
+  },
+  { index: 1 },
+)
+
+export const Status = React.memo((props: Props) => {
+  const { rawClone, className } = props
+
+  const classes = useStyles()
+
+  const clone = formatCloneDto(rawClone)
+
+  const { code, message } = clone.status
+
+  const statusType = getCloneStatusType(code)
+  const statusText = getCloneStatusText(code)
+
+  const isError = statusType === 'error'
+
+  return (
+    <div className={clsx(classes.root, className)}>
+      <StatusBase type={statusType} className={classes.status}>
+        {statusText}
+      </StatusBase>
+
+      {!isError && <p className={classes.message}>{message}</p>}
+
+      {isError && (
+        <FormattedText value={message} className={classes.errorMessage} />
+      )}
+    </div>
+  )
+})

package/pages/Clone/context.ts

@@ -0,0 +1,24 @@
+import { createStrictContext } from '@postgres.ai/shared/utils/react'
+
+import { Api } from './stores/Main'
+import { Stores } from './useCreatedStores'
+
+export type Host = {
+  instanceId: string
+  cloneId: string
+  routes: {
+    instance: () => string
+    snapshot: (snapshotId: string) => string
+    createSnapshot: (cloneId: string) => string
+  }
+  api: Api
+  elements: {
+    breadcrumbs: React.ReactNode
+  }
+}
+
+export const { useStrictContext: useHost, Provider: HostProvider } =
+  createStrictContext<Host>()
+
+export const { useStrictContext: useStores, Provider: StoresProvider } =
+  createStrictContext<Stores>()