chore(deps): upgrade argo-ui, including breaking changes (argoproj#…

…19655) * chore(deps): upgrade `argo-ui`, including one breaking change - upgrade to https://github.com/argoproj/argo-ui/tree/a7b01f9f009aa9161da21f450b5aab2f0732eb74 - `moment` is no longer used internally by `argo-ui`, so change `Ticker` usage to account for this - CD should also remove the deprecated `moment` library for the same reasons as downstream and Workflows Signed-off-by: Anton Gilgur <agilgur5@gmail.com> * type-check and format fixes Signed-off-by: Anton Gilgur <agilgur5@gmail.com> * set `durationMs={0}` instead of `null` bc in JS `0 || null == null`, so the edge case of a `0` duration caused the component to render just an empty string Signed-off-by: Anton Gilgur <agilgur5@gmail.com> * update argo-ui once more for deprecated durationMs removal Signed-off-by: Anton Gilgur <agilgur5@gmail.com> --------- Signed-off-by: Anton Gilgur <agilgur5@gmail.com> Signed-off-by: austin5219 <3936059+austin5219@users.noreply.github.com>
austin5219 · Oct 16, 2024 · ed048ee · ed048ee
1 parent 129568a
commit ed048ee
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 7 deletions.
diff --git a/...applications/components/application-deployment-history/application-deployment-history.tsx b/...applications/components/application-deployment-history/application-deployment-history.tsx
@@ -20,7 +20,7 @@ export const ApplicationDeploymentHistory = ({
     const recentDeployments = deployments.map((info, i) => {
         const nextDeployedAt = i === 0 ? null : deployments[i - 1].deployedAt;
         const runEnd = nextDeployedAt ? moment(nextDeployedAt) : moment();
-        return {...info, nextDeployedAt, durationMs: runEnd.diff(moment(info.deployedAt)) / 1000};
+        return {...info, nextDeployedAt, durationS: runEnd.diff(moment(info.deployedAt)) / 1000};
     });
 
     return (
@@ -37,7 +37,7 @@ export const ApplicationDeploymentHistory = ({
                             <br />
                             <i className='fa fa-hourglass-half' /> <span className='show-for-large'>Time to deploy:</span>
                             <br />
-                            {(info.deployStartedAt && <Duration durationMs={moment(info.deployedAt).diff(moment(info.deployStartedAt)) / 1000} />) || 'Unknown'}
+                            {(info.deployStartedAt && <Duration durationS={moment(info.deployedAt).diff(moment(info.deployStartedAt)) / 1000} />) || 'Unknown'}
                         </div>
                         <div>
                             <br />
@@ -49,7 +49,7 @@ export const ApplicationDeploymentHistory = ({
                             <br />
                             Active for:
                             <br />
-                            <Duration durationMs={info.durationMs} />
+                            <Duration durationS={info.durationS} />
                         </div>
                     </div>
                     <div className='columns small-9'>

diff --git a/...c/app/applications/components/application-operation-state/application-operation-state.tsx b/...c/app/applications/components/application-operation-state/application-operation-state.tsx
@@ -61,7 +61,9 @@ export const ApplicationOperationState: React.StatelessComponent<Props> = ({appl
             title: 'DURATION',
             value: (
                 <Ticker>
-                    {time => <Duration durationMs={((operationState.finishedAt && moment(operationState.finishedAt)) || time).diff(moment(operationState.startedAt)) / 1000} />}
+                    {time => (
+                        <Duration durationS={((operationState.finishedAt && moment(operationState.finishedAt)) || moment(time)).diff(moment(operationState.startedAt)) / 1000} />
+                    )}
                 </Ticker>
             )
         }

diff --git a/ui/src/app/settings/components/cluster-details/cluster-details.tsx b/ui/src/app/settings/components/cluster-details/cluster-details.tsx
@@ -127,7 +127,9 @@ export const ClusterDetails = (props: RouteComponentProps<{server: string}>) =>
                                                 if (!cluster.info.connectionState.attemptedAt) {
                                                     return <span>Never (next refresh in few seconds)</span>;
                                                 }
-                                                const secondsBeforeRefresh = Math.round(Math.max(10 - now.diff(moment(cluster.info.connectionState.attemptedAt)) / 1000, 1));
+                                                const secondsBeforeRefresh = Math.round(
+                                                    Math.max(10 - moment(now).diff(moment(cluster.info.connectionState.attemptedAt)) / 1000, 1)
+                                                );
                                                 return (
                                                     <React.Fragment>
                                                         <Timestamp date={cluster.info.connectionState.attemptedAt} /> (next refresh in {secondsBeforeRefresh} seconds)

diff --git a/ui/yarn.lock b/ui/yarn.lock
@@ -2872,7 +2872,7 @@ arg@^4.1.0:
 
 "argo-ui@git+https://github.com/argoproj/argo-ui.git":
   version "1.0.0"
-  resolved "git+https://github.com/argoproj/argo-ui.git#4836620cfc729d7c732b9b562fc4c03051e9598a"
+  resolved "git+https://github.com/argoproj/argo-ui.git#d9a4285dc254bc473b9f26f5d72655296233f003"
   dependencies:
     "@fortawesome/fontawesome-free" "^6.2.1"
     "@tippy.js/react" "^3.1.1"
@@ -2881,7 +2881,6 @@ arg@^4.1.0:
     core-js "^3.32.1"
     foundation-sites "^6.4.3"
     history "^4.10.1"
-    moment "^2.29.4"
     prop-types "^15.8.1"
     react-autocomplete "1.8.1"
     react-form "^2.16.0"