@elice/material-runbox 1.230328.0 → 1.230418.1

package/es/components/material-runbox/MaterialRunboxHeader.js

@@ -0,0 +1,130 @@
+import { taggedTemplateLiteral as _taggedTemplateLiteral } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { useEliceRunboxRunning } from '@elice/runbox-client';
+import styled from '@emotion/styled';
+import { RestartAlt } from '@mui/icons-material';
+import { Stack, Box, Tooltip, FormControlLabel, Switch, IconButton } from '@mui/material';
+import { MaterialRunboxContext } from './context.js';
+import '@elice/openapi-client-material-runbox';
+import { useRunboxControl } from './hooks/useRunboxControl.js';
+import runboxLogoImage from '../../assets/runbox_logo.png.js';
+
+var _templateObject;
+//
+//
+//
+var StyledHeader = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  flex: 0 0 3rem;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0 1rem;\n  width: 100%;\n  border-bottom: 1px solid ", ";\n  overflow: hidden;\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.palette.divider;
+});
+//
+//
+//
+var MaterialRunboxHeader = function MaterialRunboxHeader(_ref2) {
+  var runbox = _ref2.runbox,
+    runtime = _ref2.runtime,
+    runtimeTemplate = _ref2.runtimeTemplate,
+    courseId = _ref2.courseId,
+    refetch = _ref2.refetch;
+  var intl = useIntl();
+  var _React$useContext = React.useContext(MaterialRunboxContext),
+    materialRunboxApi = _React$useContext.materialRunboxApi;
+  var _useEliceRunboxRunnin = useEliceRunboxRunning(),
+    status = _useEliceRunboxRunnin.status;
+  var _useRunboxControl = useRunboxControl({
+      runbox: runbox,
+      courseId: courseId,
+      refetch: refetch
+    }),
+    start = _useRunboxControl.start;
+  var isRunboxRunning = status === 'running';
+  /**
+   *
+   */
+  var handleAutoShutdownSwitchChange = function handleAutoShutdownSwitchChange(_, shutdown) {
+    if (!runtime) {
+      return;
+    }
+    materialRunboxApi.runtime.runtimeRuntimeIdPatch({
+      runtimeId: runtime.id,
+      runtimePatchRequest: {
+        autoShutdown: !shutdown
+      },
+      eliceCourseId: courseId
+    }).then(refetch).catch(function () {
+      //
+    });
+  };
+  /**
+   *
+   */
+  var renderHeaderAutoShutdownSwitch = function renderHeaderAutoShutdownSwitch() {
+    var _a;
+    return React.createElement(Tooltip, {
+      title: intl.formatMessage({
+        id: runtimeTemplate.autoShutdown ? 'material.runbox.header.autoShutdownDisabledTooltip' : 'material.runbox.header.autoShutdownTooltip'
+      }, {
+        time: intl.formatNumber((_a = runtimeTemplate.quotaPerSession) !== null && _a !== void 0 ? _a : 2880, {
+          style: 'unit',
+          unit: 'minute',
+          unitDisplay: 'short'
+        })
+      })
+    }, React.createElement(FormControlLabel, {
+      control: React.createElement(Switch, {
+        checked: !(runtime === null || runtime === void 0 ? void 0 : runtime.autoShutdown),
+        disabled: !runtime || runtimeTemplate.autoShutdown,
+        onChange: handleAutoShutdownSwitchChange
+      }),
+      label: intl.formatMessage({
+        id: 'material.runbox.header.autoShutdown'
+      }),
+      componentsProps: {
+        typography: {
+          variant: 'body2'
+        }
+      }
+    }));
+  };
+  /**
+   *
+   */
+  var renderHeaderRestartButton = function renderHeaderRestartButton() {
+    return React.createElement(Tooltip, {
+      title: intl.formatMessage({
+        id: 'material.runbox.header.restart'
+      })
+    }, React.createElement(IconButton, {
+      disabled: !isRunboxRunning,
+      sx: {
+        width: '38px'
+      },
+      onClick: function onClick() {
+        return start(true);
+      }
+    }, React.createElement(RestartAlt, null)));
+  };
+  //
+  //
+  //
+  return React.createElement(StyledHeader, null, React.createElement(Stack, {
+    direction: "row",
+    sx: {
+      height: '100%',
+      padding: '0.75rem 0'
+    }
+  }, React.createElement(Box, {
+    component: "img",
+    src: runboxLogoImage,
+    alt: "elice runbox",
+    sx: {
+      width: 'auto',
+      height: '100%'
+    }
+  })), React.createElement(Stack, {
+    direction: "row"
+  }, renderHeaderAutoShutdownSwitch(), renderHeaderRestartButton()));
+};
+
+export { MaterialRunboxHeader as default };

