feat: launch plans list & detail page #none;

packages/composites/ui-atoms/src/Icons/MuiLaunchPlanIcon/index.tsx

@@ -0,0 +1,40 @@
+import { makeStyles } from '@material-ui/core/styles';
+import { SvgIconProps } from '@material-ui/core';
+import classnames from 'classnames';
+import * as React from 'react';
+
+const useStyles = makeStyles(() => ({
+  svg: {
+    marginTop: 0,
+    width: '1em',
+    height: '1em',
+    display: 'inline-block',
+    fontSize: '1.5rem',
+    transition: 'fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
+    flexShrink: 0,
+    userSelect: 'none',
+  },
+}));
+
+export const MuiLaunchPlanIcon: React.FunctionComponent = (props: SvgIconProps) => {
+  const { viewBox, fill, className } = props;
+  const styles = useStyles();
+  return (
+    <svg
+      className={classnames(styles.svg, className)}
+      viewBox={viewBox || '0 0 16 16'}
+      fill={fill || 'currentColor'}
+      xmlns="http://www.w3.org/2000/svg"
+      style={{
+        marginRight: '16px',
+      }}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M2 15V2C2 1.44772 2.44772 1 3 1H12.7391C13.2914 1 13.7391 1.44772 13.7391 2V11.4421H9.82593H9.32593V11.9421V16H3C2.44772 16 2 15.5523 2 15ZM10.3259 12.4421H13.384L10.3259 15.5002V12.4421ZM5.1307 5.93466H11.0003V4.93466H5.1307V5.93466ZM11.0004 8.83351H5.13079V7.83351H11.0004V8.83351ZM5.13079 11.732H8.02934V10.732H5.13079V11.732Z"
+        fill={fill || '#666666'}
+      />
+    </svg>
+  );
+};

packages/composites/ui-atoms/src/Icons/index.tsx

@@ -1,3 +1,4 @@
 export { FlyteLogo } from './FlyteLogo';
 export { InfoIcon } from './InfoIcon';
 export { RerunIcon } from './RerunIcon';
+export { MuiLaunchPlanIcon } from './MuiLaunchPlanIcon';

packages/zapp/console/src/common/utils.ts

@@ -1,5 +1,8 @@
 import { Protobuf } from 'flyteidl';
 import * as Long from 'long';
