display notification info in JobDetail

Author: andrii-i

src/components/notification-detail.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+
+import { Card, CardContent, Stack, FormLabel } from '@mui/material';
+import { useTranslator } from '../hooks';
+import { Scheduler } from '../handler';
+import { LabeledValue } from '../components/labeled-value';
+
+interface INotificationItemProps {
+  label: string;
+  value: string | boolean;
+}
+
+interface INotificationDetailsProps {
+  notification: Scheduler.INotification;
+}
+
+const NotificationItem: React.FC<INotificationItemProps> = ({
+  label,
+  value
+}) => {
+  const displayValue =
+    typeof value === 'boolean' ? (value ? 'Yes' : 'No') : value;
+
+  return (
+    <LabeledValue
+      label={label}
+      value={displayValue}
+      style={{ flex: '1 1 100%' }}
+    />
+  );
+};
+
+export const NotificationDetails: React.FC<INotificationDetailsProps> = ({
+  notification
+}) => {
+  const trans = useTranslator('jupyterlab');
+
+  return (
+    <Card>
+      <CardContent>
+        <FormLabel component="legend" sx={{ mb: 2 }}>
+          {trans.__('Notification')}
+        </FormLabel>
+        <Stack spacing={2}>
+          <FormLabel component="legend">{trans.__('Send To')}</FormLabel>
+          {notification.send_to.map((email, idx) => (
+            <NotificationItem
+              key={idx}
+              label={trans.__(`Send To ${idx}`)}
+              value={email}
+            />
+          ))}
+          <FormLabel component="legend">{trans.__('Events')}</FormLabel>
+          {notification.events.map((event, idx) => (
+            <NotificationItem
+              key={idx}
+              label={trans.__(`Event ${idx}`)}
+              value={event}
+            />
+          ))}
+          <NotificationItem
+            label={trans.__('Include Output')}
+            value={notification.include_output}
+          />
+        </Stack>
+      </CardContent>
+    </Card>
+  );
+};

src/components/notification-picker.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 
 import { Cluster } from './cluster';
 import {
@@ -43,18 +43,6 @@ export function NotificationPicker({
     model.notification?.includeOutput || false
   );
 
-  useEffect(() => {
-    if (model.notification?.enableNotification === undefined) {
-      modelChange({
-        ...model,
-        notification: {
-          ...model.notification,
-          enableNotification: enableNotification
-        }
-      });
-    }
-  }, []);
-
   const enableNotificationChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const updatedEnableNotification = e.target.checked;
     setEnableNotification(updatedEnableNotification);

src/mainviews/create-job.tsx

@@ -122,12 +122,18 @@ export function CreateJob(props: ICreateJobProps): JSX.Element {
           envList[0].name
         )?.map(format => format.name);
 
-        props.handleModelChange({
+        const newModel = {
           ...props.model,
           environment: envList[0].name,
           computeType: newComputeType,
           outputFormats: outputFormats
-        });
+        };
+
+        if (envList[0].notifications_enabled && !props.model.notification) {
+          newModel.notification = { enableNotification: true };
+        }
+
+        props.handleModelChange(newModel);
       }
     };
 
@@ -335,6 +341,10 @@ export function CreateJob(props: ICreateJobProps): JSX.Element {
       };
     }
 
