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): Add start/end workflows ISO display switch #13284

Merged
merged 4 commits into from
Aug 28, 2024
Merged

feat(ui): Add start/end workflows ISO display switch #13284

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
80b5d60
feat: add start/end workflows ISO display switch
Adrien-D Jun 30, 2024
40f0258
feat: improve timestamp switch management
Adrien-D Jul 15, 2024
d3cea28
fix: timestamp display on cron workflow list
Adrien-D Jul 29, 2024
f02c44b
feat: update title depending on ISO/relative
Adrien-D Aug 21, 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
11 changes: 8 additions & 3 deletions ui/src/app/cluster-workflow-templates/cluster-workflow-template-list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import {ErrorNotice} from '../shared/components/error-notice';
import {ExampleManifests} from '../shared/components/example-manifests';
import {InfoIcon} from '../shared/components/fa-icons';
import {Loading} from '../shared/components/loading';
import {Timestamp} from '../shared/components/timestamp';
import {Timestamp, TimestampSwitch} from '../shared/components/timestamp';
import {useCollectEvent} from '../shared/use-collect-event';
import {ZeroState} from '../shared/components/zero-state';
import {Context} from '../shared/context';
Expand All @@ -20,6 +20,7 @@ import {services} from '../shared/services';
import {ClusterWorkflowTemplateCreator} from './cluster-workflow-template-creator';

import './cluster-workflow-template-list.scss';
import useTimestamp, {TIMESTAMP_KEYS} from '../shared/use-timestamp';
agilgur5 marked this conversation as resolved.
Show resolved Hide resolved

