extracted loading modal to directory, added to details pages (opendis…

…tro-for-elasticsearch#221)
zhongnansu · Dec 7, 2020 · 599187b · 599187b
1 parent 45d42c9
commit 599187b
Show file tree

Hide file tree

Showing 5 changed files with 157 additions and 69 deletions.
diff --git a/kibana-reports/public/components/main/loading_modal/index.ts 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';
diff --git a/kibana-reports/public/components/main/loading_modal/loading_modal.tsx 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 (
+    <div>
+      <EuiOverlayMask>
+        <EuiModal
+          onClose={closeModal}
+          style={{ maxWidth: 350, minWidth: 300 }}
+        >
+          <EuiModalHeader>
+            <EuiTitle>
+              <EuiText textAlign="right">
+                <h2>Generating report</h2>
+              </EuiText>
+            </EuiTitle>
+          </EuiModalHeader>
+          <EuiModalBody>
+            <EuiText>Preparing your file for download.</EuiText>
+            <EuiText>
+              You can close this dialog while we continue in the background.
+            </EuiText>
+            <EuiSpacer />
+            <EuiFlexGroup justifyContent="center" alignItems="center">
+              <EuiFlexItem grow={false}>
+                <EuiLoadingSpinner
+                  size="xl"
+                  style={{ minWidth: 75, minHeight: 75 }}
+                />
+              </EuiFlexItem>
+            </EuiFlexGroup>
+            <EuiSpacer size="l" />
+            <EuiFlexGroup alignItems="flexEnd" justifyContent="flexEnd">
+              <EuiFlexItem grow={false}>
+                <EuiButton onClick={closeModal}>Close</EuiButton>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiModalBody>
+        </EuiModal>
+      </EuiOverlayMask>
+    </div>
+  );
+};
diff --git a/...na-reports/public/components/main/report_definition_details/report_definition_details.tsx b/...na-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 (
-      <EuiLink onClick={generateReportFromDetails}>
+      <EuiLink onClick={downloadIconDownload}>
         {formatUpper + ' '}
         <EuiIcon type="importAction" />
       </EuiLink>
@@ -538,6 +550,9 @@ export function ReportDefinitionDetails(props) {
     <DeleteConfirmationModal />
   ) : null;
 
+  const showLoadingModal = showLoading ?
+    <GenerateReportLoadingModal setShowLoading={setShowLoading} /> : null;
+
   return (
     <EuiPage>
       <EuiPageBody>
@@ -687,6 +702,7 @@ export function ReportDefinitionDetails(props) {
           toastLifeTimeMs={6000}
         />
         {showDeleteConfirmationModal}
+        {showLoadingModal}
       </EuiPageBody>
     </EuiPage>
   );

diff --git 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 (
       <EuiLink
-        onClick={() => {
-          generateReportById(
-            reportId,
-            props.httpClient,
-            handleSuccessToast,
-            handleErrorToast
-          );
-        }}
+        onClick={downloadIconDownload}
       >
         {formatUpper + ' '}
         <EuiIcon type="importAction" />
@@ -240,6 +266,9 @@ export function ReportDetails(props) {
     );
   };
 
+  const showLoadingModal = showLoading ?
+    <GenerateReportLoadingModal setShowLoading={setShowLoading} /> : null; 
+
   return (
     <EuiPage>
       <EuiPageBody>
@@ -368,6 +397,7 @@ export function ReportDetails(props) {
           dismissToast={removeToast}
           toastLifeTimeMs={6000}
         />
+        {showLoadingModal}
       </EuiPageBody>
     </EuiPage>
   );

diff --git 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 (
-      <div>
-        <EuiOverlayMask>
-          <EuiModal
-            onClose={closeModal}
-            style={{ maxWidth: 350, minWidth: 300 }}
-          >
-            <EuiModalHeader>
-              <EuiTitle>
-                <EuiText textAlign="right">
-                  <h2>Generating report</h2>
-                </EuiText>
-              </EuiTitle>
-            </EuiModalHeader>
-            <EuiModalBody>
-              <EuiText>Preparing your file for download.</EuiText>
-              <EuiText>
-                You can close this dialog while we continue in the background.
-              </EuiText>
-              <EuiSpacer />
-              <EuiFlexGroup justifyContent="center" alignItems="center">
-                <EuiFlexItem grow={false}>
-                  <EuiLoadingSpinner
-                    size="xl"
-                    style={{ minWidth: 75, minHeight: 75 }}
-                  />
-                </EuiFlexItem>
-              </EuiFlexGroup>
-              <EuiSpacer size="l" />
-              <EuiFlexGroup alignItems="flexEnd" justifyContent="flexEnd">
-                <EuiFlexItem grow={false}>
-                  <EuiButton onClick={closeModal}>Close</EuiButton>
-                </EuiFlexItem>
-              </EuiFlexGroup>
-            </EuiModalBody>
-          </EuiModal>
-        </EuiOverlayMask>
-      </div>
-    );
-  };
-
   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 ? <GenerateReportLoadingModal /> : null;
+  const showLoadingModal = showLoading ? 
+    <GenerateReportLoadingModal setShowLoading={setShowLoading} /> : null;
 
   return (
     <Fragment>