fix(striker-ui): add job indicator, complete message to StrikerInitForm

striker-ui/components/JobSummary.tsx

@@ -20,6 +20,7 @@ type AnvilJobs = {
 };
 
 type JobSummaryOptionalPropsWithDefault = {
+  getJobUrl?: (epoch: number) => string;
   openInitially?: boolean;
   refreshInterval?: number;
 };
@@ -41,6 +42,7 @@ type JobSummaryForwardedRefContent = {
 const JOB_LIST_LENGTH = '20em';
 const JOB_SUMMARY_DEFAULT_PROPS: Required<JobSummaryOptionalPropsWithDefault> &
   JobSummaryOptionalPropsWithoutDefault = {
+  getJobUrl: (epoch) => `${API_BASE_URL}/job?start=${epoch}`,
   onFetchSuccessAppend: undefined,
   openInitially: false,
   refreshInterval: 10000,
@@ -49,6 +51,7 @@ const JOB_SUMMARY_DEFAULT_PROPS: Required<JobSummaryOptionalPropsWithDefault> &
 const JobSummary = forwardRef<JobSummaryForwardedRefContent, JobSummaryProps>(
   (
     {
+      getJobUrl = JOB_SUMMARY_DEFAULT_PROPS.getJobUrl,
       onFetchSuccessAppend,
       openInitially = JOB_SUMMARY_DEFAULT_PROPS.openInitially,
       refreshInterval = JOB_SUMMARY_DEFAULT_PROPS.refreshInterval,
@@ -64,7 +67,7 @@ const JobSummary = forwardRef<JobSummaryForwardedRefContent, JobSummaryProps>(
 
     const loadTimestamp = useMemo(() => Math.floor(Date.now() / 1000), []);
 
-    periodicFetch<AnvilJobs>(`${API_BASE_URL}/job?start=${loadTimestamp}`, {
+    periodicFetch<AnvilJobs>(getJobUrl(loadTimestamp), {
       onError: () => {
         setAnvilJobs({});
       },

striker-ui/components/StrikerInitForm.tsx

@@ -1,6 +1,10 @@
+import { Assignment as AssignmentIcon } from '@mui/icons-material';
 import { Grid } from '@mui/material';
 import { FC, useCallback, useMemo, useRef, useState } from 'react';
 
+import API_BASE_URL from '../lib/consts/API_BASE_URL';
+import { BLACK } from '../lib/consts/DEFAULT_THEME';
+
 import api from '../lib/api';
 import ConfirmDialog from './ConfirmDialog';
 import ContainedButton from './ContainedButton';
@@ -10,6 +14,12 @@ import GeneralInitForm, {
   GeneralInitFormValues,
 } from './GeneralInitForm';
 import handleAPIError from '../lib/handleAPIError';
+import IconButton from './IconButton';
+import IconWithIndicator, {
+  IconWithIndicatorForwardedRefContent,
+} from './IconWithIndicator';
+import JobSummary, { JobSummaryForwardedRefContent } from './JobSummary';
+import Link from './Link';
 import MessageBox, { Message } from './MessageBox';
 import NetworkInitForm, {
   NetworkInitFormForwardedRefContent,
@@ -35,6 +45,9 @@ const StrikerInitForm: FC = () => {
   const generalInitFormRef = useRef<GeneralInitFormForwardedRefContent>({});
   const networkInitFormRef = useRef<NetworkInitFormForwardedRefContent>({});
 
+  const jobIconRef = useRef<IconWithIndicatorForwardedRefContent>({});
+  const jobSummaryRef = useRef<JobSummaryForwardedRefContent>({});
+
   const buildSubmitSection = useMemo(
     () =>
       isSubmittingForm ? (
@@ -70,6 +83,15 @@ const StrikerInitForm: FC = () => {
       <Panel>
         <PanelHeader>
           <HeaderText text="Initialize striker" />
+          <IconButton
+            onClick={({ currentTarget }) => {
+              jobSummaryRef.current.setAnchor?.call(null, currentTarget);
+              jobSummaryRef.current.setOpen?.call(null, true);
+            }}
+            variant="normal"
+          >
+            <IconWithIndicator icon={AssignmentIcon} ref={jobIconRef} />
+          </IconButton>
         </PanelHeader>
         <FlexBox>
           <GeneralInitForm
@@ -223,6 +245,23 @@ const StrikerInitForm: FC = () => {
             .put('/init', requestBody)
             .then(() => {
               setIsSubmittingForm(false);
+              setSubmitMessage({
+                children: (
+                  <>
+                    Successfully registered the configuration job! You can check
+                    the progress at the top right icon. Once the job completes,
+                    you can access the{' '}
+                    <Link
+                      href="/login"
+                      sx={{ color: BLACK, display: 'inline-flex' }}
+                    >
+                      login page
+                    </Link>
+                    .
+                  </>
+                ),
+                type: 'info',
+              });
             })
             .catch((error) => {
               const errorMessage = handleAPIError(error);
@@ -233,6 +272,13 @@ const StrikerInitForm: FC = () => {
         }}
         titleText="Confirm striker initialization"
       />
+      <JobSummary
+        getJobUrl={(epoch) => `${API_BASE_URL}/init/job?start=${epoch}`}
+        onFetchSuccessAppend={(jobs) => {
+          jobIconRef.current.indicate?.call(null, Object.keys(jobs).length > 0);
+        }}
+        ref={jobSummaryRef}
+      />
     </>
   );
 };