Skip to content

Commit 34c0cf0

Browse files
kahboomkahboom
committed
feat(overview): add timestamp to events
1 parent 5dbfe96 commit 34c0cf0

File tree

2 files changed

+110
-36
lines changed

2 files changed

+110
-36
lines changed

‎src/app/Trust/Overview/TrustOverview.tsx‎

Lines changed: 95 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,17 @@ import {
2020
Spinner,
2121
SimpleListItem,
2222
SimpleList,
23+
Timestamp,
24+
TimestampTooltipVariant,
25+
Flex,
26+
FlexItem,
27+
TimestampFormat,
2328
} from '@patternfly/react-core';
2429
import { ChartDonut, ChartThemeColor } from '@patternfly/react-charts/victory';
2530
import { MultiContentCard } from '@patternfly/react-component-groups';
2631
import { ArrowRightIcon, LockIcon, RedoIcon } from '@patternfly/react-icons';
2732
import { formatDate } from '@app/utils/utils';
33+
import { useQuery } from '@tanstack/react-query';
2834

2935
const exampleCerts = [
3036
{
@@ -57,6 +63,19 @@ const exampleCerts = [
5763
];
5864

5965
const TrustOverview = () => {
66+
const { isPending, error, data } = useQuery({
67+
queryKey: ['trustConfig'],
68+
queryFn: () => fetch('http://localhost:8080/api/v1/trust/config').then((res) => res.json()),
69+
});
70+
71+
if (isPending) return 'Loading...';
72+
73+
if (error) return 'An error has occurred: ' + error.message;
74+
75+
if (data) {
76+
console.table(data);
77+
}
78+
6079
const certListFormatted = [
6180
<SimpleListItem key="item1" component="a" href="#" isActive>
6281
{exampleCerts[0].issuer} | {formatDate(exampleCerts[0].validTo)}
@@ -103,30 +122,47 @@ const TrustOverview = () => {
103122
/>{' '}
104123
</CardBody>
105124
<CardFooter>
106-
<a href="#">View certificates</a>
125+
<Button
126+
icon={
127+
<Icon className="pf-v6-u-ml-sm" isInline>
128+
<ArrowRightIcon />
129+
</Icon>
130+
}
131+
variant="link"
132+
isInline
133+
>
134+
View certificates
135+
</Button>
107136
<br />
108137
</CardFooter>
109138
</Card>,
110139
<Card isFullHeight isPlain key="card-2">
111140
<CardBody>
112-
<Content component={ContentVariants.p}>
113-
<Content component={ContentVariants.h6}>Last Root Refresh</Content>
114-
<Content>2 hours ago</Content>
115-
{/* <br /> */}
116-
<Label
117-
className="pf-v6-u-mb-sm"
118-
icon={<RedoIcon />}
119-
color="orange"
120-
variant="outline"
121-
onClick={() => 'Refreshed'}
122-
>
123-
Refresh
124-
</Label>
125-
</Content>
126-
<Content component={ContentVariants.p}>
127-
<Content component={ContentVariants.h6}>Expiring Soon</Content>
128-
<SimpleList aria-label="Simple List Links Example">{certListFormatted}</SimpleList>
129-
</Content>
141+
<Flex direction={{ default: 'column' }}>
142+
<FlexItem className="pf-m-spacer-md">
143+
<Content component={ContentVariants.h6}>Last Root Refresh</Content>
144+
</FlexItem>
145+
<FlexItem className="pf-m-spacer-md">
146+
<Timestamp date={new Date(2022, 7, 9, 14, 57, 0)} tooltip={{ variant: TimestampTooltipVariant.default }}>
147+
2 hours ago
148+
</Timestamp>
149+
</FlexItem>
150+
<FlexItem className="pf-m-spacer-md">
151+
<Label
152+
className="pf-v6-u-mb-sm"
153+
icon={<RedoIcon />}
154+
color="orange"
155+
variant="outline"
156+
onClick={() => alert('Refreshed')}
157+
>
158+
Refresh
159+
</Label>
160+
</FlexItem>
161+
</Flex>
162+
</CardBody>
163+
<CardBody>
164+
<Content component={ContentVariants.h6}>Expiring Soon</Content>
165+
<SimpleList aria-label="Simple List Links Example">{certListFormatted}</SimpleList>
130166
</CardBody>
131167
<CardFooter>
132168
<Content>
@@ -153,23 +189,46 @@ const TrustOverview = () => {
153189
</Title>
154190
</CardTitle>
155191
<CardBody>
156-
<Content component={ContentVariants.p}>
157-
{/* <Content component={ContentVariants.h6}>Critical Events</Content> */}
158-
<DescriptionList isCompact>
159-
<DescriptionListGroup>
160-
<DescriptionListTerm icon={<Spinner isInline aria-label="Metadata fetch" />}>
161-
Metadata fetch
162-
</DescriptionListTerm>
163-
<DescriptionListDescription>Root metadata couldn't be fetched from remote</DescriptionListDescription>
164-
</DescriptionListGroup>
165-
<DescriptionListGroup>
166-
<DescriptionListTerm icon={<LockIcon />}>New certificate added</DescriptionListTerm>
167-
<DescriptionListDescription>
168-
A new <a href="#">signing certificate</a> was detected or added.
169-
</DescriptionListDescription>
170-
</DescriptionListGroup>
171-
</DescriptionList>
172-
</Content>
192+
<DescriptionList isCompact>
193+
<DescriptionListGroup>
194+
<DescriptionListTerm icon={<Spinner isInline aria-label="Metadata fetch" />}>
195+
Metadata fetch
196+
</DescriptionListTerm>
197+
<DescriptionListDescription>Root metadata couldn't be fetched from remote</DescriptionListDescription>
198+
<DescriptionListDescription>
199+
<Timestamp
200+
customFormat={{
201+
month: 'short',
202+
weekday: 'short',
203+
day: 'numeric',
204+
year: 'numeric',
205+
hour: 'numeric',
206+
minute: 'numeric',
207+
second: 'numeric',
208+
}}
209+
/>
210+
</DescriptionListDescription>
211+
</DescriptionListGroup>
212+
<DescriptionListGroup>
213+
<DescriptionListTerm icon={<LockIcon />}>New certificate added</DescriptionListTerm>
214+
<DescriptionListDescription>
215+
A new <a href="#">signing certificate</a> was detected or added.
216+
</DescriptionListDescription>
217+
<DescriptionListDescription>
218+
<Timestamp
219+
customFormat={{
220+
month: 'short',
221+
weekday: 'short',
222+
day: 'numeric',
223+
year: 'numeric',
224+
hour: 'numeric',
225+
minute: 'numeric',
226+
second: 'numeric',
227+
}}
228+
/>
229+
</DescriptionListDescription>
230+
</DescriptionListGroup>
231+
</DescriptionList>
173232
</CardBody>
174233
<CardFooter>
175234
<Content>

‎src/app/Trust/TrustRoots/components/TrustRootsDataList.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,8 @@ import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-i
3131
import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
3232
import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
3333
import { MinusIcon, CalendarAltIcon, FileAltIcon, EllipsisVIcon } from '@patternfly/react-icons';
34+
import { useQuery } from '@tanstack/react-query';
35+
3436
import { TrustRootsDrawerContent } from './TrustRootsDrawerContent';
3537
import { exampleTrustRoot } from '../TrustRoots.data';
3638

@@ -39,6 +41,19 @@ const TrustRootsDataList = () => {
3941
const [isDrawerExpanded, setIsDrawerExpanded] = useState(false);
4042
const drawerRef = useRef<HTMLDivElement>(undefined);
4143

44+
const { isPending, error, data } = useQuery({
45+
queryKey: ['trustConfig'],
46+
queryFn: () => fetch('http://localhost:8080/api/v1/trust/config').then((res) => res.json()),
47+
});
48+
49+
if (isPending) return 'Loading...';
50+
51+
if (error) return 'An error has occurred: ' + error.message;
52+
53+
if (data) {
54+
console.table(data);
55+
}
56+
4257
const getRow = (id: string, lastStatus: 'success' | 'error' | null, isRunning: boolean) => {
4358
let mainIcon;
4459
let lastStatusComponent;

0 commit comments

Comments
 (0)