feat: update node list view and add executions bar chart

output.log

@@ -0,0 +1,3 @@
+yarn run v1.22.11
+$ NODE_ENV=test jest --config=jest.config.js --testPathPattern=src/components/Executions/Tables/test --verbose
+info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

src/components/Entities/EntityExecutionsBarChart.tsx

@@ -36,7 +36,10 @@ export interface EntityExecutionsBarChartProps {
     chartIds: string[];
 }
 
-const getExecutionTimeData = (executions: Execution[], fillSize = 100) => {
+export const getExecutionTimeData = (
+    executions: Execution[],
+    fillSize = 100
+) => {
     const newExecutions = [...executions].reverse().map(execution => {
         const duration = getWorkflowExecutionTimingMS(execution)?.duration || 1;
         return {
@@ -73,7 +76,7 @@ const getExecutionTimeData = (executions: Execution[], fillSize = 100) => {
         .concat(newExecutions);
 };
 
-const getStartExecutionTime = (executions: Execution[]) => {
+export const getStartExecutionTime = (executions: Execution[]) => {
     if (executions.length === 0) {
         return '';
     }

src/components/Executions/Tables/constants.ts

@@ -11,6 +11,7 @@ export const nodeExecutionsTableColumnWidths = {
     duration: 100,
     logs: 225,
     type: 144,
+    nodeId: 144,
     name: 380,
     phase: 150,
     startedAt: 200

src/components/Executions/Tables/nodeExecutionColumns.tsx

@@ -31,28 +31,25 @@ const NodeExecutionName: React.FC<NodeExecutionCellRendererData> = ({
     const detailsQuery = useNodeExecutionDetails(execution);
     const commonStyles = useCommonStyles();
     const styles = useColumnStyles();
-    const nodeId = execution.id.nodeId;
 
     const isSelected =
         state.selectedExecution != null &&
         isEqual(execution.id, state.selectedExecution);
 
-    const renderReadableName = ({
-        displayId,
-        displayName
-    }: NodeExecutionDetails) => {
+    const renderReadableName = ({ displayName }: NodeExecutionDetails) => {
+        const truncatedName = displayName?.split('.').pop() || '';
         const readableName = isSelected ? (
             <Typography
                 variant="body1"
                 className={styles.selectedExecutionName}
             >
-                {displayId || nodeId}
+                {truncatedName}
             </Typography>
         ) : (
             <SelectNodeExecutionLink
                 className={commonStyles.primaryLink}
                 execution={execution}
-                linkText={displayId || nodeId}
+                linkText={truncatedName || ''}
                 state={state}
             />
         );
@@ -75,12 +72,24 @@ const NodeExecutionName: React.FC<NodeExecutionCellRendererData> = ({
     );
 };
 
+const NodeExecutionDisplayId: React.FC<NodeExecutionCellRendererData> = ({
+    execution
+}) => {
+    const detailsQuery = useNodeExecutionDetails(execution);
+    const extractDisplayId = ({ displayId }: NodeExecutionDetails) =>
+        displayId || execution.id.nodeId;
+    return <WaitForQuery query={detailsQuery}>{extractDisplayId}</WaitForQuery>;
+};
+
 const NodeExecutionDisplayType: React.FC<NodeExecutionCellRendererData> = ({
     execution
 }) => {
     const detailsQuery = useNodeExecutionDetails(execution);
-    const extractDisplayType = ({ displayType }: NodeExecutionDetails) =>
-        displayType;
+    const extractDisplayType = ({ displayType }: NodeExecutionDetails) => (
+        <Typography color="textSecondary">
+            {displayType || execution.id.nodeId}
+        </Typography>
+    );
     return (
         <WaitForQuery query={detailsQuery}>{extractDisplayType}</WaitForQuery>
     );
@@ -108,7 +117,19 @@ export function generateColumns(
             cellRenderer: props => <NodeExecutionName {...props} />,
             className: styles.columnName,
             key: 'name',
-            label: 'node'
+            label: 'task name'
+        },
+        {
+            cellRenderer: props => <NodeExecutionDisplayId {...props} />,
+            className: styles.columnNodeId,
+            key: 'nodeId',
+            label: 'node id'
+        },
+        {
+            cellRenderer: props => <NodeExecutionDisplayType {...props} />,
+            className: styles.columnType,
+            key: 'type',
+            label: 'type'
         },
         {
             cellRenderer: ({
@@ -133,12 +154,6 @@ export function generateColumns(
             key: 'phase',
             label: 'status'
         },
-        {
-            cellRenderer: props => <NodeExecutionDisplayType {...props} />,
-            className: styles.columnType,
-            key: 'type',
-            label: 'type'
-        },
         {
             cellRenderer: ({ execution: { closure } }) => {
                 const { startedAt } = closure;

src/components/Executions/Tables/styles.ts

@@ -138,8 +138,12 @@ export const useColumnStyles = makeStyles((theme: Theme) => ({
             marginLeft: theme.spacing(nameColumnLeftMarginGridWidth)
         }
     },
+    columnNodeId: {
+        flexBasis: nodeExecutionsTableColumnWidths.nodeId
+    },
     columnType: {
-        flexBasis: nodeExecutionsTableColumnWidths.type
+        flexBasis: nodeExecutionsTableColumnWidths.type,
+        textTransform: 'capitalize'
     },
     columnStatus: {
         display: 'flex',

src/components/Executions/Tables/test/NodeExecutionsTable.test.tsx

@@ -63,9 +63,13 @@ describe('NodeExecutionsTable', () => {
     const shouldUpdateFn = (nodeExecutions: NodeExecution[]) =>
         nodeExecutions.some(ne => !nodeExecutionIsTerminal(ne));
 
-    const selectNode = async (container: HTMLElement, nodeId: string) => {
+    const selectNode = async (
+        container: HTMLElement,
+        truncatedName: string,
+        nodeId: string
+    ) => {
         const nodeNameAnchor = await waitFor(() =>
-            getByText(container, nodeId)
+            getByText(container, truncatedName)
         );
         fireEvent.click(nodeNameAnchor);
         // Wait for Details Panel to render and then for the nodeId header
@@ -500,10 +504,13 @@ describe('NodeExecutionsTable', () => {
         it('should render updated state if selected nodeExecution object changes', async () => {
             nodeExecution.closure.phase = NodeExecutionPhase.RUNNING;
             updateNodeExecutions([nodeExecution]);
+            const truncatedName =
+                fixture.tasks.python.id.name.split('.').pop() || '';
             // Render table, click first node
             const { container } = renderTable();
             const detailsPanel = await selectNode(
                 container,
+                truncatedName,
                 nodeExecution.id.nodeId
             );
             expect(getByText(detailsPanel, 'Running')).toBeInTheDocument();
@@ -535,8 +542,14 @@ describe('NodeExecutionsTable', () => {
                     dynamicTaskNameEl,
                     'listitem'
                 );
-                await expandParentNode(dynamicRowEl);
-                await selectNode(container, childNodeExecution.id.nodeId);
+                const parentNodeEl = await expandParentNode(dynamicRowEl);
+                const truncatedName =
+                    fixture.tasks.python.id.name.split('.').pop() || '';
+                await selectNode(
+                    parentNodeEl[0],
+                    truncatedName,
+                    childNodeExecution.id.nodeId
+                );
 
                 // Wait for Details Panel to render and then for the nodeId header
                 const detailsPanel = await waitFor(() =>

src/components/Project/ProjectExecutions.tsx

@@ -1,4 +1,5 @@
-import { makeStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles, Theme } from '@material-ui/core/styles';
 import { getCacheKey } from 'components/Cache/utils';
 import { ErrorBoundary } from 'components/common/ErrorBoundary';
 import { LargeLoadingSpinner } from 'components/common/LoadingSpinner';
@@ -13,12 +14,31 @@ import { Execution } from 'models/Execution/types';
 import * as React from 'react';
 import { useInfiniteQuery } from 'react-query';
 import { failedToLoadExecutionsString } from './constants';
+import { BarChart } from 'components/common/BarChart';
+import {
+    getExecutionTimeData,
+    getStartExecutionTime
+} from 'components/Entities/EntityExecutionsBarChart';
+import classNames from 'classnames';
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles((theme: Theme) => ({
     container: {
         display: 'flex',
         flex: '1 1 auto',
         flexDirection: 'column'
+    },
+    header: {
+        paddingBottom: theme.spacing(1),
+        paddingLeft: theme.spacing(1),
+        borderBottom: `1px solid ${theme.palette.divider}`
+    },
+    marginTop: {
+        marginTop: theme.spacing(2)
+    },
+    chartContainer: {
+        paddingLeft: theme.spacing(1),
+        paddingRight: theme.spacing(3),
+        paddingTop: theme.spacing(1)
     }
 }));
 export interface ProjectExecutionsProps {
@@ -99,6 +119,23 @@ export const ProjectExecutions: React.FC<ProjectExecutionsProps> = ({
     if (filtersState.filters[4].status === 'LOADED') {
         return (
             <div className={styles.container}>
+                <Typography
+                    className={classNames(styles.header, styles.marginTop)}
+                    variant="h6"
+                >
+                    Last 100 Executions in the Project
+                </Typography>
+                <div className={styles.chartContainer}>
+                    <BarChart
+                        chartIds={[]}
+                        data={getExecutionTimeData(executions)}
+                        startDate={getStartExecutionTime(executions)}
+                        onClickItem={() => {}}
+                    />
+                </div>
+                <Typography className={styles.header} variant="h6">
+                    All Executions in the Project
+                </Typography>
                 <ExecutionFilters {...filtersState} />
                 <ErrorBoundary>{content}</ErrorBoundary>
             </div>

src/components/common/BarChart.tsx

@@ -28,14 +28,14 @@ const useStyles = makeStyles((theme: Theme) => ({
         flex: 1,
         display: 'flex',
         flexDirection: 'column',
+        justifyContent: 'flex-end',
         alignItems: 'center',
         '&:last-child': {
             marginRight: 0
         }
     },
     itemBar: {
         borderRadius: 2,
-        flex: 1,
         marginRight: theme.spacing(0.25),
         minHeight: theme.spacing(0.75),
         cursor: 'pointer',