✨ New job screen

components/ui/graphql/src/data/domains.ts

@@ -24,8 +24,8 @@ export class DomainsAPI extends RESTDataSource {
   }
 
   // QUERIES //
-  async getDomains(): Promise<Domain[]> {
-    const res = await this.get(`${this.baseURL!}computedomains/`) || [];
+  async getDomains(jobs = false): Promise<Domain[]> {
+    const res = await this.get(`${this.baseURL!}computedomains${!jobs ? '' : '?batch=true'}`) || [];
     let domains = res.map((r: any) => this.domainReducer(r));
     domains = sortBy(domains, 'name');
 

components/ui/graphql/src/generated/schema.graphql

@@ -48,6 +48,7 @@ input CreateJobParams {
   command: String!
   dockerComputeEndpoint: String!
   dockerImageName: String!
+  name: String
   resultsFolderURI: String!
   scriptURI: String!
   submitterDID: String!
@@ -217,7 +218,7 @@ type Query {
   getDataset(params: DatasetDetailInput!): Dataset
   getDatasets(volumeType: VolumeType!): [Dataset!]!
   getDomainByID(id: ID!): Domain
-  getDomains: [Domain!]!
+  getDomains(jobs: Boolean): [Domain!]!
   getJobDetails(jobId: ID!): JobDetails!
   getJobs(filters: [JobFilters!], top: Int): [Job!]!
   getJsonTree(volumeName: String!): JSONTree!

components/ui/graphql/src/generated/typings.ts

@@ -72,6 +72,7 @@ export type CreateJobParams = {
   command: Scalars['String'];
   dockerComputeEndpoint: Scalars['String'];
   dockerImageName: Scalars['String'];
+  name?: InputMaybe<Scalars['String']>;
   resultsFolderURI: Scalars['String'];
   scriptURI: Scalars['String'];
   submitterDID: Scalars['String'];
@@ -304,6 +305,11 @@ export type QueryGetDomainByIdArgs = {
 };
 
 
+export type QueryGetDomainsArgs = {
+  jobs?: InputMaybe<Scalars['Boolean']>;
+};
+
+
 export type QueryGetJobDetailsArgs = {
   jobId: Scalars['ID'];
 };
@@ -725,7 +731,7 @@ export type QueryResolvers<ContextType = Context, ParentType extends ResolversPa
   getDataset?: Resolver<Maybe<ResolversTypes['Dataset']>, ParentType, ContextType, RequireFields<QueryGetDatasetArgs, 'params'>>;
   getDatasets?: Resolver<Array<ResolversTypes['Dataset']>, ParentType, ContextType, RequireFields<QueryGetDatasetsArgs, 'volumeType'>>;
   getDomainByID?: Resolver<Maybe<ResolversTypes['Domain']>, ParentType, ContextType, RequireFields<QueryGetDomainByIdArgs, 'id'>>;
-  getDomains?: Resolver<Array<ResolversTypes['Domain']>, ParentType, ContextType>;
+  getDomains?: Resolver<Array<ResolversTypes['Domain']>, ParentType, ContextType, Partial<QueryGetDomainsArgs>>;
   getJobDetails?: Resolver<ResolversTypes['JobDetails'], ParentType, ContextType, RequireFields<QueryGetJobDetailsArgs, 'jobId'>>;
   getJobs?: Resolver<Array<ResolversTypes['Job']>, ParentType, ContextType, Partial<QueryGetJobsArgs>>;
   getJsonTree?: Resolver<ResolversTypes['JSONTree'], ParentType, ContextType, RequireFields<QueryGetJsonTreeArgs, 'volumeName'>>;

components/ui/graphql/src/resolvers/domain.ts

@@ -3,8 +3,8 @@ import { QueryResolvers } from '../generated/typings';
 
 export const queryResolvers: QueryResolvers = {
   // eslint-disable-next-line no-empty-pattern
-  getDomains: async (_, { }, { dataSources }) => {
-    return dataSources.domainsAPI.getDomains();
+  getDomains: async (_, { jobs }, { dataSources }) => {
+    return dataSources.domainsAPI.getDomains(jobs ?? undefined);
   },
   getDomainByID: async (_, { id }, { dataSources }) => {
     return dataSources.domainsAPI.getDomainByID(id);

components/ui/graphql/src/types/domain.ts

@@ -22,7 +22,7 @@ export const typeDefs = gql`
   }
 
   type Query {
-    getDomains: [Domain!]!
+    getDomains(jobs: Boolean): [Domain!]!
     getDomainByID(id: ID!): Domain
   }
 `;

components/ui/graphql/src/types/jobs.ts

@@ -64,6 +64,7 @@ export const typeDefs = gql`
     dockerImageName: String!
     submitterDID: String!
     scriptURI: String!
+    name: String
   }
 
   type Query {

components/ui/web/.env.development

@@ -1,7 +1,7 @@
 NEXT_PUBLIC_FILE_SERVICE_URL=https://apps.sciserver.org/fileservice/api/
 NEXT_PUBLIC_LOGIN_PORTAL_URL=https://apps.sciserver.org/login-portal/
-NEXT_PUBLIC_GRAPHQL_URL=http://localhost:4000/graphql
-# NEXT_PUBLIC_GRAPHQL_URL=https://apps.sciserver.org/graphql
+# NEXT_PUBLIC_GRAPHQL_URL=http://localhost:4000/graphql
+NEXT_PUBLIC_GRAPHQL_URL=https://apps.sciserver.org/graphql
 NEXT_PUBLIC_NOTEBOOKS_URL=https://apps.sciserver.org/compute/
 NEXT_PUBLIC_FILES_URL=https://apps.sciserver.org/dashboard/files/uservolumes
 NEXT_PUBLIC_BASE_PATH='/web'
@@ -11,4 +11,7 @@ NEXT_PUBLIC_COMPUTE_PING_INTERVAL=60000 #time in milliseconds
 NEXT_PUBLIC_LANDING_ROUTE=/datasets #default landing page to redirect from login
 NEXT_PUBLIC_QUICK_START_CONFIG='dom=Interactive%20Docker%20Compute%20Domain&img=Sciserver%20Essentials%20(Test)&dvs=97'
 NEXT_PUBLIC_NEW_SESSION_DOMAIN_NAME_DEFAULT=Interactive Docker Compute Domain
-NEXT_PUBLIC_NEW_SESSION_IMAGE_NAME_DEFAULT=Sciserver Essentials (Test)
+NEXT_PUBLIC_NEW_SESSION_IMAGE_NAME_DEFAULT=SciServer Essentials 4.0
+NEXT_PUBLIC_NEW_JOB_DOMAIN_NAME_DEFAULT=Small Jobs Domain
+NEXT_PUBLIC_NEW_JOB_IMAGE_NAME_DEFAULT=SciServer Essentials 4.0
+[email protected]

components/ui/web/components/content/compute/newSession/newSession.tsx → components/ui/web/components/content/compute/sessionManagement/newSession.tsx

@@ -1,23 +1,14 @@
 import { FC, useMemo, useState } from 'react';
 import { useRouter } from 'next/router';
-import styled from 'styled-components';
-import {
-  Button,
-  CircularProgress,
-  IconButton,
-  TextField,
-  Typography
-} from '@mui/material';
-import { ArrowBackIos as ArrowBackIcon } from '@mui/icons-material';
 import { useQuery, ApolloError } from '@apollo/client';
+import { Chip, IconButton } from '@mui/material';
+import { Close as CloseIcon } from '@mui/icons-material';
+import styled from 'styled-components';
 
-import { DomainAccordionSummary } from 'components/content/compute/newSession/domainAccordion';
-import { ImageAccordionSummary } from 'components/content/compute/newSession/imageAccordion';
-import { DataVolAccordionSummary } from 'components/content/compute/newSession/dataVolumeAccordion';
-import { UserVolAccordionSummary } from 'components/content/compute/newSession/userVolumeAccordion';
 import { DataVolume, Domain, Image, UserVolume } from 'src/graphql/typings';
 import { GET_DOMAINS } from 'src/graphql/domains';
-import { LoadingAnimation } from 'components/common/loadingAnimation';
+
+import { NewComputeSession, NewComputeSessionType } from 'components/content/newComputeSession/newComputeSession';
 
 const Styled = styled.div`
   .header {
@@ -30,44 +21,14 @@ const Styled = styled.div`
       color: ${({ theme }) => theme.palette.warning.dark};
     }
   }
-
-  .form {
-    display: flex;
-    flex-direction: column;
-    gap: 2rem;
-    margin: 2rem 0.5rem;
-    width: 90%;
-
-    .accordion-header {
-      display: flex;
-      align-items: center;
-      gap: 2rem;
-
-      .accordion-title { 
-        display: flex;
-        width: 120px;
-        align-items: center;
-
-        .title {
-          text-transform: capitalize;
-        }
-      }
-    }
-
-    .submit-button {
-      margin: 2rem 0.1rem;
-    }
-  }
 `;
 
-
-export const NewSession: FC = ({ }) => {
+export const NewSession: FC = () => {
 
   const router = useRouter();
 
   const [loadingSubmit, setLoadingSubmit] = useState<boolean>(false);
 
-
   const { loading: loadingData, data } = useQuery(GET_DOMAINS,
     {
       onError: (error: ApolloError) => {
@@ -78,6 +39,7 @@ export const NewSession: FC = ({ }) => {
     }
   );
 
+  const [sessionName, setSessionName] = useState<string>('');
   const [domainChoice, setDomainChoice] = useState<Domain>();
   const [imageChoice, setImageChoice] = useState<Image>();
   const [dataVolumesChoice, setDataVolumesChoice] = useState<DataVolume[]>([]);
@@ -133,27 +95,30 @@ export const NewSession: FC = ({ }) => {
   return <Styled>
     <div className="header">
       <IconButton onClick={() => router.push('/compute')} >
-        <ArrowBackIcon />
+        <CloseIcon />
       </IconButton>
-      <Typography variant="h3">New Compute Session</Typography>
-      <Typography className="alert" variant="h4">(BETA version)</Typography>
+      <h1>New Compute Session</h1>
+      <Chip color="warning" label="BETA" />
     </div>
-    <div className="form">
-      <TextField id="standard-basic" label="Session Name" variant="standard" />
-      <DomainAccordionSummary domainList={domainList} domainChoice={domainChoice} setDomainChoice={setDomainChoice} />
-      <ImageAccordionSummary imageList={imageList} imageChoice={imageChoice} setImageChoice={setImageChoice} />
-      <DataVolAccordionSummary dataVolumeList={dataVolumeList} dataVolumesChoice={dataVolumesChoice} setDataVolumesChoice={setDataVolumesChoice} />
-      <UserVolAccordionSummary userVolumeList={userVolumeList} userVolumesChoice={userVolumesChoice} setUserVolumesChoice={setUserVolumesChoice} />
-      <Button className="submit-button" type="submit" onClick={submit} variant="contained">
-        {loadingSubmit ?
-          <CircularProgress color="secondary" />
-          :
-          'CREATE'
-        }
-      </Button>
-    </div>
-    {loadingData &&
-      <LoadingAnimation backDropIsOpen={loadingData} />
-    }
-  </Styled >;
+    <NewComputeSession
+      sessionType={NewComputeSessionType.INTERACTIVE}
+      resourceName={sessionName}
+      setResourceName={setSessionName}
+      domainList={domainList}
+      domainChoice={domainChoice}
+      setDomainChoice={setDomainChoice}
+      imageList={imageList}
+      imageChoice={imageChoice}
+      setImageChoice={setImageChoice}
+      dataVolumeList={dataVolumeList}
+      dataVolumesChoice={dataVolumesChoice}
+      setDataVolumesChoice={setDataVolumesChoice}
+      userVolumeList={userVolumeList}
+      userVolumesChoice={userVolumesChoice}
+      setUserVolumesChoice={setUserVolumesChoice}
+      submit={submit}
+      loadingSubmit={loadingSubmit}
+      loadingData={loadingData}
+    />
+  </Styled>;
 };

components/ui/web/components/content/jobs/list/jobDatagrid.tsx

@@ -1,11 +1,13 @@
 import { FC, useState } from 'react';
+import { useRouter } from 'next/router';
 import styled from 'styled-components';
 import {
   KeyboardArrowUp as KeyboardArrowUpIcon,
   KeyboardArrowDown as KeyboardArrowDownIcon
 } from '@mui/icons-material';
 
 import {
+  Button,
   Chip,
   IconButton,
   Paper,
@@ -21,11 +23,17 @@ import { Job } from 'src/graphql/typings';
 import { JobShortDetail } from 'components/content/jobs/detail/jobShortDetail';
 
 const Styled = styled.div`
-margin-top: 2rem;
+  margin-top: 2rem;
 
-  .grid {  
+  .new-job {
+    display: block;
+    margin: 1rem 3rem 1rem auto; /* pushes the button to the right */
+  }
+
+  .grid {
     width: inherit;
-     .column-header {
+
+    .column-header {
       font-style: normal;
       font-size: 14px;
       letter-spacing: 0.25px;
@@ -47,6 +55,8 @@ type Props = {
 }
 
 export const JobsDataGrid: FC<Props> = ({ jobsList }) => {
+
+  const router = useRouter();
   // State to track which job rows are expanded by their ID
   const [openRows, setOpenRows] = useState<Set<string>>(new Set());
 
@@ -82,8 +92,15 @@ export const JobsDataGrid: FC<Props> = ({ jobsList }) => {
   };
 
   return <Styled>
-    <Paper sx={{ width: '90%' }}>
-
+    <Button
+      variant="contained"
+      color="primary"
+      className="new-job"
+      onClick={() => router.push('/jobs/new')}
+    >
+      New Job
+    </Button>
+    <Paper sx={{ width: '95%' }}>
       <TableContainer sx={{ maxHeight: 440, minWidth: '100%' }}>
         <Table stickyHeader className="grid" aria-label=" Jobs Data Table">
           <TableHead>