diff --git a/dashboards-reports/.cypress/integration/02-edit.spec.ts b/dashboards-reports/.cypress/integration/02-edit.spec.ts index be7a0220..7b365e2b 100644 --- a/dashboards-reports/.cypress/integration/02-edit.spec.ts +++ b/dashboards-reports/.cypress/integration/02-edit.spec.ts @@ -51,9 +51,14 @@ describe('Cypress', () => { cy.get('#reportSettingsDescription').type(' update description'); cy.get('#editReportDefinitionButton').click({ force: true }); + + cy.wait(12500); + + // check that re-direct to home page + cy.get('#reportDefinitionDetailsLink').should('exist'); }); - it('Visit edit page, change report source and trigger', () => { + it('Visit edit page, change report trigger', () => { cy.visit(`${Cypress.env('opensearchDashboards')}/app/reports-dashboards#/`); cy.location('pathname', { timeout: 60000 }).should( 'include', @@ -71,13 +76,18 @@ describe('Cypress', () => { cy.url().should('include', 'edit'); cy.wait(1000); - cy.get('#visualizationReportSource').check({ force: true }); + cy.get('#reportDefinitionTriggerTypes > div:nth-child(2)').click({ force: true }); cy.get('#Schedule').check({ force: true }); cy.get('#editReportDefinitionButton').click({ force: true }); + + cy.wait(12500); + + // check that re-direct to home page + cy.get('#reportDefinitionDetailsLink').should('exist'); }); - it('Visit edit page, change report source back', () => { + it('Visit edit page, change report trigger back', () => { cy.visit(`${Cypress.env('opensearchDashboards')}/app/reports-dashboards#/`); cy.location('pathname', { timeout: 60000 }).should( 'include', @@ -96,8 +106,13 @@ describe('Cypress', () => { cy.wait(1000); - cy.get('#dashboardReportSource').check({ force: true }); + cy.get('#reportDefinitionTriggerTypes > div:nth-child(1)').click({ force: true }); cy.get('#editReportDefinitionButton').click({ force: true }); + + cy.wait(12500); + + // check that re-direct to home page + cy.get('#reportDefinitionDetailsLink').should('exist'); }); }); diff --git a/dashboards-reports/public/components/main/main_utils.tsx b/dashboards-reports/public/components/main/main_utils.tsx index aa7d8f7e..ede650a8 100644 --- a/dashboards-reports/public/components/main/main_utils.tsx +++ b/dashboards-reports/public/components/main/main_utils.tsx @@ -27,14 +27,31 @@ import 'babel-polyfill'; import { i18n } from '@osd/i18n'; import { HttpFetchOptions, HttpSetup } from '../../../../../src/core/public'; +import { placeholderChannels } from '../report_definitions/delivery/delivery_constants'; -export const fileFormatsUpper = { +export const displayDeliveryChannels = (configIds: Array) => { + let displayChannels = []; + for (let i = 0; i < configIds.length; ++i) { + for (let j = 0; j < placeholderChannels.length; ++j) { + if (configIds[i] === placeholderChannels[j].id) { + displayChannels.push(placeholderChannels[i].label); + } + } + } + return displayChannels.toString(); +} + +type fileFormatsOptions = { + [key: string]: string +} + +export const fileFormatsUpper: fileFormatsOptions = { csv: 'CSV', pdf: 'PDF', png: 'PNG', }; -export const humanReadableDate = (date) => { +export const humanReadableDate = (date: string | number | Date) => { let readableDate = new Date(date); return ( readableDate.toDateString() + ' @ ' + readableDate.toLocaleTimeString() @@ -55,7 +72,7 @@ export const getFileFormatPrefix = (fileFormat: string) => { return fileFormatPrefix; }; -export const addReportsTableContent = (data) => { +export const addReportsTableContent = (data: string | any[]) => { let reportsTableItems = []; for (let index = 0; index < data.length; ++index) { let item = data[index]; @@ -110,7 +127,7 @@ export const addReportDefinitionsTableContent = (data: any) => { return reportDefinitionsTableItems; }; -export const removeDuplicatePdfFileFormat = (filename) => { +export const removeDuplicatePdfFileFormat = (filename: string) => { return filename.substring(0, filename.length - 4); }; @@ -153,7 +170,7 @@ export const readStreamToFile = async ( }; export const generateReportFromDefinitionId = async ( - reportDefinitionId, + reportDefinitionId: string, httpClient: HttpSetup ) => { let status = false; @@ -188,7 +205,7 @@ export const generateReportFromDefinitionId = async ( }; export const generateReportById = async ( - reportId, + reportId: string, httpClient: HttpSetup, handleSuccessToast, handleErrorToast, diff --git a/dashboards-reports/public/components/main/report_definition_details/__tests__/__snapshots__/report_definition_details.test.tsx.snap b/dashboards-reports/public/components/main/report_definition_details/__tests__/__snapshots__/report_definition_details.test.tsx.snap index 690a1d28..ec53a581 100644 --- a/dashboards-reports/public/components/main/report_definition_details/__tests__/__snapshots__/report_definition_details.test.tsx.snap +++ b/dashboards-reports/public/components/main/report_definition_details/__tests__/__snapshots__/report_definition_details.test.tsx.snap @@ -199,10 +199,12 @@ exports[` panel render 5 hours recurring definition d > + > + + @@ -220,7 +222,7 @@ exports[` panel render 5 hours recurring definition d
- Last undefined + Last
@@ -314,10 +316,79 @@ exports[` panel render 5 hours recurring definition d
+
+
+
+
+ Report trigger +
+
+
+
+
+
+
+ Schedule details +
+
+
+
+
+
+
+ Status +
+
+
+
+
+
+
+
+
+
+
+

- Report trigger + Notification settings

panel render 5 hours recurring definition d
- Trigger type + Config IDs
panel render 5 hours recurring definition d
- Schedule details + Title
panel render 5 hours recurring definition d
- Status + Text description
panel render 5 hours recurring definition d >
+ > + Html description +
-
panel render disabled daily definition, cli > + > + +
@@ -621,7 +693,7 @@ exports[` panel render disabled daily definition, cli
- Last undefined + Last
@@ -715,10 +787,79 @@ exports[` panel render disabled daily definition, cli
+
+
+
+
+ Report trigger +
+
+
+
+
+
+
+ Schedule details +
+
+
+
+
+
+
+ Status +
+
+
+
+
+
+
+
+
+
+
+

- Report trigger + Notification settings

panel render disabled daily definition, cli
- Trigger type + Config IDs
panel render disabled daily definition, cli
- Schedule details + Title
panel render disabled daily definition, cli
- Status + Text description
panel render disabled daily definition, cli >
+ > + Html description +
-
panel render on demand definition details 1 > + > + +
@@ -1022,7 +1164,7 @@ exports[` panel render on demand definition details 1
- Last undefined + Last
@@ -1112,10 +1254,79 @@ exports[` panel render on demand definition details 1
+
+
+
+
+ Report trigger +
+
+
+
+
+
+
+ Schedule details +
+
+
+
+
+
+
+ Status +
+
+
+
+
+
+
+
+
+
+
+

- Report trigger + Notification settings

panel render on demand definition details 1
- Trigger type + Config IDs
panel render on demand definition details 1
- Schedule details + Title
panel render on demand definition details 1
- Status + Text description
panel render on demand definition details 1 >
+ > + Html description +
-
panel', () => { }, }, delivery: { - delivery_type: '', - delivery_params: {}, + configIds: [], + title: '', + textDescription: '', + htmlDescription: '' }, trigger: { trigger_type: 'On demand', @@ -111,8 +113,10 @@ describe(' panel', () => { }, }, delivery: { - delivery_type: '', - delivery_params: {}, + configIds: [], + title: '', + textDescription: '', + htmlDescription: '' }, trigger: { trigger_type: 'Schedule', @@ -163,8 +167,10 @@ describe(' panel', () => { }, }, delivery: { - delivery_type: '', - delivery_params: {}, + configIds: [], + title: '', + textDescription: '', + htmlDescription: '' }, trigger: { trigger_type: 'Schedule', @@ -216,8 +222,10 @@ describe(' panel', () => { }, }, delivery: { - delivery_type: '', - delivery_params: {}, + configIds: [], + title: '', + textDescription: '', + htmlDescription: '' }, trigger: { trigger_type: 'On demand', @@ -260,8 +268,10 @@ describe(' panel', () => { }, }, delivery: { - delivery_type: '', - delivery_params: {}, + configIds: [], + title: '', + textDescription: '', + htmlDescription: '' }, trigger: { trigger_type: 'Schedule', @@ -317,8 +327,10 @@ describe(' panel', () => { }, }, delivery: { - delivery_type: '', - delivery_params: {}, + configIds: [], + title: '', + textDescription: '', + htmlDescription: '' }, trigger: { trigger_type: 'Schedule', @@ -376,8 +388,10 @@ describe(' panel', () => { }, }, delivery: { - delivery_type: '', - delivery_params: {}, + configIds: [], + title: '', + textDescription: '', + htmlDescription: '' }, trigger: { trigger_type: 'Schedule', diff --git a/dashboards-reports/public/components/main/report_definition_details/report_definition_details.tsx b/dashboards-reports/public/components/main/report_definition_details/report_definition_details.tsx index 432a5ad3..dce81050 100644 --- a/dashboards-reports/public/components/main/report_definition_details/report_definition_details.tsx +++ b/dashboards-reports/public/components/main/report_definition_details/report_definition_details.tsx @@ -50,6 +50,7 @@ import { trimAndRenderAsText, } from '../report_details/report_details'; import { + displayDeliveryChannels, fileFormatsUpper, generateReportFromDefinitionId, } from '../main_utils'; @@ -61,25 +62,64 @@ import { permissionsMissingActions, } from '../../utils/utils'; import { GenerateReportLoadingModal } from '../loading_modal'; +import { placeholderChannels } from '../../report_definitions/delivery/delivery_constants'; const ON_DEMAND = 'On demand'; -export function ReportDefinitionDetails(props) { - const [reportDefinitionDetails, setReportDefinitionDetails] = useState({}); +interface ReportDefinitionDetails { + name: string; + description: string; + created: string; + lastUpdated: string; + source: string; + timePeriod: string; + fileFormat: string; + status: string | undefined; + reportHeader: string; + reportFooter: string; + triggerType: string; + scheduleDetails: string; + configIds: Array | string; + title: string; + textDescription: string; + htmlDescription: string; + baseUrl: string; +} + +export function ReportDefinitionDetails(props: { match?: any; setBreadcrumbs?: any; httpClient?: any; }) { + const [reportDefinitionDetails, setReportDefinitionDetails] = useState({ + name: '', + description: '', + created: '', + lastUpdated: '', + source: '', + timePeriod: '', + fileFormat: '', + status: '', + reportHeader: '', + reportFooter: '', + triggerType: '', + scheduleDetails: '', + configIds: [], + title: '', + textDescription: '', + htmlDescription: '', + baseUrl: '' + }); const [ reportDefinitionRawResponse, setReportDefinitionRawResponse, - ] = useState({}); + ] = useState({}); const [toasts, setToasts] = useState([]); const [showDeleteModal, setShowDeleteModal] = useState(false); const [showLoading, setShowLoading] = useState(false); const reportDefinitionId = props.match['params']['reportDefinitionId']; - const handleLoading = (e) => { + const handleLoading = (e: boolean | ((prevState: boolean) => boolean)) => { setShowLoading(e); }; - const handleShowDeleteModal = (e) => { + const handleShowDeleteModal = (e: boolean | ((prevState: boolean) => boolean)) => { setShowDeleteModal(e); }; @@ -87,6 +127,7 @@ export function ReportDefinitionDetails(props) { const toast = permissionsMissingToast( permissionsMissingActions.CHANGE_SCHEDULE_STATUS ); + // @ts-ignore setToasts(toasts.concat(toast)); }; @@ -94,6 +135,7 @@ export function ReportDefinitionDetails(props) { const toast = permissionsMissingToast( permissionsMissingActions.DELETE_REPORT_DEFINITION ); + // @ts-ignore setToasts(toasts.concat(toast)); }; @@ -105,6 +147,7 @@ export function ReportDefinitionDetails(props) { const toast = permissionsMissingToast( permissionsMissingActions.GENERATING_REPORT ); + // @ts-ignore setToasts(toasts.concat(toast)); }; @@ -118,6 +161,7 @@ export function ReportDefinitionDetails(props) { iconType: 'alert', id: 'reportDefinitionDetailsErrorToast', }; + // @ts-ignore setToasts(toasts.concat(errorToast)); }; @@ -135,6 +179,7 @@ export function ReportDefinitionDetails(props) { iconType: 'check', id: 'generateReportSuccessToast', }; + // @ts-ignore setToasts(toasts.concat(successToast)); }; @@ -152,6 +197,7 @@ export function ReportDefinitionDetails(props) { iconType: 'alert', id: 'generateReportErrorToast', }; + // @ts-ignore setToasts(toasts.concat(errorToast)); }; @@ -173,6 +219,7 @@ export function ReportDefinitionDetails(props) { iconType: 'check', id: 'successEnableToast', }; + // @ts-ignore setToasts(toasts.concat(successToast)); }; @@ -186,6 +233,7 @@ export function ReportDefinitionDetails(props) { iconType: 'alert', id: 'errorToast', }; + // @ts-ignore setToasts(toasts.concat(errorToast)); }; @@ -199,6 +247,7 @@ export function ReportDefinitionDetails(props) { iconType: 'check', id: 'successDisableToast', }; + // @ts-ignore setToasts(toasts.concat(successToast)); }; @@ -220,6 +269,7 @@ export function ReportDefinitionDetails(props) { iconType: 'alert', id: 'errorDisableToast', }; + // @ts-ignore setToasts(toasts.concat(errorToast)); }; @@ -243,6 +293,7 @@ export function ReportDefinitionDetails(props) { iconType: 'alert', id: 'errorDeleteToast', }; + // @ts-ignore setToasts(toasts.concat(errorToast)); }; @@ -250,15 +301,15 @@ export function ReportDefinitionDetails(props) { addErrorDeletingReportDefinitionToastHandler(); }; - const removeToast = (removedToast) => { - setToasts(toasts.filter((toast) => toast.id !== removedToast.id)); + const removeToast = (removedToast: { id: string; }) => { + setToasts(toasts.filter((toast: any) => toast.id !== removedToast.id)); }; - const handleReportDefinitionDetails = (e) => { + const handleReportDefinitionDetails = (e: ReportDefinitionDetails) => { setReportDefinitionDetails(e); }; - const handleReportDefinitionRawResponse = (e) => { + const handleReportDefinitionRawResponse = (e: {} ) => { setReportDefinitionRawResponse(e); }; @@ -359,8 +410,20 @@ export function ReportDefinitionDetails(props) { return scheduleDetails; }; - const getReportDefinitionDetailsMetadata = (data) => { - const reportDefinition: ReportDefinitionSchemaType = data.report_definition; + // const displayDeliveryChannels = (configIds: Array) => { + // let displayChannels = []; + // for (let i = 0; i < configIds.length; ++i) { + // for (let j = 0; j < placeholderChannels.length; ++j) { + // if (configIds[i] === placeholderChannels[j].id) { + // displayChannels.push(placeholderChannels[i].label); + // } + // } + // } + // return displayChannels.toString(); + // } + + const getReportDefinitionDetailsMetadata = (data: ReportDefinitionSchemaType) : ReportDefinitionDetails => { + const reportDefinition: ReportDefinitionSchemaType = data; const { report_params: reportParams, trigger, @@ -419,13 +482,13 @@ export function ReportDefinitionDetails(props) { : `\u2014`, triggerType: triggerType, scheduleDetails: triggerParams - ? humanReadableScheduleDetails(data.report_definition.trigger) + ? humanReadableScheduleDetails(data.trigger) : `\u2014`, status: reportDefinition.status, - configIds: configIds, - title: title, - textDescription: textDescription, - htmlDescription: htmlDescription + configIds: (configIds.length > 0) ? displayDeliveryChannels(configIds) : `\u2014`, + title: (title !== '') ? title : `\u2014`, + textDescription: (textDescription !== '') ? textDescription : `\u2014`, + htmlDescription: (htmlDescription !== '') ? htmlDescription : `\u2014` }; return reportDefinitionDetails; }; @@ -434,11 +497,9 @@ export function ReportDefinitionDetails(props) { const { httpClient } = props; httpClient .get(`../api/reporting/reportDefinitions/${reportDefinitionId}`) - .then((response) => { + .then((response: {report_definition: ReportDefinitionSchemaType}) => { handleReportDefinitionRawResponse(response); - handleReportDefinitionDetails( - getReportDefinitionDetailsMetadata(response) - ); + handleReportDefinitionDetails(getReportDefinitionDetailsMetadata(response.report_definition)); props.setBreadcrumbs([ { text: i18n.translate( @@ -460,7 +521,7 @@ export function ReportDefinitionDetails(props) { }, ]); }) - .catch((error) => { + .catch((error: any) => { console.error( i18n.translate( 'opensearch.reports.reportDefinitionsDetails.schedule.breadcrumb.error', @@ -481,7 +542,7 @@ export function ReportDefinitionDetails(props) { handleLoading(false); }; - const fileFormatDownload = (data) => { + const fileFormatDownload = (data: { [x: string]: any; }) => { let formatUpper = data['fileFormat']; formatUpper = fileFormatsUpper[formatUpper]; return ( @@ -495,7 +556,7 @@ export function ReportDefinitionDetails(props) { ); }; - const sourceURL = (data) => { + const sourceURL = (data: ReportDefinitionDetails) => { return ( {data['source']} @@ -503,13 +564,7 @@ export function ReportDefinitionDetails(props) { ); }; - const getRelativeStartDate = (duration) => { - duration = moment.duration(duration); - let time_difference = moment.now() - duration; - return new Date(time_difference); - }; - - const changeScheduledReportDefinitionStatus = (statusChange) => { + const changeScheduledReportDefinitionStatus = (statusChange: string) => { let updatedReportDefinition = reportDefinitionRawResponse.report_definition; if (statusChange === 'Disable') { updatedReportDefinition.trigger.trigger_params.enabled = false; @@ -518,7 +573,6 @@ export function ReportDefinitionDetails(props) { updatedReportDefinition.trigger.trigger_params.enabled = true; updatedReportDefinition.status = 'Active'; } - const { httpClient } = props; httpClient .put(`../api/reporting/reportDefinitions/${reportDefinitionId}`, { @@ -530,7 +584,7 @@ export function ReportDefinitionDetails(props) { updatedRawResponse.report_definition = updatedReportDefinition; handleReportDefinitionRawResponse(updatedRawResponse); setReportDefinitionDetails( - getReportDefinitionDetailsMetadata(updatedRawResponse) + getReportDefinitionDetailsMetadata(updatedReportDefinition) ); if (statusChange === 'Enable') { handleSuccessChangingScheduleStatusToast('enable'); @@ -538,7 +592,7 @@ export function ReportDefinitionDetails(props) { handleSuccessChangingScheduleStatusToast('disable'); } }) - .catch((error) => { + .catch((error: { body: { statusCode: number; }; }) => { console.error('error in updating report definition status:', error); if (error.body.statusCode === 403) { handleErrorChangingScheduleStatusToast('permissions'); @@ -592,7 +646,7 @@ export function ReportDefinitionDetails(props) { .then(() => { window.location.assign(`reports-dashboards#/delete=success`); }) - .catch((error) => { + .catch((error: { body: { statusCode: number; }; }) => { console.log('error when deleting report definition:', error); if (error.body.statusCode === 403) { handlePermissionsMissingDeleteToast(); @@ -619,7 +673,7 @@ export function ReportDefinitionDetails(props) { @@ -628,7 +682,7 @@ export function ReportDefinitionDetails(props) { @@ -648,7 +702,10 @@ export function ReportDefinitionDetails(props) { )} reportDetailsComponentContent={reportDefinitionDetails.status} /> - + ); @@ -691,7 +748,7 @@ export function ReportDefinitionDetails(props) { handleShowDeleteModal(show)} id={'deleteReportDefinitionButton'} > {i18n.translate( @@ -814,42 +871,38 @@ export function ReportDefinitionDetails(props) { - -

- {i18n.translate( - 'opensearch.reports.reportDefinitionsDetails.fields.reportTrigger', - { defaultMessage: 'Report trigger' } - )} -

- - {triggerSection} - {/* +

Notification settings

 - - */} + + panel render 5 hours recurring component 1`] = ` >

- test create report definition trigger -

+ />
@@ -66,9 +64,7 @@ exports[` panel render 5 hours recurring component 1`] = `
- test create report definition trigger -
+ />
panel render 5 hours recurring component 1`] = `
- — -
+ />
panel render 5 hours recurring component 1`] = `
- — -
+ />
panel render 5 hours recurring component 1`] = `
- — -
+ />
@@ -148,11 +138,11 @@ exports[` panel render 5 hours recurring component 1`] = ` > - Dashboard + @@ -170,9 +160,7 @@ exports[` panel render 5 hours recurring component 1`] = `
- 10/23/2020, 1:53:35 PM -> 10/23/2020, 2:23:35 PM -
+ />
panel render 5 hours recurring component 1`] = `
-

- — -

-
+ />
panel render 5 hours recurring component 1`] = `
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
-

- — -

- + Report trigger +
+
panel render 5 hours recurring component 1`] = ` >
+ Schedule type +
+
+ +
+
+
+
+ Schedule details +
@@ -310,7 +359,7 @@ exports[` panel render 5 hours recurring component 1`] = `

