diff --git a/ui/src/features/common/freight-label.tsx b/ui/src/features/common/freight-label.tsx index 20399f840..2d17716e4 100644 --- a/ui/src/features/common/freight-label.tsx +++ b/ui/src/features/common/freight-label.tsx @@ -1,4 +1,4 @@ -import { faCheck, faClipboard } from '@fortawesome/free-solid-svg-icons'; +import { faBoxOpen, faCheck, faClipboard } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Tooltip } from 'antd'; import { formatDistance } from 'date-fns'; @@ -6,14 +6,10 @@ import { useEffect, useState } from 'react'; import { Freight } from '@ui/gen/v1alpha1/generated_pb'; -const ALIAS_LABEL_KEY = 'kargo.akuity.io/alias'; - -export const getAlias = (freight?: Freight): string | undefined => { - return freight?.metadata?.labels[ALIAS_LABEL_KEY] || undefined; -}; +import { getAlias } from './utils'; export const FreightLabel = ({ freight }: { freight?: Freight }) => { - const [id, setId] = useState(''); + const [id, setId] = useState(); const [alias, setAlias] = useState(); const [copied, setCopied] = useState(false); @@ -25,43 +21,52 @@ export const FreightLabel = ({ freight }: { freight?: Freight }) => { }, [copied]); useEffect(() => { - setAlias(freight?.metadata?.labels[ALIAS_LABEL_KEY]); - setId(freight?.metadata?.name?.substring(0, 7) || 'N/A'); + setAlias(getAlias(freight)); + setId(freight?.metadata?.name?.substring(0, 7)); }, [freight]); return (
{ - navigator.clipboard.writeText(alias || id); - setCopied(true); + if (alias || id) { + navigator.clipboard.writeText(alias || id || ''); + setCopied(true); + } }} > - -
- - {copied ? 'Copied' : `Click to copy ${alias ? 'alias' : 'id'}`} -
- {alias && {alias}} - -
{id}
- - {freight?.metadata?.creationTimestamp && ( - -
- {formatDistance(freight?.metadata?.creationTimestamp?.toDate(), new Date(), { - addSuffix: true - })} -
+ {alias || id ? ( + +
+ + {copied ? 'Copied' : `Click to copy ${alias ? 'alias' : 'id'}`} +
+ {alias && {alias}} + +
{id}
 - )} - - } - > -
{alias || id}
- + {freight?.metadata?.creationTimestamp && ( + +
+ {formatDistance(freight?.metadata?.creationTimestamp?.toDate(), new Date(), { + addSuffix: true + })} +
+ + )} + + } + > +
{alias || id}
+ + ) : ( +
+ + EMPTY +
+ )}
); }; diff --git a/ui/src/features/common/utils.ts b/ui/src/features/common/utils.ts new file mode 100644 index 000000000..06023e73c --- /dev/null +++ b/ui/src/features/common/utils.ts @@ -0,0 +1,7 @@ +import { Freight } from '@ui/gen/v1alpha1/generated_pb'; + +export const ALIAS_LABEL_KEY = 'kargo.akuity.io/alias'; + +export const getAlias = (freight?: Freight): string | undefined => { + return freight?.metadata?.labels[ALIAS_LABEL_KEY] || undefined; +}; diff --git a/ui/src/features/freightline/freight-item.tsx b/ui/src/features/freightline/freight-item.tsx index 6f3551be1..eb904c728 100644 --- a/ui/src/features/freightline/freight-item.tsx +++ b/ui/src/features/freightline/freight-item.tsx @@ -3,17 +3,10 @@ import classNames from 'classnames'; import { Freight } from '@ui/gen/v1alpha1/generated_pb'; import { FreightLabel } from '../common/freight-label'; +import { FreightMode } from '../project/project-details/types'; import styles from './freightline.module.less'; -export enum FreightMode { - Default = 'default', // not promoting, has stages - Promotable = 'promotable', // promoting, promotable - Disabled = 'disabled', - Selected = 'selected', - Confirming = 'confirming' // promoting, confirming -} - export const FreightItem = ({ freight, children, diff --git a/ui/src/features/project/project-details/nodes/repo-node.module.less b/ui/src/features/project/project-details/nodes/repo-node.module.less index 736ae5825..6f684a118 100644 --- a/ui/src/features/project/project-details/nodes/repo-node.module.less +++ b/ui/src/features/project/project-details/nodes/repo-node.module.less @@ -7,13 +7,20 @@ height: 100%; h3 { - padding: 0.4em 0.5em; + padding: 0.5em; color: #333; font-size: 15px; font-weight: 600; - margin-left: 0.25em; + margin-left: 0.1em; margin-bottom: 0; } + + .repoLabel { + color: gray; + font-size: 10px; + margin-bottom: 0.75em; + font-weight: 600; + } } .body { @@ -21,20 +28,23 @@ border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; padding: 8px; - font-size: 12px; flex: 1; + display: flex; + @apply items-center justify-center; } .value { - display: block; + display: flex; margin-top: 3px; - color: #777; - font-size: 11px; text-decoration: none; white-space: nowrap; overflow-x: hidden; padding-bottom: 0.25em; text-overflow: ellipsis; + color: black; + font-weight: 600; + font-size: 14px; + @apply font-mono items-center justify-center; &:hover { text-decoration: underline; diff --git a/ui/src/features/project/project-details/nodes/repo-node.tsx b/ui/src/features/project/project-details/nodes/repo-node.tsx index 930659112..8de963632 100644 --- a/ui/src/features/project/project-details/nodes/repo-node.tsx +++ b/ui/src/features/project/project-details/nodes/repo-node.tsx @@ -1,5 +1,11 @@ import { faDocker, faGit } from '@fortawesome/free-brands-svg-icons'; -import { faAnchor, faBuilding, faCircleNotch } from '@fortawesome/free-solid-svg-icons'; +import { + faAnchor, + faBuilding, + faCircleNotch, + faExclamationCircle, + faExternalLinkAlt +} from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Tooltip } from 'antd'; @@ -27,23 +33,35 @@ export const RepoNode = ({ nodeData, children }: Props) => { type === NodeType.REPO_CHART ? nodeData?.data?.repoURL || '' : type === NodeType.WAREHOUSE - ? nodeData?.data + ? nodeData?.data?.metadata?.name || '' : nodeData?.data?.repoURL || ''; return (

-
- {nodeData.type === NodeType.WAREHOUSE ? nodeData.data : 'Subscription'} +
+ {nodeData.type === NodeType.WAREHOUSE ? nodeData.data?.metadata?.name : 'Subscription'}
{nodeData.refreshing && } + {nodeData.type === NodeType.WAREHOUSE && nodeData?.data?.status?.message && ( + + + {nodeData?.data?.status?.message} +
+ } + > + + + )} {type && }

