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

Jump to bottom

feat(ui): allow to display date in absolute format #12986

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
+17 −4
Draft

feat(ui): allow to display date in absolute format #12986

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 2 additions & 2 deletions ui/src/app/shared/components/timestamp.tsx
View file
Open in desktop
Expand Up @@ -3,7 +3,7 @@ import * as React from 'react';

import {ago} from '../duration';

export function Timestamp({date}: {date: Date | string | number}) {
export function Timestamp({date, displayFullDate = false}: {date: Date | string | number; displayFullDate?: boolean}) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this should be passed through context, as it should be a global, not a prop passed through many components

const tooltip = (utc: Date | string | number) => {
return utc.toString() + '\n' + new Date(utc.toString()).toLocaleString();
};
Expand All @@ -13,7 +13,7 @@ export function Timestamp({date}: {date: Date | string | number}) {
'-'
) : (
<span title={tooltip(date)}>
<Ticker intervalMs={1000}>{() => ago(new Date(date))}</Ticker>
<Ticker intervalMs={1000}>{() => (displayFullDate ? new Date(date).toISOString() : ago(new Date(date)))}</Ticker>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This displays how long ago a date was, not the date itself. If anything you'd want to do this conversion on the date after ago

</span>
)}
</span>
Expand Down
12 changes: 12 additions & 0 deletions ui/src/app/workflows/components/workflows-list/workflows-list.tsx
View file
Open in desktop
Expand Up @@ -81,6 +81,7 @@ export function WorkflowsList({match, location, history}: RouteComponentProps<an
const [links, setLinks] = useState<models.Link[]>([]);
const [columns, setColumns] = useState<models.Column[]>([]);
const [error, setError] = useState<Error>();
const [displayFullDate, setDisplayFullDate] = useState(false);

const batchActionDisabled = useMemo<Actions.OperationDisabled>(() => {
const nowDisabled: any = {...allBatchActionsEnabled};
Expand Down Expand Up @@ -278,6 +279,7 @@ export function WorkflowsList({match, location, history}: RouteComponentProps<an
key={wf.metadata.uid}
checked={selectedWorkflows.has(wf.metadata.uid)}
columns={columns}
displayFullDate={displayFullDate}
onChange={key => {
const value = `${key}=${wf.metadata?.labels[key]}`;
let newLabels: string[];
Expand Down Expand Up @@ -308,6 +310,16 @@ export function WorkflowsList({match, location, history}: RouteComponentProps<an
);
})}
</div>
<label htmlFor='date_format_checkbox'>Show absolute date</label>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why should this be isolated to the WorkflowsList page? There are other pages with dates.

In #12943 (comment), I suggested in a global settings page, and also storing that in localStorage, not just temporary state.

<input
id='date_format_checkbox'
type='checkbox'
checked={displayFullDate}
onClick={e => {
e.stopPropagation();
}}
onChange={() => setDisplayFullDate(!displayFullDate)}
/>
<PaginationPanel onChange={setPagination} pagination={pagination} numRecords={(filteredWorkflows || []).length} />
</>
)}
Expand Down
5 changes: 3 additions & 2 deletions ui/src/app/workflows/components/workflows-row/workflows-row.tsx
View file
Open in desktop
Expand Up @@ -22,6 +22,7 @@ interface WorkflowsRowProps {
select: (wf: Workflow) => void;
checked: boolean;
columns: models.Column[];
displayFullDate?: boolean;
}

export function WorkflowsRow(props: WorkflowsRowProps) {
Expand Down Expand Up @@ -61,10 +62,10 @@ export function WorkflowsRow(props: WorkflowsRowProps) {
</Link>
<div className='columns small-1'>{wf.metadata.namespace}</div>
<div className='columns small-1'>
<Timestamp date={wf.status.startedAt} />
<Timestamp date={wf.status.startedAt} displayFullDate={props.displayFullDate} />
</div>
<div className='columns small-1'>
<Timestamp date={wf.status.finishedAt} />
<Timestamp date={wf.status.finishedAt} displayFullDate={props.displayFullDate} />
</div>
<div className='columns small-1'>
<Ticker>{() => <DurationPanel phase={wf.status.phase} duration={wfDuration(wf.status)} estimatedDuration={wf.status.estimatedDuration} />}</Ticker>
Expand Down