From b7f910ab250462306ec30228efbfafab55c0d9eb Mon Sep 17 00:00:00 2001
From: Sonia Aguilar <soniaaguilarpeiron@gmail.com>
Date: Wed, 13 Sep 2023 16:13:59 +0200
Subject: [PATCH] Add exporter drawer when clicking export all Grafana managed
 alerts

---
 .../unified/MoreActionsRuleButtons.tsx        | 17 +++---
 .../alerting/unified/api/alertRuleApi.ts      | 11 +++-
 .../export/GrafanaReceiversExporter.tsx       |  4 +-
 .../export/GrafanaRulesExporter.tsx           | 54 +++++++++++++++++++
 4 files changed, 74 insertions(+), 12 deletions(-)
 create mode 100644 public/app/features/alerting/unified/components/export/GrafanaRulesExporter.tsx

diff --git a/public/app/features/alerting/unified/MoreActionsRuleButtons.tsx b/public/app/features/alerting/unified/MoreActionsRuleButtons.tsx
index e22af5ca6a47..f39ad5a2ebfb 100644
--- a/public/app/features/alerting/unified/MoreActionsRuleButtons.tsx
+++ b/public/app/features/alerting/unified/MoreActionsRuleButtons.tsx
@@ -1,18 +1,20 @@
 import React from 'react';
 import { useLocation } from 'react-router-dom';
+import { useToggle } from 'react-use';
 
 import { urlUtil } from '@grafana/data';
 import { Button, Dropdown, Icon, LinkButton, Menu, MenuItem } from '@grafana/ui';
 
 import { logInfo, LogMessages } from './Analytics';
+import { GrafanaRulesExporter } from './components/export/GrafanaRulesExporter';
 import { useRulesAccess } from './utils/accessControlHooks';
-import { createUrl } from './utils/url';
 
-interface Props {}
+interface Props { }
 
