@postgres.ai/shared 3.5.1-pr-1027.0

package/pages/Instance/Clones/index.tsx

@@ -0,0 +1,135 @@
+/*--------------------------------------------------------------------------
+ * 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, Theme, useMediaQuery } from '@material-ui/core'
+import { useHistory } from 'react-router-dom'
+import { observer } from 'mobx-react-lite'
+
+import { SectionTitle } from '@postgres.ai/shared/components/SectionTitle'
+import { Button } from '@postgres.ai/shared/components/Button2'
+import { round } from '@postgres.ai/shared/utils/numbers'
+import { Tooltip } from '@postgres.ai/shared/components/Tooltip'
+import { InfoIcon } from '@postgres.ai/shared/icons/Info'
+
+import { useStores, useHost } from '@postgres.ai/shared/pages/Instance/context'
+
+import { ClonesList } from '../components/ClonesList'
+
+import { Header } from './Header'
+
+const SHORT_LIST_SIZE = 3
+
+const useStyles = makeStyles(
+  (theme) => ({
+    root: {
+      width: 0,
+      flex: '1 1 100%',
+      marginRight: '40px',
+      height: '100%',
+
+      [theme.breakpoints.down('sm')]: {
+        width: '100%',
+        marginRight: 0,
+      },
+    },
+    tableTitle: {
+      marginTop: '5px',
+    },
+    listSizeButton: {
+      marginTop: '12px',
+    },
+    infoIcon: {
+      height: '12px',
+      width: '12px',
+      marginLeft: '8px',
+      color: '#808080',
+    },
+  }),
+  { index: 1 },
+)
+
+export const Clones = observer(() => {
+  const classes = useStyles()
+  const history = useHistory()
+  const isMobile = useMediaQuery<Theme>((theme) => theme.breakpoints.down('sm'))
+  const [isShortListForMobile, setIsShortListForMobile] = useState(true)
+
+  const stores = useStores()
+  const host = useHost()
+
+  const { instance } = stores.main
+  if (!instance || !instance.state) return null
+
+  const isShortList = isMobile && isShortListForMobile
+  const toggleListSize = () => setIsShortListForMobile(!isShortListForMobile)
+
+  const goToCloneAddPage = () => history.push(host.routes.createClone())
+
+  const showListSizeButton =
+    instance.state?.cloning.clones?.length > SHORT_LIST_SIZE && isMobile
+
+  const isLoadingSnapshots = stores.main.snapshots.isLoading
+  const hasSnapshots = Boolean(stores.main.snapshots.data?.length)
+  const canCreateClone = hasSnapshots && !stores.main.isDisabledInstance
+
+  return (
+    <div className={classes.root}>
+      <SectionTitle level={2} tag="h2" text="Cloning summary" />
+
+      <Header
+        expectedCloningTimeS={round(
+          instance.state.cloning.expectedCloningTime,
+          2,
+        )}
+        logicalSize={instance.state.dataSize}
+        clonesCount={instance.state.cloning.clones.length}
+      />
+
+      <SectionTitle
+        className={classes.tableTitle}
+        level={2}
+        tag="h3"
+        text={`Clones (${instance.state.cloning.clones.length})`}
+        rightContent={
+          <>
+            <Button
+              theme="primary"
+              onClick={goToCloneAddPage}
+              isDisabled={!canCreateClone}
+              isLoading={isLoadingSnapshots}
+            >
+              Create clone
+            </Button>
+
+            {!hasSnapshots && (
+              <Tooltip content="No snapshots">
+                <InfoIcon className={classes.infoIcon} />
+              </Tooltip>
+            )}
+          </>
+        }
+      />
+
+      <ClonesList
+        clones={
+          isShortList
+            ? instance.state.cloning.clones.slice(0, SHORT_LIST_SIZE)
+            : instance.state.cloning.clones
+        }
+        isDisabled={stores.main.isDisabledInstance}
+        emptyStubText="This instance has no active clones"
+      />
+
+      {showListSizeButton && (
+        <Button className={classes.listSizeButton} onClick={toggleListSize}>
+          {isShortList ? 'Show more' : 'Show less'}
+        </Button>
+      )}
+    </div>
+  )
+})

package/pages/Instance/ClonesModal/index.tsx

@@ -0,0 +1,71 @@
+/*--------------------------------------------------------------------------
+ * 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/ClonesModal/utils.ts

@@ -0,0 +1,21 @@
+/*--------------------------------------------------------------------------
+ * 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
+ *--------------------------------------------------------------------------
+ */
+
+export const getTags = ({
+  pool,
+  snapshotId,
+}: {
+  pool: string | null
+  snapshotId: string | null
+}) => {
+  const tags = []
+
+  if (pool) tags.push({ name: 'Disk', value: pool })
+  if (snapshotId) tags.push({ name: 'Snapshot', value: snapshotId })
+
+  return tags
+}

package/pages/Instance/InactiveInstance/index.tsx

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

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

@@ -0,0 +1,176 @@
+/*--------------------------------------------------------------------------
+ * 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

@@ -0,0 +1,24 @@
+/*--------------------------------------------------------------------------
+ * 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

@@ -0,0 +1,36 @@
+/*--------------------------------------------------------------------------
+ * 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>
+    </>
+  )
+}