Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit5cdda2e

Browse files
chore: replace date-fns by dayjs (#18022)
This change replaces date-fns with dayjs throughout the codebase formore consistent date/time handling and to reduce bundle size. It alsotries to make the formatting and usage consistent.**Why dayjs over date-fns?**Just because we were using dayjs more broadly. Its formattingcapabilities, were also easier to extend.
1 parenta605c09 commit5cdda2e

File tree

20 files changed

+241
-178
lines changed

20 files changed

+241
-178
lines changed

‎site/e2e/api.ts

Lines changed: 13 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,13 @@ import type { Page } from "@playwright/test";
22
import{expect}from"@playwright/test";
33
import{API,typeDeploymentConfig}from"api/api";
44
importtype{SerpentOption}from"api/typesGenerated";
5-
import{formatDuration,intervalToDuration}from"date-fns";
5+
importdayjsfrom"dayjs";
6+
importdurationfrom"dayjs/plugin/duration";
7+
importrelativeTimefrom"dayjs/plugin/relativeTime";
8+
9+
dayjs.extend(duration);
10+
dayjs.extend(relativeTime);
11+
import{humanDuration}from"utils/time";
612
import{coderPort,defaultPassword}from"./constants";
713
import{typeLoginOptions,findSessionToken,randomName}from"./helpers";
814

@@ -237,13 +243,6 @@ export async function verifyConfigFlagString(
237243
awaitexpect(configOption).toHaveText(opt.valueasany);
238244
}
239245

240-
exportasyncfunctionverifyConfigFlagEmpty(page:Page,flag:string){
241-
constconfigOption=page.locator(
242-
`div.options-table .option-${flag} .option-value-empty`,
243-
);
244-
awaitexpect(configOption).toHaveText("Not set");
245-
}
246-
247246
exportasyncfunctionverifyConfigFlagArray(
248247
page:Page,
249248
config:DeploymentConfig,
@@ -290,19 +289,15 @@ export async function verifyConfigFlagDuration(
290289
flag:string,
291290
){
292291
constopt=findConfigOption(config,flag);
292+
if(typeofopt.value!=="number"){
293+
thrownewError(
294+
`Option with env${flag} should be a number, but got${typeofopt.value}.`,
295+
);
296+
}
293297
constconfigOption=page.locator(
294298
`div.options-table .option-${flag} .option-value-string`,
295299
);
296-
//
297-
awaitexpect(configOption).toHaveText(
298-
formatDuration(
299-
// intervalToDuration takes ms, so convert nanoseconds to ms
300-
intervalToDuration({
301-
start:0,
302-
end:(opt.valueasnumber)/1e6,
303-
}),
304-
),
305-
);
300+
awaitexpect(configOption).toHaveText(humanDuration(opt.value/1e6));
306301
}
307302

308303
exportfunctionfindConfigOption(

‎site/e2e/tests/deployment/observability.spec.ts

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import {
55
verifyConfigFlagArray,
66
verifyConfigFlagBoolean,
77
verifyConfigFlagDuration,
8-
verifyConfigFlagEmpty,
98
verifyConfigFlagString,
109
}from"../../api";
1110
import{login}from"../../helpers";
@@ -28,7 +27,11 @@ test("enabled observability settings", async ({ page }) => {
2827
awaitverifyConfigFlagBoolean(page,config,"enable-terraform-debug-mode");
2928
awaitverifyConfigFlagBoolean(page,config,"enable-terraform-debug-mode");
3029
awaitverifyConfigFlagDuration(page,config,"health-check-refresh");
31-
awaitverifyConfigFlagEmpty(page,"health-check-threshold-database");
30+
awaitverifyConfigFlagDuration(
31+
page,
32+
config,
33+
"health-check-threshold-database",
34+
);
3235
awaitverifyConfigFlagString(page,config,"log-human");
3336
awaitverifyConfigFlagString(page,config,"prometheus-address");
3437
awaitverifyConfigFlagArray(

‎site/package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,12 +85,12 @@
8585
"color-convert":"2.0.1",
8686
"cron-parser":"4.9.0",
8787
"cronstrue":"2.50.0",
88-
"date-fns":"2.30.0",
8988
"dayjs":"1.11.13",
9089
"emoji-mart":"5.6.0",
9190
"file-saver":"2.0.5",
9291
"formik":"2.4.6",
9392
"front-matter":"4.0.2",
93+
"humanize-duration":"3.32.2",
9494
"jszip":"3.10.1",
9595
"lodash":"4.17.21",
9696
"lucide-react":"0.474.0",
@@ -149,6 +149,7 @@
149149
"@types/color-convert":"2.0.4",
150150
"@types/express":"4.17.17",
151151
"@types/file-saver":"2.0.7",
152+
"@types/humanize-duration":"3.27.4",
152153
"@types/jest":"29.5.14",
153154
"@types/lodash":"4.17.15",
154155
"@types/node":"20.17.16",

‎site/pnpm-lock.yaml

Lines changed: 16 additions & 3 deletions
Some generated files are not rendered by default. Learn more aboutcustomizing how changed files appear on GitHub.

‎site/src/components/LastSeen/LastSeen.tsx

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
import{useTheme}from"@emotion/react";
22
importdayjsfrom"dayjs";
3-
importrelativeTimefrom"dayjs/plugin/relativeTime";
43
importtype{FC,HTMLAttributes}from"react";
54
import{cn}from"utils/cn";
6-
7-
dayjs.extend(relativeTime);
5+
import{isAfter,relativeTime,subtractTime}from"utils/time";
86

97
interfaceLastSeenProps
108
extendsOmit<HTMLAttributes<HTMLSpanElement>,"children">{
@@ -15,21 +13,25 @@ interface LastSeenProps
1513
exportconstLastSeen:FC<LastSeenProps>=({ at, className, ...attrs})=>{
1614
consttheme=useTheme();
1715
constt=dayjs(at);
18-
constnow=dayjs();
16+
constnow=newDate();
17+
constoneHourAgo=subtractTime(now,1,"hour");
18+
constthreeDaysAgo=subtractTime(now,3,"day");
19+
constoneMonthAgo=subtractTime(now,1,"month");
20+
constcenturyAgo=subtractTime(now,100,"year");
1921

20-
letmessage=t.fromNow();
22+
letmessage=relativeTime(at);
2123
letcolor=theme.palette.text.secondary;
2224

23-
if(t.isAfter(now.subtract(1,"hour"))){
25+
if(isAfter(at,oneHourAgo)){
2426
// Since the agent reports on a 10m interval,
2527
// the last_used_at can be inaccurate when recent.
2628
message="Now";
2729
color=theme.roles.success.fill.solid;
28-
}elseif(t.isAfter(now.subtract(3,"day"))){
30+
}elseif(isAfter(at,threeDaysAgo)){
2931
color=theme.experimental.l2.text;
30-
}elseif(t.isAfter(now.subtract(1,"month"))){
32+
}elseif(isAfter(at,oneMonthAgo)){
3133
color=theme.roles.warning.fill.solid;
32-
}elseif(t.isAfter(now.subtract(100,"year"))){
34+
}elseif(isAfter(at,centuryAgo)){
3335
color=theme.roles.error.fill.solid;
3436
}else{
3537
message="Never";

‎site/src/components/Timeline/utils.ts

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,20 @@
1-
importformatRelativefrom"date-fns/formatRelative";
2-
importsubDaysfrom"date-fns/subDays";
1+
importdayjsfrom"dayjs";
2+
importcalendarfrom"dayjs/plugin/calendar";
3+
4+
dayjs.extend(calendar);
35

46
exportconstcreateDisplayDate=(
57
date:Date,
68
base:Date=newDate(),
79
):string=>{
8-
constlastWeek=subDays(base,7);
10+
constlastWeek=dayjs(base).subtract(7,"day").toDate();
911
if(date>=lastWeek){
10-
returnformatRelative(date,base).split(" at ")[0];
12+
returndayjs(date).calendar(dayjs(base),{
13+
sameDay:"[Today]",
14+
lastDay:"[Yesterday]",
15+
lastWeek:"[last] dddd",
16+
sameElse:"MM/DD/YYYY",
17+
});
1118
}
1219
returndate.toLocaleDateString();
1320
};

‎site/src/modules/workspaces/WorkspaceDormantBadge/WorkspaceDormantBadge.tsx

Lines changed: 8 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
11
importTooltipfrom"@mui/material/Tooltip";
22
importtype{Workspace}from"api/typesGenerated";
33
import{Badge}from"components/Badge/Badge";
4-
import{formatDistanceToNow}from"date-fns";
54
importtype{FC}from"react";
5+
import{
6+
DATE_FORMAT,
7+
formatDateTime,
8+
relativeTimeWithoutSuffix,
9+
}from"utils/time";
610

711
exporttypeWorkspaceDormantBadgeProps={
812
workspace:Workspace;
@@ -11,25 +15,14 @@ export type WorkspaceDormantBadgeProps = {
1115
exportconstWorkspaceDormantBadge:FC<WorkspaceDormantBadgeProps>=({
1216
workspace,
1317
})=>{
14-
constformatDate=(dateStr:string):string=>{
15-
constdate=newDate(dateStr);
16-
returndate.toLocaleDateString(undefined,{
17-
month:"long",
18-
day:"numeric",
19-
year:"numeric",
20-
hour:"numeric",
21-
minute:"numeric",
22-
});
23-
};
24-
2518
returnworkspace.deleting_at ?(
2619
<Tooltip
2720
title={
2821
<>
2922
This workspace has not been used for{" "}
30-
{formatDistanceToNow(Date.parse(workspace.last_used_at))} and has been
23+
{relativeTimeWithoutSuffix(workspace.last_used_at)} and has been
3124
marked dormant. It is scheduled to be deleted on{" "}
32-
{formatDate(workspace.deleting_at)}.
25+
{formatDateTime(workspace.deleting_at,DATE_FORMAT.FULL_DATETIME)}.
3326
</>
3427
}
3528
>
@@ -42,7 +35,7 @@ export const WorkspaceDormantBadge: FC<WorkspaceDormantBadgeProps> = ({
4235
title={
4336
<>
4437
This workspace has not been used for{" "}
45-
{formatDistanceToNow(Date.parse(workspace.last_used_at))} and has been
38+
{relativeTimeWithoutSuffix(workspace.last_used_at)} and has been
4639
marked dormant. It is not scheduled for auto-deletion but will become
4740
a candidate if auto-deletion is enabled on this template.
4841
</>

‎site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicenseCard.tsx

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import type { GetLicensesResponse } from "api/api";
55
import{ConfirmDialog}from"components/Dialogs/ConfirmDialog/ConfirmDialog";
66
import{Pill}from"components/Pill/Pill";
77
import{Stack}from"components/Stack/Stack";
8-
import{compareAsc}from"date-fns";
98
importdayjsfrom"dayjs";
109
import{typeFC,useState}from"react";
1110

@@ -92,10 +91,7 @@ export const LicenseCard: FC<LicenseCardProps> = ({
9291
alignItems="center"
9392
width="134px"// standardize width of date column
9493
>
95-
{compareAsc(
96-
newDate(license.claims.license_expires*1000),
97-
newDate(),
98-
)<1 ?(
94+
{dayjs(license.claims.license_expires*1000).isBefore(dayjs()) ?(
9995
<Pillcss={styles.expiredBadge}type="error">
10096
Expired
10197
</Pill>

‎site/src/pages/DeploymentSettingsPage/optionValue.ts

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
importtype{SerpentOption}from"api/typesGenerated";
2-
import{formatDuration,intervalToDuration}from"date-fns";
2+
import{humanDuration}from"utils/time";
33

44
// optionValue is a helper function to format the value of a specific deployment options
55
exportfunctionoptionValue(
@@ -14,13 +14,7 @@ export function optionValue(
1414
}
1515
switch(k){
1616
case"format_duration":
17-
returnformatDuration(
18-
// intervalToDuration takes ms, so convert nanoseconds to ms
19-
intervalToDuration({
20-
start:0,
21-
end:(option.valueasnumber)/1e6,
22-
}),
23-
);
17+
returnhumanDuration((option.valueasnumber)/1e6);
2418
// Add additional cases here as needed.
2519
}
2620
}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp