diff --git a/src/Components/ImagesTable/ImageBuildStatus.scss b/src/Components/ImagesTable/ImageBuildStatus.scss index b1ab2408..828efe3f 100644 --- a/src/Components/ImagesTable/ImageBuildStatus.scss +++ b/src/Components/ImagesTable/ImageBuildStatus.scss @@ -1,16 +1,3 @@ -.error { - color: var(--pf-v5-global--danger-color--100); -} -.success { - color: var(--pf-v5-global--success-color--100); -} -.pending { - color: var(--pf-v5-global--info-color--100); -} -.expiring { - color: var(--pf-v5-global--warning-color--100); -} - .failure-button { color: var(--pf-global--Color--100); text-decoration: underline; diff --git a/src/Components/ImagesTable/ImagesTable.tsx b/src/Components/ImagesTable/ImagesTable.tsx index 0221ac84..757fe1ac 100644 --- a/src/Components/ImagesTable/ImagesTable.tsx +++ b/src/Components/ImagesTable/ImagesTable.tsx @@ -26,7 +26,6 @@ import { import { useDispatch } from 'react-redux'; import { NavigateFunction, useNavigate } from 'react-router-dom'; -import './ImagesTable.scss'; import ImagesEmptyState from './EmptyState'; import { AwsDetails, diff --git a/src/Components/ImagesTable/Status.tsx b/src/Components/ImagesTable/Status.tsx index 82faf489..99d251bd 100644 --- a/src/Components/ImagesTable/Status.tsx +++ b/src/Components/ImagesTable/Status.tsx @@ -7,6 +7,7 @@ import { CodeBlock, CodeBlockCode, Flex, + Icon, Panel, PanelMain, Popover, @@ -183,21 +184,31 @@ export const ExpiringStatus = ({ ); } else if (imageType === 'aws.s3' && status === 'success') { + const text = `Expires in ${remainingHours} ${ + remainingHours > 1 ? 'hours' : 'hour' + }`; return ( 1 ? 'hours' : 'hour' - }`} + text={ + + {text} + + } /> ); } else if (imageType === 'oci.objectstorage' && status === 'success') { + const text = `Expires in ${remainingDays} ${ + remainingDays > 1 ? 'days' : 'day' + }`; return ( 1 ? 'days' : 'day' - }`} + text={ + + {text} + + } /> ); } else if (status === 'failure') { @@ -242,63 +253,117 @@ export const LocalStatus = ({ compose }: LocalStatusPropTypes) => { const statuses = { failure: { - icon: , - text: 'Image build failed', + icon: ( + + + + ), + text: ( + + Image build failed + + ), }, pending: { icon: , - text: 'Image build is pending', + text: ( + Image build is pending + ), }, building: { icon: , - text: 'Image build in progress', + text: ( + + Image build in progress + + ), }, uploading: { icon: , - text: 'Image upload in progress', + text: ( + + Image upload in progress + + ), }, registering: { icon: , - text: 'Cloud registration in progress', + text: ( + + Cloud registration in progress + + ), }, running: { icon: , - text: 'Running', + text: ( + + Running + + ), }, success: { - icon: , - text: 'Ready', + icon: ( + + + + ), + text: ( + + Ready + + ), }, expired: { icon: , - text: 'Expired', + text: Expired, }, expiring: { - icon: , + icon: ( + + + + ), }, failureSharing: { - icon: , - text: 'Sharing image failed', + icon: ( + + + + ), + text: ( + + Sharing image failed + + ), }, failedClone: { - icon: , - text: 'Failure sharing', + icon: ( + + + + ), + text: ( + + Failure sharing + + ), }, }; type StatusPropTypes = { icon: JSX.Element; - text: string; + text: JSX.Element; }; const Status = ({ icon, text }: StatusPropTypes) => { @@ -312,7 +377,7 @@ const Status = ({ icon, text }: StatusPropTypes) => { type ErrorStatusPropTypes = { icon: JSX.Element; - text: string; + text: JSX.Element; error: ComposeStatusError | string; };