-
Notifications
You must be signed in to change notification settings - Fork 31
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
Provide option to optimise cluster for Regional-DR #1095
Provide option to optimise cluster for Regional-DR #1095
Conversation
@GowthamShanmugam Please review |
bcf9d6c
to
a9a2a9c
Compare
Please add screenshots |
packages/ocs/constants/common.ts
Outdated
export const DISASTER_RECOVERY_TARGET_ANNOTATION = | ||
'ocs.openshift.io/clusterIsDisasterRecoveryTarget'; |
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.
import this constant from odf core
packages/ocs/constants/common.ts
Outdated
export enum DRSetupStatus { | ||
InProgress = 'In Progress', | ||
Pending = 'Pending', | ||
Completed = 'Completed', | ||
} |
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 is not belongs to common, move to new file
packages/ocs/constants/common.ts
Outdated
export const DISASTER_RECOVERY_TARGET_ANNOTATION = | ||
'ocs.openshift.io/clusterIsDisasterRecoveryTarget'; | ||
|
||
export enum DRSetupStatus { |
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 is not DR status, it is migration status, please check with Santhos once
@@ -60,6 +60,7 @@ export const DetailsCard: React.FC = () => { | |||
: t('Disabled'); | |||
|
|||
const ocsName = getName(resourcesObj['ocs'].data?.[0]); | |||
//const disasterRecoveryStatus = getDRsetupStatus(); |
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.
//const disasterRecoveryStatus = getDRsetupStatus(); |
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.
delete this line
const [data, loaded, loadError] = useK8sList<CephClusterKind>( | ||
CephClusterModel, | ||
CEPH_NS | ||
); |
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.
const [data, loaded, loadError] = useK8sList<CephClusterKind>( | |
CephClusterModel, | |
CEPH_NS | |
); | |
const [cephData, cephLoaded, cephLoadError] = useK8sList<CephClusterKind>( | |
CephClusterModel, | |
CEPH_NS | |
); |
<div | ||
style={{ display: 'flex', justifyContent: 'space-between' }} | ||
> | ||
<p>{dRSetupStatus}</p> |
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.
dRSetupStatus is not translated
{loaded && !loadError ? ( | ||
<div> | ||
<div | ||
style={{ display: 'flex', justifyContent: 'space-between' }} |
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.
We dont need flux here
<Modal | ||
variant={ModalVariant.medium} | ||
title={t('Configure cluster for Regional-DR?')} | ||
isOpen={isOpen} | ||
onClose={closeModal} | ||
actions={[ | ||
<Button | ||
key="close" | ||
variant="secondary" | ||
onClick={closeModal} | ||
> | ||
Close | ||
</Button>, | ||
<Button | ||
key="optimize" | ||
variant="primary" | ||
onClick={handleOptimize} | ||
> | ||
Optimize | ||
</Button>, | ||
]} | ||
> | ||
<Trans t={t}> | ||
<p> | ||
Optimise the cluster for a Regional-DR setup by migrating | ||
OSDs. Migration may take sometime depending on several | ||
factors. To learn more about OSDs migration best practices | ||
and its consequences refer to the documentation | ||
</p> | ||
</Trans> | ||
</Modal> | ||
</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.
move this as separate component
</Button>, | ||
]} | ||
> | ||
<Trans t={t}> |
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.
simply use t('') here
{updateError && ( | ||
<Alert isInline variant="danger" title={t('An error occurred')}> | ||
{updateError} | ||
</Alert> | ||
)} |
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.
displaying alert on details card is not correct
are these brownfield changes only for internal mode dashboard or external mode as well ?? |
{dRSetupStatus === DRSetupStatus.Pending && ( | ||
<a onClick={openModal}>Optimize</a> | ||
)} | ||
</div> | ||
<Modal | ||
variant={ModalVariant.medium} | ||
title={t('Configure cluster for Regional-DR?')} | ||
isOpen={isOpen} | ||
onClose={closeModal} | ||
actions={[ | ||
<Button | ||
key="close" | ||
variant="secondary" | ||
onClick={closeModal} | ||
> | ||
Close | ||
</Button>, | ||
<Button | ||
key="optimize" | ||
variant="primary" | ||
onClick={handleOptimize} | ||
> | ||
Optimize |
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.
move all this to separate component... instead of polluting existing one (these changes are temporary as well)...
|
||
updatedResource.metadata.annotations = { | ||
...getAnnotations(updatedResource, {}), | ||
[DISASTER_RECOVERY_TARGET_ANNOTATION]: 'true', | ||
}; | ||
|
||
const updateData = { | ||
model: CephClusterModel, | ||
data: updatedResource, | ||
}; | ||
|
||
k8sUpdate(updateData) | ||
.then(() => { | ||
closeModal(); | ||
}) | ||
.catch((err) => { | ||
setUpdateError(err.message); | ||
}); |
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.
move all this to separate entity... instead of polluting existing component (these changes are temporary as well)...
a9a2a9c
to
4be4ca7
Compare
@@ -0,0 +1,109 @@ | |||
import * as React from 'react'; |
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.
Rename this file as osdMigrationModal.tsx and move this inside the modals folder with some subfolder.
} from '@patternfly/react-core'; | ||
import { MigrationStatus, getMigrationStatus } from './constants/osd-migration'; | ||
|
||
const OptimizeModal: React.FC<OptimizeModalProps> = ({ cephData }) => { |
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.
const OptimizeModal: React.FC<OptimizeModalProps> = ({ cephData }) => { | |
const OSDMigrationModal: React.FC<OSDMigrationModalProps> = ({ cephData }) => { |
Unknown = '', | ||
} | ||
|
||
export const getMigrationStatus = (cephData) => { |
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.
move this inside utils folder under ocs.ts, And rename this function as getOSDMigrationStatus
InProgress = 'In Progress', | ||
Pending = 'Pending', | ||
Completed = 'Completed', | ||
Unknown = '', |
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.
InProgress = 'In Progress', | |
Pending = 'Pending', | |
Completed = 'Completed', | |
Unknown = '', | |
IN_PROGRESS = 'In Progress', | |
PENDING = 'Pending', | |
COMPLETED = 'Completed', | |
UNKNOWN = '', |
Unknown = '', | ||
} | ||
|
||
export const getMigrationStatus = (cephData) => { |
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.
export const getMigrationStatus = (cephData) => { | |
export const getMigrationStatus = (ceph: CephClusterKind) => { |
pass ceph object directly , dont pass list
} | ||
|
||
export const getMigrationStatus = (cephData) => { | ||
if (cephData && cephData.length > 0) { |
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.
if (cephData && cephData.length > 0) { | |
if (!!ceph) { |
|
||
export const getMigrationStatus = (cephData) => { | ||
if (cephData && cephData.length > 0) { | ||
const ceph = cephData[0]; |
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.
const ceph = cephData[0]; | |
return MigrationStatus.Completed; | ||
} | ||
|
||
return MigrationStatus.Unknown; |
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.
return MigrationStatus.Unknown; | |
export const getMigrationStatus = (cephData) => { | ||
if (cephData && cephData.length > 0) { | ||
const ceph = cephData[0]; | ||
const bluestoreCount = ceph?.status?.storage?.osd?.storeType?.['bluestore']; |
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.
const bluestoreCount = ceph?.status?.storage?.osd?.storeType?.['bluestore']; | |
const bluestoreCount = ceph?.status?.storage?.osd?.storeType?.[BLUESTORE]; |
use constant
const ceph = cephData[0]; | ||
const bluestoreCount = ceph?.status?.storage?.osd?.storeType?.['bluestore']; | ||
const bluestoreRdrCount = | ||
ceph?.status?.storage?.osd?.storeType?.['bluestore-rdr']; |
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.
ceph?.status?.storage?.osd?.storeType?.['bluestore-rdr']; | |
ceph?.status?.storage?.osd?.storeType?.[BLUESTORE_RDR]; |
use constant
|
||
const DetailsCard: React.FC = () => { | ||
const { t } = useCustomTranslation(); | ||
const [cephData, cephLoaded, cephLoadError] = useK8sList<CephClusterKind>( | ||
CephClusterModel, | ||
CEPH_NS |
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.
what is the plan for multi storage cluster, here CEPH_NS is called a constant?
@@ -100,6 +112,14 @@ const DetailsCard: React.FC = () => { | |||
> | |||
{inTransitEncryptionStatus} | |||
</DetailItem> | |||
<DetailItem | |||
key="dr_setup_state" |
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.
key="dr_setup_state" | |
key="osd_migration" |
isLoading={!cephLoaded} | ||
error={cephLoadError} | ||
> | ||
<OptimizeModal cephData={cephData} /> |
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.
<OptimizeModal cephData={cephData} /> | |
<OptimizeModal cephData={cephData?.[0]} /> |
1034dbc
to
72ce5b7
Compare
|
||
const [cephData, cephLoaded, cephLoadError] = useK8sList<CephClusterKind>( | ||
CephClusterModel, | ||
ocsData?.[0].metadata?.namespace |
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.
ocsData?.[0].metadata?.namespace | |
getNamespace(ocsData?.[0]) |
const { t } = useCustomTranslation(); | ||
const dRSetupStatus: string = getOSDMigrationStatus(cephData); | ||
const [isOpen, setOpen] = React.useState(false); | ||
const [errorMessage, setErrorMessage] = React.useState<string | null>(null); |
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.
const [errorMessage, setErrorMessage] = React.useState<string | null>(null); | |
const [errorMessage, setErrorMessage] = React.useState<string>(''); |
cephData, | ||
}) => { | ||
const { t } = useCustomTranslation(); | ||
const dRSetupStatus: string = getOSDMigrationStatus(cephData); |
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 line will render again and again, use useMemo to prevent
|
||
const closeModal = () => { | ||
setOpen(false); | ||
setErrorMessage(null); |
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.
setErrorMessage(null); | |
setErrorMessage(''); |
}; | ||
|
||
return ( | ||
<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.
<div> | |
<> |
onClose={closeModal} | ||
actions={[ | ||
<Button key="close" variant="secondary" onClick={closeModal}> | ||
Close |
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.
Close | |
t('Close') |
Close | ||
</Button>, | ||
<Button key="optimize" variant="primary" onClick={handleOptimize}> | ||
Optimize |
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.
Optimize | |
t('Optimize') |
ModalBoxHeader, | ||
ModalBoxBody, |
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.
ModalBoxHeader, | |
ModalBoxBody, | |
<p> | ||
{t( | ||
'Configure the cluster for a Regional-DR setup by migrating OSDs. Migration may take sometime depending on several factors. To learn more about OSDs migration best practices and its consequences refer to the documentation.' | ||
)} | ||
</p> | ||
{errorMessage && ( | ||
<ModalBoxHeader> | ||
<Title headingLevel="h2" size="lg"> | ||
Error | ||
</Title> | ||
</ModalBoxHeader> | ||
)} | ||
<ModalBoxBody>{errorMessage}</ModalBoxBody> |
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.
<p> | |
{t( | |
'Configure the cluster for a Regional-DR setup by migrating OSDs. Migration may take sometime depending on several factors. To learn more about OSDs migration best practices and its consequences refer to the documentation.' | |
)} | |
</p> | |
{errorMessage && ( | |
<ModalBoxHeader> | |
<Title headingLevel="h2" size="lg"> | |
Error | |
</Title> | |
</ModalBoxHeader> | |
)} | |
<ModalBoxBody>{errorMessage}</ModalBoxBody> | |
use the title & description prop of the modal to pass this text.
<p> | ||
{t( | ||
'Configure the cluster for a Regional-DR setup by migrating OSDs. Migration may take sometime depending on several factors. To learn more about OSDs migration best practices and its consequences refer to the documentation.' | ||
)} | ||
</p> | ||
{errorMessage && ( | ||
<ModalBoxHeader> | ||
<Title headingLevel="h2" size="lg"> | ||
Error | ||
</Title> | ||
</ModalBoxHeader> | ||
)} | ||
<ModalBoxBody>{errorMessage}</ModalBoxBody> |
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.
the modal body should be inside <ModalBody>
tag
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.
Also are simply displaying error messages as a text inside modal body ?
packages/ocs/utils/osd-migration.ts
Outdated
export const IN_PROGRESS = 'In Progress'; | ||
export const PENDING = 'Pending'; | ||
export const COMPLETED = 'Completed'; | ||
export const FAILED = 'Failed'; |
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 think you misunderstood to keep it as constants,, Convert this status as enum and move it to the constant directory. under dataProtection.ts
packages/ocs/utils/osd-migration.ts
Outdated
export const BLUESTORE_RDR = 'bluestore-rdr'; | ||
export const BLUESTORE = 'bluestore'; |
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.
move this to a constant file dataProtection.ts
@@ -0,0 +1,71 @@ | |||
import React from 'react'; |
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.
Rename this file as osdMigrationModal.spec.tsx and keep it along with original file. Move this to same directory of osdMigrationModal.tsx
packages/ocs/utils/osd-migration.ts
Outdated
return ceph.status?.storage?.osd?.storeType?.[BLUESTORE] || 0; | ||
}; | ||
|
||
const getBluestoreRdrCount = (ceph: CephClusterKind): number => { | ||
return ceph.status?.storage?.osd?.storeType?.[BLUESTORE_RDR] || 0; |
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.
create a separate function under utils
which returns ceph.status?.storage?.osd?.storeType
, and use that every where needed... this will be used in another files as well related to this epic...
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.
eg:
const getBluestoreCount = (ceph: CephClusterKind): number => {
return getCephStoreType(ceph)?.[BLUESTORE] || 0;
};
6494c93
to
464be9d
Compare
/approve |
/approve cancel |
plz update PR and commit title, this PR is not for "enable DR support" |
/retitle Provide option to optimise cluster for Regional-DR |
as suggested above, plz update commit title as well (not just PR title)... |
464be9d
to
19d72b1
Compare
/approve cancel |
LGTM |
type OSDMigrationDetailsProps = { | ||
cephData: CephClusterKind; | ||
ocsData: StorageClusterKind; | ||
}; |
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.
rename file to osd-migration-details.tsx
).toBeInTheDocument(); | ||
}); | ||
}); | ||
}); |
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.
rename file to osd-migration-details
...
} | ||
|
||
export const BLUESTORE_RDR = 'bluestore-rdr'; | ||
export const BLUESTORE = 'bluestore'; |
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.
plz rename this file to data-protection
...
19d72b1
to
3ad33a6
Compare
3ad33a6
to
1422907
Compare
Signed-off-by: Timothy Asir Jeyasingh <[email protected]>
1422907
to
74e1979
Compare
/approve |
[APPROVALNOTIFIER] This PR is APPROVED This pull-request has been approved by: SanjalKatiyar, TimothyAsirJeyasing The full list of commands accepted by this bot can be found here. The pull request process is described here
Needs approval from an approver in each of these files:
Approvers can indicate their approval by writing |
046ef75
into
red-hat-storage:master
No description provided.