Skip to content
This repository has been archived by the owner on Aug 9, 2022. It is now read-only.

Added Loading Modal to Details pages #221

Merged
merged 1 commit into from
Nov 25, 2020
Merged

Added Loading Modal to Details pages #221

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions kibana-reports/public/components/main/loading_modal/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why need this, you already export this from loading_modal.tsx

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So when we export it in other files we don't need to write import from '../../loading_modal/loading_modal, eliminates need for nested import

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think loading_modal is like a util components, which may better be placed under utils for other components to call. Otherwise, if you write a index.ts for every small component, the project will have too many files. Just my 2 cents, may refer to some project structure standard later when we do the refactor

83 changes: 83 additions & 0 deletions kibana-reports/public/components/main/loading_modal/loading_modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
};
18 changes: 17 additions & 1 deletion ...na-reports/public/components/main/report_definition_details/report_definition_details.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ import {
permissionsMissingToast,
permissionsMissingActions,
} from '../../utils/utils';
import { GenerateReportLoadingModal } from '../loading_modal';

const ON_DEMAND = 'On demand';

Expand All @@ -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);
};
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -538,6 +550,9 @@ export function ReportDefinitionDetails(props) {
<DeleteConfirmationModal />
) : null;

const showLoadingModal = showLoading ?
<GenerateReportLoadingModal setShowLoading={setShowLoading} /> : null;

return (
<EuiPage>
<EuiPageBody>
Expand Down Expand Up @@ -687,6 +702,7 @@ export function ReportDefinitionDetails(props) {
toastLifeTimeMs={6000}
/>
{showDeleteConfirmationModal}
{showLoadingModal}
</EuiPageBody>
</EuiPage>
);
Expand Down
46 changes: 38 additions & 8 deletions kibana-reports/public/components/main/report_details/report_details.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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.',
Expand Down Expand Up @@ -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" />
Expand All @@ -240,6 +266,9 @@ export function ReportDetails(props) {
);
};

const showLoadingModal = showLoading ?
<GenerateReportLoadingModal setShowLoading={setShowLoading} /> : null;

return (
<EuiPage>
<EuiPageBody>
Expand Down Expand Up @@ -368,6 +397,7 @@ export function ReportDetails(props) {
dismissToast={removeToast}
toastLifeTimeMs={6000}
/>
{showLoadingModal}
</EuiPageBody>
</EuiPage>
);
Expand Down
63 changes: 3 additions & 60 deletions kibana-reports/public/components/main/reports_table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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(
Expand Down Expand Up @@ -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>
Expand Down