feat: add workflow versions table (#193)

Signed-off-by: csirius <davidtruong.dev@gmail.com>

src/common/constants.ts

@@ -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 {

src/components/Entities/EntityDetails.tsx

@@ -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: {
@@ -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)
@@ -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} />

src/components/Entities/EntityVersions.tsx

@@ -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>
+        </>
+    );
+};

src/components/Entities/constants.ts

@@ -33,6 +33,7 @@ export interface EntitySectionsFlags {
     executions?: boolean;
     launch?: boolean;
     schedules?: boolean;
+    versions?: boolean;
 }
 
 export const entitySections: { [k in ResourceType]: EntitySectionsFlags } = {
@@ -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;

src/components/Executions/Tables/WorkflowVersionRow.tsx

@@ -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>
+    );
+};

src/components/Executions/Tables/WorkflowVersionsTable.tsx

@@ -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>
+    );
+};

src/components/Executions/Tables/constants.ts

@@ -21,3 +21,10 @@ export const titleStrings = {
     expandRow: 'Expand row',
     groupName: 'Group name'
 };
+
+export const workflowVersionsTableColumnWidths = {
+    name: 380,
+    release: 150,
+    lastRun: 175,
+    createdAt: 260
+};

src/components/Executions/Tables/styles.ts

@@ -10,7 +10,8 @@ import {
 } from 'components/Theme/constants';
 import {
     nodeExecutionsTableColumnWidths,
-    workflowExecutionsTableColumnWidths
+    workflowExecutionsTableColumnWidths,
+    workflowVersionsTableColumnWidths
 } from './constants';
 
 export const selectedClassName = 'selected';
@@ -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
+    }
+}));

src/components/Executions/Tables/types.ts

@@ -3,6 +3,7 @@ import {
     NodeExecution,
     NodeExecutionIdentifier
 } from 'models/Execution/types';
+import { Workflow } from 'models/Workflow/types';
 
 export interface WorkflowExecutionsTableState {
     selectedIOExecution: Execution | null;
@@ -37,3 +38,12 @@ export interface WorkflowExecutionCellRendererData {
 export type WorkflowExecutionColumnDefinition = ColumnDefinition<
     WorkflowExecutionCellRendererData
 >;
+
+export interface WorkflowVersionCellRendererData {
+    workflow: Workflow;
+    state: WorkflowExecutionsTableState;
+}
+
+export type WorkflowVersionColumnDefinition = ColumnDefinition<
+    WorkflowVersionCellRendererData
+>;