ydb-embedded-ui 3.3.1 → 3.3.3

package/dist/containers/Storage/PDisk/__tests__/colors.tsx

@@ -7,7 +7,7 @@ import {TPDiskState} from '../../../../types/api/pdisk';
 import {PDisk} from '../PDisk';
 
 describe('PDisk state', () => {
-    it('Should determine severity based on State', () => {
+    it('Should determine severity based on State if space severity is OK', () => {
         const {getAllByRole} = renderWithStore(
             <MemoryRouter>
                 <PDisk nodeId={1} data={{State: TPDiskState.Normal}} />
@@ -20,6 +20,55 @@ describe('PDisk state', () => {
         expect(normalDisk.className).not.toBe(erroredDisk.className);
     });
 
+    it('Should determine severity based on space utilization if state severity is OK', () => {
+        const {getAllByRole} = renderWithStore(
+            <MemoryRouter>
+                <PDisk
+                    nodeId={1}
+                    data={{State: TPDiskState.Normal, AvailableSize: '100', TotalSize: '100'}}
+                />
+                <PDisk
+                    nodeId={2}
+                    data={{State: TPDiskState.Normal, AvailableSize: '14', TotalSize: '100'}}
+                />
+                <PDisk
+                    nodeId={3}
+                    data={{State: TPDiskState.Normal, AvailableSize: '4', TotalSize: '100'}}
+                />
+            </MemoryRouter>,
+        );
+
+        const [disk1, disk2, disk3] = getAllByRole('meter');
+
+        expect(disk1.className).toMatch(/_green\b/i);
+        expect(disk2.className).toMatch(/_yellow\b/i);
+        expect(disk3.className).toMatch(/_red\b/i);
+    });
+
+    it('Should determine severity based on max severity of state and space utilization ', () => {
+        const {getAllByRole} = renderWithStore(
+            <MemoryRouter>
+                <PDisk
+                    nodeId={1}
+                    data={{
+                        State: TPDiskState.ChunkQuotaError,
+                        AvailableSize: '100',
+                        TotalSize: '100',
+                    }}
+                />
+                <PDisk
+                    nodeId={2}
+                    data={{State: TPDiskState.Normal, AvailableSize: '4', TotalSize: '100'}}
+                />
+            </MemoryRouter>,
+        );
+
+        const [disk1, disk2] = getAllByRole('meter');
+
+        expect(disk1.className).toMatch(/_red\b/i);
+        expect(disk2.className).toMatch(/_red\b/i);
+    });
+
     it('Should display as unavailabe when no State is provided', () => {
         const {getAllByRole} = renderWithStore(
             <MemoryRouter>
@@ -34,4 +83,18 @@ describe('PDisk state', () => {
         expect(disk1.className).toMatch(/_grey\b/i);
         expect(disk2.className).not.toMatch(/_grey\b/i);
     });
+
+    it('Should display as unavailabe when no State is provided event if space severity is not OK', () => {
+        const {getAllByRole} = renderWithStore(
+            <MemoryRouter>
+                <PDisk nodeId={1} data={{AvailableSize: '14', TotalSize: '100'}} />
+                <PDisk nodeId={2} data={{AvailableSize: '4', TotalSize: '100'}} />
+            </MemoryRouter>,
+        );
+
+        const [disk1, disk2] = getAllByRole('meter');
+
+        expect(disk1.className).toMatch(/_grey\b/i);
+        expect(disk2.className).toMatch(/_grey\b/i);
+    });
 });

package/dist/containers/Storage/Storage.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import cn from 'bem-cn-lite';
-import DataTable from '@yandex-cloud/react-data-table';
+import DataTable from '@gravity-ui/react-data-table';
 import {RadioButton} from '@gravity-ui/uikit';
 
 import {Search} from '../../components/Search';

package/dist/containers/Storage/StorageGroups/StorageGroups.tsx

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import cn from 'bem-cn-lite';
-import DataTable, {Column, Settings, SortOrder} from '@yandex-cloud/react-data-table';
+import DataTable, {Column, Settings, SortOrder} from '@gravity-ui/react-data-table';
 import {Icon, Label, Popover, PopoverBehavior} from '@gravity-ui/uikit';
 
 import shieldIcon from '../../../assets/icons/shield.svg';
@@ -20,7 +20,7 @@ import {getUsage, isFullDonorData} from '../../../utils/storage';
 
 import {EmptyFilter} from '../EmptyFilter/EmptyFilter';
 import {VDisk} from '../VDisk';
-import {getDegradedSeverity, getUsageSeverity} from '../utils';
+import {getDegradedSeverity, getUsageSeverityForStorageGroup} from '../utils';
 
 import i18n from './i18n';
 import './StorageGroups.scss';
@@ -127,6 +127,7 @@ function StorageGroups({
         {
             name: TableColumnsIds.Type,
             header: tableColumnsNames[TableColumnsIds.Type],
+            // prettier-ignore
             render: ({value, row}) => (
                 <>
                     <Label>{(value as string) || '—'}</Label>
@@ -164,7 +165,7 @@ function StorageGroups({
                 // but the absence of a value is more clear
                 return row.Limit ? (
                     <Label
-                        theme={getUsageSeverity(usage)}
+                        theme={getUsageSeverityForStorageGroup(usage)}
                         className={b('usage-label', {overload: usage >= 90})}
                     >
                         {usage}%

package/dist/containers/Storage/StorageNodes/StorageNodes.tsx

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import cn from 'bem-cn-lite';
 
-import DataTable, {Column, Settings, SortOrder} from '@yandex-cloud/react-data-table';
+import DataTable, {Column, Settings, SortOrder} from '@gravity-ui/react-data-table';
 import {Popover, PopoverBehavior} from '@gravity-ui/uikit';
 
 import {VisibleEntities} from '../../../store/reducers/storage';

package/dist/containers/Storage/VDisk/VDisk.tsx

@@ -123,7 +123,7 @@ export const VDisk = ({data = {}, poolName, nodes, compact}: VDiskProps) => {
                             routes.node,
                             {id: data.NodeId, activeTab: STRUCTURE},
                             {
-                                pdiskId: data.PDisk?.PDiskId,
+                                pdiskId: data.PDiskId ?? data.PDisk?.PDiskId,
                                 vdiskId: stringifyVdiskId(data.VDiskId),
                             },
                         )}

package/dist/containers/Storage/utils/index.ts

@@ -1,12 +1,14 @@
 import type {IStoragePoolGroup} from '../../../types/store/storage';
+import {EFlag} from '../../../types/api/enums';
 
 export * from './constants';
 
-const generateEvaluator = <
-    OkLevel extends string,
-    WarnLevel extends string,
-    CritLevel extends string
->(warn: number, crit: number, levels: [OkLevel, WarnLevel, CritLevel]) =>
+const generateEvaluator =
+    <OkLevel extends string, WarnLevel extends string, CritLevel extends string>(
+        warn: number,
+        crit: number,
+        levels: [OkLevel, WarnLevel, CritLevel],
+    ) =>
     (value: number) => {
         if (0 <= value && value < warn) {
             return levels[0];
@@ -34,12 +36,26 @@ const canEvaluateErasureSpecies = (value?: string): value is keyof typeof degrad
     value !== undefined && value in degradationEvaluators;
 
 export const getDegradedSeverity = (group: IStoragePoolGroup) => {
-    const evaluate = canEvaluateErasureSpecies(group.ErasureSpecies) ?
-        degradationEvaluators[group.ErasureSpecies] :
-        defaultDegradationEvaluator;
+    const evaluate = canEvaluateErasureSpecies(group.ErasureSpecies)
+        ? degradationEvaluators[group.ErasureSpecies]
+        : defaultDegradationEvaluator;
 
     return evaluate(group.Missing);
 };
 
-export const getUsageSeverity = generateEvaluator(80, 85, ['success', 'warning', 'danger']);
-export const getUsageSeverityForEntityStatus = generateEvaluator(80, 85, ['Green', 'Yellow', 'Red']);
+export const getUsageSeverityForStorageGroup = generateEvaluator(80, 85, [
+    'success',
+    'warning',
+    'danger',
+]);
+export const getUsageSeverityForEntityStatus = generateEvaluator(80, 85, [
+    'Green',
+    'Yellow',
+    'Red',
+]);
+
+export const getUsageSeverityForPDisk = generateEvaluator(85, 95, [
+    EFlag.Green,
+    EFlag.Yellow,
+    EFlag.Red,
+]);

package/dist/containers/Tablet/Tablet.js

@@ -16,7 +16,7 @@ import {Tag} from '../../components/Tag/Tag';
 import Icon from '../../components/Icon/Icon';
 import EmptyState from '../../components/EmptyState/EmptyState';
 import {Link as ExternalLink, Button, Loader} from '@gravity-ui/uikit';
-import DataTable from '@yandex-cloud/react-data-table';
+import DataTable from '@gravity-ui/react-data-table';
 import CriticalActionDialog from '../../components/CriticalActionDialog/CriticalActionDialog';
 import routes, {createHref} from '../../routes';
 import {getDefaultNodePath} from '../Node/NodePages';

package/dist/containers/Tenant/Acl/Acl.js

@@ -4,7 +4,7 @@ import cn from 'bem-cn-lite';
 import _ from 'lodash';
 import {connect} from 'react-redux';
 import {Loader} from '@gravity-ui/uikit';
-import DataTable from '@yandex-cloud/react-data-table';
+import DataTable from '@gravity-ui/react-data-table';
 import {DEFAULT_TABLE_SETTINGS} from '../../../utils/constants';
 
 import './Acl.scss';

package/dist/containers/Tenant/Diagnostics/Consumers/Consumers.tsx

@@ -1,9 +1,9 @@
 import {useCallback, useEffect, useState} from 'react';
 import {useDispatch} from 'react-redux';
 import block from 'bem-cn-lite';
-import { escapeRegExp } from 'lodash/fp';
+import {escapeRegExp} from 'lodash/fp';
 
-import DataTable, {Column} from '@yandex-cloud/react-data-table';
+import DataTable, {Column} from '@gravity-ui/react-data-table';
 
 import type {EPathType} from '../../../../types/api/schema';
 import {Loader} from '../../../../components/Loader';

package/dist/containers/Tenant/Diagnostics/HotKeys/HotKeys.js

@@ -2,7 +2,7 @@ import {useEffect, useMemo} from 'react';
 import cn from 'bem-cn-lite';
 import {connect} from 'react-redux';
 import {Loader} from '@gravity-ui/uikit';
-import DataTable from '@yandex-cloud/react-data-table';
+import DataTable from '@gravity-ui/react-data-table';
 
 import Icon from '../../../../components/Icon/Icon';
 

package/dist/containers/Tenant/Diagnostics/OverloadedShards/OverloadedShards.tsx

@@ -2,7 +2,7 @@ import {useState, useContext, useEffect, useMemo} from 'react';
 import {useDispatch} from 'react-redux';
 import cn from 'bem-cn-lite';
 
-import DataTable, {Column, Settings, SortOrder} from '@yandex-cloud/react-data-table';
+import DataTable, {Column, Settings, SortOrder} from '@gravity-ui/react-data-table';
 import {Loader} from '@gravity-ui/uikit';
 
 import {DateRange, DateRangeValues} from '../../../../components/DateRange';
@@ -53,6 +53,7 @@ const tableColumnsNames = {
     NodeId: 'NodeId',
     PeakTime: 'PeakTime',
     InFlightTxCount: 'InFlightTxCount',
+    IntervalEnd: 'IntervalEnd',
 };
 
 function prepareCPUWorkloadValue(value: string) {
@@ -227,6 +228,10 @@ export const OverloadedShards = ({tenantPath, type}: OverloadedShardsProps) => {
                 align: DataTable.RIGHT,
                 sortable: false,
             },
+            {
+                name: tableColumnsNames.IntervalEnd,
+                render: ({value}) => formatDateTime(new Date(value as string).getTime()),
+            }
         ];
     }, [dispatch, history, tenantPath]);
 

package/dist/containers/Tenant/Diagnostics/Overview/Overview.tsx

@@ -1,15 +1,15 @@
 import {ReactNode, useCallback, useMemo} from 'react';
 import {shallowEqual, useDispatch, useSelector} from 'react-redux';
-import cn from 'bem-cn-lite';
 
-import {Loader} from '@gravity-ui/uikit';
+import {Loader} from '../../../../components/Loader';
 
 //@ts-ignore
-import SchemaInfoViewer from '../../Schema/SchemaInfoViewer/SchemaInfoViewer';
 import {TableIndexInfo} from '../../../../components/InfoViewer/schemaInfo';
+import {ResponseError} from '../../../../components/Errors/ResponseError';
 
 import {TopicInfo} from './TopicInfo';
 import {ChangefeedInfo} from './ChangefeedInfo';
+import {TableInfo} from './TableInfo';
 
 import {EPathType, TEvDescribeSchemeResult} from '../../../../types/api/schema';
 import {
@@ -33,8 +33,6 @@ import {
 } from '../../../../store/reducers/olapStats';
 import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks';
 
-import './Overview.scss';
-
 function prepareOlapTableGeneral(item?: TEvDescribeSchemeResult, olapStats?: any[]) {
     const tableData = item?.PathDescription?.ColumnTableDescription;
 
@@ -70,8 +68,6 @@ interface OverviewProps {
     tenantName?: string;
 }
 
-const b = cn('kv-tenant-overview');
-
 function Overview({type, tenantName, className}: OverviewProps) {
     const dispatch = useDispatch();
 
@@ -81,6 +77,7 @@ function Overview({type, tenantName, className}: OverviewProps) {
         wasLoaded,
         autorefresh,
         currentSchemaPath,
+        error,
     } = useSelector((state: any) => state.schema);
 
     const {data: {result: olapStats} = {result: undefined}, loading: olapStatsLoading} =
@@ -144,14 +141,6 @@ function Overview({type, tenantName, className}: OverviewProps) {
             : currentItem;
     }, [type, olapStats, currentItem]);
 
-    const renderLoader = () => {
-        return (
-            <div className={b('loader')}>
-                <Loader size="m" />
-            </div>
-        );
-    };
-
     const renderContent = () => {
         // verbose mapping to guarantee a correct render for new path types
         // TS will error when a new type is added but not mapped here
@@ -170,15 +159,15 @@ function Overview({type, tenantName, className}: OverviewProps) {
             [EPathType.EPathTypePersQueueGroup]: () => <TopicInfo data={schemaData} />,
         };
 
-        return (
-            (type && pathTypeToComponent[type]?.()) || (
-                <SchemaInfoViewer fullPath={currentItem.Path} data={schemaData} />
-            )
-        );
+        return (type && pathTypeToComponent[type]?.()) || <TableInfo data={schemaData} />;
     };
 
     if ((loading && !wasLoaded) || (isEntityWithMergedImpl && !mergedChildrenPaths)) {
-        return renderLoader();
+        return <Loader size="m" />;
+    }
+
+    if (error) {
+        return <ResponseError error={error} />;
     }
 
     return <div className={className}>{renderContent()}</div>;

package/dist/containers/Tenant/{Schema/SchemaInfoViewer/SchemaInfoViewer.scss → Diagnostics/Overview/TableInfo/TableInfo.scss}

@@ -1,6 +1,12 @@
-.schema-info-viewer {
+@import '../../../../../styles/mixins.scss';
+
+.ydb-diagnostics-table-info {
     overflow: auto;
 
+    &__title {
+        @include info-viewer-title();
+    }
+
     &__row {
         display: flex;
         flex-wrap: wrap;
@@ -19,19 +25,11 @@
         }
     }
 
-    &__item {
+    &__info-block {
         margin-bottom: 20px;
 
         .info-viewer__items {
             grid-template-columns: minmax(max-content, 280px);
         }
     }
-
-    &__title {
-        margin: 15px 0 10px;
-
-        font-size: var(--yc-text-body-2-font-size);
-        font-weight: 600;
-        line-height: var(--yc-text-body-2-line-height);
-    }
 }

package/dist/containers/Tenant/Diagnostics/Overview/TableInfo/TableInfo.tsx

@@ -0,0 +1,71 @@
+import {useMemo} from 'react';
+import cn from 'bem-cn-lite';
+
+import type {TEvDescribeSchemeResult} from '../../../../../types/api/schema';
+
+import {InfoViewer} from '../../../../../components/InfoViewer';
+
+import {getEntityName} from '../../../utils';
+
+import {prepareTableInfo} from './prepareTableInfo';
+
+import i18n from './i18n';
+
+import './TableInfo.scss';
+
+const b = cn('ydb-diagnostics-table-info');
+
+interface TableInfoProps {
+    data?: TEvDescribeSchemeResult;
+}
+
+export const TableInfo = ({data}: TableInfoProps) => {
+    const entityName = getEntityName(data?.PathDescription);
+
+    const {
+        generalTableInfo = [],
+        tableStatsInfo = [],
+        tabletMetricsInfo = [],
+        partitionConfigInfo = [],
+    } = useMemo(() => prepareTableInfo(data), [data]);
+
+    return (
+        <div className={b()}>
+            <InfoViewer
+                info={generalTableInfo}
+                title={entityName}
+                className={b('info-block')}
+                renderEmptyState={() => <div className={b('title')}>{entityName}</div>}
+            />
+            <div className={b('row')}>
+                {tabletMetricsInfo.length > 0 || partitionConfigInfo.length > 0 ? (
+                    <div className={b('col')}>
+                        <InfoViewer
+                            info={tabletMetricsInfo}
+                            title={i18n('tabletMetrics')}
+                            className={b('info-block')}
+                            renderEmptyState={() => null}
+                        />
+                        <InfoViewer
+                            info={partitionConfigInfo}
+                            title={i18n('partitionConfig')}
+                            className={b('info-block')}
+                            renderEmptyState={() => null}
+                        />
+                    </div>
+                ) : null}
+                <div className={b('col')}>
+                    {tableStatsInfo.map((info, index) => (
+                        <InfoViewer
+                            key={index}
+                            info={info}
+                            title={index === 0 ? i18n('tableStats') : undefined}
+                            className={b('info-block')}
+                            renderEmptyState={() => null}
+                        />
+                    ))}
+                </div>
+            </div>
+        </div>
+    );
+};

package/dist/containers/Tenant/Diagnostics/Overview/TableInfo/i18n/en.json

@@ -0,0 +1,5 @@
+{
+  "tableStats": "Table Stats",
+  "tabletMetrics": "Tablet Metrics",
+  "partitionConfig": "Partition Config"
+}

package/dist/containers/Tenant/Diagnostics/Overview/TableInfo/i18n/index.ts

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

package/dist/containers/Tenant/Diagnostics/Overview/TableInfo/i18n/ru.json

@@ -0,0 +1,5 @@
+{
+  "tableStats": "Статистика таблицы",
+  "tabletMetrics": "Метрики таблетки",
+  "partitionConfig": "Конфигурация партиции"
+}

package/dist/containers/Tenant/Diagnostics/Overview/TableInfo/index.ts

@@ -0,0 +1 @@
+export * from './TableInfo';

package/dist/containers/Tenant/Diagnostics/Overview/TableInfo/prepareTableInfo.ts

@@ -0,0 +1,96 @@
+import type {TEvDescribeSchemeResult} from '../../../../../types/api/schema';
+
+import {formatObject} from '../../../../../components/InfoViewer';
+import {
+    formatFollowerGroupItem,
+    formatPartitionConfigItem,
+    formatTableStatsItem,
+    formatTabletMetricsItem,
+} from '../../../../../components/InfoViewer/formatters';
+
+export const prepareTableInfo = (data?: TEvDescribeSchemeResult) => {
+    if (!data) {
+        return {};
+    }
+
+    const {PathDescription = {}} = data;
+
+    const {
+        TableStats = {},
+        TabletMetrics = {},
+        Table: {PartitionConfig = {}} = {},
+    } = PathDescription;
+
+    const {
+        PartCount,
+        RowCount,
+        DataSize,
+        IndexSize,
+
+        LastAccessTime,
+        LastUpdateTime,
+
+        ImmediateTxCompleted,
+        PlannedTxCompleted,
+        TxRejectedByOverload,
+        TxRejectedBySpace,
+        TxCompleteLagMsec,
+        InFlightTxCount,
+
+        RowUpdates,
+        RowDeletes,
+        RowReads,
+        RangeReads,
+        RangeReadRows,
+
+        ...restTableStats
+    } = TableStats;
+
+    const {FollowerGroups, FollowerCount, CrossDataCenterFollowerCount} = PartitionConfig;
+
+    const generalTableInfo = formatObject(formatTableStatsItem, {
+        PartCount,
+        RowCount,
+        DataSize,
+        IndexSize,
+        ...restTableStats,
+    });
+
+    const tableStatsInfo = [
+        formatObject(formatTableStatsItem, {
+            LastAccessTime,
+            LastUpdateTime,
+        }),
+        formatObject(formatTableStatsItem, {
+            ImmediateTxCompleted,
+            PlannedTxCompleted,
+            TxRejectedByOverload,
+            TxRejectedBySpace,
+            TxCompleteLagMsec,
+            InFlightTxCount,
+        }),
+        formatObject(formatTableStatsItem, {
+            RowUpdates,
+            RowDeletes,
+            RowReads,
+            RangeReads,
+            RangeReadRows,
+        }),
+    ];
+
+    const tabletMetricsInfo = formatObject(formatTabletMetricsItem, TabletMetrics);
+
+    let partitionConfigInfo = [];
+
+    if (Array.isArray(FollowerGroups) && FollowerGroups.length > 0) {
+        partitionConfigInfo = formatObject(formatFollowerGroupItem, FollowerGroups[0]);
+    } else if (FollowerCount !== undefined) {
+        partitionConfigInfo.push(formatPartitionConfigItem('FollowerCount', FollowerCount));
+    } else if (CrossDataCenterFollowerCount !== undefined) {
+        partitionConfigInfo.push(
+            formatPartitionConfigItem('CrossDataCenterFollowerCount', CrossDataCenterFollowerCount),
+        );
+    }
+
+    return {generalTableInfo, tableStatsInfo, tabletMetricsInfo, partitionConfigInfo};
+};

package/dist/containers/Tenant/Diagnostics/TopQueries/TopQueries.tsx

@@ -2,7 +2,7 @@ import {useCallback, useEffect, useRef, useState} from 'react';
 import {useDispatch} from 'react-redux';
 import cn from 'bem-cn-lite';
 
-import DataTable, {Column, Settings} from '@yandex-cloud/react-data-table';
+import DataTable, {Column, Settings} from '@gravity-ui/react-data-table';
 import {Loader} from '@gravity-ui/uikit';
 
 import {DateRange, DateRangeValues} from '../../../../components/DateRange';
@@ -21,6 +21,7 @@ import type {EPathType} from '../../../../types/api/schema';
 import type {ITopQueriesFilters} from '../../../../types/store/executeTopQueries';
 import type {IQueryResult} from '../../../../types/store/query';
 
+import {formatDateTime} from '../../../../utils';
 import {DEFAULT_TABLE_SETTINGS, HOUR_IN_SECONDS} from '../../../../utils/constants';
 import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks';
 import {prepareQueryError} from '../../../../utils/query';
@@ -51,6 +52,11 @@ const COLUMNS: Column<KeyValueRow>[] = [
         sortable: false,
         render: ({value}) => <TruncatedQuery value={value} maxQueryHeight={MAX_QUERY_HEIGHT} />,
     },
+    {
+        name: 'IntervalEnd',
+        width: 140,
+        render: ({value}) => formatDateTime(new Date(value as string).getTime()),
+    },
 ];
 
 interface TopQueriesProps {

package/dist/containers/Tenant/ObjectSummary/ObjectSummary.tsx

@@ -26,6 +26,8 @@ import {
     TColumnTableDescription,
     TDirEntry,
 } from '../../../types/api/schema';
+
+import {formatDateTime} from '../../../utils';
 import {isColumnEntityType, isIndexTable, isTableType} from '../utils/schema';
 
 import {
@@ -201,7 +203,7 @@ function ObjectSummary(props: ObjectSummaryProps) {
             const startTimeInMilliseconds = Number(currentSchemaData?.CreateStep);
             let createTime = '';
             if (startTimeInMilliseconds) {
-                createTime = new Date(startTimeInMilliseconds).toUTCString();
+                createTime = formatDateTime(startTimeInMilliseconds);
             }
 
             component = <InfoViewer info={[{label: 'Create time', value: createTime}]} />;