@postgres.ai/shared 3.5.1-pr-1027.0

package/pages/Instance/Info/Snapshots/TimeLine/Day/index.tsx

@@ -0,0 +1,79 @@
+/*--------------------------------------------------------------------------
+ * 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 { colors } from '@postgres.ai/shared/styles/colors'
+
+type Props = {
+  text: string
+}
+
+const useStyles = makeStyles(
+  {
+    root: {
+      flex: '0 1 auto',
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      '&:first-child': {
+        alignItems: 'flex-start',
+
+        '& $division': {
+          marginLeft: '9px',
+        },
+
+        '& $date': {
+          color: colors.black,
+        },
+      },
+      '&:last-child': {
+        alignItems: 'flex-end',
+
+        '& $division': {
+          marginRight: '9px',
+        },
+
+        '& $date': {
+          color: colors.black,
+        },
+      },
+    },
+    point: {
+      width: '19px',
+      flex: '0 0 19px',
+      borderRadius: '50%',
+      background: colors.secondary2.lightLight,
+      border: `1px solid ${colors.secondary2.main}`,
+    },
+    division: {
+      marginTop: '4px',
+      flex: '0 0 4px',
+      width: '1px',
+      background: colors.pgaiDarkGray,
+    },
+    date: {
+      fontSize: '10px',
+      marginTop: '4px',
+      color: colors.pgaiDarkGray,
+    },
+  },
+  { index: 1 },
+)
+
+export const Day = (props: Props) => {
+  const { text } = props
+  const classes = useStyles()
+
+  return (
+    <div className={classes.root}>
+      <div className={classes.point} />
+      <div className={classes.division} />
+      <span className={classes.date}>{text}</span>
+    </div>
+  )
+}

package/pages/Instance/Info/Snapshots/TimeLine/index.tsx

@@ -0,0 +1,57 @@
+/*--------------------------------------------------------------------------
+ * 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 { colors } from '@postgres.ai/shared/styles/colors'
+
+import { Day } from './Day'
+
+const useStyles = makeStyles(
+  {
+    root: {
+      marginTop: '10px',
+    },
+    container: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      position: 'relative',
+    },
+    line: {
+      margin: '0 9px -23px 9px',
+      paddingTop: '22px',
+      borderBottom: `1px solid ${colors.pgaiDarkGray}`,
+    },
+    label: {
+      fontSize: '12px',
+    },
+  },
+  { index: 1 },
+)
+
+export const TimeLine = () => {
+  const classes = useStyles()
+
+  return (
+    <div className={classes.root}>
+      <div className={classes.line} />
+      <div className={classes.container}>
+        <Day text="Jun 20" />
+        <Day text="Jun 21" />
+        <Day text="Jun 22" />
+        <Day text="Jun 23" />
+        <Day text="Jun 24" />
+        <Day text="Jun 25" />
+        <Day text="Jun 26" />
+      </div>
+      <div className={classes.container}>
+        <span className={classes.label}>16:33:20 UTC</span>
+        <span className={classes.label}>10:30:00 UTC</span>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,97 @@
+/*--------------------------------------------------------------------------
+ * 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 { formatDistanceToNowStrict } from 'date-fns'
+
+import { Button } from '@postgres.ai/shared/components/Button2'
+import { Spinner } from '@postgres.ai/shared/components/Spinner'
+import { ErrorStub } from '@postgres.ai/shared/components/ErrorStub'
+import { useStores } from '@postgres.ai/shared/pages/Instance/context'
+
+import { Section } from '../components/Section'
+import { Property } from '../components/Property'
+
+import { getEdgeSnapshots } from './utils'
+import { Calendar } from './Calendar'
+
+const useStyles = makeStyles(
+  {
+    button: {
+      marginTop: '20px',
+    },
+  },
+  { index: 1 },
+)
+
+export const Snapshots = observer(() => {
+  const stores = useStores()
+
+  const { snapshots } = stores.main
+
+  const classes = useStyles()
+
+  const { firstSnapshot, lastSnapshot } = getEdgeSnapshots(snapshots.data ?? [])
+
+  return (
+    <Section
+      title="Snapshots"
+      rightContent={
+        !snapshots.data && !snapshots.error && <Spinner size="sm" />
+      }
+    >
+      {snapshots.error && <ErrorStub message={snapshots.error} size="normal" />}
+
+      {snapshots.data && !snapshots.error && (
+        <>
+          <Property name="Number of snapshots">
+            {snapshots.data.length}
+          </Property>
+
+          <Property name="Oldest data state time">
+            {lastSnapshot && (
+              <>
+                {lastSnapshot.dataStateAt} (
+                {formatDistanceToNowStrict(lastSnapshot.dataStateAtDate, {
+                  addSuffix: true,
+                })}
+                )
+              </>
+            )}
+            {!lastSnapshot && '-'}
+          </Property>
+
+          <Property name="Newest data state time">
+            {firstSnapshot && (
+              <>
+                {firstSnapshot.dataStateAt} (
+                {formatDistanceToNowStrict(firstSnapshot.dataStateAtDate, {
+                  addSuffix: true,
+                })}
+                )
+              </>
+            )}
+            {!firstSnapshot && '-'}
+          </Property>
+
+          <Calendar
+            snapshots={snapshots.data}
+            onSelectDate={(date) => stores.snapshotsModal.openModal({ date })}
+          />
+
+          <Button
+            className={classes.button}
+            onClick={() => stores.snapshotsModal.openModal()}
+          >
+            Show all snapshots
+          </Button>
+        </>
+      )}
+    </Section>
+  )
+})

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

@@ -0,0 +1,18 @@
+/*--------------------------------------------------------------------------
+ * 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[]) => {
+  const list = [...snapshots]
+  const [first] = list
+  const [last] = list.reverse()
+  return {
+    firstSnapshot: (first as Snapshot | undefined) ?? null,
+    lastSnapshot: (last as Snapshot | undefined) ?? null
+  }
+}

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/InstanceResponseModal/styles.module.scss

@@ -0,0 +1,3 @@
+.formattedText {
+  max-height: 400px;
+}

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

@@ -0,0 +1,85 @@
+/*--------------------------------------------------------------------------
+ * 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/styles.module.scss

@@ -0,0 +1,12 @@
+.controls {
+  display: flex;
+  margin-top: 24px;
+}
+
+.button {
+  text-decoration: none;
+
+  & + .button {
+    margin-left: 8px;
+  }
+}

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/Property/styles.module.scss

@@ -0,0 +1,21 @@
+.root {
+  display: flex;
+  margin-top: 4px;
+  font-size: 12px;
+}
+
+.name {
+  flex: 0 0 134px;
+  margin-right: 14px;
+
+  @media screen and (max-width: '600px') {
+    flex: 1 1 100%;
+    margin-right: 7px;
+  }
+}
+
+.content {
+  flex: 1 1 100%;
+  font-weight: 700;
+  width: 0;
+}

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