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

…redirect status column kubeflow#147

Signed-off-by: Asaad <[email protected]>

workspaces/frontend/src/app/actions/WorkspaceKindsActions.tsx

@@ -0,0 +1,53 @@
+import { WorkspaceKind } from '~/shared/types';
+
+type KindLogoDict = Record<string, string>;
+
+/**
+ * Builds a dictionary of kind names to logos, and returns it.
+ * @param {WorkspaceKind[]} workspaceKinds - The list of workspace kinds.
+ * @returns {KindLogoDict} A dictionary with kind names as keys and logo URLs as values.
+ */
+export function buildKindLogoDictionary(workspaceKinds: WorkspaceKind[] | []): KindLogoDict {
+  const kindLogoDict: KindLogoDict = {};
+
+  for (const workspaceKind of workspaceKinds) {
+    try {
+      kindLogoDict[workspaceKind.name] = workspaceKind.logo.url;
+    } catch {
+      kindLogoDict[workspaceKind.name] = '';
+    }
+  }
+  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;
+}

workspaces/frontend/src/app/pages/Workspaces/Workspaces.tsx

@@ -23,11 +23,23 @@ import {
   ActionsColumn,
   IActions,
 } from '@patternfly/react-table';
+import {
+  InfoCircleIcon,
+  ExclamationTriangleIcon,
+  TimesCircleIcon,
+  QuestionCircleIcon,
+  CodeIcon,
+} from '@patternfly/react-icons';
 import { useState } from 'react';
 import { Workspace, WorkspacesColumnNames, WorkspaceState } from '~/shared/types';
 import { WorkspaceDetails } from '~/app/pages/Workspaces/Details/WorkspaceDetails';
 import { ExpandedWorkspaceRow } from '~/app/pages/Workspaces/ExpandedWorkspaceRow';
 import DeleteModal from '~/shared/components/DeleteModal';
+import {
+  buildKindLogoDictionary,
+  buildWorkspaceRedirectStatus,
+} from '~/app/actions/WorkspaceKindsActions';
+import useWorkspaceKinds from '~/app/hooks/useWorkspaceKinds';
 import Filter, { FilteredColumn } from 'shared/components/Filter';
 import { formatRam } from 'shared/utilities/WorkspaceResources';
 
@@ -83,6 +95,10 @@ export const Workspaces: React.FunctionComponent = () => {
         state: WorkspaceState.Paused,
         stateMessage: 'It is paused.',
       },
+      redirectStatus: {
+        level: 'Info',
+        text: 'This is informational', // Tooltip text
+      },
     },
     {
       name: 'My Other Jupyter Notebook',
@@ -128,11 +144,27 @@ export const Workspaces: React.FunctionComponent = () => {
         state: WorkspaceState.Running,
         stateMessage: 'It is running.',
       },
+      redirectStatus: {
+        level: 'Danger',
+        text: 'This is dangerous',
+      },
     },
   ];
 
