feat: add jobs

client/src/components/TimeCaption.tsx

@@ -25,7 +25,10 @@ import {
   ensureDateTime,
   toHumanDateTime,
 } from "../utils/helpers/DateTimeUtils";
-import { toHumanRelativeDuration } from "../utils/helpers/DurationUtils";
+import {
+  RemoveSuffix,
+  toHumanRelativeDuration,
+} from "../utils/helpers/DurationUtils";
 
 interface TimeCaptionProps {
   className?: string;
@@ -34,6 +37,8 @@ interface TimeCaptionProps {
   noCaption?: boolean;
   prefix?: ReactNode;
   suffix?: ReactNode;
+  /** Omit "ago"/"from now" when datetime is on the given side of now. */
+  removeRelativeSuffix?: RemoveSuffix;
 }
 
 export function TimeCaption({
@@ -43,13 +48,18 @@ export function TimeCaption({
   noCaption,
   prefix,
   suffix,
+  removeRelativeSuffix = false,
 }: TimeCaptionProps) {
   const [now, setNow] = useState<DateTime>(DateTime.utc());
 
   const datetime = datetime_ ? ensureDateTime(datetime_) : null;
   const durationStr =
     datetime != null && datetime.isValid
-      ? toHumanRelativeDuration({ datetime, now })
+      ? toHumanRelativeDuration({
+          datetime,
+          now,
+          removeSuffix: removeRelativeSuffix,
+        })
       : "at unknown time";
 
   const className = noCaption ? className_ : cx("time-caption", className_);

client/src/components/entities/entities.types.ts

@@ -1,4 +1,5 @@
 export type EntityTypes =
   | "code-repository"
   | "data-connector"
+  | "job-launcher"
   | "session-launcher";

client/src/components/offcanvas/OffcanvasHeaderWithType.tsx

@@ -2,6 +2,7 @@ import cx from "classnames";
 import {
   Database,
   FileCode,
+  Gear,
   PlayCircle,
   QuestionCircle,
 } from "react-bootstrap-icons";
@@ -29,6 +30,8 @@ export default function OffcanvasHeaderWithType({
     <Database className="me-1" />
   ) : entityType === "session-launcher" ? (
     <PlayCircle className="me-1" />
+  ) : entityType === "job-launcher" ? (
+    <Gear className="me-1" />
   ) : entityType === "code-repository" ? (
     <FileCode className="me-1" />
   ) : (
@@ -39,11 +42,13 @@ export default function OffcanvasHeaderWithType({
     ? _entityName
     : entityType === "data-connector"
       ? "Data connector"
-      : entityType === "session-launcher"
-        ? "Session launcher"
-        : entityType === "code-repository"
-          ? "Code repository"
-          : "Unknown";
+      : entityType === "job-launcher"
+        ? "Job launcher"
+        : entityType === "session-launcher"
+          ? "Session launcher"
+          : entityType === "code-repository"
+            ? "Code repository"
+            : "Unknown";
 
   return (
     <div>

client/src/features/ProjectPageV2/utils/useProjectPermissions.hook.ts

@@ -20,7 +20,7 @@ import { skipToken } from "@reduxjs/toolkit/query";
 import { useEffect } from "react";
 
 import { DEFAULT_PERMISSIONS } from "../../permissionsV2/permissions.constants";
-import type { Permissions } from "../../permissionsV2/permissions.types";
+import type { PermissionsWithLoadingState } from "../../permissionsV2/permissions.types";
 import { projectV2Api } from "../../projectsV2/api/projectV2.enhanced-api";
 
 interface UseProjectPermissionsArgs {
@@ -29,8 +29,8 @@ interface UseProjectPermissionsArgs {
 
 export default function useProjectPermissions({
   projectId,
-}: UseProjectPermissionsArgs): Permissions {
-  const { currentData, isLoading, isError, isUninitialized } =
+}: UseProjectPermissionsArgs): PermissionsWithLoadingState {
+  const { currentData, isLoading, isError, isUninitialized, error } =
     projectV2Api.endpoints.getProjectsByProjectIdPermissions.useQueryState(
       projectId ? { projectId } : skipToken,
     );
@@ -43,13 +43,26 @@ export default function useProjectPermissions({
     }
   }, [fetchPermissions, isUninitialized, projectId]);
 
+  const isLoadingPermissions = isLoading || !!(projectId && isUninitialized);
+  const arePermissionsResolved =
+    !isLoadingPermissions && !isError && currentData != null;
+
   if (isLoading || isError || !currentData) {
-    return DEFAULT_PERMISSIONS;
+    return {
+      ...DEFAULT_PERMISSIONS,
+      arePermissionsResolved: false,
+      isLoadingPermissions,
+      isPermissionsError: isError,
+      permissionsError: isError ? error : undefined,
+    };
   }
 
-  const permissions: Permissions = {
+  return {
     ...DEFAULT_PERMISSIONS,
     ...currentData,
+    arePermissionsResolved,
+    isLoadingPermissions: false,
+    isPermissionsError: false,
+    permissionsError: undefined,
   };
-  return permissions;
 }

client/src/features/admin/SessionEnvironmentAdvancedFields.tsx

@@ -70,6 +70,7 @@ export default function SessionEnvironmentAdvancedFields({
             <AdvancedSettingsFields<SessionEnvironmentForm>
               control={control}
               errors={errors}
+              launcherCategory="session"
             />
           </CollapseBody>
         </Collapse>

client/src/features/admin/UpdateSessionEnvironmentButton.tsx

@@ -106,10 +106,8 @@ function UpdateSessionEnvironmentModal({
             uid: data.uid ?? undefined,
             working_directory: data.working_directory?.trim() || undefined,
             strip_path_prefix: data.strip_path_prefix,
-            ...(commandParsed.data
-              ? { command: commandParsed.data }
-              : { command: null }),
-            ...(argsParsed.data ? { args: argsParsed.data } : { args: null }),
+            command: commandParsed.data ?? undefined,
+            args: argsParsed.data ?? undefined,
           },
         });
     },

client/src/features/dashboardV2/DashboardV2.tsx

@@ -25,6 +25,7 @@ import {
   Eye,
   FileEarmarkText,
   Folder,
+  Gear,
   Megaphone,
   People,
   PlayCircle,
@@ -65,6 +66,7 @@ import CreateProjectV2Button from "../projectsV2/new/CreateProjectV2Button";
 import GroupShortHandDisplay from "../projectsV2/show/GroupShortHandDisplay";
 import ProjectShortHandDisplay from "../projectsV2/show/ProjectShortHandDisplay";
 import { useGetSessionsQuery as useGetSessionsQueryV2 } from "../sessionsV2/api/sessionsV2.api";
+import { SESSION_LAUNCHER_KIND } from "../sessionsV2/sessionsV2.types";
 import { useGetUserQueryState } from "../usersV2/api/users.api";
 import UserAvatar from "../usersV2/show/UserAvatar";
 import DashboardV2Sessions from "./DashboardV2Sessions";
@@ -96,6 +98,7 @@ export default function DashboardV2() {
               className={cx("d-flex", "flex-column", "gap-4")}
             >
               <SessionsDashboard />
+              <JobsDashboard />
               <ProjectsDashboard />
               <FooterDashboard />
             </Col>
@@ -422,7 +425,11 @@ function GroupsList({ data, error, isLoading }: GroupListProps) {
 }
 
 function SessionsDashboard() {
-  const { data: sessions, error, isLoading } = useGetSessionsQueryV2({});
+  const {
+    data: sessions,
+    error,
+    isLoading,
+  } = useGetSessionsQueryV2({ sessionType: SESSION_LAUNCHER_KIND.INTERACTIVE });
   const totalSessions = sessions ? sessions?.length : 0;
   return (
     <Card data-cy="sessions-container">
@@ -447,6 +454,39 @@ function SessionsDashboard() {
   );
 }
 
+function JobsDashboard() {
+  const {
+    data: jobs,
+    error,
+    isLoading,
+  } = useGetSessionsQueryV2({
+    sessionType: SESSION_LAUNCHER_KIND.NON_INTERACTIVE,
+  });
+  const totalJobs = jobs ? jobs?.length : 0;
+  if (totalJobs === 0) return;
+  return (
+    <Card data-cy="jobs-container">
+      <CardHeader>
+        <div className={cx("align-items-center", "d-flex")}>
+          <h2 className={cx("mb-0", "me-2")}>
+            <Gear className={cx("me-1", "bi")} />
+            My jobs
+          </h2>
+          <Badge>{totalJobs}</Badge>
+        </div>
+      </CardHeader>
+
+      <CardBody>
+        <DashboardV2Sessions
+          sessions={jobs}
+          isLoading={isLoading}
+          error={error}
+        />
+      </CardBody>
+    </Card>
+  );
+}
+
 function ViewAllLink({
   type,
   noItems,

client/src/features/dashboardV2/DashboardV2Sessions.tsx

@@ -22,6 +22,7 @@ import cx from "classnames";
 import { generatePath, Link } from "react-router";
 import { Col, ListGroup, Row } from "reactstrap";
 
+import { sessionLauncherKindToCategory } from "~/features/sessionsV2/session.utils";
 import RtkOrDataServicesError from "../../components/errors/RtkOrDataServicesError";
 import { Loader } from "../../components/Loader";
 import { ABSOLUTE_ROUTES } from "../../routing/routes.constants";
@@ -30,10 +31,15 @@ import { useGetSessionLaunchersByLauncherIdQuery as useGetProjectSessionLauncher
 import ActiveSessionButton from "../sessionsV2/components/SessionButton/ActiveSessionButton";
 import {
   getSessionStatusStyles,
+  SessionStatusV2Badge,
   SessionStatusV2Description,
   SessionStatusV2Label,
 } from "../sessionsV2/components/SessionStatus/SessionStatus";
-import { SessionList, SessionV2 } from "../sessionsV2/sessionsV2.types";
+import {
+  SESSION_LAUNCHER_KIND,
+  SessionList,
+  SessionV2,
+} from "../sessionsV2/sessionsV2.types";
 
 import styles from "./DashboardV2Sessions.module.scss";
 
@@ -100,16 +106,13 @@ function SessionDashboardList({
   return (
     <ListGroup flush data-cy="dashboard-session-list">
       {sessions?.map((session) => (
-        <DashboardSession key={session.name} session={session} />
+        <DashboardSessionListItem key={session.name} session={session} />
       ))}
     </ListGroup>
   );
 }
 
-interface DashboardSessionProps {
-  session: SessionV2;
-}
-function DashboardSession({ session }: DashboardSessionProps) {
+function useDashboardSessionItem(session: SessionV2) {
   const { project_id: projectId, launcher_id: launcherId } = session;
   const { data: project } = useGetProjectsByProjectIdQuery(
     projectId ? { projectId } : skipToken,
@@ -136,9 +139,45 @@ function DashboardSession({ session }: DashboardSessionProps) {
       })
     : ABSOLUTE_ROUTES.v2.index;
 
-  const sessionStyles = getSessionStatusStyles(session);
+  return { launcher, project, projectId, projectUrl, showSessionUrl };
+}
+
+function DashboardSessionStatusRow({ session }: { session: SessionV2 }) {
+  const launcherCategory = sessionLauncherKindToCategory(session.session_type);
+  const sessionStyles = getSessionStatusStyles(session, launcherCategory);
   const state = session.status.state;
 
+  return (
+    <div className={cx("d-flex", "gap-2", "align-items-center")}>
+      <img
+        src={sessionStyles.sessionIcon}
+        alt={`Session is ${state}`}
+        loading="lazy"
+        width={16}
+        height={16}
+      />
+      <SessionStatusV2Label session={session} variant="list" />
+    </div>
+  );
+}
+
+function DashboardJobStatusRow({ session }: { session: SessionV2 }) {
+  return (
+    <div
+      className={cx("d-flex", "gap-2", "align-items-center", "text-truncate")}
+      data-cy="job-submission-id"
+    >
+      Job: {session.submission_id}
+      <SessionStatusV2Badge session={session} />
+    </div>
+  );
+}
+
+function DashboardSessionListItem({ session }: { session: SessionV2 }) {
+  const { launcher, project, projectId, projectUrl, showSessionUrl } =
+    useDashboardSessionItem(session);
+  const isJob = session.session_type === SESSION_LAUNCHER_KIND.NON_INTERACTIVE;
+
   return (
     <div
       className={cx("list-group-item-action", "list-group-item")}
@@ -195,21 +234,19 @@ function DashboardSession({ session }: DashboardSessionProps) {
               "mt-2",
               "d-block",
               "d-sm-flex",
-              "gap-5",
+              "justify-content-between",
             )}
             xs={12}
           >
-            <div className={cx("d-flex", "gap-2")}>
-              <img
-                src={sessionStyles.sessionIcon}
-                alt={`Session is ${state}`}
-                loading="lazy"
-              />
-              <SessionStatusV2Label session={session} variant="list" />
-            </div>
+            {isJob ? (
+              <DashboardJobStatusRow session={session} />
+            ) : (
+              <DashboardSessionStatusRow session={session} />
+            )}
             <SessionStatusV2Description
               session={session}
               showInfoDetails={false}
+              includeIcon={false}
             />
           </Col>
         </Row>

client/src/features/logsDisplay/LogsModal.tsx

@@ -100,10 +100,13 @@ export default function LogsModal({
               "fs-4",
               "fst-italic",
               "mb-0",
-              getSessionStatusStyles({
-                status: { state: sessionState },
-                image: "url",
-              })["textColorCard"],
+              getSessionStatusStyles(
+                {
+                  status: { state: sessionState },
+                  image: "url",
+                },
+                "session",
+              )["textColorCard"],
             )}
           >
             Session status: {sessionState}

client/src/features/permissionsV2/permissions.types.ts

@@ -21,3 +21,12 @@ export type RequestedPermission = "write" | "delete" | "change_membership";
 export type Permissions = {
   [key in RequestedPermission]: boolean;
 };
+
+export type PermissionsWithLoadingState = Permissions & {
+  arePermissionsResolved: boolean;
+  isLoadingPermissions: boolean;
+  isPermissionsError: boolean;
+  permissionsError?: unknown;
+};
+
+export type ProjectPermissions = PermissionsWithLoadingState;