From 223af504d7fdaf8b1a3920139b0fe7569cccaeb5 Mon Sep 17 00:00:00 2001 From: Jean-Louis Leysens Date: Tue, 7 Dec 2021 12:06:52 +0100 Subject: [PATCH 01/19] changed info -> summary and combined maximum attempts and attempts field --- .../management/components/report_info_flyout.tsx | 2 +- .../components/report_info_flyout_content.tsx | 16 +++++++++------- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/x-pack/plugins/reporting/public/management/components/report_info_flyout.tsx b/x-pack/plugins/reporting/public/management/components/report_info_flyout.tsx index 2a7d52cf9403b..105e471f0ee32 100644 --- a/x-pack/plugins/reporting/public/management/components/report_info_flyout.tsx +++ b/x-pack/plugins/reporting/public/management/components/report_info_flyout.tsx @@ -73,7 +73,7 @@ export const ReportInfoFlyout: FunctionComponent = ({ onClose, job }) => defaultMessage: 'Unable to fetch report info.', }) : i18n.translate('xpack.reporting.listing.table.reportCalloutTitle', { - defaultMessage: 'Report info', + defaultMessage: 'Report summary', })} diff --git a/x-pack/plugins/reporting/public/management/components/report_info_flyout_content.tsx b/x-pack/plugins/reporting/public/management/components/report_info_flyout_content.tsx index 00ce9069d81ce..f0070a8aacec4 100644 --- a/x-pack/plugins/reporting/public/management/components/report_info_flyout_content.tsx +++ b/x-pack/plugins/reporting/public/management/components/report_info_flyout_content.tsx @@ -99,13 +99,15 @@ export const ReportInfoFlyoutContent: FunctionComponent = ({ info }) => { title: i18n.translate('xpack.reporting.listing.infoPanel.attemptsInfo', { defaultMessage: 'Attempts', }), - description: info.attempts.toString(), - }, - { - title: i18n.translate('xpack.reporting.listing.infoPanel.maxAttemptsInfo', { - defaultMessage: 'Max attempts', - }), - description: info.max_attempts?.toString() || NA, + description: + info.attempts.toString() + + (info.max_attempts + ? ' ' + + i18n.translate('xpack.reporting.listing.infoPanel.ofMaximumAttempts', { + defaultMessage: 'of {maxAttempts}', + values: { maxAttempts: info.max_attempts.toString() }, + }) + : ''), }, { title: i18n.translate('xpack.reporting.listing.infoPanel.timeoutInfo', { From 305059f4955b054897684e1618a15f9abff4f6ce Mon Sep 17 00:00:00 2001 From: Jean-Louis Leysens Date: Tue, 7 Dec 2021 12:14:16 +0100 Subject: [PATCH 02/19] added spaceId if it is there to job info --- .../management/components/report_info_flyout_content.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/x-pack/plugins/reporting/public/management/components/report_info_flyout_content.tsx b/x-pack/plugins/reporting/public/management/components/report_info_flyout_content.tsx index f0070a8aacec4..50a0af49a4874 100644 --- a/x-pack/plugins/reporting/public/management/components/report_info_flyout_content.tsx +++ b/x-pack/plugins/reporting/public/management/components/report_info_flyout_content.tsx @@ -7,7 +7,7 @@ import React, { FunctionComponent } from 'react'; import { i18n } from '@kbn/i18n'; -import { EuiDescriptionList, EuiSpacer, EuiText } from '@elastic/eui'; +import { EuiDescriptionList, EuiSpacer, EuiText, EuiDescriptionListProps } from '@elastic/eui'; import type { Job } from '../../lib/job'; import { USES_HEADLESS_JOB_TYPES } from '../../../common/constants'; @@ -83,6 +83,10 @@ export const ReportInfoFlyoutContent: FunctionComponent = ({ info }) => { description: info.kibana_name && info.kibana_id ? `${info.kibana_name} (${info.kibana_id})` : NA, }, + Boolean(info.spaceId) && { + title: i18n.translate('xpack.reporting.listing.infoPanel.space', { defaultMessage: 'Space' }), + description: info.spaceId, + }, { title: i18n.translate('xpack.reporting.listing.infoPanel.contentTypeInfo', { defaultMessage: 'Content type', @@ -128,7 +132,7 @@ export const ReportInfoFlyoutContent: FunctionComponent = ({ info }) => { }, // TODO: when https://github.com/elastic/kibana/pull/106137 is merged, add kibana version field - ]; + ].filter(Boolean) as EuiDescriptionListProps['listItems']; const jobScreenshot = [ { From bfb80368241ce18e5ac21c6355cfb55601cdb131 Mon Sep 17 00:00:00 2001 From: Jean-Louis Leysens Date: Tue, 7 Dec 2021 12:16:41 +0100 Subject: [PATCH 03/19] moved space id to job details section --- .../components/report_info_flyout_content.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/x-pack/plugins/reporting/public/management/components/report_info_flyout_content.tsx b/x-pack/plugins/reporting/public/management/components/report_info_flyout_content.tsx index 50a0af49a4874..136caec8918ce 100644 --- a/x-pack/plugins/reporting/public/management/components/report_info_flyout_content.tsx +++ b/x-pack/plugins/reporting/public/management/components/report_info_flyout_content.tsx @@ -43,6 +43,10 @@ export const ReportInfoFlyoutContent: FunctionComponent = ({ info }) => { }), description: info.title || NA, }, + Boolean(info.spaceId) && { + title: i18n.translate('xpack.reporting.listing.infoPanel.space', { defaultMessage: 'Space' }), + description: info.spaceId, + }, { title: i18n.translate('xpack.reporting.listing.infoPanel.createdAtInfo', { defaultMessage: 'Created at', @@ -61,7 +65,7 @@ export const ReportInfoFlyoutContent: FunctionComponent = ({ info }) => { }), description: info.browserTimezone || NA, }, - ]; + ].filter(Boolean) as EuiDescriptionListProps['listItems']; const processingInfo = [ { @@ -83,10 +87,6 @@ export const ReportInfoFlyoutContent: FunctionComponent = ({ info }) => { description: info.kibana_name && info.kibana_id ? `${info.kibana_name} (${info.kibana_id})` : NA, }, - Boolean(info.spaceId) && { - title: i18n.translate('xpack.reporting.listing.infoPanel.space', { defaultMessage: 'Space' }), - description: info.spaceId, - }, { title: i18n.translate('xpack.reporting.listing.infoPanel.contentTypeInfo', { defaultMessage: 'Content type', @@ -132,7 +132,7 @@ export const ReportInfoFlyoutContent: FunctionComponent = ({ info }) => { }, // TODO: when https://github.com/elastic/kibana/pull/106137 is merged, add kibana version field - ].filter(Boolean) as EuiDescriptionListProps['listItems']; + ]; const jobScreenshot = [ { From 318f8e123c5b1af2f2b5f3a3d4d71324edf70f38 Mon Sep 17 00:00:00 2001 From: Jean-Louis Leysens Date: Tue, 7 Dec 2021 12:22:34 +0100 Subject: [PATCH 04/19] moved processing and job info into a single array --- .../management/components/report_info_flyout_content.tsx | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/x-pack/plugins/reporting/public/management/components/report_info_flyout_content.tsx b/x-pack/plugins/reporting/public/management/components/report_info_flyout_content.tsx index 136caec8918ce..f48d3b27fc81b 100644 --- a/x-pack/plugins/reporting/public/management/components/report_info_flyout_content.tsx +++ b/x-pack/plugins/reporting/public/management/components/report_info_flyout_content.tsx @@ -65,9 +65,6 @@ export const ReportInfoFlyoutContent: FunctionComponent = ({ info }) => { }), description: info.browserTimezone || NA, }, - ].filter(Boolean) as EuiDescriptionListProps['listItems']; - - const processingInfo = [ { title: i18n.translate('xpack.reporting.listing.infoPanel.startedAtInfo', { defaultMessage: 'Started at', @@ -132,7 +129,7 @@ export const ReportInfoFlyoutContent: FunctionComponent = ({ info }) => { }, // TODO: when https://github.com/elastic/kibana/pull/106137 is merged, add kibana version field - ]; + ].filter(Boolean) as EuiDescriptionListProps['listItems']; const jobScreenshot = [ { @@ -168,8 +165,6 @@ export const ReportInfoFlyoutContent: FunctionComponent = ({ info }) => { return ( <> - - {USES_HEADLESS_JOB_TYPES.includes(info.jobtype) ? ( <> From d82873276968bed94604ddce74fd3945ba647d7f Mon Sep 17 00:00:00 2001 From: Jean-Louis Leysens Date: Tue, 7 Dec 2021 14:24:32 +0100 Subject: [PATCH 05/19] wip, introduced a new structure to the flyout for easier visual parsing. still need to re-introduce errors and deprecated report types in the new structure --- x-pack/plugins/reporting/common/constants.ts | 7 +- x-pack/plugins/reporting/public/lib/job.tsx | 22 +++ .../components/report_info_flyout.tsx | 5 +- .../components/report_info_flyout_content.tsx | 178 ++++++++++-------- 4 files changed, 127 insertions(+), 85 deletions(-) diff --git a/x-pack/plugins/reporting/common/constants.ts b/x-pack/plugins/reporting/common/constants.ts index 1fe37f86b037f..2d2f0d41fc8c2 100644 --- a/x-pack/plugins/reporting/common/constants.ts +++ b/x-pack/plugins/reporting/common/constants.ts @@ -76,7 +76,12 @@ export const CSV_SEARCHSOURCE_IMMEDIATE_TYPE = 'csv_searchsource_immediate'; export const CSV_REPORT_TYPE_DEPRECATED = 'CSV'; export const CSV_JOB_TYPE_DEPRECATED = 'csv'; -export const USES_HEADLESS_JOB_TYPES = [PDF_JOB_TYPE, PNG_JOB_TYPE]; +export const USES_HEADLESS_JOB_TYPES = [ + PDF_JOB_TYPE, + PNG_JOB_TYPE, + PDF_JOB_TYPE_V2, + PNG_JOB_TYPE_V2, +]; export const DEPRECATED_JOB_TYPES = [CSV_JOB_TYPE_DEPRECATED]; diff --git a/x-pack/plugins/reporting/public/lib/job.tsx b/x-pack/plugins/reporting/public/lib/job.tsx index d24695b1041c7..cb4f35e16dcad 100644 --- a/x-pack/plugins/reporting/public/lib/job.tsx +++ b/x-pack/plugins/reporting/public/lib/job.tsx @@ -38,6 +38,7 @@ export class Job { public spaceId: ReportPayload['spaceId']; public browserTimezone?: ReportPayload['browserTimezone']; public layout: ReportPayload['layout']; + public version: ReportPayload['version']; public jobtype: ReportSource['jobtype']; public created_by: ReportSource['created_by']; @@ -68,6 +69,7 @@ export class Job { this.objectType = report.payload.objectType; this.title = report.payload.title; this.layout = report.payload.layout; + this.version = report.payload.version; this.created_by = report.created_by; this.created_at = report.created_at; this.started_at = report.started_at; @@ -141,6 +143,26 @@ export class Job { return null; } + public get prettyStatus(): string { + return ( + jobStatusLabelsMap.get(this.status) ?? + i18n.translate('xpack.reporting.jobStatusDetail.unknownText', { defaultMessage: 'Unknown' }) + ); + } + + public get prettyTimeout(): string { + if (this.timeout == null) { + return i18n.translate('xpack.reporting.jobStatusDetail.timeoutSecondsUnknown', { + defaultMessage: 'Unknown', + }); + } + const seconds = this.timeout / 1000; + return i18n.translate('xpack.reporting.jobStatusDetail.timeoutSeconds', { + defaultMessage: '{timeout} seconds', + values: { timeout: seconds }, + }); + } + getStatus() { const statusLabel = jobStatusLabelsMap.get(this.status) as string; const statusTimestamp = this.getStatusTimestamp(); diff --git a/x-pack/plugins/reporting/public/management/components/report_info_flyout.tsx b/x-pack/plugins/reporting/public/management/components/report_info_flyout.tsx index 105e471f0ee32..0103bf1fdbec6 100644 --- a/x-pack/plugins/reporting/public/management/components/report_info_flyout.tsx +++ b/x-pack/plugins/reporting/public/management/components/report_info_flyout.tsx @@ -72,8 +72,9 @@ export const ReportInfoFlyout: FunctionComponent = ({ onClose, job }) => ? i18n.translate('xpack.reporting.listing.table.reportInfoUnableToFetch', { defaultMessage: 'Unable to fetch report info.', }) - : i18n.translate('xpack.reporting.listing.table.reportCalloutTitle', { - defaultMessage: 'Report summary', + : info?.title ?? + i18n.translate('xpack.reporting.listing.table.untitledReport', { + defaultMessage: 'Untitled report', })} diff --git a/x-pack/plugins/reporting/public/management/components/report_info_flyout_content.tsx b/x-pack/plugins/reporting/public/management/components/report_info_flyout_content.tsx index f48d3b27fc81b..2a75b912f8e16 100644 --- a/x-pack/plugins/reporting/public/management/components/report_info_flyout_content.tsx +++ b/x-pack/plugins/reporting/public/management/components/report_info_flyout_content.tsx @@ -7,7 +7,13 @@ import React, { FunctionComponent } from 'react'; import { i18n } from '@kbn/i18n'; -import { EuiDescriptionList, EuiSpacer, EuiText, EuiDescriptionListProps } from '@elastic/eui'; +import { + EuiDescriptionList, + EuiSpacer, + EuiText, + EuiDescriptionListProps, + EuiTitle, +} from '@elastic/eui'; import type { Job } from '../../lib/job'; import { USES_HEADLESS_JOB_TYPES } from '../../../common/constants'; @@ -34,55 +40,39 @@ interface Props { } export const ReportInfoFlyoutContent: FunctionComponent = ({ info }) => { - const timeout = info.timeout ? info.timeout.toString() : NA; - - const jobInfo = [ - { - title: i18n.translate('xpack.reporting.listing.infoPanel.titleInfo', { - defaultMessage: 'Title', - }), - description: info.title || NA, - }, - Boolean(info.spaceId) && { - title: i18n.translate('xpack.reporting.listing.infoPanel.space', { defaultMessage: 'Space' }), - description: info.spaceId, - }, - { - title: i18n.translate('xpack.reporting.listing.infoPanel.createdAtInfo', { - defaultMessage: 'Created at', - }), - description: info.getCreatedAtLabel(), - }, + const hasScreenshot = USES_HEADLESS_JOB_TYPES.includes(info.jobtype); + const outputInfo = [ { title: i18n.translate('xpack.reporting.listing.infoPanel.statusInfo', { defaultMessage: 'Status', }), - description: info.getStatus(), + description: info.prettyStatus, }, - { - title: i18n.translate('xpack.reporting.listing.infoPanel.tzInfo', { - defaultMessage: 'Time zone', + Boolean(info.version) && { + title: i18n.translate('xpack.reporting.listing.infoPanel.kibanaVersion', { + defaultMessage: 'Kibana version', }), - description: info.browserTimezone || NA, - }, - { - title: i18n.translate('xpack.reporting.listing.infoPanel.startedAtInfo', { - defaultMessage: 'Started at', - }), - description: info.started_at || NA, + description: info.version, }, - { - title: i18n.translate('xpack.reporting.listing.infoPanel.completedAtInfo', { - defaultMessage: 'Completed at', + Boolean(info.spaceId) && { + title: i18n.translate('xpack.reporting.listing.infoPanel.space', { + defaultMessage: 'Kibana space', }), - description: info.completed_at || NA, + description: info.spaceId, }, { - title: i18n.translate('xpack.reporting.listing.infoPanel.processedByInfo', { - defaultMessage: 'Processed by', + title: i18n.translate('xpack.reporting.listing.infoPanel.attemptsInfo', { + defaultMessage: 'Attempts', }), description: - info.kibana_name && info.kibana_id ? `${info.kibana_name} (${info.kibana_id})` : NA, + info.attempts.toString() + + (info.max_attempts + ? ' ' + + i18n.translate('xpack.reporting.listing.infoPanel.ofMaximumAttempts', { + defaultMessage: 'of {maxAttempts}', + values: { maxAttempts: info.max_attempts.toString() }, + }) + : ''), }, { title: i18n.translate('xpack.reporting.listing.infoPanel.contentTypeInfo', { @@ -96,53 +86,72 @@ export const ReportInfoFlyoutContent: FunctionComponent = ({ info }) => { }), description: info.size?.toString() || NA, }, - { - title: i18n.translate('xpack.reporting.listing.infoPanel.attemptsInfo', { - defaultMessage: 'Attempts', + + hasScreenshot && { + title: i18n.translate('xpack.reporting.listing.infoPanel.dimensionsInfoHeight', { + defaultMessage: 'Height (in pixels)', }), - description: - info.attempts.toString() + - (info.max_attempts - ? ' ' + - i18n.translate('xpack.reporting.listing.infoPanel.ofMaximumAttempts', { - defaultMessage: 'of {maxAttempts}', - values: { maxAttempts: info.max_attempts.toString() }, - }) - : ''), + description: info.layout?.dimensions?.height || UNKNOWN, + }, + hasScreenshot && { + title: i18n.translate('xpack.reporting.listing.infoPanel.dimensionsInfoWidth', { + defaultMessage: 'Width (in pixels)', + }), + description: info.layout?.dimensions?.width || UNKNOWN, }, + { - title: i18n.translate('xpack.reporting.listing.infoPanel.timeoutInfo', { - defaultMessage: 'Timeout', + title: i18n.translate('xpack.reporting.listing.infoPanel.tzInfo', { + defaultMessage: 'Time zone', }), - description: timeout, + description: info.browserTimezone || NA, }, { - title: i18n.translate('xpack.reporting.listing.infoPanel.exportTypeInfo', { - defaultMessage: 'Export type', + title: i18n.translate('xpack.reporting.listing.infoPanel.processedByInfo', { + defaultMessage: 'Processed by', }), - description: info.isDeprecated - ? i18n.translate('xpack.reporting.listing.table.reportCalloutExportTypeDeprecated', { - defaultMessage: '{jobtype} (DEPRECATED)', - values: { jobtype: info.jobtype }, - }) - : info.jobtype, + description: + info.kibana_name && info.kibana_id ? `${info.kibana_name} (${info.kibana_id})` : NA, }, + { + title: i18n.translate('xpack.reporting.listing.infoPanel.timeoutInfo', { + defaultMessage: 'Timeout', + }), + description: info.prettyTimeout, + }, + // { + // title: i18n.translate('xpack.reporting.listing.infoPanel.exportTypeInfo', { + // defaultMessage: 'Export type', + // }), + // description: info.isDeprecated + // ? i18n.translate('xpack.reporting.listing.table.reportCalloutExportTypeDeprecated', { + // defaultMessage: '{jobtype} (DEPRECATED)', + // values: { jobtype: info.jobtype }, + // }) + // : info.jobtype, + // }, // TODO: when https://github.com/elastic/kibana/pull/106137 is merged, add kibana version field ].filter(Boolean) as EuiDescriptionListProps['listItems']; - const jobScreenshot = [ + const timestampsInfo = [ { - title: i18n.translate('xpack.reporting.listing.infoPanel.dimensionsInfo', { - defaultMessage: 'Dimensions', + title: i18n.translate('xpack.reporting.listing.infoPanel.createdAtInfo', { + defaultMessage: 'Created at', + }), + description: info.getCreatedAtLabel(), + }, + { + title: i18n.translate('xpack.reporting.listing.infoPanel.startedAtInfo', { + defaultMessage: 'Started at', }), - description: getDimensions(info), + description: info.started_at || NA, }, { - title: i18n.translate('xpack.reporting.listing.infoPanel.layoutInfo', { - defaultMessage: 'Layout', + title: i18n.translate('xpack.reporting.listing.infoPanel.completedAtInfo', { + defaultMessage: 'Completed at', }), - description: info.layout?.id || UNKNOWN, + description: info.completed_at || NA, }, ]; @@ -163,26 +172,31 @@ export const ReportInfoFlyoutContent: FunctionComponent = ({ info }) => { ]; return ( - <> - - {USES_HEADLESS_JOB_TYPES.includes(info.jobtype) ? ( - <> - - - - ) : null} - {warningsInfo ? ( +
+ +

Output

+ + + + +

Timestamps

+ + + + {Boolean(warningsInfo) && ( <> - + +

Warnings

+ - ) : null} - {errorInfo ? ( + )} + {Boolean(errorInfo) && ( <> - ) : null} - + )} +
); }; From 586e43fc1c47186f5d0efab768807820d4ae7c88 Mon Sep 17 00:00:00 2001 From: Jean-Louis Leysens Date: Tue, 7 Dec 2021 14:25:14 +0100 Subject: [PATCH 06/19] remove unnecessary div --- .../management/components/report_info_flyout_content.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/x-pack/plugins/reporting/public/management/components/report_info_flyout_content.tsx b/x-pack/plugins/reporting/public/management/components/report_info_flyout_content.tsx index 2a75b912f8e16..c4a1ba1d38191 100644 --- a/x-pack/plugins/reporting/public/management/components/report_info_flyout_content.tsx +++ b/x-pack/plugins/reporting/public/management/components/report_info_flyout_content.tsx @@ -172,7 +172,7 @@ export const ReportInfoFlyoutContent: FunctionComponent = ({ info }) => { ]; return ( -
+ <>

Output

 @@ -197,6 +197,6 @@ export const ReportInfoFlyoutContent: FunctionComponent = ({ info }) => { )} -
+ ); }; From 1c0062efdfb1f5107f9a9aedac4b317e742e6697 Mon Sep 17 00:00:00 2001 From: Jean-Louis Leysens Date: Tue, 7 Dec 2021 14:44:37 +0100 Subject: [PATCH 07/19] added warnings and errors to callout and cleaned up comments --- .../components/report_info_flyout_content.tsx | 77 ++++++------------- 1 file changed, 25 insertions(+), 52 deletions(-) diff --git a/x-pack/plugins/reporting/public/management/components/report_info_flyout_content.tsx b/x-pack/plugins/reporting/public/management/components/report_info_flyout_content.tsx index c4a1ba1d38191..f257149de9303 100644 --- a/x-pack/plugins/reporting/public/management/components/report_info_flyout_content.tsx +++ b/x-pack/plugins/reporting/public/management/components/report_info_flyout_content.tsx @@ -9,10 +9,10 @@ import React, { FunctionComponent } from 'react'; import { i18n } from '@kbn/i18n'; import { EuiDescriptionList, - EuiSpacer, - EuiText, EuiDescriptionListProps, EuiTitle, + EuiCallOut, + EuiSpacer, } from '@elastic/eui'; import type { Job } from '../../lib/job'; @@ -26,15 +26,6 @@ const UNKNOWN = i18n.translate('xpack.reporting.listing.infoPanel.unknownLabel', defaultMessage: 'unknown', }); -const getDimensions = (info: Job): string => { - const defaultDimensions = { width: null, height: null }; - const { width, height } = info.layout?.dimensions || defaultDimensions; - if (width && height) { - return `Width: ${width} x Height: ${height}`; - } - return UNKNOWN; -}; - interface Props { info: Job; } @@ -119,19 +110,6 @@ export const ReportInfoFlyoutContent: FunctionComponent = ({ info }) => { }), description: info.prettyTimeout, }, - // { - // title: i18n.translate('xpack.reporting.listing.infoPanel.exportTypeInfo', { - // defaultMessage: 'Export type', - // }), - // description: info.isDeprecated - // ? i18n.translate('xpack.reporting.listing.table.reportCalloutExportTypeDeprecated', { - // defaultMessage: '{jobtype} (DEPRECATED)', - // values: { jobtype: info.jobtype }, - // }) - // : info.jobtype, - // }, - - // TODO: when https://github.com/elastic/kibana/pull/106137 is merged, add kibana version field ].filter(Boolean) as EuiDescriptionListProps['listItems']; const timestampsInfo = [ @@ -156,23 +134,33 @@ export const ReportInfoFlyoutContent: FunctionComponent = ({ info }) => { ]; const warnings = info.getWarnings(); - const warningsInfo = warnings && [ - { - title: Warnings, - description: {warnings}, - }, - ]; - const errored = info.getError(); - const errorInfo = errored && [ - { - title: Error, - description: {errored}, - }, - ]; return ( <> + {Boolean(errored) && ( + + {errored} + + )} + {Boolean(warnings) && ( + <> + {Boolean(errored) && } + + {warnings} + + + )}

