feat(ws): Notebooks 2.0 // Frontend // Workspaces details // Live moc…

…kup (#174) Signed-off-by: paulovmr <[email protected]>
kubeflow · Jan 13, 2025 · d84621a · d84621a
1 parent 249a456
commit d84621a
Show file tree

Hide file tree

Showing 6 changed files with 342 additions and 97 deletions.
diff --git a/workspaces/frontend/src/app/App.tsx b/workspaces/frontend/src/app/App.tsx
@@ -43,6 +43,7 @@ const App: React.FC = () => {
         <Page
           mainContainerId="primary-app-container"
           masthead={masthead}
+          isContentFilled
           isManagedSidebar
           sidebar={<NavSidebar />}
         >

diff --git a/workspaces/frontend/src/app/pages/Workspaces/Details/WorkspaceDetails.tsx b/workspaces/frontend/src/app/pages/Workspaces/Details/WorkspaceDetails.tsx
@@ -0,0 +1,70 @@
+import React from 'react';
+import {
+  DrawerActions,
+  DrawerCloseButton,
+  DrawerHead,
+  DrawerPanelBody,
+  DrawerPanelContent,
+  Tabs,
+  Tab,
+  TabTitleText,
+  Title,
+} from '@patternfly/react-core';
+import { Workspace } from '~/shared/types';
+import { WorkspaceDetailsOverview } from '~/app/pages/Workspaces/Details/WorkspaceDetailsOverview';
+import { WorkspaceDetailsActions } from '~/app/pages/Workspaces/Details/WorkspaceDetailsActions';
+
+type WorkspaceDetailsProps = {
+  workspace: Workspace;
+  onCloseClick: React.MouseEventHandler;
+  onEditClick: React.MouseEventHandler;
+  onDeleteClick: React.MouseEventHandler;
+};
+
+export const WorkspaceDetails: React.FunctionComponent<WorkspaceDetailsProps> = ({
+  workspace,
+  onCloseClick,
+  onEditClick,
+  onDeleteClick,
+}) => {
+  const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
+
+  const handleTabClick = (
+    event: React.MouseEvent | React.KeyboardEvent | MouseEvent,
+    tabIndex: string | number,
+  ) => {
+    setActiveTabKey(tabIndex);
+  };
+
+  return (
+    <DrawerPanelContent isResizable defaultSize="50%">
+      <DrawerHead>
+        <Title headingLevel="h6">{workspace.name}</Title>
+        <WorkspaceDetailsActions onEditClick={onEditClick} onDeleteClick={onDeleteClick} />
+        <DrawerActions>
+          <DrawerCloseButton onClick={onCloseClick} />
+        </DrawerActions>
+      </DrawerHead>
+      <DrawerPanelBody>
+        <Tabs activeKey={activeTabKey} onSelect={handleTabClick}>
+          <Tab eventKey={0} title={<TabTitleText>Overview</TabTitleText>} aria-label="Overview">
+            <WorkspaceDetailsOverview workspace={workspace} />
+          </Tab>
+          <Tab eventKey={1} title={<TabTitleText>Activity</TabTitleText>} aria-label="Activity">
+            Activity
+          </Tab>
+          <Tab eventKey={2} title={<TabTitleText>Logs</TabTitleText>} aria-label="Logs">
+            Logs
+          </Tab>
+          <Tab
+            eventKey={3}
+            title={<TabTitleText>Pod template</TabTitleText>}
+            aria-label="Pod template"
+          >
+            Pod template
+          </Tab>
+        </Tabs>
+      </DrawerPanelBody>
+    </DrawerPanelContent>
+  );
+};
diff --git a/workspaces/frontend/src/app/pages/Workspaces/Details/WorkspaceDetailsActions.tsx b/workspaces/frontend/src/app/pages/Workspaces/Details/WorkspaceDetailsActions.tsx
@@ -0,0 +1,65 @@
+import * as React from 'react';
+import {
+  Dropdown,
+  DropdownList,
+  MenuToggle,
+  DropdownItem,
+  Flex,
+  FlexItem,
+} from '@patternfly/react-core';
+
+interface WorkspaceDetailsActionsProps {
+  onEditClick: React.MouseEventHandler;
+  onDeleteClick: React.MouseEventHandler;
+}
+
+export const WorkspaceDetailsActions: React.FC<WorkspaceDetailsActionsProps> = ({
+  onEditClick,
+  onDeleteClick,
+}) => {
+  const [isOpen, setOpen] = React.useState(false);
+
+  return (
+    <Flex>
+      <FlexItem>
+        <Dropdown
+          isOpen={isOpen}
+          onSelect={() => setOpen(false)}
+          onOpenChange={(open) => setOpen(open)}
+          popperProps={{ position: 'end' }}
+          toggle={(toggleRef) => (
+            <MenuToggle
+              variant="primary"
+              ref={toggleRef}
+              onClick={() => setOpen(!isOpen)}
+              isExpanded={isOpen}
+              aria-label="Workspace details action toggle"
+              data-testid="workspace-details-action-toggle"
+            >
+              Actions
+            </MenuToggle>
+          )}
+        >
+          <DropdownList>
+            <DropdownItem
+              id="workspace-details-action-edit-button"
+              aria-label="Edit workspace"
+              key="edit-workspace-button"
+              onClick={onEditClick}
+            >
+              Edit
+            </DropdownItem>
+            <DropdownItem
+              id="workspace-details-action-delete-button"
+              aria-label="Delete workspace"
+              key="delete-workspace-button"
+              onClick={onDeleteClick}
+            >
+              Delete
+            </DropdownItem>
+          </DropdownList>
+        </Dropdown>
+      </FlexItem>
+    </Flex>
+  );
+};
diff --git a/workspaces/frontend/src/app/pages/Workspaces/Details/WorkspaceDetailsOverview.tsx b/workspaces/frontend/src/app/pages/Workspaces/Details/WorkspaceDetailsOverview.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import {
+  DescriptionList,
+  DescriptionListTerm,
+  DescriptionListGroup,
+  DescriptionListDescription,
+} from '@patternfly/react-core';
+import { Workspace } from '~/shared/types';
+
+type WorkspaceDetailsOverviewProps = {
+  workspace: Workspace;
+};
+
+export const WorkspaceDetailsOverview: React.FunctionComponent<WorkspaceDetailsOverviewProps> = ({
+  workspace,
+}) => (
+  <DescriptionList>
+    <DescriptionListGroup>
+      <DescriptionListTerm>Name</DescriptionListTerm>
+      <DescriptionListDescription>{workspace.name}</DescriptionListDescription>
+    </DescriptionListGroup>
+    <DescriptionListGroup>
+      <DescriptionListTerm>Kind</DescriptionListTerm>
+      <DescriptionListDescription>{workspace.kind}</DescriptionListDescription>
+    </DescriptionListGroup>
+    <DescriptionListGroup>
+      <DescriptionListTerm>Labels</DescriptionListTerm>
+      <DescriptionListDescription>
+        {workspace.podTemplate.podMetadata.labels.join(', ')}
+      </DescriptionListDescription>
+    </DescriptionListGroup>
+    <DescriptionListGroup>
+      <DescriptionListTerm>Pod config</DescriptionListTerm>
+      <DescriptionListDescription>{workspace.options.podConfig}</DescriptionListDescription>
+    </DescriptionListGroup>
+  </DescriptionList>
+);