package/es/components/material-runbox/context.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { UseMaterialRunboxApiReturn } from './hooks';
+export declare type MaterialRunboxContextValue = MaterialRunboxContextExternalValue & MaterialRunboxContextInternalValue;
+export interface MaterialRunboxContextExternalValue {
+    /**  */
+    locale: string;
+    /**  */
+    showMessenger: () => void;
+}
+export declare type MaterialRunboxContextInternalValue = UseMaterialRunboxApiReturn;
+export declare const MaterialRunboxContext: import("react").Context<MaterialRunboxContextValue>;

package/es/components/material-runbox/context.js

@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+
+//
+//
+//
+var MaterialRunboxContext = createContext({});
+
+export { MaterialRunboxContext };

package/es/components/material-runbox/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useMaterialRunboxApi';
+export * from './useRunboxControl';

package/es/components/material-runbox/hooks/useMaterialRunboxApi.d.ts

@@ -0,0 +1,14 @@
+import { RunboxApi as EliceMaterialRunboxRunboxApi, RuntimeApi as EliceMaterialRunboxRuntimeApi, RuntimeTemplateApi as EliceMaterialRuntimeTemplateApi } from '@elice/openapi-client-material-runbox';
+import type { Configuration as EliceMaterialRunboxApiConfiguration } from '@elice/openapi-client-material-runbox';
+export interface UseMaterialRunboxApiProps {
+    eliceMaterialRunboxApiConfiguration: EliceMaterialRunboxApiConfiguration;
+}
+export interface UseMaterialRunboxApiReturnMaterialRunbox {
+    runbox: EliceMaterialRunboxRunboxApi;
+    runtime: EliceMaterialRunboxRuntimeApi;
+    runtimeTemplate: EliceMaterialRuntimeTemplateApi;
+}
+export interface UseMaterialRunboxApiReturn {
+    materialRunboxApi: UseMaterialRunboxApiReturnMaterialRunbox;
+}
+export declare const useMaterialRunboxApi: (props: UseMaterialRunboxApiProps) => UseMaterialRunboxApiReturn;

package/es/components/material-runbox/hooks/useMaterialRunboxApi.js

