From 9fe5bdbda0b5e321be57850aef9a0dd49d57ef57 Mon Sep 17 00:00:00 2001 From: Nastya Rusina Date: Wed, 2 Feb 2022 11:19:56 -0800 Subject: [PATCH] chore: pr feedback Signed-off-by: Nastya Rusina --- src/components/Entities/EntityExecutions.tsx | 3 ++- src/components/Entities/EntityExecutionsBarChart.tsx | 10 +++++----- .../Executions/Tables/WorkflowExecutionTable/styles.ts | 4 ++-- src/components/Executions/Tables/constants.ts | 2 +- src/components/Project/ProjectExecutions.tsx | 5 +++-- 5 files changed, 13 insertions(+), 11 deletions(-) diff --git a/src/components/Entities/EntityExecutions.tsx b/src/components/Entities/EntityExecutions.tsx index 7f1271d1b..d8e7fc824 100644 --- a/src/components/Entities/EntityExecutions.tsx +++ b/src/components/Entities/EntityExecutions.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import { Typography } from '@material-ui/core'; import { makeStyles, Theme } from '@material-ui/core/styles'; import { contentMarginGridUnits } from 'common/layout'; +import { fetchStates } from 'components/hooks/types'; import { WaitForData } from 'components/common/WaitForData'; import { ExecutionFilters } from 'components/Executions/ExecutionFilters'; import { useExecutionShowArchivedState } from 'components/Executions/filters/useExecutionArchiveState'; @@ -74,7 +75,7 @@ export const EntityExecutions: React.FC = ({ /** Don't render component until finish fetching user profile */ const lastIndex = filtersState.filters.length - 1; - if (filtersState.filters[lastIndex].status !== 'LOADED') { + if (filtersState.filters[lastIndex].status !== fetchStates.LOADED) { return null; } diff --git a/src/components/Entities/EntityExecutionsBarChart.tsx b/src/components/Entities/EntityExecutionsBarChart.tsx index 9d6a815f0..d12cda2d9 100644 --- a/src/components/Entities/EntityExecutionsBarChart.tsx +++ b/src/components/Entities/EntityExecutionsBarChart.tsx @@ -3,6 +3,7 @@ import Typography from '@material-ui/core/Typography'; import { makeStyles, Theme } from '@material-ui/core/styles'; import { formatDateUTC, millisecondsToHMS } from 'common/formatters'; import { timestampToDate } from 'common/utils'; +import { fetchStates } from 'components/hooks/types'; import { BarChart } from 'components/common/BarChart'; import { WaitForData } from 'components/common/WaitForData'; import { useWorkflowExecutionFiltersState } from 'components/Executions/filters/useExecutionFiltersState'; @@ -53,9 +54,9 @@ export const getExecutionTimeData = ( Running time: {millisecondsToHMS(duration)} Started at:{' '} - {execution.closure.startedAt != null && + {execution.closure.startedAt && formatDateUTC( - timestampToDate(execution.closure.startedAt!) + timestampToDate(execution.closure.startedAt) )} @@ -121,15 +122,14 @@ export const EntityExecutionsBarChart: React.FC = item => { if (item.metadata) { onToggle(item.metadata.name); - // const executionId = item.metadata as WorkflowExecutionIdentifier; - // history.push(Routes.ExecutionDetails.makeUrl(executionId)); } }, [onToggle] ); /** Don't render component until finish fetching user profile */ - if (filtersState.filters[4].status !== 'LOADED') { + const lastIndex = filtersState.filters.length - 1; + if (filtersState.filters[lastIndex].status !== fetchStates.LOADED) { return null; } diff --git a/src/components/Executions/Tables/WorkflowExecutionTable/styles.ts b/src/components/Executions/Tables/WorkflowExecutionTable/styles.ts index 08950e37d..3edbaadd7 100644 --- a/src/components/Executions/Tables/WorkflowExecutionTable/styles.ts +++ b/src/components/Executions/Tables/WorkflowExecutionTable/styles.ts @@ -6,6 +6,7 @@ export const useStyles = makeStyles((theme: Theme) => ({ paddingLeft: theme.spacing(1) }, columnName: { + flexGrow: 1, flexBasis: workflowExecutionsTableColumnWidths.name, whiteSpace: 'normal' }, @@ -23,11 +24,10 @@ export const useStyles = makeStyles((theme: Theme) => ({ textAlign: 'right' }, columnActions: { - flexGrow: 1, flexBasis: workflowExecutionsTableColumnWidths.actions, marginLeft: theme.spacing(2), marginRight: theme.spacing(2), - textAlign: 'left' + textAlign: 'right' }, rightMargin: { marginRight: theme.spacing(1) diff --git a/src/components/Executions/Tables/constants.ts b/src/components/Executions/Tables/constants.ts index c06d6d136..01f7e4a2b 100644 --- a/src/components/Executions/Tables/constants.ts +++ b/src/components/Executions/Tables/constants.ts @@ -1,6 +1,6 @@ export const workflowExecutionsTableColumnWidths = { duration: 100, - actions: 140, + actions: 130, lastRun: 130, name: 360, phase: 120, diff --git a/src/components/Project/ProjectExecutions.tsx b/src/components/Project/ProjectExecutions.tsx index 7bd1cbe1c..cd6d34cb6 100644 --- a/src/components/Project/ProjectExecutions.tsx +++ b/src/components/Project/ProjectExecutions.tsx @@ -1,6 +1,7 @@ import Typography from '@material-ui/core/Typography'; import { makeStyles, Theme } from '@material-ui/core/styles'; import { getCacheKey } from 'components/Cache/utils'; +import { fetchStates } from 'components/hooks/types'; import { ErrorBoundary } from 'components/common/ErrorBoundary'; import { LargeLoadingSpinner } from 'components/common/LoadingSpinner'; import { DataError } from 'components/Errors/DataError'; @@ -141,8 +142,8 @@ export const ProjectExecutions: React.FC = ({ ); /** Don't render component until finish fetching user profile */ - const filterLength = filtersState.filters.length; - if (filtersState.filters[filterLength - 1].status === 'LOADED') { + const lastIndex = filtersState.filters.length - 1; + if (filtersState.filters[lastIndex].status === fetchStates.LOADED) { return (