@elice/material-runbox 1.260825.0-runboxusability.2 → 1.260825.0-runboxusability.3

package/cjs/components/material-runbox/status/MaterialRunboxStatusButton.d.ts

@@ -1,12 +1,7 @@
 import React from 'react';
 export interface MaterialRunboxStatusButtonProps {
-    /**
-     * Bottom action slot of the popover.
-     *
-     * NOTICE: the "실습 환경 초기화" button is out of scope for PLAT-4181.
-     * PLAT-4184 injects it here.
-     */
-    bottomAction?: React.ReactNode;
+    runboxId: string;
+    courseId: number;
 }
 /**
  * Opens the runbox connection/resource status popover.

package/cjs/components/material-runbox/status/MaterialRunboxStatusButton.js

@@ -11,6 +11,7 @@ var runboxClient = require('@elice/runbox-client');
 var proSolidSvgIcons = require('@fortawesome/pro-solid-svg-icons');
 var material = require('@mui/material');
 var MaterialRunboxStatusPopover = require('./MaterialRunboxStatusPopover.js');
+var useRunboxDiskUsage = require('../hooks/useRunboxDiskUsage.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -26,15 +27,49 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
  * so the numbers are only shown on explicit request. (`[R-5]` `[R-6]`)
  */
 var MaterialRunboxStatusButton = function MaterialRunboxStatusButton(_ref) {
-  var bottomAction = _ref.bottomAction;
+  var runboxId = _ref.runboxId,
+    courseId = _ref.courseId;
   var intl$1 = intl.useRawEliceIntl();
   var _useEliceRunboxRunnin = runboxClient.useEliceRunboxRunning(),
     status = _useEliceRunboxRunnin.status;
+  var _useRunboxDiskUsage = useRunboxDiskUsage.useRunboxDiskUsage(),
+    severity = _useRunboxDiskUsage.severity,
+    diskCurrent = _useRunboxDiskUsage.diskCurrent,
+    diskTotal = _useRunboxDiskUsage.diskTotal;
   var _React$useState = React__default.default.useState(null),
     _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
     anchorEl = _React$useState2[0],
     setAnchorEl = _React$useState2[1];
   var isRunboxRunning = status === 'running';
+  /**
+   * Over threshold the button turns into a disk gauge, so the learner sees the
+   * number that matters without opening the popover.
+   */
+  var buttonProps = severity ? {
+    color: severity,
+    startIcon: jsxRuntime.jsx(muiElements.EliceIcon, {
+      icon: proSolidSvgIcons.faDiscDrive
+    }),
+    children: "DISK ".concat(intl$1.formatDataSize(diskCurrent, {
+      unitSystem: 'iec',
+      maximumFractionDigits: 2
+    }), " / ").concat(intl$1.formatDataSize(diskTotal, {
+      unitSystem: 'iec',
+      maximumFractionDigits: 2
+    }))
+  } : {
+    color: 'inherit',
+    startIcon: jsxRuntime.jsx(muiElements.EliceIcon, {
+      icon: proSolidSvgIcons.faWifi
+    }),
+    // The label follows the header, but the icon keeps reporting the runtime.
+    sx: _rollupPluginBabelHelpers.defineProperty({}, "& .".concat(material.buttonClasses.startIcon), {
+      color: isRunboxRunning ? 'success.main' : 'text.disabled'
+    }),
+    children: intl$1.formatMessage({
+      id: 'runbox.status.button.title'
+    })
+  };
   /**
    *
    */
@@ -45,28 +80,18 @@ var MaterialRunboxStatusButton = function MaterialRunboxStatusButton(_ref) {
   //
   //
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [jsxRuntime.jsx(material.Button, {
+    children: [jsxRuntime.jsx(material.Button, Object.assign({
       variant: "text",
       size: "small",
-      color: "inherit",
-      startIcon: jsxRuntime.jsx(muiElements.EliceIcon, {
-        icon: proSolidSvgIcons.faWifi
-      }),
       endIcon: jsxRuntime.jsx(muiElements.EliceIcon, {
         icon: proSolidSvgIcons.faAngleDown
       }),
-      sx: _rollupPluginBabelHelpers.defineProperty({}, "& .".concat(material.buttonClasses.startIcon), {
-        color: isRunboxRunning ? 'success.main' : 'text.disabled'
-      }),
       onClick: function onClick(e) {
         return setAnchorEl(function (prev) {
           return prev ? null : e.currentTarget;
         });
-      },
-      children: intl$1.formatMessage({
-        id: 'runbox.status.button.title'
-      })
-    }), jsxRuntime.jsx(MaterialRunboxStatusPopover.default, {
+      }
+    }, buttonProps)), jsxRuntime.jsx(MaterialRunboxStatusPopover.default, {
       open: Boolean(anchorEl),
       anchorEl: anchorEl,
       anchorOrigin: {
@@ -80,7 +105,8 @@ var MaterialRunboxStatusButton = function MaterialRunboxStatusButton(_ref) {
       sx: {
         marginTop: '0.5rem'
       },
-      bottomAction: bottomAction,
+      runboxId: runboxId,
+      courseId: courseId,
       onClose: handleClose
     })]
   });

package/cjs/components/material-runbox/status/MaterialRunboxStatusPopover.d.ts

@@ -5,13 +5,8 @@ export interface MaterialRunboxStatusPopoverProps extends Omit<PopoverProps, 'op
     open: boolean;
     /** Called when the popover requests to be closed. */
     onClose: () => void;
-    /**
-     * Bottom action slot.
-     *
-     * NOTICE: the "실습 환경 초기화" button is out of scope for PLAT-4181.
-     * PLAT-4184 injects it here.
-     */
-    bottomAction?: React.ReactNode;
+    runboxId: string;
+    courseId: number;
 }
 declare const MaterialRunboxStatusPopover: React.FC<MaterialRunboxStatusPopoverProps>;
 export default MaterialRunboxStatusPopover;

package/cjs/components/material-runbox/status/MaterialRunboxStatusPopover.js

@@ -13,6 +13,7 @@ var material = require('@mui/material');
 var MaterialRunboxStatusConnectionItem = require('./MaterialRunboxStatusConnectionItem.js');
 var MaterialRunboxStatusResourceItem = require('./MaterialRunboxStatusResourceItem.js');
 var useRunboxNetworkStatus = require('../hooks/useRunboxNetworkStatus.js');
+var MaterialRunboxEnvResetButton = require('../disk/MaterialRunboxEnvResetButton.js');
 
 //
 //
@@ -26,8 +27,9 @@ var NETWORK_COLOR = Object.freeze(_rollupPluginBabelHelpers.defineProperty(_roll
 var MaterialRunboxStatusPopover = function MaterialRunboxStatusPopover(_a) {
   var open = _a.open,
     onClose = _a.onClose,
-    bottomAction = _a.bottomAction,
-    props = tslib.__rest(_a, ["open", "onClose", "bottomAction"]);
+    runboxId = _a.runboxId,
+    courseId = _a.courseId,
+    props = tslib.__rest(_a, ["open", "onClose", "runboxId", "courseId"]);
   var intl$1 = intl.useRawEliceIntl();
   var _useEliceRunboxRunnin = runboxClient.useEliceRunboxRunning(),
     status = _useEliceRunboxRunnin.status;
@@ -134,7 +136,16 @@ var MaterialRunboxStatusPopover = function MaterialRunboxStatusPopover(_a) {
             }))
           })]
         })]