@@ -0,0 +1,42 @@
+import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { useRef, useState, useEffect } from 'react';
+import { RunboxApi, RuntimeApi, RuntimeTemplateApi } from '@elice/openapi-client-material-runbox';
+
+//
+//
+//
+var useMaterialRunboxApi = function useMaterialRunboxApi(props) {
+  var _return = useRef({});
+  //
+  //
+  //
+  var createMaterialRunboxApi = function createMaterialRunboxApi() {
+    return Object.freeze({
+      runbox: new RunboxApi(props.eliceMaterialRunboxApiConfiguration),
+      runtime: new RuntimeApi(props.eliceMaterialRunboxApiConfiguration),
+      runtimeTemplate: new RuntimeTemplateApi(props.eliceMaterialRunboxApiConfiguration)
+    });
+  };
+  //
+  //
+  //
+  var _useState = useState(createMaterialRunboxApi),
+    _useState2 = _slicedToArray(_useState, 2),
+    materialRunboxApi = _useState2[0],
+    setMaterialRunboxApi = _useState2[1];
+  //
+  //
+  //
+  useEffect(function () {
+    return setMaterialRunboxApi(createMaterialRunboxApi);
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [props.eliceMaterialRunboxApiConfiguration]);
+  //
+  //
+  //
+  _return.current.materialRunboxApi = materialRunboxApi;
+  return _return.current;
+};
+
+export { useMaterialRunboxApi };

package/es/components/material-runbox/hooks/useRunboxControl.d.ts

@@ -0,0 +1,11 @@
+import type { RuntimeProps } from '../runtime/Runtime';
+declare type UseRunboxControlProps = Pick<RuntimeProps, 'runbox' | 'courseId' | 'refetch'>;
+interface UseRunboxControlReturn {
+    start: (force?: boolean) => Promise<void>;
+    stop: () => Promise<void>;
+}
+/**
+ * Hook for runbox control and status.
+ */
+export declare const useRunboxControl: (props: UseRunboxControlProps) => UseRunboxControlReturn;
+export {};

package/es/components/material-runbox/hooks/useRunboxControl.js

@@ -0,0 +1,95 @@
+import { asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { useRef, useContext, useCallback } from 'react';
+import { useIntl } from 'react-intl';
+import { useEliceRunboxRunning } from '@elice/runbox-client';
+import { useSnackbar } from 'notistack';
+import { MaterialRunboxContext } from '../context.js';
+
+//
+//
+//
+/**
+ * Hook for runbox control and status.
+ */
+var useRunboxControl = function useRunboxControl(props) {
+  var _return = useRef({});
+  var intl = useIntl();
+  var _useSnackbar = useSnackbar(),
+    enqueueSnackbar = _useSnackbar.enqueueSnackbar;
+  var _useContext = useContext(MaterialRunboxContext),
+    materialRunboxApi = _useContext.materialRunboxApi;
+  var _useEliceRunboxRunnin = useEliceRunboxRunning(),
+    runboxStart = _useEliceRunboxRunnin.start,
+    runboxStop = _useEliceRunboxRunnin.stop;
+  /**
+   * Start project.
+   */
+  var start = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+    var force,
+      _args = arguments;
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          force = _args.length > 0 && _args[0] !== undefined ? _args[0] : false;
+          return _context.abrupt("return", runboxStart(function (signal) {
+            return materialRunboxApi.runbox.runboxRunboxIdStartPost({
+              runboxId: props.runbox.id,
+              eliceCourseId: props.courseId
+            }, {
+              signal: signal
+            });
+          }, force).then(function () {
+            return void props.refetch();
+          }).catch(function (err) {
+            if (err.name !== 'AbortError') {
+              enqueueSnackbar(intl.formatMessage({
+                id: 'material.runbox.runtime.message.startError'
+              }), {
+                variant: 'error'
+              });
+            }
+          }));
+        case 2:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })),
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [props.runbox.id, props.courseId, runboxStart]);
+  /**
+   * Stop project.
+   */
+  var stop = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+    return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          return _context2.abrupt("return", runboxStop(function (signal) {
+            return materialRunboxApi.runbox.runboxRunboxIdStopPost({
+              runboxId: props.runbox.id,
+              eliceCourseId: props.courseId
+            }, {
+              signal: signal
+            });
+          }).then(function () {
+            //
+          }).catch(function (err) {
+            if (err.name !== 'AbortError') ;
+          }));
+        case 1:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  })),
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [props.runbox.id, props.courseId, runboxStop]);
+  //
+  //
+  //
+  _return.current.start = start;
+  _return.current.stop = stop;
+  return _return.current;
+};
+
+export { useRunboxControl };

package/es/components/material-runbox/runtime/Runtime.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import type { RunboxGetAndListResponse, RuntimeGetAndListResponse, RuntimeTemplateGetAndListResponse } from '@elice/openapi-client-material-runbox';
+import type { QueryObserverResult } from '@tanstack/react-query';
+export interface RuntimeProps {
+    /**  */
+    runbox: RunboxGetAndListResponse;
+    /**  */
+    runtime: RuntimeGetAndListResponse | null;
+    /**  */
+    runtimeTemplate: RuntimeTemplateGetAndListResponse;
+    /**  */
+    courseId: number;
+    /**  */
+    refetch: () => Promise<QueryObserverResult<[
+        RunboxGetAndListResponse,
+        RuntimeGetAndListResponse,
+        RuntimeTemplateGetAndListResponse
+    ], unknown>>;
+}
+declare const Runtime: React.FC<RuntimeProps>;
+export default Runtime;

