Workflow versions table v2 (flyteorg#200)

* feat: add workflow versions table Signed-off-by: csirius <[email protected]> * feat: workflow version details page Signed-off-by: csirius <[email protected]> * feat: add workflow versions data table v2 Signed-off-by: csirius <[email protected]> * fix: remove duplicated styling Signed-off-by: csirius <[email protected]>
eapolinario · Sep 16, 2021 · a890e72 · a890e72
1 parent 507a904
commit a890e72
Show file tree

Hide file tree

Showing 6 changed files with 306 additions and 60 deletions.
diff --git a/src/components/Entities/EntityDetails.tsx b/src/components/Entities/EntityDetails.tsx
@@ -34,7 +34,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     versionsContainer: {
         display: 'flex',
         flexDirection: 'column',
-        height: theme.spacing(45)
+        height: theme.spacing(53)
     },
     versionView: {
         flex: '1 1 auto'

diff --git a/src/components/Executions/Tables/WorkflowVersionRow.tsx b/src/components/Executions/Tables/WorkflowVersionRow.tsx
@@ -1,19 +1,26 @@
-import { makeStyles, Theme } from '@material-ui/core';
+import { makeStyles, TableCell, Theme } from '@material-ui/core';
 import Radio from '@material-ui/core/Radio';
 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 {
+    useExecutionTableStyles,
+    useWorkflowVersionsColumnStyles
+} from './styles';
 import {
     WorkflowExecutionsTableState,
     WorkflowVersionColumnDefinition
 } from './types';
+import TableRow from '@material-ui/core/TableRow';
 
 const useStyles = makeStyles((theme: Theme) => ({
     row: {
-        paddingLeft: theme.spacing(2),
-        cursor: 'pointer'
+        cursor: 'pointer',
+        height: theme.spacing(8)
+    },
+    cell: {
+        padding: theme.spacing(1)
     }
 }));
 
@@ -33,6 +40,9 @@ export interface WorkflowVersionRowProps extends Partial<ListRowProps> {
  * @param workflow
  * @param state
  * @param style
+ * @param onClick
+ * @param versionView
+ * @param isChecked
  * @constructor
  */
 export const WorkflowVersionRow: React.FC<WorkflowVersionRowProps> = ({
@@ -44,33 +54,39 @@ export const WorkflowVersionRow: React.FC<WorkflowVersionRowProps> = ({
     versionView = false,
     isChecked = false
 }) => {
-    const tableStyles = useExecutionTableStyles();
+    const versionTableStyles = useWorkflowVersionsColumnStyles();
     const styles = useStyles();
 
     return (
-        <div
-            className={classnames(
-                tableStyles.row,
-                styles.row,
-                tableStyles.borderBottom
-            )}
+        <TableRow
+            className={classnames(styles.row)}
             style={style}
             onClick={onClick}
         >
-            <div className={tableStyles.rowColumns}>
-                {versionView && <Radio checked={isChecked} />}
-                {columns.map(({ className, key: columnKey, cellRenderer }) => (
-                    <div
-                        key={columnKey}
-                        className={classnames(tableStyles.rowColumn, className)}
-                    >
-                        {cellRenderer({
-                            workflow,
-                            state
-                        })}
-                    </div>
-                ))}
-            </div>
-        </div>
+            {versionView && (
+                <TableCell
+                    classes={{
+                        root: styles.cell
+                    }}
+                    className={versionTableStyles.columnRadioButton}
+                >
+                    <Radio checked={isChecked} />
+                </TableCell>
+            )}
+            {columns.map(({ className, key: columnKey, cellRenderer }) => (
+                <TableCell
+                    key={columnKey}
+                    classes={{
+                        root: styles.cell
+                    }}
+                    className={classnames(className)}
+                >
+                    {cellRenderer({
+                        workflow,
+                        state
+                    })}
+                </TableCell>
+            ))}
+        </TableRow>
     );
 };
diff --git a/src/components/Executions/Tables/WorkflowVersionsTable.tsx b/src/components/Executions/Tables/WorkflowVersionsTable.tsx
@@ -2,14 +2,12 @@ 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 PaginatedDataList from 'components/Tables/PaginatedDataList';
 import { Workflow } from 'models/Workflow/types';
 import { Identifier } from 'models/Common/types';
 import * as React from 'react';
 import { useParams } from 'react-router';
 import { history } from 'routes/history';
-import { ListRowRenderer } from 'react-virtualized';
-import { ExecutionsTableHeader } from './ExecutionsTableHeader';
 import { useExecutionTableStyles } from './styles';
 import { useWorkflowExecutionsTableState } from './useWorkflowExecutionTableState';
 import { useWorkflowVersionsTableColumns } from './useWorkflowVersionsTableColumns';
@@ -34,7 +32,6 @@ export const WorkflowVersionsTable: React.FC<WorkflowVersionsTableProps> = props
     const state = useWorkflowExecutionsTableState();
     const commonStyles = useCommonStyles();
     const tableStyles = useExecutionTableStyles();
-    const listRef = React.useRef<DataListRef>(null);
     const { workflowVersion } = useParams<WorkflowVersionRouteParams>();
 
     const columns = useWorkflowVersionsTableColumns();
@@ -55,22 +52,16 @@ export const WorkflowVersionsTable: React.FC<WorkflowVersionsTableProps> = props
         []
     );
 
-    // 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}
-                onClick={versionView ? handleClickRow(workflow.id) : undefined}
-                versionView={versionView}
-                isChecked={workflowVersion === workflow.id.version}
-            />
-        );
-    };
+    const rowRenderer = (row: Workflow) => (
+        <WorkflowVersionRow
+            columns={columns}
+            workflow={row}
+            state={state}
+            versionView={versionView}
+            onClick={versionView ? handleClickRow(row.id) : undefined}
+            isChecked={workflowVersion === row.id.version}
+        />
+    );
 
     return (
         <div
@@ -79,17 +70,13 @@ export const WorkflowVersionsTable: React.FC<WorkflowVersionsTableProps> = props
                 commonStyles.flexFill
             )}
         >
-            <ExecutionsTableHeader
-                versionView={versionView}
+            <PaginatedDataList
                 columns={columns}
-            />
-            <DataList
-                {...props}
-                onRetry={retry}
-                noRowsContent={noWorkflowVersionsFoundString}
-                moreItemsAvailable={false}
-                ref={listRef}
-                rowContentRenderer={rowRenderer}
+                data={workflows}
+                rowRenderer={rowRenderer}
+                totalRows={workflows.length}
+                showRadioButton={versionView}
+                noDataString={noWorkflowVersionsFoundString}
             />
         </div>
     );

