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

…late tab kubeflow#173

Signed-off-by: Liav Weiss (EXT-Nokia) <[email protected]>

workspaces/frontend/package.json

@@ -94,10 +94,13 @@
     "webpack-merge": "^5.10.0"
   },
   "dependencies": {
+    "@patternfly/react-code-editor": "^6.1.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",

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;
@@ -80,7 +81,9 @@ export const WorkspaceDetails: React.FunctionComponent<WorkspaceDetailsProps> =
             aria-label="Pod template"
           >
             <TabContent id="podTemplateBodyPadding">
-              <TabContentBody hasPadding>Pod template</TabContentBody>
+              <TabContentBody hasPadding style={{ height: '500px' }}>
+                <WorkspaceDetailsPodTemplate />
+              </TabContentBody>
             </TabContent>
           </Tab>
         </Tabs>

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import { CodeEditor, Language } from '@patternfly/react-code-editor';
+import yaml from 'js-yaml';
+
+const mockYaml = `apiVersion: kubeflow.org/v1beta1
+kind: Workspace
+metadata:
+  name: jupyterlab-workspace
+spec:
+  paused: false
+  deferUpdates: false
+  kind: "jupyterlab"
+  podTemplate:
+    podMetadata:
+      labels: {}
+      annotations: {}
+    volumes:
+      home: "workspace-home-pvc"
+      data:
+        - pvcName: "workspace-data-pvc"
+          mountPath: "/data/my-data"
+          readOnly: false
+    options:
+      imageConfig: "jupyterlab_scipy_190"
+      podConfig: "tiny_cpu"`;
+
+export const WorkspaceDetailsPodTemplate: React.FunctionComponent = () => {
+  const parsedYaml = yaml.load(mockYaml);
+  const podTemplateYaml = yaml.dump(parsedYaml || {});
+
+  return (
+    <CodeEditor
+      isLineNumbersVisible
+      isFullHeight
+      isReadOnly
+      code={podTemplateYaml || '# No podTemplate data available'}
+      language={Language.yaml}
+    />
+  );
+};