package/es/components/material-runbox/runtime/Runtime.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { EliceRunboxView } from '@elice/runbox-client';
+import '@elice/openapi-client-material-runbox';
+import { useRunboxControl } from '../hooks/useRunboxControl.js';
+import RuntimeOverlayAssigned from './RuntimeOverlayAssigned.js';
+import RuntimeOverlayQueued from './RuntimeOverlayQueued.js';
+import RuntimeOverlayTerminated from './RuntimeOverlayTerminated.js';
+
+//
+//
+//
+var Runtime = function Runtime(props) {
+  var _useRunboxControl = useRunboxControl(props),
+    startRuntime = _useRunboxControl.start;
+  //
+  //
+  //
+  React.useEffect(function () {
+    if (!props.runbox.id) {
+      return;
+    }
+    void startRuntime(
+    // check whether runtime is already assigned, or not.
+    // if runtime not assigned, should be restarted (ignore previous running state)
+    !props.runtime);
+    // NOTICE: do not stop runtime when unmounting,
+    // since it will automatically stopped by the server.
+    // return () => {
+    //   if (props.runtimeTemplate.autoShutdown) {
+    //     stopRuntime();
+    //   }
+    // };
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [props.runbox.id]);
+  //
+  //
+  //
+  return React.createElement(EliceRunboxView, {
+    OverlayAssigned: RuntimeOverlayAssigned,
+    OverlayQueued: RuntimeOverlayQueued,
+    OverlayTerminated: function OverlayTerminated(props) {
+      return React.createElement(RuntimeOverlayTerminated, Object.assign({}, props, {
+        startRuntime: startRuntime
+      }));
+    }
+  });
+};
+
+export { Runtime as default };

package/es/components/material-runbox/runtime/RuntimeOverlayAssigned.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { EliceRunboxViewerOverlayAssignedComponentProps as AssignedComponentProps } from '@elice/runbox-client';
+declare const RuntimeOverlayAssigned: React.FC<AssignedComponentProps>;
+export default RuntimeOverlayAssigned;

package/es/components/material-runbox/runtime/RuntimeOverlayAssigned.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { Stack, Box, Typography } from '@mui/material';
+import queueAnimationImage from '../../../assets/queue.gif.js';
+
+//
+//
+//
+var RuntimeOverlayAssigned = function RuntimeOverlayAssigned() {
+  return React.createElement(Stack, {
+    gap: "1.5rem",
+    sx: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      width: '100%',
+      height: '100%'
+    }
+  }, React.createElement(Box, {
+    component: "img",
+    src: queueAnimationImage,
+    alt: "queue",
+    sx: {
+      width: '100%',
+      height: 'auto',
+      maxWidth: '13.375rem'
+    }
+  }), React.createElement(Typography, {
+    variant: "subtitle2",
+    color: "text:secondary",
+    sx: {
+      whiteSpace: 'pre-wrap',
+      textAlign: 'center'
+    }
+  }, React.createElement(FormattedMessage, {
+    id: "material.runbox.runtime.overlay.assigned.description"
+  })));
+};
+
+export { RuntimeOverlayAssigned as default };

package/es/components/material-runbox/runtime/RuntimeOverlayQueued.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { EliceRunboxViewerOverlayQueuedComponentProps as QueuedComponentProps } from '@elice/runbox-client';
+declare const RuntimeOverlayQueued: React.FC<QueuedComponentProps>;
+export default RuntimeOverlayQueued;

package/es/components/material-runbox/runtime/RuntimeOverlayQueued.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { QuestionAnswer } from '@mui/icons-material';
+import { Stack, Box, Typography, Button } from '@mui/material';
+import { MaterialRunboxContext } from '../context.js';
+import queueAnimationImage from '../../../assets/queue.gif.js';
+
+//
+//
+//
+var RuntimeOverlayQueued = function RuntimeOverlayQueued(_ref) {
+  var numWaiters = _ref.numWaiters;
+  var _React$useContext = React.useContext(MaterialRunboxContext),
+    showMessenger = _React$useContext.showMessenger;
+  //
+  //
+  //
+  return React.createElement(Stack, {
+    gap: "1.5rem",
+    sx: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      width: '100%',
+      height: '100%'
+    }
+  }, React.createElement(Box, {
+    component: "img",
+    src: queueAnimationImage,
+    alt: "queue",
+    sx: {
+      width: '100%',
+      height: 'auto',
+      maxWidth: '13.375rem'
+    }
+  }), React.createElement(Typography, {
+    variant: "subtitle2",
+    color: "text:secondary"
+  }, numWaiters > 0 ? React.createElement(FormattedMessage, {
+    id: "material.runbox.runtime.overlay.queued.description",
+    values: {
+      waiters: numWaiters
+    }
+  }) : React.createElement(FormattedMessage, {
+    id: "material.runbox.runtime.overlay.queued.description_zero"
+  })), React.createElement(Button, {
+    variant: "outlined",
+    startIcon: React.createElement(QuestionAnswer, null),
+    onClick: showMessenger
+  }, React.createElement(FormattedMessage, {
+    id: "common.support"
+  })));
+};
+
+export { RuntimeOverlayQueued as default };

package/es/components/material-runbox/runtime/RuntimeOverlayTerminated.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { EliceRunboxViewerOverlayTerminatedComponentProps as TerminatedComponentProps } from '@elice/runbox-client';
+interface RuntimeOverlayTerminatedProps extends TerminatedComponentProps {
+    startRuntime: () => Promise<void>;
+}
+declare const RuntimeOverlayTerminated: React.FC<RuntimeOverlayTerminatedProps>;
+export default RuntimeOverlayTerminated;

