From 8961a6fd147ac23cd00ab935c43aad9d9894b699 Mon Sep 17 00:00:00 2001 From: James Date: Wed, 8 Jun 2022 00:16:05 -0400 Subject: [PATCH 01/14] feat: launch plans list #none; Signed-off-by: James --- .../src/Icons/MuiLaunchPlanIcon/index.tsx | 40 ++++ .../composites/ui-atoms/src/Icons/index.tsx | 1 + .../LaunchPlan/LaunchPlanDetails.tsx | 33 +++ .../LaunchPlan/LaunchPlanVersionDetails.tsx | 92 +++++++++ .../SearchableLaunchPlanNameList.tsx | 193 ++++++++++++++++++ .../SearchableWorkflowNameList.stories.tsx | 17 ++ .../filters/useLaunchPlanShowArchivedState.ts | 33 +++ .../LaunchPlan/launchPlanQueries.ts | 29 +++ .../src/components/LaunchPlan/types.ts | 22 ++ .../LaunchPlan/useLaunchPlanInfoItem.ts | 42 ++++ .../LaunchPlan/useLaunchPlanInfoList.ts | 28 +++ .../src/components/LaunchPlan/utils.ts | 11 + .../Navigation/ProjectNavigation.tsx | 16 ++ .../src/components/Project/ProjectDetails.tsx | 11 +- .../components/Project/ProjectLaunchPlans.tsx | 40 ++++ .../console/src/components/Theme/constants.ts | 1 + .../zapp/console/src/components/data/types.ts | 1 + .../console/src/models/Execution/enums.ts | 2 + .../console/src/models/Execution/types.ts | 1 + .../console/src/models/Launch/constants.ts | 2 +- .../console/src/routes/ApplicationRouter.tsx | 84 ++++---- .../zapp/console/src/routes/components.ts | 2 + packages/zapp/console/src/routes/routes.ts | 12 ++ 23 files changed, 673 insertions(+), 40 deletions(-) create mode 100644 packages/composites/ui-atoms/src/Icons/MuiLaunchPlanIcon/index.tsx create mode 100644 packages/zapp/console/src/components/LaunchPlan/LaunchPlanDetails.tsx create mode 100644 packages/zapp/console/src/components/LaunchPlan/LaunchPlanVersionDetails.tsx create mode 100644 packages/zapp/console/src/components/LaunchPlan/SearchableLaunchPlanNameList.tsx create mode 100644 packages/zapp/console/src/components/LaunchPlan/__stories__/SearchableWorkflowNameList.stories.tsx create mode 100644 packages/zapp/console/src/components/LaunchPlan/filters/useLaunchPlanShowArchivedState.ts create mode 100644 packages/zapp/console/src/components/LaunchPlan/launchPlanQueries.ts create mode 100644 packages/zapp/console/src/components/LaunchPlan/types.ts create mode 100644 packages/zapp/console/src/components/LaunchPlan/useLaunchPlanInfoItem.ts create mode 100644 packages/zapp/console/src/components/LaunchPlan/useLaunchPlanInfoList.ts create mode 100644 packages/zapp/console/src/components/LaunchPlan/utils.ts create mode 100644 packages/zapp/console/src/components/Project/ProjectLaunchPlans.tsx diff --git a/packages/composites/ui-atoms/src/Icons/MuiLaunchPlanIcon/index.tsx b/packages/composites/ui-atoms/src/Icons/MuiLaunchPlanIcon/index.tsx new file mode 100644 index 000000000..8f9e98271 --- /dev/null +++ b/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 * 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(); + console.log(props); + return ( + + + + ); +}; diff --git a/packages/composites/ui-atoms/src/Icons/index.tsx b/packages/composites/ui-atoms/src/Icons/index.tsx index 0cbe71ead..2f6fb0418 100644 --- 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/components/LaunchPlan/LaunchPlanDetails.tsx b/packages/zapp/console/src/components/LaunchPlan/LaunchPlanDetails.tsx new file mode 100644 index 000000000..c8f87d2c4 --- /dev/null +++ b/packages/zapp/console/src/components/LaunchPlan/LaunchPlanDetails.tsx @@ -0,0 +1,33 @@ +import { withRouteParams } from 'components/common/withRouteParams'; +import { EntityDetails } from 'components/Entities/EntityDetails'; +import { ResourceIdentifier, ResourceType } from 'models/Common/types'; +import * as React from 'react'; + +export interface LaunchPlanDetailsRouteParams { + projectId: string; + domainId: string; + launchPlanName: string; +} +export type LaunchPlanDetailsProps = LaunchPlanDetailsRouteParams; + +/** The view component for the LaunchPlan landing page */ +export const LaunchPlanDetailsContainer: React.FC = ({ + projectId, + domainId, + launchPlanName, +}) => { + const id = React.useMemo( + () => ({ + resourceType: ResourceType.LAUNCH_PLAN, + project: projectId, + domain: domainId, + name: launchPlanName, + }), + [projectId, domainId, launchPlanName], + ); + return ; +}; + +export const LaunchPlanDetails = withRouteParams( + LaunchPlanDetailsContainer, +); diff --git a/packages/zapp/console/src/components/LaunchPlan/LaunchPlanVersionDetails.tsx b/packages/zapp/console/src/components/LaunchPlan/LaunchPlanVersionDetails.tsx new file mode 100644 index 000000000..090065451 --- /dev/null +++ b/packages/zapp/console/src/components/LaunchPlan/LaunchPlanVersionDetails.tsx @@ -0,0 +1,92 @@ +import * as React from 'react'; +import { withRouteParams } from 'components/common/withRouteParams'; +import { ResourceIdentifier, ResourceType } from 'models/Common/types'; +import { makeStyles, Theme } from '@material-ui/core/styles'; +import { WaitForData } from 'components/common/WaitForData'; +import { useProject } from 'components/hooks/useProjects'; +import { LaunchPlanId } from 'models/Launch/types'; +import { entitySections } from 'components/Entities/constants'; +import { EntityDetailsHeader } from 'components/Entities/EntityDetailsHeader'; +import { EntityVersions } from 'components/Entities/EntityVersions'; + +const useStyles = makeStyles((_theme: Theme) => ({ + verionDetailsContatiner: { + display: 'flex', + flexDirection: 'column', + flexWrap: 'nowrap', + overflow: 'hidden', + height: `calc(100vh - ${_theme.spacing(1)}rem)`, + }, + staticGraphContainer: { + display: 'flex', + height: '60%', + width: '100%', + flex: '1', + }, + versionsContainer: { + display: 'flex', + flex: '0 1 auto', + height: '40%', + flexDirection: 'column', + overflowY: 'scroll', + }, +})); + +interface LaunchPlanVersionDetailsRouteParams { + projectId: string; + domainId: string; + launchPlanName: string; + launchPlanVersion: string; +} + +/** + * The view component for the LaunchPlan Versions page + * @param projectId + * @param domainId + * @param launchPlanName + */ +const LaunchPlanVersionDetailsContainer: React.FC = ({ + projectId, + domainId, + launchPlanName, + launchPlanVersion, +}) => { + const launchPlanId = React.useMemo( + () => ({ + resourceType: ResourceType.LAUNCH_PLAN, + project: projectId, + domain: domainId, + name: launchPlanName, + version: launchPlanVersion, + }), + [projectId, domainId, launchPlanName, launchPlanVersion], + ); + + const id = launchPlanId as ResourceIdentifier; + const sections = entitySections[ResourceType.LAUNCH_PLAN]; + const project = useProject(launchPlanId.project); + const styles = useStyles(); + + return ( + + +
+
+ {/* */} +
+
+ +
+
+ + ); +}; + +export const LaunchPlanVersionDetails = withRouteParams( + LaunchPlanVersionDetailsContainer, +); diff --git a/packages/zapp/console/src/components/LaunchPlan/SearchableLaunchPlanNameList.tsx b/packages/zapp/console/src/components/LaunchPlan/SearchableLaunchPlanNameList.tsx new file mode 100644 index 000000000..a2489142e --- /dev/null +++ b/packages/zapp/console/src/components/LaunchPlan/SearchableLaunchPlanNameList.tsx @@ -0,0 +1,193 @@ +import { makeStyles, Theme } from '@material-ui/core/styles'; +import DeviceHub from '@material-ui/icons/DeviceHub'; +import classNames from 'classnames'; +import { useNamedEntityListStyles } from 'components/common/SearchableNamedEntityList'; +import { useCommonStyles } from 'components/common/styles'; +import { separatorColor, primaryTextColor, launchPlanLabelColor } from 'components/Theme/constants'; +import * as React from 'react'; +import { Link } from 'react-router-dom'; +import { Routes } from 'routes/routes'; +import { debounce } from 'lodash'; +import { Typography, FormGroup } from '@material-ui/core'; +import { LaunchPlanListStructureItem } from './types'; +import { SearchableInput } from '../common/SearchableList'; +import { useSearchableListState } from '../common/useSearchableListState'; + +interface SearchableLaunchPlanNameItemProps { + item: LaunchPlanListStructureItem; +} + +interface SearchableLaunchPlanNameListProps { + launchPlans: LaunchPlanListStructureItem[]; +} + +export const showOnHoverClass = 'showOnHover'; + +const useStyles = makeStyles((theme: Theme) => ({ + actionContainer: { + display: 'flex', + right: 0, + top: 0, + position: 'absolute', + height: '100%', + }, + archiveCheckbox: { + whiteSpace: 'nowrap', + }, + centeredChild: { + alignItems: 'center', + marginRight: 24, + }, + confirmationButton: { + borderRadius: 0, + minWidth: '100px', + minHeight: '53px', + '&:last-child': { + borderRadius: '0px 16px 16px 0px', // to ensure that cancel button will have rounded corners on the right side + }, + }, + container: { + padding: theme.spacing(2), + paddingRight: theme.spacing(5), + }, + filterGroup: { + display: 'flex', + flexWrap: 'nowrap', + flexDirection: 'row', + margin: theme.spacing(4, 5, 2, 2), + }, + + itemContainer: { + marginBottom: 15, + borderRadius: 16, + padding: '23px 30px', + border: `1px solid ${separatorColor}`, + display: 'flex', + flexDirection: 'column', + alignItems: 'flex-start', + position: 'relative', + // All children using the showOnHover class will be hidden until + // the mouse enters the container + [`& .${showOnHoverClass}`]: { + opacity: 0, + }, + [`&:hover .${showOnHoverClass}`]: { + opacity: 1, + }, + }, + itemName: { + display: 'flex', + fontWeight: 600, + color: primaryTextColor, + marginBottom: 10, + }, + itemDescriptionRow: { + color: '#757575', + marginBottom: 30, + width: '100%', + }, + itemIcon: { + marginRight: 14, + color: '#636379', + }, + itemRow: { + display: 'flex', + marginBottom: 10, + '&:last-child': { + marginBottom: 0, + }, + alignItems: 'center', + width: '100%', + }, + itemLabel: { + width: 140, + fontSize: 14, + color: launchPlanLabelColor, + }, + searchInputContainer: { + paddingLeft: 0, + }, + w100: { + flex: 1, + }, +})); + +/** + * Renders individual searchable launchPlan item + * @param item + * @returns + */ +const SearchableLaunchPlanNameItem: React.FC = React.memo( + ({ item }) => { + const commonStyles = useCommonStyles(); + const listStyles = useNamedEntityListStyles(); + const styles = useStyles(); + const { id, description } = item; + + return ( + +
+
+ +
{id.name}
+
+ {description && ( + + {description} + + )} +
+ + ); + }, +); + +/** + * Renders a searchable list of LaunchPlan names, with associated descriptions + * @param launchPlans + * @constructor + */ +export const SearchableLaunchPlanNameList: React.FC = ({ + launchPlans, +}) => { + const styles = useStyles(); + const [search, setSearch] = React.useState(''); + const { results, setSearchString } = useSearchableListState({ + items: launchPlans, + propertyGetter: ({ id }) => id.name, + }); + + const onSearchChange = (event: React.ChangeEvent) => { + const searchString = event.target.value; + setSearch(searchString); + const debouncedSearch = debounce(() => setSearchString(searchString), 1000); + debouncedSearch(); + }; + const onClear = () => setSearch(''); + + return ( + <> + + + +
+ {results.map(({ value }) => ( + + ))} +
+ + ); +}; diff --git a/packages/zapp/console/src/components/LaunchPlan/__stories__/SearchableWorkflowNameList.stories.tsx b/packages/zapp/console/src/components/LaunchPlan/__stories__/SearchableWorkflowNameList.stories.tsx new file mode 100644 index 000000000..53c46ef70 --- /dev/null +++ b/packages/zapp/console/src/components/LaunchPlan/__stories__/SearchableWorkflowNameList.stories.tsx @@ -0,0 +1,17 @@ +import * as React from 'react'; +import { action } from '@storybook/addon-actions'; +import { storiesOf } from '@storybook/react'; +import { sampleWorkflowNames } from 'models/__mocks__/sampleWorkflowNames'; +import { SearchableWorkflowNameList } from '../SearchableWorkflowNameList'; + +const baseProps = { workflows: [...sampleWorkflowNames] }; + +const stories = storiesOf('Workflow/SearchableWorkflowNameList', module); +stories.addDecorator((story) =>
{story()}
); +stories.add('basic', () => ( + +)); diff --git a/packages/zapp/console/src/components/LaunchPlan/filters/useLaunchPlanShowArchivedState.ts b/packages/zapp/console/src/components/LaunchPlan/filters/useLaunchPlanShowArchivedState.ts new file mode 100644 index 000000000..90fc89d5f --- /dev/null +++ b/packages/zapp/console/src/components/LaunchPlan/filters/useLaunchPlanShowArchivedState.ts @@ -0,0 +1,33 @@ +import { useState } from 'react'; +import { FilterOperation, FilterOperationName } from 'models/AdminEntity/types'; +import { NamedEntityState } from 'models/enums'; + +interface ArchiveFilterState { + showArchived: boolean; + setShowArchived: (newValue: boolean) => void; + getFilter: () => FilterOperation; +} + +/** + * Allows to filter by Archive state + */ +export function useLaunchPlanShowArchivedState(): ArchiveFilterState { + const [showArchived, setShowArchived] = useState(false); + + // By default all values are returned with NAMED_ENTITY_ACTIVE state + const getFilter = (): FilterOperation => { + return { + key: 'state', + operation: FilterOperationName.EQ, + value: showArchived + ? NamedEntityState.NAMED_ENTITY_ARCHIVED + : NamedEntityState.NAMED_ENTITY_ACTIVE, + }; + }; + + return { + showArchived, + setShowArchived, + getFilter, + }; +} 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..4e7004f59 --- /dev/null +++ b/packages/zapp/console/src/components/LaunchPlan/launchPlanQueries.ts @@ -0,0 +1,29 @@ +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); + // On successful launchPlan fetch, extract and cache all task templates + // stored on the launchPlan so that we don't need to fetch them separately + // if future queries reference them. + // Todo or missing + + 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..0a6b8e24a --- /dev/null +++ b/packages/zapp/console/src/components/LaunchPlan/types.ts @@ -0,0 +1,22 @@ +import { LaunchPlanId } from 'models/Launch/types'; +import { LaunchPlanExecutionPhase } from 'models/Execution/enums'; +import { LaunchPlanExecutionIdentifier } from 'models/Execution/types'; +import { NamedEntityIdentifier } from 'models/Common/types'; +import { NamedEntityState } from 'models/enums'; + +export type LaunchPlanListItem = { + id: LaunchPlanId; + inputs?: string; + outputs?: string; + latestExecutionTime?: string; + executionStatus?: LaunchPlanExecutionPhase[]; + executionIds?: LaunchPlanExecutionIdentifier[]; + description?: string; + state: NamedEntityState; +}; + +export type LaunchPlanListStructureItem = { + id: NamedEntityIdentifier; + description: string; + state: NamedEntityState; +}; diff --git a/packages/zapp/console/src/components/LaunchPlan/useLaunchPlanInfoItem.ts b/packages/zapp/console/src/components/LaunchPlan/useLaunchPlanInfoItem.ts new file mode 100644 index 000000000..872a8845a --- /dev/null +++ b/packages/zapp/console/src/components/LaunchPlan/useLaunchPlanInfoItem.ts @@ -0,0 +1,42 @@ +import { NamedEntityIdentifier } from 'models/Common/types'; +import { SortDirection } from 'models/AdminEntity/types'; +import { listLaunchPlans } from 'models/Launch/api'; +import { launchSortFields } from 'models/Launch/constants'; +import { useQuery } from 'react-query'; + +export const useLaunchPlanInfoItem = ({ domain, project, name }: NamedEntityIdentifier) => { + const { + data: launchPlanInfo, + isLoading: launchPlanLoading, + error: launchPlanError, + } = useQuery( + ['launch_plans', domain, project, name], + async () => { + const { + entities: [launchPlan], + } = await listLaunchPlans( + { domain, project, name }, + { + limit: 1, + sort: { + key: launchSortFields.name, + direction: SortDirection.DESCENDING, + }, + }, + ); + const { id } = launchPlan; + return { id }; + }, + { + staleTime: 1000 * 60 * 5, + }, + ); + + return { + data: { + ...launchPlanInfo, + }, + isLoading: launchPlanLoading, + error: launchPlanError, + }; +}; 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/LaunchPlan/utils.ts b/packages/zapp/console/src/components/LaunchPlan/utils.ts new file mode 100644 index 000000000..1a7e05a3a --- /dev/null +++ b/packages/zapp/console/src/components/LaunchPlan/utils.ts @@ -0,0 +1,11 @@ +import { NamedEntityState } from 'models/enums'; +import { LaunchPlanListStructureItem } from './types'; + +function isLaunchPlanStateArchive(launchPlan: LaunchPlanListStructureItem): boolean { + const state = launchPlan?.state ?? null; + return !!state && state === NamedEntityState.NAMED_ENTITY_ARCHIVED; +} + +export function isLaunchPlanArchived(launchPlan: LaunchPlanListStructureItem): boolean { + return isLaunchPlanStateArchive(launchPlan); +} diff --git a/packages/zapp/console/src/components/Navigation/ProjectNavigation.tsx b/packages/zapp/console/src/components/Navigation/ProjectNavigation.tsx index b4b75f645..7495ceee2 100644 --- a/packages/zapp/console/src/components/Navigation/ProjectNavigation.tsx +++ b/packages/zapp/console/src/components/Navigation/ProjectNavigation.tsx @@ -13,6 +13,8 @@ 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 { ProjectDetails } from 'components/Project/ProjectDetails'; import { ProjectSelector } from './ProjectSelector'; interface ProjectNavigationRouteParams { @@ -113,6 +115,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..f2b2b007a --- /dev/null +++ b/packages/zapp/console/src/components/Project/ProjectLaunchPlans.tsx @@ -0,0 +1,40 @@ +import { WaitForData } from 'components/common/WaitForData'; +import { useLaunchPlanShowArchivedState } from 'components/LaunchPlan/filters/useLaunchPlanShowArchivedState'; +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 archivedFilter = useLaunchPlanShowArchivedState(); + const launchPlans = useLaunchPlanInfoList( + { domain, project }, + { + limit: limits.NONE, + sort: DEFAULT_SORT, + filter: [archivedFilter.getFilter()], + }, + ); + + 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/data/types.ts b/packages/zapp/console/src/components/data/types.ts index 10db6648d..7695bbc4c 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 = 'workflow', } type QueryKeyArray = [QueryType, ...unknown[]]; diff --git a/packages/zapp/console/src/models/Execution/enums.ts b/packages/zapp/console/src/models/Execution/enums.ts index 3209223ca..b304d569e 100644 --- a/packages/zapp/console/src/models/Execution/enums.ts +++ b/packages/zapp/console/src/models/Execution/enums.ts @@ -13,6 +13,8 @@ export type ExecutionMode = Admin.ExecutionMetadata.ExecutionMode; export const ExecutionMode = Admin.ExecutionMetadata.ExecutionMode; export type WorkflowExecutionPhase = Core.WorkflowExecution.Phase; export const WorkflowExecutionPhase = Core.WorkflowExecution.Phase; +export type LaunchPlanExecutionPhase = Core.WorkflowExecution.Phase; +export const LaunchPlanExecutionPhase = Core.WorkflowExecution.Phase; export type NodeExecutionPhase = Core.NodeExecution.Phase; export const NodeExecutionPhase = Core.NodeExecution.Phase; export type TaskExecutionPhase = Core.TaskExecution.Phase; diff --git a/packages/zapp/console/src/models/Execution/types.ts b/packages/zapp/console/src/models/Execution/types.ts index f03d5a4a4..118c725a3 100644 --- a/packages/zapp/console/src/models/Execution/types.ts +++ b/packages/zapp/console/src/models/Execution/types.ts @@ -9,6 +9,7 @@ import { } from './enums'; export type WorkflowExecutionIdentifier = RequiredNonNullable; +export type LaunchPlanExecutionIdentifier = RequiredNonNullable; export type ExecutionError = RequiredNonNullable; export type ExternalResource = Event.IExternalResourceInfo; export type LogsByPhase = Map; 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..8257172f8 100644 --- a/packages/zapp/console/src/routes/ApplicationRouter.tsx +++ b/packages/zapp/console/src/routes/ApplicationRouter.tsx @@ -16,41 +16,49 @@ function withContentContainer

( ); } -export const ApplicationRouter: React.FC = () => ( - <> - - - - - - - - - - -); +export const ApplicationRouter: React.FC = () => { + console.log('hello'); + return ( + <> + + {/* + + + + */} + + + + + + ); +}; diff --git a/packages/zapp/console/src/routes/components.ts b/packages/zapp/console/src/routes/components.ts index 42b272def..0945a5f42 100644 --- a/packages/zapp/console/src/routes/components.ts +++ b/packages/zapp/console/src/routes/components.ts @@ -4,6 +4,7 @@ import { ProjectDetails } from 'components/Project/ProjectDetails'; import { SelectProject } from 'components/SelectProject/SelectProject'; import { TaskDetails } from 'components/Task/TaskDetails'; import { WorkflowDetails } from 'components/Workflow/WorkflowDetails'; +import { LaunchPlanDetails } from 'components/LaunchPlan/LaunchPlanDetails'; import { EntityVersionsDetailsContainer } from 'components/Entities/VersionDetails/EntityVersionDetailsContainer'; /** Indexes the components for each defined route. These are done separately to avoid circular references @@ -17,4 +18,5 @@ export const components = { taskDetails: TaskDetails, workflowDetails: WorkflowDetails, entityVersionDetails: EntityVersionsDetailsContainer, + launchPlanDetails: LaunchPlanDetails, }; diff --git a/packages/zapp/console/src/routes/routes.ts b/packages/zapp/console/src/routes/routes.ts index 22ef7621a..ea0c20c8f 100644 --- a/packages/zapp/console/src/routes/routes.ts +++ b/packages/zapp/console/src/routes/routes.ts @@ -34,6 +34,11 @@ export class Routes { makeProjectBoundPath(project, `/workflows${domain ? `?domain=${domain}` : ''}`), path: `${projectBasePath}/workflows`, }, + launchPlans: { + makeUrl: (project: string, domain?: string) => + 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/:launchPlans`, + }; + // Entity Version Details static EntityVersionDetails = { makeUrl: ( From e2d316a9168a8d9090b5c507900673f9093640b6 Mon Sep 17 00:00:00 2001 From: James Date: Thu, 9 Jun 2022 13:00:48 -0400 Subject: [PATCH 02/14] fix: launch plan detail page the top navigation header Signed-off-by: James --- .../src/components/Entities/EntityDetails.tsx | 22 ++++- .../Entities/EntityDetailsHeader.tsx | 1 + .../src/components/Entities/EntityInputs.tsx | 56 ++++++++++++ .../src/components/Entities/constants.ts | 5 +- .../src/components/Entities/generators.ts | 8 +- .../console/src/routes/ApplicationRouter.tsx | 89 +++++++++---------- packages/zapp/console/src/routes/routes.ts | 2 +- 7 files changed, 129 insertions(+), 54 deletions(-) create mode 100644 packages/zapp/console/src/components/Entities/EntityInputs.tsx diff --git a/packages/zapp/console/src/components/Entities/EntityDetails.tsx b/packages/zapp/console/src/components/Entities/EntityDetails.tsx index 16a9c1dfd..c531f8410 100644 --- 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'; @@ -57,6 +58,8 @@ export const EntityDetails: React.FC = ({ id }) => { const styles = useStyles(); const { chartIds, onToggle, clearCharts } = useChartState(); + console.log(id, sections, project, chartIds); + return ( @@ -67,14 +70,27 @@ export const EntityDetails: React.FC = ({ id }) => { ) : null} - {sections.schedules ? ( + {!sections.inputs && sections.schedules ? (

) : null} - {sections.versions ? ( +
+ {sections.inputs ? ( +
+ +
+ ) : null} + {!sections.inputs && sections.schedules ? ( +
+ +
+ ) : null} +
+ + {/* {sections.versions ? (
@@ -86,7 +102,7 @@ export const EntityDetails: React.FC = ({ id }) => {
- ) : null} + ) : null} */} ); }; diff --git a/packages/zapp/console/src/components/Entities/EntityDetailsHeader.tsx b/packages/zapp/console/src/components/Entities/EntityDetailsHeader.tsx index c22b16291..3dd1c7824 100644 --- 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 = ({ const domain = getProjectDomain(project, id.domain); const headerText = `${domain.name} / ${id.name}`; + return ( <>
diff --git a/packages/zapp/console/src/components/Entities/EntityInputs.tsx b/packages/zapp/console/src/components/Entities/EntityInputs.tsx new file mode 100644 index 000000000..c2853c577 --- /dev/null +++ b/packages/zapp/console/src/components/Entities/EntityInputs.tsx @@ -0,0 +1,56 @@ +import { Typography } from '@material-ui/core'; +import { makeStyles, Theme } from '@material-ui/core/styles'; +import classnames from 'classnames'; +import { useCommonStyles } from 'components/common/styles'; +import { WaitForData } from 'components/common/WaitForData'; +import { useNamedEntity } from 'components/hooks/useNamedEntity'; +import { NamedEntityMetadata, ResourceIdentifier, Variable } from 'models/Common/types'; +import * as React from 'react'; +import reactLoadingSkeleton from 'react-loading-skeleton'; +import { ReactJsonViewWrapper } from 'components/common/ReactJsonView'; +import { useEntityVersions } from 'components/hooks/Entity/useEntityVersions'; +import { executionSortFields } from 'models/Execution/constants'; +import { SortDirection } from 'models/AdminEntity/types'; +import { TaskClosure } from 'models/Task/types'; +import { executionFilterGenerator } from './generators'; +import { Row } from './Row'; +import t, { patternKey } from './strings'; +import { entityStrings, entitySections } from './constants'; + +const Skeleton = reactLoadingSkeleton; + +const useStyles = makeStyles((theme: Theme) => ({ + header: { + marginBottom: theme.spacing(1), + }, + description: { + marginTop: theme.spacing(1), + }, + divider: { + borderBottom: `1px solid ${theme.palette.divider}`, + marginBottom: theme.spacing(1), + }, +})); + +/** Fetches and renders the expected & fixed inputs for a given Entity (LaunchPlan) ID */ +export const EntityInputs: React.FC<{ + id: ResourceIdentifier; +}> = ({ id }) => { + const commonStyles = useCommonStyles(); + const styles = useStyles(); + const namedEntity = useNamedEntity(id); + const { closure, spec } = namedEntity.value; + const sections = entitySections[id.resourceType]; + + console.log(namedEntity.value); + + return ( + <> + + {t('basicInformation')} + +
+ + + ); +}; diff --git a/packages/zapp/console/src/components/Entities/constants.ts b/packages/zapp/console/src/components/Entities/constants.ts index efef36a63..e4b128303 100644 --- a/packages/zapp/console/src/components/Entities/constants.ts +++ b/packages/zapp/console/src/components/Entities/constants.ts @@ -27,14 +27,15 @@ interface EntitySectionsFlags { schedules?: boolean; versions?: boolean; descriptionInputsAndOutputs?: boolean; + inputs?: boolean; } export const entitySections: { [k in ResourceType]: EntitySectionsFlags } = { [ResourceType.DATASET]: { description: true }, [ResourceType.LAUNCH_PLAN]: { - description: true, executions: true, - launch: true, + launch: false, + inputs: true, schedules: true, }, [ResourceType.TASK]: { diff --git a/packages/zapp/console/src/components/Entities/generators.ts b/packages/zapp/console/src/components/Entities/generators.ts index f10c41fee..b0d7a8891 100644 --- a/packages/zapp/console/src/components/Entities/generators.ts +++ b/packages/zapp/console/src/components/Entities/generators.ts @@ -29,6 +29,8 @@ export const executionFilterGenerator: { const workflowListGenerator = ({ project, domain }: ResourceIdentifier) => Routes.ProjectDetails.sections.workflows.makeUrl(project, domain); +const launchPlanListGenerator = ({ project, domain }: ResourceIdentifier) => + Routes.ProjectDetails.sections.launchPlans.makeUrl(project, domain); const taskListGenerator = ({ project, domain }: ResourceIdentifier) => Routes.ProjectDetails.sections.tasks.makeUrl(project, domain); const unspecifiedGenerator = ({ project, domain }: ResourceIdentifier | Identifier) => { @@ -42,7 +44,7 @@ export const backUrlGenerator: { [k in ResourceType]: (id: ResourceIdentifier) => string; } = { [ResourceType.DATASET]: unimplementedGenerator, - [ResourceType.LAUNCH_PLAN]: unimplementedGenerator, + [ResourceType.LAUNCH_PLAN]: launchPlanListGenerator, [ResourceType.TASK]: taskListGenerator, [ResourceType.UNSPECIFIED]: unspecifiedGenerator, [ResourceType.WORKFLOW]: workflowListGenerator, @@ -50,6 +52,8 @@ export const backUrlGenerator: { const workflowDetailGenerator = ({ project, domain, name }: ResourceIdentifier) => Routes.WorkflowDetails.makeUrl(project, domain, name); +const launchPlanDetailGenerator = ({ project, domain, name }: ResourceIdentifier) => + Routes.LaunchPlanDetails.makeUrl(project, domain, name); const taskDetailGenerator = ({ project, domain, name }: ResourceIdentifier) => Routes.TaskDetails.makeUrl(project, domain, name); @@ -57,7 +61,7 @@ export const backToDetailUrlGenerator: { [k in ResourceType]: (id: ResourceIdentifier) => string; } = { [ResourceType.DATASET]: unimplementedGenerator, - [ResourceType.LAUNCH_PLAN]: unimplementedGenerator, + [ResourceType.LAUNCH_PLAN]: launchPlanDetailGenerator, [ResourceType.TASK]: taskDetailGenerator, [ResourceType.UNSPECIFIED]: unspecifiedGenerator, [ResourceType.WORKFLOW]: workflowDetailGenerator, diff --git a/packages/zapp/console/src/routes/ApplicationRouter.tsx b/packages/zapp/console/src/routes/ApplicationRouter.tsx index 8257172f8..3b84cb7e1 100644 --- a/packages/zapp/console/src/routes/ApplicationRouter.tsx +++ b/packages/zapp/console/src/routes/ApplicationRouter.tsx @@ -16,49 +16,46 @@ function withContentContainer

( ); } -export const ApplicationRouter: React.FC = () => { - console.log('hello'); - return ( - <> - - {/* - - - - */} - - - - - - ); -}; +export const ApplicationRouter: React.FC = () => ( + <> + + + + + + + + + + + +); diff --git a/packages/zapp/console/src/routes/routes.ts b/packages/zapp/console/src/routes/routes.ts index ea0c20c8f..fa1e6713e 100644 --- a/packages/zapp/console/src/routes/routes.ts +++ b/packages/zapp/console/src/routes/routes.ts @@ -71,7 +71,7 @@ export class Routes { static LaunchPlanDetails = { makeUrl: (project: string, domain: string, launchPlanName: string) => makeProjectDomainBoundPath(project, domain, `/launchPlans/${launchPlanName}`), - path: `${projectDomainBasePath}/launchPlans/:launchPlans`, + path: `${projectDomainBasePath}/launchPlans/:launchPlanName`, }; // Entity Version Details From 25380f2c6668206e211ea43b9c6fe54f951a669d Mon Sep 17 00:00:00 2001 From: James Date: Tue, 14 Jun 2022 09:10:51 -0400 Subject: [PATCH 03/14] fix: added expected inputs and fixed inputs; #none Signed-off-by: James --- .../src/components/Entities/EntityDetails.tsx | 22 +-- .../src/components/Entities/EntityInputs.tsx | 158 ++++++++++++++---- .../src/components/Entities/constants.ts | 1 + .../src/components/Entities/strings.ts | 7 + .../src/components/hooks/useLaunchPlans.ts | 10 +- 5 files changed, 155 insertions(+), 43 deletions(-) diff --git a/packages/zapp/console/src/components/Entities/EntityDetails.tsx b/packages/zapp/console/src/components/Entities/EntityDetails.tsx index c531f8410..5f7b2af25 100644 --- a/packages/zapp/console/src/components/Entities/EntityDetails.tsx +++ b/packages/zapp/console/src/components/Entities/EntityDetails.tsx @@ -40,6 +40,7 @@ const useStyles = makeStyles((theme: Theme) => ({ flex: '1 2 auto', marginRight: theme.spacing(30), }, + inputsContainer: {}, })); interface EntityDetailsProps { @@ -77,26 +78,19 @@ export const EntityDetails: React.FC = ({ id }) => { ) : null}

-
- {sections.inputs ? ( -
- -
- ) : null} - {!sections.inputs && sections.schedules ? ( -
- -
- ) : null} -
+ {sections.inputs ? ( +
+ +
+ ) : null} - {/* {sections.versions ? ( + {sections.versions ? (
) : null} - + {/* {sections.executions ? (
diff --git a/packages/zapp/console/src/components/Entities/EntityInputs.tsx b/packages/zapp/console/src/components/Entities/EntityInputs.tsx index c2853c577..74b4e14a2 100644 --- a/packages/zapp/console/src/components/Entities/EntityInputs.tsx +++ b/packages/zapp/console/src/components/Entities/EntityInputs.tsx @@ -1,56 +1,158 @@ -import { Typography } from '@material-ui/core'; +import { + Paper, + Table, + TableBody, + TableCell, + TableContainer, + TableHead, + TableRow, + Typography, +} from '@material-ui/core'; import { makeStyles, Theme } from '@material-ui/core/styles'; -import classnames from 'classnames'; -import { useCommonStyles } from 'components/common/styles'; -import { WaitForData } from 'components/common/WaitForData'; -import { useNamedEntity } from 'components/hooks/useNamedEntity'; -import { NamedEntityMetadata, ResourceIdentifier, Variable } from 'models/Common/types'; +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 reactLoadingSkeleton from 'react-loading-skeleton'; -import { ReactJsonViewWrapper } from 'components/common/ReactJsonView'; -import { useEntityVersions } from 'components/hooks/Entity/useEntityVersions'; -import { executionSortFields } from 'models/Execution/constants'; -import { SortDirection } from 'models/AdminEntity/types'; -import { TaskClosure } from 'models/Task/types'; -import { executionFilterGenerator } from './generators'; -import { Row } from './Row'; -import t, { patternKey } from './strings'; -import { entityStrings, entitySections } from './constants'; - -const Skeleton = reactLoadingSkeleton; +import t from './strings'; +import { transformLiterals } from '../Literals/helpers'; const useStyles = makeStyles((theme: Theme) => ({ header: { marginBottom: theme.spacing(1), }, - description: { - marginTop: theme.spacing(1), - }, divider: { borderBottom: `1px solid ${theme.palette.divider}`, marginBottom: theme.spacing(1), }, + inputsContainer: { + display: 'flex', + }, + expectedInputsContainer: { + flexGrow: 3, + }, + fixedInputsContainer: { + flexGrow: 2, + }, })); +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 commonStyles = useCommonStyles(); const styles = useStyles(); - const namedEntity = useNamedEntity(id); - const { closure, spec } = namedEntity.value; - const sections = entitySections[id.resourceType]; - console.log(namedEntity.value); + 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]); return ( <> - {t('basicInformation')} + {t('launchPlanLatest')}
- +
+
+ + {t('expectedInputs')} + + + + + + {t('inputsName')} + {t('inputsType')} + {t('inputsRequired')} + {t('inputsDefault')} + + + + {expectedInputs.map(({ name, type, required, defaultValue }) => ( + + {name} + {type} + {required ? : ''} + {defaultValue || '-'} + + ))} + +
+ +
+
+ + {t('fixedInputs')} + + + + + + {t('inputsName')} + {t('inputsDefault')} + + + + {fixedInputs.map(({ name, defaultValue }) => ( + + {name} + {defaultValue || '-'} + + ))} + +
+ +
+
); }; diff --git a/packages/zapp/console/src/components/Entities/constants.ts b/packages/zapp/console/src/components/Entities/constants.ts index e4b128303..4b77c89fb 100644 --- a/packages/zapp/console/src/components/Entities/constants.ts +++ b/packages/zapp/console/src/components/Entities/constants.ts @@ -37,6 +37,7 @@ export const entitySections: { [k in ResourceType]: EntitySectionsFlags } = { launch: false, inputs: true, schedules: true, + versions: true, }, [ResourceType.TASK]: { description: true, diff --git a/packages/zapp/console/src/components/Entities/strings.ts b/packages/zapp/console/src/components/Entities/strings.ts index e12b28fd3..c4ba523ef 100644 --- a/packages/zapp/console/src/components/Entities/strings.ts +++ b/packages/zapp/console/src/components/Entities/strings.ts @@ -25,6 +25,13 @@ const str = { value: 'Value', basicInformation: 'Basic Information', description: 'Description', + launchPlanLatest: 'Launch Plan Detail (Latest Version)', + expectedInputs: 'Expected Inputs', + fixedInputs: 'Fixed Inputs', + inputsName: 'Name', + inputsType: 'Type', + inputsRequired: 'Required', + inputsDefault: 'Default Value', }; export { patternKey } from '@flyteconsole/locale'; diff --git a/packages/zapp/console/src/components/hooks/useLaunchPlans.ts b/packages/zapp/console/src/components/hooks/useLaunchPlans.ts index 302a2505b..42e8ad8dd 100644 --- a/packages/zapp/console/src/components/hooks/useLaunchPlans.ts +++ b/packages/zapp/console/src/components/hooks/useLaunchPlans.ts @@ -1,8 +1,16 @@ +import { useAPIContext } from 'components/data/apiContext'; import { RequestConfig } from 'models/AdminEntity/types'; import { listIdentifiers } from 'models/Common/api'; -import { IdentifierScope, NamedEntityIdentifier, ResourceType } from 'models/Common/types'; +import { + Identifier, + IdentifierScope, + NamedEntityIdentifier, + ResourceType, +} from 'models/Common/types'; import { listLaunchPlans } from 'models/Launch/api'; import { LaunchPlan } from 'models/Launch/types'; +import { FetchableData } from './types'; +import { useFetchableData } from './useFetchableData'; import { usePagination } from './usePagination'; /** A hook for fetching a paginated list of launch plans */ From c0039e03b215324c1461a637ea59d074c62cde56 Mon Sep 17 00:00:00 2001 From: James Date: Tue, 14 Jun 2022 14:22:08 -0400 Subject: [PATCH 04/14] fix: styling launch plan details table #none Signed-off-by: James --- .../src/components/Entities/EntityInputs.tsx | 89 +++++++++++++++---- .../src/components/Entities/strings.ts | 5 ++ 2 files changed, 76 insertions(+), 18 deletions(-) diff --git a/packages/zapp/console/src/components/Entities/EntityInputs.tsx b/packages/zapp/console/src/components/Entities/EntityInputs.tsx index 74b4e14a2..ca667f314 100644 --- a/packages/zapp/console/src/components/Entities/EntityInputs.tsx +++ b/packages/zapp/console/src/components/Entities/EntityInputs.tsx @@ -8,7 +8,7 @@ import { TableRow, Typography, } from '@material-ui/core'; -import { makeStyles, Theme } from '@material-ui/core/styles'; +import { makeStyles, styled, 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'; @@ -27,14 +27,35 @@ const useStyles = makeStyles((theme: Theme) => ({ borderBottom: `1px solid ${theme.palette.divider}`, marginBottom: theme.spacing(1), }, - inputsContainer: { + rowContainer: { display: 'flex', + marginTop: theme.spacing(3), }, - expectedInputsContainer: { - flexGrow: 3, + firstColumnContainer: { + width: '60%', }, - fixedInputsContainer: { - flexGrow: 2, + secondColumnContainer: { + width: '40%', + }, + configs: { + listStyleType: 'none', + paddingInlineStart: 0, + }, + config: { + display: 'flex', + }, + configName: { + color: theme.palette.grey[400], + fontSize: '14px', + marginRight: theme.spacing(2), + }, + configValue: { + color: '#333', + fontSize: '14px', + }, + headCell: { + fontSize: '14px', + color: theme.palette.grey[400], }, })); @@ -95,25 +116,41 @@ export const EntityInputs: React.FC<{ 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')} - +
- {t('inputsName')} - {t('inputsType')} - {t('inputsRequired')} - {t('inputsDefault')} + {t('inputsName')} + {t('inputsType')} + + {t('inputsRequired')} + + {t('inputsDefault')} @@ -121,7 +158,7 @@ export const EntityInputs: React.FC<{ {name} {type} - {required ? : ''} + {required ? : ''} {defaultValue || '-'} ))} @@ -129,16 +166,16 @@ export const EntityInputs: React.FC<{
-
+
{t('fixedInputs')} - +
- {t('inputsName')} - {t('inputsDefault')} + {t('inputsName')} + {t('inputsDefault')} @@ -153,6 +190,22 @@ export const EntityInputs: React.FC<{ +
+
+ + {t('configuration')} + +
    + {configs.map(({ name, value }) => ( +
  • + {name}: + {value} +
    • + ))} +
+
+
{/* TODO: Schedule */}
+
); }; diff --git a/packages/zapp/console/src/components/Entities/strings.ts b/packages/zapp/console/src/components/Entities/strings.ts index c4ba523ef..0e75f2791 100644 --- a/packages/zapp/console/src/components/Entities/strings.ts +++ b/packages/zapp/console/src/components/Entities/strings.ts @@ -32,6 +32,11 @@ const str = { inputsType: 'Type', inputsRequired: 'Required', inputsDefault: 'Default Value', + configuration: 'Configuration', + configType: 'type', + configUrl: 'url', + configSeed: 'seed', + configTestSplitRatio: 'test_split_ratio', }; export { patternKey } from '@flyteconsole/locale'; From c9f6ca849ade583048b0986f4a696d074dcdbef6 Mon Sep 17 00:00:00 2001 From: James Date: Tue, 14 Jun 2022 14:32:23 -0400 Subject: [PATCH 05/14] fix: no inputs style #none Signed-off-by: James --- .../src/components/Entities/EntityInputs.tsx | 94 +++++++++++-------- .../src/components/Entities/strings.ts | 2 + 2 files changed, 55 insertions(+), 41 deletions(-) diff --git a/packages/zapp/console/src/components/Entities/EntityInputs.tsx b/packages/zapp/console/src/components/Entities/EntityInputs.tsx index ca667f314..725df017f 100644 --- a/packages/zapp/console/src/components/Entities/EntityInputs.tsx +++ b/packages/zapp/console/src/components/Entities/EntityInputs.tsx @@ -8,7 +8,7 @@ import { TableRow, Typography, } from '@material-ui/core'; -import { makeStyles, styled, Theme } from '@material-ui/core/styles'; +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'; @@ -33,6 +33,7 @@ const useStyles = makeStyles((theme: Theme) => ({ }, firstColumnContainer: { width: '60%', + marginRight: theme.spacing(3), }, secondColumnContainer: { width: '40%', @@ -57,6 +58,9 @@ const useStyles = makeStyles((theme: Theme) => ({ fontSize: '14px', color: theme.palette.grey[400], }, + noInputs: { + color: theme.palette.grey[400], + }, })); interface Input { @@ -141,53 +145,61 @@ export const EntityInputs: React.FC<{ {t('expectedInputs')} - -
- - - {t('inputsName')} - {t('inputsType')} - - {t('inputsRequired')} - - {t('inputsDefault')} - - - - {expectedInputs.map(({ name, type, required, defaultValue }) => ( - - {name} - {type} - {required ? : ''} - {defaultValue || '-'} + {expectedInputs.length ? ( + +
+ + + {t('inputsName')} + {t('inputsType')} + + {t('inputsRequired')} + + {t('inputsDefault')} - ))} - -
- + + + {expectedInputs.map(({ name, type, required, defaultValue }) => ( + + {name} + {type} + {required ? : ''} + {defaultValue || '-'} + + ))} + + + + ) : ( +

{t('noExpectedInputs')}

+ )}
{t('fixedInputs')} - - - - - {t('inputsName')} - {t('inputsDefault')} - - - - {fixedInputs.map(({ name, defaultValue }) => ( - - {name} - {defaultValue || '-'} + {fixedInputs.length ? ( + +
+ + + {t('inputsName')} + {t('inputsDefault')} - ))} - -
- + + + {fixedInputs.map(({ name, defaultValue }) => ( + + {name} + {defaultValue || '-'} + + ))} + + + + ) : ( +

{t('noFixedInputs')}

+ )}
diff --git a/packages/zapp/console/src/components/Entities/strings.ts b/packages/zapp/console/src/components/Entities/strings.ts index 0e75f2791..bbfb8f6af 100644 --- a/packages/zapp/console/src/components/Entities/strings.ts +++ b/packages/zapp/console/src/components/Entities/strings.ts @@ -37,6 +37,8 @@ const str = { configUrl: 'url', configSeed: 'seed', configTestSplitRatio: 'test_split_ratio', + noExpectedInputs: 'This launch plan has no expected inputs.', + noFixedInputs: 'This launch plan has no fixed inputs.', }; export { patternKey } from '@flyteconsole/locale'; From eac56d6b63eae12739e2e7b10295c519efd16896 Mon Sep 17 00:00:00 2001 From: James Date: Thu, 16 Jun 2022 04:46:06 -0400 Subject: [PATCH 06/14] fix: executions used the launch plan #none; Signed-off-by: James --- packages/zapp/console/src/common/utils.ts | 22 +++++++++++ .../src/components/Entities/EntityDetails.tsx | 4 +- .../components/Entities/EntityExecutions.tsx | 3 -- .../src/components/Entities/EntityInputs.tsx | 9 +++-- .../src/components/Entities/constants.ts | 2 +- .../src/components/Entities/generators.ts | 34 +++++++++++++++-- .../src/components/Entities/strings.ts | 1 + .../Executions/Tables/WorkflowVersionRow.tsx | 31 ++++++++++++++++ .../src/components/Executions/Tables/types.ts | 2 + .../useWorkflowVersionsTableColumns.tsx | 37 ++++++++++++++++++- .../Workflow/SearchableWorkflowNameList.tsx | 20 +--------- .../hooks/Entity/useEntityVersions.ts | 3 +- 12 files changed, 134 insertions(+), 34 deletions(-) diff --git a/packages/zapp/console/src/common/utils.ts b/packages/zapp/console/src/common/utils.ts index 0f5973571..138d9f17e 100644 --- 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 index 5f7b2af25..d20dabf5e 100644 --- a/packages/zapp/console/src/components/Entities/EntityDetails.tsx +++ b/packages/zapp/console/src/components/Entities/EntityDetails.tsx @@ -90,13 +90,13 @@ export const EntityDetails: React.FC = ({ id }) => {
) : null} - {/* + {sections.executions ? (
- ) : null} */} + ) : null} ); }; diff --git a/packages/zapp/console/src/components/Entities/EntityExecutions.tsx b/packages/zapp/console/src/components/Entities/EntityExecutions.tsx index da2e701b8..dd36c9c92 100644 --- a/packages/zapp/console/src/components/Entities/EntityExecutions.tsx +++ b/packages/zapp/console/src/components/Entities/EntityExecutions.tsx @@ -78,9 +78,6 @@ export const EntityExecutions: React.FC = ({ return ( <> - - {t(patternKey('allExecutionsChartTitle', entityStrings[id.resourceType]))} -
({ color: theme.palette.grey[400], fontSize: '14px', marginRight: theme.spacing(2), + minWidth: '95px', }, configValue: { color: '#333', @@ -147,7 +148,7 @@ export const EntityInputs: React.FC<{ {expectedInputs.length ? ( - +
{t('inputsName')} @@ -163,7 +164,9 @@ export const EntityInputs: React.FC<{ {name} {type} - {required ? : ''} + + {required ? : ''} + {defaultValue || '-'} ))} @@ -180,7 +183,7 @@ export const EntityInputs: React.FC<{ {fixedInputs.length ? ( -
+
{t('inputsName')} diff --git a/packages/zapp/console/src/components/Entities/constants.ts b/packages/zapp/console/src/components/Entities/constants.ts index 4b77c89fb..e60181b79 100644 --- a/packages/zapp/console/src/components/Entities/constants.ts +++ b/packages/zapp/console/src/components/Entities/constants.ts @@ -4,7 +4,7 @@ type EntityStringMap = { [k in ResourceType]: string }; export const entityStrings: EntityStringMap = { [ResourceType.DATASET]: 'dataset', - [ResourceType.LAUNCH_PLAN]: 'launch plan', + [ResourceType.LAUNCH_PLAN]: 'launch_plan', [ResourceType.TASK]: 'task', [ResourceType.UNSPECIFIED]: 'item', [ResourceType.WORKFLOW]: 'workflow', diff --git a/packages/zapp/console/src/components/Entities/generators.ts b/packages/zapp/console/src/components/Entities/generators.ts index b0d7a8891..c84aefc8c 100644 --- a/packages/zapp/console/src/components/Entities/generators.ts +++ b/packages/zapp/console/src/components/Entities/generators.ts @@ -6,10 +6,30 @@ import { entityStrings } from './constants'; const noFilters = () => []; export const executionFilterGenerator: { - [k in ResourceType]: (id: ResourceIdentifier) => FilterOperation[]; + [k in ResourceType]: (id: ResourceIdentifier, version?: string) => FilterOperation[]; } = { [ResourceType.DATASET]: noFilters, - [ResourceType.LAUNCH_PLAN]: noFilters, + [ResourceType.LAUNCH_PLAN]: ({ name }, version) => + version + ? [ + { + key: 'launch_plan.name', + operation: FilterOperationName.EQ, + value: name, + }, + { + key: 'launch_plan.version', + operation: FilterOperationName.EQ, + value: version, + }, + ] + : [ + { + key: 'launch_plan.name', + operation: FilterOperationName.EQ, + value: name, + }, + ], [ResourceType.TASK]: ({ name }) => [ { key: 'task.name', @@ -83,12 +103,20 @@ const taskVersionDetailsGenerator = ({ project, domain, name, version }: Identif entityStrings[ResourceType.TASK], version, ); +const launchPlanVersionDetailsGenerator = ({ project, domain, name, version }: Identifier) => + Routes.EntityVersionDetails.makeUrl( + project, + domain, + name, + entityStrings[ResourceType.LAUNCH_PLAN], + version, + ); const entityMapVersionDetailsUrl: { [k in ResourceType]: (id: Identifier) => string; } = { [ResourceType.DATASET]: unimplementedGenerator, - [ResourceType.LAUNCH_PLAN]: unimplementedGenerator, + [ResourceType.LAUNCH_PLAN]: launchPlanVersionDetailsGenerator, [ResourceType.TASK]: taskVersionDetailsGenerator, [ResourceType.UNSPECIFIED]: unspecifiedGenerator, [ResourceType.WORKFLOW]: workflowVersopmDetailsGenerator, diff --git a/packages/zapp/console/src/components/Entities/strings.ts b/packages/zapp/console/src/components/Entities/strings.ts index bbfb8f6af..5dd3b1e55 100644 --- a/packages/zapp/console/src/components/Entities/strings.ts +++ b/packages/zapp/console/src/components/Entities/strings.ts @@ -12,6 +12,7 @@ const str = { noSchedules_task: 'This task has no schedules.', allExecutionsChartTitle_workflow: 'All Executions in the Workflow', allExecutionsChartTitle_task: 'All Execuations in the Task', + allExecutionsChartTitle_launch_plan: 'All Execuations Used the Launch Plan', versionsTitle_workflow: 'Recent Workflow Versions', versionsTitle_task: 'Recent Task Versions', details_task: 'Task Details', diff --git a/packages/zapp/console/src/components/Executions/Tables/WorkflowVersionRow.tsx b/packages/zapp/console/src/components/Executions/Tables/WorkflowVersionRow.tsx index 570ea96ba..8914b1475 100644 --- a/packages/zapp/console/src/components/Executions/Tables/WorkflowVersionRow.tsx +++ b/packages/zapp/console/src/components/Executions/Tables/WorkflowVersionRow.tsx @@ -5,6 +5,11 @@ import * as React from 'react'; import { ListRowProps } from 'react-virtualized'; import { Workflow } from 'models/Workflow/types'; import TableRow from '@material-ui/core/TableRow'; +import { useWorkflowExecutions } from 'components/hooks/useWorkflowExecutions'; +import { executionSortFields } from 'models/Execution/constants'; +import { SortDirection } from 'models/AdminEntity/types'; +import { executionFilterGenerator } from 'components/Entities/generators'; +import { ResourceIdentifier } from 'models/Common/types'; import { useWorkflowVersionsColumnStyles } from './styles'; import { WorkflowExecutionsTableState, WorkflowVersionColumnDefinition } from './types'; @@ -51,6 +56,31 @@ export const WorkflowVersionRow: React.FC = ({ const versionTableStyles = useWorkflowVersionsColumnStyles(); const styles = useStyles(); + const sort = { + key: executionSortFields.createdAt, + direction: SortDirection.DESCENDING, + }; + + const baseFilters = React.useMemo( + () => + workflow.id.resourceType + ? executionFilterGenerator[workflow.id.resourceType]( + workflow.id as ResourceIdentifier, + workflow.id.version, + ) + : [], + [workflow.id], + ); + + const executions = useWorkflowExecutions( + { domain: workflow.id.domain, project: workflow.id.project, version: workflow.id.version }, + { + sort, + filter: baseFilters, + limit: 10, + }, + ); + return ( {versionView && ( @@ -74,6 +104,7 @@ export const WorkflowVersionRow: React.FC = ({ {cellRenderer({ workflow, state, + executions, })} ))} diff --git a/packages/zapp/console/src/components/Executions/Tables/types.ts b/packages/zapp/console/src/components/Executions/Tables/types.ts index 59ab75b23..49bf992a0 100644 --- a/packages/zapp/console/src/components/Executions/Tables/types.ts +++ b/packages/zapp/console/src/components/Executions/Tables/types.ts @@ -1,3 +1,4 @@ +import { PaginatedFetchableData } from 'components/hooks/types'; import { Execution, NodeExecution, NodeExecutionIdentifier } from 'models/Execution/types'; import { Workflow } from 'models/Workflow/types'; @@ -32,6 +33,7 @@ export type WorkflowExecutionColumnDefinition = ColumnDefinition; } export type WorkflowVersionColumnDefinition = ColumnDefinition; diff --git a/packages/zapp/console/src/components/Executions/Tables/useWorkflowVersionsTableColumns.tsx b/packages/zapp/console/src/components/Executions/Tables/useWorkflowVersionsTableColumns.tsx index aefdfbbb5..d16453948 100644 --- a/packages/zapp/console/src/components/Executions/Tables/useWorkflowVersionsTableColumns.tsx +++ b/packages/zapp/console/src/components/Executions/Tables/useWorkflowVersionsTableColumns.tsx @@ -1,6 +1,8 @@ import { Typography } from '@material-ui/core'; import { formatDateUTC } from 'common/formatters'; -import { timestampToDate } from 'common/utils'; +import { padExecutionPaths, padExecutions, timestampToDate } from 'common/utils'; +import { WaitForData } from 'components/common/WaitForData'; +import ProjectStatusBar from 'components/Project/ProjectStatusBar'; import * as React from 'react'; import { useWorkflowVersionsColumnStyles } from './styles'; import { WorkflowVersionColumnDefinition } from './types'; @@ -36,6 +38,39 @@ export function useWorkflowVersionsTableColumns(): WorkflowVersionColumnDefiniti key: 'createdAt', label: 'time created', }, + { + cellRenderer: ({ executions }) => { + return ( + + + {executions.value.length + ? formatDateUTC(timestampToDate(executions.value[0].closure.createdAt)) + : ''} + + + ); + }, + className: styles.columnCreatedAt, + key: 'lastExecution', + label: 'last execution', + }, + { + cellRenderer: ({ executions }) => { + return ( + + execution.closure.phase) || [], + )} + paths={padExecutionPaths(executions.value.map((execution) => execution.id) || [])} + /> + + ); + }, + className: styles.columnCreatedAt, + key: 'recentRun', + label: 'recent run', + }, ], [styles], ); diff --git a/packages/zapp/console/src/components/Workflow/SearchableWorkflowNameList.tsx b/packages/zapp/console/src/components/Workflow/SearchableWorkflowNameList.tsx index 2719a501a..f9dd23b89 100644 --- a/packages/zapp/console/src/components/Workflow/SearchableWorkflowNameList.tsx +++ b/packages/zapp/console/src/components/Workflow/SearchableWorkflowNameList.tsx @@ -27,6 +27,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 +143,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/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'; From cd93d219f65e35db56edbe2bffc8a7e86b0b328a Mon Sep 17 00:00:00 2001 From: James Date: Thu, 16 Jun 2022 04:54:59 -0400 Subject: [PATCH 07/14] fix: launch plan version details container Signed-off-by: James --- packages/zapp/console/src/components/Entities/constants.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/zapp/console/src/components/Entities/constants.ts b/packages/zapp/console/src/components/Entities/constants.ts index e60181b79..6729064c3 100644 --- a/packages/zapp/console/src/components/Entities/constants.ts +++ b/packages/zapp/console/src/components/Entities/constants.ts @@ -14,7 +14,7 @@ type TypeNameToEntityResourceType = { [key: string]: ResourceType }; export const typeNameToEntityResource: TypeNameToEntityResourceType = { ['dataset']: ResourceType.DATASET, - ['launch plan']: ResourceType.LAUNCH_PLAN, + ['launch_plan']: ResourceType.LAUNCH_PLAN, ['task']: ResourceType.TASK, ['item']: ResourceType.UNSPECIFIED, ['workflow']: ResourceType.WORKFLOW, From d851af3329f9f29b1813433140220e96c9857281 Mon Sep 17 00:00:00 2001 From: James Date: Thu, 16 Jun 2022 22:42:47 -0400 Subject: [PATCH 08/14] fix: days ago Signed-off-by: James --- .../console/src/components/Executions/Tables/constants.ts | 1 + .../console/src/components/Executions/Tables/styles.ts | 6 ++++++ .../Executions/Tables/useWorkflowVersionsTableColumns.tsx | 7 ++++--- 3 files changed, 11 insertions(+), 3 deletions(-) diff --git a/packages/zapp/console/src/components/Executions/Tables/constants.ts b/packages/zapp/console/src/components/Executions/Tables/constants.ts index 9dbcc1145..8e7238444 100644 --- a/packages/zapp/console/src/components/Executions/Tables/constants.ts +++ b/packages/zapp/console/src/components/Executions/Tables/constants.ts @@ -29,4 +29,5 @@ export const workflowVersionsTableColumnWidths = { release: 150, lastRun: 175, createdAt: 260, + recentRun: 160, }; diff --git a/packages/zapp/console/src/components/Executions/Tables/styles.ts b/packages/zapp/console/src/components/Executions/Tables/styles.ts index 4e5709100..d1469db13 100644 --- a/packages/zapp/console/src/components/Executions/Tables/styles.ts +++ b/packages/zapp/console/src/components/Executions/Tables/styles.ts @@ -178,4 +178,10 @@ export const useWorkflowVersionsColumnStyles = makeStyles(() => ({ columnCreatedAt: { flexBasis: workflowVersionsTableColumnWidths.createdAt, }, + columnLastRun: { + flexBasis: workflowVersionsTableColumnWidths.lastRun, + }, + columnRecentRun: { + flexBasis: workflowVersionsTableColumnWidths.recentRun, + }, })); diff --git a/packages/zapp/console/src/components/Executions/Tables/useWorkflowVersionsTableColumns.tsx b/packages/zapp/console/src/components/Executions/Tables/useWorkflowVersionsTableColumns.tsx index d16453948..f2a750105 100644 --- a/packages/zapp/console/src/components/Executions/Tables/useWorkflowVersionsTableColumns.tsx +++ b/packages/zapp/console/src/components/Executions/Tables/useWorkflowVersionsTableColumns.tsx @@ -3,6 +3,7 @@ import { formatDateUTC } from 'common/formatters'; import { padExecutionPaths, padExecutions, timestampToDate } from 'common/utils'; import { WaitForData } from 'components/common/WaitForData'; import ProjectStatusBar from 'components/Project/ProjectStatusBar'; +import * as moment from 'moment'; import * as React from 'react'; import { useWorkflowVersionsColumnStyles } from './styles'; import { WorkflowVersionColumnDefinition } from './types'; @@ -44,13 +45,13 @@ export function useWorkflowVersionsTableColumns(): WorkflowVersionColumnDefiniti {executions.value.length - ? formatDateUTC(timestampToDate(executions.value[0].closure.createdAt)) + ? moment(timestampToDate(executions.value[0].closure.createdAt)).fromNow() : ''} ); }, - className: styles.columnCreatedAt, + className: styles.columnLastRun, key: 'lastExecution', label: 'last execution', }, @@ -67,7 +68,7 @@ export function useWorkflowVersionsTableColumns(): WorkflowVersionColumnDefiniti ); }, - className: styles.columnCreatedAt, + className: styles.columnRecentRun, key: 'recentRun', label: 'recent run', }, From 1cd42d4cbbbed877186a6e7d1e12ead63e824d22 Mon Sep 17 00:00:00 2001 From: James Date: Thu, 16 Jun 2022 22:45:13 -0400 Subject: [PATCH 09/14] fix: github pr comments 1 Signed-off-by: James --- .../ui-atoms/src/Icons/MuiLaunchPlanIcon/index.tsx | 4 ++-- .../zapp/console/src/components/LaunchPlan/utils.ts | 11 ----------- 2 files changed, 2 insertions(+), 13 deletions(-) delete mode 100644 packages/zapp/console/src/components/LaunchPlan/utils.ts diff --git a/packages/composites/ui-atoms/src/Icons/MuiLaunchPlanIcon/index.tsx b/packages/composites/ui-atoms/src/Icons/MuiLaunchPlanIcon/index.tsx index 8f9e98271..fe31dab93 100644 --- a/packages/composites/ui-atoms/src/Icons/MuiLaunchPlanIcon/index.tsx +++ b/packages/composites/ui-atoms/src/Icons/MuiLaunchPlanIcon/index.tsx @@ -1,5 +1,6 @@ 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(() => ({ @@ -18,10 +19,9 @@ const useStyles = makeStyles(() => ({ export const MuiLaunchPlanIcon: React.FunctionComponent = (props: SvgIconProps) => { const { viewBox, fill, className } = props; const styles = useStyles(); - console.log(props); return ( Date: Thu, 16 Jun 2022 22:59:59 -0400 Subject: [PATCH 10/14] fix: revisit pr changes and updates small issues Signed-off-by: James --- .../src/components/Entities/EntityDetails.tsx | 9 ++-- .../LaunchPlan/LaunchPlanVersionDetails.tsx | 3 -- .../SearchableLaunchPlanNameList.tsx | 26 ------------ .../SearchableWorkflowNameList.stories.tsx | 17 -------- .../filters/useLaunchPlanShowArchivedState.ts | 33 --------------- .../LaunchPlan/launchPlanQueries.ts | 4 -- .../src/components/LaunchPlan/types.ts | 14 ------- .../LaunchPlan/useLaunchPlanInfoItem.ts | 42 ------------------- .../components/Project/ProjectLaunchPlans.tsx | 4 +- .../zapp/console/src/components/data/types.ts | 2 +- .../console/src/models/Execution/enums.ts | 2 - .../console/src/models/Execution/types.ts | 1 - 12 files changed, 7 insertions(+), 150 deletions(-) delete mode 100644 packages/zapp/console/src/components/LaunchPlan/__stories__/SearchableWorkflowNameList.stories.tsx delete mode 100644 packages/zapp/console/src/components/LaunchPlan/filters/useLaunchPlanShowArchivedState.ts delete mode 100644 packages/zapp/console/src/components/LaunchPlan/useLaunchPlanInfoItem.ts diff --git a/packages/zapp/console/src/components/Entities/EntityDetails.tsx b/packages/zapp/console/src/components/Entities/EntityDetails.tsx index d20dabf5e..62d15fcaf 100644 --- a/packages/zapp/console/src/components/Entities/EntityDetails.tsx +++ b/packages/zapp/console/src/components/Entities/EntityDetails.tsx @@ -17,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%', }, @@ -40,7 +40,10 @@ const useStyles = makeStyles((theme: Theme) => ({ flex: '1 2 auto', marginRight: theme.spacing(30), }, - inputsContainer: {}, + inputsContainer: { + display: 'flex', + flexDirection: 'column', + }, })); interface EntityDetailsProps { @@ -59,8 +62,6 @@ export const EntityDetails: React.FC = ({ id }) => { const styles = useStyles(); const { chartIds, onToggle, clearCharts } = useChartState(); - console.log(id, sections, project, chartIds); - return ( diff --git a/packages/zapp/console/src/components/LaunchPlan/LaunchPlanVersionDetails.tsx b/packages/zapp/console/src/components/LaunchPlan/LaunchPlanVersionDetails.tsx index 090065451..148709432 100644 --- a/packages/zapp/console/src/components/LaunchPlan/LaunchPlanVersionDetails.tsx +++ b/packages/zapp/console/src/components/LaunchPlan/LaunchPlanVersionDetails.tsx @@ -76,9 +76,6 @@ const LaunchPlanVersionDetailsContainer: React.FC
-
- {/* */} -
diff --git a/packages/zapp/console/src/components/LaunchPlan/SearchableLaunchPlanNameList.tsx b/packages/zapp/console/src/components/LaunchPlan/SearchableLaunchPlanNameList.tsx index a2489142e..c712e530d 100644 --- a/packages/zapp/console/src/components/LaunchPlan/SearchableLaunchPlanNameList.tsx +++ b/packages/zapp/console/src/components/LaunchPlan/SearchableLaunchPlanNameList.tsx @@ -24,28 +24,6 @@ interface SearchableLaunchPlanNameListProps { export const showOnHoverClass = 'showOnHover'; const useStyles = makeStyles((theme: Theme) => ({ - actionContainer: { - display: 'flex', - right: 0, - top: 0, - position: 'absolute', - height: '100%', - }, - archiveCheckbox: { - whiteSpace: 'nowrap', - }, - centeredChild: { - alignItems: 'center', - marginRight: 24, - }, - confirmationButton: { - borderRadius: 0, - minWidth: '100px', - minHeight: '53px', - '&:last-child': { - borderRadius: '0px 16px 16px 0px', // to ensure that cancel button will have rounded corners on the right side - }, - }, container: { padding: theme.spacing(2), paddingRight: theme.spacing(5), @@ -56,7 +34,6 @@ const useStyles = makeStyles((theme: Theme) => ({ flexDirection: 'row', margin: theme.spacing(4, 5, 2, 2), }, - itemContainer: { marginBottom: 15, borderRadius: 16, @@ -107,9 +84,6 @@ const useStyles = makeStyles((theme: Theme) => ({ searchInputContainer: { paddingLeft: 0, }, - w100: { - flex: 1, - }, })); /** diff --git a/packages/zapp/console/src/components/LaunchPlan/__stories__/SearchableWorkflowNameList.stories.tsx b/packages/zapp/console/src/components/LaunchPlan/__stories__/SearchableWorkflowNameList.stories.tsx deleted file mode 100644 index 53c46ef70..000000000 --- a/packages/zapp/console/src/components/LaunchPlan/__stories__/SearchableWorkflowNameList.stories.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import * as React from 'react'; -import { action } from '@storybook/addon-actions'; -import { storiesOf } from '@storybook/react'; -import { sampleWorkflowNames } from 'models/__mocks__/sampleWorkflowNames'; -import { SearchableWorkflowNameList } from '../SearchableWorkflowNameList'; - -const baseProps = { workflows: [...sampleWorkflowNames] }; - -const stories = storiesOf('Workflow/SearchableWorkflowNameList', module); -stories.addDecorator((story) =>
{story()}
); -stories.add('basic', () => ( - -)); diff --git a/packages/zapp/console/src/components/LaunchPlan/filters/useLaunchPlanShowArchivedState.ts b/packages/zapp/console/src/components/LaunchPlan/filters/useLaunchPlanShowArchivedState.ts deleted file mode 100644 index 90fc89d5f..000000000 --- a/packages/zapp/console/src/components/LaunchPlan/filters/useLaunchPlanShowArchivedState.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { useState } from 'react'; -import { FilterOperation, FilterOperationName } from 'models/AdminEntity/types'; -import { NamedEntityState } from 'models/enums'; - -interface ArchiveFilterState { - showArchived: boolean; - setShowArchived: (newValue: boolean) => void; - getFilter: () => FilterOperation; -} - -/** - * Allows to filter by Archive state - */ -export function useLaunchPlanShowArchivedState(): ArchiveFilterState { - const [showArchived, setShowArchived] = useState(false); - - // By default all values are returned with NAMED_ENTITY_ACTIVE state - const getFilter = (): FilterOperation => { - return { - key: 'state', - operation: FilterOperationName.EQ, - value: showArchived - ? NamedEntityState.NAMED_ENTITY_ARCHIVED - : NamedEntityState.NAMED_ENTITY_ACTIVE, - }; - }; - - return { - showArchived, - setShowArchived, - getFilter, - }; -} diff --git a/packages/zapp/console/src/components/LaunchPlan/launchPlanQueries.ts b/packages/zapp/console/src/components/LaunchPlan/launchPlanQueries.ts index 4e7004f59..3f9da6cca 100644 --- a/packages/zapp/console/src/components/LaunchPlan/launchPlanQueries.ts +++ b/packages/zapp/console/src/components/LaunchPlan/launchPlanQueries.ts @@ -11,10 +11,6 @@ export function makeLaunchPlanQuery( queryKey: [QueryType.LaunchPlan, id], queryFn: async () => { const launchPlan = await getLaunchPlan(id); - // On successful launchPlan fetch, extract and cache all task templates - // stored on the launchPlan so that we don't need to fetch them separately - // if future queries reference them. - // Todo or missing return launchPlan; }, diff --git a/packages/zapp/console/src/components/LaunchPlan/types.ts b/packages/zapp/console/src/components/LaunchPlan/types.ts index 0a6b8e24a..a18b54f4b 100644 --- a/packages/zapp/console/src/components/LaunchPlan/types.ts +++ b/packages/zapp/console/src/components/LaunchPlan/types.ts @@ -1,20 +1,6 @@ -import { LaunchPlanId } from 'models/Launch/types'; -import { LaunchPlanExecutionPhase } from 'models/Execution/enums'; -import { LaunchPlanExecutionIdentifier } from 'models/Execution/types'; import { NamedEntityIdentifier } from 'models/Common/types'; import { NamedEntityState } from 'models/enums'; -export type LaunchPlanListItem = { - id: LaunchPlanId; - inputs?: string; - outputs?: string; - latestExecutionTime?: string; - executionStatus?: LaunchPlanExecutionPhase[]; - executionIds?: LaunchPlanExecutionIdentifier[]; - description?: string; - state: NamedEntityState; -}; - export type LaunchPlanListStructureItem = { id: NamedEntityIdentifier; description: string; diff --git a/packages/zapp/console/src/components/LaunchPlan/useLaunchPlanInfoItem.ts b/packages/zapp/console/src/components/LaunchPlan/useLaunchPlanInfoItem.ts deleted file mode 100644 index 872a8845a..000000000 --- a/packages/zapp/console/src/components/LaunchPlan/useLaunchPlanInfoItem.ts +++ /dev/null @@ -1,42 +0,0 @@ -import { NamedEntityIdentifier } from 'models/Common/types'; -import { SortDirection } from 'models/AdminEntity/types'; -import { listLaunchPlans } from 'models/Launch/api'; -import { launchSortFields } from 'models/Launch/constants'; -import { useQuery } from 'react-query'; - -export const useLaunchPlanInfoItem = ({ domain, project, name }: NamedEntityIdentifier) => { - const { - data: launchPlanInfo, - isLoading: launchPlanLoading, - error: launchPlanError, - } = useQuery( - ['launch_plans', domain, project, name], - async () => { - const { - entities: [launchPlan], - } = await listLaunchPlans( - { domain, project, name }, - { - limit: 1, - sort: { - key: launchSortFields.name, - direction: SortDirection.DESCENDING, - }, - }, - ); - const { id } = launchPlan; - return { id }; - }, - { - staleTime: 1000 * 60 * 5, - }, - ); - - return { - data: { - ...launchPlanInfo, - }, - isLoading: launchPlanLoading, - error: launchPlanError, - }; -}; diff --git a/packages/zapp/console/src/components/Project/ProjectLaunchPlans.tsx b/packages/zapp/console/src/components/Project/ProjectLaunchPlans.tsx index f2b2b007a..7fe696802 100644 --- a/packages/zapp/console/src/components/Project/ProjectLaunchPlans.tsx +++ b/packages/zapp/console/src/components/Project/ProjectLaunchPlans.tsx @@ -1,5 +1,4 @@ import { WaitForData } from 'components/common/WaitForData'; -import { useLaunchPlanShowArchivedState } from 'components/LaunchPlan/filters/useLaunchPlanShowArchivedState'; import { SearchableLaunchPlanNameList } from 'components/LaunchPlan/SearchableLaunchPlanNameList'; import { limits } from 'models/AdminEntity/constants'; import { SortDirection } from 'models/AdminEntity/types'; @@ -22,13 +21,12 @@ export const ProjectLaunchPlans: React.FC = ({ domainId: domain, projectId: project, }) => { - const archivedFilter = useLaunchPlanShowArchivedState(); const launchPlans = useLaunchPlanInfoList( { domain, project }, { limit: limits.NONE, sort: DEFAULT_SORT, - filter: [archivedFilter.getFilter()], + filter: [], }, ); diff --git a/packages/zapp/console/src/components/data/types.ts b/packages/zapp/console/src/components/data/types.ts index 7695bbc4c..7b7fbd02d 100644 --- a/packages/zapp/console/src/components/data/types.ts +++ b/packages/zapp/console/src/components/data/types.ts @@ -14,7 +14,7 @@ export enum QueryType { Workflow = 'workflow', WorkflowExecution = 'workflowExecution', WorkflowExecutionList = 'workflowExecutionList', - LaunchPlan = 'workflow', + LaunchPlan = 'launchPlan', } type QueryKeyArray = [QueryType, ...unknown[]]; diff --git a/packages/zapp/console/src/models/Execution/enums.ts b/packages/zapp/console/src/models/Execution/enums.ts index b304d569e..3209223ca 100644 --- a/packages/zapp/console/src/models/Execution/enums.ts +++ b/packages/zapp/console/src/models/Execution/enums.ts @@ -13,8 +13,6 @@ export type ExecutionMode = Admin.ExecutionMetadata.ExecutionMode; export const ExecutionMode = Admin.ExecutionMetadata.ExecutionMode; export type WorkflowExecutionPhase = Core.WorkflowExecution.Phase; export const WorkflowExecutionPhase = Core.WorkflowExecution.Phase; -export type LaunchPlanExecutionPhase = Core.WorkflowExecution.Phase; -export const LaunchPlanExecutionPhase = Core.WorkflowExecution.Phase; export type NodeExecutionPhase = Core.NodeExecution.Phase; export const NodeExecutionPhase = Core.NodeExecution.Phase; export type TaskExecutionPhase = Core.TaskExecution.Phase; diff --git a/packages/zapp/console/src/models/Execution/types.ts b/packages/zapp/console/src/models/Execution/types.ts index 118c725a3..f03d5a4a4 100644 --- a/packages/zapp/console/src/models/Execution/types.ts +++ b/packages/zapp/console/src/models/Execution/types.ts @@ -9,7 +9,6 @@ import { } from './enums'; export type WorkflowExecutionIdentifier = RequiredNonNullable; -export type LaunchPlanExecutionIdentifier = RequiredNonNullable; export type ExecutionError = RequiredNonNullable; export type ExternalResource = Event.IExternalResourceInfo; export type LogsByPhase = Map; From c17e7a5a0f232d3c613c96317ae58d54565be685 Mon Sep 17 00:00:00 2001 From: James Date: Fri, 24 Jun 2022 00:26:20 -0400 Subject: [PATCH 11/14] fix: fix pull request comments for small issues; #none Signed-off-by: James --- .../src/Icons/MuiLaunchPlanIcon/index.tsx | 12 +-- .../src/components/Entities/EntityInputs.tsx | 10 +-- .../EntityVersionDetailsContainer.tsx | 14 +-- .../src/components/Entities/strings.ts | 6 +- .../LaunchPlan/LaunchPlanVersionDetails.tsx | 89 ------------------- .../SearchableLaunchPlanNameList.tsx | 19 ++-- 6 files changed, 36 insertions(+), 114 deletions(-) delete mode 100644 packages/zapp/console/src/components/LaunchPlan/LaunchPlanVersionDetails.tsx diff --git a/packages/composites/ui-atoms/src/Icons/MuiLaunchPlanIcon/index.tsx b/packages/composites/ui-atoms/src/Icons/MuiLaunchPlanIcon/index.tsx index fe31dab93..fc757ac9d 100644 --- a/packages/composites/ui-atoms/src/Icons/MuiLaunchPlanIcon/index.tsx +++ b/packages/composites/ui-atoms/src/Icons/MuiLaunchPlanIcon/index.tsx @@ -1,11 +1,12 @@ import { makeStyles } from '@material-ui/core/styles'; -import { SvgIconProps } from '@material-ui/core'; +import { SvgIconProps, Theme } from '@material-ui/core'; import classnames from 'classnames'; import * as React from 'react'; -const useStyles = makeStyles(() => ({ +const useStyles = makeStyles((theme: Theme) => ({ svg: { marginTop: 0, + marginRight: theme.spacing(2), width: '1em', height: '1em', display: 'inline-block', @@ -17,17 +18,16 @@ const useStyles = makeStyles(() => ({ })); export const MuiLaunchPlanIcon: React.FunctionComponent = (props: SvgIconProps) => { - const { viewBox, fill, className } = props; + const { viewBox, fill, className, width, height } = props; const styles = useStyles(); return ( (() => { const results = [] as Input[]; - Object.keys(closure?.expectedInputs?.parameters || {}).forEach((name) => { + Object.keys(closure?.expectedInputs?.parameters ?? {}).forEach((name) => { const parameter = closure?.expectedInputs.parameters[name]; if (parameter?.var?.type) { - const typeDefinition = getInputDefintionForLiteralType(parameter?.var?.type); + const typeDefinition = getInputDefintionForLiteralType(parameter.var.type); results.push({ name, type: formatType(typeDefinition), - required: !!parameter?.required, - defaultValue: parameter?.default?.value, + required: !!parameter.required, + defaultValue: parameter.default?.value, }); } }); @@ -117,7 +117,7 @@ export const EntityInputs: React.FC<{ }, [closure]); const fixedInputs = React.useMemo(() => { - const inputsMap = transformLiterals(spec?.fixedInputs?.literals || {}); + const inputsMap = transformLiterals(spec?.fixedInputs?.literals ?? {}); return Object.keys(inputsMap).map((name) => ({ name, defaultValue: inputsMap[name] })); }, [spec]); diff --git a/packages/zapp/console/src/components/Entities/VersionDetails/EntityVersionDetailsContainer.tsx b/packages/zapp/console/src/components/Entities/VersionDetails/EntityVersionDetailsContainer.tsx index 931edeb09..91a274130 100644 --- a/packages/zapp/console/src/components/Entities/VersionDetails/EntityVersionDetailsContainer.tsx +++ b/packages/zapp/console/src/components/Entities/VersionDetails/EntityVersionDetailsContainer.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { withRouteParams } from 'components/common/withRouteParams'; -import { ResourceIdentifier } from 'models/Common/types'; +import { ResourceIdentifier, ResourceType } from 'models/Common/types'; import { makeStyles, Theme } from '@material-ui/core/styles'; import { WaitForData } from 'components/common/WaitForData'; import { useProject } from 'components/hooks/useProjects'; @@ -13,7 +13,11 @@ import { typeNameToEntityResource } from '../constants'; import { versionsDetailsSections } from './constants'; import { EntityVersionDetails } from './EntityVersionDetails'; -const useStyles = makeStyles((theme: Theme) => ({ +interface StyleProps { + resourceType: ResourceType; +} + +const useStyles = makeStyles((theme: Theme) => ({ verionDetailsContainer: { marginTop: theme.spacing(2), display: 'flex', @@ -39,9 +43,9 @@ const useStyles = makeStyles((theme: Theme) => ({ versionsContainer: { display: 'flex', flex: '0 1 auto', - height: '40%', + height: ({ resourceType }) => (resourceType === ResourceType.LAUNCH_PLAN ? '100%' : '40%'), flexDirection: 'column', - overflowY: 'scroll', + overflowY: 'auto', }, })); @@ -81,7 +85,7 @@ const EntityVersionsDetailsContainerImpl: React.FC diff --git a/packages/zapp/console/src/components/Entities/strings.ts b/packages/zapp/console/src/components/Entities/strings.ts index 5dd3b1e55..a763b5033 100644 --- a/packages/zapp/console/src/components/Entities/strings.ts +++ b/packages/zapp/console/src/components/Entities/strings.ts @@ -12,9 +12,13 @@ const str = { noSchedules_task: 'This task has no schedules.', allExecutionsChartTitle_workflow: 'All Executions in the Workflow', allExecutionsChartTitle_task: 'All Execuations in the Task', - allExecutionsChartTitle_launch_plan: 'All Execuations Used the Launch Plan', + allExecutionsChartTitle_launch_plan: 'All Execuations Using Launch Plan', versionsTitle_workflow: 'Recent Workflow Versions', versionsTitle_task: 'Recent Task Versions', + versionsTitle_launch_plan: 'Launch Plan Versions', + searchName_launch_plan: 'Search Launch Plan Name', + searchName_task: 'Search Task Name', + searchName_workflow: 'Search Workflow Name', details_task: 'Task Details', inputsFieldName: 'Inputs', outputsFieldName: 'Outputs', diff --git a/packages/zapp/console/src/components/LaunchPlan/LaunchPlanVersionDetails.tsx b/packages/zapp/console/src/components/LaunchPlan/LaunchPlanVersionDetails.tsx deleted file mode 100644 index 148709432..000000000 --- a/packages/zapp/console/src/components/LaunchPlan/LaunchPlanVersionDetails.tsx +++ /dev/null @@ -1,89 +0,0 @@ -import * as React from 'react'; -import { withRouteParams } from 'components/common/withRouteParams'; -import { ResourceIdentifier, ResourceType } from 'models/Common/types'; -import { makeStyles, Theme } from '@material-ui/core/styles'; -import { WaitForData } from 'components/common/WaitForData'; -import { useProject } from 'components/hooks/useProjects'; -import { LaunchPlanId } from 'models/Launch/types'; -import { entitySections } from 'components/Entities/constants'; -import { EntityDetailsHeader } from 'components/Entities/EntityDetailsHeader'; -import { EntityVersions } from 'components/Entities/EntityVersions'; - -const useStyles = makeStyles((_theme: Theme) => ({ - verionDetailsContatiner: { - display: 'flex', - flexDirection: 'column', - flexWrap: 'nowrap', - overflow: 'hidden', - height: `calc(100vh - ${_theme.spacing(1)}rem)`, - }, - staticGraphContainer: { - display: 'flex', - height: '60%', - width: '100%', - flex: '1', - }, - versionsContainer: { - display: 'flex', - flex: '0 1 auto', - height: '40%', - flexDirection: 'column', - overflowY: 'scroll', - }, -})); - -interface LaunchPlanVersionDetailsRouteParams { - projectId: string; - domainId: string; - launchPlanName: string; - launchPlanVersion: string; -} - -/** - * The view component for the LaunchPlan Versions page - * @param projectId - * @param domainId - * @param launchPlanName - */ -const LaunchPlanVersionDetailsContainer: React.FC = ({ - projectId, - domainId, - launchPlanName, - launchPlanVersion, -}) => { - const launchPlanId = React.useMemo( - () => ({ - resourceType: ResourceType.LAUNCH_PLAN, - project: projectId, - domain: domainId, - name: launchPlanName, - version: launchPlanVersion, - }), - [projectId, domainId, launchPlanName, launchPlanVersion], - ); - - const id = launchPlanId as ResourceIdentifier; - const sections = entitySections[ResourceType.LAUNCH_PLAN]; - const project = useProject(launchPlanId.project); - const styles = useStyles(); - - return ( - - -
-
- -
-
- - ); -}; - -export const LaunchPlanVersionDetails = withRouteParams( - LaunchPlanVersionDetailsContainer, -); diff --git a/packages/zapp/console/src/components/LaunchPlan/SearchableLaunchPlanNameList.tsx b/packages/zapp/console/src/components/LaunchPlan/SearchableLaunchPlanNameList.tsx index c712e530d..f549df57d 100644 --- a/packages/zapp/console/src/components/LaunchPlan/SearchableLaunchPlanNameList.tsx +++ b/packages/zapp/console/src/components/LaunchPlan/SearchableLaunchPlanNameList.tsx @@ -9,9 +9,12 @@ import { Link } from 'react-router-dom'; import { Routes } from 'routes/routes'; import { debounce } from 'lodash'; import { Typography, FormGroup } from '@material-ui/core'; +import { ResourceType } from 'models/Common/types'; import { LaunchPlanListStructureItem } from './types'; import { SearchableInput } from '../common/SearchableList'; import { useSearchableListState } from '../common/useSearchableListState'; +import t, { patternKey } from '../Entities/strings'; +import { entityStrings } from '../Entities/constants'; interface SearchableLaunchPlanNameItemProps { item: LaunchPlanListStructureItem; @@ -35,9 +38,9 @@ const useStyles = makeStyles((theme: Theme) => ({ margin: theme.spacing(4, 5, 2, 2), }, itemContainer: { - marginBottom: 15, - borderRadius: 16, - padding: '23px 30px', + marginBottom: theme.spacing(1), + borderRadius: theme.spacing(2), + padding: theme.spacing(2, 3), border: `1px solid ${separatorColor}`, display: 'flex', flexDirection: 'column', @@ -56,20 +59,20 @@ const useStyles = makeStyles((theme: Theme) => ({ display: 'flex', fontWeight: 600, color: primaryTextColor, - marginBottom: 10, + alignItems: 'center', }, itemDescriptionRow: { color: '#757575', - marginBottom: 30, + marginBottom: theme.spacing(2), width: '100%', }, itemIcon: { - marginRight: 14, + marginRight: theme.spacing(2), color: '#636379', }, itemRow: { display: 'flex', - marginBottom: 10, + marginBottom: theme.spacing(1), '&:last-child': { marginBottom: 0, }, @@ -151,7 +154,7 @@ export const SearchableLaunchPlanNameList: React.FC
From d0de6b0ee35199a75a5d946e05ed21106a6c8a5d Mon Sep 17 00:00:00 2001 From: James Date: Fri, 24 Jun 2022 02:57:18 -0400 Subject: [PATCH 12/14] fix: fix launch plan list ui; #none; Signed-off-by: James --- .../src/Icons/MuiLaunchPlanIcon/index.tsx | 11 +++++------ .../src/components/Entities/EntityExecutions.tsx | 3 --- .../LaunchPlan/SearchableLaunchPlanNameList.tsx | 15 +++++++-------- .../components/Navigation/ProjectNavigation.tsx | 1 - .../Workflow/SearchableWorkflowNameList.tsx | 2 -- .../src/components/hooks/useLaunchPlans.ts | 10 +--------- 6 files changed, 13 insertions(+), 29 deletions(-) diff --git a/packages/composites/ui-atoms/src/Icons/MuiLaunchPlanIcon/index.tsx b/packages/composites/ui-atoms/src/Icons/MuiLaunchPlanIcon/index.tsx index fc757ac9d..c91c3c790 100644 --- a/packages/composites/ui-atoms/src/Icons/MuiLaunchPlanIcon/index.tsx +++ b/packages/composites/ui-atoms/src/Icons/MuiLaunchPlanIcon/index.tsx @@ -7,8 +7,6 @@ const useStyles = makeStyles((theme: Theme) => ({ svg: { marginTop: 0, marginRight: theme.spacing(2), - width: '1em', - height: '1em', display: 'inline-block', fontSize: '1.5rem', transition: 'fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms', @@ -17,17 +15,18 @@ const useStyles = makeStyles((theme: Theme) => ({ }, })); -export const MuiLaunchPlanIcon: React.FunctionComponent = (props: SvgIconProps) => { - const { viewBox, fill, className, width, height } = props; +export const MuiLaunchPlanIcon: React.FunctionComponent = (props: SvgIconProps) => { + const { viewBox, fill, className, width, height, fontSize } = props; const styles = useStyles(); return ( ({ filtersContainer: { diff --git a/packages/zapp/console/src/components/LaunchPlan/SearchableLaunchPlanNameList.tsx b/packages/zapp/console/src/components/LaunchPlan/SearchableLaunchPlanNameList.tsx index f549df57d..98fd36ad0 100644 --- a/packages/zapp/console/src/components/LaunchPlan/SearchableLaunchPlanNameList.tsx +++ b/packages/zapp/console/src/components/LaunchPlan/SearchableLaunchPlanNameList.tsx @@ -1,5 +1,4 @@ import { makeStyles, Theme } from '@material-ui/core/styles'; -import DeviceHub from '@material-ui/icons/DeviceHub'; import classNames from 'classnames'; import { useNamedEntityListStyles } from 'components/common/SearchableNamedEntityList'; import { useCommonStyles } from 'components/common/styles'; @@ -10,6 +9,7 @@ import { Routes } from 'routes/routes'; import { debounce } from 'lodash'; import { Typography, FormGroup } from '@material-ui/core'; import { ResourceType } from 'models/Common/types'; +import { MuiLaunchPlanIcon } from '@flyteconsole/ui-atoms'; import { LaunchPlanListStructureItem } from './types'; import { SearchableInput } from '../common/SearchableList'; import { useSearchableListState } from '../common/useSearchableListState'; @@ -35,13 +35,12 @@ const useStyles = makeStyles((theme: Theme) => ({ display: 'flex', flexWrap: 'nowrap', flexDirection: 'row', - margin: theme.spacing(4, 5, 2, 2), + margin: theme.spacing(4, 5, 0, 2), }, itemContainer: { - marginBottom: theme.spacing(1), - borderRadius: theme.spacing(2), - padding: theme.spacing(2, 3), - border: `1px solid ${separatorColor}`, + padding: theme.spacing(3, 3), + border: 'none', + borderTop: `1px solid ${separatorColor}`, display: 'flex', flexDirection: 'column', alignItems: 'flex-start', @@ -85,7 +84,7 @@ const useStyles = makeStyles((theme: Theme) => ({ color: launchPlanLabelColor, }, searchInputContainer: { - paddingLeft: 0, + padding: 0, }, })); @@ -108,7 +107,7 @@ const SearchableLaunchPlanNameItem: React.FC >
- +
{id.name}
{description && ( diff --git a/packages/zapp/console/src/components/Navigation/ProjectNavigation.tsx b/packages/zapp/console/src/components/Navigation/ProjectNavigation.tsx index 7495ceee2..590d631f1 100644 --- a/packages/zapp/console/src/components/Navigation/ProjectNavigation.tsx +++ b/packages/zapp/console/src/components/Navigation/ProjectNavigation.tsx @@ -14,7 +14,6 @@ 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 { ProjectDetails } from 'components/Project/ProjectDetails'; import { ProjectSelector } from './ProjectSelector'; interface ProjectNavigationRouteParams { diff --git a/packages/zapp/console/src/components/Workflow/SearchableWorkflowNameList.tsx b/packages/zapp/console/src/components/Workflow/SearchableWorkflowNameList.tsx index f9dd23b89..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, diff --git a/packages/zapp/console/src/components/hooks/useLaunchPlans.ts b/packages/zapp/console/src/components/hooks/useLaunchPlans.ts index 42e8ad8dd..302a2505b 100644 --- a/packages/zapp/console/src/components/hooks/useLaunchPlans.ts +++ b/packages/zapp/console/src/components/hooks/useLaunchPlans.ts @@ -1,16 +1,8 @@ -import { useAPIContext } from 'components/data/apiContext'; import { RequestConfig } from 'models/AdminEntity/types'; import { listIdentifiers } from 'models/Common/api'; -import { - Identifier, - IdentifierScope, - NamedEntityIdentifier, - ResourceType, -} from 'models/Common/types'; +import { IdentifierScope, NamedEntityIdentifier, ResourceType } from 'models/Common/types'; import { listLaunchPlans } from 'models/Launch/api'; import { LaunchPlan } from 'models/Launch/types'; -import { FetchableData } from './types'; -import { useFetchableData } from './useFetchableData'; import { usePagination } from './usePagination'; /** A hook for fetching a paginated list of launch plans */ From 7c9237b1aa75343ec604f631d815856d5c2a5f7d Mon Sep 17 00:00:00 2001 From: James Date: Sun, 26 Jun 2022 23:04:34 -0400 Subject: [PATCH 13/14] fix: fix pr comments; #none Signed-off-by: James --- .../src/Icons/MuiLaunchPlanIcon/index.tsx | 14 +++--- .../src/components/Entities/EntityInputs.tsx | 46 +++++++++++++------ .../components/Entities/EntityVersions.tsx | 1 + .../src/components/Entities/strings.ts | 4 +- .../SearchableLaunchPlanNameList.tsx | 12 +---- 5 files changed, 44 insertions(+), 33 deletions(-) diff --git a/packages/composites/ui-atoms/src/Icons/MuiLaunchPlanIcon/index.tsx b/packages/composites/ui-atoms/src/Icons/MuiLaunchPlanIcon/index.tsx index c91c3c790..cd9f459fc 100644 --- a/packages/composites/ui-atoms/src/Icons/MuiLaunchPlanIcon/index.tsx +++ b/packages/composites/ui-atoms/src/Icons/MuiLaunchPlanIcon/index.tsx @@ -12,19 +12,19 @@ const useStyles = makeStyles((theme: Theme) => ({ transition: 'fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms', flexShrink: 0, userSelect: 'none', + color: '#666666', }, })); -export const MuiLaunchPlanIcon: React.FunctionComponent = (props: SvgIconProps) => { - const { viewBox, fill, className, width, height, fontSize } = props; +export const MuiLaunchPlanIcon = (props: SvgIconProps): JSX.Element => { + const { fill, className, width = '1em', height = '1em', fontSize } = props; const styles = useStyles(); return ( @@ -32,7 +32,7 @@ export const MuiLaunchPlanIcon: React.FunctionComponent = (props: 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'} + fill={fill || 'currentColor'} /> ); diff --git a/packages/zapp/console/src/components/Entities/EntityInputs.tsx b/packages/zapp/console/src/components/Entities/EntityInputs.tsx index 6c8ce41f0..4d0d3ab43 100644 --- a/packages/zapp/console/src/components/Entities/EntityInputs.tsx +++ b/packages/zapp/console/src/components/Entities/EntityInputs.tsx @@ -47,7 +47,6 @@ const useStyles = makeStyles((theme: Theme) => ({ }, configName: { color: theme.palette.grey[400], - fontSize: '14px', marginRight: theme.spacing(2), minWidth: '95px', }, @@ -56,7 +55,6 @@ const useStyles = makeStyles((theme: Theme) => ({ fontSize: '14px', }, headCell: { - fontSize: '14px', color: theme.palette.grey[400], }, noInputs: { @@ -151,12 +149,26 @@ export const EntityInputs: React.FC<{
- {t('inputsName')} - {t('inputsType')} + + + {t('inputsName')} + + + + + {t('inputsType')} + + - {t('inputsRequired')} + + {t('inputsRequired')} + + + + + {t('inputsDefault')} + - {t('inputsDefault')} @@ -186,8 +198,16 @@ export const EntityInputs: React.FC<{
- {t('inputsName')} - {t('inputsDefault')} + + + {t('inputsName')} + + + + + {t('inputsDefault')} + + @@ -205,7 +225,7 @@ export const EntityInputs: React.FC<{ )} -
+ {/*
{t('configuration')} @@ -213,14 +233,14 @@ export const EntityInputs: React.FC<{
    {configs.map(({ name, value }) => (
  • - {name}: - {value} + {name}: + {value}
    • ))}
-
{/* TODO: Schedule */}
-
+
+
*/} ); }; diff --git a/packages/zapp/console/src/components/Entities/EntityVersions.tsx b/packages/zapp/console/src/components/Entities/EntityVersions.tsx index 4509f3090..2667ae745 100644 --- a/packages/zapp/console/src/components/Entities/EntityVersions.tsx +++ b/packages/zapp/console/src/components/Entities/EntityVersions.tsx @@ -20,6 +20,7 @@ import t, { patternKey } from './strings'; const useStyles = makeStyles((theme: Theme) => ({ headerContainer: { display: 'flex', + marginTop: theme.spacing(3), }, collapseButton: { marginTop: theme.spacing(-0.5), diff --git a/packages/zapp/console/src/components/Entities/strings.ts b/packages/zapp/console/src/components/Entities/strings.ts index a763b5033..fd0bb7840 100644 --- a/packages/zapp/console/src/components/Entities/strings.ts +++ b/packages/zapp/console/src/components/Entities/strings.ts @@ -11,8 +11,8 @@ const str = { noSchedules_workflow: 'This workflow has no schedules.', noSchedules_task: 'This task has no schedules.', allExecutionsChartTitle_workflow: 'All Executions in the Workflow', - allExecutionsChartTitle_task: 'All Execuations in the Task', - allExecutionsChartTitle_launch_plan: 'All Execuations Using Launch Plan', + allExecutionsChartTitle_task: 'All Executions in the Task', + allExecutionsChartTitle_launch_plan: 'All Executions Using Launch Plan', versionsTitle_workflow: 'Recent Workflow Versions', versionsTitle_task: 'Recent Task Versions', versionsTitle_launch_plan: 'Launch Plan Versions', diff --git a/packages/zapp/console/src/components/LaunchPlan/SearchableLaunchPlanNameList.tsx b/packages/zapp/console/src/components/LaunchPlan/SearchableLaunchPlanNameList.tsx index 98fd36ad0..e8b7137a5 100644 --- a/packages/zapp/console/src/components/LaunchPlan/SearchableLaunchPlanNameList.tsx +++ b/packages/zapp/console/src/components/LaunchPlan/SearchableLaunchPlanNameList.tsx @@ -60,11 +60,6 @@ const useStyles = makeStyles((theme: Theme) => ({ color: primaryTextColor, alignItems: 'center', }, - itemDescriptionRow: { - color: '#757575', - marginBottom: theme.spacing(2), - width: '100%', - }, itemIcon: { marginRight: theme.spacing(2), color: '#636379', @@ -98,7 +93,7 @@ const SearchableLaunchPlanNameItem: React.FC const commonStyles = useCommonStyles(); const listStyles = useNamedEntityListStyles(); const styles = useStyles(); - const { id, description } = item; + const { id } = item; return (
{id.name}
- {description && ( - - {description} - - )} ); From 554bf827e01b64aeeaba7a4834134c48a9db8010 Mon Sep 17 00:00:00 2001 From: James Date: Mon, 27 Jun 2022 12:55:29 -0400 Subject: [PATCH 14/14] fix: remove radio buttons for view all launch plan versions; #none Signed-off-by: James --- .../zapp/console/src/components/Entities/EntityVersions.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/zapp/console/src/components/Entities/EntityVersions.tsx b/packages/zapp/console/src/components/Entities/EntityVersions.tsx index 2667ae745..a9c1339cf 100644 --- a/packages/zapp/console/src/components/Entities/EntityVersions.tsx +++ b/packages/zapp/console/src/components/Entities/EntityVersions.tsx @@ -11,7 +11,7 @@ import { isLoadingState } from 'components/hooks/fetchMachine'; import { useEntityVersions } from 'components/hooks/Entity/useEntityVersions'; import { interactiveTextColor } from 'components/Theme/constants'; import { SortDirection } from 'models/AdminEntity/types'; -import { Identifier, ResourceIdentifier } from 'models/Common/types'; +import { Identifier, ResourceIdentifier, ResourceType } from 'models/Common/types'; import { executionSortFields } from 'models/Execution/constants'; import { executionFilterGenerator, versionDetailsUrlGenerator } from './generators'; import { WorkflowVersionsTablePageSize, entityStrings } from './constants'; @@ -115,7 +115,7 @@ export const EntityVersions: React.FC = ({ id, showAll = fa ) : (