-
Notifications
You must be signed in to change notification settings - Fork 7
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.
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: add PDisk page #759
feat: add PDisk page #759
Conversation
<div className={b('row')} key="versions"> | ||
<SkeletonLabel /> | ||
<Skeleton className={b('versions')} /> | ||
</div> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Since ClusterInfo
is moved to a separate tab, layout shifts on data load doesn't affect us as much as before, so there is no need to fully preserve content height.
Removed separate versions row to make component usable for all tabs and pages
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Replaced with LinkWithIcon
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Mostly data from NodeStructure
PDisk
. Removed pDiskId, available and total fields, added links field
<> | ||
{title} | ||
{'\u00a0'} | ||
<Icon name="external" viewBox={'0 0 16 16'} width={16} height={16} /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Lets start to get rid of custom Icon
component and use icons from @gravity-ui/icons
?
@@ -0,0 +1,42 @@ | |||
import {Icon} from '@gravity-ui/uikit'; | |||
|
|||
import circleExclamationIcon from '../../assets/icons/circle-exclamation.svg'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Let's use @gravity-ui
icons if possible.
}); | ||
|
||
useEffect(() => { | ||
dispatch(setHeaderBreadcrumbs('pDisk', {nodeId, pDiskId})); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It seems this action should be done not in useEffect
, but when link leading to Pdisk page is clicked.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
No, it should be done in useEffect
, because you can get to this page using direct link (e.g. someone send link to problematic PDisk
in some messenger)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Our breadcrumbs reflect logical structure, not real user path. So for example Tenant
is always inside some cluster, PDisk
is always inside some Node
, VDisk
is always inside some PDisk
}, [dispatch, nodeId, pDiskId]); | ||
|
||
useEffect(() => { | ||
dispatch(getNodesList()); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
And this one too should be done when link leading to Pdisk page is clicked.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It's needed for PDisk
groups section
}; | ||
|
||
return ( | ||
<> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
No need in wrapper
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It contains two <div>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm totally blind today, sorry :(
src/store/reducers/pdisk/utils.ts
Outdated
) { | ||
const preparedGroups: PreparedStorageGroup[] = []; | ||
|
||
data.StoragePools?.forEach((pool) => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This function is rather difficult to read and needs a little refactoring as for me.
1411a96
to
25db7e7
Compare
25db7e7
to
a99e11a
Compare
Test stand: https://nda.ya.ru/t/wz9ltBPp74yLGq
Design: https://nda.ya.ru/t/YmNBafzM74yLYK
Current version is without controls buttons and usage section, they will be added further: #760 and #761