package/es/components/material-runbox/runtime/RuntimeOverlayTerminated.js

@@ -0,0 +1,136 @@
+import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import React from 'react';
+import { useIntl, FormattedMessage } from 'react-intl';
+import { PlayArrow } from '@mui/icons-material';
+import { LoadingButton } from '@mui/lab';
+import { Box, Stack, Typography, Button } from '@mui/material';
+import { MaterialRunboxContext } from '../context.js';
+import runboxTerminatedImage from '../../../assets/terminated.png.js';
+
+//
+//
+//
+var RuntimeOverlayTerminated = function RuntimeOverlayTerminated(_ref) {
+  var reason = _ref.reason,
+    startRuntime = _ref.startRuntime;
+  var intl = useIntl();
+  var _React$useContext = React.useContext(MaterialRunboxContext),
+    showMessenger = _React$useContext.showMessenger;
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    isRestarting = _React$useState2[0],
+    setRestarting = _React$useState2[1];
+  /**
+   * Restart the project.
+   */
+  var handleRestart = function handleRestart() {
+    setRestarting(true);
+    startRuntime().finally(function () {
+      setRestarting(false);
+    });
+  };
+  /**
+   * Terminated description and action.
+   */
+  var runtimeTerminatedAction = React.useMemo(function () {
+    switch (reason) {
+      // general shutdown
+      case 'stopped_by_user':
+      case 'auto_shutdown':
+        return {
+          description: intl.formatMessage({
+            id: 'material.runbox.runtime.overlay.terminated.description.general'
+          }),
+          unexpected: false
+        };
+      case 'quota_exceeded':
+        return {
+          description: intl.formatMessage({
+            id: 'material.runbox.runtime.overlay.terminated.description.quota_exceeded'
+          }),
+          unexpected: false
+        };
+      // quota exceeded
+      case 'quota_per_session_exceeded':
+        return {
+          description: intl.formatMessage({
+            id: 'material.runbox.runtime.overlay.terminated.description.quota_per_session_exceeded'
+          }),
+          unexpected: false
+        };
+      // disk full
+      case 'os_disk_is_full':
+        return {
+          description: intl.formatMessage({
+            id: 'material.runbox.runtime.overlay.terminated.description.os_disk_is_full'
+          }),
+          unexpected: true
+        };
+      default:
+        return {
+          description: intl.formatMessage({
+            id: 'material.runbox.runtime.overlay.terminated.description.default'
+          }),
+          unexpected: true
+        };
+    }
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [reason, intl]);
+  //
+  //
+  //
+  return React.createElement(Box, {
+    sx: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      width: '100%',
+      height: '100%'
+    }
+  }, React.createElement(Stack, {
+    gap: "1.5rem",
+    alignItems: "center"
+  }, React.createElement(Box, {
+    component: "img",
+    src: runboxTerminatedImage,
+    alt: "terminated",
+    sx: {
+      maxWidth: '10rem',
+      height: 'auto'
+    }
+  }), React.createElement(Stack, {
+    gap: "0.5rem"
+  }, React.createElement(Typography, {
+    variant: "h6",
+    textAlign: "center"
+  }, React.createElement(FormattedMessage, {
+    id: "material.runbox.runtime.overlay.terminated.title"
+  })), React.createElement(Typography, {
+    variant: "body2",
+    textAlign: "center",
+    whiteSpace: "pre-line"
+  }, runtimeTerminatedAction.unexpected ? runtimeTerminatedAction.description.concat('\n', intl.formatMessage({
+    id: 'material.runbox.runtime.overlay.terminated.description.unexpected'
+  })) : runtimeTerminatedAction.description)), React.createElement(Stack, {
+    gap: "0.5rem",
+    sx: {
+      width: '100%',
+      maxWidth: '17rem'
+    }
+  }, React.createElement(LoadingButton, {
+    variant: "contained",
+    loading: isRestarting,
+    startIcon: React.createElement(PlayArrow, null),
+    onClick: handleRestart
+  }, React.createElement(FormattedMessage, {
+    id: "material.runbox.runtime.overlay.terminated.restart"
+  })), runtimeTerminatedAction.unexpected ? React.createElement(Button, {
+    variant: "text",
+    onClick: showMessenger
+  }, React.createElement(FormattedMessage, {
+    id: "common.support"
+  })) : null)));
+};
+
+export { RuntimeOverlayTerminated as default };