From 1e67bf15ecbfe996661e9486ace91da1f0ebbc2e Mon Sep 17 00:00:00 2001 From: Dan Wilson Date: Wed, 30 Aug 2023 17:49:50 +0100 Subject: [PATCH 1/2] execution list WIP --- web/src/components/Console/Console.tsx | 11 ++-- .../ConsoleLogs/ConsoleLogs.module.scss | 2 + .../ConsoleStep/ConsoleStep.module.scss | 5 ++ .../ConsoleStep/ConsoleStep.module.scss.d.ts | 1 + .../components/ConsoleStep/ConsoleStep.tsx | 2 +- web/src/framework/strings/stringTypes.ts | 2 + web/src/i18n/strings.en.yaml | 4 +- web/src/pages/Execution/Execution.tsx | 8 ++- .../ExecutionList/ExecutionList.module.scss | 49 +++++++++------- .../ExecutionList.module.scss.d.ts | 7 ++- web/src/pages/ExecutionList/ExecutionList.tsx | 58 ++++++++++++++----- web/src/utils/Utils.ts | 7 ++- 12 files changed, 108 insertions(+), 48 deletions(-) diff --git a/web/src/components/Console/Console.tsx b/web/src/components/Console/Console.tsx index cf332a4d8..099e566fd 100644 --- a/web/src/components/Console/Console.tsx +++ b/web/src/components/Console/Console.tsx @@ -6,6 +6,7 @@ import { useGetSpaceParam } from 'hooks/useGetSpaceParam' import type { CODEProps } from 'RouteDefinitions' import type { TypesStage } from 'services/code' import ConsoleStep from 'components/ConsoleStep/ConsoleStep' +import { timeDistance } from 'utils/Utils' import css from './Console.module.scss' interface ConsoleProps { @@ -23,10 +24,12 @@ const Console: FC = ({ stage }) => { {stage?.name} - - {/* this needs fixed */} - Success in 5 mins - + {stage?.started && stage?.stopped && ( + + {/* this needs fixed */} + {timeDistance(stage?.started, stage?.stopped)} + + )} diff --git a/web/src/components/ConsoleLogs/ConsoleLogs.module.scss b/web/src/components/ConsoleLogs/ConsoleLogs.module.scss index e327875be..f5aa335fa 100644 --- a/web/src/components/ConsoleLogs/ConsoleLogs.module.scss +++ b/web/src/components/ConsoleLogs/ConsoleLogs.module.scss @@ -6,9 +6,11 @@ width: 1.5rem; color: #999; margin-right: 1rem; + font-family: 'Roboto Mono' !important; } .log { color: white !important; margin-bottom: 1rem; + font-family: 'Roboto Mono' !important; } diff --git a/web/src/components/ConsoleStep/ConsoleStep.module.scss b/web/src/components/ConsoleStep/ConsoleStep.module.scss index b37bc0c2e..966563a30 100644 --- a/web/src/components/ConsoleStep/ConsoleStep.module.scss +++ b/web/src/components/ConsoleStep/ConsoleStep.module.scss @@ -3,3 +3,8 @@ align-items: center; cursor: pointer; } + +.loading { + margin-left: 2.3rem !important; + margin-top: 1.5rem !important; +} diff --git a/web/src/components/ConsoleStep/ConsoleStep.module.scss.d.ts b/web/src/components/ConsoleStep/ConsoleStep.module.scss.d.ts index 95262a110..7f68607e5 100644 --- a/web/src/components/ConsoleStep/ConsoleStep.module.scss.d.ts +++ b/web/src/components/ConsoleStep/ConsoleStep.module.scss.d.ts @@ -2,5 +2,6 @@ // this is an auto-generated file declare const styles: { readonly stepLayout: string + readonly loading: string } export default styles diff --git a/web/src/components/ConsoleStep/ConsoleStep.tsx b/web/src/components/ConsoleStep/ConsoleStep.tsx index 76f4787ba..851778633 100644 --- a/web/src/components/ConsoleStep/ConsoleStep.tsx +++ b/web/src/components/ConsoleStep/ConsoleStep.tsx @@ -50,7 +50,7 @@ const ConsoleStep: FC = ({ step, stageNumber, spaceName, pipel {isOpened ? ( loading ? ( -
Loading...
+
Loading...
) : error ? (
Error: {error}
) : data ? ( diff --git a/web/src/framework/strings/stringTypes.ts b/web/src/framework/strings/stringTypes.ts index 4854c23ae..b8dd3c197 100644 --- a/web/src/framework/strings/stringTypes.ts +++ b/web/src/framework/strings/stringTypes.ts @@ -169,9 +169,11 @@ export interface StringsMap { enterUser: string error: string error404Text: string + 'executions.description': string 'executions.name': string 'executions.newExecutionButton': string 'executions.noData': string + 'executions.time': string executor: string existingAccount: string expiration: string diff --git a/web/src/i18n/strings.en.yaml b/web/src/i18n/strings.en.yaml index 1d5dd1418..17e5effb5 100644 --- a/web/src/i18n/strings.en.yaml +++ b/web/src/i18n/strings.en.yaml @@ -626,8 +626,10 @@ pipelines: name: Pipeline Name executions: noData: There are no executions :( - newExecutionButton: New Execution + newExecutionButton: Run Pipeline name: Execution Name + description: Description + time: Time selectRange: Shift-click to select a range allCommits: All Commits secrets: diff --git a/web/src/pages/Execution/Execution.tsx b/web/src/pages/Execution/Execution.tsx index dfa7d0d44..b8743f384 100644 --- a/web/src/pages/Execution/Execution.tsx +++ b/web/src/pages/Execution/Execution.tsx @@ -29,17 +29,19 @@ const Execution = () => { path: `/api/v1/pipelines/${space}/${pipeline}/+/executions/${executionNum}` }) - const [selectedStage, setSelectedStage] = useState(null) + const [selectedStage, setSelectedStage] = useState(1) return ( - + +
hello
+ !execution, + when: () => !execution && !loading, image: noExecutionImage, message: getString('executions.noData') // button: NewExecutionButton diff --git a/web/src/pages/ExecutionList/ExecutionList.module.scss b/web/src/pages/ExecutionList/ExecutionList.module.scss index 39284e82a..678e0a41b 100644 --- a/web/src/pages/ExecutionList/ExecutionList.module.scss +++ b/web/src/pages/ExecutionList/ExecutionList.module.scss @@ -59,28 +59,37 @@ padding: 6px 14px; } - .repoName { - font-weight: 600 !important; - font-size: 16px !important; - line-height: 24px !important; - color: var(--grey-800); - - .repoScope { - color: var(--grey-400); - padding: 2px 6px; - font-size: var(--font-size-xsmall) !important; - border-radius: 4px; - border: 1px solid var(--grey-200); - display: inline-block; - margin-left: var(--spacing-medium); - text-transform: uppercase; - line-height: 16px; - } + .number { + color: var(--grey-400) !important; + font-size: 0.875rem !important; + font-weight: 500 !important; } .desc { - color: var(--grey-500); - font-size: var(--font-size-small); - padding-top: var(--spacing-xsmall) !important; + color: var(--grey-800) !important; + font-size: 0.875rem !important; + font-weight: 600 !important; + } + + .author { + color: var(--grey500) !important; + font-size: 0.6875rem !important; + font-weight: 600 !important; + } + + .hash { + color: var(--primary-7) !important; + font-family: Roboto Mono !important; + font-size: 0.75rem; + font-weight: 500; + } + + .triggerLayout { + align-items: center !important; + } + + .divider { + color: var(--grey-300) !important; + font-size: 0.25rem !important; } } diff --git a/web/src/pages/ExecutionList/ExecutionList.module.scss.d.ts b/web/src/pages/ExecutionList/ExecutionList.module.scss.d.ts index bd85c3909..2f7763f6a 100644 --- a/web/src/pages/ExecutionList/ExecutionList.module.scss.d.ts +++ b/web/src/pages/ExecutionList/ExecutionList.module.scss.d.ts @@ -10,8 +10,11 @@ declare const styles: { readonly nameContainer: string readonly name: string readonly pinned: string - readonly repoName: string - readonly repoScope: string + readonly number: string readonly desc: string + readonly author: string + readonly hash: string + readonly triggerLayout: string + readonly divider: string } export default styles diff --git a/web/src/pages/ExecutionList/ExecutionList.tsx b/web/src/pages/ExecutionList/ExecutionList.tsx index b36455047..3333f3d08 100644 --- a/web/src/pages/ExecutionList/ExecutionList.tsx +++ b/web/src/pages/ExecutionList/ExecutionList.tsx @@ -1,5 +1,6 @@ import React, { useMemo } from 'react' import { + Avatar, Button, ButtonVariation, Container, @@ -8,18 +9,21 @@ import { PageBody, PageHeader, TableV2 as Table, - Text + Text, + Utils } from '@harnessio/uicore' import { Color } from '@harnessio/design-system' import cx from 'classnames' import type { CellProps, Column } from 'react-table' import { useHistory, useParams } from 'react-router-dom' import { useGet } from 'restful-react' +import { Icon } from '@harnessio/icons' +import { Timer, Calendar } from 'iconoir-react' import { useStrings } from 'framework/strings' import { LoadingSpinner } from 'components/LoadingSpinner/LoadingSpinner' import { useAppContext } from 'AppContext' import { NoResultCard } from 'components/NoResultCard/NoResultCard' -import { LIST_FETCHING_LIMIT, PageBrowserProps, formatDate, getErrorMessage, voidFn } from 'utils/Utils' +import { LIST_FETCHING_LIMIT, PageBrowserProps, getErrorMessage, timeDistance, voidFn } from 'utils/Utils' import type { CODEProps } from 'RouteDefinitions' import type { TypesExecution } from 'services/code' import { useGetSpaceParam } from 'hooks/useGetSpaceParam' @@ -55,38 +59,60 @@ const ExecutionList = () => { text={getString('executions.newExecutionButton')} variation={ButtonVariation.PRIMARY} disabled={true} - icon="plus"> + icon="play-outline"> ) const columns: Column[] = useMemo( () => [ { - Header: getString('executions.name'), + Header: getString('executions.description'), width: 'calc(100% - 180px)', Cell: ({ row }: CellProps) => { const record = row.original return ( - - - {record.number} - {record.status && {record.status}} - - + + + {/* TODO this icon need to depend on the status */} + + {`#${record.number}.`} + {record.title} + + + + {/* TODO need logic here for different trigger types */} + {`${record.author_name} triggered manually`} + {`|`} + {/* TODO Will need to replace this with commit action - wont match Yifan designs */} + + {record.after} + + + ) } }, { - Header: getString('repos.updated'), + Header: getString('executions.time'), width: '180px', Cell: ({ row }: CellProps) => { + const record = row.original return ( - - - {formatDate(row.original.updated as number)} - - + + + + + {timeDistance(record.started, record.finished)} + + + + + + {timeDistance(record.finished, Date.now())} ago + + + ) }, disableSortBy: true diff --git a/web/src/utils/Utils.ts b/web/src/utils/Utils.ts index 043a37397..32b347243 100644 --- a/web/src/utils/Utils.ts +++ b/web/src/utils/Utils.ts @@ -111,12 +111,17 @@ export const timeDistance = (date1 = 0, date2 = 0) => { return '' } + const days = Math.floor(distance / (24 * 3600000)) // 24 hours * 60 minutes * 60 seconds * 1000 milliseconds + distance -= days * 24 * 3600000 const hours = Math.floor(distance / 3600000) distance -= hours * 3600000 const minutes = Math.floor(distance / 60000) distance -= minutes * 60000 const seconds = Math.floor(distance / 1000) - return `${hours ? hours + 'h ' : ''}${minutes ? minutes + 'm' : hours ? '0m' : ''} ${seconds}s` + + return `${days ? days + 'd ' : ''}${hours ? hours + 'h ' : ''}${ + minutes ? minutes + 'm' : hours || days ? '0m' : '' + } ${seconds}s` } const LOCALE = Intl.NumberFormat().resolvedOptions?.().locale || 'en-US' From 731c4a085ed274fc78e9cab0b9d403d958f1ed47 Mon Sep 17 00:00:00 2001 From: Dan Wilson Date: Wed, 30 Aug 2023 18:30:21 +0100 Subject: [PATCH 2/2] fix Calvin review comment --- web/src/components/ConsoleStep/ConsoleStep.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/web/src/components/ConsoleStep/ConsoleStep.tsx b/web/src/components/ConsoleStep/ConsoleStep.tsx index 851778633..337fc0c76 100644 --- a/web/src/components/ConsoleStep/ConsoleStep.tsx +++ b/web/src/components/ConsoleStep/ConsoleStep.tsx @@ -6,6 +6,7 @@ import { Text } from '@harnessio/uicore' import type { TypesStep } from 'services/code' import { timeDistance } from 'utils/Utils' import ConsoleLogs from 'components/ConsoleLogs/ConsoleLogs' +import { useStrings } from 'framework/strings' import css from './ConsoleStep.module.scss' interface ConsoleStepProps { @@ -17,6 +18,8 @@ interface ConsoleStepProps { } const ConsoleStep: FC = ({ step, stageNumber, spaceName, pipelineName, executionNumber }) => { + const { getString } = useStrings() + const [isOpened, setIsOpened] = React.useState(false) const { data, error, loading, refetch } = useGet({ @@ -50,7 +53,7 @@ const ConsoleStep: FC = ({ step, stageNumber, spaceName, pipel {isOpened ? ( loading ? ( -
Loading...
+
{getString('loading')}
) : error ? (
Error: {error}
) : data ? (