Skip to content

fix(ClusterInfo): update links view #1746

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
Dec 11, 2024
Merged

fix(ClusterInfo): update links view #1746

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
f318588
fix(ClusterInfo): update links view
artemmufazalov Dec 10, 2024
61c5782
fix: review
artemmufazalov Dec 11, 2024
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
33 changes: 7 additions & 26 deletions src/containers/Cluster/ClusterInfo/ClusterInfo.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,38 +3,19 @@
.cluster-info {
padding: 20px 0;

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

&__skeleton {
margin-top: 5px;
}

&__error {
@include mixins.body-2-typography();
&__section-title {
margin: var(--g-spacing-1) 0 var(--g-spacing-3);
@include mixins.text-subheader-2();
}

&__metrics {
Copy link
Member Author

Choose a reason for hiding this comment

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

I didn't find usages of these classes, so I deleted them

margin: 0 -15px;
padding: 0 15px !important;

.info-viewer__items {
grid-template-columns: repeat(2, minmax(auto, 250px));
}

.info-viewer__label {
width: 50px;
}
.info-viewer__value {
width: 130px;
}
}

&__tablets {
margin-left: 15px;
padding: 0 !important;
}
&__links {
display: flex;
flex-flow: row wrap;
gap: var(--g-spacing-2);
&__dc {
height: 20px;
}

&__clipboard-button {
Expand Down
61 changes: 52 additions & 9 deletions src/containers/Cluster/ClusterInfo/ClusterInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,13 @@
import {DefinitionList, Flex} from '@gravity-ui/uikit';

import {ResponseError} from '../../../components/Errors/ResponseError';
import {InfoViewer} from '../../../components/InfoViewer/InfoViewer';
import {InfoViewerSkeleton} from '../../../components/InfoViewerSkeleton/InfoViewerSkeleton';
import {LinkWithIcon} from '../../../components/LinkWithIcon/LinkWithIcon';
import type {AdditionalClusterProps} from '../../../types/additionalProps';
import type {TClusterInfo} from '../../../types/api/cluster';
import type {IResponseError} from '../../../types/api/error';
import type {VersionToColorMap} from '../../../types/versions';
import i18n from '../i18n';

import {b} from './shared';
import {getInfo, useClusterLinks} from './utils';
Expand All @@ -28,25 +31,65 @@ export const ClusterInfo = ({
const {info = [], links = []} = additionalClusterProps;

const clusterLinks = useClusterLinks();
const linksList = links.concat(clusterLinks);

const clusterInfo = getInfo(cluster ?? {}, info, [...links, ...clusterLinks]);

const getContent = () => {
if (loading) {
return <InfoViewerSkeleton className={b('skeleton')} rows={9} />;
}
const clusterInfo = getInfo(cluster ?? {}, info);

const renderInfo = () => {
if (error && !cluster) {
return null;
}

return <InfoViewer dots={true} info={clusterInfo} />;
return (
<div>
<div className={b('section-title')}>{i18n('title_info')}</div>
<DefinitionList nameMaxWidth={200}>
Copy link
Member Author

Choose a reason for hiding this comment

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

200 max width is names width of InfoViewer, it will look the same as Tablet page

{clusterInfo.map(({label, value}) => {
return (
<DefinitionList.Item key={label} name={label}>
{value}
</DefinitionList.Item>
);
})}
</DefinitionList>
</div>
);
};

const renderLinks = () => {
Copy link
Contributor

Choose a reason for hiding this comment

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

const linksList = links.concat(clusterLinks) ?
And farther logic should become leaner.

if (linksList.length) {
return (
<div>
<div className={b('section-title')}>{i18n('title_links')}</div>
<Flex direction="column" gap={4}>
{linksList.map(({title, url}) => {
return <LinkWithIcon key={title} title={title} url={url} />;
})}
</Flex>
</div>
);
}

return null;
};

const renderContent = () => {
if (loading) {
return <InfoViewerSkeleton className={b('skeleton')} rows={4} />;
}

return (
<Flex gap={10} wrap="nowrap">
{renderInfo()}
{renderLinks()}
</Flex>
);
};

return (
<div className={b()}>
{error ? <ResponseError error={error} className={b('error')} /> : null}
<div className={b('info')}>{getContent()}</div>
{renderContent()}
</div>
);
};
40 changes: 4 additions & 36 deletions src/containers/Cluster/ClusterInfo/utils.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,14 @@ import React from 'react';

import {Flex} from '@gravity-ui/uikit';

import type {InfoViewerItem} from '../../../components/InfoViewer/InfoViewer';
import {LinkWithIcon} from '../../../components/LinkWithIcon/LinkWithIcon';
import {ProgressViewer} from '../../../components/ProgressViewer/ProgressViewer';
import {Tags} from '../../../components/Tags';
import {useClusterBaseInfo} from '../../../store/reducers/cluster/cluster';
import type {ClusterLink} from '../../../types/additionalProps';
import {isClusterInfoV2} from '../../../types/api/cluster';
import type {TClusterInfo} from '../../../types/api/cluster';
import type {EFlag} from '../../../types/api/enums';
import type {TTabletStateInfo} from '../../../types/api/tablet';
import {EType} from '../../../types/api/tablet';
import type {InfoItem} from '../../../types/components';
import {formatNumber} from '../../../utils/dataFormatters/dataFormatters';
import {parseJson} from '../../../utils/utils';
import i18n from '../i18n';
Expand All @@ -29,18 +26,6 @@ const COLORS_PRIORITY: Record<EFlag, number> = {
Grey: 0,
};

export const compareTablets = (tablet1: TTabletStateInfo, tablet2: TTabletStateInfo) => {
Copy link
Member Author

Choose a reason for hiding this comment

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

Unneeded function

if (tablet1.Type === EType.TxAllocator) {
return 1;
}

if (tablet2.Type === EType.TxAllocator) {
return -1;
}

return 0;
};

const getDCInfo = (cluster: TClusterInfo) => {
if (isClusterInfoV2(cluster) && cluster.MapDataCenters) {
return Object.entries(cluster.MapDataCenters).map(([dc, count]) => (
Expand All @@ -52,12 +37,8 @@ const getDCInfo = (cluster: TClusterInfo) => {
return undefined;
};

export const getInfo = (
cluster: TClusterInfo,
additionalInfo: InfoViewerItem[],
links: ClusterLink[],
) => {
const info: InfoViewerItem[] = [];
export const getInfo = (cluster: TClusterInfo, additionalInfo: InfoItem[]) => {
const info: InfoItem[] = [];

if (isClusterInfoV2(cluster) && cluster.MapNodeStates) {
const arrayNodesStates = Object.entries(cluster.MapNodeStates) as [EFlag, number][];
Expand All @@ -80,7 +61,7 @@ export const getInfo = (
if (dataCenters?.length) {
info.push({
label: i18n('label_dc'),
value: <Tags tags={dataCenters} gap={2} />,
value: <Tags tags={dataCenters} gap={2} className={b('dc')} />,
Copy link
Member Author

@artemmufazalov artemmufazalov Dec 10, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

Set element height, so info and links sections rows have the same height

});
}

Expand All @@ -91,19 +72,6 @@ export const getInfo = (

info.push(...additionalInfo);

if (links.length) {
info.push({
label: i18n('links'),
value: (
<div className={b('links')}>
{links.map(({title, url}) => (
<LinkWithIcon key={title} title={title} url={url} />
))}
</div>
),
});
}

return info;
};

Expand Down
4 changes: 3 additions & 1 deletion src/containers/Cluster/i18n/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,14 @@
"storage-size": "Storage size",
"storage-groups": "Storage groups, {{diskType}}",
"links": "Links",
"link_cores": "Cores",
"link_cores": "Coredumps",
"link_logging": "Logging",
"context_cores": "cores",
"title_cpu": "CPU",
"title_storage": "Storage",
"title_memory": "Memory",
"title_info": "Info",
"title_links": "Links",
"label_nodes": "Nodes",
"label_hosts": "Hosts",
"label_storage-groups": "Storage groups",
Expand Down
5 changes: 2 additions & 3 deletions src/types/additionalProps.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import type {InfoViewerItem} from '../components/InfoViewer';

import type {TSystemStateInfo} from './api/nodes';
import type {ETenantType} from './api/tenant';
import type {InfoItem} from './components';
import type {VersionToColorMap} from './versions';

export interface AdditionalVersionsProps {
Expand All @@ -14,7 +13,7 @@ export interface ClusterLink {
}

export interface AdditionalClusterProps {
info?: InfoViewerItem[];
info?: InfoItem[];
links?: ClusterLink[];
}

Expand Down
6 changes: 6 additions & 0 deletions src/types/components.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import type React from 'react';

export interface InfoItem {
label: string;
value: React.ReactNode;
}
Loading