Skip to content

Commit

Permalink
[PLAT-15287]: Add PITR Column and Restore Window Information to Backu…
Browse files Browse the repository at this point in the history 
…p List

Summary: Added PITR column and Restore window information to back up list page

Test Plan:
Tested manually

{F284780}

{F284781}

Reviewers: kkannan

Reviewed By: kkannan

Subscribers: ui, yugaware

Differential Revision: https://phorge.dev.yugabyte.com/D38000
  • Loading branch information
@Lingeshwar
Lingeshwar committed Sep 12, 2024
1 parent dc9cc67 commit 2e5ebef
Show file tree
Hide file tree
Showing 2 changed files with 119 additions and 30 deletions.
147 changes: 119 additions & 28 deletions managed/ui/src/components/backupv2/components/BackupList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ import { getBackupsList } from '../common/BackupAPI';
import { StatusBadge } from '../../common/badge/StatusBadge';
import { YBButton, YBMultiSelectRedesiged } from '../../common/forms/fields';
import { YBLoading } from '../../common/indicators';
import { Box, Typography, makeStyles } from '@material-ui/core';
import { YBTooltip } from '../../../redesign/components';
import { BackupDetails, IncrementalBackupProps } from './BackupDetails';
import {
BACKUP_REFETCH_INTERVAL,
Expand All @@ -42,7 +44,7 @@ import { formatBytes } from '../../xcluster/ReplicationUtils';

import { AccountLevelBackupEmpty, UniverseLevelBackupEmpty } from './BackupEmpty';
import { YBTable } from '../../common/YBTable';
import { find } from 'lodash';
import { find, isEmpty, get } from 'lodash';
import { fetchTablesInUniverse } from '../../../actions/xClusterReplication';
import { AllowedTasks, TableTypeLabel } from '../../../redesign/helpers/dtos';
import { ybFormatDate } from '../../../redesign/helpers/DateUtils';
Expand All @@ -56,7 +58,6 @@ import { Action, Resource } from '../../../redesign/features/rbac';
import { TaskDetailSimpleComp } from '../../../redesign/features/tasks/components/TaskDetailSimpleComp';
import './BackupList.scss';


// eslint-disable-next-line @typescript-eslint/no-var-requires
const reactWidgets = require('react-widgets');
// eslint-disable-next-line @typescript-eslint/no-var-requires
Expand Down Expand Up @@ -136,6 +137,37 @@ interface BackupListOptions {
allowedTasks: AllowedTasks;
}

const useTooltipStyles = makeStyles((theme) => ({
customWidth: {
maxWidth: 'none'
},
tooltipHeader: {
padding: theme.spacing(1.5, 2),
borderBottom: '1px solid #E5E5E9'
},
toolTipTitle: {
fontWeight: 600,
fontSize: 15
},
tooltipBody: {
display: 'flex',
flexDirection: 'column',
padding: theme.spacing(2.5, 2)
},
windowContainer: {
padding: theme.spacing(1.5, 2),
backgroundColor: '#F7F9FB',
borderRadius: '8px',
border: '1px solid #E5E5E9',
gap: '10px',
margin: theme.spacing(0.75, 0)
},
dottedBorder: {
borderBottom: '1px dotted #0B1117',
width: 'fit-content'
}
}));

export const BackupList: FC<BackupListOptions> = ({
allowTakingBackup,
universeUUID,
Expand All @@ -162,10 +194,12 @@ export const BackupList: FC<BackupListOptions> = ({

const featureFlags = useSelector((state: any) => state.featureFlags);

const classes = useTooltipStyles();
const isNewRestoreModalEnabled =
featureFlags.test.enableNewRestoreModal || featureFlags.released.enableNewRestoreModal;

const enableBackupPITR = featureFlags.test.enableBackupPITR || featureFlags.released.enableBackupPITR;
const enableBackupPITR =
featureFlags.test.enableBackupPITR || featureFlags.released.enableBackupPITR;

const timeReducer = (_state: TIME_RANGE_STATE, action: OptionTypeBase) => {
if (action.label === 'Custom') {
Expand Down Expand Up @@ -387,17 +421,22 @@ export const BackupList: FC<BackupListOptions> = ({
};

const backups: IBackup[] = backupsList?.data.entities.map((b: IBackup) => {
return { ...b, backupUUID: b.commonBackupInfo.backupUUID };
const windowPITRArr = b.commonBackupInfo.responseList.filter(
(r) => !isEmpty(r?.backupPointInTimeRestoreWindow)
);
const statusPITR = isEmpty(windowPITRArr) ? 'Not Enabled' : 'Enabled';
return { ...b, backupUUID: b.commonBackupInfo.backupUUID, statusPITR, windowPITRArr };
});

const isBackupNotSucceeded = (state: Backup_States) => [
Backup_States.IN_PROGRESS,
Backup_States.STOPPING,
Backup_States.FAILED,
Backup_States.FAILED_TO_DELETE,
Backup_States.SKIPPED,
Backup_States.STOPPED
].includes(state);
const isBackupNotSucceeded = (state: Backup_States) =>
[
Backup_States.IN_PROGRESS,
Backup_States.STOPPING,
Backup_States.FAILED,
Backup_States.FAILED_TO_DELETE,
Backup_States.SKIPPED,
Backup_States.STOPPED
].includes(state);

if (!isFilterApplied() && backups?.length === 0) {
return allowTakingBackup ? (
Expand Down Expand Up @@ -639,7 +678,9 @@ export const BackupList: FC<BackupListOptions> = ({
}
width="20%"
>
Incremental Backups
Incremental
<br />
Backups
</TableHeaderColumn>
<TableHeaderColumn
dataField="backupType"
Expand All @@ -648,6 +689,60 @@ export const BackupList: FC<BackupListOptions> = ({
>
API Type
</TableHeaderColumn>
{enableBackupPITR && (
<TableHeaderColumn
dataField="statusPITR"
dataFormat={(statusPITR, row) => {
const startWindowTime = get(
row,
'windowPITRArr[0].backupPointInTimeRestoreWindow.timestampRetentionWindowStartMillis',
false
);
const endWindowTime = get(
row,
'windowPITRArr[0].backupPointInTimeRestoreWindow.timestampRetentionWindowEndMillis',
false
);
const windowExists = startWindowTime && endWindowTime;
return (
<YBTooltip
interactive={true}
classes={{ tooltip: classes.customWidth }}
title={
windowExists ? (
<Box display="flex" flexDirection="column" width="auto">
<Box className={classes.tooltipHeader}>
<Typography className={classes.toolTipTitle}>Restore Window</Typography>
</Box>
<Box className={classes.tooltipBody}>
<Typography variant="body2">
You may restore to any time between:
</Typography>
<Box className={classes.windowContainer}>
<Typography variant="body2">
<b>{ybFormatDate(startWindowTime)}</b> to &nbsp;
<b>{ybFormatDate(endWindowTime)}</b>
</Typography>
</Box>
</Box>
</Box>
) : (
''
)
}
>
<div className={windowExists ? classes.dottedBorder : ''}>{statusPITR}</div>
</YBTooltip>
);
}}
width="10%"
dataSort
>
Point-in-Time
<br />
Restore
</TableHeaderColumn>
)}
<TableHeaderColumn
dataField="createTime"
dataFormat={(_, row: IBackup) => ybFormatDate(row.commonBackupInfo.createTime)}
Expand Down Expand Up @@ -677,15 +772,14 @@ export const BackupList: FC<BackupListOptions> = ({
<TableHeaderColumn
dataField="lastBackupState"
dataFormat={(lastBackupState, row: IBackup) => {

return <div onClick={e => e.stopPropagation()} className='backup-status'>
<StatusBadge statusType={lastBackupState} />
{
isBackupNotSucceeded(row.commonBackupInfo.state) && (
return (
<div onClick={(e) => e.stopPropagation()} className="backup-status">
<StatusBadge statusType={lastBackupState} />
{isBackupNotSucceeded(row.commonBackupInfo.state) && (
<TaskDetailSimpleComp taskUUID={row.commonBackupInfo.taskUUID} />
)
}
</div>;
)}
</div>
);
}}
width="25%"
>
Expand Down Expand Up @@ -782,9 +876,9 @@ export const BackupList: FC<BackupListOptions> = ({
)
}
/>
{isNewRestoreModalEnabled && restoreDetails && (

!enableBackupPITR ? (
{isNewRestoreModalEnabled &&
restoreDetails &&
(!enableBackupPITR ? (
<BackupRestoreNewModal
backupDetails={restoreDetails as any}
visible={true}
Expand All @@ -805,11 +899,8 @@ export const BackupList: FC<BackupListOptions> = ({
}}
visible={true}
incrementalBackupProps={incrementalBackupProps}

/>
)

)}
))}
</Row>
);
};
2 changes: 0 additions & 2 deletions managed/ui/src/components/universes/UniverseSupportBundle/SecondStep/SecondStep.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -163,8 +163,6 @@ export const updateOptions = (
payloadObj = { ...payloadObj, prometheusMetricsTypes: prometheusMetricsTypes };
}
});
console.warn('_______ payload obj');
console.warn(payloadObj);
return payloadObj;
};

Expand Down

0 comments on commit 2e5ebef

Please sign in to comment.