Skip to content
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

feat: make links from disk pop-up better #1986

Merged
merged 1 commit into from
Feb 28, 2025
+45 −24
Merged

feat: make links from disk pop-up better #1986

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
7 changes: 0 additions & 7 deletions src/components/PDiskInfo/PDiskInfo.scss
View file

This file was deleted.

9 changes: 2 additions & 7 deletions src/components/PDiskInfo/PDiskInfo.tsx
View file
Original file line number Diff line number Diff line change
@@ -3,7 +3,6 @@ import {Flex} from '@gravity-ui/uikit';
import {getPDiskPagePath} from '../../routes';
import {valueIsDefined} from '../../utils';
import {formatBytes} from '../../utils/bytesParsers';
import {cn} from '../../utils/cn';
import {formatStorageValuesToGb} from '../../utils/dataFormatters/dataFormatters';
import {createPDiskDeveloperUILink} from '../../utils/developerUI/developerUI';
import type {PreparedPDisk} from '../../utils/disks/types';
@@ -16,10 +15,6 @@ import {StatusIcon} from '../StatusIcon/StatusIcon';

import {pDiskInfoKeyset} from './i18n';

import './PDiskInfo.scss';

const b = cn('ydb-pdisk-info');

interface GetPDiskInfoOptions<T extends PreparedPDisk> {
pDisk?: T;
nodeId?: number | string | null;
@@ -156,7 +151,7 @@ function getPDiskInfo<T extends PreparedPDisk>({
additionalInfo.push({
label: pDiskInfoKeyset('links'),
value: (
<span className={b('links')}>
<Flex wrap="wrap" gap={2}>
{withPDiskPageLink && (
<LinkWithIcon
title={pDiskInfoKeyset('pdisk-page')}
@@ -170,7 +165,7 @@ function getPDiskInfo<T extends PreparedPDisk>({
url={pDiskInternalViewerPath}
/>
)}
</span>
</Flex>
),
});
}
19 changes: 18 additions & 1 deletion src/components/PDiskPopup/PDiskPopup.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
import React from 'react';

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

import {getPDiskPagePath} from '../../routes';
import {selectNodesMap} from '../../store/reducers/nodesList';
import {EFlag} from '../../types/api/enums';
import {valueIsDefined} from '../../utils';
@@ -12,6 +15,7 @@ import {bytesToGB, isNumeric} from '../../utils/utils';
import {InfoViewer} from '../InfoViewer';
import type {InfoViewerItem} from '../InfoViewer';
import {LinkWithIcon} from '../LinkWithIcon/LinkWithIcon';
import {pDiskInfoKeyset} from '../PDiskInfo/i18n';

const errorColors = [EFlag.Orange, EFlag.Red, EFlag.Yellow];

@@ -78,9 +82,22 @@ export const preparePDiskData = (
pDiskId: PDiskId,
});

const pDiskPagePath = getPDiskPagePath(PDiskId, NodeId);
pdiskData.push({
label: 'Links',
value: <LinkWithIcon title={'Developer UI'} url={pDiskInternalViewerPath} />,
value: (
<Flex gap={2} wrap="wrap">
<LinkWithIcon
title={pDiskInfoKeyset('pdisk-page')}
url={pDiskPagePath}
external={false}
/>
<LinkWithIcon
title={pDiskInfoKeyset('developer-ui')}
url={pDiskInternalViewerPath}
/>
</Flex>
),
});
}

6 changes: 0 additions & 6 deletions src/components/VDiskInfo/VDiskInfo.scss
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,4 @@
.ydb-vdisk-info {
&__links {
display: flex;
flex-flow: row wrap;
gap: var(--g-spacing-2);
}

&__title {
display: flex;
flex-direction: row;
8 changes: 7 additions & 1 deletion src/components/VDiskInfo/VDiskInfo.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import React from 'react';

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

import {getVDiskPagePath} from '../../routes';
import {valueIsDefined} from '../../utils';
import {cn} from '../../utils/cn';
@@ -182,7 +184,11 @@ export function VDiskInfo<T extends PreparedVDisk>({
if (links.length) {
vdiskInfo.push({
label: vDiskInfoKeyset('links'),
value: <div className={b('links')}>{links}</div>,
value: (
<Flex wrap="wrap" gap={2}>
{links}
</Flex>
),
});
}
}
20 changes: 18 additions & 2 deletions src/components/VDiskPopup/VDiskPopup.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import React from 'react';

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

import {getVDiskPagePath} from '../../routes';
import {selectNodesMap} from '../../store/reducers/nodesList';
import {EFlag} from '../../types/api/enums';
import {valueIsDefined} from '../../utils';
@@ -19,6 +20,7 @@ import {InternalLink} from '../InternalLink';
import {LinkWithIcon} from '../LinkWithIcon/LinkWithIcon';
import {preparePDiskData} from '../PDiskPopup/PDiskPopup';
import {getVDiskLink} from '../VDisk/utils';
import {vDiskInfoKeyset} from '../VDiskInfo/i18n';

import './VDiskPopup.scss';

@@ -162,9 +164,23 @@ const prepareVDiskData = (data: PreparedVDisk, withDeveloperUILink?: boolean) =>
vDiskSlotId: VDiskSlotId,
});

const vDiskPagePath = getVDiskPagePath(VDiskSlotId, PDiskId, NodeId);
vdiskData.push({
label: 'Links',
value: <LinkWithIcon title={'Developer UI'} url={vDiskInternalViewerPath} />,
value: (
<Flex wrap="wrap" gap={2}>
<LinkWithIcon
key={vDiskPagePath}
title={vDiskInfoKeyset('vdisk-page')}
url={vDiskPagePath}
external={false}
/>
<LinkWithIcon
title={vDiskInfoKeyset('developer-ui')}
url={vDiskInternalViewerPath}
/>
</Flex>
),
});
}

Unchanged files with check annotations Beta

View file
config-overrides.js
});
if (env === 'production') {
config.output.path = path.resolve(__dirname, 'build/');

Check warning on line 35 in config-overrides.js

GitHub Actions / Verify Files 

Assignment to property of function parameter 'config'
}
config.plugins.push(
new MonacoWebpackPlugin({
// By default jest does not transform anything in node_modules
// So this override excludes node_modules except @gravity-ui
// see https://github.com/timarney/react-app-rewired/issues/241
config.transformIgnorePatterns = ['node_modules/(?!(@gravity-ui|@mjackson)/)'];

Check warning on line 61 in config-overrides.js

GitHub Actions / Verify Files 

Assignment to property of function parameter 'config'
// Add .github directory to roots
config.roots = ['<rootDir>/src', '<rootDir>/.github'];

Check warning on line 64 in config-overrides.js

GitHub Actions / Verify Files 

Assignment to property of function parameter 'config'
// Update testMatch to include .github directory
config.testMatch = [

Check warning on line 67 in config-overrides.js

GitHub Actions / Verify Files 

Assignment to property of function parameter 'config'
'<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}',
'<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}',
'<rootDir>/.github/**/*.{spec,test}.{js,jsx,ts,tsx}',
View file
src/components/ComponentsProvider/registry.ts
type RegistryEntity<T = any> = T;

Check warning on line 1 in src/components/ComponentsProvider/registry.ts

GitHub Actions / Verify Files 

Unexpected any. Specify a different type
type RegistryEntities = Record<string, RegistryEntity>;
export class Registry<Entities extends RegistryEntities = {}> {
type?: Entities;
private entities: any = {};

Check warning on line 7 in src/components/ComponentsProvider/registry.ts

GitHub Actions / Verify Files 

Unexpected any. Specify a different type
set<Id extends keyof Entities>(id: Id, entity: Entities[Id]) {
this.entities[id] = entity;
}
type ComponentType<T> =
T extends React.ComponentType<any>

Check warning on line 27 in src/components/ComponentsProvider/registry.ts

GitHub Actions / Verify Files 

Unexpected any. Specify a different type
? React.ComponentType<React.ComponentPropsWithoutRef<T>>
: never;
View file
src/components/Illustration/Illustration.tsx
className?: string;
}
type IllustrationStore = Record<string, Record<string, () => Promise<{default: any}>>>;

Check warning on line 12 in src/components/Illustration/Illustration.tsx

GitHub Actions / Verify Files 

Unexpected any. Specify a different type
const store: IllustrationStore = {
light: {
srcGetter()
.then((svg) => setSrc(svg.default))
.catch((e) => {
console.error(e);

Check warning on line 39 in src/components/Illustration/Illustration.tsx

GitHub Actions / Verify Files 

Unexpected console statement
setSrc('');
});
}
View file
src/components/InfoViewer/utils.ts
defaultValueFormatter?: (value: Shape[keyof Shape]) => React.ReactNode;
}
export function createInfoFormatter<Shape extends Record<string, any>>({

Check warning on line 35 in src/components/InfoViewer/utils.ts

GitHub Actions / Verify Files 

Unexpected any. Specify a different type
values: valueFormatters,
labels: labelMap,
defaultValueFormatter,