Make the dashboard create web terminals that reference devworkspacete…

…mplates in the namespace where the web terminal operators is installed Signed-off-by: Josh Pinkney <[email protected]>
yangcao77 · Sep 10, 2021 · 090d664 · 090d664
1 parent ef33f7f
commit 090d664
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 24 deletions.
diff --git a/frontend/packages/console-app/src/components/cloud-shell/CloudShellTerminal.tsx b/frontend/packages/console-app/src/components/cloud-shell/CloudShellTerminal.tsx
@@ -12,12 +12,13 @@ import {
 } from '@console/shared';
 import { FLAG_V1ALPHA2DEVWORKSPACE } from '../../consts';
 import { v1alpha1WorkspaceModel, WorkspaceModel } from '../../models';
-import { TerminalInitData, initTerminal } from './cloud-shell-utils';
+import { TerminalInitData, initTerminal, startWorkspace } from './cloud-shell-utils';
 import CloudshellExec from './CloudShellExec';
 import { CLOUD_SHELL_NAMESPACE, CLOUD_SHELL_NAMESPACE_CONFIG_STORAGE_KEY } from './const';
 import CloudShellAdminSetup from './setup/CloudShellAdminSetup';
 import CloudShellDeveloperSetup from './setup/CloudShellDeveloperSetup';
 import TerminalLoadingBox from './TerminalLoadingBox';
+import useCloudShellNamespace from './useCloudShellNamespace';
 import useCloudShellWorkspace from './useCloudShellWorkspace';
 
 import './CloudShellTerminal.scss';
@@ -39,6 +40,8 @@ const CloudShellTerminal: React.FC<CloudShellTerminalProps &
   userSettingState: namespace,
   setUserSettingState: setNamespace,
 }) => {
+  const [operatorNamespace, namespaceLoadError] = useCloudShellNamespace();
+  const [unrecoverableErrorFound, setUnrecoverableErrorFound] = React.useState<boolean>(false);
   const [initData, setInitData] = React.useState<TerminalInitData>();
   const [initError, setInitError] = React.useState<string>();
   const [isAdmin, isAdminCheckLoading] = useAccessReview2({
@@ -63,6 +66,25 @@ const CloudShellTerminal: React.FC<CloudShellTerminalProps &
 
   const { t } = useTranslation();
 
+  // wait until the web terminal is loaded.
+  // if the namespace has any problems loading then set the terminal into an unrecoverable state
+  React.useEffect(() => {
+    if (namespaceLoadError) {
+      setUnrecoverableErrorFound(true);
+      setInitError(namespaceLoadError);
+    }
+  }, [namespaceLoadError]);
+
+  // start the workspace if no unrecoverable errors were found
+  React.useEffect(() => {
+    if (!unrecoverableErrorFound && workspace?.spec && !workspace.spec.started) {
+      startWorkspace(workspace);
+    }
+    // Run this effect if the workspace name or namespace changes.
+    // This effect should only be run once per workspace.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [unrecoverableErrorFound, workspace?.metadata?.name, workspace?.metadata?.namespace]);
+
   // save the namespace once the workspace has loaded
   React.useEffect(() => {
     if (loaded && !loadError) {
@@ -71,11 +93,13 @@ const CloudShellTerminal: React.FC<CloudShellTerminalProps &
     }
   }, [loaded, loadError, workspaceNamespace, setNamespace]);
 
-  // clear the init data and error if the workspace changes
+  // clear the init data and error if the workspace changes and if the loading process isn't in an unrecoverable state
   React.useEffect(() => {
-    setInitData(undefined);
-    setInitError(undefined);
-  }, [username, workspaceName, workspaceNamespace]);
+    if (!unrecoverableErrorFound) {
+      setInitData(undefined);
+      setInitError(undefined);
+    }
+  }, [unrecoverableErrorFound, username, workspaceName, workspaceNamespace]);
 
   // initialize the terminal once it is Running
   React.useEffect(() => {
@@ -132,7 +156,7 @@ const CloudShellTerminal: React.FC<CloudShellTerminalProps &
   }
 
   // loading the workspace resource
-  if (!loaded || isAdminCheckLoading) {
+  if (!loaded || isAdminCheckLoading || !operatorNamespace) {
     return <TerminalLoadingBox message="" />;
   }
 
@@ -165,6 +189,7 @@ const CloudShellTerminal: React.FC<CloudShellTerminalProps &
           setNamespace(ns);
         }}
         workspaceModel={workspaceModel}
+        operatorNamespace={operatorNamespace}
       />
     );
   }
@@ -177,6 +202,7 @@ const CloudShellTerminal: React.FC<CloudShellTerminalProps &
       onSubmit={(ns: string) => {
         setNamespace(ns);
       }}
+      operatorNamespace={operatorNamespace}
     />
   );
 };

