terminal page

model.js

import {
  createEffect,
  createEvent,
  createStore,
  sample,
  merge,
  guard,
  forward
} from 'effector';

import {
  fetchTerminals,
  fetchTerminalsByMacs,
  requestShowInfoOnTerminal,
  requestSoftRestartTerminal,
  requestRemoteAccessPort,
  requestDeleteTerminal,
  requestTerminalTasks,
  requestMakeScreenShot,
  requestRemoveTerminalTask,
  requestTerminalLogs,
  requestUpdateTerminalTask
} from 'api/terminals';

import { remoteAccess } from 'ui/Popover';

const unless = (fx, condition) =>
  sample({
    source: fx,
    clock: guard(fx.finally, {
      filter: condition
    }),
    target: fx
  });

export const setCurrentTerminal = createEvent('setCurrentTerminal');
export const showInfoOnTerminal = createEvent('showInfoOnTerminal');
export const hardRestart = createEvent('hardRestart');
export const softRestart = createEvent('softRestart');
export const removeTerminal = createEvent('removeTerminal');
export const getTasks = createEvent('getTasks');
export const removeScreenshots = createEvent('removeScreenshots');
export const makeScreenshots = createEvent('makeScreenshots');
export const getLogs = createEvent('getLogs');
export const removeLogs = createEvent('removeLogs');
export const getAccess = createEvent('getAccess');
export const removeAccess = createEvent('removeAccess');

export const getTerminals = createEffect('getTerminals', {
  handler: fetchTerminals
});

const getTerminalsByIds = createEffect('getTerminalsByIds', {
  handler: async ({ result: { terminalIds } }) => {
    return fetchTerminalsByMacs(terminalIds);
  }
});

const fxShowInfoOnTerminal = createEffect('fxShowInfoOnTerminal', {
  handler: requestShowInfoOnTerminal
});

const fxSoftRestartTerminal = createEffect('fxSoftRestartTerminal', {
  handler: requestSoftRestartTerminal
});

const fxGetPort = createEffect('fxGetPort', {
  handler: requestRemoteAccessPort
});

const fxDeleteTerminal = createEffect('fxDeleteTerminal', {
  handler: requestDeleteTerminal
});

const fxGetTasks = createEffect('fxGetTasks', {
  handler: requestTerminalTasks
});

const fxRemoveTask = createEffect('fxRemoveTask', {
  handler: requestRemoveTerminalTask
});

const fxUpdateTask = createEffect('fxRemoveTask', {
  handler: requestUpdateTerminalTask
});

const fxMakeScreenshots = createEffect('fxMakeScreenshots', {
  handler: requestMakeScreenShot
});

const fxGetLogs = createEffect('fxGetLogs', {
  handler: requestTerminalLogs
});

getTerminals.done.watch(getTerminalsByIds);

const setTerminalsData = getTerminalsByIds.done.map(({ result }) => {
  const { terminalsByMacs } = result;
  return Object.values(terminalsByMacs).map(({ terminals }) => {
    const [terminal] = terminals;
    return terminal;
  });
});

const $terminals = createStore([]);
export const $currentTerminal = createStore(null);

$terminals.on(setTerminalsData, (_, terminals) => terminals);

$currentTerminal.on(
  setCurrentTerminal,
  (_, currentTerminal) => currentTerminal
);

export const $onlineTerminals = $terminals.map(terminals =>
  terminals.filter(terminal => terminal.isOnline === true)
);

export const $offlineTerminals = $terminals.map(terminals =>
  terminals.filter(terminal => terminal.isOnline === false)
);

export const $screenshots = createStore([]);
export const $logs = createStore([]);
export const $ports = createStore({ sshport: [], chromeport: [], vncport: [] });

const setScreenshots = fxGetTasks.done.map(
  ({ params, result: { tasks: screenshots } }) => {
    if (params.type !== 'screenshots') return undefined;
    return Object.keys(screenshots).reduce((acc, taskId) => {
      acc.push({ taskId, ...screenshots[taskId] });
      return acc;
    }, []);
  }
);

