= ({ path, options, euiFieldProps }) => {
+ const [open, setOpen] = useState(false);
+
+ return (
+
+ {(field) => {
+ const onSelect = (option: string) => {
+ field.setValue(option);
+ setOpen(false);
+ };
+
+ return (
+ setOpen((x) => !x)}
+ data-test-subj="show-filters-button"
+ >
+ {options.find((x) => x.value === field.value)?.text}
+
+ }
+ ownFocus
+ panelPaddingSize="none"
+ isOpen={open}
+ closePopover={() => setOpen(false)}
+ {...euiFieldProps}
+ >
+ {options.map((item) => (
+ onSelect(item.value)}
+ data-test-subj={`filter-option-${item.value}`}
+ >
+ {item.text}
+
+ ))}
+
+ );
+ }}
+
+ );
+};
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/hot_phase/hot_phase.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/hot_phase/hot_phase.tsx
index 3c30c6d3a678fc..d6a36b99c20aa8 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/hot_phase/hot_phase.tsx
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/hot_phase/hot_phase.tsx
@@ -135,6 +135,7 @@ export const HotPhase: FunctionComponent = () => {
{showEmptyRolloverFieldsError && (
<>
{
+export function createMetricThresholdAlertType(): ObservabilityRuleTypeModel {
return {
id: METRIC_THRESHOLD_ALERT_TYPE_ID,
description: i18n.translate('xpack.infra.metrics.alertFlyout.alertDescription', {
@@ -44,5 +44,6 @@ Reason:
}
),
requiresAppContext: false,
+ format: formatReason,
};
}
diff --git a/x-pack/plugins/infra/public/alerting/metric_threshold/rule_data_formatters.ts b/x-pack/plugins/infra/public/alerting/metric_threshold/rule_data_formatters.ts
new file mode 100644
index 00000000000000..7a0140ab05652a
--- /dev/null
+++ b/x-pack/plugins/infra/public/alerting/metric_threshold/rule_data_formatters.ts
@@ -0,0 +1,19 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { ALERT_REASON } from '@kbn/rule-data-utils';
+import { ObservabilityRuleTypeFormatter } from '../../../../observability/public';
+
+export const formatReason: ObservabilityRuleTypeFormatter = ({ fields }) => {
+ const reason = fields[ALERT_REASON] ?? '-';
+ const link = '/app/metrics/explorer'; // TODO https://github.com/elastic/kibana/issues/106497 & https://github.com/elastic/kibana/issues/106958
+
+ return {
+ reason,
+ link,
+ };
+};
diff --git a/x-pack/plugins/infra/public/plugin.ts b/x-pack/plugins/infra/public/plugin.ts
index 3c22c1ad7a76dd..76e3e777e63788 100644
--- a/x-pack/plugins/infra/public/plugin.ts
+++ b/x-pack/plugins/infra/public/plugin.ts
@@ -41,8 +41,9 @@ export class Plugin implements InfraClientPluginClass {
pluginsSetup.observability.observabilityRuleTypeRegistry.register(
createLogThresholdAlertType()
);
- pluginsSetup.triggersActionsUi.ruleTypeRegistry.register(createMetricThresholdAlertType());
-
+ pluginsSetup.observability.observabilityRuleTypeRegistry.register(
+ createMetricThresholdAlertType()
+ );
pluginsSetup.observability.dashboard.register({
appName: 'infra_logs',
hasData: getLogsHasDataFetcher(core.getStartServices),
diff --git a/x-pack/plugins/infra/server/lib/adapters/framework/adapter_types.ts b/x-pack/plugins/infra/server/lib/adapters/framework/adapter_types.ts
index 0ec071b97d7cf6..f33bcd2fcab0ca 100644
--- a/x-pack/plugins/infra/server/lib/adapters/framework/adapter_types.ts
+++ b/x-pack/plugins/infra/server/lib/adapters/framework/adapter_types.ts
@@ -5,7 +5,7 @@
* 2.0.
*/
-import { GenericParams, SearchResponse } from 'elasticsearch';
+import type { estypes } from '@elastic/elasticsearch';
import { Lifecycle } from '@hapi/hapi';
import { UsageCollectionSetup } from 'src/plugins/usage_collection/server';
import { JsonArray, JsonValue } from '@kbn/common-utils';
@@ -38,7 +38,7 @@ export interface InfraServerPluginStartDeps {
data: DataPluginStart;
}
-export interface CallWithRequestParams extends GenericParams {
+export interface CallWithRequestParams extends estypes.RequestBase {
max_concurrent_shard_requests?: number;
name?: string;
index?: string | string[];
@@ -50,6 +50,7 @@ export interface CallWithRequestParams extends GenericParams {
path?: string;
query?: string | object;
track_total_hits?: boolean | number;
+ body?: any;
}
export type InfraResponse = Lifecycle.ReturnValue;
@@ -117,7 +118,7 @@ export interface InfraDatabaseGetIndicesResponse {
};
}
-export type SearchHit = SearchResponse
diff --git a/x-pack/plugins/reporting/public/lib/job.ts b/x-pack/plugins/reporting/public/lib/job.ts
deleted file mode 100644
index c882e8b92986bc..00000000000000
--- a/x-pack/plugins/reporting/public/lib/job.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import { JobId, ReportApiJSON, ReportSource, TaskRunResult } from '../../common/types';
-
-type ReportPayload = ReportSource['payload'];
-
-/*
- * This class represents a report job for the UI
- * It can be instantiated with ReportApiJSON: the response data format for the report job APIs
- */
-export class Job {
- public id: JobId;
- public index: string;
-
- public objectType: ReportPayload['objectType'];
- public title: ReportPayload['title'];
- public isDeprecated: ReportPayload['isDeprecated'];
- public browserTimezone?: ReportPayload['browserTimezone'];
- public layout: ReportPayload['layout'];
-
- public jobtype: ReportSource['jobtype'];
- public created_by: ReportSource['created_by'];
- public created_at: ReportSource['created_at'];
- public started_at: ReportSource['started_at'];
- public completed_at: ReportSource['completed_at'];
- public status: ReportSource['status'];
- public attempts: ReportSource['attempts'];
- public max_attempts: ReportSource['max_attempts'];
-
- public timeout: ReportSource['timeout'];
- public kibana_name: ReportSource['kibana_name'];
- public kibana_id: ReportSource['kibana_id'];
- public browser_type: ReportSource['browser_type'];
-
- public size?: TaskRunResult['size'];
- public content_type?: TaskRunResult['content_type'];
- public csv_contains_formulas?: TaskRunResult['csv_contains_formulas'];
- public max_size_reached?: TaskRunResult['max_size_reached'];
- public warnings?: TaskRunResult['warnings'];
-
- constructor(report: ReportApiJSON) {
- this.id = report.id;
- this.index = report.index;
-
- this.jobtype = report.jobtype;
- this.objectType = report.payload.objectType;
- this.title = report.payload.title;
- this.layout = report.payload.layout;
- this.created_by = report.created_by;
- this.created_at = report.created_at;
- this.started_at = report.started_at;
- this.completed_at = report.completed_at;
- this.status = report.status;
- this.attempts = report.attempts;
- this.max_attempts = report.max_attempts;
-
- this.timeout = report.timeout;
- this.kibana_name = report.kibana_name;
- this.kibana_id = report.kibana_id;
- this.browser_type = report.browser_type;
- this.browserTimezone = report.payload.browserTimezone;
- this.size = report.output?.size;
- this.content_type = report.output?.content_type;
-
- this.isDeprecated = report.payload.isDeprecated || false;
- this.csv_contains_formulas = report.output?.csv_contains_formulas;
- this.max_size_reached = report.output?.max_size_reached;
- this.warnings = report.output?.warnings;
- }
-}
diff --git a/x-pack/plugins/reporting/public/lib/job.tsx b/x-pack/plugins/reporting/public/lib/job.tsx
new file mode 100644
index 00000000000000..96967dc9226c90
--- /dev/null
+++ b/x-pack/plugins/reporting/public/lib/job.tsx
@@ -0,0 +1,269 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+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';
+import { JobId, ReportApiJSON, ReportSource, TaskRunResult } from '../../common/types';
+
+const { COMPLETED, FAILED, PENDING, PROCESSING, WARNINGS } = JOB_STATUSES;
+
+type ReportPayload = ReportSource['payload'];
+
+/*
+ * This class represents a report job for the UI
+ * It can be instantiated with ReportApiJSON: the response data format for the report job APIs
+ */
+export class Job {
+ public id: JobId;
+ public index: string;
+
+ public objectType: ReportPayload['objectType'];
+ public title: ReportPayload['title'];
+ public isDeprecated: ReportPayload['isDeprecated'];
+ public browserTimezone?: ReportPayload['browserTimezone'];
+ public layout: ReportPayload['layout'];
+
+ public jobtype: ReportSource['jobtype'];
+ public created_by: ReportSource['created_by'];
+ public created_at: ReportSource['created_at'];
+ public started_at: ReportSource['started_at'];
+ public completed_at: ReportSource['completed_at'];
+ public status: JOB_STATUSES; // FIXME: can not use ReportSource['status'] due to type mismatch
+ public attempts: ReportSource['attempts'];
+ public max_attempts: ReportSource['max_attempts'];
+
+ public timeout: ReportSource['timeout'];
+ public kibana_name: ReportSource['kibana_name'];
+ public kibana_id: ReportSource['kibana_id'];
+ public browser_type: ReportSource['browser_type'];
+
+ public size?: TaskRunResult['size'];
+ public content_type?: TaskRunResult['content_type'];
+ public csv_contains_formulas?: TaskRunResult['csv_contains_formulas'];
+ public max_size_reached?: TaskRunResult['max_size_reached'];
+ public warnings?: TaskRunResult['warnings'];
+
+ constructor(report: ReportApiJSON) {
+ this.id = report.id;
+ this.index = report.index;
+
+ this.jobtype = report.jobtype;
+ this.objectType = report.payload.objectType;
+ this.title = report.payload.title;
+ this.layout = report.payload.layout;
+ this.created_by = report.created_by;
+ this.created_at = report.created_at;
+ this.started_at = report.started_at;
+ this.completed_at = report.completed_at;
+ this.status = report.status as JOB_STATUSES;
+ this.attempts = report.attempts;
+ this.max_attempts = report.max_attempts;
+
+ this.timeout = report.timeout;
+ this.kibana_name = report.kibana_name;
+ this.kibana_id = report.kibana_id;
+ this.browser_type = report.browser_type;
+ this.browserTimezone = report.payload.browserTimezone;
+ this.size = report.output?.size;
+ this.content_type = report.output?.content_type;
+
+ this.isDeprecated = report.payload.isDeprecated || false;
+ this.csv_contains_formulas = report.output?.csv_contains_formulas;
+ this.max_size_reached = report.output?.max_size_reached;
+ this.warnings = report.output?.warnings;
+ }
+
+ getStatusMessage() {
+ const status = this.status;
+ let smallMessage;
+ if (status === PENDING) {
+ smallMessage = i18n.translate('xpack.reporting.jobStatusDetail.pendingStatusReachedText', {
+ defaultMessage: 'Waiting for job to be processed.',
+ });
+ } else if (status === PROCESSING) {
+ smallMessage = i18n.translate('xpack.reporting.jobStatusDetail.attemptXofY', {
+ defaultMessage: 'Attempt {attempts} of {max_attempts}.',
+ values: { attempts: this.attempts, max_attempts: this.max_attempts },
+ });
+ } else if (this.getWarnings()) {
+ smallMessage = i18n.translate('xpack.reporting.jobStatusDetail.warningsText', {
+ defaultMessage: 'See report info for warnings.',
+ });
+ } else if (this.getError()) {
+ smallMessage = i18n.translate('xpack.reporting.jobStatusDetail.errorText', {
+ defaultMessage: 'See report info for error details.',
+ });
+ }
+
+ if (smallMessage) {
+ return (
+
+ {smallMessage}
+
+ );
+ }
+
+ return null;
+ }
+
+ 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()}
+
+ );
+ }
+
+ getCreatedAtLabel() {
+ if (this.created_by) {
+ return (
+ <>
+ {this.formatDate(this.created_at)}
+ {this.created_by}
+
+ );
+ }
+ return this.formatDate(this.created_at);
+ }
+
+ /*
+ * We use `output.warnings` to show the error of a failed report job,
+ * and to show warnings of a job that completed with warnings.
+ */
+
+ // There is no error unless the status is 'failed'
+ getError() {
+ if (this.status === FAILED) {
+ return this.warnings;
+ }
+ }
+
+ getWarnings() {
+ if (this.status !== FAILED) {
+ const warnings: string[] = [];
+ if (this.isDeprecated) {
+ warnings.push(
+ i18n.translate('xpack.reporting.jobWarning.exportTypeDeprecated', {
+ defaultMessage:
+ 'This is a deprecated export type. Automation of this report will need to be re-created for compatibility with future versions of Kibana.',
+ })
+ );
+ }
+ if (this.csv_contains_formulas) {
+ warnings.push(
+ i18n.translate('xpack.reporting.jobWarning.csvContainsFormulas', {
+ defaultMessage:
+ 'Your CSV contains characters which spreadsheet applications can interpret as formulas.',
+ })
+ );
+ }
+ if (this.max_size_reached) {
+ warnings.push(
+ i18n.translate('xpack.reporting.jobWarning.maxSizeReachedTooltip', {
+ defaultMessage: 'Max size reached, contains partial data.',
+ })
+ );
+ }
+
+ if (this.warnings?.length) {
+ warnings.push(...this.warnings);
+ }
+
+ if (warnings.length) {
+ return (
+
+ {warnings.map((w, i) => {
+ return - {w}
;
+ })}
+
+ );
+ }
+ }
+ }
+
+ private formatDate(timestamp: string) {
+ try {
+ return moment(timestamp).format('YYYY-MM-DD @ hh:mm A');
+ } catch (error) {
+ // ignore parse error and display unformatted value
+ return timestamp;
+ }
+ }
+
+ private getStatusTimestamp() {
+ const status = this.status;
+ if (status === PROCESSING && this.started_at) {
+ return this.started_at;
+ }
+
+ if (this.completed_at && ([COMPLETED, FAILED, WARNINGS] as string[]).includes(status)) {
+ return this.completed_at;
+ }
+
+ return this.created_at;
+ }
+}
+
+const jobStatusLabelsMap = new Map([
+ [
+ PENDING,
+ i18n.translate('xpack.reporting.jobStatuses.pendingText', {
+ defaultMessage: 'Pending',
+ }),
+ ],
+ [
+ PROCESSING,
+ i18n.translate('xpack.reporting.jobStatuses.processingText', {
+ defaultMessage: 'Processing',
+ }),
+ ],
+ [
+ COMPLETED,
+ i18n.translate('xpack.reporting.jobStatuses.completedText', {
+ defaultMessage: 'Completed', // NOTE: a job is `completed` not `completed_with_warings` if it has reached max size or possibly contains csv characters
+ }),
+ ],
+ [
+ WARNINGS,
+ i18n.translate('xpack.reporting.jobStatuses.warningText', {
+ defaultMessage: 'Completed',
+ }),
+ ],
+ [
+ FAILED,
+ i18n.translate('xpack.reporting.jobStatuses.failedText', {
+ defaultMessage: 'Failed',
+ }),
+ ],
+]);
diff --git a/x-pack/plugins/reporting/public/lib/reporting_api_client/reporting_api_client.ts b/x-pack/plugins/reporting/public/lib/reporting_api_client/reporting_api_client.ts
index 90411884332c83..9396f232774960 100644
--- a/x-pack/plugins/reporting/public/lib/reporting_api_client/reporting_api_client.ts
+++ b/x-pack/plugins/reporting/public/lib/reporting_api_client/reporting_api_client.ts
@@ -5,6 +5,7 @@
* 2.0.
*/
+import { i18n } from '@kbn/i18n';
import { stringify } from 'query-string';
import rison from 'rison-node';
import { HttpSetup } from 'src/core/public';
@@ -19,11 +20,6 @@ import { DownloadReportFn, JobId, ManagementLinkFn, ReportApiJSON } from '../../
import { add } from '../../notifier/job_completion_notifications';
import { Job } from '../job';
-export interface JobContent {
- content: string;
- content_type: boolean;
-}
-
export interface DiagnoseResponse {
help: string[];
success: boolean;
@@ -46,7 +42,7 @@ interface IReportingAPI {
deleteReport(jobId: string): Promise;
list(page: number, jobIds: string[]): Promise; // gets the first 10 report of the page
total(): Promise;
- getError(jobId: string): Promise;
+ getError(jobId: string): Promise;
getInfo(jobId: string): Promise;
findForJobIds(jobIds: string[]): Promise;
@@ -108,8 +104,16 @@ export class ReportingAPIClient implements IReportingAPI {
}
public async getError(jobId: string) {
- return await this.http.get(`${API_LIST_URL}/output/${jobId}`, {
- asSystemRequest: true,
+ const job = await this.getInfo(jobId);
+
+ if (job.warnings?.[0]) {
+ // the error message of a failed report is a singular string in the warnings array
+ return job.warnings[0];
+ }
+
+ return i18n.translate('xpack.reporting.apiClient.unknownError', {
+ defaultMessage: `Report job {job} failed: Unknown error.`,
+ values: { job: jobId },
});
}
diff --git a/x-pack/plugins/reporting/public/lib/stream_handler.test.ts b/x-pack/plugins/reporting/public/lib/stream_handler.test.ts
index 58fde5cbd83adc..661370446011f1 100644
--- a/x-pack/plugins/reporting/public/lib/stream_handler.test.ts
+++ b/x-pack/plugins/reporting/public/lib/stream_handler.test.ts
@@ -27,11 +27,10 @@ const mockJobsFound: Job[] = [
].map((j) => new Job(j as ReportApiJSON)); // prettier-ignore
const jobQueueClientMock = new ReportingAPIClient(coreMock.createSetup().http);
-jobQueueClientMock.findForJobIds = async (jobIds: string[]) => mockJobsFound;
+jobQueueClientMock.findForJobIds = async () => mockJobsFound;
jobQueueClientMock.getInfo = () =>
Promise.resolve(({ content: 'this is the completed report data' } as unknown) as Job);
-jobQueueClientMock.getError = () =>
- Promise.resolve({ content: 'this is the completed report data' });
+jobQueueClientMock.getError = () => Promise.resolve('this is the failed report error');
jobQueueClientMock.getManagementLink = () => '/#management';
jobQueueClientMock.getDownloadLink = () => '/reporting/download/job-123';
diff --git a/x-pack/plugins/reporting/public/lib/stream_handler.ts b/x-pack/plugins/reporting/public/lib/stream_handler.ts
index 8e41d34d054ecb..304b4fb73374df 100644
--- a/x-pack/plugins/reporting/public/lib/stream_handler.ts
+++ b/x-pack/plugins/reporting/public/lib/stream_handler.ts
@@ -74,9 +74,9 @@ export class ReportingNotifierStreamHandler {
// no download link available
for (const job of failedJobs) {
- const { content } = await this.apiClient.getError(job.id);
+ const errorText = await this.apiClient.getError(job.id);
this.notifications.toasts.addDanger(
- getFailureToast(content, job, this.apiClient.getManagementLink)
+ getFailureToast(errorText, job, this.apiClient.getManagementLink)
);
}
return { completed: completedJobs, failed: failedJobs };
diff --git a/x-pack/plugins/reporting/public/management/__snapshots__/report_info_button.test.tsx.snap b/x-pack/plugins/reporting/public/management/__snapshots__/report_info_button.test.tsx.snap
index 3417aa59f9d725..4ab50750bbc528 100644
--- a/x-pack/plugins/reporting/public/management/__snapshots__/report_info_button.test.tsx.snap
+++ b/x-pack/plugins/reporting/public/management/__snapshots__/report_info_button.test.tsx.snap
@@ -176,7 +176,7 @@ Array [
className="euiTitle euiTitle--medium"
id="flyoutTitle"
>
- Job Info
+ Report info
@@ -226,7 +226,7 @@ Array [
className="euiTitle euiTitle--medium"
id="flyoutTitle"
>
- Job Info
+ Report info
diff --git a/x-pack/plugins/reporting/public/management/__snapshots__/report_listing.test.tsx.snap b/x-pack/plugins/reporting/public/management/__snapshots__/report_listing.test.tsx.snap
index d0ed2d737b5848..d78a09bc6af524 100644
--- a/x-pack/plugins/reporting/public/management/__snapshots__/report_listing.test.tsx.snap
+++ b/x-pack/plugins/reporting/public/management/__snapshots__/report_listing.test.tsx.snap
@@ -340,12 +340,14 @@ exports[`ReportListing Report job listing with some items 1`] = `
>
@@ -521,15 +524,47 @@ exports[`ReportListing Report job listing with some items 1`] = `
className="euiTableCellContent euiTableCellContent--overflowingContent"
>
+ 2020-04-14 @ 05:01 PM
+ ,
+ }
+ }
>
- Pending - waiting for job to be processed
+ Pending at
+
+ 2020-04-14 @ 05:01 PM
+
+
+
+
+
+ Waiting for job to be processed.
+
+
+
+
@@ -648,6 +683,7 @@ exports[`ReportListing Report job listing with some items 1`] = `
className="euiTableCellContent__hoverItem"
>
@@ -779,25 +815,7 @@ exports[`ReportListing Report job listing with some items 1`] = `
"timeZone": null,
}
}
- license$={
- Object {
- "subscribe": [Function],
- }
- }
- navigateToUrl={[MockFunction]}
- pollConfig={
- Object {
- "jobCompletionNotifier": Object {
- "interval": 5000,
- "intervalErrorMultiplier": 3,
- },
- "jobsRefresh": Object {
- "interval": 5000,
- "intervalErrorMultiplier": 3,
- },
- }
- }
- record={
+ job={
Job {
"attempts": 0,
"browserTimezone": "America/Phoenix",
@@ -831,6 +849,24 @@ exports[`ReportListing Report job listing with some items 1`] = `
"warnings": undefined,
}
}
+ license$={
+ Object {
+ "subscribe": [Function],
+ }
+ }
+ navigateToUrl={[MockFunction]}
+ pollConfig={
+ Object {
+ "jobCompletionNotifier": Object {
+ "interval": 5000,
+ "intervalErrorMultiplier": 3,
+ },
+ "jobsRefresh": Object {
+ "interval": 5000,
+ "intervalErrorMultiplier": 3,
+ },
+ }
+ }
redirect={[MockFunction]}
toasts={
Object {
@@ -852,7 +888,7 @@ exports[`ReportListing Report job listing with some items 1`] = `
}
}
/>
-
-
-
-
-
@@ -1652,12 +1351,14 @@ exports[`ReportListing Report job listing with some items 1`] = `
@@ -1833,14 +1535,15 @@ exports[`ReportListing Report job listing with some items 1`] = `
className="euiTableCellContent euiTableCellContent--overflowingContent"
>
@@ -1849,13 +1552,30 @@ exports[`ReportListing Report job listing with some items 1`] = `
}
}
>
- Processing (attempt 1 of 1) at
+ Processing at
2020-04-14 @ 05:01 PM
+
+
+
+
+ Attempt 1 of 1.
+
+
+
+
@@ -1974,6 +1694,7 @@ exports[`ReportListing Report job listing with some items 1`] = `
className="euiTableCellContent__hoverItem"
>
@@ -2105,25 +1826,7 @@ exports[`ReportListing Report job listing with some items 1`] = `
"timeZone": null,
}
}
- license$={
- Object {
- "subscribe": [Function],
- }
- }
- navigateToUrl={[MockFunction]}
- pollConfig={
- Object {
- "jobCompletionNotifier": Object {
- "interval": 5000,
- "intervalErrorMultiplier": 3,
- },
- "jobsRefresh": Object {
- "interval": 5000,
- "intervalErrorMultiplier": 3,
- },
- }
- }
- record={
+ job={
Job {
"attempts": 1,
"browserTimezone": "America/Phoenix",
@@ -2157,10 +1860,28 @@ exports[`ReportListing Report job listing with some items 1`] = `
"warnings": undefined,
}
}
- redirect={[MockFunction]}
- toasts={
+ license$={
Object {
- "add": [MockFunction],
+ "subscribe": [Function],
+ }
+ }
+ navigateToUrl={[MockFunction]}
+ pollConfig={
+ Object {
+ "jobCompletionNotifier": Object {
+ "interval": 5000,
+ "intervalErrorMultiplier": 3,
+ },
+ "jobsRefresh": Object {
+ "interval": 5000,
+ "intervalErrorMultiplier": 3,
+ },
+ }
+ }
+ redirect={[MockFunction]}
+ toasts={
+ Object {
+ "add": [MockFunction],
"addDanger": [MockFunction],
"addError": [MockFunction],
"addInfo": [MockFunction],
@@ -2178,7 +1899,7 @@ exports[`ReportListing Report job listing with some items 1`] = `
}
}
/>
-
-
-
-
-
@@ -2978,12 +2362,14 @@ exports[`ReportListing Report job listing with some items 1`] = `
@@ -3159,11 +2546,12 @@ exports[`ReportListing Report job listing with some items 1`] = `
className="euiTableCellContent euiTableCellContent--overflowingContent"
>
@@ -3431,25 +2820,7 @@ exports[`ReportListing Report job listing with some items 1`] = `
"timeZone": null,
}
}
- license$={
- Object {
- "subscribe": [Function],
- }
- }
- navigateToUrl={[MockFunction]}
- pollConfig={
- Object {
- "jobCompletionNotifier": Object {
- "interval": 5000,
- "intervalErrorMultiplier": 3,
- },
- "jobsRefresh": Object {
- "interval": 5000,
- "intervalErrorMultiplier": 3,
- },
- }
- }
- record={
+ job={
Job {
"attempts": 1,
"browserTimezone": "America/Phoenix",
@@ -3483,6 +2854,24 @@ exports[`ReportListing Report job listing with some items 1`] = `
"warnings": undefined,
}
}
+ license$={
+ Object {
+ "subscribe": [Function],
+ }
+ }
+ navigateToUrl={[MockFunction]}
+ pollConfig={
+ Object {
+ "jobCompletionNotifier": Object {
+ "interval": 5000,
+ "intervalErrorMultiplier": 3,
+ },
+ "jobsRefresh": Object {
+ "interval": 5000,
+ "intervalErrorMultiplier": 3,
+ },
+ }
+ }
redirect={[MockFunction]}
toasts={
Object {
@@ -3551,7 +2940,7 @@ exports[`ReportListing Report job listing with some items 1`] = `
-
-
-
-
-
@@ -4351,12 +3403,14 @@ exports[`ReportListing Report job listing with some items 1`] = `
@@ -4532,14 +3587,15 @@ exports[`ReportListing Report job listing with some items 1`] = `
className="euiTableCellContent euiTableCellContent--overflowingContent"
>
@@ -4548,7 +3604,7 @@ exports[`ReportListing Report job listing with some items 1`] = `
}
}
>
- Completed with warnings at
+ Completed at
@@ -4567,13 +3623,7 @@ exports[`ReportListing Report job listing with some items 1`] = `
-
- Errors occurred: see job info for details.
-
+ See report info for warnings.
@@ -4700,6 +3750,7 @@ exports[`ReportListing Report job listing with some items 1`] = `
className="euiTableCellContent__hoverItem"
>
@@ -4831,25 +3882,7 @@ exports[`ReportListing Report job listing with some items 1`] = `
"timeZone": null,
}
}
- license$={
- Object {
- "subscribe": [Function],
- }
- }
- navigateToUrl={[MockFunction]}
- pollConfig={
- Object {
- "jobCompletionNotifier": Object {
- "interval": 5000,
- "intervalErrorMultiplier": 3,
- },
- "jobsRefresh": Object {
- "interval": 5000,
- "intervalErrorMultiplier": 3,
- },
- }
- }
- record={
+ job={
Job {
"attempts": 1,
"browserTimezone": "America/Phoenix",
@@ -4885,6 +3918,24 @@ exports[`ReportListing Report job listing with some items 1`] = `
],
}
}
+ license$={
+ Object {
+ "subscribe": [Function],
+ }
+ }
+ navigateToUrl={[MockFunction]}
+ pollConfig={
+ Object {
+ "jobCompletionNotifier": Object {
+ "interval": 5000,
+ "intervalErrorMultiplier": 3,
+ },
+ "jobsRefresh": Object {
+ "interval": 5000,
+ "intervalErrorMultiplier": 3,
+ },
+ }
+ }
redirect={[MockFunction]}
toasts={
Object {
@@ -4907,7 +3958,7 @@ exports[`ReportListing Report job listing with some items 1`] = `
}
>
@@ -4953,7 +4004,7 @@ exports[`ReportListing Report job listing with some items 1`] = `
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- |
-
- |
-
-
-
-
- Report
-
-
-
-
- My Canvas Workpad
-
-
-
-
-
- canvas workpad
-
-
-
-
-
- |
-
-
-
-
- Created at
-
-
-
-
- 2020-04-14 @ 01:19 PM
-
-
- elastic
-
-
- |
-
-
-
-
- Status
-
-
-
-
- 2020-04-14 @ 01:19 PM
- ,
- }
- }
- >
- Completed at
-
- 2020-04-14 @ 01:19 PM
-
-
-
- |
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- |
-
-
-
-
-
-
- |
-
- |
-
-
-
-
- Report
-
-
-
-
- My Canvas Workpad
-
-
-
-
-
- canvas workpad
-
-
-
-
-
- |
-
-
-
-
- Created at
-
-
-
-
- 2020-04-14 @ 01:19 PM
-
-
- elastic
-
-
- |
-
-
-
-
- Status
-
-
-
-
- 2020-04-14 @ 01:19 PM
- ,
- }
- }
- >
- Completed at
-
- 2020-04-14 @ 01:19 PM
-
-
-
- |
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
@@ -8455,16 +4423,16 @@ exports[`ReportListing Report job listing with some items 1`] = `
>
|
|
-
- My Canvas Workpad
-
-
-
-
-
- canvas workpad
-
-
-
-
-
-
- |
-
-
-
-
- Created at
-
-
-
-
- 2020-04-14 @ 01:17 PM
-
-
- elastic
-
-
- |
-
-
-
-
- Status
-
-
-
-
- 2020-04-14 @ 01:18 PM
- ,
- }
- }
- >
- Completed at
-
- 2020-04-14 @ 01:18 PM
-
-
-
- |
-
-
-
-
-
-
+ My Canvas Workpad
+
-
-
+
-
-
-
-
-
-
-
-
-
+
+
+
+ |
+
+
+
+
+ Created at
+
+
+
+
+ 2020-04-14 @ 01:19 PM
+
+
+ elastic
+
+
+ |
+
+
+
+
+ Status
+
+
+
+
+ 2020-04-14 @ 01:19 PM
+ ,
+ }
+ }
+ >
+ Completed at
+
+ 2020-04-14 @ 01:19 PM
+
+
+
+ |
+
+
+
+
+
+
+
+
+
-
-
+ }
+ >
+
+
+
+
+
+
+
+
@@ -9876,15 +5512,17 @@ exports[`ReportListing Report job listing with some items 1`] = `
|
- 2020-04-14 @ 01:12 PM
+ 2020-04-14 @ 01:19 PM
elastic
@@ -10030,7 +5669,7 @@ exports[`ReportListing Report job listing with some items 1`] = `
- 2020-04-14 @ 01:13 PM
+ 2020-04-14 @ 01:19 PM
,
}
}
@@ -10077,7 +5717,7 @@ exports[`ReportListing Report job listing with some items 1`] = `
- 2020-04-14 @ 01:13 PM
+ 2020-04-14 @ 01:19 PM
@@ -10087,7 +5727,7 @@ exports[`ReportListing Report job listing with some items 1`] = `
@@ -10117,12 +5757,12 @@ exports[`ReportListing Report job listing with some items 1`] = `
"attempts": 1,
"browserTimezone": "America/Phoenix",
"browser_type": "chromium",
- "completed_at": "2020-04-14T17:13:03.719Z",
+ "completed_at": "2020-04-14T17:19:36.822Z",
"content_type": "application/pdf",
- "created_at": "2020-04-14T17:12:51.985Z",
+ "created_at": "2020-04-14T17:19:23.578Z",
"created_by": "elastic",
"csv_contains_formulas": undefined,
- "id": "k905zdw11d34cbae0c3y6tzh",
+ "id": "k9067s1m1d4wcbae0cdnvcms",
"index": ".reporting-2020.04.12",
"isDeprecated": false,
"jobtype": "printable_pdf",
@@ -10139,14 +5779,14 @@ exports[`ReportListing Report job listing with some items 1`] = `
"max_size_reached": undefined,
"objectType": "canvas workpad",
"size": 80262,
- "started_at": "2020-04-14T17:12:52.431Z",
+ "started_at": "2020-04-14T17:19:25.247Z",
"status": "completed",
"timeout": 300000,
"title": "My Canvas Workpad",
"warnings": undefined,
}
}
- itemId="k905zdw11d34cbae0c3y6tzh"
+ itemId="k9067s1m1d4wcbae0cdnvcms"
key=".0"
>
@@ -10329,127 +5970,920 @@ exports[`ReportListing Report job listing with some items 1`] = `
"timeZone": null,
}
}
+ job={
+ Job {
+ "attempts": 1,
+ "browserTimezone": "America/Phoenix",
+ "browser_type": "chromium",
+ "completed_at": "2020-04-14T17:19:36.822Z",
+ "content_type": "application/pdf",
+ "created_at": "2020-04-14T17:19:23.578Z",
+ "created_by": "elastic",
+ "csv_contains_formulas": undefined,
+ "id": "k9067s1m1d4wcbae0cdnvcms",
+ "index": ".reporting-2020.04.12",
+ "isDeprecated": false,
+ "jobtype": "printable_pdf",
+ "kibana_id": "5b2de169-2785-441b-ae8c-186a1936b17d",
+ "kibana_name": "spicy.local",
+ "layout": Object {
+ "dimensions": Object {
+ "height": 720,
+ "width": 1080,
+ },
+ "id": "preserve_layout",
+ },
+ "max_attempts": 1,
+ "max_size_reached": undefined,
+ "objectType": "canvas workpad",
+ "size": 80262,
+ "started_at": "2020-04-14T17:19:25.247Z",
+ "status": "completed",
+ "timeout": 300000,
+ "title": "My Canvas Workpad",
+ "warnings": undefined,
+ }
+ }
+ license$={
+ Object {
+ "subscribe": [Function],
+ }
+ }
+ navigateToUrl={[MockFunction]}
+ pollConfig={
+ Object {
+ "jobCompletionNotifier": Object {
+ "interval": 5000,
+ "intervalErrorMultiplier": 3,
+ },
+ "jobsRefresh": Object {
+ "interval": 5000,
+ "intervalErrorMultiplier": 3,
+ },
+ }
+ }
+ redirect={[MockFunction]}
+ toasts={
+ Object {
+ "add": [MockFunction],
+ "addDanger": [MockFunction],
+ "addError": [MockFunction],
+ "addInfo": [MockFunction],
+ "addSuccess": [MockFunction],
+ "addWarning": [MockFunction],
+ "get$": [MockFunction],
+ "remove": [MockFunction],
+ }
+ }
+ urlService={
+ Object {
+ "locators": Object {
+ "get": [Function],
+ },
+ }
+ }
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ |
+
+
+
+
+
+
+ |
+
+ |
+
+
+
+
+ Report
+
+
+
+
+ My Canvas Workpad
+
+
+
+
+
-
-
-
-
-
-
-
-
-
+
+
+
+
+ |
+
+
+
+
+ Created at
+
+
+
+
+ 2020-04-14 @ 01:17 PM
+
+
+ elastic
+
+
+ |
+
+
+
+
+ Status
+
+
+
+
+ 2020-04-14 @ 01:18 PM
+ ,
+ }
+ }
+ >
+ Completed at
+
+ 2020-04-14 @ 01:18 PM
+
+
+
+ |
+
+
+
+
+
+
+
+
+
-
-
+ }
+ >
+
+
+
+
+
+
+
+
@@ -11249,15 +7594,17 @@ exports[`ReportListing Report job listing with some items 1`] = `
|
|
- count
+ My Canvas Workpad
- visualization
+ canvas workpad
@@ -11362,7 +7709,7 @@ exports[`ReportListing Report job listing with some items 1`] = `
- 2020-04-09 @ 03:09 PM
+ 2020-04-14 @ 01:12 PM
elastic
@@ -11403,7 +7751,7 @@ exports[`ReportListing Report job listing with some items 1`] = `
- 2020-04-09 @ 03:10 PM
+ 2020-04-14 @ 01:13 PM
,
}
}
@@ -11450,7 +7799,7 @@ exports[`ReportListing Report job listing with some items 1`] = `
- 2020-04-09 @ 03:10 PM
+ 2020-04-14 @ 01:13 PM
@@ -11460,7 +7809,7 @@ exports[`ReportListing Report job listing with some items 1`] = `
@@ -11490,36 +7839,36 @@ exports[`ReportListing Report job listing with some items 1`] = `
"attempts": 1,
"browserTimezone": "America/Phoenix",
"browser_type": "chromium",
- "completed_at": "2020-04-09T19:10:10.049Z",
- "content_type": "image/png",
- "created_at": "2020-04-09T19:09:52.139Z",
+ "completed_at": "2020-04-14T17:13:03.719Z",
+ "content_type": "application/pdf",
+ "created_at": "2020-04-14T17:12:51.985Z",
"created_by": "elastic",
"csv_contains_formulas": undefined,
- "id": "k8t4ylcb07mi9d006214ifyg",
- "index": ".reporting-2020.04.05",
+ "id": "k905zdw11d34cbae0c3y6tzh",
+ "index": ".reporting-2020.04.12",
"isDeprecated": false,
- "jobtype": "PNG",
- "kibana_id": "f2e59b4e-f79b-4a48-8a7d-6d50a3c1d914",
+ "jobtype": "printable_pdf",
+ "kibana_id": "5b2de169-2785-441b-ae8c-186a1936b17d",
"kibana_name": "spicy.local",
"layout": Object {
"dimensions": Object {
- "height": 1575,
- "width": 1423,
+ "height": 720,
+ "width": 1080,
},
- "id": "png",
+ "id": "preserve_layout",
},
"max_attempts": 1,
"max_size_reached": undefined,
- "objectType": "visualization",
- "size": 123456789,
- "started_at": "2020-04-09T19:09:54.570Z",
+ "objectType": "canvas workpad",
+ "size": 80262,
+ "started_at": "2020-04-14T17:12:52.431Z",
"status": "completed",
"timeout": 300000,
- "title": "count",
+ "title": "My Canvas Workpad",
"warnings": undefined,
}
}
- itemId="k8t4ylcb07mi9d006214ifyg"
+ itemId="k905zdw11d34cbae0c3y6tzh"
key=".0"
>
@@ -11702,127 +8052,920 @@ exports[`ReportListing Report job listing with some items 1`] = `
"timeZone": null,
}
}
+ job={
+ Job {
+ "attempts": 1,
+ "browserTimezone": "America/Phoenix",
+ "browser_type": "chromium",
+ "completed_at": "2020-04-14T17:13:03.719Z",
+ "content_type": "application/pdf",
+ "created_at": "2020-04-14T17:12:51.985Z",
+ "created_by": "elastic",
+ "csv_contains_formulas": undefined,
+ "id": "k905zdw11d34cbae0c3y6tzh",
+ "index": ".reporting-2020.04.12",
+ "isDeprecated": false,
+ "jobtype": "printable_pdf",
+ "kibana_id": "5b2de169-2785-441b-ae8c-186a1936b17d",
+ "kibana_name": "spicy.local",
+ "layout": Object {
+ "dimensions": Object {
+ "height": 720,
+ "width": 1080,
+ },
+ "id": "preserve_layout",
+ },
+ "max_attempts": 1,
+ "max_size_reached": undefined,
+ "objectType": "canvas workpad",
+ "size": 80262,
+ "started_at": "2020-04-14T17:12:52.431Z",
+ "status": "completed",
+ "timeout": 300000,
+ "title": "My Canvas Workpad",
+ "warnings": undefined,
+ }
+ }
+ license$={
+ Object {
+ "subscribe": [Function],
+ }
+ }
+ navigateToUrl={[MockFunction]}
+ pollConfig={
+ Object {
+ "jobCompletionNotifier": Object {
+ "interval": 5000,
+ "intervalErrorMultiplier": 3,
+ },
+ "jobsRefresh": Object {
+ "interval": 5000,
+ "intervalErrorMultiplier": 3,
+ },
+ }
+ }
+ redirect={[MockFunction]}
+ toasts={
+ Object {
+ "add": [MockFunction],
+ "addDanger": [MockFunction],
+ "addError": [MockFunction],
+ "addInfo": [MockFunction],
+ "addSuccess": [MockFunction],
+ "addWarning": [MockFunction],
+ "get$": [MockFunction],
+ "remove": [MockFunction],
+ }
+ }
+ urlService={
+ Object {
+ "locators": Object {
+ "get": [Function],
+ },
+ }
+ }
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ |
+
+
+
+
+
+
+ |
+
+ |
+
+
+
+
+ Report
+
+
+
+
+ count
+
+
+
+
+
-
-
-
-
-
-
-
-
-
+
+
+
+
+ |
+
+
+
+
+ Created at
+
+
+
+
+ 2020-04-09 @ 03:09 PM
+
+
+ elastic
+
+
+ |
+
+
+
+
+ Status
+
+
+
+
+ 2020-04-09 @ 03:10 PM
+ ,
+ }
+ }
+ >
+ Completed at
+
+ 2020-04-09 @ 03:10 PM
+
+
+
+ |
+
+
+
+
+
+
+
+
+
-
-
+ }
+ >
+
+
+
+
+
+
+
+
diff --git a/x-pack/plugins/reporting/public/management/index.ts b/x-pack/plugins/reporting/public/management/index.ts
index c107993ef3074f..4d324135288dbc 100644
--- a/x-pack/plugins/reporting/public/management/index.ts
+++ b/x-pack/plugins/reporting/public/management/index.ts
@@ -5,7 +5,25 @@
* 2.0.
*/
-export { ReportErrorButton } from './report_error_button';
-export { ReportDeleteButton } from './report_delete_button';
-export { ReportDownloadButton } from './report_download_button';
-export { ReportInfoButton } from './report_info_button';
+import { InjectedIntl } from '@kbn/i18n/react';
+import { ApplicationStart, ToastsSetup } from 'src/core/public';
+import { LicensingPluginSetup } from '../../../licensing/public';
+import { UseIlmPolicyStatusReturn } from '../lib/ilm_policy_status_context';
+import { ReportingAPIClient } from '../lib/reporting_api_client';
+import { ClientConfigType } from '../plugin';
+import type { SharePluginSetup } from '../shared_imports';
+
+export interface ListingProps {
+ intl: InjectedIntl;
+ apiClient: ReportingAPIClient;
+ capabilities: ApplicationStart['capabilities'];
+ license$: LicensingPluginSetup['license$']; // FIXME: license$ is deprecated
+ pollConfig: ClientConfigType['poll'];
+ redirect: ApplicationStart['navigateToApp'];
+ navigateToUrl: ApplicationStart['navigateToUrl'];
+ toasts: ToastsSetup;
+ urlService: SharePluginSetup['url'];
+ ilmPolicyContextValue: UseIlmPolicyStatusReturn;
+}
+
+export { ReportListing } from './report_listing';
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 20ea2988f3b8b8..0f0c06f8302059 100644
--- a/x-pack/plugins/reporting/public/management/mount_management_section.tsx
+++ b/x-pack/plugins/reporting/public/management/mount_management_section.tsx
@@ -16,7 +16,7 @@ import { IlmPolicyStatusContextProvider } from '../lib/ilm_policy_status_context
import { ClientConfigType } from '../plugin';
import type { ManagementAppMountParams, SharePluginSetup } from '../shared_imports';
import { KibanaContextProvider } from '../shared_imports';
-import { ReportListing } from './report_listing';
+import { ReportListing } from '.';
export async function mountManagementSection(
coreSetup: CoreSetup,
diff --git a/x-pack/plugins/reporting/public/management/report_delete_button.tsx b/x-pack/plugins/reporting/public/management/report_delete_button.tsx
index 7009a653c1bf60..da1ce9dd9e1cb6 100644
--- a/x-pack/plugins/reporting/public/management/report_delete_button.tsx
+++ b/x-pack/plugins/reporting/public/management/report_delete_button.tsx
@@ -8,7 +8,7 @@
import { EuiButton, EuiConfirmModal } from '@elastic/eui';
import React, { Fragment, PureComponent } from 'react';
import { Job } from '../lib/job';
-import { Props as ListingProps } from './report_listing';
+import { ListingProps } from './';
type DeleteFn = () => Promise;
type Props = { jobsToDelete: Job[]; performDelete: DeleteFn } & ListingProps;
diff --git a/x-pack/plugins/reporting/public/management/report_download_button.tsx b/x-pack/plugins/reporting/public/management/report_download_button.tsx
index b4212710377224..f21c83fbf42da5 100644
--- a/x-pack/plugins/reporting/public/management/report_download_button.tsx
+++ b/x-pack/plugins/reporting/public/management/report_download_button.tsx
@@ -6,23 +6,28 @@
*/
import { EuiButtonIcon, EuiToolTip } from '@elastic/eui';
+import { InjectedIntl } from '@kbn/i18n/react';
import React, { FunctionComponent } from 'react';
import { JOB_STATUSES } from '../../common/constants';
import { Job as ListingJob } from '../lib/job';
-import { Props as ListingProps } from './report_listing';
+import { ReportingAPIClient } from '../lib/reporting_api_client';
-type Props = { record: ListingJob } & ListingProps;
+interface Props {
+ intl: InjectedIntl;
+ apiClient: ReportingAPIClient;
+ job: ListingJob;
+}
export const ReportDownloadButton: FunctionComponent = (props: Props) => {
- const { record, apiClient, intl } = props;
+ const { job, apiClient, intl } = props;
- if (record.status !== JOB_STATUSES.COMPLETED && record.status !== JOB_STATUSES.WARNINGS) {
+ if (job.status !== JOB_STATUSES.COMPLETED && job.status !== JOB_STATUSES.WARNINGS) {
return null;
}
const button = (
apiClient.downloadReport(record.id)}
+ onClick={() => apiClient.downloadReport(job.id)}
iconType="importAction"
aria-label={intl.formatMessage({
id: 'xpack.reporting.listing.table.downloadReportAriaLabel',
@@ -31,28 +36,14 @@ export const ReportDownloadButton: FunctionComponent = (props: Props) =>
/>
);
- if (record.csv_contains_formulas) {
+ const warnings = job.getWarnings();
+ if (warnings) {
return (
- {button}
-
- );
- }
-
- if (record.max_size_reached) {
- return (
-
{button}
diff --git a/x-pack/plugins/reporting/public/management/report_error_button.tsx b/x-pack/plugins/reporting/public/management/report_error_button.tsx
deleted file mode 100644
index ee0c0e162cb7d0..00000000000000
--- a/x-pack/plugins/reporting/public/management/report_error_button.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import { EuiButtonIcon, EuiCallOut, EuiPopover } from '@elastic/eui';
-import { InjectedIntl, injectI18n } from '@kbn/i18n/react';
-import React, { Component } from 'react';
-import { JOB_STATUSES } from '../../common/constants';
-import { Job as ListingJob } from '../lib/job';
-import { JobContent, ReportingAPIClient } from '../lib/reporting_api_client';
-
-interface Props {
- intl: InjectedIntl;
- apiClient: ReportingAPIClient;
- record: ListingJob;
-}
-
-interface State {
- isLoading: boolean;
- isPopoverOpen: boolean;
- calloutTitle: string;
- error?: string;
-}
-
-class ReportErrorButtonUi extends Component {
- private mounted?: boolean;
-
- constructor(props: Props) {
- super(props);
-
- this.state = {
- isLoading: false,
- isPopoverOpen: false,
- calloutTitle: props.intl.formatMessage({
- id: 'xpack.reporting.errorButton.unableToGenerateReportTitle',
- defaultMessage: 'Unable to generate report',
- }),
- };
- }
-
- public render() {
- const { record, intl } = this.props;
-
- if (record.status !== JOB_STATUSES.FAILED) {
- return null;
- }
-
- const button = (
-
- );
-
- return (
-
-
- {this.state.error}
-
-
- );
- }
-
- public componentWillUnmount() {
- this.mounted = false;
- }
-
- public componentDidMount() {
- this.mounted = true;
- }
-
- private togglePopover = () => {
- this.setState((prevState) => {
- return { isPopoverOpen: !prevState.isPopoverOpen };
- });
-
- if (!this.state.error) {
- this.loadError();
- }
- };
-
- private closePopover = () => {
- this.setState({ isPopoverOpen: false });
- };
-
- private loadError = async () => {
- const { record, apiClient, intl } = this.props;
-
- this.setState({ isLoading: true });
- try {
- const reportContent: JobContent = await apiClient.getError(record.id);
- if (this.mounted) {
- this.setState({ isLoading: false, error: reportContent.content });
- }
- } catch (kfetchError) {
- if (this.mounted) {
- this.setState({
- isLoading: false,
- calloutTitle: intl.formatMessage({
- id: 'xpack.reporting.errorButton.unableToFetchReportContentTitle',
- defaultMessage: 'Unable to fetch report content',
- }),
- error: kfetchError.message,
- });
- }
- }
- };
-}
-
-export const ReportErrorButton = injectI18n(ReportErrorButtonUi);
diff --git a/x-pack/plugins/reporting/public/management/report_info_button.test.tsx b/x-pack/plugins/reporting/public/management/report_info_button.test.tsx
index 119856042a3266..147e18410200bc 100644
--- a/x-pack/plugins/reporting/public/management/report_info_button.test.tsx
+++ b/x-pack/plugins/reporting/public/management/report_info_button.test.tsx
@@ -7,6 +7,7 @@
import React from 'react';
import { mountWithIntl } from '@kbn/test/jest';
+import { Job } from '../lib/job';
import { ReportInfoButton } from './report_info_button';
jest.mock('../lib/reporting_api_client');
@@ -15,16 +16,37 @@ import { ReportingAPIClient } from '../lib/reporting_api_client';
const httpSetup = {} as any;
const apiClient = new ReportingAPIClient(httpSetup);
+const job = new Job({
+ id: 'abc-123',
+ index: '.reporting-2020.04.12',
+ migration_version: '7.15.0',
+ attempts: 0,
+ browser_type: 'chromium',
+ created_at: '2020-04-14T21:01:13.064Z',
+ created_by: 'elastic',
+ jobtype: 'printable_pdf',
+ max_attempts: 1,
+ meta: { layout: 'preserve_layout', objectType: 'canvas workpad' },
+ payload: {
+ browserTimezone: 'America/Phoenix',
+ layout: { dimensions: { height: 720, width: 1080 }, id: 'preserve_layout' },
+ objectType: 'canvas workpad',
+ title: 'My Canvas Workpad',
+ },
+ process_expiration: '1970-01-01T00:00:00.000Z',
+ status: 'pending',
+ timeout: 300000,
+});
describe('ReportInfoButton', () => {
it('handles button click flyout on click', () => {
- const wrapper = mountWithIntl();
+ const wrapper = mountWithIntl();
const input = wrapper.find('[data-test-subj="reportInfoButton"]').hostNodes();
expect(input).toMatchSnapshot();
});
it('opens flyout with info', async () => {
- const wrapper = mountWithIntl();
+ const wrapper = mountWithIntl();
const input = wrapper.find('[data-test-subj="reportInfoButton"]').hostNodes();
input.simulate('click');
@@ -33,7 +55,7 @@ describe('ReportInfoButton', () => {
expect(flyout).toMatchSnapshot();
expect(apiClient.getInfo).toHaveBeenCalledTimes(1);
- expect(apiClient.getInfo).toHaveBeenCalledWith('abc-456');
+ expect(apiClient.getInfo).toHaveBeenCalledWith('abc-123');
});
it('opens flyout with fetch error info', () => {
@@ -42,7 +64,7 @@ describe('ReportInfoButton', () => {
throw new Error('Could not fetch the job info');
});
- const wrapper = mountWithIntl();
+ const wrapper = mountWithIntl();
const input = wrapper.find('[data-test-subj="reportInfoButton"]').hostNodes();
input.simulate('click');
@@ -51,6 +73,6 @@ describe('ReportInfoButton', () => {
expect(flyout).toMatchSnapshot();
expect(apiClient.getInfo).toHaveBeenCalledTimes(1);
- expect(apiClient.getInfo).toHaveBeenCalledWith('abc-789');
+ expect(apiClient.getInfo).toHaveBeenCalledWith('abc-123');
});
});
diff --git a/x-pack/plugins/reporting/public/management/report_info_button.tsx b/x-pack/plugins/reporting/public/management/report_info_button.tsx
index 92acaa386bd568..8513558fb89ccc 100644
--- a/x-pack/plugins/reporting/public/management/report_info_button.tsx
+++ b/x-pack/plugins/reporting/public/management/report_info_button.tsx
@@ -22,11 +22,11 @@ import React, { Component } from 'react';
import { USES_HEADLESS_JOB_TYPES } from '../../common/constants';
import { Job } from '../lib/job';
import { ReportingAPIClient } from '../lib/reporting_api_client';
-import { Props as ListingProps } from './report_listing';
+import { ListingProps } from '.';
interface Props extends Pick {
- jobId: string;
apiClient: ReportingAPIClient;
+ job: Job;
}
interface State {
@@ -58,7 +58,10 @@ class ReportInfoButtonUi extends Component {
this.state = {
isLoading: false,
isFlyoutVisible: false,
- calloutTitle: 'Job Info',
+ calloutTitle: props.intl.formatMessage({
+ id: 'xpack.reporting.listing.table.reportCalloutTitle',
+ defaultMessage: 'Report info',
+ }),
info: null,
error: null,
};
@@ -76,58 +79,177 @@ class ReportInfoButtonUi extends Component {
return null;
}
- const jobType = info.jobtype || NA;
- const attempts = info.attempts ? info.attempts.toString() : NA;
- const maxAttempts = info.max_attempts ? info.max_attempts.toString() : NA;
const timeout = info.timeout ? info.timeout.toString() : NA;
- const warnings = info.warnings?.join(',') ?? null;
const jobInfo = [
- { title: 'Title', description: info.title || NA },
- { title: 'Created By', description: info.created_by || NA },
- { title: 'Created At', description: info.created_at || NA },
- { title: 'Timezone', description: info.browserTimezone || NA },
- { title: 'Status', description: info.status || NA },
+ {
+ title: this.props.intl.formatMessage({
+ id: 'xpack.reporting.listing.infoPanel.titleInfo',
+ defaultMessage: 'Title',
+ }),
+ description: info.title || NA,
+ },
+ {
+ title: this.props.intl.formatMessage({
+ id: 'xpack.reporting.listing.infoPanel.createdAtInfo',
+ defaultMessage: 'Created At',
+ }),
+ description: info.getCreatedAtLabel(),
+ },
+ {
+ title: this.props.intl.formatMessage({
+ id: 'xpack.reporting.listing.infoPanel.statusInfo',
+ defaultMessage: 'Status',
+ }),
+ description: info.getStatus(),
+ },
+ {
+ title: this.props.intl.formatMessage({
+ id: 'xpack.reporting.listing.infoPanel.tzInfo',
+ defaultMessage: 'Timezone',
+ }),
+ description: info.browserTimezone || NA,
+ },
];
const processingInfo = [
- { title: 'Started At', description: info.started_at || NA },
- { title: 'Completed At', description: info.completed_at || NA },
{
- title: 'Processed By',
+ title: this.props.intl.formatMessage({
+ id: 'xpack.reporting.listing.infoPanel.startedAtInfo',
+ defaultMessage: 'Started At',
+ }),
+ description: info.started_at || NA,
+ },
+ {
+ title: this.props.intl.formatMessage({
+ id: 'xpack.reporting.listing.infoPanel.completedAtInfo',
+ defaultMessage: 'Completed At',
+ }),
+ description: info.completed_at || NA,
+ },
+ {
+ title: this.props.intl.formatMessage({
+ id: 'xpack.reporting.listing.infoPanel.processedByInfo',
+ defaultMessage: 'Processed By',
+ }),
description:
info.kibana_name && info.kibana_id ? `${info.kibana_name} (${info.kibana_id})` : NA,
},
- { title: 'Content Type', description: info.content_type || NA },
- { title: 'Size in Bytes', description: info.size?.toString() || NA },
- { title: 'Attempts', description: attempts },
- { title: 'Max Attempts', description: maxAttempts },
- { title: 'Timeout', description: timeout },
+ {
+ title: this.props.intl.formatMessage({
+ id: 'xpack.reporting.listing.infoPanel.contentTypeInfo',
+ defaultMessage: 'Content Type',
+ }),
+ description: info.content_type || NA,
+ },
+ {
+ title: this.props.intl.formatMessage({
+ id: 'xpack.reporting.listing.infoPanel.sizeInfo',
+ defaultMessage: 'Size in Bytes',
+ }),
+ description: info.size?.toString() || NA,
+ },
+ {
+ title: this.props.intl.formatMessage({
+ id: 'xpack.reporting.listing.infoPanel.attemptsInfo',
+ defaultMessage: 'Attempts',
+ }),
+ description: info.attempts.toString(),
+ },
+ {
+ title: this.props.intl.formatMessage({
+ id: 'xpack.reporting.listing.infoPanel.maxAttemptsInfo',
+ defaultMessage: 'Max Attempts',
+ }),
+ description: info.max_attempts?.toString() || NA,
+ },
+ {
+ title: this.props.intl.formatMessage({
+ id: 'xpack.reporting.listing.infoPanel.timeoutInfo',
+ defaultMessage: 'Timeout',
+ }),
+ description: timeout,
+ },
+ {
+ title: this.props.intl.formatMessage({
+ id: 'xpack.reporting.listing.infoPanel.exportTypeInfo',
+ defaultMessage: 'Export Type',
+ }),
+ description: info.isDeprecated
+ ? this.props.intl.formatMessage(
+ {
+ id: 'xpack.reporting.listing.table.reportCalloutExportTypeDeprecated',
+ defaultMessage: '{jobtype} (DEPRECATED)',
+ },
+ { jobtype: info.jobtype }
+ )
+ : info.jobtype,
+ },
+
+ // TODO when https://github.com/elastic/kibana/pull/106137 is merged, add kibana version field
];
const jobScreenshot = [
- { title: 'Dimensions', description: getDimensions(info) },
- { title: 'Layout', description: info.layout?.id || UNKNOWN },
- { title: 'Browser Type', description: info.browser_type || NA },
+ {
+ title: this.props.intl.formatMessage({
+ id: 'xpack.reporting.listing.infoPanel.dimensionsInfo',
+ defaultMessage: 'Dimensions',
+ }),
+ description: getDimensions(info),
+ },
+ {
+ title: this.props.intl.formatMessage({
+ id: 'xpack.reporting.listing.infoPanel.layoutInfo',
+ defaultMessage: 'Layout',
+ }),
+ description: info.layout?.id || UNKNOWN,
+ },
+ {
+ title: this.props.intl.formatMessage({
+ id: 'xpack.reporting.listing.infoPanel.browserTypeInfo',
+ defaultMessage: 'Browser Type',
+ }),
+ description: info.browser_type || NA,
+ },
+ ];
+
+ const warnings = info.getWarnings();
+ const warningsInfo = warnings && [
+ {
+ title: Warnings,
+ description: {warnings},
+ },
];
- const warningInfo = warnings && [{ title: 'Errors', description: warnings }];
+ const errored = info.getError();
+ const errorInfo = errored && [
+ {
+ title: Error,
+ description: {errored},
+ },
+ ];
return (
<>
- {USES_HEADLESS_JOB_TYPES.includes(jobType) ? (
+ {USES_HEADLESS_JOB_TYPES.includes(info.jobtype) ? (
<>
) : null}
- {warningInfo ? (
+ {warningsInfo ? (
+ <>
+
+
+
+ ) : null}
+ {errorInfo ? (
<>
-
+
) : null}
@@ -143,6 +265,7 @@ class ReportInfoButtonUi extends Component {
}
public render() {
+ const job = this.props.job;
let flyout;
if (this.state.isFlyoutVisible) {
@@ -168,21 +291,44 @@ class ReportInfoButtonUi extends Component {
);
}
+ let message = this.props.intl.formatMessage({
+ id: 'xpack.reporting.listing.table.reportInfoButtonTooltip',
+ defaultMessage: 'See report info',
+ });
+ if (job.getError()) {
+ message = this.props.intl.formatMessage({
+ id: 'xpack.reporting.listing.table.reportInfoAndErrorButtonTooltip',
+ defaultMessage: 'See report info and error message',
+ });
+ } else if (job.getWarnings()) {
+ message = this.props.intl.formatMessage({
+ id: 'xpack.reporting.listing.table.reportInfoAndWarningsButtonTooltip',
+ defaultMessage: 'See report info and warnings',
+ });
+ }
+
+ let buttonIconType = 'iInCircle';
+ let buttonColor: 'primary' | 'danger' | 'warning' = 'primary';
+ if (job.getWarnings() || job.getError()) {
+ buttonIconType = 'alert';
+ buttonColor = 'danger';
+ }
+ if (job.getWarnings()) {
+ buttonColor = 'warning';
+ }
+
return (
<>
-
+
{flyout}
@@ -193,7 +339,7 @@ class ReportInfoButtonUi extends Component {
private loadInfo = async () => {
this.setState({ isLoading: true });
try {
- const info = await this.props.apiClient.getInfo(this.props.jobId);
+ const info = await this.props.apiClient.getInfo(this.props.job.id);
if (this.mounted) {
this.setState({ isLoading: false, info });
}
@@ -201,7 +347,10 @@ class ReportInfoButtonUi extends Component {
if (this.mounted) {
this.setState({
isLoading: false,
- calloutTitle: 'Unable to fetch report info',
+ calloutTitle: this.props.intl.formatMessage({
+ id: 'xpack.reporting.listing.table.reportInfoUnableToFetch',
+ defaultMessage: 'Unable to fetch report info',
+ }),
info: null,
error: err,
});
diff --git a/x-pack/plugins/reporting/public/management/report_listing.test.tsx b/x-pack/plugins/reporting/public/management/report_listing.test.tsx
index b2eb6f0029580a..47969edb72fdad 100644
--- a/x-pack/plugins/reporting/public/management/report_listing.test.tsx
+++ b/x-pack/plugins/reporting/public/management/report_listing.test.tsx
@@ -23,7 +23,7 @@ import { IlmPolicyStatusContextProvider } from '../lib/ilm_policy_status_context
import { Job } from '../lib/job';
import { InternalApiClientClientProvider, ReportingAPIClient } from '../lib/reporting_api_client';
import { KibanaContextProvider } from '../shared_imports';
-import { Props, ReportListing } from './report_listing';
+import { ListingProps as Props, ReportListing } from '.';
jest.mock('@elastic/eui/lib/services/accessibility/html_id_generator', () => {
return {
diff --git a/x-pack/plugins/reporting/public/management/report_listing.tsx b/x-pack/plugins/reporting/public/management/report_listing.tsx
index 9ba0026999137a..4e183380a6b41e 100644
--- a/x-pack/plugins/reporting/public/management/report_listing.tsx
+++ b/x-pack/plugins/reporting/public/management/report_listing.tsx
@@ -16,39 +16,25 @@ import {
EuiTextColor,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
-import { FormattedMessage, InjectedIntl, injectI18n } from '@kbn/i18n/react';
-import moment from 'moment';
+import { FormattedMessage, injectI18n } from '@kbn/i18n/react';
import { Component, default as React, Fragment } from 'react';
import { Subscription } from 'rxjs';
-import { ApplicationStart, ToastsSetup } from 'src/core/public';
-import { ILicense, LicensingPluginSetup } from '../../../licensing/public';
-import { JOB_STATUSES as JobStatuses } from '../../common/constants';
+import { ILicense } from '../../../licensing/public';
+import { REPORT_TABLE_ID, REPORT_TABLE_ROW_ID } from '../../common/constants';
import { Poller } from '../../common/poller';
import { durationToNumber } from '../../common/schema_utils';
-import { useIlmPolicyStatus, UseIlmPolicyStatusReturn } from '../lib/ilm_policy_status_context';
+import { useIlmPolicyStatus } from '../lib/ilm_policy_status_context';
import { Job } from '../lib/job';
import { checkLicense } from '../lib/license_check';
-import { ReportingAPIClient, useInternalApiClient } from '../lib/reporting_api_client';
-import { ClientConfigType } from '../plugin';
-import type { SharePluginSetup } from '../shared_imports';
+import { useInternalApiClient } from '../lib/reporting_api_client';
import { useKibana } from '../shared_imports';
-import { ReportDeleteButton, ReportDownloadButton, ReportErrorButton, ReportInfoButton } from './';
import { IlmPolicyLink } from './ilm_policy_link';
import { MigrateIlmPolicyCallOut } from './migrate_ilm_policy_callout';
+import { ReportDeleteButton } from './report_delete_button';
import { ReportDiagnostic } from './report_diagnostic';
-
-export interface Props {
- intl: InjectedIntl;
- apiClient: ReportingAPIClient;
- capabilities: ApplicationStart['capabilities'];
- license$: LicensingPluginSetup['license$'];
- pollConfig: ClientConfigType['poll'];
- redirect: ApplicationStart['navigateToApp'];
- navigateToUrl: ApplicationStart['navigateToUrl'];
- toasts: ToastsSetup;
- urlService: SharePluginSetup['url'];
- ilmPolicyContextValue: UseIlmPolicyStatusReturn;
-}
+import { ReportDownloadButton } from './report_download_button';
+import { ReportInfoButton } from './report_info_button';
+import { ListingProps as Props } from './';
interface State {
page: number;
@@ -61,45 +47,6 @@ interface State {
badLicenseMessage: string;
}
-const jobStatusLabelsMap = new Map([
- [
- JobStatuses.PENDING,
- i18n.translate('xpack.reporting.jobStatuses.pendingText', {
- defaultMessage: 'Pending',
- }),
- ],
- [
- JobStatuses.PROCESSING,
- i18n.translate('xpack.reporting.jobStatuses.processingText', {
- defaultMessage: 'Processing',
- }),
- ],
- [
- JobStatuses.COMPLETED,
- i18n.translate('xpack.reporting.jobStatuses.completedText', {
- defaultMessage: 'Completed',
- }),
- ],
- [
- JobStatuses.WARNINGS,
- i18n.translate('xpack.reporting.jobStatuses.warningText', {
- defaultMessage: 'Completed with warnings',
- }),
- ],
- [
- JobStatuses.FAILED,
- i18n.translate('xpack.reporting.jobStatuses.failedText', {
- defaultMessage: 'Failed',
- }),
- ],
- [
- JobStatuses.CANCELLED,
- i18n.translate('xpack.reporting.jobStatuses.cancelledText', {
- defaultMessage: 'Cancelled',
- }),
- ],
-]);
-
class ReportListingUi extends Component {
private isInitialJobsFetch: boolean;
private licenseSubscription?: Subscription;
@@ -212,9 +159,9 @@ class ReportListingUi extends Component {
this.setState((current) => ({ ...current, selectedJobs: jobs }));
};
- private removeRecord = (record: Job) => {
+ private removeJob = (job: Job) => {
const { jobs } = this.state;
- const filtered = jobs.filter((j) => j.id !== record.id);
+ const filtered = jobs.filter((j) => j.id !== job.id);
this.setState((current) => ({ ...current, jobs: filtered }));
};
@@ -223,17 +170,17 @@ class ReportListingUi extends Component {
if (selectedJobs.length === 0) return undefined;
const performDelete = async () => {
- for (const record of selectedJobs) {
+ for (const job of selectedJobs) {
try {
- await this.props.apiClient.deleteReport(record.id);
- this.removeRecord(record);
+ await this.props.apiClient.deleteReport(job.id);
+ this.removeJob(job);
this.props.toasts.addSuccess(
this.props.intl.formatMessage(
{
id: 'xpack.reporting.listing.table.deleteConfim',
defaultMessage: `The {reportTitle} report was deleted`,
},
- { reportTitle: record.title }
+ { reportTitle: job.title }
)
);
} catch (error) {
@@ -316,15 +263,6 @@ class ReportListingUi extends Component {
return this.state.showLinks && this.state.enableLinks;
};
- private formatDate(timestamp: string) {
- try {
- return moment(timestamp).format('YYYY-MM-DD @ hh:mm A');
- } catch (error) {
- // ignore parse error and display unformatted value
- return timestamp;
- }
- }
-
private renderTable() {
const { intl } = this.props;
@@ -335,12 +273,12 @@ class ReportListingUi extends Component {
id: 'xpack.reporting.listing.tableColumns.reportTitle',
defaultMessage: 'Report',
}),
- render: (objectTitle: string, record: Job) => {
+ render: (objectTitle: string, job: Job) => {
return (
{objectTitle}
- {record.objectType}
+ {job.objectType}
);
@@ -352,17 +290,9 @@ class ReportListingUi extends Component {
id: 'xpack.reporting.listing.tableColumns.createdAtTitle',
defaultMessage: 'Created at',
}),
- render: (createdAt: string, record: Job) => {
- if (record.created_by) {
- return (
-
- {this.formatDate(createdAt)}
- {record.created_by}
- {job.getCreatedAtLabel()}
+ ),
},
{
field: 'status',
@@ -370,89 +300,9 @@ class ReportListingUi extends Component {
id: 'xpack.reporting.listing.tableColumns.statusTitle',
defaultMessage: 'Status',
}),
- render: (status: string, record: Job) => {
- if (status === 'pending') {
- return (
-
-
-
- );
- }
-
- let maxSizeReached;
- if (record.max_size_reached) {
- maxSizeReached = (
-
-
-
- );
- }
-
- let warnings;
- if (record.warnings) {
- warnings = (
-
-
-
-
-
- );
- }
-
- let statusTimestamp;
- if (status === JobStatuses.PROCESSING && record.started_at) {
- statusTimestamp = this.formatDate(record.started_at);
- } else if (
- record.completed_at &&
- ([
- JobStatuses.COMPLETED,
- JobStatuses.FAILED,
- JobStatuses.WARNINGS,
- ] as string[]).includes(status)
- ) {
- statusTimestamp = this.formatDate(record.completed_at);
- }
-
- let statusLabel = jobStatusLabelsMap.get(status as JobStatuses) || status;
-
- if (status === JobStatuses.PROCESSING) {
- statusLabel = statusLabel + ` (attempt ${record.attempts} of ${record.max_attempts})`;
- }
-
- if (statusTimestamp) {
- return (
-
- {statusTimestamp},
- }}
- />
- {maxSizeReached}
- {warnings}
-
- );
- }
-
- // unknown status
- return (
-
- {statusLabel}
- {maxSizeReached}
-
- );
- },
+ render: (_status: string, job: Job) => (
+ {job.getStatusLabel()}
+ ),
},
{
name: intl.formatMessage({
@@ -461,12 +311,11 @@ class ReportListingUi extends Component {
}),
actions: [
{
- render: (record: Job) => {
+ render: (job: Job) => {
return (
-
-
-
-
+
+
+
);
},
@@ -520,7 +369,8 @@ class ReportListingUi extends Component {
selection={selection}
isSelectable={true}
onChange={this.onTableChange}
- data-test-subj="reportJobListing"
+ data-test-subj={REPORT_TABLE_ID}
+ rowProps={() => ({ 'data-test-subj': REPORT_TABLE_ROW_ID })}
/>
);
diff --git a/x-pack/plugins/reporting/server/browsers/chromium/driver_factory/index.ts b/x-pack/plugins/reporting/server/browsers/chromium/driver_factory/index.ts
index eb2abf4036c03d..7aaa9c78602a90 100644
--- a/x-pack/plugins/reporting/server/browsers/chromium/driver_factory/index.ts
+++ b/x-pack/plugins/reporting/server/browsers/chromium/driver_factory/index.ts
@@ -17,7 +17,6 @@ import { InnerSubscriber } from 'rxjs/internal/InnerSubscriber';
import { ignoreElements, map, mergeMap, tap } from 'rxjs/operators';
import { getChromiumDisconnectedError } from '../';
import { ReportingCore } from '../../..';
-import { BROWSER_TYPE } from '../../../../common/constants';
import { durationToNumber } from '../../../../common/schema_utils';
import { CaptureConfig } from '../../../../server/types';
import { LevelLogger } from '../../../lib';
@@ -70,7 +69,7 @@ export class HeadlessChromiumDriverFactory {
});
}
- type = BROWSER_TYPE;
+ type = 'chromium';
/*
* Return an observable to objects which will drive screenshot capture for a page
diff --git a/x-pack/plugins/reporting/server/routes/jobs.ts b/x-pack/plugins/reporting/server/routes/jobs.ts
index 0d0332983d6bc3..37557c3afb0c77 100644
--- a/x-pack/plugins/reporting/server/routes/jobs.ts
+++ b/x-pack/plugins/reporting/server/routes/jobs.ts
@@ -93,49 +93,6 @@ export function registerJobInfoRoutes(reporting: ReportingCore) {
})
);
- // return the raw output from a job
- router.get(
- {
- path: `${MAIN_ENTRY}/output/{docId}`,
- validate: {
- params: schema.object({
- docId: schema.string({ minLength: 2 }),
- }),
- },
- },
- userHandler(async (user, context, req, res) => {
- // ensure the async dependencies are loaded
- if (!context.reporting) {
- return handleUnavailable(res);
- }
-
- const { docId } = req.params;
- const {
- management: { jobTypes = [] },
- } = await reporting.getLicenseInfo();
-
- const jobsQuery = jobsQueryFactory(reporting);
- const result = await jobsQuery.getContent(user, docId);
-
- if (!result) {
- throw Boom.notFound();
- }
-
- const { jobtype: jobType, output } = result;
-
- if (!jobTypes.includes(jobType)) {
- throw Boom.unauthorized(`Sorry, you are not authorized to download ${jobType} reports`);
- }
-
- return res.ok({
- body: output?.content ?? {},
- headers: {
- 'content-type': 'application/json',
- },
- });
- })
- );
-
// return some info about the job
router.get(
{
diff --git a/x-pack/plugins/reporting/server/routes/lib/jobs_query.ts b/x-pack/plugins/reporting/server/routes/lib/jobs_query.ts
index 76896a7472d59d..a0d6962074a708 100644
--- a/x-pack/plugins/reporting/server/routes/lib/jobs_query.ts
+++ b/x-pack/plugins/reporting/server/routes/lib/jobs_query.ts
@@ -12,7 +12,8 @@ import { i18n } from '@kbn/i18n';
import { UnwrapPromise } from '@kbn/utility-types';
import { ElasticsearchClient } from 'src/core/server';
import { ReportingCore } from '../../';
-import { ReportApiJSON, ReportDocument, ReportSource } from '../../../common/types';
+import { JobContent, ReportApiJSON, ReportDocument, ReportSource } from '../../../common/types';
+import { statuses } from '../../lib/statuses';
import { Report } from '../../lib/store';
import { ReportingUser } from '../../types';
@@ -47,6 +48,7 @@ interface JobsQueryFactory {
count(jobTypes: string[], user: ReportingUser): Promise;
get(user: ReportingUser, id: string): Promise;
getContent(user: ReportingUser, id: string): Promise;
+ getError(user: ReportingUser, id: string): Promise<(ReportContent & JobContent) | void>;
delete(deleteIndex: string, id: string): Promise>;
}
@@ -205,6 +207,20 @@ export function jobsQueryFactory(reportingCore: ReportingCore): JobsQueryFactory
};
},
+ async getError(user, id) {
+ const content = await this.getContent(user, id);
+ if (content && content?.output?.content) {
+ if (content.status !== statuses.JOB_STATUS_FAILED) {
+ throw new Error(`Can not get error for ${id}`);
+ }
+ return {
+ ...content,
+ content: content.output.content,
+ content_type: false,
+ };
+ }
+ },
+
async delete(deleteIndex, id) {
try {
const { asInternalUser: elasticsearchClient } = await reportingCore.getEsClient();
diff --git a/x-pack/plugins/rule_registry/server/mocks.ts b/x-pack/plugins/rule_registry/server/mocks.ts
new file mode 100644
index 00000000000000..cc5c3cfd484a7c
--- /dev/null
+++ b/x-pack/plugins/rule_registry/server/mocks.ts
@@ -0,0 +1,12 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { createLifecycleAlertServicesMock } from './utils/lifecycle_alert_services_mock';
+
+export const ruleRegistryMocks = {
+ createLifecycleAlertServices: createLifecycleAlertServicesMock,
+};
diff --git a/x-pack/plugins/rule_registry/server/utils/create_lifecycle_rule_executor_mock.ts b/x-pack/plugins/rule_registry/server/utils/create_lifecycle_rule_executor_mock.ts
new file mode 100644
index 00000000000000..c519674569a51b
--- /dev/null
+++ b/x-pack/plugins/rule_registry/server/utils/create_lifecycle_rule_executor_mock.ts
@@ -0,0 +1,35 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import {
+ AlertTypeParams,
+ AlertTypeState,
+ AlertInstanceState,
+ AlertInstanceContext,
+} from '../../../../plugins/alerting/server';
+import { AlertExecutorOptionsWithExtraServices } from '../types';
+
+import { LifecycleAlertServices, LifecycleRuleExecutor } from './create_lifecycle_executor';
+
+export const createLifecycleRuleExecutorMock = <
+ Params extends AlertTypeParams = never,
+ State extends AlertTypeState = never,
+ InstanceState extends AlertInstanceState = never,
+ InstanceContext extends AlertInstanceContext = never,
+ ActionGroupIds extends string = never
+>(
+ executor: LifecycleRuleExecutor
+) => async (
+ options: AlertExecutorOptionsWithExtraServices<
+ Params,
+ State,
+ InstanceState,
+ InstanceContext,
+ ActionGroupIds,
+ LifecycleAlertServices
+ >
+) => await executor(options);
diff --git a/x-pack/plugins/rule_registry/server/utils/lifecycle_alert_services_mock.ts b/x-pack/plugins/rule_registry/server/utils/lifecycle_alert_services_mock.ts
new file mode 100644
index 00000000000000..37b4847bc9c695
--- /dev/null
+++ b/x-pack/plugins/rule_registry/server/utils/lifecycle_alert_services_mock.ts
@@ -0,0 +1,38 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { AlertInstanceContext, AlertInstanceState } from '../../../alerting/server';
+import { alertsMock } from '../../../alerting/server/mocks';
+import { LifecycleAlertServices } from './create_lifecycle_executor';
+
+/**
+ * This wraps the alerts to enable the preservation of the generic type
+ * arguments of the factory function.
+ **/
+class AlertsMockWrapper<
+ InstanceState extends AlertInstanceState = AlertInstanceState,
+ InstanceContext extends AlertInstanceContext = AlertInstanceContext
+> {
+ createAlertServices() {
+ return alertsMock.createAlertServices();
+ }
+}
+
+type AlertServices<
+ InstanceState extends AlertInstanceState = AlertInstanceState,
+ InstanceContext extends AlertInstanceContext = AlertInstanceContext
+> = ReturnType['createAlertServices']>;
+
+export const createLifecycleAlertServicesMock = <
+ InstanceState extends AlertInstanceState = never,
+ InstanceContext extends AlertInstanceContext = never,
+ ActionGroupIds extends string = never
+>(
+ alertServices: AlertServices
+): LifecycleAlertServices => ({
+ alertWithLifecycle: ({ id }) => alertServices.alertInstanceFactory(id),
+});
diff --git a/x-pack/plugins/security/public/nav_control/nav_control_component.test.tsx b/x-pack/plugins/security/public/nav_control/nav_control_component.test.tsx
index f2d3fcd6ab3caf..adaca23be5dae5 100644
--- a/x-pack/plugins/security/public/nav_control/nav_control_component.test.tsx
+++ b/x-pack/plugins/security/public/nav_control/nav_control_component.test.tsx
@@ -64,6 +64,7 @@ describe('SecurityNavControl', () => {
onClick={[Function]}
>
diff --git a/x-pack/plugins/security/public/nav_control/nav_control_component.tsx b/x-pack/plugins/security/public/nav_control/nav_control_component.tsx
index 56eb784467c056..3b45b5164c6cfb 100644
--- a/x-pack/plugins/security/public/nav_control/nav_control_component.tsx
+++ b/x-pack/plugins/security/public/nav_control/nav_control_component.tsx
@@ -100,7 +100,7 @@ export class SecurityNavControl extends Component {
(authenticatedUser && (authenticatedUser.full_name || authenticatedUser.username)) || '';
const buttonContents = authenticatedUser ? (
-
+
) : (
);
diff --git a/x-pack/plugins/security/public/nav_control/nav_control_service.test.ts b/x-pack/plugins/security/public/nav_control/nav_control_service.test.ts
index ece00bcd435783..9839d29291629a 100644
--- a/x-pack/plugins/security/public/nav_control/nav_control_service.test.ts
+++ b/x-pack/plugins/security/public/nav_control/nav_control_service.test.ts
@@ -86,6 +86,7 @@ describe('SecurityNavControlService', () => {
diff --git a/x-pack/plugins/security/server/errors.test.ts b/x-pack/plugins/security/server/errors.test.ts
index 9aa86357932810..90860689b2852a 100644
--- a/x-pack/plugins/security/server/errors.test.ts
+++ b/x-pack/plugins/security/server/errors.test.ts
@@ -7,7 +7,6 @@
import { errors as esErrors } from '@elastic/elasticsearch';
import Boom from '@hapi/boom';
-import { errors as legacyESErrors } from 'elasticsearch';
import * as errors from './errors';
import { securityMock } from './mocks';
@@ -72,11 +71,6 @@ describe('lib/errors', () => {
).toBe(401);
});
- it('extracts status code from legacy Elasticsearch client error', () => {
- expect(errors.getErrorStatusCode(new legacyESErrors.BadRequest())).toBe(400);
- expect(errors.getErrorStatusCode(new legacyESErrors.AuthenticationException())).toBe(401);
- });
-
it('extracts status code from `status` property', () => {
expect(errors.getErrorStatusCode({ statusText: 'Bad Request', status: 400 })).toBe(400);
expect(errors.getErrorStatusCode({ statusText: 'Unauthorized', status: 401 })).toBe(401);
@@ -120,13 +114,6 @@ describe('lib/errors', () => {
).toBe(JSON.stringify({ field1: 'value-1', field2: 'value-2' }));
});
- it('extracts status code from legacy Elasticsearch client error', () => {
- expect(errors.getDetailedErrorMessage(new legacyESErrors.BadRequest())).toBe('Bad Request');
- expect(errors.getDetailedErrorMessage(new legacyESErrors.AuthenticationException())).toBe(
- 'Authentication Exception'
- );
- });
-
it('extracts `message` property', () => {
expect(errors.getDetailedErrorMessage(new Error('some-message'))).toBe('some-message');
});
diff --git a/x-pack/plugins/security/server/routes/users/change_password.test.ts b/x-pack/plugins/security/server/routes/users/change_password.test.ts
index fba7bf4f872e7f..35972e103855e9 100644
--- a/x-pack/plugins/security/server/routes/users/change_password.test.ts
+++ b/x-pack/plugins/security/server/routes/users/change_password.test.ts
@@ -5,7 +5,7 @@
* 2.0.
*/
-import { errors } from 'elasticsearch';
+import { errors } from '@elastic/elasticsearch';
import type { ObjectType } from '@kbn/config-schema';
import type { PublicMethodsOf } from '@kbn/utility-types';
@@ -18,6 +18,7 @@ import { mockAuthenticatedUser } from '../../../common/model/authenticated_user.
import { AuthenticationResult } from '../../authentication';
import type { InternalAuthenticationServiceStart } from '../../authentication';
import { authenticationServiceMock } from '../../authentication/authentication_service.mock';
+import { securityMock } from '../../mocks';
import type { Session } from '../../session_management';
import { sessionMock } from '../../session_management/session.mock';
import type { SecurityRequestHandlerContext, SecurityRouter } from '../../types';
@@ -109,9 +110,9 @@ describe('Change password', () => {
});
it('returns 403 if old password is wrong.', async () => {
- const changePasswordFailure = new (errors.AuthenticationException as any)('Unauthorized', {
- body: { error: { header: { 'WWW-Authenticate': 'Negotiate' } } },
- });
+ const changePasswordFailure = new errors.ResponseError(
+ securityMock.createApiResponse({ statusCode: 401, body: {} })
+ );
mockContext.core.elasticsearch.client.asCurrentUser.security.changePassword.mockRejectedValue(
changePasswordFailure
);
diff --git a/x-pack/plugins/security_solution/cypress/integration/cases/connector_options.spec.ts b/x-pack/plugins/security_solution/cypress/integration/cases/connector_options.spec.ts
index 0959f999a4b53c..ced815c4b58c16 100644
--- a/x-pack/plugins/security_solution/cypress/integration/cases/connector_options.spec.ts
+++ b/x-pack/plugins/security_solution/cypress/integration/cases/connector_options.spec.ts
@@ -31,27 +31,31 @@ describe('Cases connector incident fields', () => {
beforeEach(() => {
cleanKibana();
cy.intercept('GET', '/api/cases/configure/connectors/_find', getMockConnectorsResponse());
- cy.intercept('POST', `/api/actions/action/${getConnectorIds().sn}/_execute`, (req) => {
+ cy.intercept('POST', `/api/actions/connector/${getConnectorIds().sn}/_execute`, (req) => {
const response =
req.body.params.subAction === 'getChoices'
? getExecuteResponses().servicenow.choices
: { status: 'ok', data: [] };
req.reply(response);
});
- cy.intercept('POST', `/api/actions/action/${getConnectorIds().jira}/_execute`, (req) => {
+ cy.intercept('POST', `/api/actions/connector/${getConnectorIds().jira}/_execute`, (req) => {
const response =
req.body.params.subAction === 'issueTypes'
? getExecuteResponses().jira.issueTypes
: getExecuteResponses().jira.fieldsByIssueType;
req.reply(response);
});
- cy.intercept('POST', `/api/actions/action/${getConnectorIds().resilient}/_execute`, (req) => {
- const response =
- req.body.params.subAction === 'incidentTypes'
- ? getExecuteResponses().resilient.incidentTypes
- : getExecuteResponses().resilient.severity;
- req.reply(response);
- });
+ cy.intercept(
+ 'POST',
+ `/api/actions/connector/${getConnectorIds().resilient}/_execute`,
+ (req) => {
+ const response =
+ req.body.params.subAction === 'incidentTypes'
+ ? getExecuteResponses().resilient.incidentTypes
+ : getExecuteResponses().resilient.severity;
+ req.reply(response);
+ }
+ );
});
it('Correct incident fields show when connector is changed', () => {
diff --git a/x-pack/plugins/security_solution/cypress/integration/timelines/data_providers.spec.ts b/x-pack/plugins/security_solution/cypress/integration/timelines/data_providers.spec.ts
index a89ddf3e0b250b..5e851cecbd86ba 100644
--- a/x-pack/plugins/security_solution/cypress/integration/timelines/data_providers.spec.ts
+++ b/x-pack/plugins/security_solution/cypress/integration/timelines/data_providers.spec.ts
@@ -44,7 +44,7 @@ describe('timeline data providers', () => {
closeTimeline();
});
- it('renders the data provider of a host dragged from the All Hosts widget on the hosts page', () => {
+ it.skip('renders the data provider of a host dragged from the All Hosts widget on the hosts page', () => {
dragAndDropFirstHostToTimeline();
openTimelineUsingToggle();
cy.get(`${TIMELINE_FLYOUT} ${TIMELINE_DROPPED_DATA_PROVIDERS}`)
@@ -78,7 +78,7 @@ describe('timeline data providers', () => {
});
});
- it('sets correct classes when the user starts dragging a host, but is not hovering over the data providers', () => {
+ it.skip('sets correct classes when the user starts dragging a host, but is not hovering over the data providers', () => {
dragFirstHostToTimeline();
cy.get(IS_DRAGGING_DATA_PROVIDERS)
@@ -87,7 +87,7 @@ describe('timeline data providers', () => {
.should('have.class', 'drop-target-data-providers');
});
- it('render an extra highlighted area in dataProvider when the user starts dragging a host AND is hovering over the data providers', () => {
+ it.skip('render an extra highlighted area in dataProvider when the user starts dragging a host AND is hovering over the data providers', () => {
dragFirstHostToEmptyTimelineDataProviders();
cy.get(IS_DRAGGING_DATA_PROVIDERS)
diff --git a/x-pack/plugins/security_solution/cypress/integration/timelines/flyout_button.spec.ts b/x-pack/plugins/security_solution/cypress/integration/timelines/flyout_button.spec.ts
index 38c6f41f1049c2..ac34d65f0fd0a1 100644
--- a/x-pack/plugins/security_solution/cypress/integration/timelines/flyout_button.spec.ts
+++ b/x-pack/plugins/security_solution/cypress/integration/timelines/flyout_button.spec.ts
@@ -79,7 +79,7 @@ describe('timeline flyout button', () => {
closeTimelineUsingCloseButton();
});
- it('sets correct classes when the user starts dragging a host, but is not hovering over the data providers', () => {
+ it.skip('sets correct classes when the user starts dragging a host, but is not hovering over the data providers', () => {
dragFirstHostToTimeline();
cy.get(IS_DRAGGING_DATA_PROVIDERS)
diff --git a/x-pack/plugins/security_solution/cypress/screens/hosts/all_hosts.ts b/x-pack/plugins/security_solution/cypress/screens/hosts/all_hosts.ts
index 615421b1ef3234..cf1bac421b447a 100644
--- a/x-pack/plugins/security_solution/cypress/screens/hosts/all_hosts.ts
+++ b/x-pack/plugins/security_solution/cypress/screens/hosts/all_hosts.ts
@@ -7,6 +7,6 @@
export const ALL_HOSTS_TABLE = '[data-test-subj="table-allHosts-loading-false"]';
-export const HOSTS_NAMES = '[data-test-subj="draggable-content-host.name"] a.euiLink';
+export const HOSTS_NAMES = '[data-test-subj="render-content-host.name"] a.euiLink';
-export const HOSTS_NAMES_DRAGGABLE = '[data-test-subj="draggable-content-host.name"]';
+export const HOSTS_NAMES_DRAGGABLE = '[data-test-subj="render-content-host.name"]';
diff --git a/x-pack/plugins/security_solution/cypress/screens/hosts/uncommon_processes.ts b/x-pack/plugins/security_solution/cypress/screens/hosts/uncommon_processes.ts
index 536379654862c6..f2a712f8688505 100644
--- a/x-pack/plugins/security_solution/cypress/screens/hosts/uncommon_processes.ts
+++ b/x-pack/plugins/security_solution/cypress/screens/hosts/uncommon_processes.ts
@@ -5,6 +5,6 @@
* 2.0.
*/
-export const PROCESS_NAME_FIELD = '[data-test-subj="draggable-content-process.name"]';
+export const PROCESS_NAME_FIELD = '[data-test-subj="render-content-process.name"]';
export const UNCOMMON_PROCESSES_TABLE = '[data-test-subj="table-uncommonProcesses-loading-false"]';
diff --git a/x-pack/plugins/security_solution/public/common/components/charts/barchart.test.tsx b/x-pack/plugins/security_solution/public/common/components/charts/barchart.test.tsx
index 6d87b5d3a68b90..ad15f0a5fa9fb2 100644
--- a/x-pack/plugins/security_solution/public/common/components/charts/barchart.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/charts/barchart.test.tsx
@@ -340,13 +340,9 @@ describe.each(chartDataSets)('BarChart with stackByField', () => {
const dataProviderId = `draggableId.content.draggable-legend-item-uuid_v4()-${escapeDataProviderId(
stackByField
)}-${escapeDataProviderId(datum.key)}`;
-
- expect(
- wrapper
- .find(`[draggableId="${dataProviderId}"] [data-test-subj="providerContainer"]`)
- .first()
- .text()
- ).toEqual(datum.key);
+ expect(wrapper.find(`div[data-provider-id="${dataProviderId}"]`).first().text()).toEqual(
+ datum.key
+ );
});
});
});
diff --git a/x-pack/plugins/security_solution/public/common/components/charts/draggable_legend_item.tsx b/x-pack/plugins/security_solution/public/common/components/charts/draggable_legend_item.tsx
index 6017501f87dcc8..493ce4da78eba7 100644
--- a/x-pack/plugins/security_solution/public/common/components/charts/draggable_legend_item.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/charts/draggable_legend_item.tsx
@@ -46,6 +46,7 @@ const DraggableLegendItemComponent: React.FC<{
data-test-subj={`legend-item-${dataProviderId}`}
field={field}
id={dataProviderId}
+ isDraggable={false}
timelineId={timelineId}
value={value}
/>
diff --git a/x-pack/plugins/security_solution/public/common/components/drag_and_drop/__snapshots__/draggable_wrapper.test.tsx.snap b/x-pack/plugins/security_solution/public/common/components/drag_and_drop/__snapshots__/draggable_wrapper.test.tsx.snap
index aa8214938c2b08..0b25ff2c8c5eed 100644
--- a/x-pack/plugins/security_solution/public/common/components/drag_and_drop/__snapshots__/draggable_wrapper.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/common/components/drag_and_drop/__snapshots__/draggable_wrapper.test.tsx.snap
@@ -17,6 +17,7 @@ exports[`DraggableWrapper rendering it renders against the snapshot 1`] = `
},
}
}
+ isDraggable={true}
render={[Function]}
/>
`;
diff --git a/x-pack/plugins/security_solution/public/common/components/drag_and_drop/draggable_wrapper.test.tsx b/x-pack/plugins/security_solution/public/common/components/drag_and_drop/draggable_wrapper.test.tsx
index bdc5545880e1c2..d27ad96ff3c4f1 100644
--- a/x-pack/plugins/security_solution/public/common/components/drag_and_drop/draggable_wrapper.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/drag_and_drop/draggable_wrapper.test.tsx
@@ -42,7 +42,11 @@ describe('DraggableWrapper', () => {
const wrapper = shallow(
- message} />
+ message}
+ />
);
@@ -54,7 +58,11 @@ describe('DraggableWrapper', () => {
const wrapper = mount(
- message} />
+ message}
+ />
);
@@ -66,19 +74,27 @@ describe('DraggableWrapper', () => {
const wrapper = mount(
- message} />
+ message}
+ />
);
- expect(wrapper.find('[data-test-subj="copy-to-clipboard"]').exists()).toBe(false);
+ expect(wrapper.find('[data-test-subj="hover-actions-copy-button"]').exists()).toBe(false);
});
test('it renders hover actions when the mouse is over the text of draggable wrapper', async () => {
const wrapper = mount(
- message} />
+ message}
+ />
);
@@ -88,7 +104,7 @@ describe('DraggableWrapper', () => {
wrapper.update();
jest.runAllTimers();
wrapper.update();
- expect(wrapper.find('[data-test-subj="copy-to-clipboard"]').exists()).toBe(true);
+ expect(wrapper.find('[data-test-subj="hover-actions-copy-button"]').exists()).toBe(true);
});
});
});
@@ -98,7 +114,12 @@ describe('DraggableWrapper', () => {
const wrapper = mount(
- message} truncate />
+ message}
+ truncate
+ />
);
@@ -112,7 +133,11 @@ describe('DraggableWrapper', () => {
const wrapper = mount(
- message} />
+ message}
+ />
);
diff --git a/x-pack/plugins/security_solution/public/common/components/drag_and_drop/draggable_wrapper.tsx b/x-pack/plugins/security_solution/public/common/components/drag_and_drop/draggable_wrapper.tsx
index 9db5b3899d8bc1..d008aad2133923 100644
--- a/x-pack/plugins/security_solution/public/common/components/drag_and_drop/draggable_wrapper.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/drag_and_drop/draggable_wrapper.tsx
@@ -7,7 +7,7 @@
import { EuiScreenReaderOnly } from '@elastic/eui';
import { DRAGGABLE_KEYBOARD_WRAPPER_CLASS_NAME } from '@kbn/securitysolution-t-grid';
-import React, { useCallback, useEffect, useMemo, useState, useRef } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
import {
Draggable,
DraggableProvided,
@@ -25,12 +25,13 @@ import { ROW_RENDERER_BROWSER_EXAMPLE_TIMELINE_ID } from '../../../timelines/com
import { TruncatableText } from '../truncatable_text';
import { WithHoverActions } from '../with_hover_actions';
-import { DraggableWrapperHoverContent, useGetTimelineId } from './draggable_wrapper_hover_content';
+
import { getDraggableId, getDroppableId } from './helpers';
import { ProviderContainer } from './provider_container';
import * as i18n from './translations';
import { useKibana } from '../../lib/kibana';
+import { useHoverActions } from '../hover_actions/use_hover_actions';
// As right now, we do not know what we want there, we will keep it as a placeholder
export const DragEffects = styled.div``;
@@ -80,7 +81,7 @@ const Wrapper = styled.div `
Wrapper.displayName = 'Wrapper';
-const ProviderContentWrapper = styled.span`
+export const ProviderContentWrapper = styled.span`
> span.euiToolTipAnchor {
display: block; /* allow EuiTooltip content to be truncatable */
}
@@ -95,6 +96,7 @@ type RenderFunctionProp = (
interface Props {
dataProvider: DataProvider;
disabled?: boolean;
+ isDraggable?: boolean;
inline?: boolean;
render: RenderFunctionProp;
timelineId?: string;
@@ -121,55 +123,35 @@ export const getStyle = (
};
};
-const draggableContainsLinks = (draggableElement: HTMLDivElement | null) => {
- const links = draggableElement?.querySelectorAll('.euiLink') ?? [];
- return links.length > 0;
-};
-
-const DraggableWrapperComponent: React.FC = ({
+const DraggableOnWrapperComponent: React.FC = ({
dataProvider,
onFilterAdded,
render,
timelineId,
truncate,
}) => {
- const keyboardHandlerRef = useRef(null);
- const draggableRef = useRef(null);
- const [closePopOverTrigger, setClosePopOverTrigger] = useState(false);
- const [showTopN, setShowTopN] = useState(false);
- const [goGetTimelineId, setGoGetTimelineId] = useState(false);
- const timelineIdFind = useGetTimelineId(draggableRef, goGetTimelineId);
const [providerRegistered, setProviderRegistered] = useState(false);
const isDisabled = dataProvider.id.includes(`-${ROW_RENDERER_BROWSER_EXAMPLE_TIMELINE_ID}-`);
- const [hoverActionsOwnFocus, setHoverActionsOwnFocus] = useState(false);
const dispatch = useDispatch();
const { timelines } = useKibana().services;
-
- const handleClosePopOverTrigger = useCallback(() => {
- setClosePopOverTrigger((prevClosePopOverTrigger) => !prevClosePopOverTrigger);
- setHoverActionsOwnFocus((prevHoverActionsOwnFocus) => {
- if (prevHoverActionsOwnFocus) {
- setTimeout(() => {
- keyboardHandlerRef.current?.focus();
- }, 0);
- }
- return false; // always give up ownership
- });
-
- setTimeout(() => {
- setHoverActionsOwnFocus(false);
- }, 0); // invoked on the next tick, because we want to restore focus first
- }, [keyboardHandlerRef]);
-
- const toggleTopN = useCallback(() => {
- setShowTopN((prevShowTopN) => {
- const newShowTopN = !prevShowTopN;
- if (newShowTopN === false) {
- handleClosePopOverTrigger();
- }
- return newShowTopN;
- });
- }, [handleClosePopOverTrigger]);
+ const {
+ closePopOverTrigger,
+ handleClosePopOverTrigger,
+ hoverActionsOwnFocus,
+ hoverContent,
+ keyboardHandlerRef,
+ onCloseRequested,
+ openPopover,
+ onFocus,
+ setContainerRef,
+ showTopN,
+ } = useHoverActions({
+ dataProvider,
+ onFilterAdded,
+ render,
+ timelineId,
+ truncate,
+ });
const registerProvider = useCallback(() => {
if (!isDisabled) {
@@ -192,49 +174,6 @@ const DraggableWrapperComponent: React.FC = ({
[unRegisterProvider]
);
- const hoverContent = useMemo(() => {
- // display links as additional content in the hover menu to enable keyboard
- // navigation of links (when the draggable contains them):
- const additionalContent =
- hoverActionsOwnFocus && !showTopN && draggableContainsLinks(draggableRef.current) ? (
-
- {render(dataProvider, null, { isDragging: false, isDropAnimating: false })}
-
- ) : null;
-
- return (
-
- );
- }, [
- dataProvider,
- handleClosePopOverTrigger,
- hoverActionsOwnFocus,
- onFilterAdded,
- render,
- showTopN,
- timelineId,
- timelineIdFind,
- toggleTopN,
- ]);
-
const RenderClone = useCallback(
(provided, snapshot) => (
@@ -264,7 +203,7 @@ const DraggableWrapperComponent: React.FC = ({
{...provided.dragHandleProps}
ref={(e: HTMLDivElement) => {
provided.innerRef(e);
- draggableRef.current = e;
+ setContainerRef(e);
}}
data-test-subj="providerContainer"
isDragging={snapshot.isDragging}
@@ -292,13 +231,9 @@ const DraggableWrapperComponent: React.FC = ({
)}
),
- [dataProvider, registerProvider, render, truncate]
+ [dataProvider, registerProvider, render, setContainerRef, truncate]
);
- const openPopover = useCallback(() => {
- setHoverActionsOwnFocus(true);
- }, []);
-
const { onBlur, onKeyDown } = timelines.getUseDraggableKeyboardWrapper()({
closePopover: handleClosePopOverTrigger,
draggableId: getDraggableId(dataProvider.id),
@@ -307,24 +242,6 @@ const DraggableWrapperComponent: React.FC = ({
openPopover,
});
- const onFocus = useCallback(() => {
- if (!hoverActionsOwnFocus) {
- keyboardHandlerRef.current?.focus();
- }
- }, [hoverActionsOwnFocus, keyboardHandlerRef]);
-
- const onCloseRequested = useCallback(() => {
- setShowTopN(false);
-
- if (hoverActionsOwnFocus) {
- setHoverActionsOwnFocus(false);
-
- setTimeout(() => {
- onFocus(); // return focus to this draggable on the next tick, because we owned focus
- }, 0);
- }
- }, [onFocus, hoverActionsOwnFocus]);
-
const DroppableContent = useCallback(
(droppableProvided) => (
@@ -350,7 +267,7 @@ const DraggableWrapperComponent: React.FC = ({
{droppableProvided.placeholder}
{
+ setContainerRef(e);
+ }}
+ tabIndex={-1}
+ data-provider-id={getDraggableId(dataProvider.id)}
+ >
+ {truncate ? (
+
+ {render(dataProvider, null, { isDragging: false, isDropAnimating: false })}
+
+ ) : (
+
+ {render(dataProvider, null, { isDragging: false, isDropAnimating: false })}
+
+ )}
+ {i18n.YOU_ARE_IN_A_DIALOG_CONTAINING_OPTIONS(field)}
-
-
- {additionalContent != null && {additionalContent}}
-
- {!showTopN && value != null && (
-
- }
- >
-
-
- )}
-
- {!showTopN && value != null && (
-
- }
- >
-
-
- )}
-
- {!showTopN && value != null && draggableId != null && (
-
- }
- >
-
-
- )}
-
- <>
- {allowTopN({
- browserField: getAllFieldsByName(browserFields)[field],
- fieldName: field,
- }) && (
- <>
- {!showTopN && (
-
- }
- >
-
-
- )}
-
- {showTopN && (
-
- )}
-
- )}
-
-
- {!showTopN && (
-
- )}
-
-
- );
-};
-
-DraggableWrapperHoverContentComponent.displayName = 'DraggableWrapperHoverContentComponent';
-
-export const DraggableWrapperHoverContent = React.memo(DraggableWrapperHoverContentComponent);
-
-export const useGetTimelineId = function (
- elem: React.MutableRefObject,
- getTimelineId: boolean = false
-) {
- const [timelineId, setTimelineId] = useState(null);
-
- useEffect(() => {
- let startElem: Element | (Node & ParentNode) | null = elem.current;
- if (startElem != null && getTimelineId) {
- for (; startElem && startElem !== document; startElem = startElem.parentNode) {
- const myElem: Element = startElem as Element;
- if (
- myElem != null &&
- myElem.classList != null &&
- myElem.classList.contains(SELECTOR_TIMELINE_GLOBAL_CONTAINER) &&
- myElem.hasAttribute('data-timeline-id')
- ) {
- setTimelineId(myElem.getAttribute('data-timeline-id'));
- break;
- }
- }
- }
- }, [elem, getTimelineId]);
-
- return timelineId;
-};
diff --git a/x-pack/plugins/security_solution/public/common/components/drag_and_drop/use_get_timeline_id_from_dom.tsx b/x-pack/plugins/security_solution/public/common/components/drag_and_drop/use_get_timeline_id_from_dom.tsx
new file mode 100644
index 00000000000000..fcb547842aec4d
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/common/components/drag_and_drop/use_get_timeline_id_from_dom.tsx
@@ -0,0 +1,37 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { useEffect, useState } from 'react';
+
+import { SELECTOR_TIMELINE_GLOBAL_CONTAINER } from '../../../timelines/components/timeline/styles';
+
+export const useGetTimelineId = function (
+ elem: React.MutableRefObject,
+ getTimelineId: boolean = false
+) {
+ const [timelineId, setTimelineId] = useState(null);
+
+ useEffect(() => {
+ let startElem: Element | (Node & ParentNode) | null = elem.current;
+ if (startElem != null && getTimelineId) {
+ for (; startElem && startElem !== document; startElem = startElem.parentNode) {
+ const myElem: Element = startElem as Element;
+ if (
+ myElem != null &&
+ myElem.classList != null &&
+ myElem.classList.contains(SELECTOR_TIMELINE_GLOBAL_CONTAINER) &&
+ myElem.hasAttribute('data-timeline-id')
+ ) {
+ setTimelineId(myElem.getAttribute('data-timeline-id'));
+ break;
+ }
+ }
+ }
+ }, [elem, getTimelineId]);
+
+ return timelineId;
+};
diff --git a/x-pack/plugins/security_solution/public/common/components/draggables/__snapshots__/index.test.tsx.snap b/x-pack/plugins/security_solution/public/common/components/draggables/__snapshots__/index.test.tsx.snap
index 93608a181adffa..6b27cf5969f1aa 100644
--- a/x-pack/plugins/security_solution/public/common/components/draggables/__snapshots__/index.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/common/components/draggables/__snapshots__/index.test.tsx.snap
@@ -36,6 +36,7 @@ exports[`draggables rendering it renders the default DefaultDraggable 1`] = `
},
}
}
+ isDraggable={true}
render={[Function]}
/>
`;
diff --git a/x-pack/plugins/security_solution/public/common/components/draggables/index.tsx b/x-pack/plugins/security_solution/public/common/components/draggables/index.tsx
index df92da0c7d0563..6ac1746d77709b 100644
--- a/x-pack/plugins/security_solution/public/common/components/draggables/index.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/draggables/index.tsx
@@ -20,6 +20,7 @@ import { Provider } from '../../../timelines/components/timeline/data_providers/
export interface DefaultDraggableType {
id: string;
+ isDraggable?: boolean;
field: string;
value?: string | null;
name?: string | null;
@@ -79,6 +80,7 @@ Content.displayName = 'Content';
* that's only displayed when the specified value is non-`null`.
*
* @param id - a unique draggable id, which typically follows the format `${contextId}-${eventId}-${field}-${value}`
+ * @param isDraggable - optional prop to disable drag & drop and it will defaulted to true
* @param field - the name of the field, e.g. `network.transport`
* @param value - value of the field e.g. `tcp`
* @param name - defaulting to `field`, this optional human readable name is used by the `DataProvider` that represents the data
@@ -88,7 +90,17 @@ Content.displayName = 'Content';
* @param queryValue - defaults to `value`, this query overrides the `queryMatch.value` used by the `DataProvider` that represents the data
*/
export const DefaultDraggable = React.memo(
- ({ id, field, value, name, children, timelineId, tooltipContent, queryValue }) => {
+ ({
+ id,
+ isDraggable = true,
+ field,
+ value,
+ name,
+ children,
+ timelineId,
+ tooltipContent,
+ queryValue,
+ }) => {
const dataProviderProp: DataProvider = useMemo(
() => ({
and: [],
@@ -125,6 +137,7 @@ export const DefaultDraggable = React.memo(
return (
@@ -155,6 +168,7 @@ export type BadgeDraggableType = Omit & {
* @param field - the name of the field, e.g. `network.transport`
* @param value - value of the field e.g. `tcp`
* @param iconType -the (optional) type of icon e.g. `snowflake` to display on the badge
+ * @param isDraggable
* @param name - defaulting to `field`, this optional human readable name is used by the `DataProvider` that represents the data
* @param color - defaults to `hollow`, optionally overwrite the color of the badge icon
* @param children - defaults to displaying `value`, this allows an arbitrary visualization to be displayed in lieu of the default behavior
@@ -168,6 +182,7 @@ const DraggableBadgeComponent: React.FC = ({
field,
value,
iconType,
+ isDraggable,
name,
color = 'hollow',
children,
@@ -177,6 +192,7 @@ const DraggableBadgeComponent: React.FC = ({
value != null ? (
= ({
key={key}
contextId={key}
eventId={eventId}
+ isDraggable={false}
fieldName={fieldName || 'unknown'}
value={value}
/>
diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/event_fields_browser.test.tsx b/x-pack/plugins/security_solution/public/common/components/event_details/event_fields_browser.test.tsx
index 80c014771ae68d..28a90e94c0ca41 100644
--- a/x-pack/plugins/security_solution/public/common/components/event_details/event_fields_browser.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/event_details/event_fields_browser.test.tsx
@@ -245,7 +245,7 @@ describe('EventFieldsBrowser', () => {
/>
);
- expect(wrapper.find('[data-test-subj="draggable-content-@timestamp"]').at(0).text()).toEqual(
+ expect(wrapper.find('[data-test-subj="localized-date-tool-tip"]').at(0).text()).toEqual(
'Feb 28, 2019 @ 16:50:54.621'
);
});
diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/table/action_cell.tsx b/x-pack/plugins/security_solution/public/common/components/event_details/table/action_cell.tsx
index f5cf600e281ad1..67b1874eea0a00 100644
--- a/x-pack/plugins/security_solution/public/common/components/event_details/table/action_cell.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/event_details/table/action_cell.tsx
@@ -6,11 +6,10 @@
*/
import React, { useCallback, useState, useRef } from 'react';
-import { getDraggableId } from '@kbn/securitysolution-t-grid';
import { HoverActions } from '../../hover_actions';
import { useActionCellDataProvider } from './use_action_cell_data_provider';
import { EventFieldsData } from '../types';
-import { useGetTimelineId } from '../../drag_and_drop/draggable_wrapper_hover_content';
+import { useGetTimelineId } from '../../drag_and_drop/use_get_timeline_id_from_dom';
import { ColumnHeaderOptions } from '../../../../../common/types/timeline';
import { BrowserField } from '../../../containers/source';
@@ -66,11 +65,10 @@ export const ActionCell: React.FC = React.memo(
});
}, []);
- const draggableIds = actionCellConfig?.idList.map((id) => getDraggableId(id));
return (
({
+ and: [],
+ enabled: true,
+ id: escapeDataProviderId(id),
+ name: field,
+ excluded: false,
+ kqlQuery: '',
+ queryMatch: {
+ field,
+ value,
+ operator: IS_OPERATOR,
+ },
+});
+
export const useActionCellDataProvider = ({
contextId,
eventId,
@@ -50,72 +66,90 @@ export const useActionCellDataProvider = ({
isObjectArray,
linkValue,
values,
-}: UseActionCellDataProvider): { idList: string[]; stringValues: string[] } | null => {
- if (values === null || values === undefined) return null;
-
- const stringifiedValues: string[] = [];
- const arrayValues = Array.isArray(values) ? values : [values];
+}: UseActionCellDataProvider): {
+ stringValues: string[];
+ dataProvider: DataProvider[];
+} | null => {
+ const cellData = useMemo(() => {
+ if (values === null || values === undefined) return null;
+ const arrayValues = Array.isArray(values) ? values : [values];
+ return arrayValues.reduce<{
+ stringValues: string[];
+ dataProvider: DataProvider[];
+ }>(
+ (memo, value, index) => {
+ let id: string = '';
+ let valueAsString: string = isString(value) ? value : `${values}`;
+ const appendedUniqueId = `${contextId}-${eventId}-${field}-${index}-${value}`;
+ if (fieldFromBrowserField == null) {
+ memo.stringValues.push(valueAsString);
+ return memo;
+ }
- const idList: string[] = arrayValues.reduce((memo, value, index) => {
- let id = null;
- let valueAsString: string = isString(value) ? value : `${values}`;
- if (fieldFromBrowserField == null) {
- stringifiedValues.push(valueAsString);
- return memo;
- }
- const appendedUniqueId = `${contextId}-${eventId}-${field}-${index}-${value}-${eventId}-${field}-${value}`;
- if (isObjectArray || fieldType === GEO_FIELD_TYPE || [MESSAGE_FIELD_NAME].includes(field)) {
- stringifiedValues.push(valueAsString);
- return memo;
- } else if (fieldType === IP_FIELD_TYPE) {
- id = `formatted-ip-data-provider-${contextId}-${field}-${value}-${eventId}`;
- if (isString(value) && !isEmpty(value)) {
- try {
- const addresses = JSON.parse(value);
- if (isArray(addresses)) {
- valueAsString = addresses.join(',');
+ if (isObjectArray || fieldType === GEO_FIELD_TYPE || [MESSAGE_FIELD_NAME].includes(field)) {
+ memo.stringValues.push(valueAsString);
+ return memo;
+ } else if (fieldType === IP_FIELD_TYPE) {
+ id = `formatted-ip-data-provider-${contextId}-${field}-${value}-${eventId}`;
+ if (isString(value) && !isEmpty(value)) {
+ try {
+ const addresses = JSON.parse(value);
+ if (isArray(addresses)) {
+ valueAsString = addresses.join(',');
+ addresses.forEach((ip) => memo.dataProvider.push(getDataProvider(field, id, ip)));
+ }
+ } catch (_) {
+ // Default to keeping the existing string value
+ }
+ memo.stringValues.push(valueAsString);
+ return memo;
}
- } catch (_) {
- // Default to keeping the existing string value
+ } else if (PORT_NAMES.some((portName) => field === portName)) {
+ id = `port-default-draggable-${appendedUniqueId}`;
+ } else if (field === EVENT_DURATION_FIELD_NAME) {
+ id = `duration-default-draggable-${appendedUniqueId}`;
+ } else if (field === HOST_NAME_FIELD_NAME) {
+ id = `event-details-value-default-draggable-${appendedUniqueId}`;
+ } else if (fieldFormat === BYTES_FORMAT) {
+ id = `bytes-default-draggable-${appendedUniqueId}`;
+ } else if (field === SIGNAL_RULE_NAME_FIELD_NAME) {
+ id = `event-details-value-default-draggable-${appendedUniqueId}-${linkValue}`;
+ } else if (field === EVENT_MODULE_FIELD_NAME) {
+ id = `event-details-value-default-draggable-${appendedUniqueId}-${value}`;
+ } else if (field === SIGNAL_STATUS_FIELD_NAME) {
+ id = `alert-details-value-default-draggable-${appendedUniqueId}`;
+ } else if (field === AGENT_STATUS_FIELD_NAME) {
+ const valueToUse = typeof value === 'string' ? value : '';
+ id = `event-details-value-default-draggable-${appendedUniqueId}`;
+ valueAsString = valueToUse;
+ } else if (
+ [
+ RULE_REFERENCE_FIELD_NAME,
+ REFERENCE_URL_FIELD_NAME,
+ EVENT_URL_FIELD_NAME,
+ INDICATOR_REFERENCE,
+ ].includes(field)
+ ) {
+ id = `event-details-value-default-draggable-${appendedUniqueId}-${value}`;
+ } else {
+ id = `event-details-value-default-draggable-${appendedUniqueId}`;
}
- }
- } else if (PORT_NAMES.some((portName) => field === portName)) {
- id = `port-default-draggable-${appendedUniqueId}`;
- } else if (field === EVENT_DURATION_FIELD_NAME) {
- id = `duration-default-draggable-${appendedUniqueId}`;
- } else if (field === HOST_NAME_FIELD_NAME) {
- id = `event-details-value-default-draggable-${appendedUniqueId}`;
- } else if (fieldFormat === BYTES_FORMAT) {
- id = `bytes-default-draggable-${appendedUniqueId}`;
- } else if (field === SIGNAL_RULE_NAME_FIELD_NAME) {
- id = `event-details-value-default-draggable-${appendedUniqueId}-${linkValue}`;
- } else if (field === EVENT_MODULE_FIELD_NAME) {
- id = `event-details-value-default-draggable-${appendedUniqueId}-${value}`;
- } else if (field === SIGNAL_STATUS_FIELD_NAME) {
- id = `alert-details-value-default-draggable-${appendedUniqueId}`;
- } else if (field === AGENT_STATUS_FIELD_NAME) {
- const valueToUse = typeof value === 'string' ? value : '';
- id = `event-details-value-default-draggable-${appendedUniqueId}`;
- valueAsString = valueToUse;
- } else if (
- [
- RULE_REFERENCE_FIELD_NAME,
- REFERENCE_URL_FIELD_NAME,
- EVENT_URL_FIELD_NAME,
- INDICATOR_REFERENCE,
- ].includes(field)
- ) {
- id = `event-details-value-default-draggable-${appendedUniqueId}-${value}`;
- } else {
- id = `event-details-value-default-draggable-${appendedUniqueId}`;
- }
- stringifiedValues.push(valueAsString);
- memo.push(escapeDataProviderId(id));
- return memo;
- }, [] as string[]);
-
- return {
- idList,
- stringValues: stringifiedValues,
- };
+ memo.stringValues.push(valueAsString);
+ memo.dataProvider.push(getDataProvider(field, id, value));
+ return memo;
+ },
+ { stringValues: [], dataProvider: [] }
+ );
+ }, [
+ contextId,
+ eventId,
+ field,
+ fieldFormat,
+ fieldFromBrowserField,
+ fieldType,
+ isObjectArray,
+ linkValue,
+ values,
+ ]);
+ return cellData;
};
diff --git a/x-pack/plugins/security_solution/public/common/components/hover_actions/index.tsx b/x-pack/plugins/security_solution/public/common/components/hover_actions/index.tsx
index 31bdf78626e7cb..a1ba33f30cc55c 100644
--- a/x-pack/plugins/security_solution/public/common/components/hover_actions/index.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/hover_actions/index.tsx
@@ -6,16 +6,17 @@
*/
import { EuiFocusTrap, EuiScreenReaderOnly } from '@elastic/eui';
-import React, { useCallback, useEffect, useRef, useMemo } from 'react';
+import React, { useCallback, useEffect, useRef, useMemo, useState } from 'react';
import { DraggableId } from 'react-beautiful-dnd';
import styled from 'styled-components';
import { i18n } from '@kbn/i18n';
-import { getAllFieldsByName } from '../../containers/source';
-import { COPY_TO_CLIPBOARD_BUTTON_CLASS_NAME } from '../../lib/clipboard/clipboard';
+import { isEmpty } from 'lodash';
+
import { useKibana } from '../../lib/kibana';
+import { getAllFieldsByName } from '../../containers/source';
import { allowTopN } from './utils';
import { useDeepEqualSelector } from '../../hooks/use_selector';
-import { ColumnHeaderOptions, TimelineId } from '../../../../common/types/timeline';
+import { ColumnHeaderOptions, DataProvider, TimelineId } from '../../../../common/types/timeline';
import { SourcererScopeName } from '../../store/sourcerer/model';
import { useSourcererScope } from '../../containers/sourcerer';
import { timelineSelectors } from '../../../timelines/store/timeline';
@@ -38,43 +39,51 @@ export const AdditionalContent = styled.div`
AdditionalContent.displayName = 'AdditionalContent';
-const StyledHoverActionsContainer = styled.div<{ $showTopN: boolean }>`
+const StyledHoverActionsContainer = styled.div<{ $showTopN: boolean; $showOwnFocus: boolean }>`
padding: ${(props) => `0 ${props.theme.eui.paddingSizes.s}`};
display: flex;
- &:focus-within {
- .timelines__hoverActionButton,
- .securitySolution__hoverActionButton {
- opacity: 1;
+ ${(props) =>
+ props.$showOwnFocus
+ ? `
+ &:focus-within {
+ .timelines__hoverActionButton,
+ .securitySolution__hoverActionButton {
+ opacity: 1;
+ }
}
- }
- &:hover {
- .timelines__hoverActionButton,
- .securitySolution__hoverActionButton {
- opacity: 1;
+ &:hover {
+ .timelines__hoverActionButton,
+ .securitySolution__hoverActionButton {
+ opacity: 1;
+ }
}
- }
.timelines__hoverActionButton,
.securitySolution__hoverActionButton {
- opacity: ${(props) => (props.$showTopN ? 1 : 0)};
+ opacity: ${props.$showTopN ? 1 : 0};
- &:focus {
- opacity: 1;
+ &:focus {
+ opacity: 1;
+ }
}
- }
+ `
+ : ''}
`;
interface Props {
additionalContent?: React.ReactNode;
+ closePopOver?: () => void;
+ dataProvider?: DataProvider | DataProvider[];
dataType?: string;
- draggableIds?: DraggableId[];
+ draggableId?: DraggableId;
field: string;
goGetTimelineId?: (args: boolean) => void;
isObjectArray: boolean;
onFilterAdded?: () => void;
ownFocus: boolean;
+ showOwnFocus?: boolean;
showTopN: boolean;
timelineId?: string | null;
toggleColumn?: (column: ColumnHeaderOptions) => void;
@@ -100,13 +109,15 @@ const isFocusTrapDisabled = ({
export const HoverActions: React.FC = React.memo(
({
additionalContent = null,
+ dataProvider,
dataType,
- draggableIds,
+ draggableId,
field,
goGetTimelineId,
isObjectArray,
onFilterAdded,
ownFocus,
+ showOwnFocus = true,
showTopN,
timelineId,
toggleColumn,
@@ -117,29 +128,13 @@ export const HoverActions: React.FC = React.memo(
const { timelines } = kibana.services;
// Common actions used by the alert table and alert flyout
const {
- addToTimeline: {
- AddToTimelineButton,
- keyboardShortcut: addToTimelineKeyboardShortcut,
- useGetHandleStartDragToTimeline,
- },
- columnToggle: {
- ColumnToggleButton,
- columnToggleFn,
- keyboardShortcut: columnToggleKeyboardShortcut,
- },
- copy: { CopyButton, keyboardShortcut: copyKeyboardShortcut },
- filterForValue: {
- FilterForValueButton,
- filterForValueFn,
- keyboardShortcut: filterForValueKeyboardShortcut,
- },
- filterOutValue: {
- FilterOutValueButton,
- filterOutValueFn,
- keyboardShortcut: filterOutValueKeyboardShortcut,
- },
+ getAddToTimelineButton,
+ getColumnToggleButton,
+ getCopyButton,
+ getFilterForValueButton,
+ getFilterOutValueButton,
} = timelines.getHoverActions();
-
+ const [stKeyboardEvent, setStKeyboardEvent] = useState();
const filterManagerBackup = useMemo(() => kibana.services.data.query.filterManager, [
kibana.services.data.query.filterManager,
]);
@@ -169,30 +164,8 @@ export const HoverActions: React.FC = React.memo(
: SourcererScopeName.default;
const { browserFields } = useSourcererScope(activeScope);
- const handleStartDragToTimeline = (() => {
- const handleStartDragToTimelineFns = draggableIds?.map((draggableId) => {
- // eslint-disable-next-line react-hooks/rules-of-hooks
- return useGetHandleStartDragToTimeline({ draggableId, field });
- });
- return () => handleStartDragToTimelineFns?.forEach((dragFn) => dragFn());
- })();
-
- const handleFilterForValue = useCallback(() => {
- filterForValueFn({ field, value: values, filterManager, onFilterAdded });
- }, [filterForValueFn, field, values, filterManager, onFilterAdded]);
-
- const handleFilterOutValue = useCallback(() => {
- filterOutValueFn({ field, value: values, filterManager, onFilterAdded });
- }, [filterOutValueFn, field, values, filterManager, onFilterAdded]);
-
- const handleToggleColumn = useCallback(
- () => (toggleColumn ? columnToggleFn({ toggleColumn, field }) : null),
- [columnToggleFn, field, toggleColumn]
- );
-
const isInit = useRef(true);
const defaultFocusedButtonRef = useRef(null);
- const panelRef = useRef(null);
useEffect(() => {
if (isInit.current && goGetTimelineId != null && timelineId == null) {
@@ -215,31 +188,6 @@ export const HoverActions: React.FC = React.memo(
return;
}
switch (keyboardEvent.key) {
- case addToTimelineKeyboardShortcut:
- stopPropagationAndPreventDefault(keyboardEvent);
- handleStartDragToTimeline();
- break;
- case columnToggleKeyboardShortcut:
- stopPropagationAndPreventDefault(keyboardEvent);
- handleToggleColumn();
- break;
- case copyKeyboardShortcut:
- stopPropagationAndPreventDefault(keyboardEvent);
- const copyToClipboardButton = panelRef.current?.querySelector(
- `.${COPY_TO_CLIPBOARD_BUTTON_CLASS_NAME}`
- );
- if (copyToClipboardButton != null) {
- copyToClipboardButton.click();
- }
- break;
- case filterForValueKeyboardShortcut:
- stopPropagationAndPreventDefault(keyboardEvent);
- handleFilterForValue();
- break;
- case filterOutValueKeyboardShortcut:
- stopPropagationAndPreventDefault(keyboardEvent);
- handleFilterOutValue();
- break;
case SHOW_TOP_N_KEYBOARD_SHORTCUT:
stopPropagationAndPreventDefault(keyboardEvent);
toggleTopN();
@@ -250,33 +198,26 @@ export const HoverActions: React.FC = React.memo(
stopPropagationAndPreventDefault(keyboardEvent);
break;
default:
+ setStKeyboardEvent(keyboardEvent);
break;
}
},
- [
- addToTimelineKeyboardShortcut,
- columnToggleKeyboardShortcut,
- copyKeyboardShortcut,
- filterForValueKeyboardShortcut,
- filterOutValueKeyboardShortcut,
- handleFilterForValue,
- handleFilterOutValue,
- handleStartDragToTimeline,
- handleToggleColumn,
- ownFocus,
- toggleTopN,
- ]
+ [ownFocus, toggleTopN]
);
const showFilters = values != null;
return (
-
-
+
{YOU_ARE_IN_A_DIALOG_CONTAINING_OPTIONS(field)}
@@ -286,46 +227,58 @@ export const HoverActions: React.FC = React.memo(
{showFilters && (
<>
-
-
+
+ {getFilterForValueButton({
+ defaultFocusedButtonRef,
+ field,
+ filterManager,
+ keyboardEvent: stKeyboardEvent,
+ onFilterAdded,
+ ownFocus,
+ showTooltip: true,
+ value: values,
+ })}
+
+
+ {getFilterOutValueButton({
+ field,
+ filterManager,
+ keyboardEvent: stKeyboardEvent,
+ onFilterAdded,
+ ownFocus,
+ showTooltip: true,
+ value: values,
+ })}
+
)}
{toggleColumn && (
-
+
+ {getColumnToggleButton({
+ field,
+ isDisabled: isObjectArray && dataType !== 'geo_point',
+ isObjectArray,
+ keyboardEvent: stKeyboardEvent,
+ ownFocus,
+ showTooltip: true,
+ toggleColumn,
+ value: values,
+ })}
+
)}
- {showFilters && draggableIds != null && (
-
+ {showFilters && (draggableId != null || !isEmpty(dataProvider)) && (
+
+ {getAddToTimelineButton({
+ dataProvider,
+ draggableId,
+ field,
+ keyboardEvent: stKeyboardEvent,
+ ownFocus,
+ showTooltip: true,
+ value: values,
+ })}
+
)}
{allowTopN({
browserField: getAllFieldsByName(browserFields)[field],
@@ -342,18 +295,20 @@ export const HoverActions: React.FC = React.memo(
value={values}
/>
)}
- {showFilters && (
-
+ {field != null && (
+
+ {getCopyButton({
+ field,
+ isHoverAction: true,
+ keyboardEvent: stKeyboardEvent,
+ ownFocus,
+ showTooltip: true,
+ value: values,
+ })}
+
)}
-
-
+
+
);
}
);
diff --git a/x-pack/plugins/security_solution/public/common/components/hover_actions/use_hover_actions.tsx b/x-pack/plugins/security_solution/public/common/components/hover_actions/use_hover_actions.tsx
new file mode 100644
index 00000000000000..373f944b70a815
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/common/components/hover_actions/use_hover_actions.tsx
@@ -0,0 +1,178 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { useCallback, useMemo, useState, useRef } from 'react';
+import { DraggableProvided, DraggableStateSnapshot } from 'react-beautiful-dnd';
+import { HoverActions } from '.';
+
+import { DataProvider } from '../../../../common/types';
+import { ProviderContentWrapper } from '../drag_and_drop/draggable_wrapper';
+import { getDraggableId } from '../drag_and_drop/helpers';
+import { useGetTimelineId } from '../drag_and_drop/use_get_timeline_id_from_dom';
+
+const draggableContainsLinks = (draggableElement: HTMLDivElement | null) => {
+ const links = draggableElement?.querySelectorAll('.euiLink') ?? [];
+ return links.length > 0;
+};
+
+type RenderFunctionProp = (
+ props: DataProvider,
+ provided: DraggableProvided | null,
+ state: DraggableStateSnapshot
+) => React.ReactNode;
+
+interface Props {
+ dataProvider: DataProvider;
+ disabled?: boolean;
+ isDraggable?: boolean;
+ inline?: boolean;
+ render: RenderFunctionProp;
+ timelineId?: string;
+ truncate?: boolean;
+ onFilterAdded?: () => void;
+}
+
+export const useHoverActions = ({
+ dataProvider,
+ isDraggable,
+ onFilterAdded,
+ render,
+ timelineId,
+}: Props) => {
+ const containerRef = useRef(null);
+ const keyboardHandlerRef = useRef(null);
+ const [closePopOverTrigger, setClosePopOverTrigger] = useState(false);
+ const [showTopN, setShowTopN] = useState(false);
+ const [hoverActionsOwnFocus, setHoverActionsOwnFocus] = useState(false);
+ const [goGetTimelineId, setGoGetTimelineId] = useState(false);
+ const timelineIdFind = useGetTimelineId(containerRef, goGetTimelineId);
+
+ const handleClosePopOverTrigger = useCallback(() => {
+ setClosePopOverTrigger((prevClosePopOverTrigger) => !prevClosePopOverTrigger);
+ setHoverActionsOwnFocus((prevHoverActionsOwnFocus) => {
+ if (prevHoverActionsOwnFocus) {
+ setTimeout(() => {
+ keyboardHandlerRef.current?.focus();
+ }, 0);
+ }
+ return false; // always give up ownership
+ });
+
+ setTimeout(() => {
+ setHoverActionsOwnFocus(false);
+ }, 0); // invoked on the next tick, because we want to restore focus first
+ }, [keyboardHandlerRef]);
+
+ const toggleTopN = useCallback(() => {
+ setShowTopN((prevShowTopN) => {
+ const newShowTopN = !prevShowTopN;
+ if (newShowTopN === false) {
+ handleClosePopOverTrigger();
+ }
+ return newShowTopN;
+ });
+ }, [handleClosePopOverTrigger]);
+
+ const hoverContent = useMemo(() => {
+ // display links as additional content in the hover menu to enable keyboard
+ // navigation of links (when the draggable contains them):
+ const additionalContent =
+ hoverActionsOwnFocus && !showTopN && draggableContainsLinks(containerRef.current) ? (
+
+ {render(dataProvider, null, { isDragging: false, isDropAnimating: false })}
+
+ ) : null;
+
+ return (
+
+ );
+ }, [
+ dataProvider,
+ handleClosePopOverTrigger,
+ hoverActionsOwnFocus,
+ isDraggable,
+ onFilterAdded,
+ render,
+ showTopN,
+ timelineId,
+ timelineIdFind,
+ toggleTopN,
+ ]);
+
+ const setContainerRef = useCallback((e: HTMLDivElement) => {
+ containerRef.current = e;
+ }, []);
+
+ const onFocus = useCallback(() => {
+ if (!hoverActionsOwnFocus) {
+ keyboardHandlerRef.current?.focus();
+ }
+ }, [hoverActionsOwnFocus, keyboardHandlerRef]);
+
+ const onCloseRequested = useCallback(() => {
+ setShowTopN(false);
+
+ if (hoverActionsOwnFocus) {
+ setHoverActionsOwnFocus(false);
+
+ setTimeout(() => {
+ onFocus(); // return focus to this draggable on the next tick, because we owned focus
+ }, 0);
+ }
+ }, [onFocus, hoverActionsOwnFocus]);
+
+ const openPopover = useCallback(() => {
+ setHoverActionsOwnFocus(true);
+ }, []);
+
+ return useMemo(
+ () => ({
+ closePopOverTrigger,
+ handleClosePopOverTrigger,
+ hoverActionsOwnFocus,
+ hoverContent,
+ keyboardHandlerRef,
+ onCloseRequested,
+ onFocus,
+ openPopover,
+ setContainerRef,
+ showTopN,
+ }),
+ [
+ closePopOverTrigger,
+ handleClosePopOverTrigger,
+ hoverActionsOwnFocus,
+ hoverContent,
+ onCloseRequested,
+ onFocus,
+ openPopover,
+ setContainerRef,
+ showTopN,
+ ]
+ );
+};
diff --git a/x-pack/plugins/security_solution/public/common/components/ml/tables/get_anomalies_host_table_columns.test.tsx b/x-pack/plugins/security_solution/public/common/components/ml/tables/get_anomalies_host_table_columns.test.tsx
index 2ecda8482e3400..45883019b9ff83 100644
--- a/x-pack/plugins/security_solution/public/common/components/ml/tables/get_anomalies_host_table_columns.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/ml/tables/get_anomalies_host_table_columns.test.tsx
@@ -70,67 +70,6 @@ describe('get_anomalies_host_table_columns', () => {
expect(columns.some((col) => col.name === i18n.HOST_NAME)).toEqual(false);
});
- test('on host page, we should escape the draggable id', () => {
- const columns = getAnomaliesHostTableColumnsCurated(
- HostsType.page,
- startDate,
- endDate,
- interval,
- narrowDateRange
- );
- const column = columns.find((col) => col.name === i18n.SCORE) as Columns<
- string,
- AnomaliesByHost
- >;
- const anomaly: AnomaliesByHost = {
- hostName: 'host.name',
- anomaly: {
- detectorIndex: 0,
- entityName: 'entity-name-1',
- entityValue: 'entity-value-1',
- influencers: [],
- jobId: 'job-1',
- rowId: 'row-1',
- severity: 100,
- time: new Date('01/01/2000').valueOf(),
- source: {
- job_id: 'job-1',
- result_type: 'result-1',
- probability: 50,
- multi_bucket_impact: 0,
- record_score: 0,
- initial_record_score: 0,
- bucket_span: 0,
- detector_index: 0,
- is_interim: true,
- timestamp: new Date('01/01/2000').valueOf(),
- by_field_name: 'some field name',
- by_field_value: 'some field value',
- partition_field_name: 'partition field name',
- partition_field_value: 'partition field value',
- function: 'function-1',
- function_description: 'description-1',
- typical: [5, 3],
- actual: [7, 4],
- influencers: [],
- },
- },
- };
- if (column != null && column.render != null) {
- const wrapper = mount({column.render('', anomaly)});
- expect(
- wrapper
- .find(
- '[draggableId="draggableId.content.anomalies-host-table-severity-host_name-entity-name-1-entity-value-1-100-job-1"]'
- )
- .first()
- .exists()
- ).toBe(true);
- } else {
- expect(column).not.toBe(null);
- }
- });
-
test('on host page, undefined influencers should turn into an empty column string', () => {
const columns = getAnomaliesHostTableColumnsCurated(
HostsType.page,
diff --git a/x-pack/plugins/security_solution/public/common/components/ml/tables/get_anomalies_network_table_columns.test.tsx b/x-pack/plugins/security_solution/public/common/components/ml/tables/get_anomalies_network_table_columns.test.tsx
index 48c2ec3ee38d81..817205ce22808d 100644
--- a/x-pack/plugins/security_solution/public/common/components/ml/tables/get_anomalies_network_table_columns.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/ml/tables/get_anomalies_network_table_columns.test.tsx
@@ -43,62 +43,6 @@ describe('get_anomalies_network_table_columns', () => {
expect(columns.some((col) => col.name === i18n.NETWORK_NAME)).toEqual(false);
});
- test('on network page, we should escape the draggable id', () => {
- const columns = getAnomaliesNetworkTableColumnsCurated(NetworkType.page, startDate, endDate);
- const column = columns.find((col) => col.name === i18n.SCORE) as Columns<
- string,
- AnomaliesByNetwork
- >;
- const anomaly: AnomaliesByNetwork = {
- type: 'source.ip',
- ip: '127.0.0.1',
- anomaly: {
- detectorIndex: 0,
- entityName: 'entity-name-1',
- entityValue: 'entity-value-1',
- influencers: [],
- jobId: 'job-1',
- rowId: 'row-1',
- severity: 100,
- time: new Date('01/01/2000').valueOf(),
- source: {
- job_id: 'job-1',
- result_type: 'result-1',
- probability: 50,
- multi_bucket_impact: 0,
- record_score: 0,
- initial_record_score: 0,
- bucket_span: 0,
- detector_index: 0,
- is_interim: true,
- timestamp: new Date('01/01/2000').valueOf(),
- by_field_name: 'some field name',
- by_field_value: 'some field value',
- partition_field_name: 'partition field name',
- partition_field_value: 'partition field value',
- function: 'function-1',
- function_description: 'description-1',
- typical: [5, 3],
- actual: [7, 4],
- influencers: [],
- },
- },
- };
- if (column != null && column.render != null) {
- const wrapper = mount({column.render('', anomaly)});
- expect(
- wrapper
- .find(
- '[draggableId="draggableId.content.anomalies-network-table-severity-127_0_0_1-entity-name-1-entity-value-1-100-job-1"]'
- )
- .first()
- .exists()
- ).toBe(true);
- } else {
- expect(column).not.toBe(null);
- }
- });
-
test('on network page, undefined influencers should turn into an empty column string', () => {
const columns = getAnomaliesNetworkTableColumnsCurated(NetworkType.page, startDate, endDate);
const column = columns.find((col) => col.name === i18n.INFLUENCED_BY) as Columns<
diff --git a/x-pack/plugins/security_solution/public/common/components/tables/helpers.test.tsx b/x-pack/plugins/security_solution/public/common/components/tables/helpers.test.tsx
index c122138f9547a5..10e4538c802ad8 100644
--- a/x-pack/plugins/security_solution/public/common/components/tables/helpers.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/tables/helpers.test.tsx
@@ -55,7 +55,7 @@ describe('Table Helpers', () => {
displayCount: 0,
});
const wrapper = mount({rowItem});
- expect(wrapper.find('[data-test-subj="draggable-content-attrName"]').first().text()).toBe(
+ expect(wrapper.find('[data-test-subj="render-content-attrName"]').first().text()).toBe(
'(Empty String)'
);
});
@@ -81,7 +81,7 @@ describe('Table Helpers', () => {
render: renderer,
});
const wrapper = mount({rowItem});
- expect(wrapper.find('[data-test-subj="draggable-content-attrName"]').first().text()).toBe(
+ expect(wrapper.find('[data-test-subj="render-content-attrName"]').first().text()).toBe(
'Hi item1 renderer'
);
});
@@ -116,7 +116,7 @@ describe('Table Helpers', () => {
idPrefix: 'idPrefix',
});
const wrapper = mount({rowItems});
- expect(wrapper.find('[data-test-subj="draggable-content-attrName"]').first().text()).toBe(
+ expect(wrapper.find('[data-test-subj="render-content-attrName"]').first().text()).toBe(
'(Empty String)'
);
});
@@ -163,7 +163,7 @@ describe('Table Helpers', () => {
displayCount: 2,
});
const wrapper = mount({rowItems});
- expect(wrapper.find('[data-test-subj="draggableWrapperDiv"]').hostNodes().length).toBe(2);
+ expect(wrapper.find('[data-test-subj="withHoverActionsButton"]').hostNodes().length).toBe(2);
});
test('it uses custom renderer', () => {
@@ -175,7 +175,7 @@ describe('Table Helpers', () => {
render: renderer,
});
const wrapper = mount({rowItems});
- expect(wrapper.find('[data-test-subj="draggable-content-attrName"]').first().text()).toBe(
+ expect(wrapper.find('[data-test-subj="render-content-attrName"]').first().text()).toBe(
'Hi item1 renderer'
);
});
diff --git a/x-pack/plugins/security_solution/public/common/lib/kibana/hooks.ts b/x-pack/plugins/security_solution/public/common/lib/kibana/hooks.ts
index b9bbf7afd36265..adc06468d9a024 100644
--- a/x-pack/plugins/security_solution/public/common/lib/kibana/hooks.ts
+++ b/x-pack/plugins/security_solution/public/common/lib/kibana/hooks.ts
@@ -62,6 +62,7 @@ export const convertArrayToCamelCase = (arrayOfSnakes: unknown[]): unknown[] =>
return [...acc, value];
}
}, []);
+
export const convertToCamelCase = (snakeCase: T): U =>
Object.entries(snakeCase).reduce((acc, [key, value]) => {
if (isArray(value)) {
@@ -73,6 +74,7 @@ export const convertToCamelCase = (snakeCase: T): U =>
}
return acc;
}, {} as U);
+
export const useCurrentUser = (): AuthenticatedElasticUser | null => {
const isMounted = useRef(false);
const [user, setUser] = useState(null);
diff --git a/x-pack/plugins/security_solution/public/detections/components/rules/rule_actions_field/index.tsx b/x-pack/plugins/security_solution/public/detections/components/rules/rule_actions_field/index.tsx
index 2206960f6bcd3a..55154def55b501 100644
--- a/x-pack/plugins/security_solution/public/detections/components/rules/rule_actions_field/index.tsx
+++ b/x-pack/plugins/security_solution/public/detections/components/rules/rule_actions_field/index.tsx
@@ -21,7 +21,7 @@ import {
ActionVariables,
} from '../../../../../../triggers_actions_ui/public';
import { AlertAction } from '../../../../../../alerting/common';
-import { useKibana } from '../../../../common/lib/kibana';
+import { convertArrayToCamelCase, useKibana } from '../../../../common/lib/kibana';
import { FORM_ERRORS_TITLE } from './translations';
interface Props {
@@ -137,7 +137,7 @@ export const RuleActionsField: React.FC = ({
useEffect(() => {
(async function () {
- const actionTypes = await loadActionTypes({ http });
+ const actionTypes = convertArrayToCamelCase(await loadActionTypes({ http })) as ActionType[];
const supportedTypes = getSupportedActions(actionTypes, hasErrorOnCreationCaseAction);
setSupportedActionTypes(supportedTypes);
})();
diff --git a/x-pack/plugins/security_solution/public/detections/components/rules/step_rule_actions/use_manage_case_action.tsx b/x-pack/plugins/security_solution/public/detections/components/rules/step_rule_actions/use_manage_case_action.tsx
index c19e5c26bdc942..6fd90adfc0e06b 100644
--- a/x-pack/plugins/security_solution/public/detections/components/rules/step_rule_actions/use_manage_case_action.tsx
+++ b/x-pack/plugins/security_solution/public/detections/components/rules/step_rule_actions/use_manage_case_action.tsx
@@ -6,11 +6,11 @@
*/
import { useEffect, useRef, useState } from 'react';
-import { ACTION_URL } from '../../../../../../cases/common';
-import { KibanaServices } from '../../../../common/lib/kibana';
+import { getAllConnectorsUrl, getCreateConnectorUrl } from '../../../../../../cases/common';
+import { convertArrayToCamelCase, KibanaServices } from '../../../../common/lib/kibana';
interface CaseAction {
- actionTypeId: string;
+ connectorTypeId: string;
id: string;
isPreconfigured: boolean;
name: string;
@@ -28,15 +28,18 @@ export const useManageCaseAction = () => {
const abortCtrl = new AbortController();
const fetchActions = async () => {
try {
- const actions = await KibanaServices.get().http.fetch(ACTION_URL, {
- method: 'GET',
- signal: abortCtrl.signal,
- });
- if (!actions.some((a) => a.actionTypeId === '.case' && a.name === CASE_ACTION_NAME)) {
- await KibanaServices.get().http.post(`${ACTION_URL}/action`, {
+ const actions = convertArrayToCamelCase(
+ await KibanaServices.get().http.fetch(getAllConnectorsUrl(), {
+ method: 'GET',
+ signal: abortCtrl.signal,
+ })
+ ) as CaseAction[];
+
+ if (!actions.some((a) => a.connectorTypeId === '.case' && a.name === CASE_ACTION_NAME)) {
+ await KibanaServices.get().http.post(getCreateConnectorUrl(), {
method: 'POST',
body: JSON.stringify({
- actionTypeId: '.case',
+ connector_type_id: '.case',
config: {},
name: CASE_ACTION_NAME,
secrets: {},
diff --git a/x-pack/plugins/security_solution/public/network/components/direction/index.tsx b/x-pack/plugins/security_solution/public/network/components/direction/index.tsx
index 7c6bb50378d9c7..d87756cb9bbab0 100644
--- a/x-pack/plugins/security_solution/public/network/components/direction/index.tsx
+++ b/x-pack/plugins/security_solution/public/network/components/direction/index.tsx
@@ -60,13 +60,15 @@ export const DirectionBadge = React.memo<{
contextId: string;
direction?: string | null;
eventId: string;
-}>(({ contextId, eventId, direction }) => (
+ isDraggable?: boolean;
+}>(({ contextId, eventId, direction, isDraggable }) => (
));
diff --git a/x-pack/plugins/security_solution/public/network/components/ip/index.tsx b/x-pack/plugins/security_solution/public/network/components/ip/index.tsx
index a08b8003f142c0..2fa3e988784ca0 100644
--- a/x-pack/plugins/security_solution/public/network/components/ip/index.tsx
+++ b/x-pack/plugins/security_solution/public/network/components/ip/index.tsx
@@ -22,13 +22,15 @@ export const Ip = React.memo<{
contextId: string;
eventId: string;
fieldName: string;
+ isDraggable?: boolean;
value?: string | null;
-}>(({ contextId, eventId, fieldName, value }) => (
+}>(({ contextId, eventId, fieldName, isDraggable, value }) => (
diff --git a/x-pack/plugins/security_solution/public/network/components/port/index.tsx b/x-pack/plugins/security_solution/public/network/components/port/index.tsx
index df288c1abfb06c..4afd9bc7b892a5 100644
--- a/x-pack/plugins/security_solution/public/network/components/port/index.tsx
+++ b/x-pack/plugins/security_solution/public/network/components/port/index.tsx
@@ -29,7 +29,7 @@ export const Port = React.memo<{
contextId: string;
eventId: string;
fieldName: string;
- isDraggable: boolean;
+ isDraggable?: boolean;
value: string | undefined | null;
}>(({ contextId, eventId, fieldName, isDraggable, value }) =>
isDraggable ? (
@@ -37,6 +37,7 @@ export const Port = React.memo<{
data-test-subj="port"
field={fieldName}
id={`port-default-draggable-${contextId}-${eventId}-${fieldName}-${value}`}
+ isDraggable={isDraggable}
tooltipContent={fieldName}
value={value}
>
diff --git a/x-pack/plugins/security_solution/public/network/components/source_destination/geo_fields.tsx b/x-pack/plugins/security_solution/public/network/components/source_destination/geo_fields.tsx
index 1f6111cd0bb079..65bd3bf1ec154c 100644
--- a/x-pack/plugins/security_solution/public/network/components/source_destination/geo_fields.tsx
+++ b/x-pack/plugins/security_solution/public/network/components/source_destination/geo_fields.tsx
@@ -73,8 +73,9 @@ const GeoFieldValues = React.memo<{
contextId: string;
eventId: string;
fieldName: string;
+ isDraggable?: boolean;
values?: string[] | null;
-}>(({ contextId, eventId, fieldName, values }) =>
+}>(({ contextId, eventId, fieldName, isDraggable, values }) =>
values != null ? (
<>
{uniq(values).map((value) => (
@@ -92,6 +93,7 @@ const GeoFieldValues = React.memo<{
data-test-subj={fieldName}
field={fieldName}
id={`geo-field-values-default-draggable-${contextId}-${eventId}-${fieldName}-${value}`}
+ isDraggable={isDraggable}
tooltipContent={fieldName}
value={value}
/>
@@ -114,7 +116,7 @@ GeoFieldValues.displayName = 'GeoFieldValues';
* - `source|destination.geo.city_name`
*/
export const GeoFields = React.memo((props) => {
- const { contextId, eventId, type } = props;
+ const { contextId, eventId, isDraggable, type } = props;
const propNameToFieldName = getGeoFieldPropNameToFieldNameMap(type);
return (
@@ -124,6 +126,7 @@ export const GeoFields = React.memo((props) => {
contextId={contextId}
eventId={eventId}
fieldName={geo.fieldName}
+ isDraggable={isDraggable}
key={geo.fieldName}
values={get(geo.prop, props)}
/>
diff --git a/x-pack/plugins/security_solution/public/network/components/source_destination/index.tsx b/x-pack/plugins/security_solution/public/network/components/source_destination/index.tsx
index 57e302d2911fa3..d7bcf9f6c52971 100644
--- a/x-pack/plugins/security_solution/public/network/components/source_destination/index.tsx
+++ b/x-pack/plugins/security_solution/public/network/components/source_destination/index.tsx
@@ -36,6 +36,7 @@ export const SourceDestination = React.memo(
destinationPackets,
destinationPort,
eventId,
+ isDraggable,
networkBytes,
networkCommunityId,
networkDirection,
@@ -59,8 +60,9 @@ export const SourceDestination = React.memo(
packets={networkPackets}
communityId={networkCommunityId}
contextId={contextId}
- eventId={eventId}
direction={networkDirection}
+ eventId={eventId}
+ isDraggable={isDraggable}
protocol={networkProtocol}
transport={transport}
/>
@@ -79,6 +81,7 @@ export const SourceDestination = React.memo |