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

package/pages/Instance/Snapshots/utils/index.ts

@@ -1,39 +0,0 @@
-import { Snapshot } from '@postgres.ai/shared/types/api/entities/snapshot'
-import { isSameDayUTC } from '@postgres.ai/shared/utils/date'
-
-export const generateSnapshotPageId = (id: string) => {
-  if (!id.includes('@')) return null
-
-  const snapshotIdPart = id.split('@')[1]
-  return snapshotIdPart.startsWith('snapshot_')
-    ? snapshotIdPart.substring(9)
-    : snapshotIdPart
-}
-
-export const groupSnapshotsByCreatedAtDate = (snapshots: Snapshot[]) => {
-  const groups: Snapshot[][] = []
-
-  snapshots.forEach((snapshot) => {
-    let grouped = false
-
-    for (const group of groups) {
-      const groupDate = new Date(group[0].createdAtDate)
-
-      if (isSameDayUTC(snapshot.createdAtDate, groupDate)) {
-        group.push(snapshot)
-        grouped = true
-        break
-      }
-    }
-
-    if (!grouped) {
-      groups.push([snapshot])
-    }
-  })
-
-  groups.sort((a, b) => {
-    return b[0].createdAtDate.getTime() - a[0].createdAtDate.getTime()
-  })
-
-  return groups
-}

package/pages/Instance/SnapshotsModal/index.tsx

@@ -1,159 +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 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, formatDateWithDistance } 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 '../Snapshots/components/SnapshotsModal/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>
-                      {formatDateWithDistance(snapshot.dataStateAt, snapshot.dataStateAtDate)}
-                    </TableBodyCell>
-                    <TableBodyCell>
-                      {formatDateWithDistance(snapshot.createdAt, snapshot.createdAtDate)}
-                    </TableBodyCell>
-                    <TableBodyCell>{snapshot.pool ?? '-'}</TableBodyCell>
-                    <TableBodyCell>
-                      {snapshot.physicalSize
-                        ? formatBytesIEC(snapshot.physicalSize)
-                        : '-'}
-                    </TableBodyCell>
-                  </TableRow>
-                )
-              })}
-            </TableBody>
-          </Table>
-        </HorizontalScrollContainer>
-      )}
-    </ModalBase>
-  )
-})

package/pages/Instance/Tabs/PlatformTabs.tsx

@@ -1,83 +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 { Link, useParams } from 'react-router-dom'
-import { Tab as TabComponent, Tabs as TabsComponent } from '@material-ui/core'
-
-import { TABS_INDEX } from '.'
-import { useTabsStyles } from './styles'
-import { PostgresSQLIcon } from '@postgres.ai/shared/icons/PostgresSQL'
-
-type Props = {
-  value: number
-  handleChange: (event: React.ChangeEvent<{}>, newValue: number) => void
-  hasLogs: boolean
-  isPlatform?: boolean
-  hideInstanceTabs?: boolean
-}
-
-export const PlatformTabs = ({
-  value,
-  handleChange,
-  hasLogs,
-  hideInstanceTabs,
-}: Props) => {
-  const classes = useTabsStyles()
-  const { org, instanceId } = useParams<{ org: string; instanceId: string }>()
-
-  const tabs = [
-    {
-      label: '👁️ Overview',
-      to: 'overview',
-      value: TABS_INDEX.OVERVIEW,
-    },
-    {
-      label: '🖖 Branches',
-      to: 'branches',
-      value: TABS_INDEX.BRANCHES,
-      hide: hideInstanceTabs,
-    },
-    {
-      label: '⚡ Snapshots',
-      to: 'snapshots',
-      value: TABS_INDEX.SNAPSHOTS,
-      hide: hideInstanceTabs,
-    },
-    {
-      label: (
-        <div className={classes.flexRow}>
-          <PostgresSQLIcon /> Clones
-        </div>
-      ),
-      to: 'clones',
-      value: TABS_INDEX.CLONES,
-      hide: hideInstanceTabs,
-    }
-  ]
-
-  return (
-    <TabsComponent
-      value={value}
-      onChange={handleChange}
-      classes={{ root: classes.tabsRoot, indicator: classes.tabsIndicator }}
-    >
-      {tabs.map(({ label, to, value, hide }) => (
-        <Link key={value} to={`/${org}/instances/${instanceId}/${to}`}>
-          <TabComponent
-            label={label}
-            value={value}
-            classes={{
-              root: hide ? classes.tabHidden : classes.tabRoot,
-            }}
-            onClick={(event) => handleChange(event, value)}
-          />
-        </Link>
-      ))}
-    </TabsComponent>
-  )
-}

package/pages/Instance/Tabs/index.tsx