-      }) : null, bottomAction]
+      }) : null, jsxRuntime.jsx(MaterialRunboxEnvResetButton.default, {
+        fullWidth: true,
+        variant: "contained",
+        color: "error",
+        startIcon: jsxRuntime.jsx(muiElements.EliceIcon, {
+          icon: proSolidSvgIcons.faArrowsRotate
+        }),
+        runboxId: runboxId,
+        courseId: courseId
+      })]
     })
   }));
 };

package/cjs/utils/index.d.ts

@@ -1 +1,2 @@
+export * from './polling';
 export * from './time';

package/cjs/utils/index.js

@@ -1,7 +1,10 @@
 'use strict';
 
+var polling = require('./polling.js');
 var time = require('./time.js');
 
 
 
+exports.PollingAbortError = polling.PollingAbortError;
+exports.polling = polling.polling;
 exports.getTimeParts = time.getTimeParts;

package/cjs/utils/polling.d.ts

@@ -0,0 +1,56 @@
+interface PollingFnParams {
+    signal: AbortSignal;
+}
+interface PollingTimers {
+    setTimeout: typeof globalThis.setTimeout;
+    clearTimeout: typeof globalThis.clearTimeout;
+}
+interface PollingOptions<R> {
+    /**
+     * Function to polling request.
+     */
+    pollingFn: (params: PollingFnParams) => Promise<R>;
+    /**
+     * Function to check if the polling request is successful.
+     */
+    until: (res: R) => boolean;
+    /**
+     * Interval of polling.
+     */
+    interval?: number;
+    /**
+     * Maximum number of attempts.
+     */
+    maxAttempts?: number;
+    /**
+     * Abort signal.
+     */
+    signal?: AbortSignal;
+    /**
+     * Function on each poll.
+     */
+    onPoll?: (res: R) => void;
+    /**
+     * Custom timer implementation for the sleep between attempts.
+     *
+     * ```ts
+     * polling({
+     *   pollingFn,
+     *   until,
+     *   timers: {
+     *     setTimeout: window.setTimeout,
+     *     clearTimeout: window.clearTimeout,
+     *   },
+     * });
+     * ```
+     */
+    timers?: PollingTimers;
+}
+export declare class PollingAbortError extends Error {
+    constructor(message?: string);
+}
+/**
+ *
+ */
+export declare function polling<R>(options: PollingOptions<R>): Promise<R>;
+export {};

