[Reporting] Reporting info panel touch ups

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];
 

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';
@@ -38,6 +37,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 +68,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,34 +142,32 @@ export class Job {
     return null;
   }
 
-  getStatus() {
-    const statusLabel = jobStatusLabelsMap.get(this.status) as string;
-    const statusTimestamp = this.getStatusTimestamp();
+  public get prettyStatus(): string {
+    return (
+      jobStatusLabelsMap.get(this.status) ??
+      i18n.translate('xpack.reporting.jobStatusDetail.unknownText', { defaultMessage: 'Unknown' })
+    );
+  }
 
-    if (statusTimestamp) {
-      return (
-        <FormattedMessage
-          id="xpack.reporting.jobStatusDetail.statusTimestampText"
-          defaultMessage="{statusLabel} at {statusTimestamp}"
-          values={{
-            statusLabel,
-            statusTimestamp: (
-              <span className="eui-textNoWrap">{this.formatDate(statusTimestamp)}</span>
-            ),
-          }}
-        />
-      );
-    }
+  public get canLinkToKibanaApp(): boolean {
+    return Boolean(this.locatorParams);
+  }
 
-    return statusLabel;
+  public get isDownloadReady(): boolean {
+    return this.status === JOB_STATUSES.COMPLETED || this.status === JOB_STATUSES.WARNINGS;
   }
 
-  getStatusLabel() {
-    return (
-      <>
-        {this.getStatus()} {this.getStatusMessage()}
-      </>
-    );
+  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 },
+    });
   }
 
   /**

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<Props> = ({ onClose, job }) => {
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [loadingError, setLoadingError] = useState<undefined | Error>();
+  const [isActionsPopoverOpen, setIsActionsPopoverOpen] = useState<boolean>(false);
   const [info, setInfo] = useState<undefined | Job>();
   const isMounted = useMountedState();
   const { apiClient } = useInternalApiClient();
 
+  const closePopover = () => setIsActionsPopoverOpen(false);
+
   useEffect(() => {
     (async function loadInfo() {
       if (isLoading) {
@@ -56,6 +66,42 @@ export const ReportInfoFlyout: FunctionComponent<Props> = ({ onClose, job }) =>
     })();
   }, [isLoading, apiClient, job.id, isMounted]);
 
+  const actionsButton = (
+    <EuiButton iconType="arrowUp" onClick={() => setIsActionsPopoverOpen((isOpen) => !isOpen)}>
+      {i18n.translate('xpack.reporting.reportInfoFlyout.actionsButtonLabel', {
+        defaultMessage: 'Actions',
+      })}
+    </EuiButton>
+  );
+
+  const actionItems = [
+    <EuiContextMenuItem
+      key="download"
+      icon="download"
+      disabled={!job.isDownloadReady}
+      onClick={() => {
+        apiClient.downloadReport(job.id);
+      }}
+    >
+      {i18n.translate('xpack.reporting.reportInfoFlyout.downloadButtonLabel', {
+        defaultMessage: 'Download',
+      })}
+    </EuiContextMenuItem>,
+    <EuiContextMenuItem
+      disabled={!job.canLinkToKibanaApp}
+      key="openInKibanaApp"
+      icon="popout"
+      onClick={() => {
+        window.open(apiClient.getKibanaAppHref(job), '_blank');
+        window.focus();
+      }}
+    >
+      {i18n.translate('xpack.reporting.reportInfoFlyout.openInKibanaAppButtonLabel', {
+        defaultMessage: 'Open in Kibana App',
+      })}
+    </EuiContextMenuItem>,
+  ];
+
   return (
     <EuiPortal>
       <EuiFlyout
@@ -72,8 +118,9 @@ export const ReportInfoFlyout: FunctionComponent<Props> = ({ onClose, job }) =>
                 ? i18n.translate('xpack.reporting.listing.table.reportInfoUnableToFetch', {
                     defaultMessage: 'Unable to fetch report info.',
                   })
-                : i18n.translate('xpack.reporting.listing.table.reportCalloutTitle', {
-                    defaultMessage: 'Report info',
+                : info?.title ??
+                  i18n.translate('xpack.reporting.listing.table.untitledReport', {
+                    defaultMessage: 'Untitled report',
                   })}
             </h2>
           </EuiTitle>
@@ -82,11 +129,33 @@ export const ReportInfoFlyout: FunctionComponent<Props> = ({ onClose, job }) =>
           {isLoading ? (
             <EuiLoadingSpinner />
           ) : loadingError ? undefined : !!info ? (
-            <EuiText>
-              <ReportInfoFlyoutContent info={info} />
-            </EuiText>
+            <ReportInfoFlyoutContent info={info} />
           ) : undefined}
         </EuiFlyoutBody>
+        {!isLoading && (
+          <EuiFlyoutFooter>
+            <EuiFlexGroup gutterSize="none" justifyContent="spaceBetween">
+              <EuiFlexItem grow={false}>
+                <EuiButtonEmpty iconType="cross" flush="left" onClick={onClose}>
+                  {i18n.translate('xpack.reporting.listing.flyout.closeButtonLabel', {
+                    defaultMessage: 'Close',
+                  })}
+                </EuiButtonEmpty>
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiPopover
+                  id="reportInfoFlyoutActionsPopover"
+                  button={actionsButton}
+                  isOpen={isActionsPopoverOpen}
+                  closePopover={closePopover}
+                  panelPaddingSize="none"
+                >
+                  <EuiContextMenuPanel items={actionItems} />
+                </EuiPopover>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiFlyoutFooter>
+        )}
       </EuiFlyout>
     </EuiPortal>
   );