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

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

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

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

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

@@ -1,75 +0,0 @@
-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>
-  )
-}