From 118a760ad8040e82e302e6c6f2508e862c070d50 Mon Sep 17 00:00:00 2001 From: J1za Date: Wed, 23 Apr 2025 17:37:49 +0300 Subject: [PATCH] feat(UI-1447): replace momentjs to dayjs --- package-lock.json | 11 ----------- package.json | 1 - .../organisms/dashboard/projectsTableRow.tsx | 4 ++-- .../deployments/sessions/table/tableRow.tsx | 4 ++-- .../organisms/deployments/sessions/viewer.tsx | 13 ++++++++----- .../organisms/deployments/tableContent.tsx | 6 ++---- src/components/organisms/editorTabs.tsx | 6 +++--- .../organisms/events/table/redispatchEventModal.tsx | 4 ++-- src/components/organisms/events/table/row.tsx | 6 +++--- src/components/organisms/events/viewer.tsx | 4 ++-- src/models/sessionLog.model.ts | 4 ++-- src/models/sessionLogRecord.model.ts | 4 ++-- src/services/logger.service.ts | 4 ++-- 13 files changed, 30 insertions(+), 41 deletions(-) diff --git a/package-lock.json b/package-lock.json index eba1deaeeb..dd2c5f8b8e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -117,7 +117,6 @@ "husky": "^9.1.7", "i18next": "^24.2.0", "lint-staged": "^15.4.3", - "moment": "^2.30.1", "openai": "^4.77.0", "postcss": "^8.4.49", "rollup": "^4.34.6", @@ -14096,16 +14095,6 @@ "mkdirp": "bin/cmd.js" } }, - "node_modules/moment": { - "version": "2.30.1", - "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz", - "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==", - "dev": true, - "license": "MIT", - "engines": { - "node": "*" - } - }, "node_modules/monaco-editor": { "version": "0.52.2", "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.52.2.tgz", diff --git a/package.json b/package.json index ca418f9977..6020f40933 100644 --- a/package.json +++ b/package.json @@ -135,7 +135,6 @@ "husky": "^9.1.7", "i18next": "^24.2.0", "lint-staged": "^15.4.3", - "moment": "^2.30.1", "openai": "^4.77.0", "postcss": "^8.4.49", "rollup": "^4.34.6", diff --git a/src/components/organisms/dashboard/projectsTableRow.tsx b/src/components/organisms/dashboard/projectsTableRow.tsx index 457741b17c..4fbcfd0a5a 100644 --- a/src/components/organisms/dashboard/projectsTableRow.tsx +++ b/src/components/organisms/dashboard/projectsTableRow.tsx @@ -1,6 +1,6 @@ import React, { MouseEvent, KeyboardEvent } from "react"; -import moment from "moment"; +import dayjs from "dayjs"; import { useTranslation } from "react-i18next"; import { dateTimeFormat } from "@src/constants"; @@ -89,7 +89,7 @@ export const DashboardProjectsTableRow = ({ - {lastDeployed ? moment(lastDeployed).local().format(dateTimeFormat) : t("never")} + {lastDeployed ? dayjs(lastDeployed).format(dateTimeFormat) : t("never")} diff --git a/src/components/organisms/deployments/sessions/table/tableRow.tsx b/src/components/organisms/deployments/sessions/table/tableRow.tsx index 6fbdfebe17..0513af397c 100644 --- a/src/components/organisms/deployments/sessions/table/tableRow.tsx +++ b/src/components/organisms/deployments/sessions/table/tableRow.tsx @@ -1,6 +1,6 @@ import React, { CSSProperties, memo, useState } from "react"; -import moment from "moment"; +import dayjs from "dayjs"; import { useTranslation } from "react-i18next"; import { SessionState } from "@enums"; @@ -89,7 +89,7 @@ export const SessionsTableRow = memo( onClick={() => openSession(session.sessionId)} style={{ ...style }} > - {moment(session.createdAt).local().format(dateTimeFormat)} + {dayjs(session.createdAt).format(dateTimeFormat)} diff --git a/src/components/organisms/deployments/sessions/viewer.tsx b/src/components/organisms/deployments/sessions/viewer.tsx index ba2bd7365d..0eb6991acc 100644 --- a/src/components/organisms/deployments/sessions/viewer.tsx +++ b/src/components/organisms/deployments/sessions/viewer.tsx @@ -2,7 +2,8 @@ import React, { useCallback, useEffect, useState } from "react"; import JsonView from "@uiw/react-json-view"; import { githubDarkTheme } from "@uiw/react-json-view/githubDark"; -import moment from "moment"; +import dayjs from "dayjs"; +import duration from "dayjs/plugin/duration"; import { useTranslation } from "react-i18next"; import { Outlet, useLocation, useNavigate, useParams } from "react-router-dom"; import ReactTimeAgo from "react-time-ago"; @@ -31,6 +32,8 @@ import { SessionsTableState } from "@components/organisms/deployments"; import { DownloadIcon, ArrowRightIcon, CircleMinusIcon, CirclePlusIcon, CopyIcon } from "@assets/image/icons"; +dayjs.extend(duration); + export const SessionViewer = () => { const { deploymentId, projectId, sessionId } = useParams<{ deploymentId: string; @@ -104,7 +107,7 @@ export const SessionViewer = () => { if (!logContent) return; const blob = new Blob([logContent], { type: "text/plain" }); const url = URL.createObjectURL(blob); - const dateTime = moment().local().format(dateTimeFormat); + const dateTime = dayjs().format(dateTimeFormat); const fileName = `${sessionInfo?.sourceType?.toLowerCase() || "session"}-${dateTime}.log`; const link = Object.assign(document.createElement("a"), { @@ -246,7 +249,7 @@ export const SessionViewer = () => { ); const formatTimeDifference = useCallback((endDate: Date, startDate: Date) => { - const duration = moment.duration(moment(endDate).diff(moment(startDate))); + const duration = dayjs.duration(dayjs(endDate).diff(dayjs(startDate))); const months = Math.floor(duration.asMonths()); const weeks = Math.floor(duration.asWeeks()); const days = Math.floor(duration.asDays()); @@ -291,11 +294,11 @@ export const SessionViewer = () => { Time:
- {moment(sessionInfo.createdAt).local().format(dateTimeFormat)} + {dayjs(sessionInfo.createdAt).format(dateTimeFormat)} {sessionInfo.state === SessionState.completed || sessionInfo.state === SessionState.error ? ( -
{moment(sessionInfo.updatedAt).local().format(timeFormat)}
+
{dayjs(sessionInfo.updatedAt).format(timeFormat)}
) : ( )} diff --git a/src/components/organisms/deployments/tableContent.tsx b/src/components/organisms/deployments/tableContent.tsx index 5d38429881..bf3c542f94 100644 --- a/src/components/organisms/deployments/tableContent.tsx +++ b/src/components/organisms/deployments/tableContent.tsx @@ -1,6 +1,6 @@ import React, { useCallback, useState } from "react"; -import moment from "moment"; +import dayjs from "dayjs"; import { useTranslation } from "react-i18next"; import { useNavigate, useParams } from "react-router-dom"; @@ -203,9 +203,7 @@ export const DeploymentsTableContent = ({ key={deploymentId} onClick={() => goToDeploymentSessions(deploymentId)} > - - {moment(createdAt).local().format(dateTimeFormat)} - + {dayjs(createdAt).format(dateTimeFormat)} diff --git a/src/components/organisms/editorTabs.tsx b/src/components/organisms/editorTabs.tsx index 4f6db5f40a..94dc22a95b 100644 --- a/src/components/organisms/editorTabs.tsx +++ b/src/components/organisms/editorTabs.tsx @@ -1,8 +1,8 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"; import Editor, { Monaco } from "@monaco-editor/react"; +import dayjs from "dayjs"; import { debounce, last } from "lodash"; -import moment from "moment"; import * as monaco from "monaco-editor"; import { useTranslation } from "react-i18next"; import Markdown from "react-markdown"; @@ -244,7 +244,7 @@ export const EditorTabs = () => { ); return; } - setLastSaved(moment().local().format(dateTimeFormat)); + setLastSaved(dayjs().format(dateTimeFormat)); } catch (error) { addToast({ message: tErrors("codeSaveFailed"), @@ -376,7 +376,7 @@ export const EditorTabs = () => { {openFiles[projectId]?.length ? (
{autoSaveMode ? ( diff --git a/src/components/organisms/events/table/redispatchEventModal.tsx b/src/components/organisms/events/table/redispatchEventModal.tsx index 6651033894..a677f9a8c1 100644 --- a/src/components/organisms/events/table/redispatchEventModal.tsx +++ b/src/components/organisms/events/table/redispatchEventModal.tsx @@ -2,7 +2,7 @@ import React from "react"; import JsonView from "@uiw/react-json-view"; import { githubDarkTheme } from "@uiw/react-json-view/githubDark"; -import moment from "moment"; +import dayjs from "dayjs"; import { useTranslation } from "react-i18next"; import { ModalName } from "@enums/components"; @@ -74,7 +74,7 @@ export const RedispatchEventModal = ({ {tEvents("viewer.created")}
- {moment(eventInfo?.createdAt).local().format(dateTimeFormat)} + {dayjs(eventInfo?.createdAt).format(dateTimeFormat)}
diff --git a/src/components/organisms/events/table/row.tsx b/src/components/organisms/events/table/row.tsx index f44f7ab773..41feb8e3f8 100644 --- a/src/components/organisms/events/table/row.tsx +++ b/src/components/organisms/events/table/row.tsx @@ -1,6 +1,6 @@ import React, { CSSProperties, memo } from "react"; -import moment from "moment"; +import dayjs from "dayjs"; import { useParams } from "react-router-dom"; import { useEventsDrawer } from "@contexts"; @@ -40,8 +40,8 @@ export const EventRow = memo( return ( - - {moment(createdAt).local().format(dateTimeFormat)} + + {dayjs(createdAt).format(dateTimeFormat)} {isDrawer ? null : ( <> diff --git a/src/components/organisms/events/viewer.tsx b/src/components/organisms/events/viewer.tsx index 61987a9de5..b93ad0d5e6 100644 --- a/src/components/organisms/events/viewer.tsx +++ b/src/components/organisms/events/viewer.tsx @@ -2,7 +2,7 @@ import React, { useCallback, useEffect } from "react"; import JsonView from "@uiw/react-json-view"; import { githubDarkTheme } from "@uiw/react-json-view/githubDark"; -import moment from "moment"; +import dayjs from "dayjs"; import { useTranslation } from "react-i18next"; import { useNavigate, useParams } from "react-router-dom"; @@ -61,7 +61,7 @@ export const EventViewer = () => { {t("created")}
- {moment(eventInfo.createdAt).local().format(dateTimeFormat)} + {dayjs(eventInfo.createdAt).format(dateTimeFormat)}
diff --git a/src/models/sessionLog.model.ts b/src/models/sessionLog.model.ts index 039957d36d..4904554eca 100644 --- a/src/models/sessionLog.model.ts +++ b/src/models/sessionLog.model.ts @@ -1,4 +1,4 @@ -import moment from "moment"; +import dayjs from "dayjs"; import { GetPrintsResponse_Print as ProtoGetPrintsResponse_Print } from "@ak-proto-ts/sessions/v1/svc_pb"; import { dateTimeFormat } from "@src/constants"; @@ -8,7 +8,7 @@ import { convertTimestampToDate } from "@src/utilities"; export function convertSessionLogProtoToModel(protoPrintLog?: ProtoGetPrintsResponse_Print): SessionOutputLog { const time = convertTimestampToDate(protoPrintLog?.t); const print = protoPrintLog?.v?.string?.v || "Empty print"; - const formattedDateTime = moment(time).local().format(dateTimeFormat); + const formattedDateTime = dayjs(time).format(dateTimeFormat); return { time: formattedDateTime, print }; } diff --git a/src/models/sessionLogRecord.model.ts b/src/models/sessionLogRecord.model.ts index 684b57aa80..6d1cf1d858 100644 --- a/src/models/sessionLogRecord.model.ts +++ b/src/models/sessionLogRecord.model.ts @@ -1,5 +1,5 @@ +import dayjs from "dayjs"; import { t as i18n } from "i18next"; -import moment from "moment"; import { SessionLogRecord as ProtoSessionLogRecord } from "@ak-proto-ts/sessions/v1/session_pb"; import { Value } from "@ak-proto-ts/values/v1/values_pb"; @@ -175,7 +175,7 @@ export const convertSessionLogProtoToViewerOutput = ( ) { return; } - const formattedDateTime = moment(record.dateTime).local().format(dateTimeFormat); + const formattedDateTime = dayjs(record.dateTime).format(dateTimeFormat); return { print: record?.logs || "", diff --git a/src/services/logger.service.ts b/src/services/logger.service.ts index ed676f0e19..41f19926cd 100644 --- a/src/services/logger.service.ts +++ b/src/services/logger.service.ts @@ -1,4 +1,4 @@ -import moment from "moment"; +import dayjs from "dayjs"; import { LoggerLevel } from "@enums"; import { dateTimeFormat } from "@src/constants"; @@ -34,7 +34,7 @@ export class LoggerService { level: LoggerLevel = LoggerLevel.info, consoleOnly?: boolean ): void { - const timestamp = moment().utc().local().format(dateTimeFormat); + const timestamp = dayjs().format(dateTimeFormat); const formattedMessage = `[${namespace}] ${message}`; switch (level) {