package/cjs/utils/polling.js

@@ -0,0 +1,108 @@
+'use strict';
+
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.js');
+var workerTimers = require('worker-timers');
+
+//
+//
+//
+var DEFAULT_MAX_ATTEMPTS = 10;
+var DEFAULT_INTERVAL = 1000;
+//
+//
+//
+var PollingAbortError = /*#__PURE__*/function (_Error) {
+  function PollingAbortError(message) {
+    var _this;
+    _rollupPluginBabelHelpers.classCallCheck(this, PollingAbortError);
+    _this = _rollupPluginBabelHelpers.callSuper(this, PollingAbortError, [message || 'Polling aborted']);
+    _this.name = 'AbortError';
+    return _this;
+  }
+  _rollupPluginBabelHelpers.inherits(PollingAbortError, _Error);
+  return _rollupPluginBabelHelpers.createClass(PollingAbortError);
+}(/*#__PURE__*/_rollupPluginBabelHelpers.wrapNativeSuper(Error));
+/**
+ *
+ */
+function polling(_x) {
+  return _polling.apply(this, arguments);
+}
+function _polling() {
+  _polling = _rollupPluginBabelHelpers.asyncToGenerator(/*#__PURE__*/_rollupPluginBabelHelpers.regenerator().m(function _callee2(options) {
+    var _a, _b, _c, _d, _e, _f, _g, period, maxAttempts, signal, setTimeoutFn, clearTimeoutFn, __sleep, attempt, result;
+    return _rollupPluginBabelHelpers.regenerator().w(function (_context2) {
+      while (1) switch (_context2.n) {
+        case 0:
+          period = (_a = options === null || options === void 0 ? void 0 : options.interval) !== null && _a !== void 0 ? _a : DEFAULT_INTERVAL;
+          maxAttempts = (_b = options === null || options === void 0 ? void 0 : options.maxAttempts) !== null && _b !== void 0 ? _b : DEFAULT_MAX_ATTEMPTS;
+          signal = (_c = options === null || options === void 0 ? void 0 : options.signal) !== null && _c !== void 0 ? _c : new AbortController().signal;
+          setTimeoutFn = (_e = (_d = options === null || options === void 0 ? void 0 : options.timers) === null || _d === void 0 ? void 0 : _d.setTimeout) !== null && _e !== void 0 ? _e : workerTimers.setTimeout;
+          clearTimeoutFn = (_g = (_f = options === null || options === void 0 ? void 0 : options.timers) === null || _f === void 0 ? void 0 : _f.clearTimeout) !== null && _g !== void 0 ? _g : workerTimers.clearTimeout;
+          __sleep = /*#__PURE__*/function () {
+            var _ref = _rollupPluginBabelHelpers.asyncToGenerator(/*#__PURE__*/_rollupPluginBabelHelpers.regenerator().m(function _callee() {
+              return _rollupPluginBabelHelpers.regenerator().w(function (_context) {
+                while (1) switch (_context.n) {
+                  case 0:
+                    return _context.a(2, new Promise(function (resolve, reject) {
+                      if (signal.aborted) {
+                        return reject(new PollingAbortError());
+                      }
+                      var id = setTimeoutFn(resolve, period);
+                      signal.addEventListener('abort', function () {
+                        clearTimeoutFn(id);
+                        reject(new PollingAbortError());
+                      }, {
+                        once: true
+                      });
+                    }));
+                }
+              }, _callee);
+            }));
+            return function __sleep() {
+              return _ref.apply(this, arguments);
+            };
+          }();
+          attempt = 1;
+        case 1:
+          if (!(attempt <= maxAttempts)) {
+            _context2.n = 5;
+            break;
+          }
+          _context2.n = 2;
+          return options.pollingFn({
+            signal: signal
+          });
+        case 2:
+          result = _context2.v;
+          if (typeof options.onPoll === 'function') {
+            options.onPoll(result);
+          }
+          if (!options.until(result)) {
+            _context2.n = 3;
+            break;
+          }
+          return _context2.a(2, result);
+        case 3:
+          if (!(attempt < maxAttempts)) {
+            _context2.n = 4;
+            break;
+          }
+          _context2.n = 4;
+          return __sleep();
+        case 4:
+          attempt++;
+          _context2.n = 1;
+          break;
+        case 5:
+          throw new Error("Polling failed after ".concat(maxAttempts, " attempts"));
+        case 6:
+          return _context2.a(2);
+      }
+    }, _callee2);
+  }));
+  return _polling.apply(this, arguments);
+}
+
+exports.PollingAbortError = PollingAbortError;
+exports.polling = polling;