Output

 @@ -182,21 +170,6 @@ export const ReportInfoFlyoutContent: FunctionComponent = ({ info }) => {

Timestamps

- - {Boolean(warningsInfo) && ( - <> - -

Warnings

- - - - )} - {Boolean(errorInfo) && ( - <> - - - - )} ); }; From 0ffd3fc2ca13deeec5a1a396566a6fe095b734c3 Mon Sep 17 00:00:00 2001 From: Jean-Louis Leysens Date: Tue, 7 Dec 2021 15:07:25 +0100 Subject: [PATCH 08/19] remove unused functionality and introduce date formatting per advanced settings format --- x-pack/plugins/reporting/public/lib/job.tsx | 30 -------------- .../components/report_info_flyout_content.tsx | 40 ++++++++++++++----- .../management/mount_management_section.tsx | 6 ++- x-pack/plugins/reporting/public/types.ts | 3 +- 4 files changed, 37 insertions(+), 42 deletions(-) diff --git a/x-pack/plugins/reporting/public/lib/job.tsx b/x-pack/plugins/reporting/public/lib/job.tsx index cb4f35e16dcad..0e1a3d90b47bb 100644 --- a/x-pack/plugins/reporting/public/lib/job.tsx +++ b/x-pack/plugins/reporting/public/lib/job.tsx @@ -163,36 +163,6 @@ export class Job { }); } - getStatus() { - const statusLabel = jobStatusLabelsMap.get(this.status) as string; - const statusTimestamp = this.getStatusTimestamp(); - - if (statusTimestamp) { - return ( - {this.formatDate(statusTimestamp)} - ), - }} - /> - ); - } - - return statusLabel; - } - - getStatusLabel() { - return ( - <> - {this.getStatus()} {this.getStatusMessage()} - - ); - } - /** * Returns a user friendly version of the report job creation date */ diff --git a/x-pack/plugins/reporting/public/management/components/report_info_flyout_content.tsx b/x-pack/plugins/reporting/public/management/components/report_info_flyout_content.tsx index f257149de9303..a9feff9cd6d15 100644 --- a/x-pack/plugins/reporting/public/management/components/report_info_flyout_content.tsx +++ b/x-pack/plugins/reporting/public/management/components/report_info_flyout_content.tsx @@ -14,10 +14,13 @@ import { EuiCallOut, EuiSpacer, } from '@elastic/eui'; +import moment from 'moment'; -import type { Job } from '../../lib/job'; import { USES_HEADLESS_JOB_TYPES } from '../../../common/constants'; +import type { Job } from '../../lib/job'; +import { useKibana } from '../../shared_imports'; + const NA = i18n.translate('xpack.reporting.listing.infoPanel.notApplicableLabel', { defaultMessage: 'N/A', }); @@ -30,8 +33,25 @@ interface Props { info: Job; } +const createDateFormatter = (format: string, tz: string) => (date: string) => { + const m = moment.tz(date, tz); + return m.isValid() ? m.format(format) : NA; +}; + export const ReportInfoFlyoutContent: FunctionComponent = ({ info }) => { + const { + services: { uiSettings }, + } = useKibana(); + + const timezone = + uiSettings.get('dateFormat:tz') === 'Browser' + ? moment.tz.guess() + : uiSettings.get('dateFormat:tz'); + + const formatDate = createDateFormatter(uiSettings.get('dateFormat'), timezone); + const hasScreenshot = USES_HEADLESS_JOB_TYPES.includes(info.jobtype); + const outputInfo = [ { title: i18n.translate('xpack.reporting.listing.infoPanel.statusInfo', { @@ -91,12 +111,6 @@ export const ReportInfoFlyoutContent: FunctionComponent = ({ info }) => { description: info.layout?.dimensions?.width || UNKNOWN, }, - { - title: i18n.translate('xpack.reporting.listing.infoPanel.tzInfo', { - defaultMessage: 'Time zone', - }), - description: info.browserTimezone || NA, - }, { title: i18n.translate('xpack.reporting.listing.infoPanel.processedByInfo', { defaultMessage: 'Processed by', @@ -113,23 +127,29 @@ export const ReportInfoFlyoutContent: FunctionComponent = ({ info }) => { ].filter(Boolean) as EuiDescriptionListProps['listItems']; const timestampsInfo = [ + { + title: i18n.translate('xpack.reporting.listing.infoPanel.tzInfo', { + defaultMessage: 'Time zone', + }), + description: info.browserTimezone || NA, + }, { title: i18n.translate('xpack.reporting.listing.infoPanel.createdAtInfo', { defaultMessage: 'Created at', }), - description: info.getCreatedAtLabel(), + description: info.created_at ? formatDate(info.created_at) : NA, }, { title: i18n.translate('xpack.reporting.listing.infoPanel.startedAtInfo', { defaultMessage: 'Started at', }), - description: info.started_at || NA, + description: info.started_at ? formatDate(info.started_at) : NA, }, { title: i18n.translate('xpack.reporting.listing.infoPanel.completedAtInfo', { defaultMessage: 'Completed at', }), - description: info.completed_at || NA, + description: info.completed_at ? formatDate(info.completed_at) : NA, }, ]; diff --git a/x-pack/plugins/reporting/public/management/mount_management_section.tsx b/x-pack/plugins/reporting/public/management/mount_management_section.tsx index eea04d00242fc..6d888c6071a78 100644 --- a/x-pack/plugins/reporting/public/management/mount_management_section.tsx +++ b/x-pack/plugins/reporting/public/management/mount_management_section.tsx @@ -30,7 +30,11 @@ export async function mountManagementSection( render( diff --git a/x-pack/plugins/reporting/public/types.ts b/x-pack/plugins/reporting/public/types.ts index cb1344bb982ec..25b7738ff1981 100644 --- a/x-pack/plugins/reporting/public/types.ts +++ b/x-pack/plugins/reporting/public/types.ts @@ -5,9 +5,10 @@ * 2.0. */ -import type { HttpSetup, ApplicationStart } from 'src/core/public'; +import type { HttpSetup, ApplicationStart, CoreSetup } from 'src/core/public'; export interface KibanaContext { http: HttpSetup; application: ApplicationStart; + uiSettings: CoreSetup['uiSettings']; } From 28fb5c018069ee7ba5f5417f92f79296f3241334 Mon Sep 17 00:00:00 2001 From: Jean-Louis Leysens Date: Tue, 7 Dec 2021 15:22:13 +0100 Subject: [PATCH 09/19] remove unused import --- x-pack/plugins/reporting/public/lib/job.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/x-pack/plugins/reporting/public/lib/job.tsx b/x-pack/plugins/reporting/public/lib/job.tsx index 0e1a3d90b47bb..77e6edb2270a2 100644 --- a/x-pack/plugins/reporting/public/lib/job.tsx +++ b/x-pack/plugins/reporting/public/lib/job.tsx @@ -7,7 +7,6 @@ import { EuiText, EuiTextColor } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; -import { FormattedMessage } from '@kbn/i18n-react'; import moment from 'moment'; import React from 'react'; import { JOB_STATUSES } from '../../common/constants'; From c67b7584bc1f40366aca93111fba31b415f58a54 Mon Sep 17 00:00:00 2001 From: Jean-Louis Leysens Date: Tue, 7 Dec 2021 16:31:29 +0100 Subject: [PATCH 10/19] remove unused i18n --- x-pack/plugins/translations/translations/ja-JP.json | 8 -------- x-pack/plugins/translations/translations/zh-CN.json | 8 -------- 2 files changed, 16 deletions(-) diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index 6a284b2efd354..a2e632c4176a1 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -20019,7 +20019,6 @@ "xpack.reporting.jobStatusDetail.deprecatedText": "これは廃止予定のエクスポートタイプです。将来のバージョンのKibanaとの互換性のためには、このレポートの自動化を再作成する必要があります。", "xpack.reporting.jobStatusDetail.errorText": "エラー詳細についてはレポート情報を参照してください。", "xpack.reporting.jobStatusDetail.pendingStatusReachedText": "ジョブの処理を待機しています。", - "xpack.reporting.jobStatusDetail.statusTimestampText": "{statusTimestamp} 時点で {statusLabel}", "xpack.reporting.jobStatusDetail.warningsText": "警告についてはレポート情報を参照してください。", "xpack.reporting.jobStatuses.completedText": "完了", "xpack.reporting.jobStatuses.failedText": "失敗", @@ -20052,16 +20051,11 @@ "xpack.reporting.listing.infoPanel.completedAtInfo": "完了日時", "xpack.reporting.listing.infoPanel.contentTypeInfo": "コンテンツタイプ", "xpack.reporting.listing.infoPanel.createdAtInfo": "作成日時：", - "xpack.reporting.listing.infoPanel.dimensionsInfo": "次元", - "xpack.reporting.listing.infoPanel.exportTypeInfo": "エクスポートタイプ", - "xpack.reporting.listing.infoPanel.layoutInfo": "レイアウト", - "xpack.reporting.listing.infoPanel.maxAttemptsInfo": "最大試行回数", "xpack.reporting.listing.infoPanel.processedByInfo": "処理方法", "xpack.reporting.listing.infoPanel.sizeInfo": "サイズ（バイト）", "xpack.reporting.listing.infoPanel.startedAtInfo": "開始日時", "xpack.reporting.listing.infoPanel.statusInfo": "ステータス", "xpack.reporting.listing.infoPanel.timeoutInfo": "タイムアウト（ms）", - "xpack.reporting.listing.infoPanel.titleInfo": "タイトル", "xpack.reporting.listing.infoPanel.tzInfo": "タイムゾーン", "xpack.reporting.listing.reports.ilmPolicyLinkText": "レポートILMポリシーを編集", "xpack.reporting.listing.reports.subtitle": "Kibanaアプリケーションで生成されたレポートを取得します。", @@ -20076,8 +20070,6 @@ "xpack.reporting.listing.table.deleteNumConfirmTitle": "{num} 件のレポートを削除しますか？", "xpack.reporting.listing.table.loadingReportsDescription": "レポートを読み込み中です", "xpack.reporting.listing.table.noCreatedReportsDescription": "レポートが作成されていません", - "xpack.reporting.listing.table.reportCalloutExportTypeDeprecated": "{jobtype}（廃止予定）", - "xpack.reporting.listing.table.reportCalloutTitle": "レポート情報", "xpack.reporting.listing.table.reportInfoAndErrorButtonTooltip": "レポート情報とエラーメッセージを参照してください。", "xpack.reporting.listing.table.reportInfoAndWarningsButtonTooltip": "レポート情報と警告を参照してください。", "xpack.reporting.listing.table.reportInfoButtonTooltip": "レポート情報を参照してください。", diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index 383b5e9e1bdb8..55ab92d536584 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -20311,7 +20311,6 @@ "xpack.reporting.jobStatusDetail.deprecatedText": "这是已弃用的导出类型。此报告的自动化将需要重新创建，才能与未来版本的 Kibana 兼容。", "xpack.reporting.jobStatusDetail.errorText": "查看报告信息以了解错误详情。", "xpack.reporting.jobStatusDetail.pendingStatusReachedText": "正在等待处理作业。", - "xpack.reporting.jobStatusDetail.statusTimestampText": "{statusTimestamp} 时为 {statusLabel}", "xpack.reporting.jobStatusDetail.warningsText": "查看报告信息以了解警告。", "xpack.reporting.jobStatuses.completedText": "已完成", "xpack.reporting.jobStatuses.failedText": "失败", @@ -20344,16 +20343,11 @@ "xpack.reporting.listing.infoPanel.completedAtInfo": "完成时间", "xpack.reporting.listing.infoPanel.contentTypeInfo": "内容类型", "xpack.reporting.listing.infoPanel.createdAtInfo": "创建于", - "xpack.reporting.listing.infoPanel.dimensionsInfo": "维度数", - "xpack.reporting.listing.infoPanel.exportTypeInfo": "导出类型", - "xpack.reporting.listing.infoPanel.layoutInfo": "布局", - "xpack.reporting.listing.infoPanel.maxAttemptsInfo": "最大尝试次数", "xpack.reporting.listing.infoPanel.processedByInfo": "处理者", "xpack.reporting.listing.infoPanel.sizeInfo": "大小（字节）", "xpack.reporting.listing.infoPanel.startedAtInfo": "启动时间", "xpack.reporting.listing.infoPanel.statusInfo": "状态", "xpack.reporting.listing.infoPanel.timeoutInfo": "超时", - "xpack.reporting.listing.infoPanel.titleInfo": "标题", "xpack.reporting.listing.infoPanel.tzInfo": "时区", "xpack.reporting.listing.reports.ilmPolicyLinkText": "编辑报告 ILM 策略", "xpack.reporting.listing.reports.subtitle": "获取在 Kibana 应用程序中生成的报告。", @@ -20369,8 +20363,6 @@ "xpack.reporting.listing.table.deleteReportButton": "删除{num, plural, other {报告} }", "xpack.reporting.listing.table.loadingReportsDescription": "正在载入报告", "xpack.reporting.listing.table.noCreatedReportsDescription": "未创建任何报告", - "xpack.reporting.listing.table.reportCalloutExportTypeDeprecated": "{jobtype}（已弃用）", - "xpack.reporting.listing.table.reportCalloutTitle": "报告信息", "xpack.reporting.listing.table.reportInfoAndErrorButtonTooltip": "查看报告信息和错误消息。", "xpack.reporting.listing.table.reportInfoAndWarningsButtonTooltip": "查看报告信息和警告。", "xpack.reporting.listing.table.reportInfoButtonTooltip": "查看报告信息。", From 09707a871471d5ef46768a21342511cac8964129 Mon Sep 17 00:00:00 2001 From: Jean-Louis Leysens Date: Mon, 13 Dec 2021 14:16:47 +0100 Subject: [PATCH 11/19] refactor check for info.max_attempts in flyout content Co-authored-by: Tim Sullivan --- .../components/report_info_flyout_content.tsx | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/x-pack/plugins/reporting/public/management/components/report_info_flyout_content.tsx b/x-pack/plugins/reporting/public/management/components/report_info_flyout_content.tsx index a9feff9cd6d15..7b7d7d8313c9b 100644 --- a/x-pack/plugins/reporting/public/management/components/report_info_flyout_content.tsx +++ b/x-pack/plugins/reporting/public/management/components/report_info_flyout_content.tsx @@ -76,14 +76,12 @@ export const ReportInfoFlyoutContent: FunctionComponent = ({ info }) => { defaultMessage: 'Attempts', }), description: - info.attempts.toString() + - (info.max_attempts - ? ' ' + - i18n.translate('xpack.reporting.listing.infoPanel.ofMaximumAttempts', { - defaultMessage: 'of {maxAttempts}', - values: { maxAttempts: info.max_attempts.toString() }, - }) - : ''), + description: info.max_attempts + ? i18n.translate('xpack.reporting.listing.infoPanel.attempts', { + defaultMessage: '{attempts} of {maxAttempts}', + values: { attempts: info.attempts, maxAttempts: info.max_attempts }, + }) + : info.attempts, }, { title: i18n.translate('xpack.reporting.listing.infoPanel.contentTypeInfo', { From b3d1ead16be757cea72a7b08e233499150fcaf70 Mon Sep 17 00:00:00 2001 From: Jean-Louis Leysens Date: Mon, 13 Dec 2021 14:17:21 +0100 Subject: [PATCH 12/19] update info.lyout.dimensions.height to be Math.ceiled Co-authored-by: Tim Sullivan --- .../management/components/report_info_flyout_content.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/x-pack/plugins/reporting/public/management/components/report_info_flyout_content.tsx b/x-pack/plugins/reporting/public/management/components/report_info_flyout_content.tsx index 7b7d7d8313c9b..cd37d8c5377d9 100644 --- a/x-pack/plugins/reporting/public/management/components/report_info_flyout_content.tsx +++ b/x-pack/plugins/reporting/public/management/components/report_info_flyout_content.tsx @@ -100,7 +100,11 @@ export const ReportInfoFlyoutContent: FunctionComponent = ({ info }) => { title: i18n.translate('xpack.reporting.listing.infoPanel.dimensionsInfoHeight', { defaultMessage: 'Height (in pixels)', }), - description: info.layout?.dimensions?.height || UNKNOWN, + description: + info.layout?.dimensions?.height != null + ? Math.ceil(info.layout.dimensions.height) + : UNKNOWN, + }, hasScreenshot && { title: i18n.translate('xpack.reporting.listing.infoPanel.dimensionsInfoWidth', { From 009b5fb5a4fea060e8d9c6d0cc5fd92249df0fe5 Mon Sep 17 00:00:00 2001 From: Jean-Louis Leysens Date: Mon, 13 Dec 2021 14:17:31 +0100 Subject: [PATCH 13/19] update info.lyout.dimensions.width to be Math.ceiled Co-authored-by: Tim Sullivan --- .../management/components/report_info_flyout_content.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/x-pack/plugins/reporting/public/management/components/report_info_flyout_content.tsx b/x-pack/plugins/reporting/public/management/components/report_info_flyout_content.tsx index cd37d8c5377d9..5c02d83a8faa9 100644 --- a/x-pack/plugins/reporting/public/management/components/report_info_flyout_content.tsx +++ b/x-pack/plugins/reporting/public/management/components/report_info_flyout_content.tsx @@ -110,7 +110,9 @@ export const ReportInfoFlyoutContent: FunctionComponent = ({ info }) => { title: i18n.translate('xpack.reporting.listing.infoPanel.dimensionsInfoWidth', { defaultMessage: 'Width (in pixels)', }), - description: info.layout?.dimensions?.width || UNKNOWN, + description: + info.layout?.dimensions?.width != null ? Math.ceil(info.layout.dimensions.width) : UNKNOWN, + }, { From c6e3942693e1afe1d6e3f3bf3386500205fd98b0 Mon Sep 17 00:00:00 2001 From: Jean-Louis Leysens Date: Mon, 13 Dec 2021 18:44:26 +0100 Subject: [PATCH 14/19] lint and remove bad suggestion commit --- .../management/components/report_info_flyout_content.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/x-pack/plugins/reporting/public/management/components/report_info_flyout_content.tsx b/x-pack/plugins/reporting/public/management/components/report_info_flyout_content.tsx index 5c02d83a8faa9..331e81621a813 100644 --- a/x-pack/plugins/reporting/public/management/components/report_info_flyout_content.tsx +++ b/x-pack/plugins/reporting/public/management/components/report_info_flyout_content.tsx @@ -75,7 +75,6 @@ export const ReportInfoFlyoutContent: FunctionComponent = ({ info }) => { title: i18n.translate('xpack.reporting.listing.infoPanel.attemptsInfo', { defaultMessage: 'Attempts', }), - description: description: info.max_attempts ? i18n.translate('xpack.reporting.listing.infoPanel.attempts', { defaultMessage: '{attempts} of {maxAttempts}', @@ -104,7 +103,6 @@ export const ReportInfoFlyoutContent: FunctionComponent = ({ info }) => { info.layout?.dimensions?.height != null ? Math.ceil(info.layout.dimensions.height) : UNKNOWN, - }, hasScreenshot && { title: i18n.translate('xpack.reporting.listing.infoPanel.dimensionsInfoWidth', { @@ -112,7 +110,6 @@ export const ReportInfoFlyoutContent: FunctionComponent = ({ info }) => { }), description: info.layout?.dimensions?.width != null ? Math.ceil(info.layout.dimensions.width) : UNKNOWN, - }, { From 614c723fd133b21163bf55e959e022f56c135156 Mon Sep 17 00:00:00 2001 From: Jean-Louis Leysens Date: Mon, 13 Dec 2021 19:17:29 +0100 Subject: [PATCH 15/19] added actions button to flyout, in flyout footer --- .../components/report_info_flyout.tsx | 74 ++++++++++++++++++- 1 file changed, 70 insertions(+), 4 deletions(-) diff --git a/x-pack/plugins/reporting/public/management/components/report_info_flyout.tsx b/x-pack/plugins/reporting/public/management/components/report_info_flyout.tsx index 0103bf1fdbec6..a25622047eea6 100644 --- a/x-pack/plugins/reporting/public/management/components/report_info_flyout.tsx +++ b/x-pack/plugins/reporting/public/management/components/report_info_flyout.tsx @@ -11,10 +11,17 @@ import { EuiFlyout, EuiFlyoutBody, EuiFlyoutHeader, + EuiFlyoutFooter, EuiPortal, - EuiText, + EuiFlexGroup, + EuiFlexItem, + EuiButtonEmpty, + EuiButton, EuiTitle, EuiLoadingSpinner, + EuiPopover, + EuiContextMenuItem, + EuiContextMenuPanel, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; @@ -31,10 +38,13 @@ interface Props { export const ReportInfoFlyout: FunctionComponent = ({ onClose, job }) => { const [isLoading, setIsLoading] = useState(true); const [loadingError, setLoadingError] = useState(); + const [isActionsPopoverOpen, setIsActionsPopoverOpen] = useState(false); const [info, setInfo] = useState(); const isMounted = useMountedState(); const { apiClient } = useInternalApiClient(); + const closePopover = () => setIsActionsPopoverOpen(false); + useEffect(() => { (async function loadInfo() { if (isLoading) { @@ -56,6 +66,40 @@ export const ReportInfoFlyout: FunctionComponent = ({ onClose, job }) => })(); }, [isLoading, apiClient, job.id, isMounted]); + const actionsButton = ( + setIsActionsPopoverOpen((isOpen) => !isOpen)}> + {i18n.translate('xpack.reporting.reportInfoFlyout.actionsButtonLabel', { + defaultMessage: 'Actions', + })} + + ); + + const actionItems = [ + { + apiClient.downloadReport(job.id); + }} + > + {i18n.translate('xpack.reporting.reportInfoFlyout.downloadButtonLabel', { + defaultMessage: 'Download', + })} + , + { + window.open(apiClient.getKibanaAppHref(job), '_blank'); + window.focus(); + }} + > + {i18n.translate('xpack.reporting.reportInfoFlyout.openInKibanaAppButtonLabel', { + defaultMessage: 'Open in Kibana App', + })} + , + ]; + return ( = ({ onClose, job }) => {isLoading ? ( ) : loadingError ? undefined : !!info ? ( - - - + ) : undefined} + {!isLoading && ( + + + + + {i18n.translate('xpack.reporting.listing.flyout.closeButtonLabel', { + defaultMessage: 'Close', + })} + + + + + + + + + + )} ); From b218605b86b2b8e3536124b352e2a2c7379491a3 Mon Sep 17 00:00:00 2001 From: Jean-Louis Leysens Date: Mon, 13 Dec 2021 19:21:40 +0100 Subject: [PATCH 16/19] create a little bit more breathing room for the section titles --- .../management/components/report_info_flyout_content.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/x-pack/plugins/reporting/public/management/components/report_info_flyout_content.tsx b/x-pack/plugins/reporting/public/management/components/report_info_flyout_content.tsx index 331e81621a813..4abfdeda1449a 100644 --- a/x-pack/plugins/reporting/public/management/components/report_info_flyout_content.tsx +++ b/x-pack/plugins/reporting/public/management/components/report_info_flyout_content.tsx @@ -185,11 +185,14 @@ export const ReportInfoFlyoutContent: FunctionComponent = ({ info }) => {

Output

 + +

Timestamps

 + ); From 0612c024010f7c242e868e7572e7ded491d68745 Mon Sep 17 00:00:00 2001 From: Jean-Louis Leysens Date: Mon, 13 Dec 2021 19:38:09 +0100 Subject: [PATCH 17/19] added logic to disable the action buttons in the flyout when the actions are not ready --- x-pack/plugins/reporting/public/lib/job.tsx | 8 ++++++++ .../management/components/report_info_flyout.tsx | 2 ++ .../reporting/public/management/report_listing.tsx | 11 +++-------- 3 files changed, 13 insertions(+), 8 deletions(-) diff --git a/x-pack/plugins/reporting/public/lib/job.tsx b/x-pack/plugins/reporting/public/lib/job.tsx index 77e6edb2270a2..99c609bfe607f 100644 --- a/x-pack/plugins/reporting/public/lib/job.tsx +++ b/x-pack/plugins/reporting/public/lib/job.tsx @@ -149,6 +149,14 @@ export class Job { ); } + public get canLinkToKibanaApp(): boolean { + return Boolean(this.locatorParams); + } + + public get isDownloadReady(): boolean { + return this.status === JOB_STATUSES.COMPLETED || this.status === JOB_STATUSES.WARNINGS; + } + public get prettyTimeout(): string { if (this.timeout == null) { return i18n.translate('xpack.reporting.jobStatusDetail.timeoutSecondsUnknown', { diff --git a/x-pack/plugins/reporting/public/management/components/report_info_flyout.tsx b/x-pack/plugins/reporting/public/management/components/report_info_flyout.tsx index a25622047eea6..3c6e030d11a70 100644 --- a/x-pack/plugins/reporting/public/management/components/report_info_flyout.tsx +++ b/x-pack/plugins/reporting/public/management/components/report_info_flyout.tsx @@ -78,6 +78,7 @@ export const ReportInfoFlyout: FunctionComponent = ({ onClose, job }) => { apiClient.downloadReport(job.id); }} @@ -87,6 +88,7 @@ export const ReportInfoFlyout: FunctionComponent = ({ onClose, job }) => })} , { diff --git a/x-pack/plugins/reporting/public/management/report_listing.tsx b/x-pack/plugins/reporting/public/management/report_listing.tsx index 2fb4f1cbc2028..fab6ff8ece89a 100644 --- a/x-pack/plugins/reporting/public/management/report_listing.tsx +++ b/x-pack/plugins/reporting/public/management/report_listing.tsx @@ -21,7 +21,7 @@ import { FormattedMessage } from '@kbn/i18n-react'; import { Component, default as React, Fragment } from 'react'; import { Subscription } from 'rxjs'; import { ILicense } from '../../../licensing/public'; -import { REPORT_TABLE_ID, REPORT_TABLE_ROW_ID, JOB_STATUSES } from '../../common/constants'; +import { REPORT_TABLE_ID, REPORT_TABLE_ROW_ID } from '../../common/constants'; import { prettyPrintJobType } from '../../common/job_utils'; import { Poller } from '../../common/poller'; import { durationToNumber } from '../../common/schema_utils'; @@ -31,7 +31,6 @@ import { checkLicense } from '../lib/license_check'; import { useInternalApiClient } from '../lib/reporting_api_client'; import { useKibana } from '../shared_imports'; import { ListingProps as Props } from './'; -import { PDF_JOB_TYPE_V2, PNG_JOB_TYPE_V2 } from '../../common/constants'; import { IlmPolicyLink, MigrateIlmPolicyCallOut, @@ -400,8 +399,7 @@ class ReportListingUi extends Component { defaultMessage: 'Download this report in a new tab.', }), onClick: (job) => this.props.apiClient.downloadReport(job.id), - enabled: (job) => - job.status === JOB_STATUSES.COMPLETED || job.status === JOB_STATUSES.WARNINGS, + enabled: (job) => job.isDownloadReady, }, { name: i18n.translate( @@ -431,10 +429,7 @@ class ReportListingUi extends Component { defaultMessage: 'Open the Kibana App where this report was generated.', } ), - available: (job) => - [PDF_JOB_TYPE_V2, PNG_JOB_TYPE_V2].some( - (linkableJobType) => linkableJobType === job.jobtype - ), + available: (job) => job.canLinkToKibanaApp, type: 'icon', icon: 'popout', onClick: (job) => { From d94957d882e4d8b975ece3f34280c32450301806 Mon Sep 17 00:00:00 2001 From: Jean-Louis Leysens Date: Tue, 14 Dec 2021 10:26:19 +0100 Subject: [PATCH 18/19] update copy per feedback --- .../components/report_info_flyout.tsx | 2 +- .../components/report_info_flyout_content.tsx | 20 +++++++++++++------ .../public/management/report_listing.tsx | 4 ++-- 3 files changed, 17 insertions(+), 9 deletions(-) diff --git a/x-pack/plugins/reporting/public/management/components/report_info_flyout.tsx b/x-pack/plugins/reporting/public/management/components/report_info_flyout.tsx index 3c6e030d11a70..bf6108d8ec993 100644 --- a/x-pack/plugins/reporting/public/management/components/report_info_flyout.tsx +++ b/x-pack/plugins/reporting/public/management/components/report_info_flyout.tsx @@ -97,7 +97,7 @@ export const ReportInfoFlyout: FunctionComponent = ({ onClose, job }) => }} > {i18n.translate('xpack.reporting.reportInfoFlyout.openInKibanaAppButtonLabel', { - defaultMessage: 'Open in Kibana App', + defaultMessage: 'Open in Kibana', })} , ]; diff --git a/x-pack/plugins/reporting/public/management/components/report_info_flyout_content.tsx b/x-pack/plugins/reporting/public/management/components/report_info_flyout_content.tsx index 4abfdeda1449a..03ad5ff033e18 100644 --- a/x-pack/plugins/reporting/public/management/components/report_info_flyout_content.tsx +++ b/x-pack/plugins/reporting/public/management/components/report_info_flyout_content.tsx @@ -97,7 +97,7 @@ export const ReportInfoFlyoutContent: FunctionComponent = ({ info }) => { hasScreenshot && { title: i18n.translate('xpack.reporting.listing.infoPanel.dimensionsInfoHeight', { - defaultMessage: 'Height (in pixels)', + defaultMessage: 'Height in pixels', }), description: info.layout?.dimensions?.height != null @@ -106,7 +106,7 @@ export const ReportInfoFlyoutContent: FunctionComponent = ({ info }) => { }, hasScreenshot && { title: i18n.translate('xpack.reporting.listing.infoPanel.dimensionsInfoWidth', { - defaultMessage: 'Width (in pixels)', + defaultMessage: 'Width in pixels', }), description: info.layout?.dimensions?.width != null ? Math.ceil(info.layout.dimensions.width) : UNKNOWN, @@ -182,15 +182,23 @@ export const ReportInfoFlyoutContent: FunctionComponent = ({ info }) => { )} - -

Output

+ +

+ {i18n.translate('xpack.reporting.listing.infoPanel.outputSectionTitle', { + defaultMessage: 'Output', + })} +

- -

Timestamps

+ +

+ {i18n.translate('xpack.reporting.listing.infoPanel.timestampSectionTitle', { + defaultMessage: 'Timestamps', + })} +

diff --git a/x-pack/plugins/reporting/public/management/report_listing.tsx b/x-pack/plugins/reporting/public/management/report_listing.tsx index fab6ff8ece89a..ccc5b97cd549f 100644 --- a/x-pack/plugins/reporting/public/management/report_listing.tsx +++ b/x-pack/plugins/reporting/public/management/report_listing.tsx @@ -420,13 +420,13 @@ class ReportListingUi extends Component { }, { name: i18n.translate('xpack.reporting.listing.table.openInKibanaAppLabel', { - defaultMessage: 'Open in Kibana App', + defaultMessage: 'Open in Kibana', }), 'data-test-subj': 'reportOpenInKibanaApp', description: i18n.translate( 'xpack.reporting.listing.table.openInKibanaAppDescription', { - defaultMessage: 'Open the Kibana App where this report was generated.', + defaultMessage: 'Open the Kibana app where this report was generated.', } ), available: (job) => job.canLinkToKibanaApp, From 72346b74dca72e15038da9221d63f5f3de4af836 Mon Sep 17 00:00:00 2001 From: Jean-Louis Leysens Date: Tue, 14 Dec 2021 11:04:13 +0100 Subject: [PATCH 19/19] added basic tests for the actions menu in the flyout --- .../__test__/report_listing.test.helpers.tsx | 25 +++++++- .../components/report_info_flyout.tsx | 8 ++- .../public/management/report_listing.test.ts | 57 ++++++++++++++++++- .../public/management/report_listing.tsx | 5 +- 4 files changed, 90 insertions(+), 5 deletions(-) diff --git a/x-pack/plugins/reporting/public/management/__test__/report_listing.test.helpers.tsx b/x-pack/plugins/reporting/public/management/__test__/report_listing.test.helpers.tsx index c7c1b48a04bc8..5c35569ee0cba 100644 --- a/x-pack/plugins/reporting/public/management/__test__/report_listing.test.helpers.tsx +++ b/x-pack/plugins/reporting/public/management/__test__/report_listing.test.helpers.tsx @@ -40,6 +40,7 @@ export interface TestDependencies { urlService: SharePluginSetup['url']; toasts: NotificationsSetup['toasts']; ilmLocator: LocatorPublic; + uiSettings: ReturnType['uiSettings']; } const mockPollConfig = { @@ -74,9 +75,10 @@ const createTestBed = registerTestBed( license$: l$, urlService, toasts, + uiSettings, ...rest }: Partial & TestDependencies) => ( - + ) => { license$, reportingAPIClient, ilmLocator, + uiSettings: uiSettingsClient, urlService: { locators: { get: () => ilmLocator, @@ -130,13 +133,29 @@ export const setup = async (props?: Partial) => { const { find, exists, component } = testBed; - return { + const api = { ...testBed, testDependencies, actions: { findListTable: () => find('reportJobListing'), hasIlmMigrationBanner: () => exists('migrateReportingIndicesPolicyCallOut'), hasIlmPolicyLink: () => exists('ilmPolicyLink'), + flyout: { + open: async (jobId: string) => { + await act(async () => { + find(`viewReportingLink${jobId}`).simulate('click'); + }); + component.update(); + }, + openActionsMenu: () => { + act(() => { + find('reportInfoFlyoutActionsButton').simulate('click'); + }); + component.update(); + }, + findDownloadButton: () => find('reportInfoFlyoutDownloadButton'), + findOpenInAppButton: () => find('reportInfoFlyoutOpenInKibanaButton'), + }, migrateIndices: async () => { await act(async () => { find('migrateReportingIndicesButton').simulate('click'); @@ -145,4 +164,6 @@ export const setup = async (props?: Partial) => { }, }, }; + + return api; }; diff --git a/x-pack/plugins/reporting/public/management/components/report_info_flyout.tsx b/x-pack/plugins/reporting/public/management/components/report_info_flyout.tsx index bf6108d8ec993..b2ac6a246a416 100644 --- a/x-pack/plugins/reporting/public/management/components/report_info_flyout.tsx +++ b/x-pack/plugins/reporting/public/management/components/report_info_flyout.tsx @@ -67,7 +67,11 @@ export const ReportInfoFlyout: FunctionComponent = ({ onClose, job }) => }, [isLoading, apiClient, job.id, isMounted]); const actionsButton = ( - setIsActionsPopoverOpen((isOpen) => !isOpen)}> + setIsActionsPopoverOpen((isOpen) => !isOpen)} + > {i18n.translate('xpack.reporting.reportInfoFlyout.actionsButtonLabel', { defaultMessage: 'Actions', })} @@ -76,6 +80,7 @@ export const ReportInfoFlyout: FunctionComponent = ({ onClose, job }) => const actionItems = [ = ({ onClose, job }) => })} , { let testBed: TestBed; - let applicationService: TestDependencies['application']; const runSetup = async (props?: Partial) => { @@ -73,6 +73,61 @@ describe('ReportListing', () => { ); }); + describe('flyout', () => { + let reportingAPIClient: TestDependencies['reportingAPIClient']; + let jobUnderTest: Job; + + beforeEach(async () => { + await runSetup(); + reportingAPIClient = testBed.testDependencies.reportingAPIClient; + jest.spyOn(reportingAPIClient, 'getInfo').mockResolvedValue(jobUnderTest); + }); + + afterEach(() => { + jest.clearAllMocks(); + }); + + it('shows the enabled "open in Kibana" button in the actions menu for v2 jobs', async () => { + const [jobJson] = mockJobs; + jobUnderTest = new Job(jobJson); + const { actions } = testBed; + + await actions.flyout.open(jobUnderTest.id); + actions.flyout.openActionsMenu(); + expect(actions.flyout.findOpenInAppButton().props().disabled).toBe(false); + }); + + it('shows the disabled "open in Kibana" button in the actions menu for pre-v2 jobs', async () => { + const [, jobJson] = mockJobs; + jobUnderTest = new Job(jobJson); + const { actions } = testBed; + + await actions.flyout.open(jobUnderTest.id); + actions.flyout.openActionsMenu(); + expect(actions.flyout.findOpenInAppButton().props().disabled).toBe(true); + }); + + it('shows the disabled "Download" button in the actions menu for a job that is not done', async () => { + const [jobJson] = mockJobs; + jobUnderTest = new Job(jobJson); + const { actions } = testBed; + + await actions.flyout.open(jobUnderTest.id); + actions.flyout.openActionsMenu(); + expect(actions.flyout.findDownloadButton().props().disabled).toBe(true); + }); + + it('shows the enabled "Download" button in the actions menu for a job is done', async () => { + const [, , jobJson] = mockJobs; + jobUnderTest = new Job(jobJson); + const { actions } = testBed; + + await actions.flyout.open(jobUnderTest.id); + actions.flyout.openActionsMenu(); + expect(actions.flyout.findDownloadButton().props().disabled).toBe(false); + }); + }); + describe('ILM policy', () => { let httpService: TestDependencies['http']; let urlService: TestDependencies['urlService']; diff --git a/x-pack/plugins/reporting/public/management/report_listing.tsx b/x-pack/plugins/reporting/public/management/report_listing.tsx index ccc5b97cd549f..f1f4a82fa5648 100644 --- a/x-pack/plugins/reporting/public/management/report_listing.tsx +++ b/x-pack/plugins/reporting/public/management/report_listing.tsx @@ -321,7 +321,10 @@ class ReportListingUi extends Component { render: (objectTitle: string, job) => { return (
- this.setState({ selectedJob: job })}> + this.setState({ selectedJob: job })} + > {objectTitle || i18n.translate('xpack.reporting.listing.table.noTitleLabel', { defaultMessage: 'Untitled',