diff --git a/src/components/Executions/Tables/constants.ts b/src/components/Executions/Tables/constants.ts
@@ -23,6 +23,7 @@ export const titleStrings = {
 };
 
 export const workflowVersionsTableColumnWidths = {
+    radio: 40,
     name: 380,
     release: 150,
     lastRun: 175,

diff --git a/src/components/Executions/Tables/styles.ts b/src/components/Executions/Tables/styles.ts
@@ -110,8 +110,8 @@ export const useExecutionTableStyles = makeStyles((theme: Theme) => ({
         flexShrink: 0,
         marginRight: theme.spacing(1),
         minWidth: 0,
-        paddingBottom: theme.spacing(2),
-        paddingTop: theme.spacing(2),
+        paddingBottom: theme.spacing(1),
+        paddingTop: theme.spacing(1),
         textOverflow: 'ellipsis',
         whiteSpace: 'nowrap'
     },
@@ -195,9 +195,13 @@ export const useWorkflowExecutionsColumnStyles = makeStyles((theme: Theme) => ({
 
 /** Style overrides specific to columns in `WorkflowVersionsTable`. */
 export const useWorkflowVersionsColumnStyles = makeStyles((theme: Theme) => ({
+    columnRadioButton: {
+        width: workflowVersionsTableColumnWidths.radio
+    },
     columnName: {
         flexBasis: workflowVersionsTableColumnWidths.name,
-        whiteSpace: 'normal'
+        whiteSpace: 'normal',
+        flexGrow: 1
     },
     columnRelease: {
         flexBasis: workflowVersionsTableColumnWidths.release