@postgres.ai/shared 3.5.1-pr-1027.0

package/pages/Instance/Info/index.tsx

@@ -0,0 +1,129 @@
+/*--------------------------------------------------------------------------
+ * 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 { useState } from 'react'
+import { makeStyles } from '@material-ui/core'
+
+import { Button } from '@postgres.ai/shared/components/MenuButton'
+import { useWindowDimensions } from '@postgres.ai/shared/hooks/useWindowDimensions'
+import { ArrowLeft, ArrowRight } from '@postgres.ai/shared/pages/Instance/Info/Icons'
+
+import { Status } from './Status'
+import { Retrieval } from './Retrieval'
+import { Connection } from './Connection'
+import { Disks } from './Disks'
+import { Snapshots } from './Snapshots'
+
+const SIDEBAR_COLLAPSED_PARAM = 'overviewSidebarCollapsed'
+const SMALL_BREAKPOINT_PX = 937
+
+const useStyles = makeStyles(
+  (theme) => ({
+    container: {
+      minHeight: 0,
+      minWidth: 0,
+      width: '437px',
+      transition: 'width 0.2s ease-out',
+
+      [theme.breakpoints.down('sm')]: {
+        width: '100%',
+      },
+    },
+    root: {
+      flex: '0 0 auto',
+
+      [theme.breakpoints.down('md')]: {
+        width: '300px',
+      },
+
+      [theme.breakpoints.down('sm')]: {
+        flex: '0 0 auto',
+        width: '100%',
+        marginTop: '20px',
+      },
+    },
+    collapsed: {
+      height: '100%',
+      width: '64px',
+    },
+    collapseBtn: {
+      background: '#f9f9f9 !important',
+      margin: '20px 0 10px 0',
+      fontWeight: 500,
+
+      '& svg': {
+        marginRight: '5px',
+      },
+
+      '&:hover': {
+        background: '#f1f1f1',
+      },
+    },
+    arrowImage: {
+      width: '16px',
+      height: '16px',
+
+      '& path': {
+        fill: '#000',
+      },
+    },
+  }),
+  { index: 1 },
+)
+
+export const Info = () => {
+  const classes = useStyles()
+  const width = useWindowDimensions()
+  const isMobileScreen = width <= SMALL_BREAKPOINT_PX
+
+  const [isCollapsed, setIsCollapsed] = useState(
+    () =>
+      localStorage.getItem(SIDEBAR_COLLAPSED_PARAM) === '1' && !isMobileScreen,
+  )
+
+  const handleClick = () => {
+    setIsCollapsed(!isCollapsed)
+    localStorage.setItem(SIDEBAR_COLLAPSED_PARAM, isCollapsed ? '0' : '1')
+  }
+
+  return (
+    <div
+      className={cn(
+        classes.container,
+        !isCollapsed ? classes.root : classes.collapsed,
+      )}
+    >
+      {!isMobileScreen && (
+        <Button
+          className={classes.collapseBtn}
+          onClick={handleClick}
+          isCollapsed={isCollapsed}
+          icon={
+            isCollapsed ? (
+              <ArrowLeft className={classes.arrowImage} />
+            ) : (
+              <ArrowRight className={classes.arrowImage} />
+            )
+          }
+        >
+          Collapse
+        </Button>
+      )}
+
+      {!isCollapsed && (
+        <div>
+          <Status />
+          <Retrieval />
+          <Connection />
+          <Disks />
+          <Snapshots />
+        </div>
+      )}
+    </div>
+  )
+}

package/pages/Instance/SnapshotsModal/index.tsx

@@ -0,0 +1,169 @@
+/*--------------------------------------------------------------------------
+ * 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 } from '@material-ui/core'
+import { formatDistanceToNowStrict } from 'date-fns'
+import copy from 'copy-to-clipboard'
+
+import { useStores } from '@postgres.ai/shared/pages/Instance/context'
+import { ArrowDropDownIcon } from '@postgres.ai/shared/icons/ArrowDropDown'
+import { Modal as ModalBase } from '@postgres.ai/shared/components/Modal'
+import { HorizontalScrollContainer } from '@postgres.ai/shared/components/HorizontalScrollContainer'
+import {
+  Table,
+  TableHead,
+  TableRow,
+  TableBody,
+  TableHeaderCell,
+  TableBodyCell,
+  TableBodyCellMenu,
+} from '@postgres.ai/shared/components/Table'
+import { formatBytesIEC } from '@postgres.ai/shared/utils/units'
+import { isSameDayUTC } from '@postgres.ai/shared/utils/date'
+
+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: {
+      fontSize: '14px',
+      marginTop: 0,
+      display: 'block',
+    },
+    container: {
+      maxHeight: '400px',
+    },
+    cellContentCentered: {
+      display: 'flex',
+      alignItems: 'center',
+    },
+    sortIcon: {
+      marginLeft: '8px',
+      width: '10px',
+    },
+    emptyStub: {
+      marginTop: '16px',
+    },
+  },
+  { index: 1 },
+)
+
+export const SnapshotsModal = observer(() => {
+  const classes = useStyles()
+  const stores = useStores()
+
+  const { snapshots } = stores.main
+  if (!snapshots.data) return null
+
+  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 isEmpty = !filteredSnapshots.length
+
+  return (
+    <ModalBase
+      isOpen={stores.snapshotsModal.isOpenModal}
+      onClose={stores.snapshotsModal.closeModal}
+      title={`Snapshots (${filteredSnapshots.length})`}
+      classes={{ content: classes.root }}
+      size="md"
+      titleRightContent={
+        <ModalReloadButton
+          isReloading={stores.main.snapshots.isLoading}
+          onReload={stores.main.reloadSnapshots}
+        />
+      }
+      headerContent={
+        <Tags
+          data={getTags({
+            date: stores.snapshotsModal.date,
+            pool: stores.snapshotsModal.pool,
+          })}
+        />
+      }
+    >
+      {isEmpty && <p className={classes.emptyStub}>No snapshots found</p>}
+
+      {!isEmpty && (
+        <HorizontalScrollContainer classes={{ content: classes.container }}>
+          <Table>
+            <TableHead>
+              <TableRow>
+                <TableHeaderCell />
+                <TableHeaderCell>Data state time</TableHeaderCell>
+                <TableHeaderCell>
+                  <div className={classes.cellContentCentered}>
+                    Created
+                    <ArrowDropDownIcon className={classes.sortIcon} />
+                  </div>
+                </TableHeaderCell>
+                <TableHeaderCell>Disk</TableHeaderCell>
+                <TableHeaderCell>Size</TableHeaderCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {filteredSnapshots.map((snapshot) => {
+                return (
+                  <TableRow key={snapshot.id}>
+                    <TableBodyCellMenu
+                      actions={[
+                        {
+                          name: 'Copy snapshot ID',
+                          onClick: () => copy(snapshot.id),
+                        },
+                        {
+                          name: 'Show related clones',
+                          onClick: () =>
+                            stores.clonesModal.openModal({
+                              snapshotId: snapshot.id,
+                            }),
+                        },
+                      ]}
+                    />
+                    <TableBodyCell>
+                      {snapshot.dataStateAt} (
+                      {formatDistanceToNowStrict(snapshot.dataStateAtDate, {
+                        addSuffix: true,
+                      })}
+                      )
+                    </TableBodyCell>
+                    <TableBodyCell>
+                      {snapshot.createdAt} (
+                      {formatDistanceToNowStrict(snapshot.createdAtDate, {
+                        addSuffix: true,
+                      })}
+                      )
+                    </TableBodyCell>
+                    <TableBodyCell>{snapshot.pool ?? '-'}</TableBodyCell>
+                    <TableBodyCell>
+                      {snapshot.physicalSize
+                        ? formatBytesIEC(snapshot.physicalSize)
+                        : '-'}
+                    </TableBodyCell>
+                  </TableRow>
+                )
+              })}
+            </TableBody>
+          </Table>
+        </HorizontalScrollContainer>
+      )}
+    </ModalBase>
+  )
+})

package/pages/Instance/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/Tabs/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 React from 'react'
+import {
+  makeStyles,
+  Tab as TabComponent,
+  Tabs as TabsComponent,
+} from '@material-ui/core'
+import { colors } from '@postgres.ai/shared/styles/colors'
+
+const useStyles = makeStyles(
+  {
+    tabsRoot: {
+      minHeight: 0,
+      marginTop: '-8px',
+    },
+    tabsIndicator: {
+      height: '3px',
+    },
+    tabRoot: {
+      fontWeight: 400,
+      minWidth: 0,
+      minHeight: 0,
+      padding: '6px 16px',
+      borderBottom: `3px solid ${colors.consoleStroke}`,
+
+      '& + $tabRoot': {
+        marginLeft: '10px',
+      },
+
+      '&.Mui-disabled': {
+        opacity: 1,
+        color: colors.pgaiDarkGray,
+      },
+    },
+    tabHidden: {
+      display: 'none',
+    },
+  },
+  { index: 1 },
+)
+
+type Props = {
+  value: number
+  handleChange: (event: React.ChangeEvent<{}>, newValue: number) => void
+  hasLogs: boolean
+  isPlatform?: boolean
+}
+
+export const Tabs = (props: Props) => {
+  const classes = useStyles()
+
+  const { value, handleChange, hasLogs } = props
+
+  return (
+    <TabsComponent
+      value={value}
+      onChange={handleChange}
+      classes={{ root: classes.tabsRoot, indicator: classes.tabsIndicator }}
+    >
+      <TabComponent
+        label="Overview"
+        classes={{
+          root: classes.tabRoot,
+        }}
+        value={0}
+      />
+      <TabComponent
+        label="Logs"
+        disabled={!hasLogs}
+        classes={{
+          root: props.isPlatform ? classes.tabHidden : classes.tabRoot,
+        }}
+        value={1}
+      />
+      <TabComponent
+        label="Configuration"
+        classes={{
+          root: props.isPlatform ? classes.tabHidden : classes.tabRoot,
+        }}
+        value={2}
+      />
+      {/* // TODO(Anton): Probably will be later. */}
+      {/* <TabComponent
+        label='Snapshots'
+        disabled
+        classes={{
+          root: classes.tabRoot
+        }}
+      /> */}
+    </TabsComponent>
+  )
+}

package/pages/Instance/components/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 Postgres 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 Postgres using psql. Change DBNAME
+                    to&nbsp; name of the database you want to connect. Use
+                    PGPASSWORD&nbsp; environment variable to set database
+                    password or type&nbsp; it when prompted.
+                  </>
+                }
+              >
+                <span className={classes.fieldInfo}>{icons.infoIcon}</span>
+              </Tooltip>
+            </div>
+          </div>
+        )}
+
+        {jdbcConnectionStr && (
+          <div className={classes.item}>
+            <p className={classes.fieldText}>Connect to Postgres 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 Postgres using JDBC. Change DBNAME
+                    to&nbsp; name of the database you want to connect, change
+                    DBPASSWORD&nbsp; to the password you’ve used on clone
+                    creation.
+                  </>
+                }
+              >
+                <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/components/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: 'Destroy 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>
+  )
+})