@postgres.ai/shared 3.5.1-pr-1027.0 → 4.0.0-pr-1028

package/pages/Instance/stores/SnapshotsModal.ts

@@ -1,35 +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 { makeAutoObservable } from 'mobx'
-
-type FilterOptions = {
-  pool?: string | null
-  date?: Date
-}
-
-export class SnapshotsModalStore {
-  isOpenModal = false
-  pool: string | null = null
-  date: Date | null = null
-
-  constructor() {
-    makeAutoObservable(this)
-  }
-
-  openModal = (filterOptions: FilterOptions | undefined = {}) => {
-    const { pool = null, date = null } = filterOptions
-
-    this.pool = pool
-    this.date = date
-    this.isOpenModal = true
-  }
-
-  closeModal = () => {
-    this.isOpenModal = false
-  }
-}

package/pages/Instance/useCreatedStores.ts

@@ -1,14 +0,0 @@
-import { useMemo } from 'react'
-
-import { MainStore } from './stores/Main'
-import { ClonesModalStore } from './stores/ClonesModal'
-import { SnapshotsModalStore } from './stores/SnapshotsModal'
-import { Host } from './context'
-
-export const useCreatedStores = (host: Host) => ({
-  main: useMemo(() => new MainStore(host.api), []),
-  clonesModal: useMemo(() => new ClonesModalStore(), []),
-  snapshotsModal: useMemo(() => new SnapshotsModalStore(), []),
-})
-
-export type Stores = ReturnType<typeof useCreatedStores>

package/pages/Logs/Icons/PlusIcon.tsx

@@ -1,8 +0,0 @@
-export const PlusIcon = () => (
-  <svg viewBox="0 0 512 512" focusable="false">
-    <path
-      fill="currentColor"
-      d="M289.94 256l95-95A24 24 0 00351 127l-95 95-95-95a24 24 0 00-34 34l95 95-95 95a24 24 0 1034 34l95-95 95 95a24 24 0 0034-34z"
-    ></path>
-  </svg>
-)

package/pages/Logs/constants/index.ts

@@ -1,7 +0,0 @@
-export const LOGS_NEW_DATA_MESSAGE =
-  'New data arrived below - scroll down to see it 👇🏻'
-
-export const LAPTOP_WIDTH_PX = 982
-export const LOGS_TIME_LIMIT = 20
-export const LOGS_LINE_LIMIT = 1000
-export const LOGS_ENDPOINT = '/instance/logs'

package/pages/Logs/hooks/useWsScroll.tsx

@@ -1,44 +0,0 @@
-import { useState, useEffect } from 'react'
-import { wsSnackbar } from '@postgres.ai/shared/pages/Logs/wsSnackbar'
-
-export const useWsScroll = (isLoading: boolean, simpleInstall?: boolean) => {
-  const [isNewData, setIsNewData] = useState(false)
-  const [isAtBottom, setIsAtBottom] = useState(true)
-
-  useEffect(() => {
-    !isLoading && wsSnackbar(isAtBottom, isNewData)
-    const targetNode = simpleInstall
-      ? document.getElementById('logs-container')?.parentElement
-      : document.getElementById('logs-container')
-
-    const clientAtBottom = (element: HTMLElement) =>
-      element.scrollHeight - element.scrollTop - 50 < element.clientHeight
-
-    const handleScroll = (e: Event) => {
-      if (clientAtBottom(e.target as HTMLElement)) {
-        setIsAtBottom(true)
-        setIsNewData(false)
-      } else {
-        setIsAtBottom(false)
-      }
-    }
-
-    const handleInsert = (e: Event | any) => {
-      if (e.srcElement?.tagName !== 'DIV') {
-        isAtBottom &&
-          targetNode?.scroll({
-            top: targetNode.scrollHeight,
-          })
-        setIsNewData(true)
-      }
-    }
-
-    targetNode?.addEventListener('scroll', handleScroll, false)
-    targetNode?.addEventListener('DOMNodeInserted', handleInsert, false)
-
-    return () => {
-      targetNode?.removeEventListener('scroll', handleScroll, false)
-      targetNode?.removeEventListener('DOMNodeInserted', handleInsert, false)
-    }
-  }, [isAtBottom, isNewData, isLoading])
-}

