fix detetections tabs

elastic · Feb 7, 2020 · 9ff2b2c · 9ff2b2c
1 parent 350eec8
commit 9ff2b2c
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 26 deletions.
diff --git a/x-pack/legacy/plugins/siem/public/components/link_to/link_to.tsx b/x-pack/legacy/plugins/siem/public/components/link_to/link_to.tsx
@@ -62,13 +62,11 @@ export const LinkToPage = React.memo<LinkToPageProps>(({ match }) => (
       component={RedirectToDetectionEnginePage}
       exact
       path={`${match.url}/:pageName(${SiemPageName.detections})`}
-      strict
     />
     <Route
       component={RedirectToDetectionEnginePage}
       exact
       path={`${match.url}/:pageName(${SiemPageName.detections})/:tabName(${DetectionEngineTab.alerts}|${DetectionEngineTab.signals})`}
-      strict
     />
     <Route
       component={RedirectToRulesPage}

diff --git a/x-pack/legacy/plugins/siem/public/pages/detection_engine/detection_engine.tsx b/x-pack/legacy/plugins/siem/public/pages/detection_engine/detection_engine.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiButton, EuiSpacer, EuiTab, EuiTabs } from '@elastic/eui';
+import { EuiButton, EuiSpacer } from '@elastic/eui';
 import React, { useCallback, useMemo } from 'react';
 import { useParams } from 'react-router-dom';
 import { StickyContainer } from 'react-sticky';
@@ -24,6 +24,7 @@ import {
 } from '../../components/link_to/redirect_to_detection_engine';
 import { SiemSearchBar } from '../../components/search_bar';
 import { WrapperPage } from '../../components/wrapper_page';
+import { SiemNavigation } from '../../components/navigation';
 import { State } from '../../store';
 import { inputsSelectors } from '../../store/inputs';
 import { setAbsoluteRangeDatePicker as dispatchSetAbsoluteRangeDatePicker } from '../../store/inputs/actions';
@@ -60,18 +61,22 @@ export interface DispatchProps {
 
 type DetectionEnginePageComponentProps = ReduxProps & DispatchProps;
 
-const detectionsTabs = [
-  {
+const detectionsTabs = {
+  [DetectionEngineTab.signals]: {
     id: DetectionEngineTab.signals,
     name: i18n.SIGNAL,
+    href: getDetectionEngineTabUrl(DetectionEngineTab.signals),
     disabled: false,
+    urlKey: 'detections',
   },
-  {
+  [DetectionEngineTab.alerts]: {
     id: DetectionEngineTab.alerts,
     name: i18n.ALERT,
+    href: getDetectionEngineTabUrl(DetectionEngineTab.alerts),
     disabled: false,
+    urlKey: 'detections',
   },
-];
+};
 
 const DetectionEnginePageComponent: React.FC<DetectionEnginePageComponentProps> = ({
   filters,
@@ -98,24 +103,6 @@ const DetectionEnginePageComponent: React.FC<DetectionEnginePageComponentProps>
     [setAbsoluteRangeDatePicker]
   );
 
-  const tabs = useMemo(
-    () => (
-      <EuiTabs>
-        {detectionsTabs.map(tab => (
-          <EuiTab
-            isSelected={tab.id === tabName}
-            disabled={tab.disabled}
-            key={tab.id}
-            href={getDetectionEngineTabUrl(tab.id)}
-          >
-            {tab.name}
-          </EuiTab>
-        ))}
-      </EuiTabs>
-    ),
-    [detectionsTabs, tabName]
-  );
-
   const indexToAdd = useMemo(() => (signalIndexName == null ? [] : [signalIndexName]), [
     signalIndexName,
   ]);
@@ -169,7 +156,7 @@ const DetectionEnginePageComponent: React.FC<DetectionEnginePageComponentProps>
                 <GlobalTime>
                   {({ to, from, deleteQuery, setQuery }) => (
                     <>
-                      {tabs}
+                      <SiemNavigation navTabs={detectionsTabs} />
                       <EuiSpacer />
                       {tabName === DetectionEngineTab.signals && (
                         <>