@@ -1,140 +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 { Link } from 'react-router-dom'
-import { Tab as TabComponent, Tabs as TabsComponent } from '@material-ui/core'
-
-import { PostgresSQLIcon } from '@postgres.ai/shared/icons/PostgresSQL'
-import { useTabsStyles } from './styles'
-import { PlatformTabs } from "./PlatformTabs";
-import { useCreatedStores } from "../useCreatedStores";
-import { Host } from '../context'
-
-
-export const TABS_INDEX = {
-  OVERVIEW: 0,
-  BRANCHES: 1,
-  SNAPSHOTS: 2,
-  CLONES: 3,
-  LOGS: 4,
-  CONFIGURATION: 5,
-}
-export interface TabsProps {
-  value: number
-  handleChange: (event: React.ChangeEvent<{}>, newValue: number) => void
-  hasLogs: boolean
-  isPlatform?: boolean
-  hideInstanceTabs?: boolean
-}
-
-export const Tabs = ({
-  value,
-  handleChange,
-  hasLogs,
-  hideInstanceTabs,
-}: TabsProps) => {
-  const classes = useTabsStyles()
-
-  const tabData = [
-    { label: '👁️ Overview', to: '/instance', value: TABS_INDEX.OVERVIEW },
-    {
-      label: '🖖 Branches',
-      to: '/instance/branches',
-      value: TABS_INDEX.BRANCHES,
-      hide: hideInstanceTabs,
-    },
-    {
-      label: '⚡ Snapshots',
-      to: '/instance/snapshots',
-      value: TABS_INDEX.SNAPSHOTS,
-      hide: hideInstanceTabs,
-    },
-    {
-      label: (
-        <div className={classes.flexRow}>
-          <PostgresSQLIcon /> Clones
-        </div>
-      ),
-      to: '/instance/clones',
-      value: TABS_INDEX.CLONES,
-      hide: hideInstanceTabs,
-    },
-    {
-      label: '📓 Logs',
-      to: '/instance/logs',
-      value: TABS_INDEX.LOGS,
-      disabled: !hasLogs,
-    },
-    {
-      label: '🛠️ Configuration',
-      to: '/instance/configuration',
-      value: TABS_INDEX.CONFIGURATION,
-      hide: hideInstanceTabs,
-    },
-  ]
-
-  return (
-    <TabsComponent
-      value={value}
-      onChange={handleChange}
-      classes={{ root: classes.tabsRoot, indicator: classes.tabsIndicator }}
-    >
-      {tabData.map(({ label, to, value, hide, disabled }) => (
-        <Link key={value} to={to}>
-          <TabComponent
-            label={label}
-            value={value}
-            disabled={disabled}
-            classes={{
-              root: hide ? classes.tabHidden : classes.tabRoot,
-            }}
-          />
-        </Link>
-      ))}
-    </TabsComponent>
-  )
-}
-
-type InstanceTabProps = {
-  tab: number
-  isPlatform?: boolean
-  onTabChange?: (tabID: number) => void
-  instanceId: string
-  hasLogs: boolean
-  hideInstanceTabs?: boolean
-}
-
-export const InstanceTabs = (props: InstanceTabProps) => {
-  const { instanceId, onTabChange, tab, hasLogs, hideInstanceTabs = false } = props;
-  const stores = useCreatedStores({} as unknown as Host)
-  const {
-    load,
-  } = stores.main
-
-  const switchTab = (_: React.ChangeEvent<{}> | null, tabID: number) => {
-    const contentElement = document.getElementById('content-container')
-    if (onTabChange) {
-      onTabChange(tabID)
-    }
-
-    if (tabID === 0) {
-      load(instanceId)
-    }
-
-    contentElement?.scrollTo(0, 0)
-  }
-
-  const tabProps = {
-    value: tab,
-    handleChange: switchTab,
-    hasLogs: Boolean(hasLogs),
-    hideInstanceTabs: hideInstanceTabs,
-  }
-
-  return props.isPlatform ? <PlatformTabs {...tabProps} /> : <Tabs {...tabProps} />
-}

package/pages/Instance/Tabs/styles.ts

