From 78b1644cad85b30d81e5a033499884313d4ad49f Mon Sep 17 00:00:00 2001 From: Zacqary Adam Xeper Date: Thu, 9 Jan 2020 11:32:56 -0600 Subject: [PATCH] [Metrics UI] Pass relevant shouldAllowEdit capabilities into SettingsPage (#49781) (#54296) * [Metrics UI] Pass relevant shouldAllowEdit capabilities into SettingsPage * Split settings pages in two; add loading screen to settings page * Restore timestamp field to metrics screen Co-authored-by: Elastic Machine Co-authored-by: Elastic Machine --- .../fields_configuration_panel.tsx | 386 +++++++++--------- .../indices_configuration_panel.tsx | 172 ++++---- .../source_configuration_settings.tsx | 30 +- .../public/pages/infrastructure/index.tsx | 4 +- .../public/pages/infrastructure/settings.tsx | 19 + .../plugins/infra/public/pages/logs/index.tsx | 4 +- .../settings/index.tsx => logs/settings.tsx} | 7 +- 7 files changed, 334 insertions(+), 288 deletions(-) create mode 100644 x-pack/legacy/plugins/infra/public/pages/infrastructure/settings.tsx rename x-pack/legacy/plugins/infra/public/pages/{shared/settings/index.tsx => logs/settings.tsx} (64%) diff --git a/x-pack/legacy/plugins/infra/public/components/source_configuration/fields_configuration_panel.tsx b/x-pack/legacy/plugins/infra/public/components/source_configuration/fields_configuration_panel.tsx index 5f3d1a63e72eb..e65753ef24e9e 100644 --- a/x-pack/legacy/plugins/infra/public/components/source_configuration/fields_configuration_panel.tsx +++ b/x-pack/legacy/plugins/infra/public/components/source_configuration/fields_configuration_panel.tsx @@ -26,6 +26,7 @@ interface FieldsConfigurationPanelProps { podFieldProps: InputFieldProps; tiebreakerFieldProps: InputFieldProps; timestampFieldProps: InputFieldProps; + displaySettings: 'metrics' | 'logs'; } export const FieldsConfigurationPanel = ({ @@ -36,6 +37,7 @@ export const FieldsConfigurationPanel = ({ podFieldProps, tiebreakerFieldProps, timestampFieldProps, + displaySettings, }: FieldsConfigurationPanelProps) => ( @@ -94,193 +96,201 @@ export const FieldsConfigurationPanel = ({ /> - - - - } - description={ - - } - > - _doc, - }} - /> - } - isInvalid={tiebreakerFieldProps.isInvalid} - label={ - - } - > - - - - - - - } - description={ - - } - > - container.id, - }} - /> - } - isInvalid={containerFieldProps.isInvalid} - label={ - - } - > - - - - - - - } - description={ - - } - > - host.name, - }} - /> - } - isInvalid={hostFieldProps.isInvalid} - label={ - - } - > - - - - - - - } - description={ - - } - > - kubernetes.pod.uid, - }} - /> - } - isInvalid={podFieldProps.isInvalid} - label={ - - } - > - - - + {displaySettings === 'logs' && ( + <> + + + + } + description={ + + } + > + _doc, + }} + /> + } + isInvalid={tiebreakerFieldProps.isInvalid} + label={ + + } + > + + + + + )} + {displaySettings === 'metrics' && ( + <> + + + + } + description={ + + } + > + container.id, + }} + /> + } + isInvalid={containerFieldProps.isInvalid} + label={ + + } + > + + + + + + + } + description={ + + } + > + host.name, + }} + /> + } + isInvalid={hostFieldProps.isInvalid} + label={ + + } + > + + + + + + + } + description={ + + } + > + kubernetes.pod.uid, + }} + /> + } + isInvalid={podFieldProps.isInvalid} + label={ + + } + > + + + + + )} ); diff --git a/x-pack/legacy/plugins/infra/public/components/source_configuration/indices_configuration_panel.tsx b/x-pack/legacy/plugins/infra/public/components/source_configuration/indices_configuration_panel.tsx index e779b35975ec3..eed6768c8846c 100644 --- a/x-pack/legacy/plugins/infra/public/components/source_configuration/indices_configuration_panel.tsx +++ b/x-pack/legacy/plugins/infra/public/components/source_configuration/indices_configuration_panel.tsx @@ -23,6 +23,7 @@ interface IndicesConfigurationPanelProps { readOnly: boolean; logAliasFieldProps: InputFieldProps; metricAliasFieldProps: InputFieldProps; + displaySettings: 'metrics' | 'logs'; } export const IndicesConfigurationPanel = ({ @@ -30,6 +31,7 @@ export const IndicesConfigurationPanel = ({ readOnly, logAliasFieldProps, metricAliasFieldProps, + displaySettings, }: IndicesConfigurationPanelProps) => ( @@ -41,101 +43,105 @@ export const IndicesConfigurationPanel = ({ - - - - } - description={ - - } - > - metricbeat-*, - }} - /> + {displaySettings === 'metrics' && ( + + + } - isInvalid={metricAliasFieldProps.isInvalid} - label={ + description={ } > - - - - - - - } - description={ - - } - > - filebeat-*, - }} + helpText={ + metricbeat-*, + }} + /> + } + isInvalid={metricAliasFieldProps.isInvalid} + label={ + + } + > + + + + )} + {displaySettings === 'logs' && ( + + + } - isInvalid={logAliasFieldProps.isInvalid} - label={ + description={ } > - - - + helpText={ + filebeat-*, + }} + /> + } + isInvalid={logAliasFieldProps.isInvalid} + label={ + + } + > + + + + )} ); diff --git a/x-pack/legacy/plugins/infra/public/components/source_configuration/source_configuration_settings.tsx b/x-pack/legacy/plugins/infra/public/components/source_configuration/source_configuration_settings.tsx index 31afedc8f31ee..68dbdf38e6af6 100644 --- a/x-pack/legacy/plugins/infra/public/components/source_configuration/source_configuration_settings.tsx +++ b/x-pack/legacy/plugins/infra/public/components/source_configuration/source_configuration_settings.tsx @@ -25,13 +25,16 @@ import { IndicesConfigurationPanel } from './indices_configuration_panel'; import { NameConfigurationPanel } from './name_configuration_panel'; import { LogColumnsConfigurationPanel } from './log_columns_configuration_panel'; import { useSourceConfigurationFormState } from './source_configuration_form_state'; +import { SourceLoadingPage } from '../source_loading_page'; interface SourceConfigurationSettingsProps { shouldAllowEdit: boolean; + displaySettings: 'metrics' | 'logs'; } export const SourceConfigurationSettings = ({ shouldAllowEdit, + displaySettings, }: SourceConfigurationSettingsProps) => { const { createSourceConfiguration, @@ -80,7 +83,10 @@ export const SourceConfigurationSettings = ({ source, ]); - if (!source || !source.configuration) { + if (!source) { + return ; + } + if (!source.configuration) { return null; } @@ -112,6 +118,7 @@ export const SourceConfigurationSettings = ({ logAliasFieldProps={indicesConfigurationProps.logAlias} metricAliasFieldProps={indicesConfigurationProps.metricAlias} readOnly={!isWriteable} + displaySettings={displaySettings} /> @@ -124,18 +131,21 @@ export const SourceConfigurationSettings = ({ readOnly={!isWriteable} tiebreakerFieldProps={indicesConfigurationProps.tiebreakerField} timestampFieldProps={indicesConfigurationProps.timestampField} + displaySettings={displaySettings} /> - - - + {displaySettings === 'logs' && ( + + + + )} {errors.length > 0 ? ( <> diff --git a/x-pack/legacy/plugins/infra/public/pages/infrastructure/index.tsx b/x-pack/legacy/plugins/infra/public/pages/infrastructure/index.tsx index dfe4fb05d669a..5eaa2850aebdb 100644 --- a/x-pack/legacy/plugins/infra/public/pages/infrastructure/index.tsx +++ b/x-pack/legacy/plugins/infra/public/pages/infrastructure/index.tsx @@ -20,7 +20,7 @@ import { WithSource } from '../../containers/with_source'; import { Source } from '../../containers/source'; import { MetricsExplorerPage } from './metrics_explorer'; import { SnapshotPage } from './snapshot'; -import { SettingsPage } from '../shared/settings'; +import { MetricsSettingsPage } from './settings'; import { AppNavigation } from '../../components/navigation/app_navigation'; import { SourceLoadingPage } from '../../components/source_loading_page'; import { useKibana } from '../../../../../../../src/plugins/kibana_react/public'; @@ -106,7 +106,7 @@ export const InfrastructurePage = ({ match }: RouteComponentProps) => { )} /> - + diff --git a/x-pack/legacy/plugins/infra/public/pages/infrastructure/settings.tsx b/x-pack/legacy/plugins/infra/public/pages/infrastructure/settings.tsx new file mode 100644 index 0000000000000..d75af7879d17a --- /dev/null +++ b/x-pack/legacy/plugins/infra/public/pages/infrastructure/settings.tsx @@ -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; + * you may not use this file except in compliance with the Elastic License. + */ + +import React from 'react'; +import { SourceConfigurationSettings } from '../../components/source_configuration/source_configuration_settings'; +import { useKibana } from '../../../../../../../src/plugins/kibana_react/public'; + +export const MetricsSettingsPage = () => { + const uiCapabilities = useKibana().services.application?.capabilities; + return ( + + ); +}; diff --git a/x-pack/legacy/plugins/infra/public/pages/logs/index.tsx b/x-pack/legacy/plugins/infra/public/pages/logs/index.tsx index a8a75f99253c2..f38f066b5323f 100644 --- a/x-pack/legacy/plugins/infra/public/pages/logs/index.tsx +++ b/x-pack/legacy/plugins/infra/public/pages/logs/index.tsx @@ -17,7 +17,7 @@ import { SourceLoadingPage } from '../../components/source_loading_page'; import { SourceErrorPage } from '../../components/source_error_page'; import { Source, useSource } from '../../containers/source'; import { StreamPage } from './stream'; -import { SettingsPage } from '../shared/settings'; +import { LogsSettingsPage } from './settings'; import { AppNavigation } from '../../components/navigation/app_navigation'; import { useLogAnalysisCapabilities, @@ -107,7 +107,7 @@ export const LogsPage = ({ match }: RouteComponentProps) => { - + { +export const LogsSettingsPage = () => { const uiCapabilities = useKibana().services.application?.capabilities; return ( ); };