@postgres.ai/shared 4.0.3 → 4.1.0

package/pages/Logs/index.tsx

@@ -0,0 +1,287 @@
+import classNames from 'classnames'
+import { makeStyles } from '@material-ui/core'
+import { Alert, AlertTitle } from '@material-ui/lab'
+import React, { useEffect, useReducer } from 'react'
+
+import { Spinner } from '@postgres.ai/shared/components/Spinner'
+import { Api } from '@postgres.ai/shared/pages/Instance/stores/Main'
+import {
+  establishConnection,
+  restartConnection,
+} from '@postgres.ai/shared/pages/Logs/wsLogs'
+import { useWsScroll } from '@postgres.ai/shared/pages/Logs/hooks/useWsScroll'
+
+import { LAPTOP_WIDTH_PX } from './constants'
+import { PlusIcon } from './Icons/PlusIcon'
+
+const useStyles = makeStyles(
+  () => ({
+    spinnerContainer: {
+      display: 'flex',
+      width: '100%',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    filterSection: {
+      marginTop: '10px',
+      display: 'flex',
+      flexDirection: 'row',
+      gap: 10,
+      flexWrap: 'wrap',
+
+      '&  > span': {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        border: '1px solid #898E9A',
+        padding: '3px 8px',
+        borderRadius: 5,
+        fontSize: '13px',
+        textTransform: 'capitalize',
+        cursor: 'pointer',
+      },
+
+      '&  > span > button': {
+        background: 'none',
+        outline: 'none',
+        border: 0,
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        alignItems: 'center',
+        cursor: 'pointer',
+        paddingBottom: 0,
+        paddingRight: 0,
+      },
+    },
+    //  we need important since id has higher priority than class
+    logsContainer: {
+      overflow: 'auto !important',
+      margin: '10px 0 0 0 !important',
+      maxHeight: 'calc(100vh - 360px)',
+      position: 'relative',
+
+      '& p': {
+        fontSize: '10px !important',
+        maxWidth: 'calc(100% - 25px)',
+
+        '@media (max-width: 982px)': {
+          maxWidth: '100%',
+        },
+      },
+    },
+    activeButton: {
+      border: '1px solid #3F51B5 !important',
+      color: '#3F51B5 !important',
+
+      '& svg': {
+        '& path': {
+          fill: '#3F51B5 !important',
+        },
+      },
+    },
+    passiveButton: {
+      '& svg': {
+        transform: 'rotate(45deg) scale(0.75)',
+      },
+    },
+    buttonClassName: {
+      '& svg': {
+        width: '14px',
+        height: '14px',
+      },
+    },
+    activeError: {
+      border: '1px solid #F44336 !important',
+      color: '#F44336 !important',
+
+      '& svg': {
+        '& path': {
+          fill: '#F44336 !important',
+        },
+      },
+    },
+    utilFilter: {
+      '& > span': {
+        textTransform: 'lowercase',
+      },
+
+      '& > span:last-child': {
+        textTransform: 'capitalize',
+      },
+    },
+  }),
+  { index: 1 },
+)
+
+export const Logs = ({ api, instanceId }: { api: Api; instanceId: string }) => {
+  const classes = useStyles()
+  const [isLoading, setIsLoading] = React.useState(true)
+  const targetNode = document.getElementById('logs-container')
+  useWsScroll(isLoading)
+
+  const logsFilterState =
+    localStorage?.getItem('logsFilter') &&
+    JSON?.parse(localStorage?.getItem('logsFilter') || '')
+
+  const isEmpty = (obj: Record<string, boolean>) => {
+    for (const key in obj) {
+      if (obj.hasOwnProperty(key)) return false
+    }
+    return true
+  }
+
+  const initialState = (obj: Record<string, boolean>) => {
+    const filters = {
+      '[DEBUG]': true,
+      '[INFO]': true,
+      '[ERROR]': true,
+      '[base.go]': true,
+      '[runners.go]': true,
+      '[snapshots.go]': true,
+      '[util.go]': true,
+      '[logging.go]': false,
+      '[ws.go]': false,
+      '[other]': true,
+    }
+
+    for (const key in obj) {
+      if (obj.hasOwnProperty(key)) {
+        filters[key as keyof typeof filters] = obj[key]
+      }
+    }
+    return filters
+  }
+
+  const reducer = (
+    state: Record<string, boolean>,
+    action: { type: string },
+  ) => {
+    switch (action.type) {
+      case 'DEBUG':
+        return { ...state, '[DEBUG]': !state['[DEBUG]'] }
+      case 'INFO':
+        return { ...state, '[INFO]': !state['[INFO]'] }
+      case 'ERROR':
+        return { ...state, '[ERROR]': !state['[ERROR]'] }
+      case 'base.go':
+        return { ...state, '[base.go]': !state['[base.go]'] }
+      case 'runners.go':
+        return { ...state, '[runners.go]': !state['[runners.go]'] }
+      case 'snapshots.go':
+        return { ...state, '[snapshots.go]': !state['[snapshots.go]'] }
+      case 'logging.go':
+        return { ...state, '[logging.go]': !state['[logging.go]'] }
+      case 'util.go':
+        return { ...state, '[util.go]': !state['[util.go]'] }
+      case 'ws.go':
+        return { ...state, '[ws.go]': !state['[ws.go]'] }
+      case 'other':
+        return { ...state, '[other]': !state['[other]'] }
+      default:
+        throw new Error()
+    }
+  }
+
+  const [state, dispatch] = useReducer(reducer, initialState(logsFilterState))
+
+  const FormCheckbox = ({ type }: { type: string }) => {
+    const filterType = (state as Record<string, boolean>)[`[${type}]`]
+    return (
+      <span
+        onClick={() => {
+          dispatch({ type })
+          restartConnection(api, instanceId)
+        }}
+        className={
+          filterType && type !== 'ERROR'
+            ? classes.activeButton
+            : filterType && type === 'ERROR'
+            ? classes.activeError
+            : classes.passiveButton
+        }
+      >
+        <span>{type.toLowerCase()}</span>
+        <button
+          aria-label="close"
+          type="button"
+          className={classes.buttonClassName}
+        >
+          <PlusIcon />
+        </button>
+      </span>
+    )
+  }
+
+  useEffect(() => {
+    if (api.initWS != undefined) {
+      establishConnection(api, instanceId)
+    }
+  }, [api])
+
+  useEffect(() => {
+    localStorage.setItem('logsFilter', JSON.stringify(state))
+  }, [state])
+
+  useEffect(() => {
+    const config = { attributes: false, childList: true, subtree: true }
+
+    if (isLoading && targetNode?.querySelectorAll('p').length === 1) {
+      setIsLoading(false)
+    }
+
+    const callback = (mutationList: MutationRecord[]) => {
+      for (const mutation of mutationList) {
+        if (mutation.type === 'childList') {
+          setIsLoading(false)
+        }
+      }
+    }
+
+    const observer = new MutationObserver(callback)
+    targetNode && observer.observe(targetNode, config)
+  }, [isLoading, targetNode])
+
+  return (
+    <>
+      <Alert severity="info">
+        <AlertTitle>Sensitive values are masked.</AlertTitle>
+        You can see the raw log data connecting to the machine and running{' '}
+        <strong>'docker logs --since 5m -f dblab_server'</strong>.
+      </Alert>
+      {window.innerWidth > LAPTOP_WIDTH_PX && (
+        <>
+          <section className={classes.filterSection}>
+            {Object.keys(state)
+              .slice(0, 3)
+              .map((key) => (
+                <FormCheckbox
+                  key={key}
+                  type={key.replace('[', '').replace(']', '')}
+                />
+              ))}
+          </section>
+          <section
+            className={classNames(classes.filterSection, classes.utilFilter)}
+          >
+            {Object.keys(state)
+              .slice(3, 10)
+              .map((key) => (
+                <FormCheckbox
+                  key={key}
+                  type={key.replace('[', '').replace(']', '')}
+                />
+              ))}
+          </section>
+        </>
+      )}
+      <div id="logs-container" className={classes.logsContainer}>
+        {isLoading ? (
+          <div className={classes.spinnerContainer}>
+            <Spinner />
+          </div>
+        ) : null}
+      </div>
+    </>
+  )
+}

package/pages/Logs/utils/index.ts

@@ -0,0 +1,20 @@
+export const stringWithoutBrackets = (val: string | undefined) =>
+  String(val).replace(/[\[\]]/g, '')
+
+export const stringContainsPattern = (
+  target: string,
+  pattern = [
+    'base.go',
+    'runners.go',
+    'snapshots.go',
+    'util.go',
+    'logging.go',
+    'ws.go',
+  ],
+) => {
+  let value: number = 0
+  pattern.forEach(function (word) {
+    value = value + Number(target?.includes(word))
+  })
+  return value === 1
+}

package/pages/Logs/wsLogs.ts

@@ -0,0 +1,126 @@
+import moment from 'moment'
+import { Api } from '../Instance/stores/Main'
+import { stringContainsPattern, stringWithoutBrackets } from './utils'
+
+const logsEndpoint = '/instance/logs'
+
+const LOGS_TIME_LIMIT = 20
+const LOGS_LINE_LIMIT = 1000
+
+export const establishConnection = async (api: Api, instanceId: string) => {
+  if (!api.getWSToken) return
+
+  const logElement = document.getElementById('logs-container')
+
+  if (logElement === null) {
+    console.log('Not found container element')
+    return
+  }
+
+  const appendLogElement = (logEntry: string, logType?: string) => {
+    const tag = document.createElement('p')
+    const logLevel = logEntry.split(' ')[3]
+    const logInitiator = logEntry.split(' ')[2]
+    const logsFilterState = JSON.parse(localStorage.getItem('logsFilter') || '')
+
+    const filterInitiators = Object.keys(logsFilterState).some((state) => {
+      if (logsFilterState[state]) {
+        if (state === '[other]') {
+          return !stringContainsPattern(logInitiator)
+        }
+        return logInitiator?.includes(stringWithoutBrackets(state))
+      }
+    })
+
+    if (
+      filterInitiators &&
+      (logsFilterState[logInitiator] ||
+        logsFilterState[logLevel] ||
+        logEntry === 'Connection Error')
+    ) {
+      tag.appendChild(document.createTextNode(logEntry))
+      logElement.appendChild(tag)
+    }
+
+    // we need to check both second and third element of logEntry,
+    // since the pattern of the response returned isn't always consistent
+    if (logInitiator === '[ERROR]' || logLevel === '[ERROR]') {
+      tag.classList.add('error-log')
+    }
+
+    if (logType === 'message') {
+      const logEntryTime = moment.utc(
+        logElement.children[0].innerHTML.split(' ').slice(0, 2).join(' '),
+      )
+
+      const timeDifference =
+        moment(logEntryTime).isValid() &&
+        moment.duration(moment.utc(Date.now()).diff(logEntryTime)).asMinutes()
+
+      if (
+        logElement.childElementCount > LOGS_LINE_LIMIT &&
+        Number(timeDifference) > LOGS_TIME_LIMIT
+      ) {
+        logElement.removeChild(logElement.children[0])
+      }
+    }
+
+    if (
+      logEntry.split(' ')[2] === '[ERROR]' ||
+      logEntry.split(' ')[3] === '[ERROR]'
+    ) {
+      tag.classList.add('error-log')
+    }
+  }
+
+  const { response, error } = await api.getWSToken({
+    instanceId: instanceId,
+  })
+
+  if (error || response == null) {
+    console.log('Not authorized:', error)
+    appendLogElement('Not authorized')
+    return
+  }
+
+  if (api.initWS == null) {
+    console.log('WebSocket Connection is not configured')
+    appendLogElement('WebSocket Connection is not configured')
+    return
+  }
+
+  const socket = api.initWS(logsEndpoint, response.token)
+
+  socket.onopen = () => {
+    console.log('Successfully Connected')
+  }
+
+  socket.onclose = (event) => {
+    console.log('Socket Closed Connection: ', event)
+    socket.send('Client Closed')
+    appendLogElement('DBLab Connection Closed')
+  }
+
+  socket.onerror = (error) => {
+    console.log('Socket Error: ', error)
+
+    appendLogElement('Connection Error')
+  }
+
+  socket.onmessage = function (event) {
+    const logEntry = decodeURIComponent(atob(event.data))
+    appendLogElement(logEntry, 'message')
+  }
+}
+
+export const restartConnection = (api: Api, instanceId: string) => {
+  const logElement = document.getElementById('logs-container')
+
+  if (logElement && logElement.childElementCount > 1) {
+    while (logElement.firstChild) {
+      logElement.removeChild(logElement.firstChild)
+    }
+  }
+
+  establishConnection(api, instanceId)
+}

package/pages/Logs/wsSnackbar.ts

@@ -0,0 +1,26 @@
+const LOGS_NEW_DATA_MESSAGE =
+  'New data arrived below - scroll down to see it 👇🏻'
+
+export const wsSnackbar = (clientAtBottom: boolean, isNewData: boolean) => {
+  const targetNode = document.getElementById('logs-container')
+  const snackbarTag = document.createElement('div')
+
+  if (!clientAtBottom && isNewData) {
+    if (!targetNode?.querySelector('.snackbar-tag')) {
+      targetNode?.appendChild(snackbarTag)
+      snackbarTag.classList.add('snackbar-tag')
+      if (snackbarTag.childNodes.length === 0) {
+        snackbarTag.appendChild(document.createTextNode(LOGS_NEW_DATA_MESSAGE))
+      }
+      snackbarTag.onclick = () => {
+        targetNode?.scrollIntoView({
+          behavior: 'smooth',
+          block: 'end',
+          inline: 'end',
+        })
+      }
+    }
+  } else {
+    targetNode?.querySelector('.snackbar-tag')?.remove()
+  }
+}

package/pages/Snapshots/Snapshot/DestorySnapshotModal/index.tsx

@@ -0,0 +1,144 @@
+/*--------------------------------------------------------------------------
+ * 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 {
+  Checkbox,
+  FormControlLabel,
+  Typography,
+  makeStyles,
+} from '@material-ui/core'
+
+import { Modal } from '@postgres.ai/shared/components/Modal'
+import { ImportantText } from '@postgres.ai/shared/components/ImportantText'
+import { Text } from '@postgres.ai/shared/components/Text'
+import { SimpleModalControls } from '@postgres.ai/shared/components/SimpleModalControls'
+import { DestroySnapshot } from '@postgres.ai/shared/types/api/endpoints/destroySnapshot'
+
+type Props = {
+  snapshotId: string
+  instanceId: string
+  isOpen: boolean
+  onClose: () => void
+  afterSubmitClick: () => void
+  destroySnapshot: DestroySnapshot
+}
+
+interface ErrorResponse {
+  error?: {
+    message?: string
+    details?: string
+  }
+}
+
+const useStyles = makeStyles(
+  {
+    errorMessage: {
+      color: 'red',
+      marginTop: '10px',
+      wordBreak: 'break-all',
+    },
+    checkboxRoot: {
+      padding: '9px 10px',
+    },
+    grayText: {
+      color: '#8a8a8a',
+      fontSize: '12px',
+      wordBreak: 'break-word',
+    },
+    marginTop: {
+      marginTop: '6px',
+    },
+  },
+  { index: 1 },
+)
+
+export const DestroySnapshotModal = ({
+  snapshotId,
+  instanceId,
+  isOpen,
+  onClose,
+  afterSubmitClick,
+  destroySnapshot,
+}: Props) => {
+  const classes = useStyles()
+  const [forceDelete, setForceDelete] = useState(false)
+  const [deleteError, setDeleteError] = useState<string | null>(null)
+  const [isForceDeleteOptionVisible, setForceDeleteOptionVisible] =
+    useState(false)
+
+  const handleClose = () => {
+    setDeleteError(null)
+    onClose()
+  }
+
+  const handleClickDestroy = () => {
+    destroySnapshot(snapshotId, forceDelete, instanceId).then((res) => {
+      if (res?.error) {
+        const errorMessage =
+          (res as ErrorResponse)?.error?.message ||
+          (res as ErrorResponse)?.error?.details
+        setDeleteError(errorMessage || null)
+        setForceDeleteOptionVisible(true)
+      } else {
+        afterSubmitClick()
+        handleClose()
+      }
+    })
+  }
+
+  return (
+    <Modal
+      title={'Confirmation'}
+      onClose={handleClose}
+      isOpen={isOpen}
+      size="sm"
+    >
+      <Text>
+        Are you sure you want to delete snapshot{' '}
+        <ImportantText>{snapshotId}</ImportantText>? This action cannot be
+        undone.
+      </Text>
+      {deleteError && <p className={classes.errorMessage}>{deleteError}</p>}
+      {isForceDeleteOptionVisible && (
+        <div className={classes.marginTop}>
+          <FormControlLabel
+            control={
+              <Checkbox
+                name="debug"
+                checked={forceDelete}
+                onChange={(e) => setForceDelete(e.target.checked)}
+                classes={{
+                  root: classes.checkboxRoot,
+                }}
+              />
+            }
+            label={'Force delete'}
+          />
+          <Typography className={classes.grayText}>
+            If the snapshot cannot be deleted due to dependencies, enabling
+            “Force delete” will remove it along with all dependent snapshots and
+            clones.
+          </Typography>
+        </div>
+      )}
+      <SimpleModalControls
+        items={[
+          {
+            text: 'Cancel',
+            onClick: handleClose,
+          },
+          {
+            text: 'Delete snapshot',
+            variant: 'primary',
+            onClick: handleClickDestroy,
+          },
+        ]}
+      />
+    </Modal>
+  )
+}

package/pages/Snapshots/Snapshot/context.ts

@@ -0,0 +1,26 @@
+import { createStrictContext } from '@postgres.ai/shared/utils/react'
+
+import { Api } from './stores/Main'
+import { Stores } from './useCreatedStores'
+
+export type Host = {
+  instanceId: string
+  snapshotId: string
+  routes: {
+    snapshot: () => string
+    snapshots: () => string
+    branch: (branchName: string) => string
+    clone: (cloneId: string) => string
+    createClone: (branchId: string, snapshotId: string) => string
+  }
+  api: Api
+  elements: {
+    breadcrumbs: React.ReactNode
+  }
+}
+
+export const { useStrictContext: useHost, Provider: HostProvider } =
+  createStrictContext<Host>()
+
+export const { useStrictContext: useStores, Provider: StoresProvider } =
+  createStrictContext<Stores>()