feat(ws): Notebooks 2.0 // Frontend // Workspaces details // Pod temp…

…late tab #173 (#197) * feat(ws): Notebooks 2.0 // Frontend // Workspaces details // Pod template tab #173 Signed-off-by: Liav Weiss (EXT-Nokia) <[email protected]> * feat(ws): Notebooks 2.0 // Frontend // Workspaces details // Pod template tab #173 Signed-off-by: Liav Weiss (EXT-Nokia) <[email protected]> * feat(ws): Notebooks 2.0 // Frontend // Workspaces details // Pod template tab #173 Signed-off-by: Liav Weiss (EXT-Nokia) <[email protected]> --------- Signed-off-by: Liav Weiss (EXT-Nokia) <[email protected]> Co-authored-by: Liav Weiss (EXT-Nokia) <[email protected]>
kubeflow · Feb 20, 2025 · b981275 · b981275
1 parent 6216ab0
commit b981275
Show file tree

Hide file tree

Showing 4 changed files with 215 additions and 60 deletions.
diff --git a/workspaces/frontend/package-lock.json b/workspaces/frontend/package-lock.json
diff --git a/workspaces/frontend/package.json b/workspaces/frontend/package.json
@@ -94,10 +94,13 @@
     "webpack-merge": "^5.10.0"
   },
   "dependencies": {
+    "@patternfly/react-code-editor": "^6.0.0",
     "@patternfly/react-core": "^6.0.0",
     "@patternfly/react-icons": "^6.0.0",
     "@patternfly/react-styles": "^6.0.0",
     "@patternfly/react-table": "^6.0.0",
+    "@types/js-yaml": "^4.0.9",
+    "js-yaml": "^4.1.0",
     "npm-run-all": "^4.1.5",
     "react": "^18",
     "react-dom": "^18",

diff --git a/workspaces/frontend/src/app/pages/Workspaces/Details/WorkspaceDetails.tsx b/workspaces/frontend/src/app/pages/Workspaces/Details/WorkspaceDetails.tsx
@@ -16,6 +16,7 @@ import { Workspace } from '~/shared/types';
 import { WorkspaceDetailsOverview } from '~/app/pages/Workspaces/Details/WorkspaceDetailsOverview';
 import { WorkspaceDetailsActions } from '~/app/pages/Workspaces/Details/WorkspaceDetailsActions';
 import { WorkspaceDetailsActivity } from '~/app/pages/Workspaces/Details/WorkspaceDetailsActivity';
+import { WorkspaceDetailsPodTemplate } from '~/app/pages/Workspaces/Details/WorkspaceDetailsPodTemplate';
 
 type WorkspaceDetailsProps = {
   workspace: Workspace;
@@ -48,43 +49,85 @@ export const WorkspaceDetails: React.FunctionComponent<WorkspaceDetailsProps> =
           <DrawerCloseButton onClick={onCloseClick} />
         </DrawerActions>
       </DrawerHead>
+
       <DrawerPanelBody>
         <Tabs activeKey={activeTabKey} onSelect={handleTabClick}>
-          <Tab eventKey={0} title={<TabTitleText>Overview</TabTitleText>} aria-label="Overview">
-            <TabContent id="overviewSectionBodyPadding">
-              <TabContentBody hasPadding>
-                <WorkspaceDetailsOverview workspace={workspace} />
-              </TabContentBody>
-            </TabContent>
-          </Tab>
+          <Tab
+            eventKey={0}
+            title={<TabTitleText>Overview</TabTitleText>}
+            tabContentId="overviewTabContent"
+            aria-label="Overview"
+          />
           <Tab
             eventKey={1}
             title={<TabTitleText>Activity</TabTitleText>}
+            tabContentId="activityTabContent"
             aria-label="Activity"
             data-testid="activityTab"
-          >
-            <TabContent id="activitySectionBodyPadding">
-              <TabContentBody hasPadding>
-                <WorkspaceDetailsActivity workspace={workspace} />
-              </TabContentBody>
-            </TabContent>
-          </Tab>
-          <Tab eventKey={2} title={<TabTitleText>Logs</TabTitleText>} aria-label="Logs">
-            <TabContent id="logsSectionBodyPadding">
-              <TabContentBody hasPadding>Logs</TabContentBody>
-            </TabContent>
-          </Tab>
+          />
+          <Tab
+            eventKey={2}
+            title={<TabTitleText>Logs</TabTitleText>}
+            tabContentId="logsTabContent"
+            aria-label="Logs"
+          />
           <Tab
             eventKey={3}
             title={<TabTitleText>Pod template</TabTitleText>}
+            tabContentId="podTemplateTabContent"
             aria-label="Pod template"
-          >
-            <TabContent id="podTemplateBodyPadding">
-              <TabContentBody hasPadding>Pod template</TabContentBody>
-            </TabContent>
-          </Tab>
+          />
         </Tabs>
       </DrawerPanelBody>
+
+      <DrawerPanelBody>
+        <TabContent
+          key={0}
+          eventKey={0}
+          id="overviewTabContent"
+          activeKey={activeTabKey}
+          hidden={activeTabKey !== 0}
+        >
+          <TabContentBody hasPadding>
+            <WorkspaceDetailsOverview workspace={workspace} />
+          </TabContentBody>
+        </TabContent>
+
+        <TabContent
+          key={1}
+          eventKey={1}
+          id="activityTabContent"
+          activeKey={activeTabKey}
+          hidden={activeTabKey !== 1}
+        >
+          <TabContentBody hasPadding>
+            <WorkspaceDetailsActivity workspace={workspace} />
+          </TabContentBody>
+        </TabContent>
+
+        <TabContent
+          key={2}
+          eventKey={2}
+          id="logsTabContent"
+          activeKey={activeTabKey}
+          hidden={activeTabKey !== 2}
+        >
+          <TabContentBody hasPadding>Logs</TabContentBody>
+        </TabContent>
+
+        <TabContent
+          key={3}
+          style={{ height: '100%' }}
+          eventKey={3}
+          id="podTemplateTabContent"
+          activeKey={activeTabKey}
+          hidden={activeTabKey !== 3}
+        >
+          <TabContentBody style={{ height: '100%' }} hasPadding>
+            <WorkspaceDetailsPodTemplate />
+          </TabContentBody>
+        </TabContent>
+      </DrawerPanelBody>
     </DrawerPanelContent>
   );
 };