Use patternfly icons and time components

Signed-off-by: yaacov <[email protected]>
kubev2v · Jun 20, 2024 · dcda499 · dcda499
1 parent 4051689
commit dcda499
Show file tree

Hide file tree

Showing 33 changed files with 175 additions and 135 deletions.
diff --git a/packages/forklift-console-plugin/src/__mocks__/console_components.tsx b/packages/forklift-console-plugin/src/__mocks__/console_components.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { ResourceLinkProps, TimestampProps } from '@openshift-console/dynamic-plugin-sdk';
+import { ResourceLinkProps } from '@openshift-console/dynamic-plugin-sdk';
 
 export const ResourceLink = ({
   name,
@@ -12,18 +12,5 @@ export const ResourceLink = ({
   </div>
 );
 
-export const RedExclamationCircleIcon = () => (
-  <div data-test-element-name="RedExclamationCircleIcon" />
-);
-export const GreenCheckCircleIcon = () => <div data-test-element-name="GreenCheckCircleIcon" />;
-export const YellowExclamationTriangleIcon = () => (
-  <div data-test-element-name="YellowExclamationTriangleIcon" />
-);
-export const BlueInfoCircleIcon = () => <div data-test-element-name="BlueInfoCircleIcon" />;
-export const useModal = (props) => <div data-test-element-name="useModal" {...props} />;
 export const ActionService = () => <div data-test-element-name="ActionService" />;
 export const ActionServiceProvider = () => <div data-test-element-name="ActionServiceProvider" />;
-
-export const Timestamp = ({ timestamp }: TimestampProps) => (
-  <div data-test-element-name="Timestamp">{timestamp}</div>
-);
diff --git a/packages/forklift-console-plugin/src/components/ConsoleTimestamp/ConsoleTimestamp.style.css b/packages/forklift-console-plugin/src/components/ConsoleTimestamp/ConsoleTimestamp.style.css
@@ -0,0 +1,4 @@
+.forklift-table__console-timestamp {
+  text-decoration-line: none !important;
+  color: var(--pf-v5-c-content--Color);
+}
diff --git a/packages/forklift-console-plugin/src/components/ConsoleTimestamp/ConsoleTimestamp.tsx b/packages/forklift-console-plugin/src/components/ConsoleTimestamp/ConsoleTimestamp.tsx
@@ -0,0 +1,55 @@
+import * as React from 'react';
+
+import { Timestamp, TimestampTooltipVariant } from '@patternfly/react-core';
+import { GlobeAmericasIcon } from '@patternfly/react-icons';
+
+/**
+ * Patternfly timestamp use:
+ *   gray color
+ *   dashed underline
+ * Console show timestamp using:
+ *   black color
+ *   no underline decoration
+ */
+import './ConsoleTimestamp.style.css';
+
+export type TimestampProps = {
+  timestamp: string | number | Date;
+  className?: string;
+};
+
+/**
+ * Patternfly timestamp use:
+ *   standard format
+ *   no icon
+ * Console show timestamp using:
+ *   glob icon
+ *   custom format
+ */
+export const ConsoleTimestamp = (props: TimestampProps) => {
+  // 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)
+  if (!props.timestamp) {
+    return <div className="co-timestamp">-</div>;
+  }
+
+  const currentDate = new Date(props.timestamp);
+
+  return (
+    <div className={props.className}>
+      <GlobeAmericasIcon className="co-icon-and-text__icon" />
+      <Timestamp
+        className="forklift-table__console-timestamp"
+        date={currentDate}
+        customFormat={{
+          year: '2-digit',
+          month: 'short',
+          weekday: 'short',
+          day: 'numeric',
+          hour: 'numeric',
+          minute: 'numeric',
+        }}
+        tooltip={{ variant: TimestampTooltipVariant.default }}
+      />
+    </div>
+  );
+};
diff --git a/packages/forklift-console-plugin/src/components/ConsoleTimestamp/index.ts b/packages/forklift-console-plugin/src/components/ConsoleTimestamp/index.ts
@@ -0,0 +1,3 @@
+// @index(['./*', /style/g], f => `export * from '${f.path}';`)
+export * from './ConsoleTimestamp';
+// @endindex
diff --git a/packages/forklift-console-plugin/src/components/cells/StatusCell.tsx b/packages/forklift-console-plugin/src/components/cells/StatusCell.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
-import { BlueInfoCircleIcon } from '@openshift-console/dynamic-plugin-sdk';
 import { Button, Popover } from '@patternfly/react-core';
+import { InfoCircleIcon } from '@patternfly/react-icons';
 
 import { TextWithIcon } from './TextWithIcon';
 import { categoryIcons } from './utils';
@@ -22,7 +22,7 @@ export const StatusCell: React.FC<StatusCellProps> = ({ label, conditions, icon
       className="forklift-table__flex-cell-popover"
       key={type}
       label={message || type}
-      icon={categoryIcons[category]?.[status] || <BlueInfoCircleIcon />}
+      icon={categoryIcons[category]?.[status] || <InfoCircleIcon color="#2B9AF3" />}
     />
   ));
 

diff --git a/packages/forklift-console-plugin/src/components/cells/utils.tsx b/packages/forklift-console-plugin/src/components/cells/utils.tsx
@@ -1,15 +1,15 @@
 import React from 'react';
 
 import {
-  GreenCheckCircleIcon,
-  RedExclamationCircleIcon,
-  YellowExclamationTriangleIcon,
-} from '@openshift-console/dynamic-plugin-sdk';
+  CheckCircleIcon,
+  ExclamationCircleIcon,
+  ExclamationTriangleIcon,
+} from '@patternfly/react-icons';
 
 export const categoryIcons = {
-  Critical: { True: <RedExclamationCircleIcon />, False: undefined },
-  Error: { True: <RedExclamationCircleIcon />, False: undefined },
-  Required: { True: <GreenCheckCircleIcon />, False: undefined },
-  Warn: { True: <YellowExclamationTriangleIcon />, False: undefined },
-  Advisory: { True: <GreenCheckCircleIcon />, False: undefined },
+  Critical: { True: <ExclamationCircleIcon color="#C9190B" />, False: undefined },
+  Error: { True: <ExclamationCircleIcon color="#C9190B" />, False: undefined },
+  Required: { True: <CheckCircleIcon color="#3E8635" />, False: undefined },
+  Warn: { True: <ExclamationTriangleIcon color="#F0AB00" />, False: undefined },
+  Advisory: { True: <CheckCircleIcon color="#3E8635" />, False: undefined },
 };
diff --git a/packages/forklift-console-plugin/src/components/index.ts b/packages/forklift-console-plugin/src/components/index.ts
@@ -1,6 +1,7 @@
 // @index(['./*', /style/g], f => `export * from '${f.path}';`)
 export * from './actions';
 export * from './cells';
+export * from './ConsoleTimestamp';
 export * from './empty-states';
 export * from './FilterableSelect';
 export * from './headers';

diff --git a/packages/forklift-console-plugin/src/components/status/StatusIcon.tsx b/packages/forklift-console-plugin/src/components/status/StatusIcon.tsx
@@ -1,12 +1,11 @@
 import React from 'react';
 
-import {
-  BlueInfoCircleIcon,
-  GreenCheckCircleIcon,
-  RedExclamationCircleIcon,
-  YellowExclamationTriangleIcon,
-} from '@openshift-console/dynamic-plugin-sdk';
 import { Spinner } from '@patternfly/react-core';
+import {
+  ExclamationCircleIcon,
+  ExclamationTriangleIcon,
+  InfoCircleIcon,
+} from '@patternfly/react-icons';
 import { BanIcon } from '@patternfly/react-icons/dist/esm/icons/ban-icon';
 import { ClipboardListIcon } from '@patternfly/react-icons/dist/esm/icons/clipboard-list-icon';
 import { HourglassHalfIcon } from '@patternfly/react-icons/dist/esm/icons/hourglass-half-icon';
@@ -54,7 +53,7 @@ export const StatusIcon: React.FC<{ phase: string }> = ({ phase }) => {
 
     case 'Warning':
     case 'RequiresApproval':
-      return <YellowExclamationTriangleIcon />;
+      return <ExclamationTriangleIcon color="#F0AB00" />;
 
     case 'ContainerCannotRun':
     case 'CrashLoopBackOff':
@@ -68,7 +67,7 @@ export const StatusIcon: React.FC<{ phase: string }> = ({ phase }) => {
     case 'Lost':
     case 'Rejected':
     case 'UpgradeFailed':
-      return <RedExclamationCircleIcon />;
+      return <ExclamationCircleIcon color="#C9190B" />;
 
     case 'Accepted':
     case 'Active':
@@ -85,10 +84,10 @@ export const StatusIcon: React.FC<{ phase: string }> = ({ phase }) => {
     case 'Preferred':
     case 'Connected':
     case 'Deployed':
-      return <GreenCheckCircleIcon />;
+      return <BanIcon />;
 
     case 'Info':
-      return <BlueInfoCircleIcon />;
+      return <InfoCircleIcon color="#2B9AF3" />;
 
     case 'Unknown':
       return <UnknownIcon />;

diff --git a/.../src/modules/NetworkMaps/views/details/components/ConditionsSection/ConditionsSection.tsx b/.../src/modules/NetworkMaps/views/details/components/ConditionsSection/ConditionsSection.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
+import { ConsoleTimestamp } from 'src/components/ConsoleTimestamp';
 import { useForkliftTranslation } from 'src/utils/i18n';
 
 import { TableComposable, Tbody, Td, Th, Thead, Tr } from '@kubev2v/common';
 import { K8sResourceCondition } from '@kubev2v/types';
-import { Timestamp } from '@openshift-console/dynamic-plugin-sdk';
 import { HelperText, HelperTextItem } from '@patternfly/react-core';
 
 /**
@@ -53,7 +53,7 @@ export const ConditionsSection: React.FC<ConditionsSectionProps> = ({ conditions
             <Td>{condition.type}</Td>
             <Td>{getStatusLabel(condition.status)}</Td>
             <Td>
-              <Timestamp timestamp={condition.lastTransitionTime} />
+              <ConsoleTimestamp timestamp={condition.lastTransitionTime} />
             </Td>
             <Td>{condition.reason}</Td>
             <Td modifier="truncate">{condition?.message || '-'}</Td>

diff --git a/...s/NetworkMaps/views/details/components/DetailsSection/components/CreatedAtDetailsItem.tsx b/...s/NetworkMaps/views/details/components/DetailsSection/components/CreatedAtDetailsItem.tsx
@@ -1,9 +1,8 @@
 import React from 'react';
+import { ConsoleTimestamp } from 'src/components/ConsoleTimestamp';
 import { DetailsItem } from 'src/modules/Providers/utils';
 import { useForkliftTranslation } from 'src/utils/i18n';
 
-import { Timestamp } from '@openshift-console/dynamic-plugin-sdk';
-
 import { NetworkDetailsItemProps } from './NetworkDetailsItemProps';
 
 export const CreatedAtDetailsItem: React.FC<NetworkDetailsItemProps> = ({
@@ -23,7 +22,7 @@ export const CreatedAtDetailsItem: React.FC<NetworkDetailsItemProps> = ({
   return (
     <DetailsItem
       title={t('Created at')}
-      content={<Timestamp timestamp={resource?.metadata?.creationTimestamp} />}
+      content={<ConsoleTimestamp timestamp={resource?.metadata?.creationTimestamp} />}
       moreInfoLink={moreInfoLink ?? defaultMoreInfoLink}
       helpContent={helpContent ?? defaultHelpContent}
       crumbs={['metadata', 'creationTimestamp']}

diff --git a/...ages/forklift-console-plugin/src/modules/NetworkMaps/views/list/components/StatusCell.tsx b/...ages/forklift-console-plugin/src/modules/NetworkMaps/views/list/components/StatusCell.tsx
@@ -7,11 +7,8 @@ import { useForkliftTranslation } from 'src/utils/i18n';
 
 import { getResourceFieldValue } from '@kubev2v/common';
 import { NetworkMapModelRef } from '@kubev2v/types';
-import {
-  GreenCheckCircleIcon,
-  RedExclamationCircleIcon,
-} from '@openshift-console/dynamic-plugin-sdk';
 import { Button, Popover, Spinner, Text, TextContent, TextVariants } from '@patternfly/react-core';
+import { CheckCircleIcon, ExclamationCircleIcon } from '@patternfly/react-icons';
 
 import { CellProps } from './CellProps';
 
@@ -78,9 +75,9 @@ export const ErrorStatusCell: React.FC<CellProps & { t: TFunction }> = ({ t, dat
 };
 
 const statusIcons = {
-  Ready: <GreenCheckCircleIcon />,
+  Ready: <CheckCircleIcon color="#3E8635" />,
   'Not Ready': <Spinner size="sm" />,
-  Critical: <RedExclamationCircleIcon />,
+  Critical: <ExclamationCircleIcon color="#C9190B" />,
 };
 
 const phaseLabels = {

diff --git a/...forklift-console-plugin/src/modules/Overview/views/overview/components/OperatorStatus.tsx b/...forklift-console-plugin/src/modules/Overview/views/overview/components/OperatorStatus.tsx
@@ -1,20 +1,20 @@
 import React from 'react';
 
-import {
-  GreenCheckCircleIcon,
-  RedExclamationCircleIcon,
-  YellowExclamationTriangleIcon,
-} from '@openshift-console/dynamic-plugin-sdk';
 import { Flex, FlexItem } from '@patternfly/react-core';
+import {
+  CheckCircleIcon,
+  ExclamationCircleIcon,
+  ExclamationTriangleIcon,
+} from '@patternfly/react-icons';
 
 interface OperatorStatusProps {
   status: string;
 }
 
 export const statusIcons = {
-  Failure: <RedExclamationCircleIcon />,
-  Successful: <GreenCheckCircleIcon />,
-  Running: <YellowExclamationTriangleIcon />,
+  Failure: <ExclamationCircleIcon color="#C9190B" />,
+  Successful: <CheckCircleIcon color="#3E8635" />,
+  Running: <ExclamationTriangleIcon color="#F0AB00" />,
 };
 
 const statusLabels = {

diff --git a/...ages/forklift-console-plugin/src/modules/Overview/views/overview/components/PodsTable.tsx b/...ages/forklift-console-plugin/src/modules/Overview/views/overview/components/PodsTable.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
+import { ConsoleTimestamp } from 'src/components/ConsoleTimestamp';
 import StatusIcon from 'src/components/status/StatusIcon';
 import { useForkliftTranslation } from 'src/utils/i18n';
 
 import { TableComposable, Tbody, Td, Th, Thead, Tr } from '@kubev2v/common';
 import { IoK8sApiCoreV1Pod } from '@kubev2v/types';
-import { ResourceLink, Timestamp } from '@openshift-console/dynamic-plugin-sdk';
+import { ResourceLink } from '@openshift-console/dynamic-plugin-sdk';
 import { HelperText, HelperTextItem, Split, SplitItem } from '@patternfly/react-core';
 
 export const PodsTable: React.FC<PodsTableProps> = ({ pods, showOwner }) => {
@@ -53,7 +54,7 @@ export const PodsTable: React.FC<PodsTableProps> = ({ pods, showOwner }) => {
             )}
             <Td>{getStatusLabel(pod?.status?.phase)}</Td>
             <Td>
-              <Timestamp timestamp={pod?.metadata?.creationTimestamp} />
+              <ConsoleTimestamp timestamp={pod?.metadata?.creationTimestamp} />
             </Td>
           </Tr>
         ))}

diff --git a/...ft-console-plugin/src/modules/Overview/views/overview/tabs/Details/cards/OperatorCard.tsx b/...ft-console-plugin/src/modules/Overview/views/overview/tabs/Details/cards/OperatorCard.tsx
@@ -1,10 +1,11 @@
 import React, { FC } from 'react';
+import { ConsoleTimestamp } from 'src/components/ConsoleTimestamp';
 import { getOperatorPhase } from 'src/modules/Overview/utils/helpers/getOperatorPhase';
 import { DetailsItem } from 'src/modules/Providers/utils';
 import { useForkliftTranslation } from 'src/utils/i18n';
 
 import { V1beta1ForkliftController } from '@kubev2v/types';
-import { ResourceLink, Timestamp } from '@openshift-console/dynamic-plugin-sdk';
+import { ResourceLink } from '@openshift-console/dynamic-plugin-sdk';
 import {
   Card,
   CardBody,
@@ -57,7 +58,7 @@ export const OperatorCard: FC<OperatorCardProps> = ({ obj }) => {
 
           <DetailsItem
             title={t('Created at')}
-            content={<Timestamp timestamp={obj?.metadata?.creationTimestamp} />}
+            content={<ConsoleTimestamp timestamp={obj?.metadata?.creationTimestamp} />}
             helpContent={
               <Text>
                 {t(

diff --git a/...plugin/src/modules/Plans/views/details/components/ConditionsSection/ConditionsSection.tsx b/...plugin/src/modules/Plans/views/details/components/ConditionsSection/ConditionsSection.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
+import { ConsoleTimestamp } from 'src/components/ConsoleTimestamp';
 import { useForkliftTranslation } from 'src/utils/i18n';
 
 import { TableComposable, Tbody, Td, Th, Thead, Tr } from '@kubev2v/common';
 import { K8sResourceCondition } from '@kubev2v/types';
-import { Timestamp } from '@openshift-console/dynamic-plugin-sdk';
 import { HelperText, HelperTextItem } from '@patternfly/react-core';
 
 /**
@@ -53,7 +53,7 @@ export const ConditionsSection: React.FC<ConditionsSectionProps> = ({ conditions
             <Td>{condition.type}</Td>
             <Td>{getStatusLabel(condition.status)}</Td>
             <Td>
-              <Timestamp timestamp={condition.lastTransitionTime} />
+              <ConsoleTimestamp timestamp={condition.lastTransitionTime} />
             </Td>
             <Td>{condition.reason}</Td>
             <Td modifier="truncate">{condition?.message || '-'}</Td>

diff --git a/...modules/Plans/views/details/components/DetailsSection/components/CreatedAtDetailsItem.tsx b/...modules/Plans/views/details/components/DetailsSection/components/CreatedAtDetailsItem.tsx
@@ -1,9 +1,8 @@
 import React from 'react';
+import { ConsoleTimestamp } from 'src/components/ConsoleTimestamp';
 import { DetailsItem } from 'src/modules/Providers/utils';
 import { useForkliftTranslation } from 'src/utils/i18n';
 
-import { Timestamp } from '@openshift-console/dynamic-plugin-sdk';
-
 import { PlanDetailsItemProps } from './PlanDetailsItemProps';
 
 export const CreatedAtDetailsItem: React.FC<PlanDetailsItemProps> = ({
@@ -23,7 +22,7 @@ export const CreatedAtDetailsItem: React.FC<PlanDetailsItemProps> = ({
   return (
     <DetailsItem
       title={t('Created at')}
-      content={<Timestamp timestamp={resource?.metadata?.creationTimestamp} />}
+      content={<ConsoleTimestamp timestamp={resource?.metadata?.creationTimestamp} />}
       moreInfoLink={moreInfoLink ?? defaultMoreInfoLink}
       helpContent={helpContent ?? defaultHelpContent}
       crumbs={['metadata', 'creationTimestamp']}

diff --git a/...c/modules/Plans/views/details/components/MigrationsSection/components/MigrationsTable.tsx b/...c/modules/Plans/views/details/components/MigrationsSection/components/MigrationsTable.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { ConsoleTimestamp } from 'src/components/ConsoleTimestamp';
 import {
   getMigrationVmsCounts,
   getPhaseLabel,
@@ -13,7 +14,7 @@ import {
   PlanModelGroupVersionKind,
   V1beta1Migration,
 } from '@kubev2v/types';
-import { ResourceLink, Timestamp } from '@openshift-console/dynamic-plugin-sdk';
+import { ResourceLink } from '@openshift-console/dynamic-plugin-sdk';
 import {
   HelperText,
   HelperTextItem,
@@ -73,10 +74,10 @@ export const MigrationsTable: React.FC<MigrationTableProps> = ({ migrations, sho
               <VMsLabel migration={migration} />
             </Td>
             <Td>
-              <Timestamp timestamp={migration?.status?.started} />
+              <ConsoleTimestamp timestamp={migration?.status?.started} />
             </Td>
             <Td>
-              <Timestamp timestamp={migration?.status?.completed} />
+              <ConsoleTimestamp timestamp={migration?.status?.completed} />
             </Td>
           </Tr>
         ))}