package/es/_virtual/_rollupPluginBabelHelpers.js

@@ -6,6 +6,13 @@ function _arrayLikeToArray(r, a) {
 function _arrayWithHoles(r) {
   if (Array.isArray(r)) return r;
 }
+function _arrayWithoutHoles(r) {
+  if (Array.isArray(r)) return _arrayLikeToArray(r);
+}
+function _assertThisInitialized(e) {
+  if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  return e;
+}
 function asyncGeneratorStep(n, t, e, r, o, a, c) {
   try {
     var i = n[a](c),
@@ -31,6 +38,24 @@ function _asyncToGenerator(n) {
     });
   };
 }
+function _callSuper(t, o, e) {
+  return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
+}
+function _classCallCheck(a, n) {
+  if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function");
+}
+function _construct(t, e, r) {
+  if (_isNativeReflectConstruct()) return Reflect.construct.apply(null, arguments);
+  var o = [null];
+  o.push.apply(o, e);
+  var p = new (t.bind.apply(t, o))();
+  return r && _setPrototypeOf(p, r.prototype), p;
+}
+function _createClass(e, r, t) {
+  return Object.defineProperty(e, "prototype", {
+    writable: false
+  }), e;
+}
 function _defineProperty(e, r, t) {
   return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
     value: t,
@@ -39,6 +64,41 @@ function _defineProperty(e, r, t) {
     writable: true
   }) : e[r] = t, e;
 }
+function _getPrototypeOf(t) {
+  return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) {
+    return t.__proto__ || Object.getPrototypeOf(t);
+  }, _getPrototypeOf(t);
+}
+function _inherits(t, e) {
+  if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function");
+  t.prototype = Object.create(e && e.prototype, {
+    constructor: {
+      value: t,
+      writable: true,
+      configurable: true
+    }
+  }), Object.defineProperty(t, "prototype", {
+    writable: false
+  }), e && _setPrototypeOf(t, e);
+}
+function _isNativeFunction(t) {
+  try {
+    return -1 !== Function.toString.call(t).indexOf("[native code]");
+  } catch (n) {
+    return "function" == typeof t;
+  }
+}
+function _isNativeReflectConstruct() {
+  try {
+    var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
+  } catch (t) {}
+  return (_isNativeReflectConstruct = function () {
+    return !!t;
+  })();
+}
+function _iterableToArray(r) {
+  if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
+}
 function _iterableToArrayLimit(r, l) {
   var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
   if (null != t) {
@@ -69,6 +129,14 @@ function _iterableToArrayLimit(r, l) {
 function _nonIterableRest() {
   throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _possibleConstructorReturn(t, e) {
+  if (e && ("object" == typeof e || "function" == typeof e)) return e;
+  if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined");
+  return _assertThisInitialized(t);
+}
 function _regenerator() {
   /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */
   var e,
@@ -177,6 +245,11 @@ function _regeneratorDefine(e, r, n, t) {
     }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2));
   }, _regeneratorDefine(e, r, n, t);
 }
+function _setPrototypeOf(t, e) {
+  return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) {
+    return t.__proto__ = e, t;
+  }, _setPrototypeOf(t, e);
+}
 function _slicedToArray(r, e) {
   return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
 }
