@postgres.ai/shared 3.5.1-pr-1027.0 → 4.0.0-pr-1028

package/pages/Instance/ClonesModal/index.tsx

@@ -1,71 +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 { 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/components/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/InactiveInstance/index.tsx

@@ -1,165 +0,0 @@
-import { Tooltip } from '@material-ui/core'
-import { makeStyles } from '@material-ui/core'
-import { formatDistanceToNowStrict } from 'date-fns'
-
-import { Link } from '@postgres.ai/shared/components/Link2'
-import { Instance } from '@postgres.ai/shared/types/api/entities/instance'
-
-import { formatTimestampUtc } from './utils'
-
-const useStyles = makeStyles(
-  {
-    container: {
-      maxWidth: '650px',
-      width: '100%',
-    },
-    timeLabel: {
-      lineHeight: '16px',
-      fontSize: 14,
-      cursor: 'pointer',
-      flex: '2 1 0',
-
-      '& span': {
-        fontWeight: 'normal !important',
-      },
-    },
-    toolTip: {
-      fontSize: '10px !important',
-      maxWidth: '100%',
-    },
-    content: {
-      margin: '25px 0',
-    },
-    flexContainer: {
-      display: 'flex',
-      alignItems: 'center',
-      flexDirection: 'row',
-      padding: '10px 0',
-      borderBottom: '1px solid rgba(224, 224, 224, 1)',
-
-      '& span:first-child': {
-        flex: '1 1 0',
-        fontWeight: '500',
-      },
-
-      '& span': {
-        flex: '2 1 0',
-        margin: '0',
-      },
-    },
-  },
-  { index: 1 },
-)
-
-export const InactiveInstance = ({
-  org,
-  instance,
-}: {
-  org: string
-  instance: Instance | null
-}) => {
-  const classes = useStyles()
-
-  const getVersionDigits = (str: string | undefined | null) => {
-    if (!str) {
-      return 'N/A'
-    }
-
-    const digits = str.match(/\d+/g)
-
-    if (digits && digits.length > 0) {
-      return `${digits[0]}.${digits[1]}.${digits[2]}`
-    }
-    return ''
-  }
-
-  return (
-    <div className={classes.container}>
-      <div className={classes.flexContainer}>
-        <span>Plan</span>
-        <span>{instance?.dto.plan || '---'}</span>
-      </div>
-      <div className={classes.flexContainer}>
-        <span>Version</span>
-        <span>
-          {getVersionDigits(
-            instance?.state && (instance?.state?.engine?.version as string),
-          )}
-        </span>
-      </div>
-      <div className={classes.flexContainer}>
-        <span>Registered</span>
-        <span className={classes.timeLabel}>
-          <Tooltip
-            title={formatTimestampUtc(instance?.createdAt) ?? ''}
-            classes={{ tooltip: classes.toolTip }}
-          >
-            <span>
-              {instance?.createdAt &&
-                formatDistanceToNowStrict(new Date(instance?.createdAt), {
-                  addSuffix: true,
-                })}
-            </span>
-          </Tooltip>
-        </span>
-      </div>
-      {instance?.telemetryLastReportedAt && (
-        <div className={classes.flexContainer}>
-          <span>Telemetry last reported</span>
-          <span className={classes.timeLabel}>
-            <Tooltip
-              title={
-                formatTimestampUtc(instance?.telemetryLastReportedAt) ?? ''
-              }
-              classes={{ tooltip: classes.toolTip }}
-            >
-              <span>
-                {formatDistanceToNowStrict(
-                  new Date(instance?.telemetryLastReportedAt),
-                  {
-                    addSuffix: true,
-                  },
-                )}
-              </span>
-            </Tooltip>
-          </span>
-        </div>
-      )}
-      <div className={classes.flexContainer}>
-        <span>Instance ID</span>
-        <span>
-          <span
-            style={{
-              fontWeight: 'normal',
-            }}
-          >
-            <Link to={`/${org}/instances/${instance?.id}`}>{instance?.id}</Link>
-            &nbsp; (self-assigned:{' '}
-            {instance?.dto?.selfassigned_instance_id || 'N/A'})
-          </span>
-        </span>
-      </div>
-      {instance?.dto.plan !== 'CE' && (
-        <div className={classes.flexContainer}>
-          <span>Billing data</span>
-          <span>
-            <Link to={`/${org}/billing`}>Billing data</Link>
-          </span>
-        </div>
-      )}
-      <p className={classes.content}>
-        To work with this instance, access its UI or API directly. Full
-        integration of UI to the Platform is currently available only to the EE
-        users. If you have any questions, reach out to{' '}
-        <a
-          href="https://postgres.ai/contact"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          the Postgres.ai team
-        </a>
-        .
-      </p>
-    </div>
-  )
-}

package/pages/Instance/InactiveInstance/utils.ts

@@ -1,9 +0,0 @@
-import moment from 'moment'
-
-export const formatTimestampUtc = (timestamp: moment.MomentInput) => {
-  if (!timestamp) {
-    return null
-  }
-
-  return moment(timestamp).utc().format('YYYY-MM-DD HH:mm:ss UTC')
-}

package/pages/Instance/Info/Connection/ConnectModal/Content/index.tsx

@@ -1,176 +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 { makeStyles, IconButton } from '@material-ui/core'
-import { observer } from 'mobx-react-lite'
-import copy from 'copy-to-clipboard'
-
-import { GatewayLink } from '@postgres.ai/shared/components/GatewayLink'
-import { icons } from '@postgres.ai/shared/styles/icons'
-import { Link } from '@postgres.ai/shared/components/Link2'
-import { TextField } from '@postgres.ai/shared/components/TextField'
-import { Tooltip } from '@postgres.ai/shared/components/Tooltip'
-import { useStores } from '@postgres.ai/shared/pages/Instance/context'
-
-import { getCliInitCommand, getSshPortForwardingCommand } from './utils'
-
-const useStyles = makeStyles(
-  {
-    root: {
-      fontSize: '14px',
-    },
-    list: {
-      listStyle: 'decimal inside none',
-      margin: 0,
-      padding: 0,
-    },
-    item: {
-      '& + $item': {
-        marginTop: '16px',
-      },
-    },
-    textField: {
-      width: 'calc(100% - 24px)',
-      margin: '16px 0 0 0',
-    },
-    textFieldWrapper: {
-      display: 'flex',
-      alignItems: 'flex-end',
-    },
-    textFieldInfo: {
-      display: 'flex',
-      alignItems: 'center',
-      height: '32px',
-      marginLeft: '12px',
-    },
-    copyButton: {
-      width: '32px',
-      height: '32px',
-      padding: '8px',
-    },
-    note: {
-      margin: '24px 0 0 0',
-    },
-  },
-  { index: 1 },
-)
-
-export const Content = observer(() => {
-  const classes = useStyles()
-  const stores = useStores()
-
-  const { instance } = stores.main
-  if (!instance) return null
-
-  const cliInitCommand = getCliInitCommand(instance)
-  const sshPortForwardingCommand = getSshPortForwardingCommand(instance)
-  const dblabStatusCommand = 'dblab instance status'
-
-  return (
-    <div className={classes.root}>
-      <ol className={classes.list}>
-        <li className={classes.item}>
-          Generate a personal token on&nbsp;
-          <Link
-            to={
-              // ROUTES.ORG.TOKENS.createPath({ org: context.org })
-              '/'
-            }
-          >
-            Access token page
-          </Link>
-          .
-        </li>
-
-        <li className={classes.item}>
-          Use personal token to initialize a connection to the Database Lab
-          instance:
-          <div className={classes.textFieldWrapper}>
-            <TextField
-              label="CLI init command"
-              value={cliInitCommand}
-              className={classes.textField}
-              InputProps={{
-                endAdornment: (
-                  <IconButton
-                    className={classes.copyButton}
-                    onClick={() => copy(cliInitCommand)}
-                  >
-                    {icons.copyIcon}
-                  </IconButton>
-                ),
-              }}
-            />
-            <Tooltip
-              content={
-                <>
-                  Use this oneliner to initialize Database Lab CLI on your
-                  machine.
-                  <br />
-                  All UPPERCASED variables (if any) are to be substituted
-                  <br />
-                  by real values.
-                </>
-              }
-            >
-              <span className={classes.textFieldInfo}>{icons.infoIcon}</span>
-            </Tooltip>
-          </div>
-        </li>
-
-        {sshPortForwardingCommand && (
-          <li className={classes.item}>
-            In a separate console, set up SSH port forwarding (and keep it
-            running):
-            <TextField
-              label="SSH port forwarding"
-              value={sshPortForwardingCommand}
-              className={classes.textField}
-              InputProps={{
-                endAdornment: (
-                  <IconButton
-                    className={classes.copyButton}
-                    onClick={() => copy(sshPortForwardingCommand)}
-                  >
-                    {icons.copyIcon}
-                  </IconButton>
-                ),
-              }}
-            />
-          </li>
-        )}
-
-        <li className={classes.item}>
-          Test it:
-          <TextField
-            label="CLI status command"
-            value={dblabStatusCommand}
-            className={classes.textField}
-            InputProps={{
-              endAdornment: (
-                <IconButton
-                  className={classes.copyButton}
-                  onClick={() => copy(dblabStatusCommand)}
-                >
-                  {icons.copyIcon}
-                </IconButton>
-              ),
-            }}
-          />
-        </li>
-      </ol>
-
-      <p className={classes.note}>
-        Read&nbsp;
-        <GatewayLink href="https://postgres.ai/docs/database-lab/cli-reference#getting-started">
-          the docs
-        </GatewayLink>
-        &nbsp;to get started with CLI.
-      </p>
-    </div>
-  )
-})

package/pages/Instance/Info/Connection/ConnectModal/Content/utils.ts

@@ -1,24 +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 { Instance } from '@postgres.ai/shared/types/api/entities/instance'
-
-export const getCliInitCommand = (instance: Instance) =>
-  `dblab init --url ${instance.url} --token TOKEN  --environment-id ${instance.projectName}`
-
-export const getSshPortForwardingCommand = (instance: Instance) => {
-  if (instance.sshServerUrl) {
-    // Parse the URL to get the port
-    const url = new URL(instance.url as string)
-    const port = url.port || '2345'
-    // Here we hard-code the API port on the server (2345)- this is a requirement now
-    // for all DBLab instances working via tunnel, per decision made (NIkolayS 2024-05-22)
-    return `ssh -NTML ${port}:localhost:2345 ${instance.sshServerUrl} -i ~/.ssh/id_rsa`
-  } else {
-    return null
-  }
-}

package/pages/Instance/Info/Connection/ConnectModal/index.tsx

@@ -1,36 +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 { useState } from 'react'
-
-import { Button } from '@postgres.ai/shared/components/Button2'
-import { Modal } from '@postgres.ai/shared/components/Modal'
-
-import { Content } from './Content'
-
-type Props = {
-  className?: string
-}
-
-export const ConnectModal = (props: Props) => {
-  const [isOpen, setIsOpen] = useState(false)
-
-  const handleClickOpen = () => setIsOpen(true)
-
-  const handleClose = () => setIsOpen(false)
-
-  return (
-    <>
-      <Button onClick={handleClickOpen} className={props.className}>
-        Connect
-      </Button>
-      <Modal isOpen={isOpen} onClose={handleClose} title="Connection info">
-        <Content />
-      </Modal>
-    </>
-  )
-}

package/pages/Instance/Info/Connection/index.tsx

@@ -1,81 +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 { makeStyles } from '@material-ui/styles'
-import { observer } from 'mobx-react-lite'
-
-import { useStores } from '@postgres.ai/shared/pages/Instance/context'
-import { ShieldIcon } from '@postgres.ai/shared/icons/Shield'
-import { WarningIcon } from '@postgres.ai/shared/icons/Warning'
-
-import { Section } from '../components/Section'
-import { Property } from '../components/Property'
-import { ValueStatus } from '../components/ValueStatus'
-
-import { ConnectModal } from './ConnectModal'
-
-const useStyles = makeStyles(
-  {
-    connectButton: {
-      marginTop: '10px',
-    },
-    url: {
-      overflowWrap: 'break-word',
-    },
-    icon: {
-      top: 0,
-      left: 0,
-      position: 'absolute',
-      height: '100%',
-      width: '100%',
-    },
-  },
-  { index: 1 },
-)
-
-const checkIsSecureUrl = (urlStr: string) => {
-  const url = new URL(urlStr)
-  return url.protocol === 'https:'
-}
-
-export const Connection = observer(() => {
-  const stores = useStores()
-  const classes = useStyles()
-
-  const { instance } = stores.main
-  if (!instance?.url) return null
-
-  const isSecureUrl = checkIsSecureUrl(instance.url) || instance.useTunnel
-
-  return (
-    <Section title="Connection">
-      <Property name="URL">
-        <span className={classes.url}>{instance.url}</span>
-        <br />
-        <ValueStatus
-          type={isSecureUrl ? 'ok' : 'warning'}
-          icon={
-            isSecureUrl ? (
-              <ShieldIcon className={classes.icon} />
-            ) : (
-              <WarningIcon className={classes.icon} />
-            )
-          }
-        >
-          The connection to Database Lab API is{' '}
-          {isSecureUrl ? 'secure' : 'not secure'}
-        </ValueStatus>
-      </Property>
-
-      <Property name="WS tunnels">
-        {instance.useTunnel ? 'used' : 'not used'}
-      </Property>
-
-      <ConnectModal className={classes.connectButton} />
-    </Section>
-  )
-})

package/pages/Instance/Info/Details/index.tsx

@@ -1,20 +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 { Section } from '../components/Section';
-import { Property } from '../components/Property';
-
-export const Details = () => {
-  return (
-    <Section title='Details'>
-      <Property name='Database docker image'>postgres:12</Property>
-      <Property name='Version'>0.4.4</Property>
-    </Section>
-  );
-};

package/pages/Instance/Info/Disks/Disk/ActionsMenu/index.tsx

@@ -1,100 +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, { useState } from 'react'
-import { IconButton, makeStyles, Menu, MenuItem } from '@material-ui/core'
-import { MoreVert } from '@material-ui/icons'
-import copy from 'copy-to-clipboard'
-
-import { colors } from '@postgres.ai/shared/styles/colors'
-import { useStores } from '@postgres.ai/shared/pages/Instance/context'
-
-type Props = {
-  poolId: string | null
-  poolName: string
-  isActive: boolean
-}
-
-const useStyles = makeStyles(
-  {
-    root: {
-      padding: '3px 1px',
-      border: `1px solid ${colors.consoleStroke}`,
-      borderRadius: '4px',
-    },
-  },
-  { index: 1 },
-)
-
-export const ActionsMenu = (props: Props) => {
-  const classes = useStyles()
-  const stores = useStores()
-
-  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null)
-
-  const isOpen = Boolean(anchorEl)
-
-  const openMenu = (e: React.MouseEvent<HTMLButtonElement>) => {
-    e.stopPropagation()
-    setAnchorEl(e.currentTarget)
-  }
-
-  const closeMenu = () => setAnchorEl(null)
-
-  return (
-    <>
-      <IconButton className={classes.root} onClick={openMenu}>
-        <MoreVert />
-      </IconButton>
-
-      <Menu
-        anchorOrigin={{
-          vertical: 'top',
-          horizontal: 'left',
-        }}
-        transformOrigin={{
-          vertical: 'top',
-          horizontal: 'left',
-        }}
-        anchorEl={anchorEl}
-        keepMounted
-        open={isOpen}
-        onClose={closeMenu}
-        onClick={(e) => e.stopPropagation()}
-      >
-        <MenuItem
-          onClick={() => {
-            closeMenu()
-            copy(props.poolName)
-          }}
-        >
-          Copy name
-        </MenuItem>
-        {props.isActive && (
-          <div>
-            <MenuItem
-              onClick={() => {
-                closeMenu()
-                stores.clonesModal.openModal({ pool: props.poolId })
-              }}
-            >
-              List clones
-            </MenuItem>
-            <MenuItem
-              onClick={() => {
-                closeMenu()
-                stores.snapshotsModal.openModal({ pool: props.poolId })
-              }}
-            >
-              List snapshots
-            </MenuItem>
-          </div>
-        )}
-      </Menu>
-    </>
-  )
-}