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

package/pages/Instance/Info/Status/InstanceResponseModal/index.tsx

@@ -1,32 +0,0 @@
-import { observer } from 'mobx-react-lite'
-
-import { Modal } from '@postgres.ai/shared/components/Modal'
-import { FormattedText } from '@postgres.ai/shared/components/FormattedText'
-import { useStores } from '@postgres.ai/shared/pages/Instance/context'
-
-import styles from './styles.module.scss'
-
-type Props = {
-  isOpen: boolean
-  onClose: () => void
-}
-
-export const InstanceResponseModal = observer((props: Props) => {
-  const stores = useStores()
-
-  if (!stores.main.instance) return null
-
-  return (
-    <Modal
-      isOpen={props.isOpen}
-      onClose={props.onClose}
-      title="Instance Full Response"
-      size="md"
-    >
-      <FormattedText
-        value={JSON.stringify(stores.main.instance.dto, null, 2)}
-        className={styles.formattedText}
-      />
-    </Modal>
-  )
-})

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

@@ -1,85 +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 { observer } from 'mobx-react-lite'
-
-import { GatewayLink } from '@postgres.ai/shared/components/GatewayLink'
-import { Status as StatusIndicator } from '@postgres.ai/shared/components/Status'
-import { useStores } from '@postgres.ai/shared/pages/Instance/context'
-import { formatDateStd } from '@postgres.ai/shared/utils/date'
-import { Button } from '@postgres.ai/shared/components/Button2'
-import { linksConfig } from '@postgres.ai/shared/config/links'
-
-import { Section } from '../components/Section'
-import { Property } from '../components/Property'
-
-import { InstanceResponseModal } from './InstanceResponseModal'
-
-import { getType, getText } from './utils'
-
-import styles from './styles.module.scss'
-
-export const Status = observer(() => {
-  const [isOpenInstanceResponseModal, setIsOpenInstanceResponseModal] =
-    useState(false)
-  const stores = useStores()
-
-  const { instance } = stores.main
-  if (!instance || !instance.state) return null
-
-  const { code, message } = instance.state.status
-  const { version, startedAt } = instance.state.engine
-
-  const isStatusOk = code === 'OK'
-
-  return (
-    <Section title="Status">
-      <Property name="Status">
-        <StatusIndicator type={getType(code)}>
-          {getText(code)}
-          {!isStatusOk && (
-            <>
-              <br />
-              {message}
-            </>
-          )}
-        </StatusIndicator>
-      </Property>
-      {startedAt && (
-        <Property name="Started">
-          {formatDateStd(startedAt, { withDistance: true })}
-        </Property>
-      )}
-      {instance.createdAt && (
-        <Property name="Registered">
-          {formatDateStd(instance.createdAt, { withDistance: true })}
-        </Property>
-      )}
-      {version && <Property name="Version">{version}</Property>}
-
-      {!isStatusOk && (
-        <div className={styles.controls}>
-          <Button
-            onClick={() => setIsOpenInstanceResponseModal(true)}
-            className={styles.button}
-          >
-            Show full response
-          </Button>
-          <GatewayLink className={styles.button} href={linksConfig.support}>
-            <Button theme="accent">Ask support</Button>
-          </GatewayLink>
-        </div>
-      )}
-
-      <InstanceResponseModal
-        isOpen={isOpenInstanceResponseModal}
-        onClose={() => setIsOpenInstanceResponseModal(false)}
-      />
-    </Section>
-  )
-})

package/pages/Instance/Info/Status/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 { capitalize } from '@postgres.ai/shared/utils/strings'
-
-const STATUS_CODE_TO_TYPE = {
-  OK: 'ok' as const,
-  WARNING: 'warning' as const,
-  NO_RESPONSE: 'error' as const
-}
-
-export const getType = (code: keyof typeof STATUS_CODE_TO_TYPE) => {
-  return STATUS_CODE_TO_TYPE[code] ?? 'unknown'
-}
-
-export const getText = (code: keyof typeof STATUS_CODE_TO_TYPE) => {
-  if (code === 'OK') return code
-  if (code === 'NO_RESPONSE') return 'No response'
-  return capitalize(code)
-}

package/pages/Instance/Info/components/Property/index.tsx

@@ -1,32 +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 cn from 'classnames'
-
-import styles from './styles.module.scss'
-
-type Props = {
-  name: React.ReactNode
-  children: React.ReactNode
-  classes?: {
-    name?: string
-    content?: string
-  }
-}
-
-export const Property = (props: Props) => {
-  const { name, children } = props
-
-  return (
-    <div className={styles.root}>
-      <label className={cn(styles.name, props.classes?.name)}>{name}</label>
-      <div className={cn(styles.content, props.classes?.content)}>
-        {children}
-      </div>
-    </div>
-  )
-}

package/pages/Instance/Info/components/Section/index.tsx

@@ -1,50 +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 { makeStyles } from '@material-ui/styles'
-
-import { SectionTitle } from '@postgres.ai/shared/components/SectionTitle'
-
-type Props = {
-  title: string
-  children: React.ReactNode
-  rightContent?: React.ReactNode
-}
-
-const useStyles = makeStyles(
-  {
-    root: {
-      '& + $root': {
-        marginTop: '28px',
-      },
-    },
-    content: {
-      marginTop: '8px',
-    },
-  },
-  { index: 1 },
-)
-
-export const Section = (props: Props) => {
-  const { title, children, rightContent } = props
-
-  const classes = useStyles()
-
-  return (
-    <div className={classes.root}>
-      <SectionTitle
-        text={title}
-        level={2}
-        tag="h3"
-        rightContent={rightContent}
-      />
-
-      <div className={classes.content}>{children}</div>
-    </div>
-  )
-}

package/pages/Instance/Info/components/ValueStatus/index.tsx

@@ -1,51 +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 { makeStyles } from '@material-ui/core'
-
-import {
-  Status,
-  Props as StatusProps,
-} from '@postgres.ai/shared/components/Status'
-
-type Props = {
-  children: React.ReactNode
-  type?: StatusProps['type']
-  icon?: StatusProps['icon']
-}
-
-const useStyles = makeStyles(
-  {
-    root: {
-      fontWeight: 400,
-      marginTop: '2px',
-      fontSize: '10px',
-    },
-    icon: {
-      alignSelf: 'flex-start',
-    },
-  },
-  { index: 1 },
-)
-
-export const ValueStatus = (props: Props) => {
-  const { children, type, icon } = props
-
-  const classes = useStyles()
-
-  return (
-    <Status
-      className={classes.root}
-      classNameIcon={classes.icon}
-      type={type}
-      icon={icon}
-    >
-      {children}
-    </Status>
-  )
-}

package/pages/Instance/Info/index.tsx

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

@@ -1,169 +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 { 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

@@ -1,17 +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 { 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

@@ -1,98 +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 {
-  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>
-  )
-}