@postgres.ai/shared 4.0.4 → 4.1.0

package/pages/Instance/Snapshots/components/SnapshotsList/index.tsx

@@ -0,0 +1,285 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+import { makeStyles } from '@material-ui/core'
+import copy from 'copy-to-clipboard'
+
+import { HorizontalScrollContainer } from '@postgres.ai/shared/components/HorizontalScrollContainer'
+import { DestroySnapshotModal } from '@postgres.ai/shared/pages/Snapshots/Snapshot/DestorySnapshotModal'
+import { Snapshot } from '@postgres.ai/shared/types/api/entities/snapshot'
+import { useHost, useStores } from '@postgres.ai/shared/pages/Instance/context'
+import { IconButton } from '@mui/material'
+import { icons } from '@postgres.ai/shared/styles/icons'
+import { RowMenu } from '@postgres.ai/shared/components/Table/RowMenu'
+import {
+  generateSnapshotPageId,
+  groupSnapshotsByCreatedAtDate,
+} from '@postgres.ai/shared/pages/Instance/Snapshots/utils'
+import { format } from 'date-fns'
+import { formatDistanceSafe } from '@postgres.ai/shared/utils/date'
+import { formatBytesIEC } from '@postgres.ai/shared/utils/units'
+import { useHistory } from 'react-router'
+import { DestroySnapshot } from '@postgres.ai/shared/types/api/endpoints/destroySnapshot'
+
+const useStyles = makeStyles(
+  {
+    pointerCursor: {
+      cursor: 'pointer',
+      padding: '0 8px',
+
+      '&:hover': {
+        backgroundColor: '#f9f9f9',
+      },
+    },
+    commitItem: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      padding: '14px 0',
+      borderBottom: '1px solid #ddd',
+
+      '&:last-child': {
+        borderBottom: 'none',
+        marginBottom: '12px',
+      },
+    },
+    infoBlock: {
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      overflow: 'hidden',
+    },
+    header: {
+      fontWeight: 500,
+    },
+    infoContent: {
+      fontSize: '12px',
+      color: '#808080',
+      display: 'flex',
+      alignItems: 'center',
+      gap: '5px',
+    },
+    snapshotId: {
+      fontSize: '12px',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+      padding: '0 10px',
+    },
+    actionsContainer: {
+      overflow: 'hidden',
+      display: 'flex',
+      height: 'max-content',
+      alignItems: 'center',
+      justifyContent: 'flex-end',
+      border: '1px solid #ddd',
+      borderRadius: '5px',
+      padding: '0 14px',
+      justifySelf: 'end',
+      maxWidth: '100%',
+
+      '& .MuiButtonBase-root, .MuiTableCell-root': {
+        padding: '0!important',
+        borderBottom: 'none',
+      },
+    },
+    dateGroup: {
+      fontSize: '14px',
+      fontWeight: 'bold',
+      padding: '14px 0 5px 0',
+      borderBottom: '1px solid #ddd',
+    },
+    rowMenuContainer: {
+      paddingLeft: '10px',
+      '& .MuiButtonBase-root': {
+        width: '20px',
+        height: '20px',
+        padding: '8px',
+      },
+    },
+    copyButtonContainer: {
+      '& .MuiButtonBase-root': {
+        borderLeft: '1px solid #ddd',
+        borderRadius: '0',
+        borderRight: '1px solid #ddd',
+      },
+    },
+    copyButton: {
+      width: '32px',
+      height: '32px',
+      padding: '8px',
+    },
+    tooltipInfo: {
+      fontSize: '12px',
+    },
+    gridContainer: {
+      width: '100%',
+      display: 'grid',
+      columnGap: '20px',
+      gridTemplateColumns: 'repeat(5, 0.75fr) 1fr',
+    },
+  },
+  { index: 1 },
+)
+
+const SnapshotListItem = ({
+  snapshot,
+  setSnapshotModal,
+  openClonesModal,
+}: {
+  snapshot: Snapshot
+  openClonesModal: () => void
+  setSnapshotModal: (modal: { isOpen: boolean; snapshotId: string }) => void
+}) => {
+  const classes = useStyles()
+  const timeAgo = formatDistanceSafe(snapshot.createdAtDate)
+
+  const history = useHistory()
+  const host = useHost()
+
+  return (
+    <div className={classes.commitItem}>
+      <div className={classes.gridContainer}>
+        <div className={classes.infoBlock}>
+          <div className={classes.header}>{snapshot.message || '-'}</div>
+          <div className={classes.infoContent} title={snapshot.dataStateAt}>
+            {timeAgo}
+          </div>
+        </div>
+        <div className={classes.infoBlock}>
+          <div className={classes.header}>Pool</div>
+          <div className={classes.infoContent}>{snapshot.pool ?? '-'}</div>
+        </div>
+        <div className={classes.infoBlock}>
+          <div className={classes.header}>Number of clones</div>
+          <div className={classes.infoContent}>{snapshot.numClones ?? '-'}</div>
+        </div>
+        <div className={classes.infoBlock}>
+          <div className={classes.header}>Logical Size</div>
+          <div className={classes.infoContent}>
+            {snapshot.logicalSize ? formatBytesIEC(snapshot.logicalSize) : '-'}
+          </div>
+        </div>
+        <div className={classes.infoBlock}>
+          <div className={classes.header}>Physical Size</div>
+          <div className={classes.infoContent}>
+            {snapshot.physicalSize
+              ? formatBytesIEC(snapshot.physicalSize)
+              : '-'}
+          </div>
+        </div>
+        <div
+          className={classes.actionsContainer}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <div className={classes.snapshotId}>{snapshot.id}</div>
+          <div className={classes.copyButtonContainer} title="Copy snapshot ID">
+            <IconButton
+              className={classes.copyButton}
+              onClick={(e) => {
+                e.stopPropagation()
+                copy(snapshot.id)
+              }}
+            >
+              {icons.copyIcon}
+            </IconButton>
+          </div>
+          <div className={classes.rowMenuContainer} title="Actions">
+            <RowMenu
+              actions={[
+                {
+                  name: 'Show related clones',
+                  onClick: () => openClonesModal(),
+                },
+                {
+                  name: 'Create new clone',
+                  onClick: () => history.push(host.routes.createClone()),
+                },
+                {
+                  name: 'Delete snapshot',
+                  onClick: () =>
+                    setSnapshotModal({
+                      isOpen: true,
+                      snapshotId: snapshot.id,
+                    }),
+                }
+              ]}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export const SnapshotsList = observer(
+  ({
+    routes,
+    filteredSnapshots,
+    instanceId,
+  }: {
+    routes: {
+      snapshot: (snapshotId: string) => string
+    }
+    filteredSnapshots: Snapshot[]
+    instanceId: string
+  }) => {
+    const classes = useStyles()
+    const stores = useStores()
+    const history = useHistory()
+    const groupedSnapshots = groupSnapshotsByCreatedAtDate(filteredSnapshots)
+
+    const [snapshotModal, setSnapshotModal] = React.useState({
+      isOpen: false,
+      snapshotId: '',
+    })
+
+    return (
+      <HorizontalScrollContainer>
+        {groupedSnapshots.map((group, index) => {
+          const groupDateFormatted = format(
+            group[0].createdAtDate,
+            'MMM dd, yyyy',
+          )
+
+          return (
+            <div key={index}>
+              <div className={classes.dateGroup}>{groupDateFormatted}</div>
+              {group.map((snapshot) => {
+                const snapshotPageId = generateSnapshotPageId(snapshot.id)
+                return (
+                  <div
+                    key={snapshot.id}
+                    className={classes.pointerCursor}
+                    onClick={() =>
+                      snapshotPageId &&
+                      history.push(routes.snapshot(snapshotPageId))
+                    }
+                  >
+                    <SnapshotListItem
+                      snapshot={snapshot}
+                      setSnapshotModal={setSnapshotModal}
+                      openClonesModal={() =>
+                        stores.clonesModal.openModal({
+                          snapshotId: snapshot.id,
+                        })
+                      }
+                    />
+                  </div>
+                )
+              })}
+            </div>
+          )
+        })}
+        {snapshotModal.isOpen && snapshotModal.snapshotId && (
+          <DestroySnapshotModal
+            isOpen={snapshotModal.isOpen}
+            onClose={() => setSnapshotModal({ isOpen: false, snapshotId: '' })}
+            snapshotId={snapshotModal.snapshotId}
+            instanceId={instanceId}
+            afterSubmitClick={() => stores.main.load(instanceId)}
+            destroySnapshot={stores.main.destroySnapshot as DestroySnapshot}
+          />
+        )}
+      </HorizontalScrollContainer>
+    )
+  },
+)

package/pages/Instance/Snapshots/components/SnapshotsModal/utils.ts

@@ -0,0 +1,17 @@
+/*--------------------------------------------------------------------------
+ * 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 { formatUTC } from '@postgres.ai/shared/utils/date'
+
+export const getTags = ({ date, pool }: { date: Date | null, pool: string | null }) => {
+  const tags = []
+
+  if (date) tags.push({ name: 'Date', value: `${formatUTC(date, 'yyyy-MM-dd')} UTC` })
+  if (pool) tags.push({ name: 'Disk', value: pool })
+
+  return tags
+}

package/pages/Instance/Snapshots/components/SnapshotsTable/index.tsx

@@ -0,0 +1,231 @@
+/*--------------------------------------------------------------------------
+ * 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 cn from 'classnames'
+import { observer } from 'mobx-react-lite'
+import { makeStyles } from '@material-ui/core'
+import copy from 'copy-to-clipboard'
+import { useHistory } from 'react-router-dom'
+
+import { HorizontalScrollContainer } from '@postgres.ai/shared/components/HorizontalScrollContainer'
+import { generateSnapshotPageId } from '@postgres.ai/shared/pages/Instance/Snapshots/utils'
+import { DestroySnapshotModal } from '@postgres.ai/shared/pages/Snapshots/Snapshot/DestorySnapshotModal'
+import { useStores } from '@postgres.ai/shared/pages/Instance/context'
+import { ArrowDropDownIcon } from '@postgres.ai/shared/icons/ArrowDropDown'
+import { formatBytesIEC } from '@postgres.ai/shared/utils/units'
+import { isSameDayUTC, formatDateWithDistance } from '@postgres.ai/shared/utils/date'
+import {
+  Table,
+  TableHead,
+  TableRow,
+  TableBody,
+  TableHeaderCell,
+  TableBodyCell,
+  TableBodyCellMenu,
+} from '@postgres.ai/shared/components/Table'
+import { DestroySnapshot } from '@postgres.ai/shared/types/api/endpoints/destroySnapshot'
+
+const useStyles = makeStyles(
+  {
+    cellContentCentered: {
+      display: 'flex',
+      alignItems: 'center',
+    },
+    pointerCursor: {
+      cursor: 'pointer',
+    },
+    sortIcon: {
+      marginLeft: '8px',
+      width: '10px',
+      cursor: 'pointer',
+      transition: 'transform 0.15s ease-in-out',
+    },
+
+    sortIconUp: {
+      transform: 'rotate(180deg)',
+    },
+
+    hideSortIcon: {
+      opacity: 0,
+    },
+
+    verticalCentered: {
+      display: 'flex',
+      alignItems: 'center',
+    },
+  },
+  { index: 1 },
+)
+
+interface SnapshotsTableProps {
+  instanceId: string
+}
+
+export const SnapshotsTable: React.FC<SnapshotsTableProps> = observer(
+  ({ instanceId }) => {
+    const history = useHistory()
+    const classes = useStyles()
+    const stores = useStores()
+    const { snapshots } = stores.main
+
+    const [snapshotModal, setSnapshotModal] = React.useState({
+      isOpen: false,
+      snapshotId: '',
+    })
+
+    const filteredSnapshots = snapshots?.data?.filter((snapshot) => {
+      const isMatchedByDate =
+        !stores.snapshotsModal.date ||
+        isSameDayUTC(snapshot.dataStateAtDate, stores.snapshotsModal.date)
+
+      const isMatchedByPool =
+        !stores.snapshotsModal.pool ||
+        snapshot.pool === stores.snapshotsModal.pool
+
+      return isMatchedByDate && isMatchedByPool
+    })
+
+    const [state, setState] = React.useState({
+      sortByCreatedDate: 'desc',
+      snapshots: filteredSnapshots ?? [],
+    })
+
+    const handleSortByCreatedDate = () => {
+      const sortByCreatedDate =
+        state.sortByCreatedDate === 'desc' ? 'asc' : 'desc'
+
+      const sortedSnapshots = [...state.snapshots].sort((a, b) => {
+        if (sortByCreatedDate === '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,
+        sortByCreatedDate,
+        snapshots: sortedSnapshots,
+      })
+    }
+
+    if (!snapshots.data) return null
+
+    return (
+      <HorizontalScrollContainer>
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableHeaderCell />
+              <TableHeaderCell>Data state time</TableHeaderCell>
+              <TableHeaderCell>
+                <div
+                  className={cn(
+                    classes.pointerCursor,
+                    classes.verticalCentered,
+                  )}
+                  onClick={handleSortByCreatedDate}
+                >
+                  Created
+                  <ArrowDropDownIcon
+                    className={cn(
+                      state.sortByCreatedDate === 'asc' && classes.sortIconUp,
+                      classes.sortIcon,
+                    )}
+                  />
+                </div>
+              </TableHeaderCell>
+              <TableHeaderCell>Pool</TableHeaderCell>
+              <TableHeaderCell>Number of clones</TableHeaderCell>
+              <TableHeaderCell>Logical Size</TableHeaderCell>
+              <TableHeaderCell>Physical Size</TableHeaderCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {state.snapshots?.map((snapshot) => {
+              const snapshotPageId = generateSnapshotPageId(snapshot.id)
+              return (
+                <TableRow
+                  key={snapshot.id}
+                  hover
+                  onClick={() =>
+                    snapshotPageId &&
+                    history.push(`/instance/snapshots/${snapshotPageId}`)
+                  }
+                  className={classes.pointerCursor}
+                >
+                  <TableBodyCellMenu
+                    actions={[
+                      {
+                        name: 'Copy snapshot ID',
+                        onClick: () => copy(snapshot.id),
+                      },
+                      {
+                        name: 'Show related clones',
+                        onClick: () =>
+                          stores.clonesModal.openModal({
+                            snapshotId: snapshot.id,
+                          }),
+                      },
+                      {
+                        name: 'Delete snapshot',
+                        onClick: () =>
+                          setSnapshotModal({
+                            isOpen: true,
+                            snapshotId: snapshot.id,
+                          }),
+                      },
+                    ]}
+                  />
+                  <TableBodyCell>
+                    {formatDateWithDistance(snapshot.dataStateAt, snapshot.dataStateAtDate)}
+                  </TableBodyCell>
+                  <TableBodyCell>
+                    {formatDateWithDistance(snapshot.createdAt, snapshot.createdAtDate)}
+                  </TableBodyCell>
+                  <TableBodyCell>{snapshot.pool ?? '-'}</TableBodyCell>
+                  <TableBodyCell>{snapshot.numClones ?? '-'}</TableBodyCell>
+                  <TableBodyCell>
+                    {snapshot.logicalSize
+                      ? formatBytesIEC(snapshot.logicalSize)
+                      : '-'}
+                  </TableBodyCell>
+                  <TableBodyCell>
+                    {snapshot.physicalSize
+                      ? formatBytesIEC(snapshot.physicalSize)
+                      : '-'}
+                  </TableBodyCell>
+                </TableRow>
+              )
+            })}
+          </TableBody>
+          {snapshotModal.isOpen && snapshotModal.snapshotId && (
+            <DestroySnapshotModal
+              isOpen={snapshotModal.isOpen}
+              onClose={() =>
+                setSnapshotModal({ isOpen: false, snapshotId: '' })
+              }
+              snapshotId={snapshotModal.snapshotId}
+              instanceId={instanceId}
+              afterSubmitClick={() =>
+                stores.main?.reload(stores.main.instance?.id ?? '')
+              }
+              destroySnapshot={stores.main.destroySnapshot as DestroySnapshot}
+            />
+          )}
+        </Table>
+      </HorizontalScrollContainer>
+    )
+  },
+)

package/pages/Instance/Snapshots/index.tsx

@@ -0,0 +1,171 @@
+/*--------------------------------------------------------------------------
+ * 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 { useHistory } from 'react-router'
+import { observer } from 'mobx-react-lite'
+import { makeStyles } from '@material-ui/core'
+
+import { useStores, useHost } from '@postgres.ai/shared/pages/Instance/context'
+import { SnapshotsList } from '@postgres.ai/shared/pages/Instance/Snapshots/components/SnapshotsList'
+import { SectionTitle } from '@postgres.ai/shared/components/SectionTitle'
+import { Spinner } from '@postgres.ai/shared/components/Spinner'
+import { ErrorStub } from '@postgres.ai/shared/components/ErrorStub'
+import { Button } from '@postgres.ai/shared/components/Button2'
+import { Tooltip } from '@postgres.ai/shared/components/Tooltip'
+import { InfoIcon } from '@postgres.ai/shared/icons/Info'
+import { useEffect, useMemo, useState } from 'react'
+import { Branch } from '@postgres.ai/shared/types/api/endpoints/getBranches'
+import { SnapshotHeader } from './components/SnapshotHeader'
+
+const useStyles = makeStyles(
+  {
+    sectionTitle: {
+      borderBottom: 0,
+    },
+    marginTop: {
+      marginTop: '16px',
+    },
+    infoIcon: {
+      height: '12px',
+      width: '12px',
+      marginLeft: '8px',
+      color: '#808080',
+    },
+    spinner: {
+      position: 'absolute',
+      right: '50%',
+      transform: 'translate(-50%, -50%)',
+    },
+  },
+  { index: 1 },
+)
+
+interface SnapshotsProps {
+  instanceId: string
+}
+
+export const Snapshots: React.FC<SnapshotsProps> = observer(
+  ({ instanceId }) => {
+    const host = useHost()
+    const stores = useStores()
+    const classes = useStyles()
+    const history = useHistory()
+    const { getBranches, instance, snapshots } = stores.main
+    const [messageFilter, setMessageFilter] = useState('')
+    const [branches, setBranches] = useState<string[] | null>(null)
+    const [selectedBranch, setSelectedBranch] = useState<string>('All branches')
+    const [isLoadingBranches, setIsLoadingBranches] = useState(true)
+
+    const filteredSnapshots = useMemo(() => {
+      if (!snapshots.data) return []
+
+      if (!messageFilter.trim()) {
+        return snapshots.data
+      }
+
+      return snapshots.data.filter((snapshot) =>
+        snapshot?.message?.toLowerCase()?.includes(messageFilter.toLowerCase()),
+      )
+    }, [snapshots.data, messageFilter])
+
+    const clonesList = instance?.state?.cloning.clones || []
+    const isEmpty = !filteredSnapshots?.length
+    const hasClones = Boolean(clonesList?.length)
+    const goToSnapshotAddPage = () => history.push(host.routes.createSnapshot())
+    const snapshotPagePath = (snapshotId: string) =>
+      host.routes.snapshot(snapshotId)
+
+    useEffect(() => {
+      const fetchInitialData = async () => {
+        try {
+          setIsLoadingBranches(true)
+          const branches = await getBranches(instanceId)
+          const branchNames = branches?.map(({ name }: Branch) => name) ?? []
+          setBranches(['All branches', ...branchNames])
+        } catch (error) {
+          console.error('Error fetching initial data:', error)
+        } finally {
+          setIsLoadingBranches(false)
+        }
+      }
+
+      fetchInitialData()
+    }, [])
+
+    useEffect(() => {
+      if (selectedBranch) {
+        stores.main.reloadSnapshots(
+          selectedBranch === 'All branches' ? '' : selectedBranch,
+        )
+      }
+    }, [selectedBranch])
+
+    if (!instance && !snapshots.isLoading) return <></>
+
+    if (snapshots?.error) return <ErrorStub message={snapshots?.error} />
+
+    return (
+      <div className={classes.marginTop}>
+        {snapshots.isLoading || isLoadingBranches ? (
+          <Spinner size="lg" className={classes.spinner} />
+        ) : (
+          <>
+            <SectionTitle
+              level={2}
+              tag="h2"
+              text={`Snapshots (${filteredSnapshots?.length || 0})`}
+              className={classes.sectionTitle}
+              rightContent={
+                <>
+                  <Button
+                    theme="primary"
+                    onClick={goToSnapshotAddPage}
+                    isDisabled={!hasClones}
+                  >
+                    Create snapshot
+                  </Button>
+
+                  {!hasClones && (
+                    <Tooltip content="No clones">
+                      <div style={{ display: 'flex' }}>
+                        <InfoIcon className={classes.infoIcon} />
+                      </div>
+                    </Tooltip>
+                  )}
+                </>
+              }
+            />
+            <SnapshotHeader
+              branches={branches}
+              selectedBranch={selectedBranch}
+              setMessageFilter={setMessageFilter}
+              setSelectedBranch={setSelectedBranch}
+            />
+            {!isEmpty ? (
+              <SnapshotsList
+                routes={{ snapshot: snapshotPagePath }}
+                instanceId={instanceId}
+                filteredSnapshots={filteredSnapshots}
+              />
+            ) : (
+              <p className={classes.marginTop}>
+                {messageFilter.length || selectedBranch ? (
+                  <span>
+                    No active snapshots found. Try removing the filter and
+                    checking again
+                  </span>
+                ) : (
+                  <span> This instance has no active snapshots</span>
+                )}
+              </p>
+            )}
+          </>
+        )}
+      </div>
+    )
+  },
+)