package/pages/Logs/index.tsx

@@ -1,267 +0,0 @@
-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 } from '@postgres.ai/shared/pages/Logs/wsLogs'
-import { useWsScroll } from '@postgres.ai/shared/pages/Logs/hooks/useWsScroll'
-import { LAPTOP_WIDTH_PX } from '@postgres.ai/shared/pages/Logs/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,
-
-      '&  > span': {
-        display: 'flex',
-        flexDirection: 'row',
-        gap: '5px',
-        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: '18px',
-        height: '18px',
-        cursor: 'pointer',
-      },
-    },
-    //  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)',
-      },
-    },
-    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 }: { api: Api }) => {
-  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 = {
-    '[DEBUG]': !isEmpty(logsFilterState) ? logsFilterState?.['[DEBUG]'] : true,
-    '[INFO]': !isEmpty(logsFilterState) ? logsFilterState?.['[INFO]'] : true,
-    '[ERROR]': !isEmpty(logsFilterState) ? logsFilterState?.['[ERROR]'] : true,
-    '[base.go]': !isEmpty(logsFilterState)
-      ? logsFilterState?.['[base.go]']
-      : true,
-    '[runners.go]': !isEmpty(logsFilterState)
-      ? logsFilterState?.['[runners.go]']
-      : true,
-    '[snapshots.go]': !isEmpty(logsFilterState)
-      ? logsFilterState?.['[snapshots.go]']
-      : true,
-    '[util.go]': !isEmpty(logsFilterState)
-      ? logsFilterState?.['[util.go]']
-      : true,
-    '[logging.go]': !isEmpty(logsFilterState)
-      ? logsFilterState?.['[logging.go]']
-      : false,
-    '[ws.go]': !isEmpty(logsFilterState) ? logsFilterState?.['[ws.go]'] : false,
-    '[other]': !isEmpty(logsFilterState) ? logsFilterState?.['[other]'] : true,
-  }
-
-  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)
-
-  const FormCheckbox = ({ type }: { type: string }) => {
-    const filterType = (state as Record<string, boolean>)[`[${type}]`]
-    return (
-      <span
-        onClick={() => dispatch({ type })}
-        className={
-          filterType && type !== 'ERROR'
-            ? classes.activeButton
-            : filterType && type === 'ERROR'
-            ? classes.activeError
-            : classes.passiveButton
-        }
-      >
-        <span>{type.toLowerCase()}</span>
-        <button aria-label="close" type="button">
-          <PlusIcon />
-        </button>
-      </span>
-    )
-  }
-
-  useEffect(() => {
-    if (api.initWS != undefined) {
-      establishConnection(api)
-    }
-  }, [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

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

@@ -1,110 +0,0 @@
-import moment from 'moment'
-
-import {
-  LOGS_ENDPOINT,
-  LOGS_LINE_LIMIT,
-  LOGS_TIME_LIMIT,
-} from '@postgres.ai/shared/pages/Logs/constants'
-import { Api } from '@postgres.ai/shared/pages/Instance/stores/Main'
-import {
-  stringWithoutBrackets,
-  stringContainsPattern,
-} from '@postgres.ai/shared/pages/Logs/utils'
-
-export const establishConnection = async (api: Api) => {
-  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 = logElement.children[1]?.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[1])
-      }
-    }
-  }
-
-  const { response, error } = await api.getWSToken({
-    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(LOGS_ENDPOINT, 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')
-  }
-}

package/pages/Logs/wsSnackbar.ts

@@ -1,27 +0,0 @@
-import { LOGS_NEW_DATA_MESSAGE } from '@postgres.ai/shared/pages/Logs/constants'
-
-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 &&
-        targetNode?.querySelector('p')?.textContent !== 'Not authorized'
-      ) {
-        snackbarTag.appendChild(document.createTextNode(LOGS_NEW_DATA_MESSAGE))
-      }
-      snackbarTag.onclick = () => {
-        targetNode?.scroll({
-          top: targetNode.scrollHeight,
-          behavior: 'smooth',
-        })
-      }
-    }
-  } else {
-    targetNode?.querySelector('.snackbar-tag')?.remove()
-  }
-}

package/scripts/copy-assets.js

