Skip to content

Commit

Permalink
feat: add workflow versions table (#193)
Browse files Browse the repository at this point in the history
Signed-off-by: csirius <[email protected]>
  • Loading branch information
govalt authored Aug 31, 2021
1 parent 14304c7 commit 6fff87e
Show file tree
Hide file tree
Showing 11 changed files with 383 additions and 2 deletions.
1 change: 1 addition & 0 deletions src/common/constants.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ export const dashedValueString = '----';
export const noDescriptionString = '(No description)';
export const noneString = '(none)';
export const noExecutionsFoundString = 'No executions found.';
export const noWorkflowVersionsFoundString = 'No workflow versions found.';
export const zeroSecondsString = '0s';

export enum KeyCodes {
Expand Down
11 changes: 11 additions & 0 deletions src/components/Entities/EntityDetails.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { entitySections } from './constants';
import { EntityDetailsHeader } from './EntityDetailsHeader';
import { EntityExecutions } from './EntityExecutions';
import { EntitySchedules } from './EntitySchedules';
import { EntityVersions } from './EntityVersions';

const useStyles = makeStyles((theme: Theme) => ({
metadataContainer: {
Expand All @@ -29,6 +30,11 @@ const useStyles = makeStyles((theme: Theme) => ({
flexDirection: 'column',
margin: `0 -${theme.spacing(contentMarginGridUnits)}px`
},
versionsContainer: {
display: 'flex',
flex: '1 1 auto',
flexDirection: 'column'
},
schedulesContainer: {
flex: '1 2 auto',
marginRight: theme.spacing(30)
Expand Down Expand Up @@ -79,6 +85,11 @@ export const EntityDetails: React.FC<EntityDetailsProps> = ({ id }) => {
</div>
) : null}
</div>
{sections.versions ? (
<div className={styles.versionsContainer}>
<EntityVersions id={id} />
</div>
) : null}
{sections.executions ? (
<div className={styles.executionsContainer}>
<EntityExecutions id={id} />
Expand Down
87 changes: 87 additions & 0 deletions src/components/Entities/EntityVersions.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
import { Typography } from '@material-ui/core';
import { makeStyles, Theme } from '@material-ui/core/styles';
import { contentMarginGridUnits } from 'common/layout';
import { WaitForData } from 'components/common/WaitForData';
import { useWorkflowExecutionFiltersState } from 'components/Executions/filters/useExecutionFiltersState';
import { WorkflowVersionsTable } from 'components/Executions/Tables/WorkflowVersionsTable';
import { isLoadingState } from 'components/hooks/fetchMachine';
import { useWorkflowVersions } from 'components/hooks/useWorkflowVersions';
import { interactiveTextColor } from 'components/Theme/constants';
import { SortDirection } from 'models/AdminEntity/types';
import { ResourceIdentifier } from 'models/Common/types';
import { executionSortFields } from 'models/Execution/constants';
import * as React from 'react';
import { executionFilterGenerator } from './generators';
import { WorkflowVersionsTablePageSize } from './constants';

const useStyles = makeStyles((theme: Theme) => ({
headerContainer: {
display: 'flex',
justifyContent: 'space-between',
marginLeft: theme.spacing(contentMarginGridUnits),
marginRight: theme.spacing(contentMarginGridUnits)
},
header: {
marginBottom: theme.spacing(1)
},
viewAll: {
color: interactiveTextColor,
cursor: 'pointer'
}
}));

export interface EntityVersionsProps {
id: ResourceIdentifier;
}

/**
* The tab/page content for viewing a workflow's versions.
* @param id
*/
export const EntityVersions: React.FC<EntityVersionsProps> = ({ id }) => {
const { domain, project, resourceType } = id;
const styles = useStyles();
const filtersState = useWorkflowExecutionFiltersState();
const sort = {
key: executionSortFields.createdAt,
direction: SortDirection.DESCENDING
};

const baseFilters = React.useMemo(
() => executionFilterGenerator[resourceType](id),
[id]
);

const versions = useWorkflowVersions(
{ domain, project },
{
sort,
filter: [...baseFilters, ...filtersState.appliedFilters],
limit: WorkflowVersionsTablePageSize
}
);

/** Don't render component until finish fetching user profile */
if (filtersState.filters[4].status !== 'LOADED') {
return null;
}

return (
<>
<div className={styles.headerContainer}>
<Typography className={styles.header} variant="h6">
Recent Workflow Versions
</Typography>
<Typography className={styles.viewAll} variant="body1">
View All
</Typography>
</div>
<WaitForData {...versions}>
<WorkflowVersionsTable
{...versions}
isFetching={isLoadingState(versions.state)}
/>
</WaitForData>
</>
);
};
6 changes: 5 additions & 1 deletion src/components/Entities/constants.ts
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ export interface EntitySectionsFlags {
executions?: boolean;
launch?: boolean;
schedules?: boolean;
versions?: boolean;
}

export const entitySections: { [k in ResourceType]: EntitySectionsFlags } = {
Expand All @@ -49,6 +50,9 @@ export const entitySections: { [k in ResourceType]: EntitySectionsFlags } = {
description: true,
executions: true,
launch: true,
schedules: true
schedules: true,
versions: true
}
};

export const WorkflowVersionsTablePageSize = 5;
66 changes: 66 additions & 0 deletions src/components/Executions/Tables/WorkflowVersionRow.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
import { makeStyles, Theme } from '@material-ui/core';
import classnames from 'classnames';
import * as React from 'react';
import { ListRowProps } from 'react-virtualized';
import { Workflow } from 'models/Workflow/types';
import { useExecutionTableStyles } from './styles';
import {
WorkflowExecutionsTableState,
WorkflowVersionColumnDefinition
} from './types';

const useStyles = makeStyles((theme: Theme) => ({
row: {
paddingLeft: theme.spacing(2)
}
}));

export interface WorkflowVersionRowProps extends Partial<ListRowProps> {
columns: WorkflowVersionColumnDefinition[];
workflow: Workflow;
state: WorkflowExecutionsTableState;
}

/**
* Renders a single `Workflow` record as a row. Designed to be used as a child
* of `WorkflowVersionsTable`.
* @param columns
* @param workflow
* @param state
* @param style
* @constructor
*/
export const WorkflowVersionRow: React.FC<WorkflowVersionRowProps> = ({
columns,
workflow,
state,
style
}) => {
const tableStyles = useExecutionTableStyles();
const styles = useStyles();

return (
<div
className={classnames(
tableStyles.row,
styles.row,
tableStyles.borderBottom
)}
style={style}
>
<div className={tableStyles.rowColumns}>
{columns.map(({ className, key: columnKey, cellRenderer }) => (
<div
key={columnKey}
className={classnames(tableStyles.rowColumn, className)}
>
{cellRenderer({
workflow,
state
})}
</div>
))}
</div>
</div>
);
};
63 changes: 63 additions & 0 deletions src/components/Executions/Tables/WorkflowVersionsTable.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
import * as classnames from 'classnames';
import { noWorkflowVersionsFoundString } from 'common/constants';
import { useCommonStyles } from 'components/common/styles';
import { ListProps } from 'components/common/types';
import { DataList, DataListRef } from 'components/Tables/DataList';
import { Workflow } from 'models/Workflow/types';
import * as React from 'react';
import { ListRowRenderer } from 'react-virtualized';
import { ExecutionsTableHeader } from './ExecutionsTableHeader';
import { useExecutionTableStyles } from './styles';
import { useWorkflowExecutionsTableState } from './useWorkflowExecutionTableState';
import { useWorkflowVersionsTableColumns } from './useWorkflowVersionsTableColumns';
import { WorkflowVersionRow } from './WorkflowVersionRow';

/**
* Renders a table of WorkflowVersion records.
* @param props
* @constructor
*/
export const WorkflowVersionsTable: React.FC<ListProps<Workflow>> = props => {
const { value: workflows } = props;
const state = useWorkflowExecutionsTableState();
const commonStyles = useCommonStyles();
const tableStyles = useExecutionTableStyles();
const listRef = React.useRef<DataListRef>(null);

const columns = useWorkflowVersionsTableColumns();

const retry = () => props.fetch();

// Custom renderer to allow us to append error content to workflow versions which
// are in a failed state
const rowRenderer: ListRowRenderer = rowProps => {
const workflow = workflows[rowProps.index];
return (
<WorkflowVersionRow
{...rowProps}
columns={columns}
workflow={workflow}
state={state}
/>
);
};

return (
<div
className={classnames(
tableStyles.tableContainer,
commonStyles.flexFill
)}
>
<ExecutionsTableHeader columns={columns} />
<DataList
{...props}
onRetry={retry}
noRowsContent={noWorkflowVersionsFoundString}
moreItemsAvailable={false}
ref={listRef}
rowContentRenderer={rowRenderer}
/>
</div>
);
};
7 changes: 7 additions & 0 deletions src/components/Executions/Tables/constants.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,3 +21,10 @@ export const titleStrings = {
expandRow: 'Expand row',
groupName: 'Group name'
};

export const workflowVersionsTableColumnWidths = {
name: 380,
release: 150,
lastRun: 175,
createdAt: 260
};
23 changes: 22 additions & 1 deletion src/components/Executions/Tables/styles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@ import {
} from 'components/Theme/constants';
import {
nodeExecutionsTableColumnWidths,
workflowExecutionsTableColumnWidths
workflowExecutionsTableColumnWidths,
workflowVersionsTableColumnWidths
} from './constants';

export const selectedClassName = 'selected';
Expand Down Expand Up @@ -188,3 +189,23 @@ export const useWorkflowExecutionsColumnStyles = makeStyles((theme: Theme) => ({
textAlign: 'left'
}
}));

/** Style overrides specific to columns in `WorkflowVersionsTable`. */
export const useWorkflowVersionsColumnStyles = makeStyles((theme: Theme) => ({
columnName: {
flexBasis: workflowVersionsTableColumnWidths.name,
whiteSpace: 'normal'
},
columnRelease: {
flexBasis: workflowVersionsTableColumnWidths.release
},
columnCreatedAt: {
flexBasis: workflowVersionsTableColumnWidths.createdAt
},
columnLastRun: {
flexBasis: workflowVersionsTableColumnWidths.lastRun
},
columnRecentRun: {
flexGrow: 1
}
}));
10 changes: 10 additions & 0 deletions src/components/Executions/Tables/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import {
NodeExecution,
NodeExecutionIdentifier
} from 'models/Execution/types';
import { Workflow } from 'models/Workflow/types';

export interface WorkflowExecutionsTableState {
selectedIOExecution: Execution | null;
Expand Down Expand Up @@ -37,3 +38,12 @@ export interface WorkflowExecutionCellRendererData {
export type WorkflowExecutionColumnDefinition = ColumnDefinition<
WorkflowExecutionCellRendererData
>;

export interface WorkflowVersionCellRendererData {
workflow: Workflow;
state: WorkflowExecutionsTableState;
}

export type WorkflowVersionColumnDefinition = ColumnDefinition<
WorkflowVersionCellRendererData
>;
Loading

0 comments on commit 6fff87e

Please sign in to comment.