Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(misc): clean up demos - Timestamp date prop, icon status colors #10471

Merged
merged 3 commits into from
Jun 11, 2024
Merged

fix(misc): clean up demos - Timestamp date prop, icon status colors #10471

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6f46b49
fix(misc): pass correct date prop to Timestamp
adamviktora May 29, 2024
b5dbe1a
fix(Card demos): use correct status color
adamviktora May 29, 2024
09861f1
fix(Card demo): add status icon color for Status Tabbed demo
adamviktora May 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
113 changes: 0 additions & 113 deletions packages/react-core/src/demos/CustomMenus/examples/ComposableDateSelect.tsx
View file
Open in desktop

This file was deleted.

38 changes: 25 additions & 13 deletions packages/react-core/src/demos/CustomMenus/examples/DateSelectDemo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,27 +36,39 @@ export const DateSelectDemo: React.FunctionComponent = () => {
3: 'Last 14 days '
};

const getDateNDaysBefore = (date: Date, days: number) => new Date(new Date().setDate(date.getDate() - days));

const dates = {
0: date,
1: getDateNDaysBefore(date, 1),
2: getDateNDaysBefore(date, 7),
3: getDateNDaysBefore(date, 14)
};

const dateText = {
0: <Timestamp>({dateString(date)})</Timestamp>,
1: (
<Timestamp>
({dateString(new Date(new Date().setDate(date.getDate() - 1)))} - {dateString(date)})
</Timestamp>
),
0: <Timestamp date={dates[0]}>({dateString(dates[0])})</Timestamp>,
1: <Timestamp date={dates[1]}>({dateString(dates[1])})</Timestamp>,
2: (
<Timestamp>
({dateString(new Date(new Date().setDate(date.getDate() - 7)))} - {dateString(date)})
</Timestamp>
<>
<Timestamp date={dates[2]}>
({dateString(dates[2])}
&nbsp;-&nbsp;
</Timestamp>
<Timestamp date={date}>{dateString(date)})</Timestamp>
</>
),
3: (
<Timestamp>
({dateString(new Date(new Date().setDate(date.getDate() - 14)))} - {dateString(date)})
</Timestamp>
<>
<Timestamp date={dates[3]}>
({dateString(dates[3])}
&nbsp;-&nbsp;
</Timestamp>
<Timestamp date={date}>{dateString(date)})</Timestamp>
</>
)
};