+    console.log('\n\n***\nHELLO WORLD!!!');
+    console.log(jobOptions);
+    console.log(props.model);
+
     props.handleModelChange({
       ...props.model,
       createError: undefined,

src/mainviews/detail-view/job-definition.tsx

@@ -1,7 +1,5 @@
 import React, { useMemo, useState } from 'react';
 
-import { JupyterFrontEnd } from '@jupyterlab/application';
-
 import {
   Alert,
   Button,
@@ -10,27 +8,26 @@ import {
   FormLabel,
   Stack
 } from '@mui/material';
-
-import cronstrue from 'cronstrue';
-
 import { ButtonBar } from '../../components/button-bar';
 import { ConfirmDialogDeleteButton } from '../../components/confirm-dialog-buttons';
-import {
-  ILabeledValueProps,
-  LabeledValue
-} from '../../components/labeled-value';
-import { SchedulerService } from '../../handler';
-import { useEventLogger, useTranslator } from '../../hooks';
 import { ListJobsTable } from '../list-jobs';
+import cronstrue from 'cronstrue';
 import {
   IJobDefinitionModel,
   JobsView,
   ICreateJobModel,
   emptyCreateJobModel
 } from '../../model';
+import {
+  ILabeledValueProps,
+  LabeledValue
+} from '../../components/labeled-value';
+import { JupyterFrontEnd } from '@jupyterlab/application';
+import { NotificationDetails } from '../../components/notification-detail';
 import { Scheduler as SchedulerTokens } from '../../tokens';
-
+import { SchedulerService } from '../../handler';
 import { timestampLocalize } from './job-detail';
+import { useEventLogger, useTranslator } from '../../hooks';
 
 export interface IJobDefinitionProps {
   app: JupyterFrontEnd;
@@ -292,6 +289,9 @@ export function JobDefinition(props: IJobDefinitionProps): JSX.Element {
       {DefinitionButtonBar}
       {JobDefinition}
       {JobsList}
+      {props.model.notification && (
+        <NotificationDetails notification={props.model.notification} />
+      )}
       {AdvancedOptions}
     </>
   );

src/mainviews/detail-view/job-detail.tsx

@@ -1,18 +1,5 @@
 import React, { useCallback, useState } from 'react';
 
-import { JupyterFrontEnd } from '@jupyterlab/application';
-
-import { ButtonBar } from '../../components/button-bar';
-import {
-  ConfirmDialogDeleteButton,
-  ConfirmDialogStopButton
-} from '../../components/confirm-dialog-buttons';
-import { JobFileLink } from '../../components/job-file-link';
-import { Scheduler, SchedulerService } from '../../handler';
-import { useEventLogger, useTranslator } from '../../hooks';
-import { ICreateJobModel, IJobDetailModel, JobsView } from '../../model';
-import { Scheduler as SchedulerTokens } from '../../tokens';
-
 import {
   Alert,
   Button,
@@ -23,7 +10,23 @@ import {
   TextField,
   TextFieldProps
 } from '@mui/material';
+import { ButtonBar } from '../../components/button-bar';
 import { CommandIDs } from '../..';
+import {
+  ConfirmDialogDeleteButton,
+  ConfirmDialogStopButton
+} from '../../components/confirm-dialog-buttons';
+import { ICreateJobModel, IJobDetailModel, JobsView } from '../../model';
+import {
+  ILabeledValueProps,
+  LabeledValue
+} from '../../components/labeled-value';
+import { JobFileLink } from '../../components/job-file-link';
+import { JupyterFrontEnd } from '@jupyterlab/application';
+import { NotificationDetails } from '../../components/notification-detail';
+import { Scheduler, SchedulerService } from '../../handler';
+import { Scheduler as SchedulerTokens } from '../../tokens';
+import { useEventLogger, useTranslator } from '../../hooks';
 
 export const TextFieldStyled = (props: TextFieldProps): JSX.Element => (
   <TextField
@@ -34,11 +37,6 @@ export const TextFieldStyled = (props: TextFieldProps): JSX.Element => (
   />
 );
 
-import {
-  ILabeledValueProps,
-  LabeledValue
-} from '../../components/labeled-value';
-
 export interface IJobDetailProps {
   app: JupyterFrontEnd;
   model: IJobDetailModel | null;
@@ -354,6 +352,9 @@ export function JobDetail(props: IJobDetailProps): JSX.Element {
       {JobButtonBar}
       {CoreOptions}
       {Parameters}
+      {props.model.notification && (
+        <NotificationDetails notification={props.model.notification} />
+      )}
       {AdvancedOptions}
     </>
   );