@postgres.ai/shared 4.0.3 → 4.1.0

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

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

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

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

@@ -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 { 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

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

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

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

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

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