[LogsUI] [InfraUI] Turn source configuration into a tab and standardi…

…ze the main navigation (elastic#42243) * Setup Logs routing for multiple pages * Adds nested routing for logs * Adds an index page to handle shared concerns * Adds the Stream page at /logs/stream * Introduce shared settings page * Introduces shared/settings page * Adds shared/settings page as a tab in the Logs routes * Removes previous source configuration flyout traces from Logs pages * Begin styling adjustments to settings page * Implements use of EUI Panels * Centers page content * Add discard button * Add discard button to allow resetting the form * Fix button alignment * Align Apply and Discard buttons to the right * Align Loading button to the right * Add EuiDescribedFormGroup for all form fields * Add EuiDescribedFormGroup for name panel * Add EuiDescribedFormGroup for indices panel * Add EuiDescribedFormGroup for fields panel * Remove all SourceConfigurationFlyout traces from the Infrastructure UI * Add a ViewSourceConfigurationButton * Adds a ViewSourceConfigurationButton component that will route to the /settings page * Replace all instances of "View Configuration" buttons that were opening the flyout with the new button * Enable settings tab amongst Infrastructure routes * Change navigation to mimic SIEM * Introduces an AppNavigation component * Amends styling / handling of RoutedTabs to match SIEM implementation * Adds new AppNavigation component to Infrastructure and Logs indexe pages * Functional test amendments (WIP) * Temporarily disable certain functional tests * Remove unused imports * Disable imports so build can pass * Amend I18N errors * I18N * Automatically fix issues with i18n (node scripts/i18n_check --fix result) * Functional tests * Amend tests so they pass locally. Pending CI test. * Amend RoutedTabs (without link focus style) * Tweak RoutedTabs and AppNavigation for better performance / visuals * Ensure outline isn't cut off * Ensure only the react-router instance is hit for performance * Ensure links still have href attributes for things like "Open in a new tab" even if history.push ultimately navigates * Fix i18n usages * node scripts/i18n_check --fix * Amend functional test config (post Master merge fix) * Remove unused function and fix unused import * Add a Prompt to notify users when form changes will be lost * Add aria-label to Button
Kerry350 · Aug 7, 2019 · de93765 · de93765
1 parent ead4645
commit de93765
Show file tree

Hide file tree

Showing 42 changed files with 1,013 additions and 929 deletions.
diff --git a/x-pack/legacy/plugins/infra/public/components/logging/log_text_stream/column_headers.tsx b/x-pack/legacy/plugins/infra/public/components/logging/log_text_stream/column_headers.tsx
@@ -4,7 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiButtonIcon } from '@elastic/eui';
 import { injectI18n } from '@kbn/i18n/react';
 import React from 'react';
 
@@ -20,20 +19,13 @@ import {
   LogEntryColumnContent,
   LogEntryColumnWidth,
   LogEntryColumnWidths,
-  iconColumnId,
 } from './log_entry_column';
 import { ASSUMED_SCROLLBAR_WIDTH } from './vertical_scroll_panel';
 
 export const LogColumnHeaders = injectI18n<{
   columnConfigurations: LogColumnConfiguration[];
   columnWidths: LogEntryColumnWidths;
-  showColumnConfiguration: () => void;
-}>(({ columnConfigurations, columnWidths, intl, showColumnConfiguration }) => {
-  const showColumnConfigurationLabel = intl.formatMessage({
-    id: 'xpack.infra.logColumnHeaders.configureColumnsLabel',
-    defaultMessage: 'Configure source',
-  });
-
+}>(({ columnConfigurations, columnWidths, intl }) => {
   return (
     <LogColumnHeadersWrapper>
       {columnConfigurations.map(columnConfiguration => {
@@ -69,19 +61,6 @@ export const LogColumnHeaders = injectI18n<{
           );
         }
       })}
-      <LogColumnHeader
-        columnWidth={columnWidths[iconColumnId]}
-        data-test-subj="logColumnHeader iconLogColumnHeader"
-        key="iconColumnHeader"
-      >
-        <EuiButtonIcon
-          aria-label={showColumnConfigurationLabel}
-          color="text"
-          iconType="gear"
-          onClick={showColumnConfiguration}
-          title={showColumnConfigurationLabel}
-        />
-      </LogColumnHeader>
     </LogColumnHeadersWrapper>
   );
 });

diff --git a/...ugins/infra/public/components/logging/log_text_stream/scrollable_log_text_stream_view.tsx b/...ugins/infra/public/components/logging/log_text_stream/scrollable_log_text_stream_view.tsx
@@ -48,7 +48,6 @@ interface ScrollableLogTextStreamViewProps {
   loadNewerItems: () => void;
   setFlyoutItem: (id: string) => void;
   setFlyoutVisibility: (visible: boolean) => void;
-  showColumnConfiguration: () => void;
   intl: InjectedIntl;
   highlightedItem: string | null;
   currentHighlightKey: UniqueTimeKey | null;
@@ -109,7 +108,6 @@ class ScrollableLogTextStreamViewClass extends React.PureComponent<
       items,
       lastLoadedTime,
       scale,
-      showColumnConfiguration,
       wrap,
     } = this.props;
     const { targetId } = this.state;
@@ -153,7 +151,6 @@ class ScrollableLogTextStreamViewClass extends React.PureComponent<
                 <LogColumnHeaders
                   columnConfigurations={columnConfigurations}
                   columnWidths={columnWidths}