diff --git a/frontend/packages/console-app/src/components/cloud-shell/__tests__/cloud-shell-utils.spec.ts b/frontend/packages/console-app/src/components/cloud-shell/__tests__/cloud-shell-utils.spec.ts
@@ -10,7 +10,7 @@ describe('CloudShell Utils', () => {
     const namespace = 'default';
     const kind = 'DevWorkspace';
 
-    const newResource = newCloudShellWorkSpace(name, namespace, 'v1alpha2');
+    const newResource = newCloudShellWorkSpace(name, namespace, namespace, 'v1alpha2');
     expect(newResource.kind).toEqual(kind);
     expect(newResource.metadata.name).toEqual(name);
     expect(newResource.metadata.namespace).toEqual(namespace);

diff --git a/frontend/packages/console-app/src/components/cloud-shell/cloud-shell-utils.ts b/frontend/packages/console-app/src/components/cloud-shell/cloud-shell-utils.ts
@@ -50,6 +50,7 @@ export const CLOUD_SHELL_CREATOR_LABEL = 'controller.devfile.io/creator';
 export const CLOUD_SHELL_RESTRICTED_ANNOTATION = 'controller.devfile.io/restricted-access';
 export const CLOUD_SHELL_STOPPED_BY_ANNOTATION = 'controller.devfile.io/stopped-by';
 export const CLOUD_SHELL_PROTECTED_NAMESPACE = 'openshift-terminal';
+export const CLOUD_SHELL_SUBSCRIPTION_NAME = 'web-terminal';
 
 export const createCloudShellResourceName = () => `terminal-${getRandomChars(6)}`;
 
@@ -62,13 +63,13 @@ const v1alpha1DevworkspaceComponent = [
   },
 ];
 
-const devWorkspaceComponent = [
+const devWorkspaceComponent = (namespace: string) => [
   {
     name: 'web-terminal-tooling',
     plugin: {
       kubernetes: {
         name: 'web-terminal-tooling',
-        namespace: 'openshift-operators',
+        namespace,
       },
     },
   },
@@ -77,22 +78,23 @@ const devWorkspaceComponent = [
     plugin: {
       kubernetes: {
         name: 'web-terminal-exec',
-        namespace: 'openshift-operators',
+        namespace,
       },
     },
   },
 ];
 
 export const newCloudShellWorkSpace = (
   name: string,
-  namespace: string,
+  workspaceNamespace: string,
+  operatorNamespace: string,
   version: string,
 ): CloudShellResource => ({
   apiVersion: `workspace.devfile.io/${version}`,
   kind: 'DevWorkspace',
   metadata: {
     name,
-    namespace,
+    namespace: workspaceNamespace,
     labels: {
       [CLOUD_SHELL_LABEL]: 'true',
     },
@@ -107,7 +109,7 @@ export const newCloudShellWorkSpace = (
       components:
         version === v1alpha1WorkspaceModel.apiVersion
           ? v1alpha1DevworkspaceComponent
-          : devWorkspaceComponent,
+          : devWorkspaceComponent(operatorNamespace),
     },
   },
 });
@@ -153,3 +155,5 @@ export const checkTerminalAvailable = () => coFetch('/api/terminal/available');
 export const getCloudShellCR = (workspaceModel: K8sKind, name: string, ns: string) => {
   return k8sGet(workspaceModel, name, ns);
 };
+
+export const getTerminalInstalledNamespace = () => coFetch('/api/terminal/installedNamespace');
diff --git a/frontend/packages/console-app/src/components/cloud-shell/setup/CloudShellAdminSetup.tsx b/frontend/packages/console-app/src/components/cloud-shell/setup/CloudShellAdminSetup.tsx
@@ -14,9 +14,14 @@ import TerminalLoadingBox from '../TerminalLoadingBox';
 type Props = {
   onInitialize: (namespace: string) => void;
   workspaceModel: K8sKind;
+  operatorNamespace: string;
 };
 
-const CloudShellAdminSetup: React.FunctionComponent<Props> = ({ onInitialize, workspaceModel }) => {
+const CloudShellAdminSetup: React.FunctionComponent<Props> = ({
+  onInitialize,
+  workspaceModel,
+  operatorNamespace,
+}) => {
   const { t } = useTranslation();
 
   const [initError, setInitError] = React.useState<string>();
@@ -48,6 +53,7 @@ const CloudShellAdminSetup: React.FunctionComponent<Props> = ({ onInitialize, wo
           newCloudShellWorkSpace(
             createCloudShellResourceName(),
             CLOUD_SHELL_PROTECTED_NAMESPACE,
+            operatorNamespace,
             workspaceModel.apiVersion,
           ),
         );

diff --git a/frontend/packages/console-app/src/components/cloud-shell/setup/CloudShellDeveloperSetup.tsx b/frontend/packages/console-app/src/components/cloud-shell/setup/CloudShellDeveloperSetup.tsx
@@ -23,11 +23,13 @@ type Props = StateProps & {
   onSubmit?: (namespace: string) => void;
   onCancel?: () => void;
   workspaceModel: K8sKind;
+  operatorNamespace: string;
 };
 
 const CloudShellDeveloperSetup: React.FunctionComponent<Props> = ({
   activeNamespace,
   workspaceModel,
+  operatorNamespace,
   onSubmit,
   onCancel,
 }) => {
@@ -53,6 +55,7 @@ const CloudShellDeveloperSetup: React.FunctionComponent<Props> = ({
         newCloudShellWorkSpace(
           createCloudShellResourceName(),
           namespace,
+          operatorNamespace,
           workspaceModel.apiVersion,
         ),
       );

diff --git a/frontend/packages/console-app/src/components/cloud-shell/useCloudShellWorkspace.ts b/frontend/packages/console-app/src/components/cloud-shell/useCloudShellWorkspace.ts
@@ -10,7 +10,6 @@ import {
   CLOUD_SHELL_CREATOR_LABEL,
   CloudShellResource,
   CLOUD_SHELL_RESTRICTED_ANNOTATION,
-  startWorkspace,
   CLOUD_SHELL_PROTECTED_NAMESPACE,
 } from './cloud-shell-utils';
 
@@ -158,15 +157,6 @@ const useCloudShellWorkspace = (
     workspaceModel,
   ]);
 
-  React.useEffect(() => {
-    if (workspace?.spec && !workspace.spec.started) {
-      startWorkspace(workspace);
-    }
-    // Run this effect if the workspace name or namespace changes.
-    // This effect should only be run once per workspace.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [workspace?.metadata?.name, workspace?.metadata?.namespace]);
-
   return [
     workspace,
     // loaded if we have a resource loaded and currently not searching