Skip to content

Commit 56f1fc6

Browse files
artemmufazalovartemmufazalov
authored
feat: configure meta settings, use for table columns width (#3068)
1 parent 8385920 commit 56f1fc6

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

56 files changed

+738
-345
lines changed

‎src/components/DiskStateProgressBar/DiskStateProgressBar.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22

3+
import {SETTING_KEYS} from '../../store/reducers/settings/constants';
34
import {cn} from '../../utils/cn';
4-
import {INVERTED_DISKS_KEY} from '../../utils/constants';
55
import {getSeverityColor} from '../../utils/disks/helpers';
66
import {useSetting} from '../../utils/hooks';
77

@@ -30,7 +30,7 @@ export function DiskStateProgressBar({
3030
content,
3131
className,
3232
}: DiskStateProgressBarProps) {
33-
const [inverted] = useSetting<boolean | undefined>(INVERTED_DISKS_KEY);
33+
const [inverted] = useSetting<boolean | undefined>(SETTING_KEYS.INVERTED_DISKS);
3434

3535
const mods: Record<string, boolean | undefined> = {inverted, compact, faded, empty, inactive};
3636

‎src/components/JsonViewer/JsonViewer.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import type * as DT100 from '@gravity-ui/react-data-table';
55
import DataTable from '@gravity-ui/react-data-table';
66
import {ActionTooltip, Button, Flex, Icon} from '@gravity-ui/uikit';
77

8-
import {CASE_SENSITIVE_JSON_SEARCH} from '../../utils/constants';
8+
import {SETTING_KEYS} from '../../store/reducers/settings/constants';
99
import {useSetting} from '../../utils/hooks';
1010
import type {ClipboardButtonProps} from '../ClipboardButton/ClipboardButton';
1111
import {ClipboardButton} from '../ClipboardButton/ClipboardButton';
@@ -122,7 +122,7 @@ function JsonViewerComponent({
122122
withClipboardButton,
123123
}: JsonViewerComponentProps) {
124124
const [caseSensitiveSearch, setCaseSensitiveSearch] = useSetting(
125-
CASE_SENSITIVE_JSON_SEARCH,
125+
SETTING_KEYS.CASE_SENSITIVE_JSON_SEARCH,
126126
false,
127127
);
128128

‎src/components/NetworkTable/hooks.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,19 @@ import {
22
useNodesHandlerHasWorkingClusterNetworkStats,
33
useViewerNodesHandlerHasNetworkStats,
44
} from '../../store/reducers/capabilities/hooks';
5-
import {ENABLE_NETWORK_TABLE_KEY} from '../../utils/constants';
5+
import {SETTING_KEYS} from '../../store/reducers/settings/constants';
66
import {useSetting} from '../../utils/hooks';
77

88
export function useShouldShowDatabaseNetworkTable() {
99
const viewerNodesHasNetworkStats = useViewerNodesHandlerHasNetworkStats();
10-
const [networkTableEnabled] = useSetting(ENABLE_NETWORK_TABLE_KEY);
10+
const [networkTableEnabled] = useSetting(SETTING_KEYS.ENABLE_NETWORK_TABLE);
1111

1212
return Boolean(viewerNodesHasNetworkStats && networkTableEnabled);
1313
}
1414

1515
export function useShouldShowClusterNetworkTable() {
1616
const nodesHasWorkingClusterNetworkStats = useNodesHandlerHasWorkingClusterNetworkStats();
17-
const [networkTableEnabled] = useSetting(ENABLE_NETWORK_TABLE_KEY);
17+
const [networkTableEnabled] = useSetting(SETTING_KEYS.ENABLE_NETWORK_TABLE);
1818

1919
return Boolean(nodesHasWorkingClusterNetworkStats && networkTableEnabled);
2020
}

‎src/components/PaginatedTable/ResizeablePaginatedTable.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import type {ColumnWidthByName} from '@gravity-ui/react-data-table';
22

33
import {useTableResize} from '../../utils/hooks/useTableResize';
4+
import {TableSkeleton} from '../TableSkeleton/TableSkeleton';
45

56
import type {PaginatedTableProps} from './PaginatedTable';
67
import {PaginatedTable} from './PaginatedTable';
@@ -23,10 +24,15 @@ export function ResizeablePaginatedTable<T, F>({
2324
columns,
2425
...props
2526
}: ResizeablePaginatedTableProps<T, F>) {
26-
const [tableColumnsWidth, setTableColumnsWidth] = useTableResize(columnsWidthLSKey);
27+
const [tableColumnsWidth, setTableColumnsWidth, isTableWidthLoading] =
28+
useTableResize(columnsWidthLSKey);
2729

2830
const updatedColumns = updateColumnsWidth(columns, tableColumnsWidth);
2931

32+
if (isTableWidthLoading) {
33+
return <TableSkeleton />;
34+
}
35+
3036
return (
3137
<PaginatedTable
3238
columns={updatedColumns}

‎src/components/ResizeableDataTable/ResizeableDataTable.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,8 @@ export function ResizeableDataTable<T>({
4444
data,
4545
...props
4646
}: ResizeableDataTableProps<T>) {
47-
const [tableColumnsWidth, setTableColumnsWidth] = useTableResize(columnsWidthLSKey);
47+
const [tableColumnsWidth, setTableColumnsWidth, isTableWidthLoading] =
48+
useTableResize(columnsWidthLSKey);
4849

4950
const handleSort = React.useCallback(
5051
(params: SortOrder | SortOrder[] | undefined) => {
@@ -82,7 +83,7 @@ export function ResizeableDataTable<T>({
8283
};
8384
}, [settings]);
8485

85-
if (isLoading) {
86+
if (isLoading || isTableWidthLoading) {
8687
return <TableSkeleton rows={loadingSkeletonRowsCount} />;
8788
}
8889

‎src/containers/App/Providers.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {ReactRouter5Adapter} from 'use-query-params/adapters/react-router-5';
1313
import {ComponentsProvider} from '../../components/ComponentsProvider/ComponentsProvider';
1414
import {componentsRegistry as defaultComponentsRegistry} from '../../components/ComponentsProvider/componentsRegistry';
1515
import type {ComponentsRegistry} from '../../components/ComponentsProvider/componentsRegistry';
16-
import {THEME_KEY} from '../../utils/constants';
16+
import {SETTING_KEYS} from '../../store/reducers/settings/constants';
1717
import {toaster} from '../../utils/createToast';
1818
import {useSetting} from '../../utils/hooks';
1919

@@ -57,7 +57,7 @@ export function Providers({
5757
}
5858

5959
function Theme({children}: {children: React.ReactNode}) {
60-
const [theme] = useSetting<string | undefined>(THEME_KEY);
60+
const [theme] = useSetting<string | undefined>(SETTING_KEYS.THEME);
6161

6262
return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
6363
}

‎src/containers/AppWithClusters/utils/useAdditionalTenantsProps.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import {isNil} from 'lodash';
22

33
import {useClusterBaseInfo} from '../../../store/reducers/cluster/cluster';
4+
import {SETTING_KEYS} from '../../../store/reducers/settings/constants';
45
import type {AdditionalTenantsProps} from '../../../types/additionalProps';
56
import type {ETenantType} from '../../../types/api/tenant';
67
import type {GetDatabaseLinks} from '../../../uiFactory/types';
78
import {uiFactory} from '../../../uiFactory/uiFactory';
8-
import {USE_CLUSTER_BALANCER_AS_BACKEND_KEY} from '../../../utils/constants';
99
import {useSetting} from '../../../utils/hooks';
1010
import type {GetLogsLink} from '../../../utils/logs';
1111
import type {GetMonitoringLink} from '../../../utils/monitoring';
@@ -23,7 +23,9 @@ export function useAdditionalTenantsProps({
2323
getDatabaseLinks,
2424
}: GetAdditionalTenantsProps) {
2525
const clusterInfo = useClusterBaseInfo();
26-
const [useClusterBalancerAsBackend] = useSetting<boolean>(USE_CLUSTER_BALANCER_AS_BACKEND_KEY);
26+
const [useClusterBalancerAsBackend] = useSetting<boolean>(
27+
SETTING_KEYS.USE_CLUSTER_BALANCER_AS_BACKEND,
28+
);
2729

2830
const {balancer, monitoring, logging, name: clusterName} = clusterInfo;
2931

‎src/containers/AsideNavigation/AsideNavigation.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ import {AsideHeader, FooterItem} from '@gravity-ui/navigation';
66
import type {IconData} from '@gravity-ui/uikit';
77
import {useHistory} from 'react-router-dom';
88

9+
import {SETTING_KEYS} from '../../store/reducers/settings/constants';
910
import {cn} from '../../utils/cn';
10-
import {ASIDE_HEADER_COMPACT_KEY} from '../../utils/constants';
1111
import {useSetting} from '../../utils/hooks';
1212

1313
import {InformationPopup} from './InformationPopup';
@@ -76,7 +76,7 @@ export function AsideNavigation(props: AsideNavigationProps) {
7676

7777
const [visiblePanel, setVisiblePanel] = React.useState<Panel>();
7878
const [informationPopupVisible, setInformationPopupVisible] = React.useState(false);
79-
const [compact, setIsCompact] = useSetting<boolean>(ASIDE_HEADER_COMPACT_KEY);
79+
const [compact, setIsCompact] = useSetting<boolean>(SETTING_KEYS.ASIDE_HEADER_COMPACT);
8080

8181
const toggleInformationPopup = () => setInformationPopupVisible((prev) => !prev);
8282

‎src/containers/AsideNavigation/InformationPopup/InformationPopup.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ import {Keyboard} from '@gravity-ui/icons';
22
import {Flex, Hotkey, Icon, Link, List, Text} from '@gravity-ui/uikit';
33

44
import {settingsManager} from '../../../services/settings';
5+
import {SETTING_KEYS} from '../../../store/reducers/settings/constants';
56
import {cn} from '../../../utils/cn';
6-
import {LANGUAGE_KEY} from '../../../utils/constants';
77
import {SHORTCUTS_HOTKEY} from '../hooks/useHotkeysPanel';
88
import i18n from '../i18n';
99

@@ -17,7 +17,10 @@ export interface InformationPopupProps {
1717

1818
export function InformationPopup({onKeyboardShortcutsClick}: InformationPopupProps) {
1919
const getDocumentationLink = () => {
20-
const lang = settingsManager.readUserSettingsValue(LANGUAGE_KEY, navigator.language);
20+
const lang = settingsManager.readUserSettingsValue(
21+
SETTING_KEYS.LANGUAGE,
22+
navigator.language,
23+
);
2124
return lang === 'ru' ? 'https://ydb.tech/docs/ru/' : 'https://ydb.tech/docs/en/';
2225
};
2326

‎src/containers/Cluster/ClusterOverview/ClusterOverview.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,12 @@ import {
88
useClusterDashboardAvailable,
99
} from '../../../store/reducers/capabilities/hooks';
1010
import type {ClusterGroupsStats} from '../../../store/reducers/cluster/types';
11+
import {SETTING_KEYS} from '../../../store/reducers/settings/constants';
1112
import type {AdditionalClusterProps} from '../../../types/additionalProps';
1213
import {isClusterInfoV2, isClusterInfoV5} from '../../../types/api/cluster';
1314
import type {TClusterInfo} from '../../../types/api/cluster';
1415
import type {IResponseError} from '../../../types/api/error';
1516
import {valueIsDefined} from '../../../utils';
16-
import {EXPAND_CLUSTER_DASHBOARD} from '../../../utils/constants';
1717
import {useSetting} from '../../../utils/hooks/useSetting';
1818
import {ClusterInfo} from '../ClusterInfo/ClusterInfo';
1919
import i18n from '../i18n';
@@ -40,7 +40,9 @@ interface ClusterOverviewProps {
4040
}
4141

4242
export function ClusterOverview(props: ClusterOverviewProps) {
43-
const [expandDashboard, setExpandDashboard] = useSetting<boolean>(EXPAND_CLUSTER_DASHBOARD);
43+
const [expandDashboard, setExpandDashboard] = useSetting<boolean>(
44+
SETTING_KEYS.EXPAND_CLUSTER_DASHBOARD,
45+
);
4446
const bridgeModeEnabled = useBridgeModeEnabled();
4547

4648
const bridgePiles = React.useMemo(() => {

0 commit comments

Comments
 (0)