Skip to content

feat(Clusters): allow add, edit and delete cluster funcs #2369

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jun 9, 2025
Merged

feat(Clusters): allow add, edit and delete cluster funcs #2369

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0466072
feat(Clusters): allow add, edit and delete cluster funcs
artemmufazalov Jun 4, 2025
7f027c2
fix: review fixes
artemmufazalov Jun 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 26 additions & 18 deletions src/containers/App/Content.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,6 @@ import {lazyComponent} from '../../utils/lazyComponent';
import Authentication from '../Authentication/Authentication';
import {getClusterPath} from '../Cluster/utils';
import Header from '../Header/Header';
import type {RawBreadcrumbItem} from '../Header/breadcrumbs';

import {
ClusterSlot,
Expand All @@ -41,7 +40,6 @@ import {
TenantSlot,
VDiskPageSlot,
} from './appSlots';
import i18n from './i18n';

import './App.scss';

Expand Down Expand Up @@ -147,26 +145,22 @@ export function Content(props: ContentProps) {
const redirectProps: RedirectProps =
redirect?.props ?? (singleClusterMode ? {to: getClusterPath()} : {to: routes.clusters});

let mainPage: RawBreadcrumbItem | undefined;
if (!singleClusterMode) {
mainPage = {text: i18n('pages.clusters'), link: routes.clusters};
}

return (
<Switch>
{singleClusterMode
? null
: renderRouteSlot(slots, {
path: routes.clusters,
exact: true,
component: Clusters,
slot: ClustersSlot,
})}
{additionalRoutes?.rendered}
{/* Single cluster routes */}
<Route key="single-cluster">
<Header mainPage={mainPage} />
<Route>
<Header />
<Switch>
{singleClusterMode
? null
: renderRouteSlot(slots, {
path: routes.clusters,
exact: true,
component: Clusters,
slot: ClustersSlot,
wrapper: GetMetaCapabilities,
})}
{/* Single cluster routes */}
{routesSlots.map((route) => {
return renderRouteSlot(slots, route);
})}
Expand Down Expand Up @@ -226,6 +220,20 @@ function GetCapabilities({children}: {children: React.ReactNode}) {
);
}

// Only for Clusters page, there is no need to request cluster capabilities there (GetCapabilities)
// This wrapper is not used in GetCapabilities so the page does not wait for 2 consecutive capabilities requests
function GetMetaCapabilities({children}: {children: React.ReactNode}) {
useMetaCapabilitiesQuery();
// It is always true if there is no meta, since request finishes with an error
const metaCapabilitiesLoaded = useMetaCapabilitiesLoaded();

return (
<LoaderWrapper loading={!metaCapabilitiesLoaded} size="l">
{children}
</LoaderWrapper>
);
}

interface ContentWrapperProps {
singleClusterMode: boolean;
isAuthenticated: boolean;
Expand Down
3 changes: 0 additions & 3 deletions src/containers/App/i18n/en.json
View file
Open in desktop

This file was deleted.

8 changes: 0 additions & 8 deletions src/containers/App/i18n/index.ts
View file
Open in desktop

This file was deleted.

3 changes: 0 additions & 3 deletions src/containers/App/i18n/ru.json
View file
Open in desktop

This file was deleted.

60 changes: 7 additions & 53 deletions src/containers/Clusters/Clusters.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,16 @@

.clusters {
overflow: auto;
gap: var(--g-spacing-4);

padding-top: 15px;
padding: var(--g-spacing-4) var(--g-spacing-5) 0;

@include mixins.body-2-typography();
@include mixins.flex-container();

&__autorefresh {
margin-left: auto;
}
&__cluster {
display: flex;
align-items: center;
}
&__cluster-status {
width: 18px;
height: 18px;
Expand Down Expand Up @@ -63,11 +61,6 @@
white-space: normal;
}

&__controls {
display: flex;

margin-bottom: 20px;
}
&__control {
width: 200px;
margin-right: 15px;
Expand All @@ -87,48 +80,6 @@
transition: none;
}

&__aggregation,
&__controls {
margin-right: 15px;
margin-left: 15px;
}

&__aggregation {
display: flex;
align-items: center;

width: max-content;
height: 46px;
margin-bottom: 20px;
padding: 10px 20px;

border: 1px solid var(--g-color-line-generic);
border-radius: 10px;
background: var(--g-color-base-generic-ultralight);
}

&__aggregation-value-container {
display: flex;
align-items: center;

max-width: 230px;

font-size: var(--g-text-subheader-3-font-size);
line-height: var(--g-text-subheader-3-line-height);
}

&__aggregation-value-container:not(:last-child) {
margin-right: 30px;
}

&__aggregation-label {
margin-right: 8px;

font-weight: 200;

color: var(--g-color-text-complementary);
}

&__text {
color: var(--g-color-text-primary);
@include mixins.body-2-typography();
Expand All @@ -147,7 +98,6 @@
&__table-wrapper {
overflow: auto;

padding-left: 5px;
@include mixins.flex-container();
}

Expand Down Expand Up @@ -186,4 +136,8 @@
margin-left: 15px;
@include mixins.body-2-typography();
}

&__remove-cluster {
color: var(--ydb-color-status-red);
}
}
54 changes: 40 additions & 14 deletions src/containers/Clusters/Clusters.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,34 @@
import React from 'react';

import DataTable from '@gravity-ui/react-data-table';
import {Select, TableColumnSetup} from '@gravity-ui/uikit';
import {Flex, Select, TableColumnSetup, Text} from '@gravity-ui/uikit';
import {Helmet} from 'react-helmet-async';

import {AutoRefreshControl} from '../../components/AutoRefreshControl/AutoRefreshControl';
import {ResponseError} from '../../components/Errors/ResponseError';
import {Loader} from '../../components/Loader';
import {ResizeableDataTable} from '../../components/ResizeableDataTable/ResizeableDataTable';
import {Search} from '../../components/Search';
import {
useDeleteClusterFeatureAvailable,
useEditClusterFeatureAvailable,
} from '../../store/reducers/capabilities/hooks';
import {changeClustersFilters, clustersApi} from '../../store/reducers/clusters/clusters';
import {
aggregateClustersInfo,
filterClusters,
selectClusterNameFilter,
selectServiceFilter,
selectStatusFilter,
selectVersionFilter,
} from '../../store/reducers/clusters/selectors';
import {setHeaderBreadcrumbs} from '../../store/reducers/header/header';
import {uiFactory} from '../../uiFactory/uiFactory';
import {DEFAULT_TABLE_SETTINGS} from '../../utils/constants';
import {useAutoRefreshInterval, useTypedDispatch, useTypedSelector} from '../../utils/hooks';
import {useSelectedColumns} from '../../utils/hooks/useSelectedColumns';
import {getMinorVersion} from '../../utils/versions';

import {ClustersStatistics} from './ClustersStatistics';
import {CLUSTERS_COLUMNS, CLUSTERS_COLUMNS_WIDTH_LS_KEY} from './columns';
import {CLUSTERS_COLUMNS_WIDTH_LS_KEY, getClustersColumns} from './columns';
import {
CLUSTERS_SELECTED_COLUMNS_KEY,
COLUMNS_NAMES,
Expand All @@ -44,6 +48,15 @@ export function Clusters() {

const dispatch = useTypedDispatch();

React.useEffect(() => {
dispatch(setHeaderBreadcrumbs('clusters', {}));
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it possible to set it as default value in store instead of useEffect here?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. It is not a default value, there is no clusters page in single-cluster version
  2. useEffect is needed here anyway to reset current breadcrumbs state. So even if it will be a default value, some function call will be needed

}, [dispatch]);

const isEditClusterAvailable =
useEditClusterFeatureAvailable() && uiFactory.onEditCluster !== undefined;
const isDeleteClusterAvailable =
useDeleteClusterFeatureAvailable() && uiFactory.onDeleteCluster !== undefined;

const clusterName = useTypedSelector(selectClusterNameFilter);
const status = useTypedSelector(selectStatusFilter);
const service = useTypedSelector(selectServiceFilter);
Expand All @@ -62,8 +75,12 @@ export function Clusters() {
dispatch(changeClustersFilters({version: value}));
};

const rawColumns = React.useMemo(() => {
return getClustersColumns({isEditClusterAvailable, isDeleteClusterAvailable});
}, [isDeleteClusterAvailable, isEditClusterAvailable]);

const {columnsToShow, columnsToSelect, setColumns} = useSelectedColumns(
CLUSTERS_COLUMNS,
rawColumns,
CLUSTERS_SELECTED_COLUMNS_KEY,
COLUMNS_TITLES,
DEFAULT_COLUMNS,
Expand Down Expand Up @@ -99,11 +116,6 @@ export function Clusters() {
return filterClusters(clusters ?? [], {clusterName, status, service, version});
}, [clusterName, clusters, service, status, version]);

const aggregation = React.useMemo(
() => aggregateClustersInfo(filteredClusters),
[filteredClusters],
);

const statuses = React.useMemo(() => {
return Array.from(
new Set(
Expand All @@ -114,14 +126,29 @@ export function Clusters() {
.map((el) => ({value: el, content: el}));
}, [clusters]);

const renderPageTitle = () => {
return (
<Flex justifyContent="space-between">
<Flex gap={2}>
<Text variant="header-1">{i18n('page_title')}</Text>
<Text variant="header-1" color="secondary">
{clusters?.length}
</Text>
</Flex>
<AutoRefreshControl className={b('autorefresh')} />
</Flex>
);
};

return (
<div className={b()}>
<Helmet>
<title>{i18n('page_title')}</title>
</Helmet>

<ClustersStatistics stats={aggregation} count={filteredClusters.length} />
<div className={b('controls')}>
{renderPageTitle()}

<Flex>
<div className={b('control', {wide: true})}>
<Search
placeholder={i18n('controls_search-placeholder')}
Expand Down Expand Up @@ -178,8 +205,7 @@ export function Clusters() {
sortable={false}
/>
</div>
<AutoRefreshControl className={b('autorefresh')} />
</div>
</Flex>
{query.isError ? <ResponseError error={query.error} className={b('error')} /> : null}
{query.isLoading ? <Loader size="l" /> : null}
{query.fulfilledTimeStamp ? (
Expand Down
70 changes: 0 additions & 70 deletions src/containers/Clusters/ClustersStatistics.tsx
View file
Open in desktop

This file was deleted.

Loading
Loading