export function ClusterWorkflowTemplateList({history, location}: RouteComponentProps<any>) {
const {navigation} = useContext(Context);
Expand Down Expand Up @@ -51,6 +52,8 @@ export function ClusterWorkflowTemplateList({history, location}: RouteComponentP

useCollectEvent('openedClusterWorkflowTemplateList');

const [storedDisplayISOFormat, setStoredDisplayISOFormat] = useTimestamp(TIMESTAMP_KEYS.CLUSTER_WORKFLOW_TEMPLATE_LIST);
Copy link
Contributor

Choose a reason for hiding this comment

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

similarly, the existing style has all consts at the top of the component, while this is an outlier. please follow the existing style


function renderTemplates() {
if (error) {
return <ErrorNotice error={error} />;
Expand All @@ -75,7 +78,9 @@ export function ClusterWorkflowTemplateList({history, location}: RouteComponentP
<div className='row argo-table-list__head'>
<div className='columns small-1' />
<div className='columns small-5'>NAME</div>
<div className='columns small-3'>CREATED</div>
<div className='columns small-3'>
CREATED <TimestampSwitch storedDisplayISOFormat={storedDisplayISOFormat} setStoredDisplayISOFormat={setStoredDisplayISOFormat} />
</div>
</div>
{templates.map(t => (
<Link className='row argo-table-list__row' key={t.metadata.uid} to={uiUrl(`cluster-workflow-templates/${t.metadata.name}`)}>
Expand All @@ -84,7 +89,7 @@ export function ClusterWorkflowTemplateList({history, location}: RouteComponentP
</div>
<div className='columns small-5'>{t.metadata.name}</div>
<div className='columns small-3'>
<Timestamp date={t.metadata.creationTimestamp} />
<Timestamp date={t.metadata.creationTimestamp} displayISOFormat={storedDisplayISOFormat} />
</div>
</Link>
))}
Expand Down
41 changes: 30 additions & 11 deletions ui/src/app/cron-workflows/cron-workflow-list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import {ErrorNotice} from '../shared/components/error-notice';
import {ExampleManifests} from '../shared/components/example-manifests';
import {InfoIcon} from '../shared/components/fa-icons';
import {Loading} from '../shared/components/loading';
import {Timestamp} from '../shared/components/timestamp';
import {Timestamp, TimestampSwitch} from '../shared/components/timestamp';
import {useCollectEvent} from '../shared/use-collect-event';
import {ZeroState} from '../shared/components/zero-state';
import {Context} from '../shared/context';
Expand All @@ -27,6 +27,7 @@ import {CronWorkflowFilters} from './cron-workflow-filters';
import {PrettySchedule} from './pretty-schedule';

import './cron-workflow-list.scss';
import useTimestamp, {TIMESTAMP_KEYS} from '../shared/use-timestamp';
agilgur5 marked this conversation as resolved.
Show resolved Hide resolved

const learnMore = <a href='https://argo-workflows.readthedocs.io/en/latest/cron-workflows/'>Learn more</a>;

Expand All @@ -40,6 +41,9 @@ export function CronWorkflowList({match, location, history}: RouteComponentProps
const [labels, setLabels] = useState<string[]>([]);
const [states, setStates] = useState(['Running', 'Suspended']); // check all by default

const [storedDisplayISOFormatCreation, setStoredDisplayISOFormatCreation] = useTimestamp(TIMESTAMP_KEYS.CRON_WORKFLOW_LIST_CREATION);
const [storedDisplayISOFormatNextScheduled, setStoredDisplayISOFormatNextScheduled] = useTimestamp(TIMESTAMP_KEYS.CRON_WORKFLOW_LIST_NEXT_SCHEDULED);

useEffect(
useQueryParams(history, p => {
setSidePanel(p.get('sidePanel') === 'true');
Expand Down Expand Up @@ -135,25 +139,34 @@ export function CronWorkflowList({match, location, history}: RouteComponentProps
<div className='argo-table-list'>
<div className='row argo-table-list__head'>
<div className='columns small-1' />
<div className='columns small-3'>NAME</div>
<div className='columns small-2'>NAME</div>
<div className='columns small-2'>NAMESPACE</div>
<div className='columns small-1'>TimeZone</div>
<div className='columns small-1'>SCHEDULE</div>
<div className='columns small-2' />
<div className='columns small-1'>CREATED</div>
<div className='columns small-1'>NEXT RUN</div>
<div className='columns small-1' />
<div className='columns small-2'>
CREATED{' '}
<TimestampSwitch storedDisplayISOFormat={storedDisplayISOFormatCreation} setStoredDisplayISOFormat={setStoredDisplayISOFormatCreation} />
</div>
<div className='columns small-2'>
NEXT RUN{' '}
<TimestampSwitch
storedDisplayISOFormat={storedDisplayISOFormatNextScheduled}
setStoredDisplayISOFormat={setStoredDisplayISOFormatNextScheduled}
/>
</div>
</div>
{cronWorkflows.map(w => (
<Link
className='row argo-table-list__row'
key={`${w.metadata.namespace}/${w.metadata.name}`}
to={uiUrl(`cron-workflows/${w.metadata.namespace}/${w.metadata.name}`)}>
<div className='columns small-1'>{w.spec.suspend ? <i className='fa fa-pause' /> : <i className='fa fa-clock' />}</div>
<div className='columns small-3'>
<div className='columns small-2'>
{w.metadata.annotations?.[ANNOTATION_TITLE] ?? w.metadata.name}
{w.metadata.annotations?.[ANNOTATION_DESCRIPTION] ? <p>{w.metadata.annotations[ANNOTATION_DESCRIPTION]}</p> : null}
</div>
<div className='columns small-2'>{w.metadata.namespace}</div>
<div className='columns small-1'>{w.metadata.namespace}</div>
<div className='columns small-1'>{w.spec.timezone}</div>
<div className='columns small-1'>
{w.spec.schedule != ''
Expand All @@ -179,11 +192,17 @@ export function CronWorkflowList({match, location, history}: RouteComponentProps
</>
)}
</div>
<div className='columns small-1'>
<Timestamp date={w.metadata.creationTimestamp} />
<div className='columns small-2'>
<Timestamp date={w.metadata.creationTimestamp} displayISOFormat={storedDisplayISOFormatCreation} />
</div>
<div className='columns small-1'>
{w.spec.suspend ? '' : <Ticker intervalMs={1000}>{() => <Timestamp date={getCronNextScheduledTime(w.spec)} />}</Ticker>}
<div className='columns small-2'>
{w.spec.suspend ? (
''
) : (
<Ticker intervalMs={1000}>
{() => <Timestamp date={getCronNextScheduledTime(w.spec)} displayISOFormat={storedDisplayISOFormatNextScheduled} />}
</Ticker>
)}
</div>
</Link>
))}
Expand Down
3 changes: 2 additions & 1 deletion ui/src/app/cron-workflows/cron-workflow-status-viewer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {Timestamp} from '../shared/components/timestamp';
import {ConditionsPanel} from '../shared/conditions-panel';
import {WorkflowLink} from '../workflows/components/workflow-link';
import {PrettySchedule} from './pretty-schedule';
import {TIMESTAMP_KEYS} from '../shared/use-timestamp';
agilgur5 marked this conversation as resolved.
Show resolved Hide resolved

export function CronWorkflowStatusViewer({spec, status}: {spec: CronWorkflowSpec; status: CronWorkflowStatus}) {
if (status === null) {
Expand Down Expand Up @@ -35,7 +36,7 @@ export function CronWorkflowStatusViewer({spec, status}: {spec: CronWorkflowSpec
</>
)
},
{title: 'Last Scheduled Time', value: <Timestamp date={status.lastScheduledTime} />},
{title: 'Last Scheduled Time', value: <Timestamp date={status.lastScheduledTime} timestampKey={TIMESTAMP_KEYS.CRON_WORKFLOW_STATUS_LAST_SCHEDULED} />},
{title: 'Conditions', value: <ConditionsPanel conditions={status.conditions} />}
].map(attr => (
<div className='row white-box__details-row' key={attr.title}>
Expand Down
11 changes: 8 additions & 3 deletions ui/src/app/event-sources/event-source-list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import {ErrorNotice} from '../shared/components/error-notice';
import {Node} from '../shared/components/graph/types';
import {Loading} from '../shared/components/loading';
import {NamespaceFilter} from '../shared/components/namespace-filter';
import {Timestamp} from '../shared/components/timestamp';
import {Timestamp, TimestampSwitch} from '../shared/components/timestamp';
import {useCollectEvent} from '../shared/use-collect-event';
import {ZeroState} from '../shared/components/zero-state';
import {Context} from '../shared/context';
Expand All @@ -26,6 +26,7 @@ import {Utils} from '../shared/utils';
import {EventsPanel} from '../workflows/components/events-panel';
import {EventSourceCreator} from './event-source-creator';
import {EventSourceLogsViewer} from './event-source-log-viewer';
import useTimestamp, {TIMESTAMP_KEYS} from '../shared/use-timestamp';
agilgur5 marked this conversation as resolved.
Show resolved Hide resolved

const learnMore = <a href='https://argoproj.github.io/argo-events/concepts/event_source/'>Learn more</a>;

Expand Down Expand Up @@ -88,6 +89,8 @@ export function EventSourceList({match, location, history}: RouteComponentProps<

useCollectEvent('openedEventSourceList');

const [storedDisplayISOFormat, setStoredDisplayISOFormat] = useTimestamp(TIMESTAMP_KEYS.EVENT_SOURCE_LIST_CREATION);

return (
<Page
title='EventSources'
Expand Down Expand Up @@ -126,7 +129,9 @@ export function EventSourceList({match, location, history}: RouteComponentProps<
<div className='columns small-1' />
<div className='columns small-4'>NAME</div>
<div className='columns small-3'>NAMESPACE</div>
<div className='columns small-2'>CREATED</div>
<div className='columns small-2'>
CREATED <TimestampSwitch storedDisplayISOFormat={storedDisplayISOFormat} setStoredDisplayISOFormat={setStoredDisplayISOFormat} />
</div>
<div className='columns small-2'>LOGS</div>
</div>
{eventSources.map(es => (
Expand All @@ -140,7 +145,7 @@ export function EventSourceList({match, location, history}: RouteComponentProps<
<div className='columns small-4'>{es.metadata.name}</div>
<div className='columns small-3'>{es.metadata.namespace}</div>
<div className='columns small-2'>
<Timestamp date={es.metadata.creationTimestamp} />
<Timestamp date={es.metadata.creationTimestamp} displayISOFormat={storedDisplayISOFormat} />
</div>
<div className='columns small-2'>
<div
Expand Down
11 changes: 8 additions & 3 deletions ui/src/app/sensors/sensor-list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import {ErrorNotice} from '../shared/components/error-notice';
import {Node} from '../shared/components/graph/types';
import {Loading} from '../shared/components/loading';
import {NamespaceFilter} from '../shared/components/namespace-filter';
import {Timestamp} from '../shared/components/timestamp';
import {Timestamp, TimestampSwitch} from '../shared/components/timestamp';
import {useCollectEvent} from '../shared/use-collect-event';
import {ZeroState} from '../shared/components/zero-state';
import {Context} from '../shared/context';
Expand All @@ -24,6 +24,7 @@ import {Utils} from '../shared/utils';
import {SensorCreator} from './sensor-creator';
import {SensorSidePanel} from './sensor-side-panel';
import {Utils as EventsUtils} from './utils';
import useTimestamp, {TIMESTAMP_KEYS} from '../shared/use-timestamp';
agilgur5 marked this conversation as resolved.
Show resolved Hide resolved

const learnMore = <a href='https://argoproj.github.io/argo-events/concepts/sensor/'>Learn more</a>;

Expand Down Expand Up @@ -83,6 +84,8 @@ export function SensorList({match, location, history}: RouteComponentProps<any>)
const loading = !error && !sensors;
const zeroState = (sensors || []).length === 0;

const [storedDisplayISOFormat, setStoredDisplayISOFormat] = useTimestamp(TIMESTAMP_KEYS.SENSOR_LIST_CREATION);

return (
<Page
title='Sensors'
Expand Down Expand Up @@ -121,7 +124,9 @@ export function SensorList({match, location, history}: RouteComponentProps<any>)
<div className='columns small-1' />
<div className='columns small-4'>NAME</div>
<div className='columns small-3'>NAMESPACE</div>
<div className='columns small-2'>CREATED</div>
<div className='columns small-2'>
CREATED <TimestampSwitch storedDisplayISOFormat={storedDisplayISOFormat} setStoredDisplayISOFormat={setStoredDisplayISOFormat} />
</div>
<div className='columns small-2'>LOGS</div>
</div>
{sensors.map(s => (
Expand All @@ -138,7 +143,7 @@ export function SensorList({match, location, history}: RouteComponentProps<any>)
<div className='columns small-4'>{s.metadata.name}</div>
<div className='columns small-3'>{s.metadata.namespace}</div>
<div className='columns small-2'>
<Timestamp date={s.metadata.creationTimestamp} />
<Timestamp date={s.metadata.creationTimestamp} displayISOFormat={storedDisplayISOFormat} />
</div>
<div className='columns small-2'>
<div
Expand Down
61 changes: 50 additions & 11 deletions ui/src/app/shared/components/timestamp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,60 @@
import {Ticker} from 'argo-ui/src/components/ticker';
import {Tooltip} from 'argo-ui/src/components/tooltip/tooltip';
import * as React from 'react';

import {ago} from '../duration';
import useTimestamp, {TIMESTAMP_KEYS} from '../use-timestamp';

interface Props {
date: Date | string | number;
timestampKey?: TIMESTAMP_KEYS;
displayLocalDateTime?: boolean;
displayISOFormat?: boolean;
}

export function Timestamp({date, timestampKey, displayLocalDateTime, displayISOFormat}: Props) {
const [storedDisplayISOFormat, setStoredDisplayISOFormat] = useTimestamp(timestampKey);

const displayISOFormatValue = displayISOFormat ?? storedDisplayISOFormat;

if (date === null || date === undefined) return <span>-</span>;

export function Timestamp({date}: {date: Date | string | number}) {
const tooltip = (utc: Date | string | number) => {
return utc.toString() + '\n' + new Date(utc.toString()).toLocaleString();
};
return (
<span>
{date === null || date === undefined ? (
'-'
) : (
<span title={tooltip(date)}>
<Ticker intervalMs={1000}>{() => ago(new Date(date))}</Ticker>
</span>
)}
<span title={date.toString()}>
{displayISOFormatValue ? (
new Date(date.toString()).toISOString()
) : (
<>
{displayLocalDateTime ? (
<>
{new Date(date.toString()).toLocaleString()} (<Ticker intervalMs={1000}>{() => ago(new Date(date))}</Ticker>)
</>
) : (
<Ticker intervalMs={1000}>{() => ago(new Date(date))}</Ticker>
)}
</>
)}
</span>
{timestampKey ? <TimestampSwitch storedDisplayISOFormat={storedDisplayISOFormat} setStoredDisplayISOFormat={setStoredDisplayISOFormat} /> : null}
</span>
);
}

export function TimestampSwitch({storedDisplayISOFormat, setStoredDisplayISOFormat}: {storedDisplayISOFormat: boolean; setStoredDisplayISOFormat: (value: boolean) => void}) {
return (
<Tooltip content={storedDisplayISOFormat ? 'Switch to relative time format' : 'Switch to ISO time format'}>
<a>
<i
Comment on lines +47 to +48
Copy link
Contributor

Choose a reason for hiding this comment

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

This isn't a button nor has the role of a button, so this will cause accessibility issues and keyboard limitations. Related: argoproj/argo-ui#221

className={'fa fa-clock'}
style={{marginLeft: 4}}
onClick={e => {
e.stopPropagation();
e.preventDefault();
setStoredDisplayISOFormat(!storedDisplayISOFormat);
}}
/>
</a>
</Tooltip>
);
}
Loading
Loading