+  const [workspaceKinds] = useWorkspaceKinds();
+  let kindLogoDict: Record<string, string> = {};
+  kindLogoDict = buildKindLogoDictionary(workspaceKinds);
+
+  let workspaceRedirectStatus: Record<
+    string,
+    { to: string; message: string; level: string } | null
+  > = {}; // Initialize the redirect status dictionary
+  workspaceRedirectStatus = buildWorkspaceRedirectStatus(workspaceKinds); // Populate the dictionary
+
+
   // Table columns
   const columnNames: WorkspacesColumnNames = {
+    redirectStatus: 'Redirect Status',
     name: 'Name',
     kind: 'Kind',
     image: 'Image',
@@ -225,18 +257,20 @@ export const Workspaces: React.FunctionComponent = () => {
   const [activeSortDirection, setActiveSortDirection] = React.useState<'asc' | 'desc' | null>(null);
 
   const getSortableRowValues = (workspace: Workspace): (string | number)[] => {
-    const { name, kind, image, podConfig, state, homeVol, cpu, ram, lastActivity } = {
-      name: workspace.name,
-      kind: workspace.kind,
-      image: workspace.options.imageConfig,
-      podConfig: workspace.options.podConfig,
-      state: WorkspaceState[workspace.status.state],
-      homeVol: workspace.podTemplate.volumes.home,
-      cpu: workspace.cpu,
-      ram: workspace.ram,
-      lastActivity: workspace.status.activity.lastActivity,
-    };
-    return [name, kind, image, podConfig, state, homeVol, cpu, ram, lastActivity];
+    const { redirectStatus, name, kind, image, podConfig, state, homeVol, cpu, ram, lastActivity } =
+      {
+        redirectStatus: '',
+        name: workspace.name,
+        kind: workspace.kind,
+        image: workspace.options.imageConfig,
+        podConfig: workspace.options.podConfig,
+        state: WorkspaceState[workspace.status.state],
+        homeVol: workspace.podTemplate.volumes.home,
+        cpu: workspace.cpu,
+        ram: workspace.ram,
+        lastActivity: workspace.status.activity.lastActivity,
+      };
+    return [redirectStatus, name, kind, image, podConfig, state, homeVol, cpu, ram, lastActivity];
   };
 
   let sortedWorkspaces = workspaces;
@@ -340,6 +374,43 @@ export const Workspaces: React.FunctionComponent = () => {
     | 'yellow'
   )[] = ['green', 'orange', 'yellow', 'blue', 'red', 'purple'];
 
+  // Redirect Status Icons
+
+  const getRedirectStatusIcon = (level: string | undefined, message: string) => {
+    switch (level) {
+      case 'Info':
+        return (
+          <Tooltip content={message}>
+            <InfoCircleIcon color="blue" aria-hidden="true" />
+          </Tooltip>
+        );
+      case 'Warning':
+        return (
+          <Tooltip content={message}>
+            <ExclamationTriangleIcon color="orange" aria-hidden="true" />
+          </Tooltip>
+        );
+      case 'Danger':
+        return (
+          <Tooltip content={message}>
+            <TimesCircleIcon color="red" aria-hidden="true" />
+          </Tooltip>
+        );
+      case undefined:
+        return (
+          <Tooltip content={message}>
+            <QuestionCircleIcon color="gray" aria-hidden="true" />
+          </Tooltip>
+        );
+      default:
+        return (
+          <Tooltip content={`Invalid level: ${level}`}>
+            <QuestionCircleIcon color="gray" aria-hidden="true" />
+          </Tooltip>
+        );
+    }
+  };
+
   // Pagination
 
   const [page, setPage] = React.useState(1);
@@ -395,7 +466,10 @@ export const Workspaces: React.FunctionComponent = () => {
                 <Tr>
                   <Th />
                   {Object.values(columnNames).map((columnName, index) => (
-                    <Th key={`${columnName}-col-name`} sort={getSortParams(index)}>
+                    <Th
+                      key={`${columnName}-col-name`}
+                      sort={columnName !== 'Redirect Status' ? getSortParams(index) : undefined}
+                    >
                       {columnName}
                     </Th>
                   ))}
@@ -418,6 +492,15 @@ export const Workspaces: React.FunctionComponent = () => {
                           setWorkspaceExpanded(workspace, !isWorkspaceExpanded(workspace)),
                       }}
                     />
+                    <Td dataLabel={columnNames.redirectStatus}>
+                      {workspaceRedirectStatus[workspace.kind]
+                        ? getRedirectStatusIcon(
+                            workspaceRedirectStatus[workspace.kind]?.level,
+                            workspaceRedirectStatus[workspace.kind]?.message ||
+                              'No API response available',
+                          )
+                        : getRedirectStatusIcon(undefined, 'No API response available')}
+                    </Td>
                     <Td dataLabel={columnNames.name}>{workspace.name}</Td>
                     <Td dataLabel={columnNames.kind}>{workspace.kind}</Td>
                     <Td dataLabel={columnNames.image}>{workspace.options.imageConfig}</Td>

workspaces/frontend/src/shared/types.ts

@@ -73,6 +73,10 @@ export interface Workspace {
     podConfig: string;
   };
   status: WorkspaceStatus;
+  redirectStatus: {
+    level: "Info" | "Warning" | "Danger";
+    text: string;
+  };
 }
 
 export type WorkspacesColumnNames = {
@@ -85,4 +89,5 @@ export type WorkspacesColumnNames = {
   cpu: string;
   ram: string;
   lastActivity: string;
+  redirectStatus: string;
 };