diff --git a/kibana-reports/public/components/main/loading_modal/index.ts b/kibana-reports/public/components/main/loading_modal/index.ts
new file mode 100644
index 00000000..f553d6cc
--- /dev/null
+++ b/kibana-reports/public/components/main/loading_modal/index.ts
@@ -0,0 +1,16 @@
+/*
+ * Copyright 2020 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License").
+ * You may not use this file except in compliance with the License.
+ * A copy of the License is located at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * or in the "license" file accompanying this file. This file is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either
+ * express or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
+ */
+
+ export { GenerateReportLoadingModal } from './loading_modal';
\ No newline at end of file
diff --git a/kibana-reports/public/components/main/loading_modal/loading_modal.tsx b/kibana-reports/public/components/main/loading_modal/loading_modal.tsx
new file mode 100644
index 00000000..62aca396
--- /dev/null
+++ b/kibana-reports/public/components/main/loading_modal/loading_modal.tsx
@@ -0,0 +1,83 @@
+/*
+ * Copyright 2020 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License").
+ * You may not use this file except in compliance with the License.
+ * A copy of the License is located at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * or in the "license" file accompanying this file. This file is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either
+ * express or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
+ */
+
+import {
+ EuiOverlayMask,
+ EuiModal,
+ EuiModalHeader,
+ EuiTitle,
+ EuiText,
+ EuiModalBody,
+ EuiSpacer,
+ EuiFlexGroup,
+ EuiFlexItem,
+ EuiLoadingSpinner,
+ EuiButton
+} from "@elastic/eui";
+import React, { useState } from "react";
+
+export function GenerateReportLoadingModal(props: { setShowLoading: any; }) {
+ const {
+ setShowLoading
+ } = props;
+
+ const [isModalVisible, setIsModalVisible] = useState(true);
+
+ const closeModal = () => {
+ setIsModalVisible(false);
+ setShowLoading(false);
+ };
+ const showModal = () => setIsModalVisible(true);
+
+ return (
+
+
+
+
+
+
+ Generating report
+
+
+
+
+ Preparing your file for download.
+
+ You can close this dialog while we continue in the background.
+
+
+
+
+
+
+
+
+
+
+ Close
+
+
+
+
+
+
+ );
+};
\ No newline at end of file
diff --git a/kibana-reports/public/components/main/report_definition_details/report_definition_details.tsx b/kibana-reports/public/components/main/report_definition_details/report_definition_details.tsx
index 1015deb6..cd45442e 100644
--- a/kibana-reports/public/components/main/report_definition_details/report_definition_details.tsx
+++ b/kibana-reports/public/components/main/report_definition_details/report_definition_details.tsx
@@ -45,6 +45,7 @@ import {
permissionsMissingToast,
permissionsMissingActions,
} from '../../utils/utils';
+import { GenerateReportLoadingModal } from '../loading_modal';
const ON_DEMAND = 'On demand';
@@ -56,8 +57,13 @@ export function ReportDefinitionDetails(props) {
] = useState({});
const [toasts, setToasts] = useState([]);
const [showDeleteModal, setShowDeleteModal] = useState(false);
+ const [showLoading, setShowLoading] = useState(false);
const reportDefinitionId = props.match['params']['reportDefinitionId'];
+ const handleLoading = (e) => {
+ setShowLoading(e);
+ }
+
const handleShowDeleteModal = (e) => {
setShowDeleteModal(e);
};
@@ -380,11 +386,17 @@ export function ReportDefinitionDetails(props) {
});
}, []);
+ const downloadIconDownload = async () => {
+ handleLoading(true);
+ await generateReportFromDetails();
+ handleLoading(false);
+ }
+
const fileFormatDownload = (data) => {
let formatUpper = data['fileFormat'];
formatUpper = fileFormatsUpper[formatUpper];
return (
-
+
{formatUpper + ' '}
@@ -538,6 +550,9 @@ export function ReportDefinitionDetails(props) {
) : null;
+ const showLoadingModal = showLoading ?
+ : null;
+
return (
@@ -687,6 +702,7 @@ export function ReportDefinitionDetails(props) {
toastLifeTimeMs={6000}
/>
{showDeleteConfirmationModal}
+ {showLoadingModal}
);
diff --git a/kibana-reports/public/components/main/report_details/report_details.tsx b/kibana-reports/public/components/main/report_details/report_details.tsx
index 2c17dcb4..dae18791 100644
--- a/kibana-reports/public/components/main/report_details/report_details.tsx
+++ b/kibana-reports/public/components/main/report_details/report_details.tsx
@@ -34,9 +34,14 @@ import {
EuiGlobalToastList,
} from '@elastic/eui';
import { fileFormatsUpper, generateReportById } from '../main_utils';
+import { GenerateReportLoadingModal } from '../loading_modal';
import { ReportSchemaType } from '../../../../server/model';
import { converter } from '../../report_definitions/utils';
import dateMath from '@elastic/datemath';
+import {
+ permissionsMissingActions,
+ permissionsMissingToast
+} from '../../utils/utils';
export const ReportDetailsComponent = (props) => {
const { reportDetailsComponentTitle, reportDetailsComponentContent } = props;
@@ -70,9 +75,25 @@ export const formatEmails = (emails: string[]) => {
export function ReportDetails(props) {
const [reportDetails, setReportDetails] = useState({});
const [toasts, setToasts] = useState([]);
+ const [showLoading, setShowLoading] = useState(false);
const reportId = props.match['params']['reportId'];
+ const handleLoading = (e) => {
+ setShowLoading(e);
+ };
+
+ const addPermissionsMissingDownloadToastHandler = () => {
+ const toast = permissionsMissingToast(
+ permissionsMissingActions.GENERATING_REPORT
+ );
+ setToasts(toasts.concat(toast));
+ }
+
+ const handlePermissionsMissingDownloadToast = () => {
+ addPermissionsMissingDownloadToastHandler();
+ }
+
const addErrorToastHandler = () => {
const errorToast = {
title: 'Error loading report details.',
@@ -212,19 +233,24 @@ export function ReportDetails(props) {
});
}, []);
+ const downloadIconDownload = async () => {
+ handleLoading(true);
+ await generateReportById(
+ reportId,
+ props.httpClient,
+ handleSuccessToast,
+ handleErrorToast,
+ handlePermissionsMissingDownloadToast
+ );
+ handleLoading(false);
+ }
+
const fileFormatDownload = (data) => {
let formatUpper = data['defaultFileFormat'];
formatUpper = fileFormatsUpper[formatUpper];
return (
{
- generateReportById(
- reportId,
- props.httpClient,
- handleSuccessToast,
- handleErrorToast
- );
- }}
+ onClick={downloadIconDownload}
>
{formatUpper + ' '}
@@ -240,6 +266,9 @@ export function ReportDetails(props) {
);
};
+ const showLoadingModal = showLoading ?
+ : null;
+
return (
@@ -368,6 +397,7 @@ export function ReportDetails(props) {
dismissToast={removeToast}
toastLifeTimeMs={6000}
/>
+ {showLoadingModal}
);
diff --git a/kibana-reports/public/components/main/reports_table.tsx b/kibana-reports/public/components/main/reports_table.tsx
index 5235e143..6d363020 100644
--- a/kibana-reports/public/components/main/reports_table.tsx
+++ b/kibana-reports/public/components/main/reports_table.tsx
@@ -22,21 +22,13 @@ import {
EuiIcon,
EuiEmptyPrompt,
EuiInMemoryTable,
- EuiFlexGroup,
- EuiFlexItem,
- EuiLoadingSpinner,
- EuiModal,
- EuiModalBody,
- EuiModalHeader,
- EuiOverlayMask,
- EuiSpacer,
- EuiTitle,
} from '@elastic/eui';
import {
fileFormatsUpper,
humanReadableDate,
generateReportById,
} from './main_utils';
+import { GenerateReportLoadingModal } from './loading_modal';
const reportStatusOptions = [
'Created',
@@ -87,56 +79,6 @@ export function ReportsTable(props) {
setShowLoading(e);
};
- const GenerateReportLoadingModal = () => {
- const [isModalVisible, setIsModalVisible] = useState(true);
-
- const closeModal = () => {
- setIsModalVisible(false);
- setShowLoading(false);
- };
- const showModal = () => setIsModalVisible(true);
-
- return (
-
-
-
-
-
-
- Generating report
-
-
-
-
- Preparing your file for download.
-
- You can close this dialog while we continue in the background.
-
-
-
-
-
-
-
-
-
-
- Close
-
-
-
-
-
-
- );
- };
-
const onDemandDownload = async (id: any) => {
handleLoading(true);
await generateReportById(
@@ -258,7 +200,8 @@ export function ReportsTable(props) {
? emptyMessageReports
: '0 reports match the search criteria. Search again';
- const showLoadingModal = showLoading ? : null;
+ const showLoadingModal = showLoading ?
+ : null;
return (