feat: update node list view and add executions bar chart

Signed-off-by: csirius <[email protected]>

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,24 @@ 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 readableName = isSelected ? (
             <Typography
                 variant="body1"
                 className={styles.selectedExecutionName}
             >
-                {displayId || nodeId}
+                {displayName}
             </Typography>
         ) : (
             <SelectNodeExecutionLink
                 className={commonStyles.primaryLink}
                 execution={execution}
-                linkText={displayId || nodeId}
+                linkText={displayName || ''}
                 state={state}
             />
         );
@@ -108,7 +104,23 @@ export function generateColumns(
             cellRenderer: props => <NodeExecutionName {...props} />,
             className: styles.columnName,
             key: 'name',
-            label: 'node'
+            label: 'task name'
+        },
+        {
+            cellRenderer: props => (
+                <Typography color="textSecondary">
+                    {props.execution.id.nodeId}
+                </Typography>
+            ),
+            className: styles.columnNodeId,
+            key: 'nodeId',
+            label: 'node id'
+        },
+        {
+            cellRenderer: props => <NodeExecutionDisplayType {...props} />,
+            className: styles.columnType,
+            key: 'type',
+            label: 'type'
         },
         {
             cellRenderer: ({
@@ -133,12 +145,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/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',