feat: show launch plan information in workflow's schedules (#739)

* feat: show launch plan in schedules Signed-off-by: Pradithya Aria Pura <pradithya.aria@gmail.com> * fix: fix unit test Signed-off-by: Pradithya Aria Pura <pradithya.aria@gmail.com> --------- Signed-off-by: Pradithya Aria Pura <pradithya.aria@gmail.com>
flyteorg · Apr 11, 2023 · c5fc069 · c5fc069
1 parent 7115a06
commit c5fc069
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 17 deletions.
diff --git a/packages/console/src/components/Entities/EntityDetails.tsx b/packages/console/src/components/Entities/EntityDetails.tsx
@@ -38,7 +38,6 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
   schedulesContainer: {
     flex: '1 2 auto',
-    marginRight: theme.spacing(30),
   },
   inputsContainer: {
     display: 'flex',

diff --git a/packages/console/src/components/Entities/EntitySchedules.tsx b/packages/console/src/components/Entities/EntitySchedules.tsx
@@ -1,4 +1,13 @@
-import { Typography } from '@material-ui/core';
+import {
+  Paper,
+  Typography,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+} from '@material-ui/core';
 import { makeStyles, Theme } from '@material-ui/core/styles';
 import {
   getScheduleFrequencyString,
@@ -11,6 +20,7 @@ import { ResourceIdentifier } from 'models/Common/types';
 import { identifierToString } from 'models/Common/utils';
 import { LaunchPlan } from 'models/Launch/types';
 import * as React from 'react';
+import { LaunchPlanLink } from 'components/LaunchPlan/LaunchPlanLink';
 import { entityStrings } from './constants';
 import t, { patternKey } from './strings';
 
@@ -25,26 +35,61 @@ const useStyles = makeStyles((theme: Theme) => ({
     borderBottom: `1px solid ${theme.palette.divider}`,
     marginBottom: theme.spacing(1),
   },
+  headCell: {
+    color: theme.palette.grey[400],
+  },
 }));
 
 const RenderSchedules: React.FC<{
   launchPlans: LaunchPlan[];
 }> = ({ launchPlans }) => {
-  const commonStyles = useCommonStyles();
+  const styles = useStyles();
   return (
-    <ul className={commonStyles.listUnstyled}>
-      {launchPlans.map(launchPlan => {
-        const { schedule } = launchPlan.spec.entityMetadata;
-        const frequencyString = getScheduleFrequencyString(schedule);
-        const offsetString = getScheduleOffsetString(schedule);
-        const scheduleString = offsetString
-          ? `${frequencyString} (offset by ${offsetString})`
-          : frequencyString;
-        return (
-          <li key={identifierToString(launchPlan.id)}>{scheduleString}</li>
-        );
-      })}
-    </ul>
+    <TableContainer component={Paper}>
+      <Table size="small">
+        <TableHead>
+          <TableRow>
+            <TableCell>
+              <Typography className={styles.headCell} variant="h4">
+                {t(patternKey('launchPlan', 'frequency'))}
+              </Typography>
+            </TableCell>
+            <TableCell className={styles.headCell}>
+              <Typography className={styles.headCell} variant="h4">
+                {t(patternKey('launchPlan', 'name'))}
+              </Typography>
+            </TableCell>
+            <TableCell className={styles.headCell}>
+              <Typography className={styles.headCell} variant="h4">
+                {t(patternKey('launchPlan', 'version'))}
+              </Typography>
+            </TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {launchPlans.map(launchPlan => {
+            const { schedule } = launchPlan.spec.entityMetadata;
+            const frequencyString = getScheduleFrequencyString(schedule);
+            const offsetString = getScheduleOffsetString(schedule);
+            const scheduleString = offsetString
+              ? `${frequencyString} (offset by ${offsetString})`
+              : frequencyString;
+
+            return (
+              <TableRow key={launchPlan.id.name}>
+                <TableCell>{scheduleString}</TableCell>
+                <TableCell>
+                  <LaunchPlanLink id={launchPlan.id} color="disabled">
+                    {launchPlan.id.name}
+                  </LaunchPlanLink>
+                </TableCell>
+                <TableCell>{launchPlan.id.version}</TableCell>
+              </TableRow>
+            );
+          })}
+        </TableBody>
+      </Table>
+    </TableContainer>
   );
 };
 

diff --git a/packages/console/src/components/Entities/strings.ts b/packages/console/src/components/Entities/strings.ts
@@ -44,6 +44,9 @@ const str = {
   configTestSplitRatio: 'test_split_ratio',
   noExpectedInputs: 'This launch plan has no expected inputs.',
   noFixedInputs: 'This launch plan has no fixed inputs.',
+  launchPlan_frequency: 'Frequency',
+  launchPlan_name: 'Launch Plan',
+  launchPlan_version: 'Version',
 };
 
 export { patternKey } from '@flyteorg/locale';

diff --git a/packages/console/src/components/Entities/test/EntitySchedules.test.tsx b/packages/console/src/components/Entities/test/EntitySchedules.test.tsx
@@ -8,6 +8,7 @@ import { ResourceIdentifier, ResourceType } from 'models/Common/types';
 import { listLaunchPlans } from 'models/Launch/api';
 import { LaunchPlan, LaunchPlanState } from 'models/Launch/types';
 import * as React from 'react';
+import { MemoryRouter } from 'react-router';
 import { EntitySchedules } from '../EntitySchedules';
 import t from '../strings';
 
@@ -26,7 +27,11 @@ describe('EntitySchedules', () => {
   let launchPlans: LaunchPlan[];
 
   const renderSchedules = async () => {
-    const result = render(<EntitySchedules id={id} />);
+    const result = render(
+      <MemoryRouter>
+        <EntitySchedules id={id} />
+      </MemoryRouter>,
+    );
     await waitFor(() => result.getByText(t('schedulesHeader')));
     return result;
   };