PMM-10599 change backup modals to separate pages

.yarn/sdks/eslint/bin/eslint.js

@@ -1,13 +1,13 @@
 #!/usr/bin/env node
 
 const {existsSync} = require(`fs`);
-const {createRequire, createRequireFromPath} = require(`module`);
+const {createRequire} = require(`module`);
 const {resolve} = require(`path`);
 
 const relPnpApiPath = "../../../../.pnp.cjs";
 
 const absPnpApiPath = resolve(__dirname, relPnpApiPath);
-const absRequire = (createRequire || createRequireFromPath)(absPnpApiPath);
+const absRequire = createRequire(absPnpApiPath);
 
 if (existsSync(absPnpApiPath)) {
   if (!process.versions.pnp) {

.yarn/sdks/eslint/lib/api.js

@@ -1,13 +1,13 @@
 #!/usr/bin/env node
 
 const {existsSync} = require(`fs`);
-const {createRequire, createRequireFromPath} = require(`module`);
+const {createRequire} = require(`module`);
 const {resolve} = require(`path`);
 
 const relPnpApiPath = "../../../../.pnp.cjs";
 
 const absPnpApiPath = resolve(__dirname, relPnpApiPath);
-const absRequire = (createRequire || createRequireFromPath)(absPnpApiPath);
+const absRequire = createRequire(absPnpApiPath);
 
 if (existsSync(absPnpApiPath)) {
   if (!process.versions.pnp) {

.yarn/sdks/integrations.yml

@@ -2,5 +2,5 @@
 # Manual changes might be lost!
 
 integrations:
-  - vim
   - vscode
+  - vim

.yarn/sdks/prettier/index.js

@@ -1,13 +1,13 @@
 #!/usr/bin/env node
 
 const {existsSync} = require(`fs`);
-const {createRequire, createRequireFromPath} = require(`module`);
+const {createRequire} = require(`module`);
 const {resolve} = require(`path`);
 
 const relPnpApiPath = "../../../.pnp.cjs";
 
 const absPnpApiPath = resolve(__dirname, relPnpApiPath);
-const absRequire = (createRequire || createRequireFromPath)(absPnpApiPath);
+const absRequire = createRequire(absPnpApiPath);
 
 if (existsSync(absPnpApiPath)) {
   if (!process.versions.pnp) {

.yarn/sdks/typescript/bin/tsc

@@ -1,13 +1,13 @@
 #!/usr/bin/env node
 
 const {existsSync} = require(`fs`);
-const {createRequire, createRequireFromPath} = require(`module`);
+const {createRequire} = require(`module`);
 const {resolve} = require(`path`);
 
 const relPnpApiPath = "../../../../.pnp.cjs";
 
 const absPnpApiPath = resolve(__dirname, relPnpApiPath);
-const absRequire = (createRequire || createRequireFromPath)(absPnpApiPath);
+const absRequire = createRequire(absPnpApiPath);
 
 if (existsSync(absPnpApiPath)) {
   if (!process.versions.pnp) {

.yarn/sdks/typescript/bin/tsserver

@@ -1,13 +1,13 @@
 #!/usr/bin/env node
 
 const {existsSync} = require(`fs`);
-const {createRequire, createRequireFromPath} = require(`module`);
+const {createRequire} = require(`module`);
 const {resolve} = require(`path`);
 
 const relPnpApiPath = "../../../../.pnp.cjs";
 
 const absPnpApiPath = resolve(__dirname, relPnpApiPath);
-const absRequire = (createRequire || createRequireFromPath)(absPnpApiPath);
+const absRequire = createRequire(absPnpApiPath);
 
 if (existsSync(absPnpApiPath)) {
   if (!process.versions.pnp) {

.yarn/sdks/typescript/lib/tsc.js

@@ -1,13 +1,13 @@
 #!/usr/bin/env node
 
 const {existsSync} = require(`fs`);
-const {createRequire, createRequireFromPath} = require(`module`);
+const {createRequire} = require(`module`);
 const {resolve} = require(`path`);
 
 const relPnpApiPath = "../../../../.pnp.cjs";
 
 const absPnpApiPath = resolve(__dirname, relPnpApiPath);
-const absRequire = (createRequire || createRequireFromPath)(absPnpApiPath);
+const absRequire = createRequire(absPnpApiPath);
 
 if (existsSync(absPnpApiPath)) {
   if (!process.versions.pnp) {

.yarn/sdks/typescript/lib/tsserver.js

@@ -1,13 +1,13 @@
 #!/usr/bin/env node
 
 const {existsSync} = require(`fs`);
-const {createRequire, createRequireFromPath} = require(`module`);
+const {createRequire} = require(`module`);
 const {resolve} = require(`path`);
 
 const relPnpApiPath = "../../../../.pnp.cjs";
 
 const absPnpApiPath = resolve(__dirname, relPnpApiPath);
-const absRequire = (createRequire || createRequireFromPath)(absPnpApiPath);
+const absRequire = createRequire(absPnpApiPath);
 
 const moduleWrapper = tsserver => {
   if (!process.versions.pnp) {

.yarn/sdks/typescript/lib/tsserverlibrary.js

@@ -1,13 +1,13 @@
 #!/usr/bin/env node
 
 const {existsSync} = require(`fs`);
-const {createRequire, createRequireFromPath} = require(`module`);
+const {createRequire} = require(`module`);
 const {resolve} = require(`path`);
 
 const relPnpApiPath = "../../../../.pnp.cjs";
 
 const absPnpApiPath = resolve(__dirname, relPnpApiPath);
-const absRequire = (createRequire || createRequireFromPath)(absPnpApiPath);
+const absRequire = createRequire(absPnpApiPath);
 
 const moduleWrapper = tsserver => {
   if (!process.versions.pnp) {

.yarn/sdks/typescript/lib/typescript.js

@@ -1,13 +1,13 @@
 #!/usr/bin/env node
 
 const {existsSync} = require(`fs`);
-const {createRequire, createRequireFromPath} = require(`module`);
+const {createRequire} = require(`module`);
 const {resolve} = require(`path`);
 
 const relPnpApiPath = "../../../../.pnp.cjs";
 
 const absPnpApiPath = resolve(__dirname, relPnpApiPath);
-const absRequire = (createRequire || createRequireFromPath)(absPnpApiPath);
+const absRequire = createRequire(absPnpApiPath);
 
 if (existsSync(absPnpApiPath)) {
   if (!process.versions.pnp) {

package.json

@@ -275,7 +275,7 @@
     "@opentelemetry/api": "1.1.0",
     "@opentelemetry/exporter-collector": "0.25.0",
     "@opentelemetry/semantic-conventions": "1.5.0",
-    "@percona/platform-core": "1.0.8",
+    "@percona/platform-core": "^1.0.9",
     "@popperjs/core": "2.11.5",
     "@react-aria/button": "3.5.1",
     "@react-aria/dialog": "3.2.1",

packages/grafana-ui/src/components/Collapse/CollapsableSection.tsx

@@ -20,6 +20,7 @@ export interface Props {
   labelId?: string;
   // @Percona
   controlled?: boolean;
+  buttonDataTestId?: string;
 }
 
 export const CollapsableSection: FC<Props> = ({
@@ -32,6 +33,7 @@ export const CollapsableSection: FC<Props> = ({
   labelId,
   loading = false,
   controlled = false,
+  buttonDataTestId,
 }) => {
   const [open, toggleOpen] = useState<boolean>(isOpen);
   const styles = useStyles2(collapsableSectionStyles);
@@ -67,6 +69,7 @@ export const CollapsableSection: FC<Props> = ({
           aria-expanded={open && !loading}
           aria-controls={`collapse-content-${id}`}
           aria-labelledby={buttonLabelId}
+          data-testid={buttonDataTestId}
         >
           {loading ? (
             <Spinner className={styles.spinner} />

public/app/percona/backup/Backup.constants.ts

@@ -0,0 +1,3 @@
+export const NEW_BACKUP_URL = '/backup/new';
+export const BACKUP_SCHEDULED_URL = '/backup/scheduled';
+export const BACKUP_INVENTORY_URL = '/backup/inventory';

public/app/percona/backup/Backup.messages.ts

@@ -11,6 +11,7 @@ export const Messages = {
   createScheduledBackup: 'Create scheduled backup',
   backupManagement: 'Backup Management',
   backupInventory: {
+    newBackup: 'New backup',
     table: {
       noData: 'No backups found',
       columns: {
@@ -43,6 +44,8 @@ export const Messages = {
       "For security reasons, we won't delete this backup from the filesystem. Please make sure to manually remove it.",
     getLogsTitle: (name: string) => `Backup logs for ${name}`,
     getDeleteMessage: (name: string) => `Are you sure you want to delete "${name}"?`,
+    addSuccess: 'Backup successfully created',
+    getDeleteSuccess: (name: string) => `Backup "${name}" successfully deleted.`,
   },
   restoreHistory: {
     table: {
@@ -70,6 +73,7 @@ export const Messages = {
     getDeleteSuccess: (name: string) => `Backup location "${name}" successfully deleted.`,
   },
   scheduledBackups: {
+    newScheduledBackup: 'New Scheduled Backup',
     table: {
       noData: 'No scheduled backups found',
       columns: {

public/app/percona/backup/Backup.service.ts

@@ -0,0 +1,159 @@
+import { CancelToken } from 'axios';
+
+import { api } from 'app/percona/shared/helpers/api';
+
+import { getCronStringFromValues } from '../shared/helpers/cron/cron';
+
+import { BackupMode, BackupType, DataModel, RetryMode } from './Backup.types';
+import { AddBackupFormProps } from './components/AddBackupPage/AddBackupPage.types';
+
+const BASE_URL = '/v1/management/backup/Backups';
+
+export const BackupService = {
+  backup(values: AddBackupFormProps, token?: CancelToken) {
+    const {
+      id,
+      service,
+      location,
+      period,
+      month,
+      day,
+      weekDay,
+      startHour,
+      startMinute,
+      backupName,
+      description,
+      retryMode,
+      retryInterval,
+      retryTimes,
+      active,
+      retention,
+      mode,
+      type,
+      dataModel,
+    } = values;
+    const strRetryInterval = `${retryInterval}s`;
+    const resultRetryTimes = retryMode === RetryMode.MANUAL ? 0 : retryTimes;
+
+    if (type === BackupType.DEMAND) {
+      return this.triggerBackup(
+        service!.value?.id || '',
+        location!.value || '',
+        backupName,
+        description,
+        strRetryInterval,
+        resultRetryTimes!,
+        dataModel,
+        token
+      );
+    } else {
+      const cronExpression = getCronStringFromValues(
+        period!.value!,
+        month!.map((m) => m.value!),
+        day!.map((m) => m.value!),
+        weekDay!.map((m) => m.value!),
+        startHour!.map((m) => m.value!),
+        startMinute!.map((m) => m.value!)
+      );
+      if (id) {
+        return this.changeScheduleBackup(
+          id,
+          active!,
+          cronExpression,
+          backupName,
+          description,
+          strRetryInterval,
+          resultRetryTimes!,
+          retention!
+        );
+      } else {
+        return this.scheduleBackup(
+          service!.value?.id!,
+          location!.value!,
+          cronExpression,
+          backupName,
+          description,
+          strRetryInterval,
+          resultRetryTimes!,
+          retention!,
+          active!,
+          mode,
+          dataModel
+        );
+      }
+    }
+  },
+  async triggerBackup(
+    serviceId: string,
+    locationId: string,
+    name: string,
+    description: string,
+    retryInterval: string,
+    retryTimes: number,
+    dataModel: DataModel,
+    token?: CancelToken
+  ) {
+    return api.post(
+      `${BASE_URL}/Start`,
+      {
+        service_id: serviceId,
+        location_id: locationId,
+        name,
+        description,
+        retry_interval: retryInterval,
+        retries: retryTimes,
+        data_model: dataModel,
+      },
+      false,
+      token
+    );
+  },
+  async scheduleBackup(
+    serviceId: string,
+    locationId: string,
+    cronExpression: string,
+    name: string,
+    description: string,
+    retryInterval: string,
+    retryTimes: number,
+    retention: number,
+    enabled: boolean,
+    mode: BackupMode,
+    dataModel: DataModel
+  ) {
+    return api.post(`${BASE_URL}/Schedule`, {
+      service_id: serviceId,
+      location_id: locationId,
+      cron_expression: cronExpression,
+      name,
+      description,
+      retry_interval: retryInterval,
+      retries: retryTimes,
+      enabled: !!enabled,
+      retention,
+      mode,
+      data_model: dataModel,
+    });
+  },
+  async changeScheduleBackup(
+    id: string,
+    enabled: boolean,
+    cronExpression: string,
+    name: string,
+    description: string,
+    retryInterval: string,
+    retryTimes: number,
+    retention: number
+  ) {
+    return api.post(`${BASE_URL}/ChangeScheduled`, {
+      scheduled_backup_id: id,
+      enabled,
+      cron_expression: cronExpression,
+      name,
+      description,
+      retry_interval: retryInterval,
+      retries: retryTimes,
+      retention,
+    });
+  },
+};

public/app/percona/backup/Backup.types.ts

@@ -34,6 +34,11 @@ export enum BackupMode {
   PITR = 'PITR',
 }
 
+export enum BackupType {
+  DEMAND = 'DEMAND',
+  SCHEDULED = 'SCHEDULED',
+}
+
 export interface RawBackupLog {
   chunk_id: number;
   data: string;