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

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

@@ -1,285 +0,0 @@
-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

@@ -1,17 +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 { 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

@@ -1,231 +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 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

@@ -1,171 +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 { 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>
-    )
-  },
-)