{nodeData.type !== NodeType.WAREHOUSE && ( -
- Repo URL + )} - {children}
diff --git a/ui/src/features/project/project-details/nodes/stage-node.module.less b/ui/src/features/project/project-details/nodes/stage-node.module.less index 01f2a0881..58aaa496c 100644 --- a/ui/src/features/project/project-details/nodes/stage-node.module.less +++ b/ui/src/features/project/project-details/nodes/stage-node.module.less @@ -4,7 +4,7 @@ transition: all 0.2s ease-in-out; h3 { - padding: 0.7em 0.75em; + padding: 0.75em; color: white; font-weight: 600; font-size: 15px; @@ -22,14 +22,15 @@ text-align: center; display: flex; flex-direction: column; + } - h3 { - margin-top: 0.5em; - margin-bottom: 0.25em; - color: gray; - text-transform: uppercase; - font-size: 0.5em; - } + .freightLabel { + margin: 0; + margin-bottom: 0.5em; + color: gray; + text-transform: uppercase; + font-size: 10px; + font-weight: 600; } } diff --git a/ui/src/features/project/project-details/nodes/stage-node.tsx b/ui/src/features/project/project-details/nodes/stage-node.tsx index 98b90460e..442b9feda 100644 --- a/ui/src/features/project/project-details/nodes/stage-node.tsx +++ b/ui/src/features/project/project-details/nodes/stage-node.tsx @@ -105,12 +105,10 @@ export const StageNode = ({ APPROVE
) : ( - <> -

Current Freight

-
- -
- +
+
CURRENT FREIGHT
+ +
)} {!approving && ( diff --git a/ui/src/features/project/project-details/project-details.tsx b/ui/src/features/project/project-details/project-details.tsx index 6b13db194..05fcee588 100644 --- a/ui/src/features/project/project-details/project-details.tsx +++ b/ui/src/features/project/project-details/project-details.tsx @@ -27,11 +27,11 @@ import { useParams } from 'react-router-dom'; import { transportWithAuth } from '@ui/config/transport'; import { ColorContext } from '@ui/context/colors'; import { LoadingState } from '@ui/features/common'; -import { getAlias } from '@ui/features/common/freight-label'; import { useModal } from '@ui/features/common/modal/use-modal'; +import { getAlias } from '@ui/features/common/utils'; import { ConfirmPromotionDialogue } from '@ui/features/freightline/confirm-promotion-dialogue'; import { FreightContents } from '@ui/features/freightline/freight-contents'; -import { FreightItem, FreightMode } from '@ui/features/freightline/freight-item'; +import { FreightItem } from '@ui/features/freightline/freight-item'; import { Freightline } from '@ui/features/freightline/freightline'; import { FreightlineHeader } from '@ui/features/freightline/freightline-header'; import { StageIndicators } from '@ui/features/freightline/stage-indicators'; @@ -61,6 +61,7 @@ import { RepoNode } from './nodes/repo-node'; import { Nodule, StageNode } from './nodes/stage-node'; import styles from './project-details.module.less'; import { + FreightMode, FreightlineAction, NewWarehouseNode, NodeType, @@ -73,8 +74,8 @@ const lineThickness = 2; const nodeWidth = 150; const nodeHeight = 118; -const warehouseNodeWidth = 150; -const warehouseNodeHeight = 100; +const warehouseNodeWidth = 165; +const warehouseNodeHeight = 110; const getSeconds = (ts?: Time): number => Number(ts?.seconds) || 0; @@ -341,7 +342,7 @@ export const ProjectDetails = () => { } }); - layout(g, { lablepos: 'c' }); + layout(g, { labelpos: 'c' }); const nodes = myNodes.map((node, index) => { const gNode = g.node(String(index)); @@ -854,8 +855,8 @@ export const ProjectDetails = () => { ) : ( -
- {node.type === NodeType.WAREHOUSE && ( + {node.type === NodeType.WAREHOUSE && ( +
- )} -
+
+ )} {node.type === NodeType.WAREHOUSE && ( { const name = warehouse?.metadata?.name || ''; return { - data: name, + data: warehouse, stageNames: stageNames || [], warehouseName: name, refreshing: !!warehouse?.metadata?.annotations['kargo.akuity.io/refresh'], @@ -60,3 +60,11 @@ export const NewWarehouseNode = (warehouse: Warehouse, stageNames?: string[]): N }; export type FreightlineAction = 'promote' | 'promoteSubscribers' | 'manualApproval'; + +export enum FreightMode { + Default = 'default', // not promoting, has stages + Promotable = 'promotable', // promoting, promotable + Disabled = 'disabled', + Selected = 'selected', + Confirming = 'confirming' // promoting, confirming +} diff --git a/ui/src/features/project/project-details/update-freight-alias-modal.tsx b/ui/src/features/project/project-details/update-freight-alias-modal.tsx index ec02b4894..b6f0fd4d8 100644 --- a/ui/src/features/project/project-details/update-freight-alias-modal.tsx +++ b/ui/src/features/project/project-details/update-freight-alias-modal.tsx @@ -7,8 +7,8 @@ import { useForm } from 'react-hook-form'; import { z } from 'zod'; import { FieldContainer } from '@ui/features/common/form/field-container'; -import { getAlias } from '@ui/features/common/freight-label'; import { ModalComponentProps } from '@ui/features/common/modal/modal-context'; +import { getAlias } from '@ui/features/common/utils'; import { updateFreightAlias } from '@ui/gen/service/v1alpha1/service-KargoService_connectquery'; import { Freight } from '@ui/gen/v1alpha1/generated_pb'; import { zodValidators } from '@ui/utils/validators';