From 4f5aec560cb4b6bf18db2bf08850cf7da37583a7 Mon Sep 17 00:00:00 2001 From: solovevayaroslavna Date: Tue, 25 Apr 2023 12:41:37 +0400 Subject: [PATCH 1/3] PMM-11704-restore-from-selection: fix updation of backupsArtifacts --- .../Restore/Restore.service.ts | 10 ----- .../EditDBClusterPage/Restore/Restore.tsx | 40 ++++++++++++++----- .../core/reducers/backups/backupArtifacts.ts | 20 ++++++++++ .../app/percona/shared/core/reducers/index.ts | 2 + public/app/percona/shared/core/selectors.ts | 1 + .../ui-events/components/Telemetry.tsx | 2 +- 6 files changed, 53 insertions(+), 22 deletions(-) create mode 100644 public/app/percona/shared/core/reducers/backups/backupArtifacts.ts diff --git a/public/app/percona/dbaas/components/DBCluster/EditDBClusterPage/Restore/Restore.service.ts b/public/app/percona/dbaas/components/DBCluster/EditDBClusterPage/Restore/Restore.service.ts index 97cb6508bb446..34c7469d8aa8d 100644 --- a/public/app/percona/dbaas/components/DBCluster/EditDBClusterPage/Restore/Restore.service.ts +++ b/public/app/percona/dbaas/components/DBCluster/EditDBClusterPage/Restore/Restore.service.ts @@ -1,18 +1,8 @@ import { SelectableValue } from '@grafana/data'; import { DBClusterService } from '../../DBCluster.service'; -import { DBaaSBackupService } from '../DBaaSBackups/DBaaSBackups.service'; export const RestoreService = { - async loadBackupArtifacts(locationId: string): Promise>> { - const backupArtifactsResponse = await DBaaSBackupService.list(locationId); - - return backupArtifactsResponse.map((backup) => ({ - label: backup.key, - value: backup.key, - })); - }, - async loadSecretsNames(k8sClusterName: string): Promise>> { const secretsResponse = await DBClusterService.getDBClusterSecrets(k8sClusterName); const secrets = secretsResponse?.secrets || []; diff --git a/public/app/percona/dbaas/components/DBCluster/EditDBClusterPage/Restore/Restore.tsx b/public/app/percona/dbaas/components/DBCluster/EditDBClusterPage/Restore/Restore.tsx index e998487d22b54..dbd8421bb1f69 100644 --- a/public/app/percona/dbaas/components/DBCluster/EditDBClusterPage/Restore/Restore.tsx +++ b/public/app/percona/dbaas/components/DBCluster/EditDBClusterPage/Restore/Restore.tsx @@ -1,12 +1,13 @@ import { AsyncSelectField, validators } from '@percona/platform-core'; -import React, { FC, useState } from 'react'; +import React, { FC, useState, useEffect } from 'react'; import { Field } from 'react-final-form'; import { FieldSet, useStyles, Switch } from '@grafana/ui'; +import { fetchBackupArtifacts } from 'app/percona/shared/core/reducers/backups/backupArtifacts'; +import { useDispatch, useSelector } from 'app/types'; -import { useSelector } from '../../../../../../types'; import { SelectField } from '../../../../../shared/components/Form/SelectField'; -import { getBackupLocations } from '../../../../../shared/core/selectors'; +import { getBackupLocations, getBackupArtifacts } from '../../../../../shared/core/selectors'; import { Messages } from './Restore.messages'; import { RestoreService } from './Restore.service'; @@ -16,6 +17,8 @@ import { RestoreFields, RestoreFromProps } from './Restore.types'; export const Restore: FC = ({ form }) => { const styles = useStyles(getStyles); + const dispatch = useDispatch(); + const [enableRestore, setEnableRestore] = useState(false); const { result: locations = [], loading: locationsLoading } = useSelector(getBackupLocations); const locationsOptions = locations.map((location) => ({ @@ -23,8 +26,18 @@ export const Restore: FC = ({ form }) => { value: location.locationID, })); + const { result: backupArtifacts = [], loading: backupArtifactsLoading } = useSelector(getBackupArtifacts); + const { restoreFrom, kubernetesCluster } = form.getState().values; const restoreFromValue = restoreFrom?.value; + + useEffect(() => { + if (restoreFromValue && enableRestore) { + dispatch(fetchBackupArtifacts({ locationId: restoreFromValue })); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [restoreFromValue, enableRestore]); + return (
= ({ form }) => { )} {restoreFromValue !== undefined && restoreFromValue ? ( - RestoreService.loadBackupArtifacts(restoreFromValue)} - defaultOptions - placeholder={Messages.placeholders.backupArtifact} - label={Messages.labels.backupArtifact} - validate={validators.required} - /> + + {({ input }) => ( +
+ +
+ )} + ) : (
)} diff --git a/public/app/percona/shared/core/reducers/backups/backupArtifacts.ts b/public/app/percona/shared/core/reducers/backups/backupArtifacts.ts new file mode 100644 index 0000000000000..e302b0060e0ab --- /dev/null +++ b/public/app/percona/shared/core/reducers/backups/backupArtifacts.ts @@ -0,0 +1,20 @@ +import { createAsyncThunk } from '@reduxjs/toolkit'; + +import { SelectableValue } from '@grafana/data'; +import { createAsyncSlice } from 'app/features/alerting/unified/utils/redux'; +import { DBaaSBackupService } from 'app/percona/dbaas/components/DBCluster/EditDBClusterPage/DBaaSBackups/DBaaSBackups.service'; +export const fetchBackupArtifacts = createAsyncThunk( + 'percona/fetchBackupArtifacts', + async (args: { locationId: string }, thunkAPI): Promise>> => { + const backupArtifactsResponse = await DBaaSBackupService.list(args.locationId); + + return backupArtifactsResponse.map((backup) => ({ + label: backup.key, + value: backup.key, + })); + } +); + +const perconaBackupArtifactsSlice = createAsyncSlice('fetchBackupArtifacts', fetchBackupArtifacts, []).reducer; + +export default perconaBackupArtifactsSlice; diff --git a/public/app/percona/shared/core/reducers/index.ts b/public/app/percona/shared/core/reducers/index.ts index a2e54109edd3b..e61eef7691916 100644 --- a/public/app/percona/shared/core/reducers/index.ts +++ b/public/app/percona/shared/core/reducers/index.ts @@ -16,6 +16,7 @@ import { uiEventsReducer } from 'app/percona/ui-events/reducer'; import { ServerInfo } from '../types'; import advisorsReducers from './advisors/advisors'; +import perconaBackupArtifacts from './backups/backupArtifacts'; import perconaBackupLocations from './backups/backupLocations'; import perconaAddDBCluster from './dbaas/addDBCluster/addDBCluster'; import perconaDBClustersReducer from './dbaas/dbClusters/dbClusters'; @@ -248,6 +249,7 @@ export default { templates: templatesReducer, services: servicesReducer, nodes: nodesReducer, + backupArtifacts: perconaBackupArtifacts, backupLocations: perconaBackupLocations, tour: tourReducer, telemetry: uiEventsReducer, diff --git a/public/app/percona/shared/core/selectors.ts b/public/app/percona/shared/core/selectors.ts index 6434c64595103..9c84c01480e63 100644 --- a/public/app/percona/shared/core/selectors.ts +++ b/public/app/percona/shared/core/selectors.ts @@ -21,6 +21,7 @@ export const getTemplates = (state: StoreState) => state.percona.templates; export const getServices = (state: StoreState) => state.percona.services; export const getNodes = (state: StoreState) => state.percona.nodes; export const getBackupLocations = (state: StoreState) => state.percona.backupLocations; +export const getBackupArtifacts = (state: StoreState) => state.percona.backupArtifacts; export const getTour = (state: StoreState) => state.percona.tour; export const getAccessRoles = (state: StoreState) => state.percona.roles; export const getUsers = (state: StoreState) => state.users; diff --git a/public/app/percona/ui-events/components/Telemetry.tsx b/public/app/percona/ui-events/components/Telemetry.tsx index 77dee75bccf40..3ccc0f8bb2f2b 100644 --- a/public/app/percona/ui-events/components/Telemetry.tsx +++ b/public/app/percona/ui-events/components/Telemetry.tsx @@ -1,9 +1,9 @@ import React, { FC, useEffect } from 'react'; -import { useSelector } from 'react-redux'; import { getPerconaSettings } from 'app/percona/shared/core/selectors'; import { EventStore } from 'app/percona/ui-events/EventStore'; import { UIEventsService } from 'app/percona/ui-events/UIEvents.service'; +import { useSelector } from 'app/types'; export interface UiEventsProps {} From 1d8138174d9c0e9e2823da917b57e40cdd5c2a6c Mon Sep 17 00:00:00 2001 From: solovevayaroslavna Date: Tue, 25 Apr 2023 18:26:14 +0400 Subject: [PATCH 2/3] PMM-11673-fix-psmdb-configuration: fix test --- .../DBCluster/EditDBClusterPage/Restore/Restore.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/app/percona/dbaas/components/DBCluster/EditDBClusterPage/Restore/Restore.test.tsx b/public/app/percona/dbaas/components/DBCluster/EditDBClusterPage/Restore/Restore.test.tsx index 010b3cd248549..e22706a9fb3d7 100644 --- a/public/app/percona/dbaas/components/DBCluster/EditDBClusterPage/Restore/Restore.test.tsx +++ b/public/app/percona/dbaas/components/DBCluster/EditDBClusterPage/Restore/Restore.test.tsx @@ -58,7 +58,7 @@ describe('DBaaS DBCluster creation Restore section ::', () => { expect(screen.getByTestId('toggle-scheduled-restore')).toBeInTheDocument(); const checkbox = screen.getByTestId('toggle-scheduled-restore'); await waitFor(() => fireEvent.click(checkbox)); - expect(screen.getByTestId('backupArtifact-field-container')).toBeInTheDocument(); + expect(screen.getByTestId('backup-select-wrapper')).toBeInTheDocument(); }); it('shows secrets field if kubernetesCluster name exists in form', async () => { await waitFor(() => From 59d1347a1894f776b62a7f328a2acfda0f15cefc Mon Sep 17 00:00:00 2001 From: solovevayaroslavna Date: Tue, 25 Apr 2023 19:00:16 +0400 Subject: [PATCH 3/3] PMM-11704-restore-from-selection: add serializedError --- .../core/reducers/backups/backupArtifacts.ts | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/public/app/percona/shared/core/reducers/backups/backupArtifacts.ts b/public/app/percona/shared/core/reducers/backups/backupArtifacts.ts index e302b0060e0ab..188845d6f623b 100644 --- a/public/app/percona/shared/core/reducers/backups/backupArtifacts.ts +++ b/public/app/percona/shared/core/reducers/backups/backupArtifacts.ts @@ -1,18 +1,21 @@ import { createAsyncThunk } from '@reduxjs/toolkit'; import { SelectableValue } from '@grafana/data'; -import { createAsyncSlice } from 'app/features/alerting/unified/utils/redux'; +import { createAsyncSlice, withSerializedError } from 'app/features/alerting/unified/utils/redux'; import { DBaaSBackupService } from 'app/percona/dbaas/components/DBCluster/EditDBClusterPage/DBaaSBackups/DBaaSBackups.service'; export const fetchBackupArtifacts = createAsyncThunk( 'percona/fetchBackupArtifacts', - async (args: { locationId: string }, thunkAPI): Promise>> => { - const backupArtifactsResponse = await DBaaSBackupService.list(args.locationId); + async (args: { locationId: string }, thunkAPI): Promise>> => + withSerializedError( + (async () => { + const backupArtifactsResponse = await DBaaSBackupService.list(args.locationId); - return backupArtifactsResponse.map((backup) => ({ - label: backup.key, - value: backup.key, - })); - } + return backupArtifactsResponse.map((backup) => ({ + label: backup.key, + value: backup.key, + })); + })() + ) ); const perconaBackupArtifactsSlice = createAsyncSlice('fetchBackupArtifacts', fetchBackupArtifacts, []).reducer;