- Report trigger + Notification settings

panel render 5 hours recurring component 1`] = `
- Report type + Config IDs
- Schedule -
+ />
panel render 5 hours recurring component 1`] = `
- Schedule type + Title
- Recurring -
+ />
panel render 5 hours recurring component 1`] = `
- Schedule details + Text description
- — -
+ />
panel render 5 hours recurring component 1`] = ` >
+ > + Html description +
-
+ > +
+

+ A new notification appears +

+
+ + + Error loading report details. + +
+ +
+
`; @@ -432,9 +532,7 @@ exports[` panel render on-demand component 1`] = ` >

- test create report definition trigger -

+ /> @@ -466,9 +564,7 @@ exports[` panel render on-demand component 1`] = `
- test create report definition trigger -
+ />
panel render on-demand component 1`] = `
- — -
+ />
panel render on-demand component 1`] = `
- — -
+ />
panel render on-demand component 1`] = `
- — -
+ />
@@ -548,11 +638,11 @@ exports[` panel render on-demand component 1`] = ` > - Dashboard + @@ -570,9 +660,7 @@ exports[` panel render on-demand component 1`] = `
- 10/23/2020, 1:53:35 PM -> 10/23/2020, 2:23:35 PM -
+ />
panel render on-demand component 1`] = `
-

- — -

-
+ />
panel render on-demand component 1`] = `
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
-

- — -

- + Report trigger +
+
panel render on-demand component 1`] = ` >
+ Schedule type +
+
+ +
+
+
+
+ Schedule details +
@@ -706,7 +855,7 @@ exports[` panel render on-demand component 1`] = `

