diff --git a/packages/zapp/console/src/components/Entities/EntityExecutions.tsx b/packages/zapp/console/src/components/Entities/EntityExecutions.tsx
index da2e701b8..b59bfce88 100644
--- 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
= ({
return (
<>
-
- {t(patternKey('allExecutionsChartTitle', entityStrings[id.resourceType]))}
-
({
+ 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],
+ marginRight: theme.spacing(2),
+ minWidth: '95px',
+ },
+ configValue: {
+ color: '#333',
+ fontSize: '14px',
+ },
+ headCell: {
+ 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(() => {
+ 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(() => {
+ 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 (
+ <>
+
+ {t('launchPlanLatest')}
+
+
+
+
+
+ {t('expectedInputs')}
+
+ {expectedInputs.length ? (
+
+
+
+
+
+
+ {t('inputsName')}
+
+
+
+
+ {t('inputsType')}
+
+
+
+
+ {t('inputsRequired')}
+
+
+
+
+ {t('inputsDefault')}
+
+
+
+
+
+ {expectedInputs.map(({ name, type, required, defaultValue }) => (
+
+ {name}
+ {type}
+
+ {required ? : ''}
+
+ {defaultValue || '-'}
+
+ ))}
+
+
+
+ ) : (
+
{t('noExpectedInputs')}
+ )}
+
+
+
+ {t('fixedInputs')}
+
+ {fixedInputs.length ? (
+
+
+
+
+
+
+ {t('inputsName')}
+
+
+
+
+ {t('inputsDefault')}
+
+
+
+
+
+ {fixedInputs.map(({ name, defaultValue }) => (
+
+ {name}
+ {defaultValue || '-'}
+
+ ))}
+
+
+
+ ) : (
+
{t('noFixedInputs')}
+ )}
+
+
+
+
+ {t('configuration')}
+
+
+ {configs.map(({ name, value }) => (
+ -
+ {name}:
+ {value}
+
+ ))}
+
+
+
+
+ {results.map(({ value }) => (
+
+ ))}
+
+
+ );
+};
diff --git a/packages/zapp/console/src/components/LaunchPlan/launchPlanQueries.ts b/packages/zapp/console/src/components/LaunchPlan/launchPlanQueries.ts
new file mode 100644
index 000000000..3f9da6cca
--- /dev/null
+++ b/packages/zapp/console/src/components/LaunchPlan/launchPlanQueries.ts
@@ -0,0 +1,25 @@
+import { QueryInput, QueryType } from 'components/data/types';
+import { getLaunchPlan } from 'models/Launch/api';
+import { LaunchPlan, LaunchPlanId } from 'models/Launch/types';
+import { QueryClient } from 'react-query';
+
+export function makeLaunchPlanQuery(
+ queryClient: QueryClient,
+ id: LaunchPlanId,
+): QueryInput {
+ return {
+ queryKey: [QueryType.LaunchPlan, id],
+ queryFn: async () => {
+ const launchPlan = await getLaunchPlan(id);
+
+ return launchPlan;
+ },
+ // `LaunchPlan` objects (individual versions) are immutable and safe to
+ // cache indefinitely once retrieved in full
+ staleTime: Infinity,
+ };
+}
+
+export async function fetchLaunchPlan(queryClient: QueryClient, id: LaunchPlanId) {
+ return queryClient.fetchQuery(makeLaunchPlanQuery(queryClient, id));
+}
diff --git a/packages/zapp/console/src/components/LaunchPlan/types.ts b/packages/zapp/console/src/components/LaunchPlan/types.ts
new file mode 100644
index 000000000..a18b54f4b
--- /dev/null
+++ b/packages/zapp/console/src/components/LaunchPlan/types.ts
@@ -0,0 +1,8 @@
+import { NamedEntityIdentifier } from 'models/Common/types';
+import { NamedEntityState } from 'models/enums';
+
+export type LaunchPlanListStructureItem = {
+ id: NamedEntityIdentifier;
+ description: string;
+ state: NamedEntityState;
+};
diff --git a/packages/zapp/console/src/components/LaunchPlan/useLaunchPlanInfoList.ts b/packages/zapp/console/src/components/LaunchPlan/useLaunchPlanInfoList.ts
new file mode 100644
index 000000000..66ddb52e7
--- /dev/null
+++ b/packages/zapp/console/src/components/LaunchPlan/useLaunchPlanInfoList.ts
@@ -0,0 +1,28 @@
+import { DomainIdentifierScope, ResourceType } from 'models/Common/types';
+import { RequestConfig } from 'models/AdminEntity/types';
+import { usePagination } from 'components/hooks/usePagination';
+import { useAPIContext } from 'components/data/apiContext';
+import { LaunchPlanListStructureItem } from './types';
+
+export const useLaunchPlanInfoList = (scope: DomainIdentifierScope, config?: RequestConfig) => {
+ const { listNamedEntities } = useAPIContext();
+
+ return usePagination(
+ { ...config, fetchArg: scope },
+ async (scope, requestConfig) => {
+ const { entities, ...rest } = await listNamedEntities(
+ { ...scope, resourceType: ResourceType.LAUNCH_PLAN },
+ requestConfig,
+ );
+
+ return {
+ entities: entities.map(({ id, metadata: { description, state } }) => ({
+ id,
+ description,
+ state,
+ })),
+ ...rest,
+ };
+ },
+ );
+};
diff --git a/packages/zapp/console/src/components/Navigation/ProjectNavigation.tsx b/packages/zapp/console/src/components/Navigation/ProjectNavigation.tsx
index b4b75f645..590d631f1 100644
--- a/packages/zapp/console/src/components/Navigation/ProjectNavigation.tsx
+++ b/packages/zapp/console/src/components/Navigation/ProjectNavigation.tsx
@@ -13,6 +13,7 @@ import * as React from 'react';
import { matchPath, NavLink, NavLinkProps } from 'react-router-dom';
import { history } from 'routes/history';
import { Routes } from 'routes/routes';
+import { MuiLaunchPlanIcon } from '@flyteconsole/ui-atoms';
import { ProjectSelector } from './ProjectSelector';
interface ProjectNavigationRouteParams {
@@ -113,6 +114,20 @@ const ProjectNavigationImpl: React.FC = ({
path: Routes.ProjectDetails.sections.tasks.makeUrl(project.value.id, domainId),
text: 'Tasks',
},
+ {
+ icon: MuiLaunchPlanIcon,
+ isActive: (match, location) => {
+ const finalMatch = match
+ ? match
+ : matchPath(location.pathname, {
+ path: Routes.LaunchPlanDetails.path,
+ exact: false,
+ });
+ return !!finalMatch;
+ },
+ path: Routes.ProjectDetails.sections.launchPlans.makeUrl(project.value.id, domainId),
+ text: 'Launch Plans',
+ },
];
return (
diff --git a/packages/zapp/console/src/components/Project/ProjectDetails.tsx b/packages/zapp/console/src/components/Project/ProjectDetails.tsx
index 96f346856..f7cb7277b 100644
--- a/packages/zapp/console/src/components/Project/ProjectDetails.tsx
+++ b/packages/zapp/console/src/components/Project/ProjectDetails.tsx
@@ -11,6 +11,7 @@ import { Routes } from 'routes/routes';
import { ProjectDashboard } from './ProjectDashboard';
import { ProjectTasks } from './ProjectTasks';
import { ProjectWorkflows } from './ProjectWorkflows';
+import { ProjectLaunchPlans } from './ProjectLaunchPlans';
const useStyles = makeStyles((theme: Theme) => ({
tab: {
@@ -30,11 +31,12 @@ const entityTypeToComponent = {
executions: ProjectDashboard,
tasks: ProjectTasks,
workflows: ProjectWorkflows,
+ launchPlans: ProjectLaunchPlans,
};
const ProjectEntitiesByDomain: React.FC<{
project: Project;
- entityType: 'executions' | 'tasks' | 'workflows';
+ entityType: 'executions' | 'tasks' | 'workflows' | 'launchPlans';
}> = ({ entityType, project }) => {
const styles = useStyles();
const { params, setQueryState } = useQueryState<{ domain: string }>();
@@ -71,6 +73,10 @@ const ProjectTasksByDomain: React.FC<{ project: Project }> = ({ project }) => (
);
+const ProjectLaunchPlansByDomain: React.FC<{ project: Project }> = ({ project }) => (
+
+);
+
/** The view component for the Project landing page */
export const ProjectDetailsContainer: React.FC = ({ projectId }) => {
const project = useProject(projectId);
@@ -88,6 +94,9 @@ export const ProjectDetailsContainer: React.FC = ({ p
+
+
+
);
diff --git a/packages/zapp/console/src/components/Project/ProjectLaunchPlans.tsx b/packages/zapp/console/src/components/Project/ProjectLaunchPlans.tsx
new file mode 100644
index 000000000..7fe696802
--- /dev/null
+++ b/packages/zapp/console/src/components/Project/ProjectLaunchPlans.tsx
@@ -0,0 +1,38 @@
+import { WaitForData } from 'components/common/WaitForData';
+import { SearchableLaunchPlanNameList } from 'components/LaunchPlan/SearchableLaunchPlanNameList';
+import { limits } from 'models/AdminEntity/constants';
+import { SortDirection } from 'models/AdminEntity/types';
+import { launchSortFields } from 'models/Launch/constants';
+import * as React from 'react';
+import { useLaunchPlanInfoList } from '../LaunchPlan/useLaunchPlanInfoList';
+
+export interface ProjectLaunchPlansProps {
+ projectId: string;
+ domainId: string;
+}
+
+const DEFAULT_SORT = {
+ direction: SortDirection.ASCENDING,
+ key: launchSortFields.name,
+};
+
+/** A listing of the LaunchPlans registered for a project */
+export const ProjectLaunchPlans: React.FC = ({
+ domainId: domain,
+ projectId: project,
+}) => {
+ const launchPlans = useLaunchPlanInfoList(
+ { domain, project },
+ {
+ limit: limits.NONE,
+ sort: DEFAULT_SORT,
+ filter: [],
+ },
+ );
+
+ return (
+
+
+
+ );
+};
diff --git a/packages/zapp/console/src/components/Theme/constants.ts b/packages/zapp/console/src/components/Theme/constants.ts
index 1e3703329..39d879978 100644
--- a/packages/zapp/console/src/components/Theme/constants.ts
+++ b/packages/zapp/console/src/components/Theme/constants.ts
@@ -45,6 +45,7 @@ export const mutedButtonHoverColor = COLOR_SPECTRUM.gray60.color;
export const errorBackgroundColor = '#FBFBFC';
export const workflowLabelColor = COLOR_SPECTRUM.gray25.color;
+export const launchPlanLabelColor = COLOR_SPECTRUM.gray25.color;
export const statusColors = {
FAILURE: COLOR_SPECTRUM.red20.color,
diff --git a/packages/zapp/console/src/components/Workflow/SearchableWorkflowNameList.tsx b/packages/zapp/console/src/components/Workflow/SearchableWorkflowNameList.tsx
index 2719a501a..5d4da6a19 100644
--- a/packages/zapp/console/src/components/Workflow/SearchableWorkflowNameList.tsx
+++ b/packages/zapp/console/src/components/Workflow/SearchableWorkflowNameList.tsx
@@ -7,9 +7,7 @@ import { separatorColor, primaryTextColor, workflowLabelColor } from 'components
import * as React from 'react';
import { Link } from 'react-router-dom';
import { Routes } from 'routes/routes';
-import { WorkflowExecutionPhase } from 'models/Execution/enums';
import { Shimmer } from 'components/common/Shimmer';
-import { WorkflowExecutionIdentifier } from 'models/Execution/types';
import { debounce } from 'lodash';
import {
IconButton,
@@ -27,6 +25,7 @@ import { NamedEntityState } from 'models/enums';
import { updateWorkflowState } from 'models/Workflow/api';
import { useState } from 'react';
import { useSnackbar } from 'notistack';
+import { padExecutionPaths, padExecutions } from 'common/utils';
import { WorkflowListStructureItem } from './types';
import ProjectStatusBar from '../Project/ProjectStatusBar';
import { workflowNoInputsString } from '../Launch/LaunchForm/constants';
@@ -142,25 +141,6 @@ const useStyles = makeStyles((theme: Theme) => ({
},
}));
-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();
-};
-
-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();
-};
-
const getArchiveIcon = (isArchived: boolean) =>
isArchived ? : ;
diff --git a/packages/zapp/console/src/components/data/types.ts b/packages/zapp/console/src/components/data/types.ts
index 10db6648d..7b7fbd02d 100644
--- a/packages/zapp/console/src/components/data/types.ts
+++ b/packages/zapp/console/src/components/data/types.ts
@@ -14,6 +14,7 @@ export enum QueryType {
Workflow = 'workflow',
WorkflowExecution = 'workflowExecution',
WorkflowExecutionList = 'workflowExecutionList',
+ LaunchPlan = 'launchPlan',
}
type QueryKeyArray = [QueryType, ...unknown[]];
diff --git a/packages/zapp/console/src/components/hooks/Entity/useEntityVersions.ts b/packages/zapp/console/src/components/hooks/Entity/useEntityVersions.ts
index df2eb9ee3..ecec1862f 100644
--- a/packages/zapp/console/src/components/hooks/Entity/useEntityVersions.ts
+++ b/packages/zapp/console/src/components/hooks/Entity/useEntityVersions.ts
@@ -1,6 +1,5 @@
-import { IdentifierScope, Identifier, ResourceIdentifier } from 'models/Common/types';
+import { IdentifierScope, ResourceIdentifier } from 'models/Common/types';
import { RequestConfig } from 'models/AdminEntity/types';
-import { entityStrings } from 'components/Entities/constants';
import { usePagination } from '../usePagination';
import { EntityType, entityFunctions } from './constants';
diff --git a/packages/zapp/console/src/models/Launch/constants.ts b/packages/zapp/console/src/models/Launch/constants.ts
index f38ef3581..beec28925 100644
--- a/packages/zapp/console/src/models/Launch/constants.ts
+++ b/packages/zapp/console/src/models/Launch/constants.ts
@@ -1,3 +1,3 @@
export const launchSortFields = {
- createdAt: 'created_at',
+ name: 'name',
};
diff --git a/packages/zapp/console/src/routes/ApplicationRouter.tsx b/packages/zapp/console/src/routes/ApplicationRouter.tsx
index 0336daf18..3b84cb7e1 100644
--- a/packages/zapp/console/src/routes/ApplicationRouter.tsx
+++ b/packages/zapp/console/src/routes/ApplicationRouter.tsx
@@ -30,6 +30,11 @@ export const ApplicationRouter: React.FC = () => (
path={Routes.TaskDetails.path}
component={withSideNavigation(components.taskDetails)}
/>
+
+ makeProjectBoundPath(project, `/launchPlans${domain ? `?domain=${domain}` : ''}`),
+ path: `${projectBasePath}/launchPlans`,
+ },
},
};
@@ -62,6 +67,13 @@ export class Routes {
path: `${projectDomainBasePath}/workflows/:workflowName`,
};
+ // LaunchPlans
+ static LaunchPlanDetails = {
+ makeUrl: (project: string, domain: string, launchPlanName: string) =>
+ makeProjectDomainBoundPath(project, domain, `/launchPlans/${launchPlanName}`),
+ path: `${projectDomainBasePath}/launchPlans/:launchPlanName`,
+ };
+
// Entity Version Details
static EntityVersionDetails = {
makeUrl: (