forked from akuity/kargo
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(ui): better display multiple freight in one stage node (akuity#2353)
Signed-off-by: Remington Breeze <remington@breeze.software>
- Loading branch information
Showing
14 changed files
with
287 additions
and
138 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| import { GitCommit } from '@ui/gen/v1alpha1/generated_pb'; | ||
|
|
||
| export const CommitInfo = ({ commit }: { commit: GitCommit }) => ( | ||
| <div className='grid grid-cols-2'> | ||
| <div>Repo:</div> | ||
| <div> | ||
| <a href={commit.repoURL}>{commit.repoURL}</a> | ||
| </div> | ||
| {commit.branch ? ( | ||
| <> | ||
| <div>Branch:</div> | ||
| <div>{commit.branch}</div> | ||
| </> | ||
| ) : commit.tag ? ( | ||
| <> | ||
| <div>Tag:</div> | ||
| <div>{commit.tag}</div> | ||
| </> | ||
| ) : null} | ||
| {commit.author && ( | ||
| <> | ||
| <div>Author:</div> | ||
| <div>{commit.author}</div> | ||
| </> | ||
| )} | ||
| {commit.message && ( | ||
| <> | ||
| <div>Message:</div> | ||
| <div>{commit.message}</div> | ||
| </> | ||
| )} | ||
| </div> | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
46 changes: 46 additions & 0 deletions
46
ui/src/features/project/pipelines/nodes/freight-indicators.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| import { Tooltip } from 'antd'; | ||
| import classNames from 'classnames'; | ||
| import { useContext } from 'react'; | ||
|
|
||
| import { ColorContext } from '@ui/context/colors'; | ||
| import { getAlias } from '@ui/features/common/utils'; | ||
| import { Freight } from '@ui/gen/v1alpha1/generated_pb'; | ||
|
|
||
| export const FreightIndicators = ({ | ||
| freight, | ||
| selectedFreight, | ||
| onClick | ||
| }: { | ||
| freight?: Freight[]; | ||
| selectedFreight: number; | ||
| onClick: (index: number) => void; | ||
| }) => { | ||
| const { warehouseColorMap } = useContext(ColorContext); | ||
|
|
||
| if (!freight || freight.length <= 1) { | ||
| return null; | ||
| } | ||
|
|
||
| return ( | ||
| <div className='flex gap-2 justify-center items-center py-1 absolute top-1'> | ||
| {freight.map((freight, idx) => ( | ||
| <Tooltip placement='right' title={getAlias(freight)} key={freight?.metadata?.name || idx}> | ||
| <div | ||
| className={classNames('rounded-full mb-2 opacity-50 hover:opacity-30', { | ||
| '!opacity-100': selectedFreight === idx | ||
| })} | ||
| style={{ | ||
| width: '10px', | ||
| height: '10px', | ||
| backgroundColor: warehouseColorMap[freight?.warehouse || ''] | ||
| }} | ||
| onClick={(e) => { | ||
| e.stopPropagation(); | ||
| onClick(idx); | ||
| }} | ||
| /> | ||
| </Tooltip> | ||
| ))} | ||
| </div> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,96 @@ | ||
| import { faDocker, faGitAlt } from '@fortawesome/free-brands-svg-icons'; | ||
| import { faAnchor } from '@fortawesome/free-solid-svg-icons'; | ||
| import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; | ||
| import { Tooltip } from 'antd'; | ||
| import { format, formatDistance } from 'date-fns'; | ||
| import { useEffect, useState } from 'react'; | ||
|
|
||
| import { CommitInfo } from '@ui/features/common/commit-info'; | ||
| import { Freight } from '@ui/gen/v1alpha1/generated_pb'; | ||
|
|
||
| import { getAlias } from '../../../common/utils'; | ||
|
|
||
| import style from './stage-node.module.less'; | ||
|
|
||
| export const FreightLabel = ({ freight }: { freight?: Freight }) => { | ||
| const [copied, setCopied] = useState<boolean>(false); | ||
|
|
||
| useEffect(() => { | ||
| if (copied) { | ||
| const timeout = setTimeout(() => setCopied(false), 1000); | ||
| return () => clearTimeout(timeout); | ||
| } | ||
| }, [copied]); | ||
|
|
||
| const id = freight?.metadata?.name?.substring(0, 7); | ||
| const alias = getAlias(freight); | ||
|
|
||
| const humanReadable = formatDistance( | ||
| freight?.metadata?.creationTimestamp?.toDate() || 0, | ||
| new Date(), | ||
| { | ||
| addSuffix: true | ||
| } | ||
| ); | ||
|
|
||
| return ( | ||
| <div | ||
| className='cursor-pointer font-semibold min-w-0 w-full' | ||
| onClick={(e) => { | ||
| if (alias || id) { | ||
| e.preventDefault(); | ||
| e.stopPropagation(); | ||
| navigator.clipboard.writeText(alias || id || ''); | ||
| setCopied(true); | ||
| } | ||
| }} | ||
| > | ||
| {alias || id ? ( | ||
| <> | ||
| <Tooltip | ||
| className='w-full font-mono' | ||
| style={{ padding: '0 3px' }} | ||
| title={`ID: ${id}`} | ||
| placement='right' | ||
| > | ||
| <div className='truncate'>{alias || id}</div> | ||
| </Tooltip> | ||
| {freight?.metadata?.creationTimestamp && ( | ||
| <Tooltip | ||
| title={format(freight?.metadata?.creationTimestamp.toDate(), 'MMM do yyyy HH:mm:ss')} | ||
| className={style.smallLabel} | ||
| placement='right' | ||
| > | ||
| Created {humanReadable} | ||
| </Tooltip> | ||
| )} | ||
| <div className='flex items-center gap-1 my-1 justify-center text-gray-500'> | ||
| {(freight?.images || []).map((image) => { | ||
| const key = `${image.repoURL}:${image?.tag}`; | ||
| return ( | ||
| <Tooltip key={key} title={key} placement='bottom'> | ||
| <FontAwesomeIcon icon={faDocker} /> | ||
| </Tooltip> | ||
| ); | ||
| })} | ||
| {(freight?.commits || []).map((commit) => ( | ||
| <Tooltip key={commit.id} title={<CommitInfo commit={commit} />} placement='bottom'> | ||
| <FontAwesomeIcon icon={faGitAlt} /> | ||
| </Tooltip> | ||
| ))} | ||
| {(freight?.charts || []).map((chart) => { | ||
| const key = chart.repoURL; | ||
| return ( | ||
| <Tooltip key={key} title={key} placement='bottom'> | ||
| <FontAwesomeIcon icon={faAnchor} /> | ||
| </Tooltip> | ||
| ); | ||
| })} | ||
| </div> | ||
| </> | ||
| ) : ( | ||
| <div className='flex items-center justify-center text-gray-400'>NO FREIGHT</div> | ||
| )} | ||
| </div> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
27 changes: 27 additions & 0 deletions
27
ui/src/features/project/pipelines/nodes/stage-node-footer.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| import classNames from 'classnames'; | ||
| import { formatDistance } from 'date-fns'; | ||
|
|
||
| import * as styles from './stage-node.module.less'; | ||
|
|
||
| export const StageNodeFooter = ({ lastPromotion }: { lastPromotion?: Date }) => { | ||
| if (!lastPromotion) { | ||
| return null; | ||
| } | ||
|
|
||
| return ( | ||
| <div className='flex flex-col w-full bg-gray-100 justify-center items-center p-1'> | ||
| {lastPromotion && ( | ||
| <div className='flex items-center'> | ||
| <div className={classNames(styles.smallLabel, '!mr-2')} style={{ paddingTop: '1px' }}> | ||
| Last Promo: | ||
| </div> | ||
| <div className='text-xs text-gray-600 font-mono font-semibold'> | ||
| {formatDistance(lastPromotion, new Date(), { | ||
| addSuffix: true | ||
| })} | ||
| </div> | ||
| </div> | ||
| )} | ||
| </div> | ||
| ); | ||
| }; |
Oops, something went wrong.