- Report trigger + Notification settings

panel render on-demand component 1`] = `
- Report type + Config IDs
- On demand -
+ />
panel render on-demand component 1`] = `
- Schedule type + Title
- — -
+ />
panel render on-demand component 1`] = `
- Schedule details + Text description
- — -
+ />
panel render on-demand component 1`] = ` >
+ > + Html description +
-
+ > +
+

+ A new notification appears +

+
+ + + Error loading report details. + +
+ +
+
`; diff --git a/dashboards-reports/public/components/main/report_details/report_details.tsx b/dashboards-reports/public/components/main/report_details/report_details.tsx index 8f46940e..58d26101 100644 --- a/dashboards-reports/public/components/main/report_details/report_details.tsx +++ b/dashboards-reports/public/components/main/report_details/report_details.tsx @@ -40,12 +40,11 @@ import { EuiDescriptionListTitle, EuiDescriptionListDescription, EuiPageHeaderSection, - EuiButton, EuiLink, EuiIcon, EuiGlobalToastList, } from '@elastic/eui'; -import { fileFormatsUpper, generateReportById } from '../main_utils'; +import { displayDeliveryChannels, fileFormatsUpper, generateReportById } from '../main_utils'; import { GenerateReportLoadingModal } from '../loading_modal'; import { ReportSchemaType } from '../../../../server/model'; import { converter } from '../../report_definitions/utils'; @@ -55,8 +54,30 @@ import { permissionsMissingToast, timeRangeMatcher, } from '../../utils/utils'; +import { TRIGGER_TYPE } from '../../../../server/routes/utils/constants'; -export const ReportDetailsComponent = (props) => { +interface ReportDetails { + reportName: string; + description: string; + created: string; + lastUpdated: string; + source: string; + time_period: string; + defaultFileFormat: string; + state: string | undefined; + reportHeader: string; + reportFooter: string; + triggerType: string; + scheduleType: string; + scheduleDetails: string; + configIds: Array | string; + title: string; + textDescription: string; + htmlDescription: string; + queryUrl: string; +} + +export const ReportDetailsComponent = (props: { reportDetailsComponentTitle: any; reportDetailsComponentContent: any; }) => { const { reportDetailsComponentTitle, reportDetailsComponentContent } = props; return ( @@ -85,14 +106,33 @@ export const formatEmails = (emails: string[]) => { return Array.isArray(emails) ? emails.join(', ') : emails; }; -export function ReportDetails(props) { - const [reportDetails, setReportDetails] = useState({}); +export function ReportDetails(props: { match?: any; setBreadcrumbs?: any; httpClient: any; }) { + const [reportDetails, setReportDetails] = useState({ + reportName: '', + description: '', + created: '', + lastUpdated: '', + source: '', + time_period: '', + defaultFileFormat: '', + state: '', + reportHeader: '', + reportFooter: '', + triggerType: '', + scheduleType: '', + scheduleDetails: '', + configIds: [], + title: '', + textDescription: '', + htmlDescription: '', + queryUrl: '' + }); const [toasts, setToasts] = useState([]); const [showLoading, setShowLoading] = useState(false); const reportId = props.match['params']['reportId']; - const handleLoading = (e) => { + const handleLoading = (e: boolean | ((prevState: boolean) => boolean)) => { setShowLoading(e); }; @@ -100,6 +140,7 @@ export function ReportDetails(props) { const toast = permissionsMissingToast( permissionsMissingActions.GENERATING_REPORT ); + // @ts-ignore setToasts(toasts.concat(toast)); }; @@ -121,6 +162,7 @@ export function ReportDetails(props) { iconType: 'alert', id: 'reportDetailsErrorToast', }; + // @ts-ignore setToasts(toasts.concat(errorToast)); }; @@ -142,6 +184,7 @@ export function ReportDetails(props) { ), id: 'onDemandDownloadSuccessToast', }; + // @ts-ignore setToasts(toasts.concat(successToast)); }; @@ -149,15 +192,15 @@ export function ReportDetails(props) { addSuccessToastHandler(); }; - const removeToast = (removedToast) => { - setToasts(toasts.filter((toast) => toast.id !== removedToast.id)); + const removeToast = (removedToast: { id: any; }) => { + setToasts(toasts.filter((toast : any) => toast.id !== removedToast.id)); }; - const handleReportDetails = (e) => { + const handleReportDetails = (e: React.SetStateAction) => { setReportDetails(e); }; - const convertTimestamp = (timestamp: number) => { + const convertTimestamp = (timestamp: number | undefined) => { let displayDate = `\u2014`; if (timestamp) { let readableDate = new Date(timestamp); @@ -167,7 +210,7 @@ export function ReportDetails(props) { }; const parseTimePeriod = (queryUrl: string) => { - let [timeStringRegEx, fromDateString, toDateString] = queryUrl.match( + let [fromDateString, toDateString] : RegExpMatchArray | null = queryUrl.match( timeRangeMatcher ); @@ -184,7 +227,7 @@ export function ReportDetails(props) { ); }; - const getReportDetailsData = (report: ReportSchemaType) => { + const getReportDetailsData = (report: ReportSchemaType) : ReportDetails => { const { report_definition: reportDefinition, last_updated: lastUpdated, @@ -197,8 +240,10 @@ export function ReportDetails(props) { trigger_params: triggerParams, } = trigger; const { - delivery_type: deliveryType, - delivery_params: deliveryParams, + configIds: configIds, + title: title, + textDescription: textDescription, + htmlDescription: htmlDescription } = delivery; const coreParams = reportParams.core_params; // covert timestamp to local date-time string @@ -211,7 +256,7 @@ export function ReportDetails(props) { source: reportParams.report_source, // TODO: we have all data needed, time_from, time_to, time_duration, // think of a way to better display - time_period: (reportParams.report_source !== 'Notebook') ? parseTimePeriod(queryUrl) : '', + time_period: (reportParams.report_source !== 'Notebook') ? parseTimePeriod(queryUrl) : `\u2014`, defaultFileFormat: coreParams.report_format, state: state, reportHeader: @@ -227,14 +272,10 @@ export function ReportDetails(props) { triggerType: triggerType, scheduleType: triggerParams ? triggerParams.schedule_type : `\u2014`, scheduleDetails: `\u2014`, - alertDetails: `\u2014`, - channel: deliveryType, - emailRecipients: - deliveryType === 'Channel' ? deliveryParams.recipients : `\u2014`, - emailSubject: - deliveryType === 'Channel' ? deliveryParams.title : `\u2014`, - emailBody: - deliveryType === 'Channel' ? deliveryParams.textDescription : `\u2014`, + configIds: (configIds.length > 0) ? displayDeliveryChannels(configIds) : `\u2014`, + title: (title !== '') ? title : `\u2014`, + textDescription: (textDescription !== '') ? textDescription : `\u2014`, + htmlDescription: (htmlDescription !== '') ? htmlDescription : `\u2014`, queryUrl: queryUrl, }; return reportDetails; @@ -244,7 +285,7 @@ export function ReportDetails(props) { const { httpClient } = props; httpClient .get('../api/reporting/reports/' + reportId) - .then((response) => { + .then((response: ReportSchemaType) => { handleReportDetails(getReportDetailsData(response)); props.setBreadcrumbs([ { @@ -267,7 +308,7 @@ export function ReportDetails(props) { }, ]); }) - .catch((error) => { + .catch((error: any) => { console.log('Error when fetching report details: ', error); handleErrorToast(); }); @@ -285,7 +326,7 @@ export function ReportDetails(props) { handleLoading(false); }; - const fileFormatDownload = (data) => { + const fileFormatDownload = (data: ReportDetails) => { let formatUpper = data['defaultFileFormat']; formatUpper = fileFormatsUpper[formatUpper]; return ( @@ -296,7 +337,7 @@ export function ReportDetails(props) { ); }; - const sourceURL = (data) => { + const sourceURL = (data: ReportDetails) => { return ( {data['source']} @@ -304,6 +345,45 @@ export function ReportDetails(props) { ); }; + const triggerSection = + reportDetails.triggerType === TRIGGER_TYPE.onDemand ? ( + + ) : ( + + + + + + + ) + const showLoadingModal = showLoading ? ( ) : null; @@ -325,7 +405,7 @@ export function ReportDetails(props) { -

{reportDetails['reportName']}

+

{reportDetails.reportName}

 @@ -346,28 +426,28 @@ export function ReportDetails(props) { 'opensearch.reports.details.reportSettings.name', { defaultMessage: 'Name' } )} - reportDetailsComponentContent={reportDetails['reportName']} + reportDetailsComponentContent={reportDetails.reportName} /> @@ -398,7 +478,7 @@ export function ReportDetails(props) { 'opensearch.reports.details.reportSettings.state', { defaultMessage: 'State' } )} - reportDetailsComponentContent={reportDetails['state']} + reportDetailsComponentContent={reportDetails.state} /> @@ -409,7 +489,7 @@ export function ReportDetails(props) { { defaultMessage: 'Report header' } )} reportDetailsComponentContent={trimAndRenderAsText( - reportDetails['reportHeader'] + reportDetails.reportHeader )} /> - - - - - -

- {i18n.translate('opensearch.reports.details.reportTrigger', { - defaultMessage: 'Report trigger', - })} -

- - - - - - {/* + {triggerSection} + +

Notification settings

 + - - */} + { - setToasts(toasts.filter((toast) => toast.id !== removedToast.id)); + const removeToast = (removedToast: { id: string; }) => { + setToasts(toasts.filter((toast: any) => toast.id !== removedToast.id)); }; let timeRange = { @@ -269,8 +271,8 @@ export function CreateReport(props) { timeRange, setShowTimeRangeError, setShowCronError, - setShowEmailRecipientsError, - setEmailRecipientsErrorMessage + setShowDeliveryChannelError, + setDeliveryChannelError, ).then((response) => { error = response; }); @@ -297,7 +299,7 @@ export function CreateReport(props) { 'Content-Type': 'application/json', }, }) - .then(async (resp) => { + .then(async (resp: { scheduler_response: { reportDefinitionId: string; }; }) => { //TODO: consider handle the on demand report generation from server side instead if (metadata.trigger.trigger_type === 'On demand') { const reportDefinitionId = @@ -306,7 +308,7 @@ export function CreateReport(props) { } window.location.assign(`reports-dashboards#/create=success`); }) - .catch((error) => { + .catch((error: {body: { statusCode: number; }; }) => { console.log('error in creating report definition: ' + error); if (error.body.statusCode === 403) { handleErrorOnCreateToast('permissions'); @@ -350,6 +352,7 @@ export function CreateReport(props) { - - diff --git a/dashboards-reports/public/components/report_definitions/delivery/__tests__/__snapshots__/delivery.test.tsx.snap b/dashboards-reports/public/components/report_definitions/delivery/__tests__/__snapshots__/delivery.test.tsx.snap index d70dbdde..3df27334 100644 --- a/dashboards-reports/public/components/report_definitions/delivery/__tests__/__snapshots__/delivery.test.tsx.snap +++ b/dashboards-reports/public/components/report_definitions/delivery/__tests__/__snapshots__/delivery.test.tsx.snap @@ -3,7 +3,6 @@ exports[` panel render create component 1`] = `