@@ -187,6 +260,9 @@ function _taggedTemplateLiteral(e, t) {
     }
   }));
 }
+function _toConsumableArray(r) {
+  return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
+}
 function _toPrimitive(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
@@ -208,5 +284,27 @@ function _unsupportedIterableToArray(r, a) {
     return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
   }
 }
+function _wrapNativeSuper(t) {
+  var r = "function" == typeof Map ? new Map() : void 0;
+  return _wrapNativeSuper = function (t) {
+    if (null === t || !_isNativeFunction(t)) return t;
+    if ("function" != typeof t) throw new TypeError("Super expression must either be null or a function");
+    if (void 0 !== r) {
+      if (r.has(t)) return r.get(t);
+      r.set(t, Wrapper);
+    }
+    function Wrapper() {
+      return _construct(t, arguments, _getPrototypeOf(this).constructor);
+    }
+    return Wrapper.prototype = Object.create(t.prototype, {
+      constructor: {
+        value: Wrapper,
+        enumerable: false,
+        writable: true,
+        configurable: true
+      }
+    }), _setPrototypeOf(Wrapper, t);
+  }, _wrapNativeSuper(t);
+}
 
-export { _arrayLikeToArray as arrayLikeToArray, _arrayWithHoles as arrayWithHoles, _asyncToGenerator as asyncToGenerator, _defineProperty as defineProperty, _iterableToArrayLimit as iterableToArrayLimit, _nonIterableRest as nonIterableRest, _regenerator as regenerator, _regeneratorDefine as regeneratorDefine, _slicedToArray as slicedToArray, _taggedTemplateLiteral as taggedTemplateLiteral, _toPrimitive as toPrimitive, _toPropertyKey as toPropertyKey, _unsupportedIterableToArray as unsupportedIterableToArray };
+export { _arrayLikeToArray as arrayLikeToArray, _arrayWithHoles as arrayWithHoles, _arrayWithoutHoles as arrayWithoutHoles, _assertThisInitialized as assertThisInitialized, _asyncToGenerator as asyncToGenerator, _callSuper as callSuper, _classCallCheck as classCallCheck, _construct as construct, _createClass as createClass, _defineProperty as defineProperty, _getPrototypeOf as getPrototypeOf, _inherits as inherits, _isNativeFunction as isNativeFunction, _isNativeReflectConstruct as isNativeReflectConstruct, _iterableToArray as iterableToArray, _iterableToArrayLimit as iterableToArrayLimit, _nonIterableRest as nonIterableRest, _nonIterableSpread as nonIterableSpread, _possibleConstructorReturn as possibleConstructorReturn, _regenerator as regenerator, _regeneratorDefine as regeneratorDefine, _setPrototypeOf as setPrototypeOf, _slicedToArray as slicedToArray, _taggedTemplateLiteral as taggedTemplateLiteral, _toConsumableArray as toConsumableArray, _toPrimitive as toPrimitive, _toPropertyKey as toPropertyKey, _unsupportedIterableToArray as unsupportedIterableToArray, _wrapNativeSuper as wrapNativeSuper };

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

@@ -15,6 +15,8 @@ import MaterialRunboxHeader from './MaterialRunboxHeader.js';
 import { useMaterialRunboxContext } from './contexts/MaterialRunboxContext.js';
 import { useMaterialRunboxApiContext } from './contexts/MaterialRunboxApiContext.js';
 import MaterialRunboxCommandContextProvider from './contexts/MaterialRunboxCommandContext.js';
