fix: add duration formatter

Author: artemmufazalov

src/containers/App/App.js

@@ -14,6 +14,10 @@ import {registerLanguages} from '../../utils/monaco';
 
 import './App.scss';
 
+i18n.setLang(Lang.En);
+configureYdbUiComponents({lang: Lang.En});
+configureUiKit({lang: Lang.En});
+
 registerLanguages();
 
 class App extends React.Component {
@@ -24,13 +28,6 @@ class App extends React.Component {
         children: PropTypes.node,
     };
 
-    constructor(props) {
-        super(props);
-        i18n.setLang(Lang.En);
-        configureYdbUiComponents({lang: Lang.En});
-        configureUiKit({lang: Lang.En});
-    }
-
     componentDidMount() {
         const {isAuthenticated, getUser} = this.props;
         if (isAuthenticated) {

src/utils/constants.ts

@@ -14,9 +14,12 @@ export const GIGABYTE = 1_000_000_000;
 export const TERABYTE = 1_000_000_000_000;
 export const GROUP = 'group';
 
-export const HOUR_IN_SECONDS = 60 * 60;
+export const MINUTE_IN_SECONDS = 60;
+export const HOUR_IN_SECONDS = 60 * MINUTE_IN_SECONDS;
 export const DAY_IN_SECONDS = 24 * HOUR_IN_SECONDS;
 
+export const NANOS_IN_MS = 1000000;
+
 export const TABLET_STATES = {
     TABLET_VOLATILE_STATE_UNKNOWN: 'unknown',
     TABLET_VOLATILE_STATE_STOPPED: 'stopped',

src/utils/index.js

@@ -2,7 +2,7 @@ import numeral from 'numeral';
 import locales from 'numeral/locales'; // eslint-disable-line no-unused-vars
 
 import {i18n} from './i18n';
-import {MEGABYTE, TERABYTE, DAY_IN_SECONDS, GIGABYTE} from './constants';
+import {MEGABYTE, TERABYTE, GIGABYTE, DAY_IN_SECONDS} from './constants';
 import {isNumeric} from './utils';
 
 numeral.locale(i18n.lang);

src/utils/timeParsers/__test__/formatDuration.test.ts

@@ -0,0 +1,50 @@
+import {formatDurationToShortTimeFormat} from '../formatDuration';
+import i18n from '../i18n';
+
+describe('formatDurationToShortTimeFormat', () => {
+    // 1 - ms
+    const timeWithMs = 123;
+    const formattedTimeWithMs = i18n('ms', {seconds: 0, ms: 123});
+
+    // 2 - seconds and ms
+    const timeWithSecondsAndMsInMs = 12345;
+    const formattedTimeWithSecondsAndMs = i18n('secMs', {seconds: 12, ms: 345});
+
+    // 3 - minutes
+    const timeWithMinutesInMs = 754567;
+    const formattedTimeWithMinutes = i18n('minSec', {minutes: 12, seconds: 34});
+
+    // 4 - hours
+    const timeWithHoursInMs = 9245678;
+    const formattedTimeWithHours = i18n('hoursMin', {hours: 2, minutes: 34});
+
+    // 5 - days
+    const timeWithDaysInMs = 439234123;
+    const formattedTimeWithDays = i18n('daysHours', {days: 5, hours: 2});
+
+    // 6 - zero
+    const formattedZero = i18n('ms', {seconds: 0, ms: 0});
+
+    it('should return ms on values less than second', () => {
+        expect(formatDurationToShortTimeFormat(timeWithMs)).toEqual(formattedTimeWithMs);
+    });
+    it('should return seconds and ms', () => {
+        expect(formatDurationToShortTimeFormat(timeWithSecondsAndMsInMs)).toEqual(
+            formattedTimeWithSecondsAndMs,
+        );
+    });
+    it('should return minutes and seconds', () => {
+        expect(formatDurationToShortTimeFormat(timeWithMinutesInMs)).toEqual(
+            formattedTimeWithMinutes,
+        );
+    });
+    it('should return hours and minutes', () => {
+        expect(formatDurationToShortTimeFormat(timeWithHoursInMs)).toEqual(formattedTimeWithHours);
+    });
+    it('should return days and hours', () => {
+        expect(formatDurationToShortTimeFormat(timeWithDaysInMs)).toEqual(formattedTimeWithDays);
+    });
+    it('should process zero values', () => {
+        expect(formatDurationToShortTimeFormat(0)).toEqual(formattedZero);
+    });
+});

src/utils/timeParsers/formatDuration.ts

@@ -0,0 +1,46 @@
+import {DAY_IN_SECONDS, HOUR_IN_SECONDS} from '../constants';
+
+import i18n from './i18n';
+
+/**
+ * Process time difference in ms and returns formated time.
+ * Only two major values are returned (days & hours, hours & minutes, minutes & seconds, etc.)
+ */
+export const formatDurationToShortTimeFormat = (value: number) => {
+    const ms = value % 1000;
+    let remain = Math.floor(value / 1000);
+
+    const days = Math.floor(remain / DAY_IN_SECONDS);
+    remain = remain % DAY_IN_SECONDS;
+
+    const hours = Math.floor(remain / HOUR_IN_SECONDS);
+    remain = remain % HOUR_IN_SECONDS;
+
+    const minutes = Math.floor(remain / 60);
+    remain = remain % 60;
+
+    const seconds = remain;
+
+    const duration = {
+        days,
+        hours,
+        minutes,
+        seconds,
+        ms,
+    };
+
+    if (days > 0) {
+        return i18n('daysHours', duration);
+    }
+    if (hours > 0) {
+        return i18n('hoursMin', duration);
+    }
+    if (minutes > 0) {
+        return i18n('minSec', duration);
+    }
+    if (seconds > 0) {
+        return i18n('secMs', duration);
+    }
+
+    return i18n('ms', duration);
+};

src/utils/timeParsers/i18n/en.json

@@ -0,0 +1,7 @@
+{
+  "daysHours": "{{days}}d {{hours}}h",
+  "hoursMin": "{{hours}}h {{minutes}}m",
+  "minSec": "{{minutes}}m {{seconds}}s",
+  "secMs": "{{seconds}}s {{ms}}ms",
+  "ms": "{{ms}}ms"
+}

src/utils/timeParsers/i18n/index.ts

@@ -0,0 +1,11 @@
+import {i18n, Lang} from '../../i18n';
+
+import en from './en.json';
+import ru from './ru.json';
+
+const COMPONENT = 'ydb-time-parsers';
+
+i18n.registerKeyset(Lang.En, COMPONENT, en);
+i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
+
+export default i18n.keyset(COMPONENT);

src/utils/timeParsers/i18n/ru.json

@@ -0,0 +1,7 @@
+{
+  "daysHours": "{{days}}д {{hours}}ч",
+  "hoursMin": "{{hours}}ч {{minutes}}м",
+  "minSec": "{{minutes}}м {{seconds}}с",
+  "secMs": "{{seconds}}с {{ms}}мс",
+  "ms": "{{ms}}мс"
+}