@@ -1,68 +0,0 @@
-import { makeStyles } from '@material-ui/core'
-import { colors } from '@postgres.ai/shared/styles/colors'
-
-export const useTabsStyles = makeStyles(
-  {
-    tabsRoot: {
-      minHeight: 0,
-      marginTop: '-8px',
-      '& .MuiTabs-fixed': {
-        overflowX: 'auto!important',
-        scrollbarWidth: 'none',
-        '&::-webkit-scrollbar': {
-          display: 'none',
-        },
-
-        '& div:first-child': {
-          '@media (max-width: 700px)': {
-            display: 'flex',
-          },
-        },
-      },
-      '& .postgres-logo': {
-        width: '18px',
-        height: '18px',
-      },
-      '& a': {
-        color: colors.black,
-        textDecoration: 'none',
-
-        '@media (max-width: 700px)': {
-          display: 'flex',
-          width: '100%',
-        },
-      },
-    },
-    flexRow: {
-      display: 'flex',
-      flexDirection: 'row',
-      gap: '5px',
-      width: '100%',
-    },
-    tabsIndicator: {
-      height: '3px',
-    },
-    tabRoot: {
-      fontWeight: 400,
-      minWidth: 0,
-      minHeight: 0,
-      width: '100%',
-      padding: '6px 16px',
-      borderBottom: `3px solid ${colors.consoleStroke}`,
-      '& + $tabRoot': {
-        marginLeft: '10px',
-      },
-      '&.Mui-disabled': {
-        opacity: 1,
-        color: colors.pgaiDarkGray,
-      },
-      '@media (max-width: 700px)': {
-        width: 'max-content',
-      },
-    },
-    tabHidden: {
-      display: 'none',
-    },
-  },
-  { index: 1 },
-)

package/pages/Instance/components/ErrorStub/index.tsx

@@ -1,77 +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 { Paper, makeStyles } from '@material-ui/core'
-import clsx from 'clsx'
-
-type Props = {
-  title?: string
-  message: string
-  className?: string
-  size?: 'big' | 'normal'
-}
-
-const useStyles = makeStyles(
-  {
-    '*': {
-      margin: 0,
-    },
-    root: {
-      color: '#c00111',
-      overflowWrap: 'break-word',
-    },
-    rootBig: {
-      padding: '16px 24px',
-
-      '& $title': {
-        fontSize: '16px',
-      },
-      '& $message': {
-        marginTop: '16px',
-        fontSize: '14px',
-      },
-    },
-    rootNormal: {
-      padding: '8px 16px',
-
-      '& $title': {
-        fontSize: '14px',
-      },
-      '& $message': {
-        marginTop: '12px',
-        fontSize: '12px',
-      },
-    },
-    title: {
-      fontWeight: 700,
-      textTransform: 'uppercase',
-    },
-    message: {},
-  },
-  { index: 1 },
-)
-
-export const ErrorStub = (props: Props) => {
-  const { title = 'Unknown error', message, className, size = 'big' } = props
-
-  const classes = useStyles()
-
-  return (
-    <Paper
-      className={clsx(
-        classes.root,
-        size === 'big' && classes.rootBig,
-        size === 'normal' && classes.rootNormal,
-        className,
-      )}
-    >
-      <h2 className={classes.title}>{title}</h2>
-      <p className={classes.message}>{message}</p>
-    </Paper>
-  )
-}

package/pages/Instance/components/ModalReloadButton/index.tsx

@@ -1,42 +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 { Button } from '@postgres.ai/shared/components/Button2'
-
-type Props = {
-  isReloading: boolean
-  onReload: () => void
-}
-
-const useStyles = makeStyles(
-  {
-    spinner: {
-      margin: '5px',
-    },
-    content: {
-      flex: '0 0 auto',
-      alignSelf: 'flex-start',
-    },
-  },
-  { index: 1 },
-)
-
-export const ModalReloadButton = (props: Props) => {
-  const classes = useStyles()
-
-  return (
-    <Button
-      onClick={props.onReload}
-      className={classes.content}
-      isLoading={props.isReloading}
-    >
-      Reload info
-    </Button>
-  )
-}

package/pages/Instance/components/Tags/Tag/index.tsx

@@ -1,60 +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 { HorizontalScrollContainer } from '@postgres.ai/shared/components/HorizontalScrollContainer'
-import { colors } from '@postgres.ai/shared/styles/vars'
-
-type Props = {
-  name: string
-  children: React.ReactNode
-}
-
-const useStyles = makeStyles(
-  {
-    root: {
-      fontSize: '12px',
-      marginRight: '8px',
-      marginBottom: '8px',
-      borderRadius: '12px',
-      background: colors.gray,
-    },
-    content: {
-      padding: '5px 8px',
-      whiteSpace: 'nowrap',
-    },
-    curtainLeft: {
-      background: 'linear-gradient(to right, rgba(0,0,0,0.1), transparent);',
-    },
-    curtainRight: {
-      background: 'linear-gradient(to left, rgba(0,0,0,0.1), transparent);',
-    },
-    value: {
-      fontWeight: 700,
-    },
-  },
-  { index: 1 },
-)
-
-export const Tag = (props: Props) => {
-  const classes = useStyles()
-
-  return (
-    <HorizontalScrollContainer
-      classes={{
-        root: classes.root,
-        content: classes.content,
-        curtainLeft: classes.curtainLeft,
-        curtainRight: classes.curtainRight,
-      }}
-    >
-      {props.name}: <span className={classes.value}>{props.children}</span>
-    </HorizontalScrollContainer>
-  )
-}