feat(ws): Notebooks 2.0 // Frontend // Workspaces table // Workspace …

…redirect status column kubeflow#147 Signed-off-by: root <root@C-PF3RRRR6.>
asaadbalum · Jan 19, 2025 · 67e3591 · 67e3591
1 parent 8c120dd
commit 67e3591
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 16 deletions.
diff --git a/workspaces/frontend/src/app/actions/WorkspacekindsActions.tsx b/workspaces/frontend/src/app/actions/WorkspacekindsActions.tsx
@@ -17,4 +17,36 @@ export function buildKindLogoDictionary(workspaceKinds: WorkspaceKind[] | []): K
   return kindLogoDict;
 }
 
+type WorkspaceRedirectStatus = Record<
+  string,
+  { to: string; message: string; level: string } | null
+>;
 
+/**
+ * Builds a dictionary of workspace kinds to redirect statuses.
+ * @param {WorkspaceKind[]} workspaceKinds - The list of workspace kinds.
+ * @returns {WorkspaceRedirectStatus} A dictionary with kind names as keys and redirect status objects as values.
+ */
+export function buildWorkspaceRedirectStatus(
+  workspaceKinds: WorkspaceKind[] | []
+): WorkspaceRedirectStatus {
+  const workspaceRedirectStatus: WorkspaceRedirectStatus = {};
+
+  for (const workspaceKind of workspaceKinds) {
+    // Loop through the `values` array inside `imageConfig`
+    const redirect = workspaceKind.podTemplate?.options?.imageConfig?.values?.find(
+      (value) => value.redirect
+    )?.redirect;
+
+    // If redirect exists, extract the necessary properties
+    workspaceRedirectStatus[workspaceKind.name] = redirect
+      ? {
+          to: redirect.to,
+          message: redirect.message.text,
+          level: redirect.message.level,
+        }
+      : null;
+  }
+
+  return workspaceRedirectStatus;
+}
diff --git a/workspaces/frontend/src/app/pages/Workspaces/Workspaces.tsx b/workspaces/frontend/src/app/pages/Workspaces/Workspaces.tsx
@@ -1,5 +1,10 @@
 import * as React from 'react';
-import { InfoCircleIcon, ExclamationTriangleIcon, TimesCircleIcon } from '@patternfly/react-icons';
+import {
+  InfoCircleIcon,
+  ExclamationTriangleIcon,
+  TimesCircleIcon,
+  QuestionCircleIcon,
+} from '@patternfly/react-icons';
 import {
   PageSection,
   MenuToggle,
@@ -40,7 +45,10 @@ import {
 import { FilterIcon } from '@patternfly/react-icons';
 import { Workspace, WorkspaceState } from 'shared/types';
 import { formatRam } from 'shared/utilities/WorkspaceResources';
-import { buildKindLogoDictionary } from '~/app/actions/WorkspacekindsActions';
+import {
+  buildKindLogoDictionary,
+  buildWorkspaceRedirectStatus,
+} from '~/app/actions/WorkspacekindsActions';
 import useWorkspacekinds from '~/app/hooks/useWorspacekinds';
 
 export const Workspaces: React.FunctionComponent = () => {
@@ -140,12 +148,17 @@ export const Workspaces: React.FunctionComponent = () => {
 
   const [workspaceKinds, loaded, loadError] = useWorkspacekinds();
   let kindLogoDict: Record<string, string> = {};
+  let workspaceRedirectStatus: Record<
+    string,
+    { to: string; message: string; level: string } | null
+  > = {}; // Initialize the redirect status dictionary
 
   if (loaded && workspaceKinds) {
     kindLogoDict = buildKindLogoDictionary(workspaceKinds);
+    workspaceRedirectStatus = buildWorkspaceRedirectStatus(workspaceKinds); // Populate the dictionary
   } else {
     console.error(loadError || 'Failed to load workspace kinds.');
-  }  
+  }
 
   // Table columns
   const columnNames = {
@@ -483,19 +496,36 @@ export const Workspaces: React.FunctionComponent = () => {
           {sortedWorkspaces.map((workspace, rowIndex) => (
             <Tr key={rowIndex}>
               <Td dataLabel={columnNames.redirectStatus}>
-                {workspace.redirectStatus.level === "Info" && (
-                  <Tooltip content={workspace.redirectStatus.text}>
-                    <InfoCircleIcon color="blue" />
-                  </Tooltip>
-                )}
-                {workspace.redirectStatus.level === "Warning" && (
-                  <Tooltip content={workspace.redirectStatus.text}>
-                    <ExclamationTriangleIcon color="orange" />
-                  </Tooltip>
-                )}
-                {workspace.redirectStatus.level === "Danger" && (
-                  <Tooltip content={workspace.redirectStatus.text}>
-                    <TimesCircleIcon color="red" />
+                {workspaceRedirectStatus[workspace.kind] ? (
+                  <>
+                    {workspaceRedirectStatus[workspace.kind]?.level === 'Info' && (
+                      <Tooltip content={workspaceRedirectStatus[workspace.kind]?.message}>
+                        <InfoCircleIcon color="blue" aria-hidden="true" />
+                      </Tooltip>
+                    )}
+                    {workspaceRedirectStatus[workspace.kind]?.level === 'Warning' && (
+                      <Tooltip content={workspaceRedirectStatus[workspace.kind]?.message}>
+                        <ExclamationTriangleIcon color="orange" aria-hidden="true" />
+                      </Tooltip>
+                    )}
+                    {workspaceRedirectStatus[workspace.kind]?.level === 'Danger' && (
+                      <Tooltip content={workspaceRedirectStatus[workspace.kind]?.message}>
+                        <TimesCircleIcon color="red" aria-hidden="true" />
+                      </Tooltip>
+                    )}
+                    {!['Info', 'Warning', 'Danger'].includes(
+                      workspaceRedirectStatus[workspace.kind]?.level ?? '',
+                    ) && (
+                      <Tooltip
+                        content={`Invalid level: ${workspaceRedirectStatus[workspace.kind]?.level}`}
+                      >
+                        <QuestionCircleIcon color="gray" aria-hidden="true" />
+                      </Tooltip>
+                    )}
+                  </>
+                ) : (
+                  <Tooltip content="No API response available">
+                    <QuestionCircleIcon color="red" aria-hidden="true" />
                   </Tooltip>
                 )}
               </Td>