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;
};