feat: launch plans list & detail page #none; (#507)

* feat: launch plans list #none; * fix: launch plan detail page the top navigation header * fix: added expected inputs and fixed inputs; #none * fix: remove radio buttons for view all launch plan versions; #none Signed-off-by: James <[email protected]>
flyteorg · Jun 27, 2022 · c1c386c · c1c386c
1 parent 32b92b4
commit c1c386c
Show file tree

Hide file tree

Showing 33 changed files with 814 additions and 51 deletions.
diff --git a/packages/composites/ui-atoms/src/Icons/MuiLaunchPlanIcon/index.tsx b/packages/composites/ui-atoms/src/Icons/MuiLaunchPlanIcon/index.tsx
@@ -0,0 +1,39 @@
+import { makeStyles } from '@material-ui/core/styles';
+import { SvgIconProps, Theme } from '@material-ui/core';
+import classnames from 'classnames';
+import * as React from 'react';
+
+const useStyles = makeStyles((theme: Theme) => ({
+  svg: {
+    marginTop: 0,
+    marginRight: theme.spacing(2),
+    display: 'inline-block',
+    fontSize: '1.5rem',
+    transition: 'fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
+    flexShrink: 0,
+    userSelect: 'none',
+    color: '#666666',
+  },
+}));
+
+export const MuiLaunchPlanIcon = (props: SvgIconProps): JSX.Element => {
+  const { fill, className, width = '1em', height = '1em', fontSize } = props;
+  const styles = useStyles();
+  return (
+    <svg
+      className={classnames(styles.svg, className)}
+      width={width}
+      height={height}
+      viewBox="0 0 16 16"
+      xmlns="http://www.w3.org/2000/svg"
+      fontSize={fontSize}
+    >
+      <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 || 'currentColor'}
+      />
+    </svg>
+  );
+};
diff --git a/packages/composites/ui-atoms/src/Icons/index.tsx b/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';
diff --git a/packages/zapp/console/src/common/utils.ts b/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();
+};
diff --git a/packages/zapp/console/src/components/Entities/EntityDetails.tsx b/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} />

diff --git a/packages/zapp/console/src/components/Entities/EntityDetailsHeader.tsx b/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}>

diff --git a/packages/zapp/console/src/components/Entities/EntityExecutions.tsx b/packages/zapp/console/src/components/Entities/EntityExecutions.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Typography } from '@material-ui/core';
 import { makeStyles, Theme } from '@material-ui/core/styles';
 import { contentMarginGridUnits } from 'common/layout';
 import { WaitForData } from 'components/common/WaitForData';
@@ -15,8 +14,6 @@ import { executionSortFields } from 'models/Execution/constants';
 import { compact } from 'lodash';
 import { useOnlyMyExecutionsFilterState } from 'components/Executions/filters/useOnlyMyExecutionsFilterState';
 import { executionFilterGenerator } from './generators';
-import { entityStrings } from './constants';
-import t, { patternKey } from './strings';
 
 const useStyles = makeStyles((theme: Theme) => ({
   filtersContainer: {
@@ -78,9 +75,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}