+import { WorkflowExecutionPhase } from 'models/Execution/enums';
+import { WorkflowExecutionIdentifier } from 'models/Execution/types';
+import { Routes } from 'routes/routes';
 
 /** Determines if a given date string or object is a valid, usable date. This will detect
  * JS Date objects which have been initialized with invalid values as well as strings which
@@ -101,3 +104,22 @@ export function toBoolean(value?: string): boolean {
 export function stringifyValue(value: unknown): string {
   return JSON.stringify(value, null, 2);
 }
+
+export const padExecutions = (items: WorkflowExecutionPhase[]) => {
+  if (items.length >= 10) {
+    return items.slice(0, 10).reverse();
+  }
+  const emptyExecutions = new Array(10 - items.length).fill(WorkflowExecutionPhase.QUEUED);
+  return [...items, ...emptyExecutions].reverse();
+};
+
+export const padExecutionPaths = (items: WorkflowExecutionIdentifier[]) => {
+  if (items.length >= 10) {
+    return items
+      .slice(0, 10)
+      .map((id) => Routes.ExecutionDetails.makeUrl(id))
+      .reverse();
+  }
+  const emptyExecutions = new Array(10 - items.length).fill(null);
+  return [...items.map((id) => Routes.ExecutionDetails.makeUrl(id)), ...emptyExecutions].reverse();
+};

packages/zapp/console/src/components/Entities/EntityDetails.tsx

@@ -8,6 +8,7 @@ import { ResourceIdentifier } from 'models/Common/types';
 import * as React from 'react';
 import { entitySections } from './constants';
 import { EntityDetailsHeader } from './EntityDetailsHeader';
+import { EntityInputs } from './EntityInputs';
 import { EntityExecutions } from './EntityExecutions';
 import { EntitySchedules } from './EntitySchedules';
 import { EntityVersions } from './EntityVersions';
@@ -16,7 +17,7 @@ import { EntityExecutionsBarChart } from './EntityExecutionsBarChart';
 const useStyles = makeStyles((theme: Theme) => ({
   metadataContainer: {
     display: 'flex',
-    marginBottom: theme.spacing(5),
+    marginBottom: theme.spacing(2),
     marginTop: theme.spacing(2),
     width: '100%',
   },
@@ -39,6 +40,10 @@ const useStyles = makeStyles((theme: Theme) => ({
     flex: '1 2 auto',
     marginRight: theme.spacing(30),
   },
+  inputsContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+  },
 }));
 
 interface EntityDetailsProps {
@@ -67,13 +72,19 @@ export const EntityDetails: React.FC<EntityDetailsProps> = ({ id }) => {
             <EntityDescription id={id} />
           </div>
         ) : null}
-        {sections.schedules ? (
+        {!sections.inputs && sections.schedules ? (
           <div className={styles.schedulesContainer}>
             <EntitySchedules id={id} />
           </div>
         ) : null}
       </div>
 
+      {sections.inputs ? (
+        <div className={styles.inputsContainer}>
+          <EntityInputs id={id} />
+        </div>
+      ) : null}
+
       {sections.versions ? (
         <div className={styles.versionsContainer}>
           <EntityVersions id={id} />

packages/zapp/console/src/components/Entities/EntityDetailsHeader.tsx

@@ -68,6 +68,7 @@ export const EntityDetailsHeader: React.FC<EntityDetailsHeaderProps> = ({
 
   const domain = getProjectDomain(project, id.domain);
   const headerText = `${domain.name} / ${id.name}`;
+
   return (
     <>
       <div className={styles.headerContainer}>

packages/zapp/console/src/components/Entities/EntityExecutions.tsx

@@ -78,9 +78,6 @@ export const EntityExecutions: React.FC<EntityExecutionsProps> = ({
 
   return (
     <>
-      <Typography className={styles.header} variant="h3">
-        {t(patternKey('allExecutionsChartTitle', entityStrings[id.resourceType]))}
-      </Typography>
       <div className={styles.filtersContainer}>
         <ExecutionFilters
           {...filtersState}

packages/zapp/console/src/components/Entities/EntityInputs.tsx

@@ -0,0 +1,226 @@
+import {
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Typography,
+} from '@material-ui/core';
+import { makeStyles, Theme } from '@material-ui/core/styles';
+import CheckIcon from '@material-ui/icons/Check';
+import { useLaunchPlans } from 'components/hooks/useLaunchPlans';
+import { formatType, getInputDefintionForLiteralType } from 'components/Launch/LaunchForm/utils';
+import { FilterOperationName } from 'models/AdminEntity/types';
+import { ResourceIdentifier } from 'models/Common/types';
+import { LaunchPlanClosure, LaunchPlanSpec } from 'models/Launch/types';
+import * as React from 'react';
+import t from './strings';
+import { transformLiterals } from '../Literals/helpers';
+
+const useStyles = makeStyles((theme: Theme) => ({
+  header: {
+    marginBottom: theme.spacing(1),
+  },
+  divider: {
+    borderBottom: `1px solid ${theme.palette.divider}`,
+    marginBottom: theme.spacing(1),
+  },
+  rowContainer: {
+    display: 'flex',
+    marginTop: theme.spacing(3),
+  },
+  firstColumnContainer: {
+    width: '60%',
+    marginRight: theme.spacing(3),
+  },
+  secondColumnContainer: {
+    width: '40%',
+  },
+  configs: {
+    listStyleType: 'none',
+    paddingInlineStart: 0,
+  },
+  config: {
+    display: 'flex',
+  },
+  configName: {
+    color: theme.palette.grey[400],
+    fontSize: '14px',
+    marginRight: theme.spacing(2),
+    minWidth: '95px',
+  },
+  configValue: {
+    color: '#333',
+    fontSize: '14px',
+  },
+  headCell: {
+    fontSize: '14px',
+    color: theme.palette.grey[400],
+  },
+  noInputs: {
+    color: theme.palette.grey[400],
+  },
+}));
+
+interface Input {
+  name: string;
+  type?: string;
+  required?: boolean;
+  defaultValue?: string;
+}
+
+/** Fetches and renders the expected & fixed inputs for a given Entity (LaunchPlan) ID */
+export const EntityInputs: React.FC<{
+  id: ResourceIdentifier;
+}> = ({ id }) => {
+  const styles = useStyles();
+
+  const launchPlanState = useLaunchPlans(
+    { project: id.project, domain: id.domain },
+    {
+      limit: 1,
+      filter: [
+        {
+          key: 'launch_plan.name',
+          operation: FilterOperationName.EQ,
+          value: id.name,
+        },
+      ],
+    },
+  );
+
+  const closure = launchPlanState?.value?.length
+    ? launchPlanState.value[0].closure
+    : ({} as LaunchPlanClosure);
+
+  const spec = launchPlanState?.value?.length
+    ? launchPlanState.value[0].spec
+    : ({} as LaunchPlanSpec);
+
+  const expectedInputs = React.useMemo<Input[]>(() => {
+    const results = [] as Input[];
+    Object.keys(closure?.expectedInputs?.parameters || {}).forEach((name) => {
+      const parameter = closure?.expectedInputs.parameters[name];
+      if (parameter?.var?.type) {
+        const typeDefinition = getInputDefintionForLiteralType(parameter?.var?.type);
+        results.push({
+          name,
+          type: formatType(typeDefinition),
+          required: !!parameter?.required,
+          defaultValue: parameter?.default?.value,
+        });
+      }
+    });
+    return results;
+  }, [closure]);
+
+  const fixedInputs = React.useMemo<Input[]>(() => {
+    const inputsMap = transformLiterals(spec?.fixedInputs?.literals || {});
+    return Object.keys(inputsMap).map((name) => ({ name, defaultValue: inputsMap[name] }));
+  }, [spec]);
+
+  const configs = React.useMemo(
+    () => [
+      { name: t('configType'), value: 'single (csv)' },
+      {
+        name: t('configUrl'),
+        value:
+          'https://raw.githubusercontent.com/jbrownlee/Datasets/master/pima-indians-diabetes.data.csv',
+      },
+      { name: t('configSeed'), value: '7' },
+      { name: t('configTestSplitRatio'), value: '0.33' },
+    ],
+    [],
+  );
+
+  return (
+    <>
+      <Typography className={styles.header} variant="h3">
+        {t('launchPlanLatest')}
+      </Typography>
+      <div className={styles.divider} />
+      <div className={styles.rowContainer}>
+        <div className={styles.firstColumnContainer}>
+          <Typography className={styles.header} variant="h4">
+            {t('expectedInputs')}
+          </Typography>
+          {expectedInputs.length ? (
+            <TableContainer component={Paper}>
+              <Table size="small">
+                <TableHead>
+                  <TableRow>
+                    <TableCell className={styles.headCell}>{t('inputsName')}</TableCell>
+                    <TableCell className={styles.headCell}>{t('inputsType')}</TableCell>
+                    <TableCell className={styles.headCell} align="center">
+                      {t('inputsRequired')}
+                    </TableCell>
+                    <TableCell className={styles.headCell}>{t('inputsDefault')}</TableCell>
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {expectedInputs.map(({ name, type, required, defaultValue }) => (
+                    <TableRow key={name}>
+                      <TableCell>{name}</TableCell>
+                      <TableCell>{type}</TableCell>
+                      <TableCell align="center">
+                        {required ? <CheckIcon fontSize="small" /> : ''}
+                      </TableCell>
+                      <TableCell>{defaultValue || '-'}</TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </TableContainer>
+          ) : (
+            <p className={styles.noInputs}>{t('noExpectedInputs')}</p>
+          )}
+        </div>
+        <div className={styles.secondColumnContainer}>
+          <Typography className={styles.header} variant="h4">
+            {t('fixedInputs')}
+          </Typography>
+          {fixedInputs.length ? (
+            <TableContainer component={Paper}>
+              <Table size="small">
+                <TableHead>
+                  <TableRow>
+                    <TableCell className={styles.headCell}>{t('inputsName')}</TableCell>
+                    <TableCell className={styles.headCell}>{t('inputsDefault')}</TableCell>
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {fixedInputs.map(({ name, defaultValue }) => (
+                    <TableRow key={name}>
+                      <TableCell>{name}</TableCell>
+                      <TableCell>{defaultValue || '-'}</TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </TableContainer>
+          ) : (
+            <p className={styles.noInputs}>{t('noFixedInputs')}</p>
+          )}
+        </div>
+      </div>
+      <div className={styles.rowContainer}>
+        <div className={styles.firstColumnContainer}>
+          <Typography className={styles.header} variant="h4">
+            {t('configuration')}
+          </Typography>
+          <ul className={styles.configs}>
+            {configs.map(({ name, value }) => (
+              <li className={styles.config} key={name}>
+                <span className={styles.configName}>{name}:</span>
+                <span className={styles.configValue}>{value}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+        <div className={styles.secondColumnContainer}>{/* TODO: Schedule */}</div>
+      </div>
+    </>
+  );
+};