Skip to content

Commit f0a4d31

Browse files
yaacovyaacov
authored
Merge pull request #1223 from yaacov/use-patternfly-where-posible
🐾 Use patternfly icons and time components
2 parents 4051689 + b4c7731 commit f0a4d31

File tree

33 files changed

+176
-135
lines changed

33 files changed

+176
-135
lines changed

‎packages/forklift-console-plugin/src/__mocks__/console_components.tsx

+1-14
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22

3-
import { ResourceLinkProps, TimestampProps } from '@openshift-console/dynamic-plugin-sdk';
3+
import { ResourceLinkProps } from '@openshift-console/dynamic-plugin-sdk';
44

55
export const ResourceLink = ({
66
name,
@@ -12,18 +12,5 @@ export const ResourceLink = ({
1212
</div>
1313
);
1414

15-
export const RedExclamationCircleIcon = () => (
16-
<div data-test-element-name="RedExclamationCircleIcon" />
17-
);
18-
export const GreenCheckCircleIcon = () => <div data-test-element-name="GreenCheckCircleIcon" />;
19-
export const YellowExclamationTriangleIcon = () => (
20-
<div data-test-element-name="YellowExclamationTriangleIcon" />
21-
);
22-
export const BlueInfoCircleIcon = () => <div data-test-element-name="BlueInfoCircleIcon" />;
23-
export const useModal = (props) => <div data-test-element-name="useModal" {...props} />;
2415
export const ActionService = () => <div data-test-element-name="ActionService" />;
2516
export const ActionServiceProvider = () => <div data-test-element-name="ActionServiceProvider" />;
26-
27-
export const Timestamp = ({ timestamp }: TimestampProps) => (
28-
<div data-test-element-name="Timestamp">{timestamp}</div>
29-
);

‎packages/forklift-console-plugin/src/components/ConsoleTimestamp/ConsoleTimestamp.style.css

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.forklift-table__console-timestamp {
2+
text-decoration-line: none !important;
3+
color: var(--pf-v5-c-content--Color);
4+
}

‎packages/forklift-console-plugin/src/components/ConsoleTimestamp/ConsoleTimestamp.tsx

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import * as React from 'react';
2+
3+
import { Timestamp, TimestampTooltipVariant } from '@patternfly/react-core';
4+
import { GlobeAmericasIcon } from '@patternfly/react-icons';
5+
6+
/**
7+
* Patternfly timestamp use:
8+
* gray color
9+
* dashed underline
10+
* Console show timestamp using:
11+
* black color
12+
* no underline decoration
13+
*/
14+
import './ConsoleTimestamp.style.css';
15+
16+
export type TimestampProps = {
17+
timestamp: string | number | Date;
18+
className?: string;
19+
};
20+
21+
/**
22+
* Patternfly timestamp use:
23+
* standard format
24+
* no icon
25+
* Console show timestamp using:
26+
* glob icon
27+
* custom format
28+
*/
29+
export const ConsoleTimestamp = (props: TimestampProps) => {
30+
// Check for null. If props.timestamp is null, it returns incorrect date and time of Wed Dec 31 1969 19:00:00 GMT-0500 (Eastern Standard Time)
31+
if (!props.timestamp) {
32+
return <div className="co-timestamp">-</div>;
33+
}
34+
35+
const currentDate = new Date(props.timestamp);
36+
37+
return (
38+
<div className={props.className}>
39+
<GlobeAmericasIcon className="co-icon-and-text__icon" />
40+
<Timestamp
41+
className="forklift-table__console-timestamp"
42+
date={currentDate}
43+
customFormat={{
44+
year: '2-digit',
45+
month: 'short',
46+
weekday: 'short',
47+
day: 'numeric',
48+
hour: 'numeric',
49+
minute: 'numeric',
50+
}}
51+
tooltip={{ variant: TimestampTooltipVariant.default }}
52+
/>
53+
</div>
54+
);
55+
};

‎packages/forklift-console-plugin/src/components/ConsoleTimestamp/index.ts

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
// @index(['./*', /style/g], f => `export * from '${f.path}';`)
2+
export * from './ConsoleTimestamp';
3+
// @endindex

‎packages/forklift-console-plugin/src/components/cells/StatusCell.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22

3-
import { BlueInfoCircleIcon } from '@openshift-console/dynamic-plugin-sdk';
43
import { Button, Popover } from '@patternfly/react-core';
4+
import { InfoCircleIcon } from '@patternfly/react-icons';
55

66
import { TextWithIcon } from './TextWithIcon';
77
import { categoryIcons } from './utils';
@@ -22,7 +22,7 @@ export const StatusCell: React.FC<StatusCellProps> = ({ label, conditions, icon
2222
className="forklift-table__flex-cell-popover"
2323
key={type}
2424
label={message || type}
25-
icon={categoryIcons[category]?.[status] || <BlueInfoCircleIcon />}
25+
icon={categoryIcons[category]?.[status] || <InfoCircleIcon color="#2B9AF3" />}
2626
/>
2727
));
2828

‎packages/forklift-console-plugin/src/components/cells/utils.tsx

+9-9
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
import React from 'react';
22

33
import {
4-
GreenCheckCircleIcon,
5-
RedExclamationCircleIcon,
6-
YellowExclamationTriangleIcon,
7-
} from '@openshift-console/dynamic-plugin-sdk';
4+
CheckCircleIcon,
5+
ExclamationCircleIcon,
6+
ExclamationTriangleIcon,
7+
} from '@patternfly/react-icons';
88

99
export const categoryIcons = {
10-
Critical: { True: <RedExclamationCircleIcon />, False: undefined },
11-
Error: { True: <RedExclamationCircleIcon />, False: undefined },
12-
Required: { True: <GreenCheckCircleIcon />, False: undefined },
13-
Warn: { True: <YellowExclamationTriangleIcon />, False: undefined },
14-
Advisory: { True: <GreenCheckCircleIcon />, False: undefined },
10+
Critical: { True: <ExclamationCircleIcon color="#C9190B" />, False: undefined },
11+
Error: { True: <ExclamationCircleIcon color="#C9190B" />, False: undefined },
12+
Required: { True: <CheckCircleIcon color="#3E8635" />, False: undefined },
13+
Warn: { True: <ExclamationTriangleIcon color="#F0AB00" />, False: undefined },
14+
Advisory: { True: <CheckCircleIcon color="#3E8635" />, False: undefined },
1515
};

‎packages/forklift-console-plugin/src/components/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
// @index(['./*', /style/g], f => `export * from '${f.path}';`)
22
export * from './actions';
33
export * from './cells';
4+
export * from './ConsoleTimestamp';
45
export * from './empty-states';
56
export * from './FilterableSelect';
67
export * from './headers';

‎packages/forklift-console-plugin/src/components/status/StatusIcon.tsx

+10-10
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import React from 'react';
22

3-
import {
4-
BlueInfoCircleIcon,
5-
GreenCheckCircleIcon,
6-
RedExclamationCircleIcon,
7-
YellowExclamationTriangleIcon,
8-
} from '@openshift-console/dynamic-plugin-sdk';
93
import { Spinner } from '@patternfly/react-core';
4+
import {
5+
CheckCircleIcon,
6+
ExclamationCircleIcon,
7+
ExclamationTriangleIcon,
8+
InfoCircleIcon,
9+
} from '@patternfly/react-icons';
1010
import { BanIcon } from '@patternfly/react-icons/dist/esm/icons/ban-icon';
1111
import { ClipboardListIcon } from '@patternfly/react-icons/dist/esm/icons/clipboard-list-icon';
1212
import { HourglassHalfIcon } from '@patternfly/react-icons/dist/esm/icons/hourglass-half-icon';
@@ -54,7 +54,7 @@ export const StatusIcon: React.FC<{ phase: string }> = ({ phase }) => {
5454

5555
case 'Warning':
5656
case 'RequiresApproval':
57-
return <YellowExclamationTriangleIcon />;
57+
return <ExclamationTriangleIcon color="#F0AB00" />;
5858

5959
case 'ContainerCannotRun':
6060
case 'CrashLoopBackOff':
@@ -68,7 +68,7 @@ export const StatusIcon: React.FC<{ phase: string }> = ({ phase }) => {
6868
case 'Lost':
6969
case 'Rejected':
7070
case 'UpgradeFailed':
71-
return <RedExclamationCircleIcon />;
71+
return <ExclamationCircleIcon color="#C9190B" />;
7272

7373
case 'Accepted':
7474
case 'Active':
@@ -85,10 +85,10 @@ export const StatusIcon: React.FC<{ phase: string }> = ({ phase }) => {
8585
case 'Preferred':
8686
case 'Connected':
8787
case 'Deployed':
88-
return <GreenCheckCircleIcon />;
88+
return <CheckCircleIcon color="#3E8635" />;
8989

9090
case 'Info':
91-
return <BlueInfoCircleIcon />;
91+
return <InfoCircleIcon color="#2B9AF3" />;
9292

9393
case 'Unknown':
9494
return <UnknownIcon />;

‎packages/forklift-console-plugin/src/modules/NetworkMaps/views/details/components/ConditionsSection/ConditionsSection.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import React from 'react';
2+
import { ConsoleTimestamp } from 'src/components/ConsoleTimestamp';
23
import { useForkliftTranslation } from 'src/utils/i18n';
34

45
import { TableComposable, Tbody, Td, Th, Thead, Tr } from '@kubev2v/common';
56
import { K8sResourceCondition } from '@kubev2v/types';
6-
import { Timestamp } from '@openshift-console/dynamic-plugin-sdk';
77
import { HelperText, HelperTextItem } from '@patternfly/react-core';
88

99
/**
@@ -53,7 +53,7 @@ export const ConditionsSection: React.FC<ConditionsSectionProps> = ({ conditions
5353
<Td>{condition.type}</Td>
5454
<Td>{getStatusLabel(condition.status)}</Td>
5555
<Td>
56-
<Timestamp timestamp={condition.lastTransitionTime} />
56+
<ConsoleTimestamp timestamp={condition.lastTransitionTime} />
5757
</Td>
5858
<Td>{condition.reason}</Td>
5959
<Td modifier="truncate">{condition?.message || '-'}</Td>

‎packages/forklift-console-plugin/src/modules/NetworkMaps/views/details/components/DetailsSection/components/CreatedAtDetailsItem.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import React from 'react';
2+
import { ConsoleTimestamp } from 'src/components/ConsoleTimestamp';
23
import { DetailsItem } from 'src/modules/Providers/utils';
34
import { useForkliftTranslation } from 'src/utils/i18n';
45

5-
import { Timestamp } from '@openshift-console/dynamic-plugin-sdk';
6-
76
import { NetworkDetailsItemProps } from './NetworkDetailsItemProps';
87

98
export const CreatedAtDetailsItem: React.FC<NetworkDetailsItemProps> = ({
@@ -23,7 +22,7 @@ export const CreatedAtDetailsItem: React.FC<NetworkDetailsItemProps> = ({
2322
return (
2423
<DetailsItem
2524
title={t('Created at')}
26-
content={<Timestamp timestamp={resource?.metadata?.creationTimestamp} />}
25+
content={<ConsoleTimestamp timestamp={resource?.metadata?.creationTimestamp} />}
2726
moreInfoLink={moreInfoLink ?? defaultMoreInfoLink}
2827
helpContent={helpContent ?? defaultHelpContent}
2928
crumbs={['metadata', 'creationTimestamp']}

‎packages/forklift-console-plugin/src/modules/NetworkMaps/views/list/components/StatusCell.tsx

+3-6
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,8 @@ import { useForkliftTranslation } from 'src/utils/i18n';
77

88
import { getResourceFieldValue } from '@kubev2v/common';
99
import { NetworkMapModelRef } from '@kubev2v/types';
10-
import {
11-
GreenCheckCircleIcon,
12-
RedExclamationCircleIcon,
13-
} from '@openshift-console/dynamic-plugin-sdk';
1410
import { Button, Popover, Spinner, Text, TextContent, TextVariants } from '@patternfly/react-core';
11+
import { CheckCircleIcon, ExclamationCircleIcon } from '@patternfly/react-icons';
1512

1613
import { CellProps } from './CellProps';
1714

@@ -78,9 +75,9 @@ export const ErrorStatusCell: React.FC<CellProps & { t: TFunction }> = ({ t, dat
7875
};
7976

8077
const statusIcons = {
81-
Ready: <GreenCheckCircleIcon />,
78+
Ready: <CheckCircleIcon color="#3E8635" />,
8279
'Not Ready': <Spinner size="sm" />,
83-
Critical: <RedExclamationCircleIcon />,
80+
Critical: <ExclamationCircleIcon color="#C9190B" />,
8481
};
8582

8683
const phaseLabels = {

‎packages/forklift-console-plugin/src/modules/Overview/views/overview/components/OperatorStatus.tsx

+8-8
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
11
import React from 'react';
22

3-
import {
4-
GreenCheckCircleIcon,
5-
RedExclamationCircleIcon,
6-
YellowExclamationTriangleIcon,
7-
} from '@openshift-console/dynamic-plugin-sdk';
83
import { Flex, FlexItem } from '@patternfly/react-core';
4+
import {
5+
CheckCircleIcon,
6+
ExclamationCircleIcon,
7+
ExclamationTriangleIcon,
8+
} from '@patternfly/react-icons';
99

1010
interface OperatorStatusProps {
1111
status: string;
1212
}
1313

1414
export const statusIcons = {
15-
Failure: <RedExclamationCircleIcon />,
16-
Successful: <GreenCheckCircleIcon />,
17-
Running: <YellowExclamationTriangleIcon />,
15+
Failure: <ExclamationCircleIcon color="#C9190B" />,
16+
Successful: <CheckCircleIcon color="#3E8635" />,
17+
Running: <ExclamationTriangleIcon color="#F0AB00" />,
1818
};
1919

2020
const statusLabels = {

‎packages/forklift-console-plugin/src/modules/Overview/views/overview/components/PodsTable.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import React from 'react';
2+
import { ConsoleTimestamp } from 'src/components/ConsoleTimestamp';
23
import StatusIcon from 'src/components/status/StatusIcon';
34
import { useForkliftTranslation } from 'src/utils/i18n';
45

56
import { TableComposable, Tbody, Td, Th, Thead, Tr } from '@kubev2v/common';
67
import { IoK8sApiCoreV1Pod } from '@kubev2v/types';
7-
import { ResourceLink, Timestamp } from '@openshift-console/dynamic-plugin-sdk';
8+
import { ResourceLink } from '@openshift-console/dynamic-plugin-sdk';
89
import { HelperText, HelperTextItem, Split, SplitItem } from '@patternfly/react-core';
910

1011
export const PodsTable: React.FC<PodsTableProps> = ({ pods, showOwner }) => {
@@ -53,7 +54,7 @@ export const PodsTable: React.FC<PodsTableProps> = ({ pods, showOwner }) => {
5354
)}
5455
<Td>{getStatusLabel(pod?.status?.phase)}</Td>
5556
<Td>
56-
<Timestamp timestamp={pod?.metadata?.creationTimestamp} />
57+
<ConsoleTimestamp timestamp={pod?.metadata?.creationTimestamp} />
5758
</Td>
5859
</Tr>
5960
))}

‎packages/forklift-console-plugin/src/modules/Overview/views/overview/tabs/Details/cards/OperatorCard.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import React, { FC } from 'react';
2+
import { ConsoleTimestamp } from 'src/components/ConsoleTimestamp';
23
import { getOperatorPhase } from 'src/modules/Overview/utils/helpers/getOperatorPhase';
34
import { DetailsItem } from 'src/modules/Providers/utils';
45
import { useForkliftTranslation } from 'src/utils/i18n';
56

67
import { V1beta1ForkliftController } from '@kubev2v/types';
7-
import { ResourceLink, Timestamp } from '@openshift-console/dynamic-plugin-sdk';
8+
import { ResourceLink } from '@openshift-console/dynamic-plugin-sdk';
89
import {
910
Card,
1011
CardBody,
@@ -57,7 +58,7 @@ export const OperatorCard: FC<OperatorCardProps> = ({ obj }) => {
5758

5859
<DetailsItem
5960
title={t('Created at')}
60-
content={<Timestamp timestamp={obj?.metadata?.creationTimestamp} />}
61+
content={<ConsoleTimestamp timestamp={obj?.metadata?.creationTimestamp} />}
6162
helpContent={
6263
<Text>
6364
{t(

‎packages/forklift-console-plugin/src/modules/Plans/views/details/components/ConditionsSection/ConditionsSection.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import React from 'react';
2+
import { ConsoleTimestamp } from 'src/components/ConsoleTimestamp';
23
import { useForkliftTranslation } from 'src/utils/i18n';
34

45
import { TableComposable, Tbody, Td, Th, Thead, Tr } from '@kubev2v/common';
56
import { K8sResourceCondition } from '@kubev2v/types';
6-
import { Timestamp } from '@openshift-console/dynamic-plugin-sdk';
77
import { HelperText, HelperTextItem } from '@patternfly/react-core';
88

99
/**
@@ -53,7 +53,7 @@ export const ConditionsSection: React.FC<ConditionsSectionProps> = ({ conditions
5353
<Td>{condition.type}</Td>
5454
<Td>{getStatusLabel(condition.status)}</Td>
5555
<Td>
56-
<Timestamp timestamp={condition.lastTransitionTime} />
56+
<ConsoleTimestamp timestamp={condition.lastTransitionTime} />
5757
</Td>
5858
<Td>{condition.reason}</Td>
5959
<Td modifier="truncate">{condition?.message || '-'}</Td>

‎packages/forklift-console-plugin/src/modules/Plans/views/details/components/DetailsSection/components/CreatedAtDetailsItem.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import React from 'react';
2+
import { ConsoleTimestamp } from 'src/components/ConsoleTimestamp';
23
import { DetailsItem } from 'src/modules/Providers/utils';
34
import { useForkliftTranslation } from 'src/utils/i18n';
45

5-
import { Timestamp } from '@openshift-console/dynamic-plugin-sdk';
6-
76
import { PlanDetailsItemProps } from './PlanDetailsItemProps';
87

98
export const CreatedAtDetailsItem: React.FC<PlanDetailsItemProps> = ({
@@ -23,7 +22,7 @@ export const CreatedAtDetailsItem: React.FC<PlanDetailsItemProps> = ({
2322
return (
2423
<DetailsItem
2524
title={t('Created at')}
26-
content={<Timestamp timestamp={resource?.metadata?.creationTimestamp} />}
25+
content={<ConsoleTimestamp timestamp={resource?.metadata?.creationTimestamp} />}
2726
moreInfoLink={moreInfoLink ?? defaultMoreInfoLink}
2827
helpContent={helpContent ?? defaultHelpContent}
2928
crumbs={['metadata', 'creationTimestamp']}

‎packages/forklift-console-plugin/src/modules/Plans/views/details/components/MigrationsSection/components/MigrationsTable.tsx

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React from 'react';
2+
import { ConsoleTimestamp } from 'src/components/ConsoleTimestamp';
23
import {
34
getMigrationVmsCounts,
45
getPhaseLabel,
@@ -13,7 +14,7 @@ import {
1314
PlanModelGroupVersionKind,
1415
V1beta1Migration,
1516
} from '@kubev2v/types';
16-
import { ResourceLink, Timestamp } from '@openshift-console/dynamic-plugin-sdk';
17+
import { ResourceLink } from '@openshift-console/dynamic-plugin-sdk';
1718
import {
1819
HelperText,
1920
HelperTextItem,
@@ -73,10 +74,10 @@ export const MigrationsTable: React.FC<MigrationTableProps> = ({ migrations, sho
7374
<VMsLabel migration={migration} />
7475
</Td>
7576
<Td>
76-
<Timestamp timestamp={migration?.status?.started} />
77+
<ConsoleTimestamp timestamp={migration?.status?.started} />
7778
</Td>
7879
<Td>
79-
<Timestamp timestamp={migration?.status?.completed} />
80+
<ConsoleTimestamp timestamp={migration?.status?.completed} />
8081
</Td>
8182
</Tr>
8283
))}

0 commit comments

Comments
 (0)