+import MaterialRunboxDiskUsageAlert from './disk/MaterialRunboxDiskUsageAlert.js';
+import MaterialRunboxDiskUsageDialog from './disk/MaterialRunboxDiskUsageDialog.js';
 import { useMaterialRunboxRunboxIdStarterGet } from './hooks/useMaterialRunboxRunboxIdStarterGet.js';
 
 var _templateObject;
@@ -280,6 +282,11 @@ var MaterialRunboxContent = function MaterialRunboxContent(_ref) {
             studentUserId: studentUserId,
             userId: userId,
             isTutoring: isTutoring
+          }), jsx(MaterialRunboxDiskUsageAlert, {
+            runboxId: runbox.id,
+            courseId: courseId
+          }), jsx(MaterialRunboxDiskUsageDialog, {
+            runboxId: runbox.id
           }), jsx(MaterialRunboxBody, Object.assign({
             setSnackbarRoot: setSnackbarRoot
           }, props))]

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

@@ -18,7 +18,6 @@ import { useMaterialRunboxContext } from './contexts/MaterialRunboxContext.js';
 import { useMaterialRunboxApiContext } from './contexts/MaterialRunboxApiContext.js';
 import MaterialRunboxTimer from './timer/MaterialRunboxTimer.js';
 import MaterialRunboxStatusButton from './status/MaterialRunboxStatusButton.js';