@@ -1,30 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-const glob = require('glob');
-
-const OUT_DIR = 'dist';
-
-const PATTERNS = [
-  '**/*.scss',
-  '**/*.module.scss',
-  '**/*.json',
-  'react-app-env.d.ts',
-];
-
-const files = PATTERNS.flatMap(pattern =>
-  glob.sync(pattern, {
-    cwd: '.',
-    ignore: ['node_modules/**', 'dist/**'],
-    nodir: true,
-  })
-);
-
-files.forEach((file) => {
-  const from = path.resolve(file);
-  const to = path.join(OUT_DIR, file);
-  const dir = path.dirname(to);
-  fs.mkdirSync(dir, { recursive: true });
-  fs.copyFileSync(from, to);
-});
-
-console.log(`✅ Copied ${files.length} assets to dist`);

package/scripts/pack.js

@@ -1,70 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-const { execSync } = require('child_process');
-
-const TMP_DIR = 'build-tmp';
-const DIST_DIR = 'dist';
-const PACKAGE_JSON = 'package.json';
-
-function cleanTmp() {
-  if (fs.existsSync(TMP_DIR)) {
-    fs.rmSync(TMP_DIR, { recursive: true, force: true });
-  }
-}
-
-function run(cmd, options = {}) {
-  console.log(`$ ${cmd}`);
-  execSync(cmd, { stdio: 'inherit', ...options });
-}
-
-function copyDistToTmp() {
-  run(`rsync -a ${DIST_DIR}/ ${TMP_DIR}/`);
-}
-
-function copyExtraFiles() {
-  const extras = ['react-app-env.d.ts'];
-  extras.forEach((file) => {
-    if (fs.existsSync(file)) {
-      fs.copyFileSync(file, path.join(TMP_DIR, file));
-    }
-  });
-}
-
-function sanitizePackageJson() {
-  const original = JSON.parse(fs.readFileSync(PACKAGE_JSON, 'utf8'));
-  const cleaned = {
-    name: original.name,
-    version: original.version,
-    description: original.description,
-    author: original.author,
-    license: original.license,
-    main: original.main || 'index.js',
-    types: original.types || 'index.d.ts',
-    peerDependencies: original.peerDependencies,
-    dependencies: original.dependencies,
-  };
-
-  fs.writeFileSync(
-    path.join(TMP_DIR, 'package.json'),
-    JSON.stringify(cleaned, null, 2),
-    'utf8'
-  );
-}
-
-function pack() {
-  run('npm pack', { cwd: TMP_DIR });
-  const tarball = fs.readdirSync(TMP_DIR).find(f => f.endsWith('.tgz'));
-  fs.renameSync(path.join(TMP_DIR, tarball), path.join('.', tarball));
-  console.log(`✅ Packed to ./${tarball}`);
-}
-
-function buildTmpAndPack() {
-  cleanTmp();
-  run('pnpm run build');
-  copyDistToTmp();
-  sanitizePackageJson();
-  pack();
-  cleanTmp();
-}
-
-buildTmpAndPack();

package/stores/Snapshots.ts

@@ -1,54 +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 { makeAutoObservable } from 'mobx'
-
-import { Snapshot } from '@postgres.ai/shared/types/api/entities/snapshot'
-import { GetSnapshots } from '@postgres.ai/shared/types/api/endpoints/getSnapshots'
-
-export type SnapshotsApi = {
-  getSnapshots: GetSnapshots
-}
-export class SnapshotsStore {
-  data: Snapshot[] | null = null
-  error: string | null = null
-  isLoading = false
-
-  private readonly api: SnapshotsApi
-
-  constructor(api: SnapshotsApi) {
-    this.api = api
-
-    makeAutoObservable(this)
-  }
-
-  load = (instanceId: string) => {
-    this.data = null
-    this.error = null
-    return this.loadData(instanceId)
-  }
-
-  reload = (instanceId: string) => this.loadData(instanceId)
-
-  private loadData = async (instanceId: string) => {
-    this.isLoading = true
-
-    const { response, error } = await this.api.getSnapshots({ instanceId })
-
-    this.isLoading = false
-
-    if (response) this.data = response
-
-    if (error) {
-      this.error = await error
-        .json()
-        .then((error) => error.details?.split('"message": "')[1]?.split('"')[0])
-    }
-
-    return !!response
-  }
-}