Skip to content

Commit ebed7f9

Browse files
Anton GilgurJoibel
Anton Gilgur
authored and
Joibel
committed
refactor(deps): remove moment dep and usage (#12611)
Signed-off-by: Anton Gilgur <[email protected]> (cherry picked from commit 2f3d6a6)
1 parent e8f3968 commit ebed7f9

File tree

4 files changed

+38
-30
lines changed

4 files changed

+38
-30
lines changed

‎ui/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
"node": ">=20"
1717
},
1818
"dependencies": {
19-
"argo-ui": "git+https://github.com/argoproj/argo-ui.git#6de6bfedc0ec0625122dd5162371fc1932f8d428",
19+
"argo-ui": "git+https://github.com/argoproj/argo-ui.git#54f36c723d9a0e5d3386689298cbb9c27767fa00",
2020
"chart.js": "^2.9.4",
2121
"chartjs-plugin-annotation": "^0.5.7",
2222
"classnames": "^2.5.1",

‎ui/src/workflows/components/workflow-node-info/workflow-node-info.tsx

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import {Tabs} from 'argo-ui/src/components/tabs/tabs';
22
import {Ticker} from 'argo-ui/src/components/ticker';
33
import {Tooltip} from 'argo-ui/src/components/tooltip/tooltip';
4-
import moment from 'moment';
54
import * as React from 'react';
65
import {useState} from 'react';
76

@@ -23,9 +22,9 @@ import {TIMESTAMP_KEYS} from '../../../shared/use-timestamp';
2322

2423
import './workflow-node-info.scss';
2524

26-
function nodeDuration(node: models.NodeStatus, now: moment.Moment) {
27-
const endTime = node.finishedAt ? moment(node.finishedAt) : now;
28-
return endTime.diff(moment(node.startedAt)) / 1000;
25+
function nodeDuration(node: models.NodeStatus, now: Date): number {
26+
const endTime = node.finishedAt ? new Date(node.finishedAt) : now;
27+
return (endTime.valueOf() - new Date(node.startedAt).valueOf()) / 1000; // ms to seconds
2928
}
3029

3130
// Iterate over the node's subtree and find pod in error or fail

‎ui/src/workflows/components/workflow-timeline/workflow-timeline.tsx

Lines changed: 26 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import classNames from 'classnames';
2-
import moment from 'moment';
32
import React, {useEffect, useRef, useState} from 'react';
43
import {fromEvent, interval, Subscription} from 'rxjs';
54

@@ -19,9 +18,20 @@ interface WorkflowTimelineProps {
1918
nodeClicked?: (node: models.NodeStatus) => any;
2019
}
2120

21+
function dateDiff(dateLikeA: string | number, dateLikeB: string | number): number {
22+
return new Date(dateLikeA).valueOf() - new Date(dateLikeB).valueOf();
23+
}
24+
25+
function hhMMFormat(dateLike: string | number): string {
26+
const date = new Date(dateLike);
27+
// timeString format is '00:59:00 GMT-0500 (Eastern Standard Time)', hh:MM is '00:59'
28+
const parts = date.toTimeString().split(':');
29+
return parts[0] + ':' + parts[1];
30+
}
31+
2232
export function WorkflowTimeline(props: WorkflowTimelineProps) {
2333
const [parentWidth, setParentWidth] = useState(0);
24-
const [now, setNow] = useState(moment());
34+
const [now, setNow] = useState(new Date());
2535

2636
const containerRef = useRef<HTMLDivElement>(null);
2737
const resizeSubscription = useRef<Subscription>(null);
@@ -41,7 +51,7 @@ export function WorkflowTimeline(props: WorkflowTimelineProps) {
4151
const isCompleted = props.workflow?.status && COMPLETED_PHASES.includes(props.workflow.status.phase);
4252
if (!refreshSubscription.current && !isCompleted) {
4353
refreshSubscription.current = interval(1000).subscribe(() => {
44-
setNow(moment());
54+
setNow(new Date());
4555
});
4656
} else if (refreshSubscription.current && isCompleted) {
4757
refreshSubscription.current.unsubscribe();
@@ -62,15 +72,15 @@ export function WorkflowTimeline(props: WorkflowTimelineProps) {
6272
const nodes = Object.keys(props.workflow.status.nodes)
6373
.map(id => {
6474
const node = props.workflow.status.nodes[id];
65-
node.finishedAt = node.finishedAt || now.format();
66-
node.startedAt = node.startedAt || now.format();
75+
node.finishedAt = node.finishedAt || now.toISOString();
76+
node.startedAt = node.startedAt || now.toISOString();
6777
return node;
6878
})
6979
.filter(node => node.startedAt && node.type === 'Pod')
7080
.sort((first, second) => {
71-
const diff = moment(first.startedAt).diff(second.startedAt);
81+
const diff = dateDiff(first.startedAt, second.startedAt);
7282
if (diff <= 2) {
73-
return moment(first.finishedAt).diff(second.finishedAt);
83+
return dateDiff(first.finishedAt, second.finishedAt);
7484
}
7585
return diff;
7686
});
@@ -79,30 +89,30 @@ export function WorkflowTimeline(props: WorkflowTimelineProps) {
7989
return <div />;
8090
}
8191

82-
const timelineStart = moment(nodes[0].startedAt).valueOf();
83-
const timelineEnd = nodes.map(node => moment(node.finishedAt).valueOf()).reduce((first, second) => Math.max(first, second), moment(timelineStart).valueOf());
92+
const timelineStart = new Date(nodes[0].startedAt).valueOf();
93+
const timelineEnd = nodes.map(node => new Date(node.finishedAt).valueOf()).reduce((first, second) => Math.max(first, second), new Date(timelineStart).valueOf());
8494

8595
function timeToLeft(time: number) {
8696
return ((time - timelineStart) / (timelineEnd - timelineStart)) * Math.max(parentWidth, MIN_WIDTH) + NODE_NAME_WIDTH;
8797
}
8898

8999
const groups = nodes.map(node => ({
90-
startedAt: moment(node.startedAt).valueOf(),
91-
finishedAt: moment(node.finishedAt).valueOf(),
100+
startedAt: new Date(node.startedAt).valueOf(),
101+
finishedAt: new Date(node.finishedAt).valueOf(),
92102
nodes: [
93103
Object.assign({}, node, {
94-
left: timeToLeft(moment(node.startedAt).valueOf()),
95-
width: timeToLeft(moment(node.finishedAt).valueOf()) - timeToLeft(moment(node.startedAt).valueOf())
104+
left: timeToLeft(new Date(node.startedAt).valueOf()),
105+
width: timeToLeft(new Date(node.finishedAt).valueOf()) - timeToLeft(new Date(node.startedAt).valueOf())
96106
})
97107
]
98108
}));
99109

100110
for (let i = groups.length - 1; i >= 1; i--) {
101111
const cur = groups[i];
102112
const next = groups[i - 1];
103-
if (moment(cur.startedAt).diff(next.finishedAt, 'milliseconds') < 0 && moment(next.startedAt).diff(cur.startedAt, 'milliseconds') < ROUND_START_DIFF_MS) {
113+
if (dateDiff(cur.startedAt, next.finishedAt) < 0 && dateDiff(next.startedAt, cur.startedAt) < ROUND_START_DIFF_MS) {
104114
next.nodes = next.nodes.concat(cur.nodes);
105-
next.finishedAt = nodes.map(node => moment(node.finishedAt).valueOf()).reduce((first, second) => Math.max(first, second), next.finishedAt.valueOf());
115+
next.finishedAt = nodes.map(node => new Date(node.finishedAt).valueOf()).reduce((first, second) => Math.max(first, second), next.finishedAt.valueOf());
106116
groups.splice(i, 1);
107117
}
108118
}
@@ -113,7 +123,7 @@ export function WorkflowTimeline(props: WorkflowTimelineProps) {
113123
<div className='workflow-timeline__row workflow-timeline__row--header' />
114124
{groups.map(group => [
115125
<div style={{left: timeToLeft(group.startedAt)}} key={`group-${group.startedAt}`} className={classNames('workflow-timeline__start-line')}>
116-
<span className='workflow-timeline__start-line__time'>{moment(group.startedAt).format('hh:mm')}</span>
126+
<span className='workflow-timeline__start-line__time'>{hhMMFormat(group.startedAt)}</span>
117127
</div>,
118128
...group.nodes.map(node => (
119129
<div

‎ui/yarn.lock

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2336,23 +2336,22 @@ arg@^4.1.0:
23362336
resolved "https://registry.yarnpkg.com/arg/-/arg-4.1.3.tgz#269fc7ad5b8e42cb63c896d5666017261c144089"
23372337
integrity sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==
23382338

2339-
"argo-ui@git+https://github.com/argoproj/argo-ui.git#6de6bfedc0ec0625122dd5162371fc1932f8d428":
2339+
"argo-ui@git+https://github.com/argoproj/argo-ui.git#54f36c723d9a0e5d3386689298cbb9c27767fa00":
23402340
version "1.0.0"
2341-
resolved "git+https://github.com/argoproj/argo-ui.git#6de6bfedc0ec0625122dd5162371fc1932f8d428"
2341+
resolved "git+https://github.com/argoproj/argo-ui.git#54f36c723d9a0e5d3386689298cbb9c27767fa00"
23422342
dependencies:
23432343
"@fortawesome/fontawesome-free" "^6.2.1"
23442344
"@tippy.js/react" "^3.1.1"
23452345
classnames "^2.2.6"
23462346
core-js "^3.32.1"
23472347
foundation-sites "^6.4.3"
23482348
history "^4.10.1"
2349-
moment "^2.29.4"
23502349
prop-types "^15.8.1"
23512350
react-autocomplete "1.8.1"
23522351
react-form "^2.16.0"
23532352
react-helmet "^6.1.0"
23542353
react-router-dom "^4.2.2"
2355-
react-toastify "9.0.8"
2354+
react-toastify "9.0.3"
23562355
rxjs "^7.8.1"
23572356
typescript "^4.9.5"
23582357
uuid "^9.0.0"
@@ -6584,7 +6583,7 @@ [email protected]:
65846583
resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
65856584
integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
65866585

6587-
moment@^2.10.2, moment@^2.29.4, moment@^2.30.1:
6586+
moment@^2.10.2, moment@^2.30.1:
65886587
version "2.30.1"
65896588
resolved "https://registry.yarnpkg.com/moment/-/moment-2.30.1.tgz#f8c91c07b7a786e30c59926df530b4eac96974ae"
65906589
integrity sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==
@@ -7395,10 +7394,10 @@ react-side-effect@^2.1.0:
73957394
resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-2.1.2.tgz#dc6345b9e8f9906dc2eeb68700b615e0b4fe752a"
73967395
integrity sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==
73977396

7398-
[email protected].8:
7399-
version "9.0.8"
7400-
resolved "https://registry.yarnpkg.com/react-toastify/-/react-toastify-9.0.8.tgz#3876c89fc6211a29027b3075010b5ec39ebe4f7e"
7401-
integrity sha512-EwM+teWt49HSHx+67qI08yLAW1zAsBxCXLCsUfxHYv1W7/R3ZLhrqKalh7j+kjgPna1h5LQMSMwns4tB4ww2yQ==
7397+
[email protected].3:
7398+
version "9.0.3"
7399+
resolved "https://registry.yarnpkg.com/react-toastify/-/react-toastify-9.0.3.tgz#8e6d22651c85cb584c5ebd0b5e2c3bf0d7ec06ee"
7400+
integrity sha512-0QZJk0SqYBxouRBGCFU3ymvjlwimRRhVH7SzqGRiVrQ001KSoUNbGKx9Yq42aoPv18n45yJzEFG82zqv3HnASg==
74027401
dependencies:
74037402
clsx "^1.1.1"
74047403

0 commit comments

Comments
 (0)