return (
// eslint-disable-next-line no-console
<Select
isOpen={isOpen}
onOpenChange={(isOpen) => setIsOpen(isOpen)}
Expand Down
23 changes: 15 additions & 8 deletions packages/react-core/src/demos/examples/Card/CardEventsView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import {
Flex,
FlexItem,
Gallery,
Icon,
MenuToggle,
Select,
SelectList,
Expand All @@ -39,7 +40,7 @@ export const CardEventsView: React.FunctionComponent = () => {
Error
</SelectOption>
<SelectOption value="Warning" key="option3">
Error
Warning
</SelectOption>
</SelectList>
);
Expand Down Expand Up @@ -76,7 +77,9 @@ export const CardEventsView: React.FunctionComponent = () => {
<DescriptionListTerm>
<Flex flexWrap={{ default: 'nowrap' }}>
<FlexItem>
<ExclamationCircleIcon aria-hidden="true" />
<Icon status="danger">
<ExclamationCircleIcon aria-hidden="true" />
</Icon>
</FlexItem>
<FlexItem>
<span>Readiness probe failed</span>
Expand All @@ -88,14 +91,16 @@ export const CardEventsView: React.FunctionComponent = () => {
connection refused
</DescriptionListDescription>
<DescriptionListDescription>
<Timestamp> Jun 17, 11:02 am </Timestamp>
<Timestamp date={new Date('2023-06-17T11:02')} dateFormat="medium" timeFormat="short" />
</DescriptionListDescription>
</DescriptionListGroup>
<DescriptionListGroup>
<DescriptionListTerm>
<Flex flexWrap={{ default: 'nowrap' }}>
<FlexItem>
<CheckCircleIcon aria-hidden="true" />
<Icon status="success">
<CheckCircleIcon aria-hidden="true" />
</Icon>
</FlexItem>
<FlexItem>
<span>Successful assignment</span>
Expand All @@ -106,7 +111,7 @@ export const CardEventsView: React.FunctionComponent = () => {
Successfully assigned default/example to ip-10-0-130-149.ec2.internal
</DescriptionListDescription>
<DescriptionListDescription>
<Timestamp> Jun 17, 11:13 am </Timestamp>
<Timestamp date={new Date('2023-06-17T11:13')} dateFormat="medium" timeFormat="short" />
</DescriptionListDescription>
</DescriptionListGroup>
<DescriptionListGroup>
Expand All @@ -122,14 +127,16 @@ export const CardEventsView: React.FunctionComponent = () => {
</DescriptionListTerm>
<DescriptionListDescription>Pulling image "openshift/hello-openshift"</DescriptionListDescription>
<DescriptionListDescription>
<Timestamp> Jun 17, 10:59 am </Timestamp>
<Timestamp date={new Date('2023-06-17T10:59')} dateFormat="medium" timeFormat="short" />
</DescriptionListDescription>
</DescriptionListGroup>
<DescriptionListGroup>
<DescriptionListTerm>
<Flex flexWrap={{ default: 'nowrap' }}>
<FlexItem>
<CheckCircleIcon aria-hidden="true" />
<Icon status="success">
<CheckCircleIcon aria-hidden="true" />
</Icon>
</FlexItem>
<FlexItem>
<span>Created container</span>
Expand All @@ -138,7 +145,7 @@ export const CardEventsView: React.FunctionComponent = () => {
</DescriptionListTerm>
<DescriptionListDescription>Created container hello-openshift</DescriptionListDescription>
<DescriptionListDescription>
<Timestamp> Jun 17, 10:45 am </Timestamp>
<Timestamp date={new Date('2023-06-17T10:45')} dateFormat="medium" timeFormat="short" />
</DescriptionListDescription>
</DescriptionListGroup>
</DescriptionList>
Expand Down
8 changes: 4 additions & 4 deletions packages/react-core/src/demos/examples/Card/CardLogView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ export const CardLogView: React.FunctionComponent = () => {
connection refused
</DescriptionListDescription>
<DescriptionListDescription>
<Timestamp> Jun 17, 11:02 am </Timestamp>
<Timestamp date={new Date('2023-06-17T11:02')} dateFormat="medium" timeFormat="short" />
</DescriptionListDescription>
</DescriptionListGroup>
<DescriptionListGroup>
Expand All @@ -88,21 +88,21 @@ export const CardLogView: React.FunctionComponent = () => {
Successfully assigned default/example to ip-10-0-130-149.ec2.internal
</DescriptionListDescription>
<DescriptionListDescription>
<Timestamp> Jun 17, 11:13 am </Timestamp>
<Timestamp date={new Date('2023-06-17T11:13')} dateFormat="medium" timeFormat="short" />
</DescriptionListDescription>
</DescriptionListGroup>
<DescriptionListGroup>
<DescriptionListTerm>Pulling image</DescriptionListTerm>
<DescriptionListDescription>Pulling image "openshift/hello-openshift"</DescriptionListDescription>
<DescriptionListDescription>
<Timestamp> Jun 17, 10:59 am </Timestamp>
<Timestamp date={new Date('2023-06-17T10:59')} dateFormat="medium" timeFormat="short" />
</DescriptionListDescription>
</DescriptionListGroup>
<DescriptionListGroup>
<DescriptionListTerm>Created container</DescriptionListTerm>
<DescriptionListDescription>Created container hello-openshift</DescriptionListDescription>
<DescriptionListDescription>
<Timestamp> Jun 17, 10:45 am </Timestamp>
<Timestamp date={new Date('2023-06-17T10:45')} dateFormat="medium" timeFormat="short" />
</DescriptionListDescription>
</DescriptionListGroup>
</DescriptionList>
Expand Down
29 changes: 23 additions & 6 deletions packages/react-core/src/demos/examples/Card/CardStatusTabbed.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
DescriptionListTerm,
Flex,
FlexItem,
Icon,
Tab,
TabContent,
Tabs,
Expand All @@ -23,25 +24,41 @@ const descriptionListData = [
status: 'Running',
resourceName: 'Resource name that is long and can wrap',
detail: '121 Systems',
icon: <CheckCircleIcon />
icon: (
<Icon status="success">
<CheckCircleIcon />
</Icon>
)
},
{
status: 'Ready',
status: 'Failed',
resourceName: 'Resource name that is long and can wrap',
detail: '123 Systems',
icon: <ExclamationCircleIcon />
icon: (
<Icon status="danger">
<ExclamationCircleIcon />
</Icon>
)
},
{
status: 'Running',
resourceName: 'Resource name that is long and can wrap',
detail: '122 Systems',
icon: <CheckCircleIcon />
icon: (
<Icon status="success">
<CheckCircleIcon />
</Icon>
)
},
{
status: 'Ready',
status: 'Failed',
resourceName: 'Resource name that is long and can wrap',
detail: '124 Systems',
icon: <ExclamationCircleIcon />
icon: (
<Icon status="danger">
<ExclamationCircleIcon />
</Icon>
)
}
];

Expand Down
7 changes: 5 additions & 2 deletions packages/react-core/src/demos/examples/Card/CardUtilizationDemo3.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@ import {
SelectList,
SelectOption,
MenuToggle,
MenuToggleElement
MenuToggleElement,
Icon
} from '@patternfly/react-core';
import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
import { Chart, ChartStack, ChartBar, ChartTooltip } from '@patternfly/react-charts';
Expand Down Expand Up @@ -79,7 +80,9 @@ export const CardUtilizationDemo3: React.FunctionComponent = () => {
<span>System</span>
</FlexItem>
<Flex>
<ExclamationCircleIcon aria-hidden />
<Icon status="danger">
<ExclamationCircleIcon aria-hidden />
</Icon>
<a href="#">25 incidents detected</a>
</Flex>
<FlexItem>
Expand Down
7 changes: 3 additions & 4 deletions packages/react-table/src/components/Table/examples/TableNestedHeaders.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,8 +160,7 @@ export const TableNestedHeaders: React.FunctionComponent = () => {
<Td dataLabel={columnNames.destination}>{connection.destination.podName}</Td>\
<Td dataLabel={columnNames.datetime}>
<div>
<span>{new Date(connection.timestamp).toDateString()}</span>{' '}
<Timestamp>{new Date(connection.timestamp).toLocaleTimeString()}</Timestamp>
<Timestamp dateFormat="full" timeFormat="medium" date={new Date(connection.timestamp)} />
</div>
</Td>
<Td dataLabel={columnNames.source}>
Expand All @@ -170,7 +169,7 @@ export const TableNestedHeaders: React.FunctionComponent = () => {
<span>{connection.source.port.num}</span>
</StackItem>
<StackItem>
<Timestamp>({connection.source.port.protocol})</Timestamp>
<small>({connection.source.port.protocol})</small>
</StackItem>
</Stack>
</Td>
Expand All @@ -180,7 +179,7 @@ export const TableNestedHeaders: React.FunctionComponent = () => {
<span>{connection.destination.port.num}</span>
</StackItem>
<StackItem>
<Timestamp>({connection.destination.port.protocol})</Timestamp>
<small>({connection.destination.port.protocol})</small>
</StackItem>
</Stack>
</Td>
Expand Down
Loading
Loading