Fix missing replica duration info (#1164)

* remove margin causing inconsistency in y-spacing

* remove deprecated layout  used by the first version of scheduled batches

* fix incorrect use of div inside p element

* fix replica duration component

* generate radix-api client and fix tests

src/components/component/scheduled-job/style.css

@@ -122,7 +122,6 @@
 
 .job-status-container {
   display: grid;
-  margin: var(--eds_spacing_small) 0;
   grid-template-columns: repeat(4, min-content);
   column-gap: var(--eds_spacing_small);
 }

src/components/page-scheduled-batch/dev.tsx

@@ -102,7 +102,6 @@ const testData: Array<
       started: '2022-03-29T13:10:52.269Z',
       ended: '2022-03-29T13:18:34.623Z',
       totalJobCount: 2,
-      message: 'some optional failure message',
       jobList: [
         {
           created: '2022-03-29T13:09:37.501Z',

src/components/page-scheduled-batch/index.tsx

@@ -1,92 +1,15 @@
-import { Typography } from '@equinor/eds-core-react';
-import { useEffect, useState } from 'react';
-
 import { routes } from '../../routes';
-import {
-  type ScheduledBatchSummary,
-  radixApi,
-  useGetBatchQuery,
-  useJobLogQuery,
-} from '../../store/radix-api';
+import { pollingInterval } from '../../store/defaults';
+import { useGetBatchQuery } from '../../store/radix-api';
 import { withRouteParams } from '../../utils/router';
 import { getEnvsUrl } from '../../utils/routing';
 import { routeWithParams, smallScheduledBatchName } from '../../utils/string';
 import AsyncResource from '../async-resource/async-resource';
 import { Breadcrumb } from '../breadcrumb';
-import { Code } from '../code';
-import { downloadLog } from '../code/log-helper';
 import { ScheduledJobList } from '../component/scheduled-job/scheduled-job-list';
-import { Replica } from '../replica';
-import { ProgressStatusBadge } from '../status-badges';
-import { Duration } from '../time/duration';
-import { RelativeToNow } from '../time/relative-to-now';
-
-import './style.css';
 import { ScheduledBatchOverview } from './scheduled-batch-overview';
 
-type ScheduleBatchDurationProps = {
-  created?: string;
-  started?: string;
-  ended?: string;
-};
-
-function ScheduleBatchDuration({
-  created,
-  started,
-  ended,
-}: ScheduleBatchDurationProps) {
-  return (
-    <>
-      {created && (
-        <Typography>
-          Created{' '}
-          <strong>
-            <RelativeToNow time={new Date(created)} />
-          </strong>
-        </Typography>
-      )}
-      {started && (
-        <Typography>
-          Started{' '}
-          <strong>
-            <RelativeToNow time={new Date(started)} />
-          </strong>
-        </Typography>
-      )}
-      {ended && started && (
-        <>
-          <Typography>
-            Ended{' '}
-            <strong>
-              <RelativeToNow time={new Date(ended)} />
-            </strong>
-          </Typography>
-          <Typography>
-            Duration{' '}
-            <strong>
-              <Duration start={new Date(started)} end={new Date(ended)} />
-            </strong>
-          </Typography>
-        </>
-      )}
-    </>
-  );
-}
-
-function ScheduledBatchState({ batch }: { batch: ScheduledBatchSummary }) {
-  return (
-    <>
-      {batch.status === 'Failed' &&
-        (batch.replica?.replicaStatus?.status === 'Failed' ||
-          batch.replica?.replicaStatus?.status === 'Failing') && (
-          <Typography>
-            Error <strong>{batch.replica.statusMessage}</strong>
-          </Typography>
-        )}
-      {batch.message && <Code>{batch.message}</Code>}
-    </>
-  );
-}
+import './style.css';
 
 type Props = {
   appName: string;
@@ -100,35 +23,14 @@ export function PageScheduledBatch({
   jobComponentName,
   scheduledBatchName,
 }: Props) {
-  const [pollingInterval, setPollingInterval] = useState(5000);
-  const pollLogsState = useJobLogQuery(
-    {
-      appName,
-      envName,
-      jobComponentName,
-      scheduledJobName: scheduledBatchName,
-      lines: '1000',
-    },
-    {
-      skip: !appName || !envName || !jobComponentName || !scheduledBatchName,
-      pollingInterval,
-    }
-  );
-  const [getLog] = radixApi.endpoints.jobLog.useLazyQuery();
-
   const { data: batch, ...scheduledBatchState } = useGetBatchQuery(
     { appName, envName, jobComponentName, batchName: scheduledBatchName },
     {
       skip: !appName || !envName || !jobComponentName || !scheduledBatchName,
-      pollingInterval: 5000,
+      pollingInterval: pollingInterval,
     }
   );
 
-  const replica = batch?.replica;
-  useEffect(() => {
-    setPollingInterval(batch?.status === 'Running' ? 5000 : 0);
-  }, [batch]);
-
   return (
     <main className="grid grid--gap-medium">
       <Breadcrumb
@@ -158,44 +60,6 @@ export function PageScheduledBatch({
             jobComponentName={jobComponentName}
           />
         )}
-        {batch && replica && (
-          <Replica
-            logState={pollLogsState}
-            replica={replica}
-            downloadCb={() =>
-              downloadLog(`${replica.name}.txt`, () =>
-                getLog(
-                  {
-                    appName,
-                    envName,
-                    jobComponentName,
-                    scheduledJobName: scheduledBatchName,
-                    file: 'true',
-                  },
-                  false
-                ).unwrap()
-              )
-            }
-            title={
-              <Typography>
-                Batch{' '}
-                <strong>{smallScheduledBatchName(scheduledBatchName)}</strong>,
-                <strong>{jobComponentName}</strong>
-              </Typography>
-            }
-            duration={
-              <ScheduleBatchDuration
-                created={batch.created}
-                started={batch.started}
-                ended={batch.ended}
-              />
-            }
-            status={<ProgressStatusBadge status={batch.status} />}
-            state={<ScheduledBatchState batch={batch} />}
-            isCollapsibleOverview
-            isCollapsibleLog
-          />
-        )}
       </AsyncResource>
 
       {batch?.jobList && (

src/components/page-scheduled-batch/scheduled-batch-overview.tsx

@@ -13,21 +13,21 @@ type Props = {
 const ScheduledBatchDuration = ({ started, finished }: Props) => {
   return (
     <>
-      <Typography>
+      <Typography as="span">
         Started{' '}
         <strong>
           <RelativeToNow time={started} />
         </strong>
       </Typography>
       {finished && (
         <>
-          <Typography>
+          <Typography as="span">
             Ended{' '}
             <strong>
               <RelativeToNow time={finished} />
             </strong>
           </Typography>
-          <Typography>
+          <Typography as="span">
             Duration{' '}
             <strong>
               <Duration start={started} end={finished} />
@@ -52,30 +52,30 @@ export const ScheduledBatchOverview = ({
     <section className="grid grid--gap-medium overview">
       <div className="grid grid--gap-medium grid--overview-columns">
         <div className="grid grid--gap-medium">
-          <Typography>
+          <Typography as="span">
             Batch name <strong>{smallScheduledBatchName(batch.name)}</strong>
           </Typography>
           {batch.batchId && (
-            <Typography>
+            <Typography as="span">
               Batch ID <strong>{batch.batchId}</strong>
             </Typography>
           )}
-          <Typography>
+          <Typography as="span">
             Job component <strong>{jobComponentName}</strong>
           </Typography>
           {batch.status && (
-            <Typography className="status-title">
+            <Typography as="span" className="status-title">
               Batch status <ProgressStatusBadge status={batch.status} />
             </Typography>
           )}
-          <Typography className="status-title">
+          <Typography as="span" className="status-title">
             Jobs statuses
             <BatchJobStatuses jobs={batch.jobList} />
           </Typography>
         </div>
         <div className="grid grid--gap-medium">
           <>
-            <Typography>
+            <Typography as="span">
               Created{' '}
               <strong>
                 <RelativeToNow time={batch.created} />

src/components/replica/index.tsx

@@ -21,8 +21,8 @@ interface ReplicaElements {
   state?: React.JSX.Element;
 }
 
-type DurationProps = { started: number | string | Date; ended?: Date };
-const ReplicaDuration = ({ started, ended }: DurationProps) => {
+type ReplicaDurationProps = { created: number | string | Date; ended?: Date };
+const ReplicaDuration = ({ created: started, ended }: ReplicaDurationProps) => {
   const [now, setNow] = useState(new Date());
   useInterval(() => setNow(new Date()), 1000);
 
@@ -52,7 +52,8 @@ const ReplicaDuration = ({ started, ended }: DurationProps) => {
   );
 };
 
-const ContainerDuration = ({ started, ended }: DurationProps) => {
+type ContainerDurationProps = { started: number | string | Date; ended?: Date };
+const ContainerDuration = ({ started, ended }: ContainerDurationProps) => {
   useInterval(() => setNow(new Date()), 1000);
   const [now, setNow] = useState(new Date());
 
@@ -64,14 +65,6 @@ const ContainerDuration = ({ started, ended }: DurationProps) => {
           <RelativeToNow time={started} />
         </strong>
       </Typography>
-      {ended && (
-        <Typography>
-          Replica ended{' '}
-          <strong>
-            <RelativeToNow time={ended} />
-          </strong>
-        </Typography>
-      )}
       <Typography>
         Container duration{' '}
         <strong>
@@ -112,29 +105,29 @@ const Overview = ({
   duration,
   status,
   state,
-}: OverviewProps) => (
-  <>
-    <section className="grid grid--gap-medium overview">
-      <div className="grid grid--gap-medium grid--overview-columns">
-        <div className="grid grid--gap-medium">
-          {title || (
-            <Typography>
-              Replica <strong>{smallReplicaName(replica.name)}</strong>
-            </Typography>
-          )}
-          <ReplicaImage replica={replica} />
-          {status || (
-            <ReplicaStatusBadge
-              status={replica.replicaStatus?.status ?? 'Pending'}
-            />
-          )}
-        </div>
-        <div className="grid grid--gap-medium">
-          {duration ||
-            (replica.startTime ? (
+}: OverviewProps) => {
+  return (
+    <>
+      <section className="grid grid--gap-medium overview">
+        <div className="grid grid--gap-medium grid--overview-columns">
+          <div className="grid grid--gap-medium">
+            {title || (
+              <Typography>
+                Replica <strong>{smallReplicaName(replica.name)}</strong>
+              </Typography>
+            )}
+            <ReplicaImage replica={replica} />
+            {status || (
+              <ReplicaStatusBadge
+                status={replica.replicaStatus?.status ?? 'Pending'}
+              />
+            )}
+          </div>
+          <div className="grid grid--gap-medium">
+            {duration || (
               <>
                 <ReplicaDuration
-                  started={replica.startTime}
+                  created={replica.created}
                   ended={
                     replica.endTime ? new Date(replica.endTime) : undefined
                   }
@@ -148,27 +141,26 @@ const Overview = ({
                   />
                 )}
               </>
-            ) : (
-              'waiting'
-            ))}
-        </div>
-        <div className="grid grid--gap-medium">
-          {replica.resources && (
-            <ResourceRequirements resources={replica.resources} />
-          )}
+            )}
+          </div>
+          <div className="grid grid--gap-medium">
+            {replica.resources && (
+              <ResourceRequirements resources={replica.resources} />
+            )}
+          </div>
         </div>
-      </div>
-    </section>
-    <section className="grid grid--gap-medium">
-      {state || (
-        <ReplicaState
-          restartCount={replica.restartCount}
-          statusMessage={replica.statusMessage}
-        />
-      )}
-    </section>
-  </>
-);
+      </section>
+      <section className="grid grid--gap-medium">
+        {state || (
+          <ReplicaState
+            restartCount={replica.restartCount}
+            statusMessage={replica.statusMessage}
+          />
+        )}
+      </section>
+    </>
+  );
+};
 
 type RepliceLogProps = {
   isCollapsibleLog?: boolean;