const setLogs = fxGetTasks.done.map(({ params, result: { tasks: logs } }) => {
  if (params.type !== 'logs') return undefined;
  return Object.keys(logs).reduce((acc, taskId) => {
    acc.push({ taskId, ...logs[taskId] });
    return acc;
  }, []);
});

const setPorts = fxGetTasks.done
  .map(({ params, result: { tasks: ports } }) => {
    if (!['sshport', 'chromeport', 'vncport'].includes(params.type)) {
      return undefined;
    }

    if (Object.keys(ports).length === 0) return undefined;

    return Object.keys(ports).reduce(
      (acc, taskId) => {
        acc[params.type].push({ taskId, ...ports[taskId] });
        return acc;
      },
      { [params.type]: [] }
    );
  })
  .filter({ fn: Boolean });

$screenshots
  .on(setScreenshots, (_, screenshots) => screenshots)
  .on(removeScreenshots, (screenshots, id) =>
    screenshots.filter(({ taskId }) => taskId !== id)
  );

$logs
  .on(setLogs, (_, logs) => logs)
  .on(removeLogs, (logs, id) => logs.filter(({ taskId }) => taskId !== id));

$ports
  .on(setPorts, (state, ports) => ({ ...state, ...ports }))
  .on(removeAccess, (ports, { id, type }) => ({
    ...ports,
    [type]: ports[type].filter(({ taskId }) => taskId !== id)
  }))
  .reset(getTasks);

removeScreenshots.watch(fxRemoveTask);
removeLogs.watch(fxRemoveTask);
removeAccess.watch(fxRemoveTask);

forward({
  from: merge([fxMakeScreenshots.done, fxGetLogs.done, fxGetPort.done]).map(
    ({ result: { taskId } }) => taskId
  ),
  to: fxUpdateTask
});

unless(fxUpdateTask, ({ result: { taskState } }) => taskState !== 'OK')
  .done.filter({ fn: ({ result: { taskState } }) => taskState === 'OK' })
  .watch(({ result: { taskType, terminalId, taskData: { result } } }) => {
    if (['sshport', 'chromeport', 'vncport'].includes(taskType)) {
      remoteAccess({ taskType, port: result });
    }
    fxGetTasks({ terminalId, type: taskType });
  });

sample({
  source: $currentTerminal,
  clock: showInfoOnTerminal,
  target: fxShowInfoOnTerminal,
  fn: ({ terminalId }) => terminalId
});

sample({
  source: $currentTerminal,
  clock: hardRestart,
  target: fxSoftRestartTerminal,
  fn: ({ terminalId }) => ({ terminalId, type: 'reset' })
});

sample({
  source: $currentTerminal,
  clock: softRestart,
  target: fxSoftRestartTerminal,
  fn: ({ terminalId }) => ({ terminalId, type: 'restart' })
});

sample({
  source: $currentTerminal,
  clock: removeTerminal,
  target: fxDeleteTerminal,
  fn: ({ terminalId }) => terminalId
});

sample({
  source: $currentTerminal,
  clock: getTasks,
  target: fxGetTasks,
  fn: ({ terminalId }, type) => ({ terminalId, type })
});

sample({
  source: $currentTerminal,
  clock: makeScreenshots,
  target: fxMakeScreenshots,
  fn: ({ terminalId }) => terminalId
});

sample({
  source: $currentTerminal,
  clock: getLogs,
  target: fxGetLogs,
  fn: ({ terminalId }) => terminalId
});

sample({
  source: $currentTerminal,
  clock: getAccess,
  target: fxGetPort,
  fn: (terminal, payload) => {
    const { terminalId = null } = terminal === null ? {} : terminal;
    const id = typeof payload === 'object' ? payload.terminalId : terminalId;
    const type = typeof payload === 'object' ? payload.type : payload;
    return { terminalId: id, type };
  }
});