Skip to content

Commit f0365d5

Browse files
carlosthe19916carlosthe19916
authored
fix: use backend expiring status for overview tab (#24)
Signed-off-by: Carlos Feria <[email protected]>
1 parent 692a708 commit f0365d5

File tree

2 files changed

+65
-35
lines changed

2 files changed

+65
-35
lines changed

‎client/src/app/pages/TrustRoot/components/Overview.tsx‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import { InfoAltIcon } from "@patternfly/react-icons";
2121

2222
import type { _Error, CertificateInfo } from "@app/client";
2323
import { LoadingWrapper } from "@app/components/LoadingWrapper";
24+
import { formatDate } from "@app/utils/utils";
2425

2526
interface IOverviewProps {
2627
certificates: CertificateInfo[];
@@ -46,13 +47,9 @@ export const Overview: React.FC<IOverviewProps> = ({ certificates, isFetching, f
4647
}, [chartDonutData]);
4748

4849
const expiringSoonCertificates = React.useMemo(() => {
49-
return certificates.reduce((prev, current) => {
50-
const daysBeforeExpiration = dayjs().diff(dayjs(current.expiration), "days");
51-
if (daysBeforeExpiration >= 0 && daysBeforeExpiration <= 7) {
52-
prev.push(current);
53-
}
54-
return prev;
55-
}, [] as CertificateInfo[]);
50+
return certificates
51+
.filter((item) => item.status.toLowerCase() === "expiring")
52+
.sort((a, b) => dayjs(a.expiration).valueOf() - dayjs(b.expiration).valueOf());
5653
}, [certificates]);
5754

5855
return (
@@ -96,7 +93,16 @@ export const Overview: React.FC<IOverviewProps> = ({ certificates, isFetching, f
9693
<List>
9794
{expiringSoonCertificates.map((item) => (
9895
<ListItem key={`${item.type}-${item.issuer}-${item.subject}-${item.target}`}>
99-
{item.issuer}
96+
<Flex
97+
spaceItems={{ default: "spaceItemsSm" }}
98+
alignItems={{ default: "alignItemsCenter" }}
99+
flexWrap={{ default: "nowrap" }}
100+
style={{ whiteSpace: "nowrap" }}
101+
>
102+
<FlexItem>{item.issuer}</FlexItem>
103+
<Divider orientation={{ default: "vertical" }} />
104+
<FlexItem>{formatDate(item.expiration)}</FlexItem>
105+
</Flex>
100106
</ListItem>
101107
))}
102108
</List>

‎client/src/app/pages/TrustRoot/components/RootDetails.tsx‎

Lines changed: 51 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ import {
88
DescriptionListDescription,
99
DescriptionListGroup,
1010
DescriptionListTermHelpText,
11+
Stack,
12+
StackItem,
1113
} from "@patternfly/react-core";
1214

1315
import type { RootMetadataInfoList } from "@app/client";
@@ -28,32 +30,54 @@ export const RootDetails: React.FC<IRootDetailsProps> = ({ rootMetadataList }) =
2830
}, [rootMetadataList]);
2931

3032
return (
31-
<Card isPlain>
32-
<CardTitle>Metadata</CardTitle>
33-
<CardBody>
34-
<DescriptionList
35-
aria-label="Metadata"
36-
columnModifier={{
37-
default: "2Col",
38-
}}
39-
>
40-
<DescriptionListGroup>
41-
<DescriptionListTermHelpText>Version</DescriptionListTermHelpText>
42-
<DescriptionListDescription>{latestMetadataInfo?.version}</DescriptionListDescription>
43-
</DescriptionListGroup>
44-
<DescriptionListGroup>
45-
<DescriptionListTermHelpText>Expires</DescriptionListTermHelpText>
46-
<DescriptionListDescription>{formatDate(latestMetadataInfo?.expires)}</DescriptionListDescription>
47-
</DescriptionListGroup>
48-
<DescriptionListGroup>
49-
<DescriptionListTermHelpText>Status</DescriptionListTermHelpText>
50-
<DescriptionListDescription>
51-
{latestMetadataInfo && <CertificateStatusIcon status={latestMetadataInfo?.status} />}{" "}
52-
{capitalizeFirstLetter(latestMetadataInfo?.status ?? "")}
53-
</DescriptionListDescription>
54-
</DescriptionListGroup>
55-
</DescriptionList>
56-
</CardBody>
57-
</Card>
33+
<Stack>
34+
<StackItem>
35+
<Card isPlain>
36+
<CardTitle>Root details</CardTitle>
37+
<CardBody>
38+
<DescriptionList
39+
aria-label="Metadata"
40+
columnModifier={{
41+
default: "2Col",
42+
}}
43+
>
44+
<DescriptionListGroup>
45+
<DescriptionListTermHelpText>Type</DescriptionListTermHelpText>
46+
<DescriptionListDescription>tuf</DescriptionListDescription>
47+
</DescriptionListGroup>
48+
</DescriptionList>
49+
</CardBody>
50+
</Card>
51+
</StackItem>
52+
<StackItem>
53+
<Card isPlain>
54+
<CardTitle>Metadata</CardTitle>
55+
<CardBody>
56+
<DescriptionList
57+
aria-label="Metadata"
58+
columnModifier={{
59+
default: "2Col",
60+
}}
61+
>
62+
<DescriptionListGroup>
63+
<DescriptionListTermHelpText>Version</DescriptionListTermHelpText>
64+
<DescriptionListDescription>{latestMetadataInfo?.version}</DescriptionListDescription>
65+
</DescriptionListGroup>
66+
<DescriptionListGroup>
67+
<DescriptionListTermHelpText>Expires</DescriptionListTermHelpText>
68+
<DescriptionListDescription>{formatDate(latestMetadataInfo?.expires)}</DescriptionListDescription>
69+
</DescriptionListGroup>
70+
<DescriptionListGroup>
71+
<DescriptionListTermHelpText>Status</DescriptionListTermHelpText>
72+
<DescriptionListDescription>
73+
{latestMetadataInfo && <CertificateStatusIcon status={latestMetadataInfo?.status} />}{" "}
74+
{capitalizeFirstLetter(latestMetadataInfo?.status ?? "")}
75+
</DescriptionListDescription>
76+
</DescriptionListGroup>
77+
</DescriptionList>
78+
</CardBody>
79+
</Card>
80+
</StackItem>
81+
</Stack>
5882
);
5983
};

0 commit comments

Comments
 (0)