@postgres.ai/shared 4.0.4 → 4.1.0

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>
+    </>
+  )
+}

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

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

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

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

package/pages/Instance/Info/Disks/Disk/ProgressBar/PointerIcon.tsx

@@ -0,0 +1,20 @@
+export const PoinerIcon = ({
+  className,
+  style,
+}: {
+  className?: string
+
+  style?: React.CSSProperties
+}) => (
+  <svg
+    width="5"
+    height="14"
+    viewBox="0 0 5 14"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style={style}
+    className={className}
+  >
+    <path d="M2.5 14L-2.06593e-07 -4.37114e-07L5 0L2.5 14Z" fill="#EE0202" />
+  </svg>
+)

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

@@ -0,0 +1,76 @@
+import { CSSProperties } from 'react'
+
+import { makeStyles } from '@material-ui/core'
+
+import { colors } from '@postgres.ai/shared/styles/colors'
+import { Tooltip } from '@postgres.ai/shared/components/Tooltip'
+
+import { PoinerIcon } from './PointerIcon'
+
+type Props = {
+  value: number
+  total: number
+  thresholdPercent: number
+  style?: CSSProperties
+}
+
+const useStyles = makeStyles(
+  (theme) => ({
+    '@keyframes grow': {
+      '0%': {
+        transform: 'scaleX(0)',
+      },
+      '100%': {
+        transform: 'scaleX(1)',
+      },
+    },
+    root: {
+      height: '12px',
+      position: 'relative',
+      borderRadius: '4px',
+      background: colors.gray,
+      overflow: 'hidden',
+      marginTop: '8px',
+    },
+    indicator: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      height: '100%',
+      width: '30%',
+      background: colors.primary.light,
+      animation: `$grow 500ms ${theme.transitions.easing.easeOut}`,
+      transformOrigin: 0,
+    },
+    pointer: {
+      position: 'absolute',
+      height: '100%',
+      top: 0,
+      transform: 'translateX(-50%)',
+    },
+  }),
+  { index: 1 },
+)
+
+export const ProgressBar = (props: Props) => {
+  const classes = useStyles()
+
+  return (
+    <div className={classes.root} style={props.style}>
+      <div
+        className={classes.indicator}
+        style={{ width: `${props.total === 0 ? 0 : (props.value / props.total) * 100}%` }}
+      />
+      <Tooltip
+        content={`+${props.thresholdPercent}% disk usage may result in performance degradation`}
+      >
+        <PoinerIcon
+          className={classes.pointer}
+          style={{
+            left: `${props.thresholdPercent}%`,
+          }}
+        />
+      </Tooltip>
+    </div>
+  )
+}

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

@@ -0,0 +1,75 @@
+import { makeStyles } from '@material-ui/core'
+
+import { WarningIcon } from '@postgres.ai/shared/icons/Warning'
+import { Tooltip } from '@postgres.ai/shared/components/Tooltip'
+import { colors } from '@postgres.ai/shared/styles/colors'
+
+export type Props = {
+  value: 'refreshing' | 'active' | 'empty'
+  hasWarning: boolean
+}
+
+const VALUE_TO_NAME: Record<Props['value'], string> = {
+  refreshing: 'Data refreshing',
+  active: 'Active',
+  empty: 'Empty',
+}
+
+const VALUE_TO_DESC: Record<Props['value'], string> = {
+  refreshing: 'Data retrieval is in progress',
+  active: 'Disk is ready to provision clones',
+  empty: 'Disk is emptied and ready for a data retrieval',
+}
+
+const useStyles = makeStyles(
+  {
+    root: {
+      display: 'flex',
+      color: colors.white,
+    },
+    warning: {
+      display: 'flex',
+      flex: '0 0 16px',
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginRight: '4px',
+      height: '16px',
+      background: colors.state.warning,
+      borderRadius: '3px',
+    },
+    icon: {
+      height: '10px',
+    },
+    label: {
+      fontSize: '12px',
+      padding: '1px 6px',
+      borderRadius: '3px',
+      flex: '0 0 auto',
+      background: (props: Props) => {
+        if (props.value === 'refreshing') return colors.state.notice
+        if (props.value === 'active') return colors.state.ok
+        return colors.state.unknown
+      },
+    },
+  },
+  { index: 1 },
+)
+
+export const Status = (props: Props) => {
+  const { value, hasWarning } = props
+
+  const classes = useStyles(props)
+
+  return (
+    <div className={classes.root}>
+      {hasWarning && (
+        <div className={classes.warning}>
+          <WarningIcon className={classes.icon} />
+        </div>
+      )}
+      <Tooltip content={VALUE_TO_DESC[value]}>
+        <div className={classes.label}>{VALUE_TO_NAME[value]}</div>
+      </Tooltip>
+    </div>
+  )
+}