Mccalluc/workspace list

CHANGELOG-more-workspace-api-exercise.md

@@ -0,0 +1 @@
+- Demostrate the Workspaces API to start jobs and collect job information.

context/app/static/js/components/workspaces/WorkspacesList.jsx

@@ -6,37 +6,53 @@ import { AppContext } from 'js/components/Providers';
 import { DeleteIcon, AddIcon } from 'js/shared-styles/icons';
 import { SpacedSectionButtonRow } from 'js/shared-styles/sections/SectionButtonRow';
 
-import { createNotebookWorkspace } from './utils';
-import { useWorkspacesList } from './hooks';
+import { createNotebookWorkspace, startJob } from './utils';
+import { useWorkspacesList, useJobsList } from './hooks';
 import { StyledButton } from './style';
 
 function WorkspacesList() {
   const { workspacesEndpoint, workspacesToken } = useContext(AppContext);
   const { workspacesList } = useWorkspacesList();
+  const { jobsList } = useJobsList();
 
   async function handleDelete() {
+    // eslint-disable-next-line no-alert
+    alert('TODO: API does not yet support deletion.');
     // TODO: Put up modal and get user input.
     // TODO: Update workspacesList
     // Waiting on delete to be implemented.
   }
 
   async function handleCreate() {
-    // TODO: Put up modal and get user input.
-    // TODO: Update workspacesList
+    // TODO: Put up a better modal and get user input.
+    // eslint-disable-next-line no-alert
+    const content = prompt('Intial content for notebook');
 
     createNotebookWorkspace({
       workspacesEndpoint,
       workspacesToken,
       workspaceName: 'Workspace Timestamp',
       workspaceDescription: 'TODO: description',
-      notebookContent: 'TODO',
+      notebookContent: content,
     });
+    // TODO: Update list on page
+  }
+
+  function createHandleStart(workspaceId) {
+    async function handleStart() {
+      startJob({ workspaceId, workspacesEndpoint, workspacesToken });
+    }
+    return handleStart;
   }
 
   return (
     <>
       <SpacedSectionButtonRow
-        leftText={<Typography variant="subtitle1">[TODO: Count] Workspaces</Typography>}
+        leftText={
+          <Typography variant="subtitle1">
+            {workspacesList.length} Workspace{workspacesList.length && 's'}
+          </Typography>
+        }
         buttons={
           <>
             <StyledButton onClick={handleDelete}>
@@ -49,9 +65,32 @@ function WorkspacesList() {
         }
       />
       <Paper>
-        {`TODO: Use token "${workspacesToken}" with "${workspacesEndpoint}"`}
-        <hr />
-        {JSON.stringify(workspacesList)}
+        {workspacesList.map((workspace) => (
+          <div key={workspace.id}>
+            <details>
+              <summary>JSON</summary>
+              <pre>{JSON.stringify(workspace, null, 2)}</pre>
+            </details>
+            <div>
+              <b>{workspace.name}</b> | Created {workspace.datetime_created.slice(0, 10)}
+            </div>
+            <button onClick={createHandleStart(workspace.id)} type="button">
+              Start Jupyter
+            </button>
+          </div>
+        ))}
+      </Paper>
+      <SpacedSectionButtonRow leftText={<Typography variant="subtitle1">Jobs</Typography>} />
+      <Paper>
+        TODO: The current API responses give us no way to connect Workspaces to Jobs.
+        {jobsList.map((job) => (
+          <div key={job.id}>
+            <details>
+              <summary>JSON</summary>
+              <pre>{JSON.stringify(job, null, 2)}</pre>
+            </details>
+          </div>
+        ))}
       </Paper>
     </>
   );

context/app/static/js/components/workspaces/hooks.js

@@ -25,7 +25,7 @@ function useWorkspacesList() {
       }
       const results = await response.json();
 
-      setWorkspacesList(results);
+      setWorkspacesList(results.data.workspaces);
       // TODO:
       // setIsLoading(false);
     }
@@ -35,4 +35,36 @@ function useWorkspacesList() {
   return { workspacesList };
 }
 
-export { useWorkspacesList };
+function useJobsList() {
+  // TODO: Right now the API does not support querying, so we just need to get the whole list.
+  const [jobsList, setJobsList] = useState([]);
+
+  const { workspacesEndpoint, workspacesToken } = useContext(AppContext);
+
+  useEffect(() => {
+    async function getAndSetJobsList() {
+      const response = await fetch(`${workspacesEndpoint}/jobs`, {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+          'UWS-Authorization': `Token ${workspacesToken}`,
+        },
+      });
+
+      if (!response.ok) {
+        console.error('Workspaces API failed', response);
+        return;
+      }
+      const results = await response.json();
+
+      setJobsList(results.data.jobs);
+      // TODO:
+      // setIsLoading(false);
+    }
+    getAndSetJobsList();
+  }, [workspacesEndpoint, workspacesToken]);
+
+  return { jobsList };
+}
+
+export { useWorkspacesList, useJobsList };

context/app/static/js/components/workspaces/utils.js

@@ -27,4 +27,18 @@ async function createNotebookWorkspace({
   });
 }
 
-export { createNotebookWorkspace };
+async function startJob({ workspaceId, workspacesEndpoint, workspacesToken }) {
+  await fetch(`${workspacesEndpoint}/workspaces/${workspaceId}/start`, {
+    method: 'PUT',
+    headers: {
+      'Content-Type': 'application/json',
+      'UWS-Authorization': `Token ${workspacesToken}`,
+    },
+    body: JSON.stringify({
+      job_type: 'JupyterLabJob',
+      job_details: {},
+    }),
+  });
+}
+
+export { createNotebookWorkspace, startJob };