Merge branch 'master' into carina/customenv

flyteorg · Apr 12, 2023 · 00adcc2 · 00adcc2
2 parents 1bd3ec3 + c5fc069
commit 00adcc2
Show file tree

Hide file tree

Showing 11 changed files with 140 additions and 21 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;
   };

diff --git a/packages/console/src/components/Executions/Tables/WorkflowExecutionTable/cells.tsx b/packages/console/src/components/Executions/Tables/WorkflowExecutionTable/cells.tsx
@@ -20,6 +20,7 @@ import { ExecutionStatusBadge } from 'components/Executions/ExecutionStatusBadge
 import { Execution } from 'models/Execution/types';
 import { ExecutionState, WorkflowExecutionPhase } from 'models/Execution/enums';
 import classnames from 'classnames';
+import { LaunchPlanLink } from 'components/LaunchPlan/LaunchPlanLink';
 import { WorkflowExecutionsTableState } from '../types';
 import { WorkflowExecutionLink } from '../WorkflowExecutionLink';
 import { getWorkflowExecutionTimingMS, isExecutionArchived } from '../../utils';
@@ -99,6 +100,28 @@ export function getDurationCell(execution: Execution): React.ReactNode {
   );
 }
 
+export function getLaunchPlanCell(
+  execution: Execution,
+  className: string,
+): React.ReactNode {
+  const isArchived = isExecutionArchived(execution);
+  const lp = execution.spec.launchPlan;
+  const version = execution.spec.launchPlan.version;
+
+  return (
+    <>
+      <LaunchPlanLink id={lp} color={isArchived ? 'disabled' : 'primary'} />
+      <Typography
+        className={className}
+        variant="subtitle1"
+        color="textSecondary"
+      >
+        {version}
+      </Typography>
+    </>
+  );
+}
+
 export const showOnHoverClass = 'showOnHover';
 export function getActionsCell(
   execution: Execution,

diff --git a/packages/console/src/components/Executions/Tables/WorkflowExecutionTable/strings.ts b/packages/console/src/components/Executions/Tables/WorkflowExecutionTable/strings.ts
@@ -5,6 +5,7 @@ import { Protobuf } from '@flyteorg/flyteidl-types';
 
 const str = {
   tableLabel_name: 'execution id',
+  tableLabel_launchPlan: 'launch plan',
   tableLabel_phase: 'status',
   tableLabel_startedAt: 'start time',
   tableLabel_duration: 'duration',

diff --git a/packages/console/src/components/Executions/Tables/WorkflowExecutionTable/styles.ts b/packages/console/src/components/Executions/Tables/WorkflowExecutionTable/styles.ts
@@ -10,6 +10,11 @@ export const useStyles = makeStyles((theme: Theme) => ({
     flexBasis: workflowExecutionsTableColumnWidths.name,
     whiteSpace: 'normal',
   },
+  columnLaunchPlan: {
+    flexGrow: 1,
+    flexBasis: workflowExecutionsTableColumnWidths.launchPlan,
+    overflow: 'hidden',
+  },
   columnLastRun: {
     flexBasis: workflowExecutionsTableColumnWidths.lastRun,
   },

diff --git a/...components/Executions/Tables/WorkflowExecutionTable/useWorkflowExecutionsTableColumns.tsx b/...components/Executions/Tables/WorkflowExecutionTable/useWorkflowExecutionsTableColumns.tsx
@@ -11,6 +11,7 @@ import {
   getExecutionIdCell,
   getStartTimeCell,
   getStatusCell,
+  getLaunchPlanCell,
 } from './cells';
 import { useStyles } from './styles';
 import t, { patternKey } from './strings';
@@ -44,6 +45,13 @@ export function useWorkflowExecutionsTableColumns(
         key: 'name',
         label: t(patternKey('tableLabel', 'name')),
       },
+      {
+        cellRenderer: ({ execution }) =>
+          getLaunchPlanCell(execution, commonStyles.textWrapped),
+        className: styles.columnLaunchPlan,
+        key: 'launchPlan',
+        label: t(patternKey('tableLabel', 'launchPlan')),
+      },
       {
         cellRenderer: ({ execution }) => getStatusCell(execution),
         className: styles.columnStatus,

diff --git a/packages/console/src/components/Executions/Tables/constants.ts b/packages/console/src/components/Executions/Tables/constants.ts
@@ -2,7 +2,8 @@ export const workflowExecutionsTableColumnWidths = {
   duration: 100,
   actions: 130,
   lastRun: 130,
-  name: 360,
+  name: 240,
+  launchPlan: 120,
   phase: 120,
   startedAt: 200,
 };

diff --git a/packages/console/src/components/LaunchPlan/LaunchPlanLink.tsx b/packages/console/src/components/LaunchPlan/LaunchPlanLink.tsx
@@ -0,0 +1,27 @@
+import classnames from 'classnames';
+import { useCommonStyles } from 'components/common/styles';
+import { LaunchPlanId } from 'models/Launch/types';
+import * as React from 'react';
+import { Link as RouterLink } from 'react-router-dom';
+import { Routes } from 'routes/routes';
+
+/** A simple component to render a link to a specific LaunchPlan */
+export const LaunchPlanLink: React.FC<{
+  className?: string;
+  color?: 'primary' | 'disabled';
+  id: LaunchPlanId;
+}> = ({ className, color = 'primary', id }) => {
+  const commonStyles = useCommonStyles();
+  const linkColor =
+    color === 'disabled'
+      ? commonStyles.secondaryLink
+      : commonStyles.primaryLink;
+  return (
+    <RouterLink
+      className={classnames(linkColor, className)}
+      to={`${Routes.LaunchPlanDetails.makeUrl(id.project, id.domain, id.name)}`}
+    >
+      {id.name}
+    </RouterLink>
+  );
+};
diff --git a/packages/console/src/components/Project/test/ProjectDashboard.test.tsx b/packages/console/src/components/Project/test/ProjectDashboard.test.tsx
@@ -215,7 +215,7 @@ describe('ProjectDashboard', () => {
     mockUseUserProfile.mockReturnValue(
       loadedFetchable(sampleUserProfile, jest.fn()),
     );
-    const { getByText, queryByText, getAllByRole } = renderView();
+    const { getAllByText, queryAllByText, getAllByRole } = renderView();
     await waitFor(() => {});
     expect(mockUseUserProfile).toHaveBeenCalled();
 
@@ -224,13 +224,15 @@ describe('ProjectDashboard', () => {
     expect(checkboxes[0]).toBeTruthy();
     expect(checkboxes[0]?.checked).toEqual(false);
     await waitFor(() =>
-      expect(getByText(executions1[0].closure.workflowId.name)),
+      expect(getAllByText(executions1[0].closure.workflowId.name)),
     );
     await fireEvent.click(checkboxes[0]);
 
     // when user selects checkbox, table should have no executions to display
     await waitFor(() =>
-      expect(queryByText(executions1[0].closure.workflowId.name)).toBeNull(),
+      expect(
+        queryAllByText(executions1[0].closure.workflowId.name),
+      ).toHaveLength(0),
     );
   });