[UPSTREAM] Add spawn progress watch modal, replace spawn_pending page (…

…opendatahub-io-contrib#47)

jupyterhub_singleuser_profiles/ui/.gitignore

@@ -5,7 +5,7 @@
 /build
 
 # Created templates
-/templates/admin.html
+/templates
 
 *stats.json
 

jupyterhub_singleuser_profiles/ui/package.json

@@ -18,7 +18,7 @@
  },
  "scripts": {
  "build": "run-s build:prod",
- "postbuild": "cp build/admin.html templates/admin.html",
+ "postbuild": "mkdir -p templates; cp build/index.html templates/spawn.html; cp build/index.html templates/spawn_pending.html; cp build/admin.html templates/admin.html",
  "build:analyze": "export _JSP_OUTPUT_ONLY=true; run-s build build:bundle-profile build:bundle-analyze",
  "build:bundle-profile": "webpack --config ./config/webpack.prod.js --json ./bundle.stats.json",
  "build:bundle-analyze": "webpack-bundle-analyzer ./bundle.stats.json",

jupyterhub_singleuser_profiles/ui/src/App/App.scss

@@ -1,4 +1,15 @@
+html {
+ height: 100%;
+}
+
+body, #root {
+ display: flex;
+ flex: 1;
+ flex-direction: column;
+}
+
 .jsp-app {
+ flex: 1;
  position: relative;
  padding: 20px var(--pf-global--spacer--2xl) !important;
  margin-top: -20px !important;

jupyterhub_singleuser_profiles/ui/src/App/Spawner.tsx

@@ -3,6 +3,8 @@ import '@patternfly/patternfly/patternfly.min.css';
 import '@patternfly/patternfly/patternfly-addons.css';
 import {
  Alert,
+ Button,
+ ButtonVariant,
  Title,
  EmptyState,
  EmptyStateVariant,
@@ -14,10 +16,12 @@ import { WarningTriangleIcon } from '@patternfly/react-icons';
 import ImageForm from '../ImageForm/ImageForm';
 import SizesForm from '../SizesForm/SizesForm';
 import EnvVarForm from '../EnvVarForm/EnvVarForm';
+import { HubUserRequest } from '../utils/HubCalls';
 import { APIGet } from '../utils/APICalls';
 import { CM_PATH, FOR_USER, INSTANCE_PATH, UI_CONFIG_PATH, USER } from '../utils/const';
 import { InstanceType, UiConfigType, UserConfigMapType } from '../utils/types';
-import { fireTrackingEvent, initSegment } from '../utils/segmentIOUtils';
+import { initSegment } from '../utils/segmentIOUtils';
+import StartServerModal from './StartServerModal';
 
 import './App.scss';
 
@@ -26,9 +30,23 @@ const Spawner: React.FC = () => {
  const [configError, setConfigError] = React.useState<string>();
  const [imageValid, setImageValid] = React.useState<boolean>(false);
  const [userConfig, setUserConfig] = React.useState<UserConfigMapType>();
+ const [startShown, setStartShown] = React.useState<boolean>(false);
+ const pageRef = React.useRef<HTMLDivElement>(null);
 
  React.useEffect(() => {
  let cancelled = false;
+ HubUserRequest('GET')
+ .then((response) => {
+ return response?.json();
+ })
+ .then((results) => {
+ if (results.pending) {
+ setStartShown(true);
+ }
+ })
+ .catch((e) => {
+ console.error(e);
+ });
 
  APIGet(CM_PATH).then((data: UserConfigMapType) => {
  if (!cancelled) {
@@ -65,20 +83,6 @@ const Spawner: React.FC = () => {
  });
  }, []);
 
- const fireStartServerEvent = () => {
- APIGet(CM_PATH)
- .then((data: UserConfigMapType) => {
- fireTrackingEvent('Notebook Server Started', {
- GPU: data.gpu,
- lastSelectedSize: data.last_selected_size,
- lastSelectedImage: data.last_selected_image,
- });
- })
- .catch((e) => {
- console.dir(e);
- });
- };
-
  const renderContent = () => {
  if (configError) {
  return (
@@ -102,30 +106,27 @@ const Spawner: React.FC = () => {
 
  return (
  <>
- <ImageForm
- uiConfig={uiConfig}
- userConfig={userConfig}
- onValidImage={() => setImageValid(true)}
- />
+ <ImageForm uiConfig={uiConfig} userConfig={userConfig} onValidImage={setImageValid} />
  <SizesForm uiConfig={uiConfig} userConfig={userConfig} />
  {uiConfig.envVarConfig?.enabled !== false && (
  <EnvVarForm uiConfig={uiConfig} userConfig={userConfig} />
  )}
  <div className="jsp-spawner__buttons-bar">
- <input
- type="submit"
+ <Button
+ variant={ButtonVariant.primary}
  disabled={!imageValid}
- value="Start server"
- onClick={fireStartServerEvent}
- className="jsp-spawner__submit-button pf-c-button pf-m-primary"
- />
+ className="jsp-app__spawner__submit-button"
+ onClick={() => setStartShown(true)}
+ >
+ Start Server
+ </Button>
  </div>
  </>
  );
  };
 
  return (
- <div className="jsp-app jsp-spawner">
+ <div className="jsp-app jsp-spawner" ref={pageRef}>
  <div className="jsp-app__header">
  {FOR_USER ? (
  <Alert
@@ -138,6 +139,13 @@ const Spawner: React.FC = () => {
  <div className="jsp-app__header__sub-title">Select options for your notebook server.</div>
  </div>
  {renderContent()}
+ {startShown ? (
+ <StartServerModal
+ pageRef={pageRef.current as HTMLElement}
+ shown={startShown}
+ onClose={() => setStartShown(false)}
+ />
+ ) : null}
  </div>
  );
 };

jupyterhub_singleuser_profiles/ui/src/App/StartServerModal.scss

@@ -0,0 +1,88 @@
+.jsp-spawner__start-modal {
+ &__progress {
+ margin-top: var(--pf-global--spacer--md);
+ }
+
+ &__status {
+ margin-top: var(--pf-global--spacer--md);
+ }
+
+ &__footer {
+ width: 100%;
+ }
+
+ &__buttons {
+ display: flex;
+ gap: 10px;
+ margin-top: var(--pf-global--spacer--md);
+ width: 100%;
+ }
+
+ .jsp-spawner__start-modal__accordion {
+ margin-top: var(--pf-global--spacer--md);
+ }
+
+ .jsp-spawner__start-modal__accordion-toggle {
+ margin-left: calc(var(--pf-c-accordion__toggle--PaddingLeft) * -1);
+ margin-right: calc(var(--pf-c-accordion__toggle--PaddingRight) * -1);
+ width: calc(100% + var(--pf-c-accordion__toggle--PaddingLeft) + var(--pf-c-accordion__toggle--PaddingRight));
+
+ &.m-is-disabled {
+ pointer-events: none;
+ .pf-c-accordion__toggle-icon {
+ color: var(--pf-global--disabled-color--200);
+ }
+
+ }
+ &:after {
+ display: none !important;
+ }
+
+ &:focus, &:hover {
+ background-color: transparent !important;
+ }
+ }
+
+ &__toggle-title {
+ color: var(--pf-c-accordion__toggle--hover__toggle-text--Color);
+ .m-is-disabled & {
+ color: var(--pf-global--disabled-color--200);
+ }
+ }
+
+ &__accordion-body {
+ max-height: 250px;
+ overflow-y: auto;
+ }
+
+ &__message {
+ border-top: 1px solid var(--pf-global--BorderColor--100);
+ margin-bottom: var(--pf-global--spacer--sm);
+ padding-top: var(--pf-global--spacer--sm);
+ word-break: break-word;
+
+ &:first-of-type {
+ border-top: 0;
+ padding-top: 0;
+ }
+ }
+
+ .pf-c-accordion {
+ &__toggle-text {
+ font-weight: var(--pf-global--FontWeight--normal) !important;
+ }
+ &__expanded-content {
+ color: var(--pf-global--Color--100);
+
+ &-body:after {
+ display: none;
+ }
+ }
+ }
+
+ .pf-c-modal-box__footer {
+ align-items: flex-start;
+ flex-direction: column;
+ gap: var(--pf-global--spacer--sm);
+ }
+}