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

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

@@ -1,31 +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 { Snapshot } from '@postgres.ai/shared/types/api/entities/snapshot'
-
-export const getEdgeSnapshots = (snapshots: Snapshot[]) => {
-  if (!snapshots.length) {
-    return {
-      firstSnapshot: null,
-      lastSnapshot: null
-    }
-  }
-  
-  const sortedList = [...snapshots].sort((a, b) => {
-    const aTime = a.dataStateAtDate?.getTime() ?? 0
-    const bTime = b.dataStateAtDate?.getTime() ?? 0
-    return bTime - aTime
-  })
-
-  const [first] = sortedList
-  const [last] = sortedList.slice(-1)
-
-  return {
-    firstSnapshot: first ?? null, // newest
-    lastSnapshot: last ?? null    // oldest
-  }
-}

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,89 +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, uiVersion, config } = 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>
-      )}
-      {uiVersion && <Property name="UI version">{`v${uiVersion}`}</Property>}
-      {version && <Property name="Engine version">{version}</Property>}
-      {config?.dockerPath && (
-        <Property name="Docker image">{config?.dockerPath}</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,137 +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 },
-)
-
-type InfoProps = {
-  hideBranchingFeatures?: boolean
-}
-
-export const Info = (props: InfoProps) => {
-  const classes = useStyles()
-  const width = useWindowDimensions()
-  const [onHover, setOnHover] = useState(false)
-  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
-          onMouseEnter={() => setOnHover(true)}
-          onMouseLeave={() => setOnHover(false)}
-          className={classes.collapseBtn}
-          onClick={handleClick}
-          isCollapsed={isCollapsed}
-          type="button"
-          icon={
-            isCollapsed ? (
-              <ArrowLeft className={classes.arrowImage} />
-            ) : (
-              <ArrowRight className={classes.arrowImage} />
-            )
-          }
-        >
-          {onHover && 'Collapse'}
-        </Button>
-      )}
-
-      {!isCollapsed && (
-        <div>
-          <Status />
-          <Retrieval hideBranchingFeatures={props.hideBranchingFeatures} />
-          <Connection />
-          <Disks />
-          <Snapshots />
-        </div>
-      )}
-    </div>
-  )
-}

package/pages/Instance/Snapshots/components/SnapshotHeader/index.tsx

@@ -1,77 +0,0 @@
-import { observer } from 'mobx-react-lite'
-import { makeStyles, TextField } from '@material-ui/core'
-import { Select } from '@postgres.ai/shared/components/Select'
-
-interface SnapshotHeaderProps {
-  branches: string[] | null
-  selectedBranch: string
-  setMessageFilter: (value: string) => void
-  setSelectedBranch: (value: string) => void
-}
-
-const useStyles = makeStyles(
-  {
-    outerContainer: {
-      display: 'flex',
-      justifyContent: 'space-between',
-      alignItems: 'center',
-      paddingBottom: '6px',
-    },
-    select: {
-      width: '200px',
-    },
-    inputContainer: {
-      width: '300px',
-
-      '& input': {
-        padding: '8px',
-      },
-    },
-  },
-  { index: 1 },
-)
-
-export const SnapshotHeader = observer(
-  ({
-    branches,
-    selectedBranch,
-    setMessageFilter,
-    setSelectedBranch,
-  }: SnapshotHeaderProps) => {
-    const classes = useStyles()
-
-    return (
-      <div className={classes.outerContainer}>
-        <Select
-          fullWidth
-          label="Branch"
-          className={classes.select}
-          value={selectedBranch}
-          disabled={!branches}
-          onChange={(e) => {
-            setSelectedBranch(e.target.value)
-          }}
-          items={
-            branches
-              ? branches.map((branch) => {
-                  return {
-                    value: branch,
-                    children: <div>{branch}</div>,
-                  }
-                })
-              : []
-          }
-        />
-        <TextField
-          variant="outlined"
-          className={classes.inputContainer}
-          onChange={(e) => setMessageFilter(e.target.value)}
-          label={'Filter by message'}
-          InputLabelProps={{
-            shrink: true,
-          }}
-        />
-      </div>
-    )
-  },
-)