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

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.

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

src/util-frontend.js

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


Please do a bit more thorough self-review in the future

Suggested change

console.log(res);

Ack, have removed the log.

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

src/util-frontend.js

+     * Method to get the singleton instance
+     * @returns {object} Intl.RelativeTimeFormat instance
+     */
+    getInstance() {


Let's inline this. As it is being used, you can just use the field as is.

Also I don't think this is a singleton

Yes, makes sense. Have removed this function, instance can be accessed directly.

CommanderStorm · 2024-10-19T12:31:28Z

src/util-frontend.js

+    }
+}
+
+export const rtf = new RelativeTimeFormatter();


Please export it under a non-hamming-shortend name, so future devs don't need to look up the definition (this goes for a few other variables as well)

For common names like res this is fine, but not for instances like here

Understood, have updated the naming. Lmk if it aligns with the naming convention.

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.

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

src/util-frontend.js

+
+        const result =
+            parts.length > 0
+                ? `~ ${parts.join(" ")}`


Why approximately? All time parts are added exactly

Removed, not required.

CommanderStorm · 2024-10-19T12:38:27Z

src/util-frontend.js

+        const result =
+            parts.length > 0
+                ? `~ ${parts.join(" ")}`
+                : this.getInstance().format(0, "second"); // Handle case for 0 seconds


Let's use if .. return here instead

Updated to use if .. return

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?

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.

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 added 2 commits October 19, 2024 19:24

Removing console log and approx sign

b000c1d

Refactoring variable names, and control flow.

f6342b8

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

Vivek-Py commented Oct 18, 2024 •

edited

Loading

CommanderStorm left a comment

CommanderStorm Oct 19, 2024

Vivek-Py Oct 19, 2024

CommanderStorm Oct 19, 2024

Vivek-Py Oct 19, 2024

CommanderStorm Oct 19, 2024

Vivek-Py Oct 19, 2024

CommanderStorm Oct 19, 2024

Vivek-Py Oct 19, 2024

CommanderStorm Oct 19, 2024

Vivek-Py Oct 19, 2024

CommanderStorm Oct 19, 2024

Vivek-Py Oct 19, 2024

CommanderStorm Oct 19, 2024

Vivek-Py Oct 19, 2024

CommanderStorm Oct 19, 2024

Vivek-Py Oct 19, 2024

CommanderStorm Oct 19, 2024

Vivek-Py Oct 19, 2024 •

edited

Loading

CommanderStorm Oct 19, 2024

Vivek-Py Oct 19, 2024

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

Are you sure you want to change the base?

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

Conversation

Vivek-Py commented Oct 18, 2024 • edited Loading

Description

Type of change

Checklist

Screenshots (if any)

CommanderStorm left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Vivek-Py Oct 19, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Vivek-Py commented Oct 18, 2024 •

edited

Loading

Vivek-Py Oct 19, 2024 •

edited

Loading