-export function MoreActionsRuleButtons({}: Props) {
+export function MoreActionsRuleButtons({ }: Props) {
   const { canCreateGrafanaRules, canCreateCloudRules, canReadProvisioning } = useRulesAccess();
   const location = useLocation();
+  const [showExportDrawer, toggleShowExportDrawer] = useToggle(false);
   const newMenu = (
     <Menu>
       {(canCreateGrafanaRules || canCreateCloudRules) && (
@@ -25,12 +27,8 @@ export function MoreActionsRuleButtons({}: Props) {
       )}
       {canReadProvisioning && (
         <MenuItem
-          url={createUrl('/api/v1/provisioning/alert-rules/export', {
-            download: 'true',
-            format: 'yaml',
-          })}
+          onClick={toggleShowExportDrawer}
           label="Export all Grafana-managed rules"
-          target="_blank"
         />
       )}
     </Menu>
@@ -54,6 +52,9 @@ export function MoreActionsRuleButtons({}: Props) {
           <Icon name="angle-down" />
         </Button>
       </Dropdown>
+      {showExportDrawer && (
+        <GrafanaRulesExporter onClose={toggleShowExportDrawer} />
+      )}
     </>
   );
 }
diff --git a/public/app/features/alerting/unified/api/alertRuleApi.ts b/public/app/features/alerting/unified/api/alertRuleApi.ts
index a83b64bc244e..fde444ff57b7 100644
--- a/public/app/features/alerting/unified/api/alertRuleApi.ts
+++ b/public/app/features/alerting/unified/api/alertRuleApi.ts
@@ -8,7 +8,7 @@ import {
   Labels,
   PromRulesResponse,
   RulerRuleGroupDTO,
-  RulerRulesConfigDTO,
+  RulerRulesConfigDTO
 } from 'app/types/unified-alerting-dto';
 
 import { ExportFormats } from '../components/export/providers';
@@ -22,7 +22,7 @@ import {
   FetchPromRulesFilter,
   groupRulesByFileName,
   paramsWithMatcherAndState,
-  prepareRulesFilterQueryParams,
+  prepareRulesFilterQueryParams
 } from './prometheus';
 import { FetchRulerRulesFilter, rulerUrlBuilder } from './ruler';
 
@@ -192,6 +192,13 @@ export const alertRuleApi = alertingApi.injectEndpoints({
         responseType: 'text',
       }),
     }),
+    exportRules: build.query<string, { format: ExportFormats }>({
+      query: ({ format }) => ({
+        url: `/api/v1/provisioning/alert-rules/export`,
+        params: { format: format },
+        responseType: 'text',
+      }),
+    }),
     exportReceiver: build.query<string, { receiverName: string; decrypt: string; format: ExportFormats }>({
       query: ({ receiverName, decrypt, format }) => ({
         url: `/api/v1/provisioning/contact-points/export/`,
diff --git a/public/app/features/alerting/unified/components/export/GrafanaReceiversExporter.tsx b/public/app/features/alerting/unified/components/export/GrafanaReceiversExporter.tsx
index 95e3bb015baf..b3d5aab3f3ba 100644
--- a/public/app/features/alerting/unified/components/export/GrafanaReceiversExporter.tsx
+++ b/public/app/features/alerting/unified/components/export/GrafanaReceiversExporter.tsx
@@ -15,7 +15,7 @@ interface GrafanaReceiversExportPreviewProps {
 }
 
 const GrafanaReceiversExportPreview = ({ decrypt, exportFormat, onClose }: GrafanaReceiversExportPreviewProps) => {
-  const { currentData: receiverDefinition = '', isFetching } = alertRuleApi.useExportReceiversQuery({
+  const { currentData: receiversDefinition = '', isFetching } = alertRuleApi.useExportReceiversQuery({
     decrypt: decrypt,
     format: exportFormat,
   });
@@ -29,7 +29,7 @@ const GrafanaReceiversExportPreview = ({ decrypt, exportFormat, onClose }: Grafa
   return (
     <FileExportPreview
       format={exportFormat}
-      textDefinition={receiverDefinition}
+      textDefinition={receiversDefinition}
       downloadFileName={downloadFileName}
       onClose={onClose}
     />
diff --git a/public/app/features/alerting/unified/components/export/GrafanaRulesExporter.tsx b/public/app/features/alerting/unified/components/export/GrafanaRulesExporter.tsx
new file mode 100644
index 000000000000..ea8e8dbe000d
--- /dev/null
+++ b/public/app/features/alerting/unified/components/export/GrafanaRulesExporter.tsx
@@ -0,0 +1,54 @@
+import React, { useState } from 'react';
+
+import { LoadingPlaceholder } from '@grafana/ui';
+
+import { alertRuleApi } from '../../api/alertRuleApi';
+
+import { FileExportPreview } from './FileExportPreview';
+import { GrafanaExportDrawer } from './GrafanaExportDrawer';
+import { allGrafanaExportProviders, ExportFormats } from './providers';
+
+interface GrafanaRulesExporterProps {
+  onClose: () => void;
+}
+
+export function GrafanaRulesExporter({ onClose }: GrafanaRulesExporterProps) {
+  const [activeTab, setActiveTab] = useState<ExportFormats>('yaml');
+
+  return (
+    <GrafanaExportDrawer
+      activeTab={activeTab}
+      onTabChange={setActiveTab}
+      onClose={onClose}
+      formatProviders={Object.values(allGrafanaExportProviders)}
+    >
+      <GrafanaRulesExportPreview exportFormat={activeTab} onClose={onClose} />
+    </GrafanaExportDrawer>
+  );
+}
+
+interface GrafanaRulesExportPreviewProps {
+  exportFormat: ExportFormats;
+  onClose: () => void;
+}
+
+function GrafanaRulesExportPreview({ exportFormat, onClose }: GrafanaRulesExportPreviewProps) {
+  const { currentData: rulesDefinition = '', isFetching } = alertRuleApi.useExportRulesQuery({
+    format: exportFormat,
+  });
+
+  const downloadFileName = `alert-rules-${new Date().getTime()}`;
+
+  if (isFetching) {
+    return <LoadingPlaceholder text="Loading...." />;
+  }
+
+  return (
+    <FileExportPreview
+      format={exportFormat}
+      textDefinition={rulesDefinition}
+      downloadFileName={downloadFileName}
+      onClose={onClose}
+    />
+  );
+}