feat(ui): Convert interval seconds to days, hours, minutes, and seconds by Vivek-Py · Pull Request #5220 · louislam/uptime-kuma

Vivek-Py · 2024-10-18T20:30:58Z

⚠️⚠️⚠️ Since we do not accept all types of pull requests and do not want to waste your time. Please be sure that you have read pull request rules:
https://github.com/louislam/uptime-kuma/blob/master/CONTRIBUTING.md#can-i-create-a-pull-request-for-uptime-kuma

Tick the checkbox if you understand [x]:

I have read and understand the pull request rules.

Description

Converts the interval from seconds to "days, hours, minutes and seconds" (depending if it is larger than each) and display the result under the form input. Have ensured it works for both locale directions as well.

Fixes #3601

Type of change

Please delete any options that are not relevant.

User interface (UI)

Checklist

My code follows the style guidelines of this project
I ran ESLint and other linters for modified files
I have performed a self-review of my own code and tested it
I have commented my code, particularly in hard-to-understand areas (including JSDoc for methods)
My changes generates no new warnings
My code needed automated testing. I have added them (this is optional task)

Screenshots (if any)

Please do not use any external image service. Instead, just paste in or drag and drop the image here, and it will be uploaded automatically.

CommanderStorm

Looks reasonable, I have left a few suggestions below.
Especially the unittests would be appreciated.

src/util-frontend.js

CommanderStorm · 2024-10-19T12:33:20Z

src/util-frontend.js

+                })
+                .join("");
+            formattedString = formattedString.trim();
+            parts.push(formattedString);


The controllflow in this function is quite non-obvious. Please refactor this to not abuse scoping as heavily ^^

I have refactored the control flow, made it easy and intuitive to understand.

CommanderStorm · 2024-10-19T12:35:08Z

src/util-frontend.js

+        const toFormattedPart = (value, unitOfTime) => {
+            const res = this.getInstance().formatToParts(value, unitOfTime);
+            console.log(res);
+            let formattedString = res


What is happening here? Is this and following lines necessary?

Refactored, and added comments for better understanding.

I asked because the filtering you are doing seems ineffective (literal and number are the only alowed values for type).
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/formatToParts

Also, I don't think that the trimming is nessesary.
Also the index > 0 is likely incorrect in at least some languages.

I think you are doing this to get rid of the in prefix.
Given that the proper way (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DurationFormat/format) is not yet supported in firefox (https://bugzilla.mozilla.org/show_bug.cgi?id=1648139)

=> I think the best change to do here (after looking into this a bit) would be to switch to the new api and wait for merging until firefox supports it.

src/util-frontend.js

CommanderStorm · 2024-10-19T12:43:19Z

src/util-frontend.js

+     * @param {number} seconds Receive value in seconds.
+     * @returns {string} String converted to Days Mins Seconds Format
+     */
+    secondsToHumanReadableFormat(seconds) {


Could you add a few quick unit tests to ensure that this works as expected?

I'm seeing e2e tests but no unit tests for frontend, do we have the setup for it?

Seems like the (previously existing) frontend tests such as the one for currentLocale() (#4692) has been removed without re-adding them.

You can add a folder frontend-test and add a testcase there.
This might need to be added to the npm run .. commands to be executed in CI.

CommanderStorm · 2024-10-19T12:45:44Z

src/util-frontend.js

+    updateLocale(locale, options = {}) {
+        this.locale = locale;
+        this.options = {
+            ...this.options,
+            ...options,
+        };


I don't see why we would want to change the options on this. It is shared => would apply globally, right?

Suggested change

updateLocale(locale, options = {}) {

this.locale = locale;

this.options = {

...this.options,

...options,

};

updateLocale(locale) {

this.locale = locale;

Yes it is shared and would be applied globally. Have removed it. Thanks!

CommanderStorm · 2024-10-19T12:47:39Z

src/util-frontend.js

+     * Default locale and options for Relative Time Formatter
+     */
+    constructor() {
+        this.locale = currentLocale();


As used, I don't think we need to store the locale.
It is always directly used to construct the RelativeTimeFormat below

=> Let's make this unit a local variable instead

Right, refactored to get locale while initializing instance.

CommanderStorm

Think this is uncontroversial enough to be merged into v2.0, even though we are still past beta-2

CommanderStorm · 2025-04-26T23:47:11Z

@Vivek-Py The testcaseses are failing. Could you have a look at this

We can re-group into v2.0 if this is fixed. ^^

…intervals

Vivek-Py · 2025-07-26T06:53:47Z

@CommanderStorm I have fixed the test, it was related to humanReadableFormat being sent to the DB.

CommanderStorm · 2025-07-26T08:07:18Z

Thanks a ton <3

Vivek-Py added 2 commits October 19, 2024 01:51

Convert interval seconds to days, hours, minutes, and seconds

ea7bafa

ESLint Fixes

2438e87

CommanderStorm requested changes Oct 19, 2024

View reviewed changes

Vivek-Py and others added 3 commits October 19, 2024 19:24

Removing console log and approx sign

b000c1d

Refactoring variable names, and control flow.

f6342b8

Merge branch 'master' into human-readable-format-for-intervals

baf0e6f

CommanderStorm approved these changes Apr 26, 2025

View reviewed changes

CommanderStorm modified the milestones: 2.0.0-beta.3, Pending Apr 26, 2025

github-actions bot added the needs:resolve-merge-conflict label May 24, 2025

Merge remote-tracking branch 'origin' into human-readable-format-for-…

81b4761

…intervals

github-actions bot removed the needs:resolve-merge-conflict label Jul 25, 2025

Vivek-Py added 5 commits July 25, 2025 21:01

Duplicate imports cleanup

e85901d

Lint fixes

63eda74

Lint JS fixes

d302e2d

Fix add and edit flow as humanReadableFormat is being sent to db

76b1af4

Lint Fix JS

4baf1de

CommanderStorm changed the title ~~Convert interval seconds to days, hours, minutes, and seconds~~ feat(ui): Convert interval seconds to days, hours, minutes, and seconds Jul 26, 2025

CommanderStorm modified the milestones: Pending, 2.0.0-beta.4 Jul 26, 2025

CommanderStorm merged commit c1adcfb into louislam:master Jul 26, 2025
19 checks passed

mercury233 mentioned this pull request Oct 29, 2025

fix(i18n): refactor secondsToHumanReadableFormat #6281

Merged

19 tasks

louislam mentioned this pull request Oct 31, 2025

Fix#3601: Added support for hours, mins and seconds #5388

Closed

7 tasks

Uh oh!

Conversation

Vivek-Py commented Oct 18, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Type of change

Checklist

Screenshots (if any)

Uh oh!

CommanderStorm left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Vivek-Py Oct 19, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

CommanderStorm left a comment

Choose a reason for hiding this comment

Uh oh!

CommanderStorm commented Apr 26, 2025

Uh oh!

Vivek-Py commented Jul 26, 2025

Uh oh!

Uh oh!

CommanderStorm commented Jul 26, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Vivek-Py commented Oct 18, 2024 •

edited

Loading

Vivek-Py Oct 19, 2024 •

edited

Loading