-                  showColumnConfiguration={showColumnConfiguration}
                 />
                 <AutoSizer bounds content detectAnyWindowResize="height">
                   {({ measureRef, bounds: { height = 0 }, content: { width = 0 } }) => (

diff --git a/x-pack/legacy/plugins/infra/public/components/metrics/invalid_node.tsx b/x-pack/legacy/plugins/infra/public/components/metrics/invalid_node.tsx
@@ -6,19 +6,20 @@
 
 import { EuiButton, EuiEmptyPrompt, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
-import React, { useContext } from 'react';
+import React from 'react';
 
 import euiStyled from '../../../../../common/eui_styled_components';
-import { SourceConfigurationFlyoutState } from '../../components/source_configuration';
 import { WithKibanaChrome } from '../../containers/with_kibana_chrome';
+import {
+  ViewSourceConfigurationButton,
+  ViewSourceConfigurationButtonHrefBase,
+} from '../../components/source_configuration';
 
 interface InvalidNodeErrorProps {
   nodeName: string;
 }
 
 export const InvalidNodeError: React.FunctionComponent<InvalidNodeErrorProps> = ({ nodeName }) => {
-  const { showIndicesConfiguration } = useContext(SourceConfigurationFlyoutState.Context);
-
   return (
     <WithKibanaChrome>
       {({ basePath }) => (
@@ -57,12 +58,15 @@ export const InvalidNodeError: React.FunctionComponent<InvalidNodeErrorProps> =
                 </EuiButton>
               </EuiFlexItem>
               <EuiFlexItem>
-                <EuiButton color="primary" onClick={showIndicesConfiguration}>
+                <ViewSourceConfigurationButton
+                  data-test-subj="configureSourceButton"
+                  hrefBase={ViewSourceConfigurationButtonHrefBase.infrastructure}
+                >
                   <FormattedMessage
                     id="xpack.infra.configureSourceActionLabel"
                     defaultMessage="Change source configuration"
                   />
-                </EuiButton>
+                </ViewSourceConfigurationButton>
               </EuiFlexItem>
             </EuiFlexGroup>
           }

diff --git a/x-pack/legacy/plugins/infra/public/components/navigation/app_navigation.tsx b/x-pack/legacy/plugins/infra/public/components/navigation/app_navigation.tsx
@@ -0,0 +1,33 @@
+/*
+ * 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 { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import React from 'react';
+import euiStyled from '../../../../../common/eui_styled_components';
+
+interface AppNavigationProps {
+  children: React.ReactNode;
+}
+
+export const AppNavigation = ({ children }: AppNavigationProps) => (
+  <Nav>
+    <EuiFlexGroup gutterSize="m" alignItems="center" justifyContent="spaceBetween">
+      <EuiFlexItem>{children}</EuiFlexItem>
+    </EuiFlexGroup>
+  </Nav>
+);
+
+const Nav = euiStyled.nav`
+  background: ${props => props.theme.eui.euiColorEmptyShade};
+  border-bottom: ${props => props.theme.eui.euiBorderThin};
+  padding: ${props =>
+    `${props.theme.eui.euiSize} ${props.theme.eui.euiSizeL} ${props.theme.eui.euiSize} ${props.theme.eui.euiSizeL}`}
+  
+  .euiTabs {
+    padding-left: 3px;
+    margin-left: -3px;
+  }
+`;
diff --git a/x-pack/legacy/plugins/infra/public/components/navigation/routed_tabs.tsx b/x-pack/legacy/plugins/infra/public/components/navigation/routed_tabs.tsx
@@ -4,9 +4,10 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiTab, EuiTabs } from '@elastic/eui';
+import { EuiTab, EuiTabs, EuiLink } from '@elastic/eui';
 import React from 'react';
 import { Route } from 'react-router-dom';
+import euiStyled from '../../../../../common/eui_styled_components';
 
 interface TabConfiguration {
   title: string;
@@ -17,27 +18,42 @@ interface RoutedTabsProps {
   tabs: TabConfiguration[];
 }
 
+const noop = () => {};
+
 export class RoutedTabs extends React.Component<RoutedTabsProps> {
   public render() {
-    return <EuiTabs>{this.renderTabs()}</EuiTabs>;
+    return <EuiTabs display="condensed">{this.renderTabs()}</EuiTabs>;
   }
 
   private renderTabs() {
     return this.props.tabs.map(tab => {
       return (
         <Route
-          key={`${tab.path}${tab.title}`}
+          key={`${tab.path}-${tab.title}`}
           path={tab.path}
           children={({ match, history }) => (
-            <EuiTab
-              onClick={() => (match ? undefined : history.push(tab.path))}
-              isSelected={match !== null}
-            >
-              {tab.title}
-            </EuiTab>
+            <TabContainer className="euiTab">
+              <EuiLink
+                href={`#${tab.path}`}
+                onClick={e => {
+                  e.preventDefault();
+                  history.push(tab.path);
+                }}
+              >
+                <EuiTab onClick={noop} isSelected={match !== null}>
+                  {tab.title}
+                </EuiTab>
+              </EuiLink>
+            </TabContainer>
           )}
         />
       );
     });
   }
 }
+
+const TabContainer = euiStyled.div`
+  .euiLink {
+    color: inherit !important;
+  }
+`;