-import MaterialRunboxDiskAlmostFullSnackbar from './disk/MaterialRunboxDiskAlmostFullSnackbar.js';
 import { useRunboxControl } from './hooks/useRunboxControl.js';
 
 var StyledHeader = /*#__PURE__*/_styled("div", {
@@ -26,25 +25,28 @@ var StyledHeader = /*#__PURE__*/_styled("div", {
 })("position:relative;flex:0 0 3rem;display:flex;justify-content:flex-start;align-items:center;gap:1rem;padding:0 1rem;width:100%;border-bottom:1px solid ", function (_ref) {
   var theme = _ref.theme;
   return theme.palette.divider;
-}, ";overflow:hidden;background-color:", function (_ref2) {
+}, ";overflow:hidden;color:", function (_ref2) {
   var theme = _ref2.theme;
+  return theme.palette.text.primary;
+}, ";background-color:", function (_ref3) {
+  var theme = _ref3.theme;
   return theme.palette.background.paper;
 }, ";");
 //
 //
 //
-var MaterialRunboxHeader = function MaterialRunboxHeader(_ref3) {
-  var runbox = _ref3.runbox,
-    runtime = _ref3.runtime,
-    runtimeTemplate = _ref3.runtimeTemplate,
-    courseId = _ref3.courseId,
-    userId = _ref3.userId,
-    studentUserId = _ref3.studentUserId,
-    isTutoring = _ref3.isTutoring,
-    refetch = _ref3.refetch,
-    getAchievementColor = _ref3.getAchievementColor,
-    _ref3$hideTimerPopove = _ref3.hideTimerPopover,
-    hideTimerPopover = _ref3$hideTimerPopove === void 0 ? false : _ref3$hideTimerPopove;
+var MaterialRunboxHeader = function MaterialRunboxHeader(_ref4) {
+  var runbox = _ref4.runbox,
+    runtime = _ref4.runtime,
+    runtimeTemplate = _ref4.runtimeTemplate,
+    courseId = _ref4.courseId,
+    userId = _ref4.userId,
+    studentUserId = _ref4.studentUserId,
+    isTutoring = _ref4.isTutoring,
+    refetch = _ref4.refetch,
+    getAchievementColor = _ref4.getAchievementColor,
+    _ref4$hideTimerPopove = _ref4.hideTimerPopover,
+    hideTimerPopover = _ref4$hideTimerPopove === void 0 ? false : _ref4$hideTimerPopove;
   var intl = useRawEliceIntl();
   var _useMaterialRunboxCon = useMaterialRunboxContext(),
     enableAutoShutdownToggle = _useMaterialRunboxCon.enableAutoShutdownToggle;
@@ -95,8 +97,8 @@ var MaterialRunboxHeader = function MaterialRunboxHeader(_ref3) {
         courseId: courseId,
         runtime: runtime
       }],
-      queryFn: function queryFn(_ref4) {
-        var signal = _ref4.signal;
+      queryFn: function queryFn(_ref5) {
+        var signal = _ref5.signal;
         return materialRunboxApi.runbox.runboxRunboxIdSubmitInfoGet({
           eliceCourseId: courseId,
           runboxId: runtime === null || runtime === void 0 ? void 0 : runtime.runboxId
@@ -217,8 +219,9 @@ var MaterialRunboxHeader = function MaterialRunboxHeader(_ref3) {
       stopRuntime: stopRuntime,
       hideTimerPopover: hideTimerPopover,
       isTutoring: isTutoring
-    }) : null, jsx(MaterialRunboxStatusButton, {}), jsx(MaterialRunboxDiskAlmostFullSnackbar, {
-      runboxId: runbox.id
+    }) : null, jsx(MaterialRunboxStatusButton, {
+      runboxId: runbox.id,
+      courseId: courseId
     }), jsxs(Stack, {
       direction: "row",
       alignItems: "center",

package/es/components/material-runbox/disk/MaterialRunboxDiskUsageAlert.d.ts

@@ -0,0 +1,11 @@
+import type React from 'react';
+export interface MaterialRunboxDiskUsageAlertProps {
+    runboxId: string;
+    courseId: number;
+}
+/**
+ * Persistent bar under the header once disk usage passes 80%. Unlike the notice
+ * dialog it stays put, because it carries the only way out — the reset CTA.
+ */
+declare const MaterialRunboxDiskUsageAlert: React.FC<MaterialRunboxDiskUsageAlertProps>;
+export default MaterialRunboxDiskUsageAlert;

package/es/components/material-runbox/disk/MaterialRunboxDiskUsageAlert.js

@@ -0,0 +1,65 @@
+import { jsx } from 'react/jsx-runtime';
+import { useRawEliceIntl } from '@elice/intl';
+import { EliceIcon } from '@elice/mui-elements';
+import { faArrowsRotate } from '@fortawesome/pro-solid-svg-icons';
+import { Alert, Typography } from '@mui/material';
+import MaterialRunboxEnvResetButton from './MaterialRunboxEnvResetButton.js';
+import { useRunboxDiskUsage } from '../hooks/useRunboxDiskUsage.js';
+
+//
+//
+//
+/**
+ * Persistent bar under the header once disk usage passes 80%. Unlike the notice
+ * dialog it stays put, because it carries the only way out — the reset CTA.
+ */
+var MaterialRunboxDiskUsageAlert = function MaterialRunboxDiskUsageAlert(_ref) {
+  var runboxId = _ref.runboxId,
+    courseId = _ref.courseId;
+  var intl = useRawEliceIntl();
+  var _useRunboxDiskUsage = useRunboxDiskUsage(),
+    severity = _useRunboxDiskUsage.severity,
+    diskCurrent = _useRunboxDiskUsage.diskCurrent,
+    diskTotal = _useRunboxDiskUsage.diskTotal;
+  if (!severity) {
+    return null;
+  }
+  //
+  //
+  //
+  return jsx(Alert, {
+    severity: severity,
+    sx: {
+      width: '100%',
+      borderRadius: '0',
+      alignItems: 'center'
+    },
+    action: jsx(MaterialRunboxEnvResetButton, {
+      variant: "text",
+      size: "small",
+      color: "inherit",
+      startIcon: jsx(EliceIcon, {
+        icon: faArrowsRotate
+      }),
+      runboxId: runboxId,
+      courseId: courseId
+    }),
+    children: jsx(Typography, {
+      variant: "body2",
+      children: intl.formatMessage({
+        id: "runbox.disk.usage.alert.".concat(severity)
+      }, {
+        used: intl.formatDataSize(diskCurrent, {
+          unitSystem: 'iec',
+          maximumFractionDigits: 2
+        }),
+        total: intl.formatDataSize(diskTotal, {
+          unitSystem: 'iec',
+          maximumFractionDigits: 2
+        })
+      })
+    })
+  });
+};
+
+export { MaterialRunboxDiskUsageAlert as default };