[SIEM] Top Countries network page tab change; fix column heading bug (#…

…48526) (#48546)
elastic · Oct 18, 2019 · cfab2a9 · cfab2a9
1 parent d264383
commit cfab2a9
Show file tree

Hide file tree

Showing 8 changed files with 43 additions and 56 deletions.
diff --git a/...egacy/plugins/siem/public/components/page/network/network_top_countries_table/columns.tsx b/...egacy/plugins/siem/public/components/page/network/network_top_countries_table/columns.tsx
@@ -141,7 +141,10 @@ export const getNetworkTopCountriesColumns = (
   {
     align: 'right',
     field: `node.${flowTarget}.${getOppositeField(flowTarget)}_ips`,
-    name: flowTarget === FlowTargetSourceDest.source ? i18n.SOURCE_IPS : i18n.DESTINATION_IPS,
+    name:
+      getOppositeField(flowTarget) === FlowTargetSourceDest.source
+        ? i18n.SOURCE_IPS
+        : i18n.DESTINATION_IPS,
     sortable: true,
     render: ips => {
       if (ips != null) {

diff --git a/...y/plugins/siem/public/components/page/network/network_top_countries_table/translations.ts b/...y/plugins/siem/public/components/page/network/network_top_countries_table/translations.ts
@@ -34,14 +34,14 @@ export const FLOWS = i18n.translate('xpack.siem.networkTopCountriesTable.column.
 export const DESTINATION_COUNTRIES = i18n.translate(
   'xpack.siem.networkTopCountriesTable.heading.destinationCountries',
   {
-    defaultMessage: 'Top Destination Countries',
+    defaultMessage: 'Destination Countries',
   }
 );
 
 export const SOURCE_COUNTRIES = i18n.translate(
   'xpack.siem.networkTopCountriesTable.heading.sourceCountries',
   {
-    defaultMessage: 'Top Source Countries',
+    defaultMessage: 'Source Countries',
   }
 );
 

diff --git a/x-pack/legacy/plugins/siem/public/pages/network/index.tsx b/x-pack/legacy/plugins/siem/public/pages/network/index.tsx
@@ -68,7 +68,7 @@ export const NetworkContainer = React.memo<Props>(() => {
           <Route
             path="/network/"
             render={({ location: { search = '' } }) => (
-              <Redirect from="/network/" to={`/network/${NetworkRouteType.ips}${search}`} />
+              <Redirect from="/network/" to={`/network/${NetworkRouteType.flows}${search}`} />
             )}
           />
         </Switch>

diff --git a/x-pack/legacy/plugins/siem/public/pages/network/navigation/nav_tabs.tsx b/x-pack/legacy/plugins/siem/public/pages/network/navigation/nav_tabs.tsx
@@ -12,17 +12,10 @@ const getTabsOnNetworkUrl = (tabName: NetworkRouteType) => `#/network/${tabName}
 
 export const navTabsNetwork = (hasMlUserPermissions: boolean): NetworkNavTab => {
   const networkNavTabs = {
-    [NetworkRouteType.ips]: {
-      id: NetworkRouteType.ips,
-      name: i18n.NAVIGATION_IPS_TITLE,
-      href: getTabsOnNetworkUrl(NetworkRouteType.ips),
-      disabled: false,
-      urlKey: 'network',
-    },
-    [NetworkRouteType.countries]: {
-      id: NetworkRouteType.countries,
-      name: i18n.NAVIGATION_COUNTRIES_TITLE,
-      href: getTabsOnNetworkUrl(NetworkRouteType.countries),
+    [NetworkRouteType.flows]: {
+      id: NetworkRouteType.flows,
+      name: i18n.NAVIGATION_FLOWS_TITLE,
+      href: getTabsOnNetworkUrl(NetworkRouteType.flows),
       disabled: false,
       urlKey: 'network',
     },

diff --git a/x-pack/legacy/plugins/siem/public/pages/network/navigation/network_routes.tsx b/x-pack/legacy/plugins/siem/public/pages/network/navigation/network_routes.tsx
@@ -6,7 +6,7 @@
 
 import React, { useCallback } from 'react';
 import { Route, Switch } from 'react-router-dom';
-import { EuiFlexItem } from '@elastic/eui';
+import { EuiFlexItem, EuiSpacer } from '@elastic/eui';
 
 import { FlowTargetSourceDest } from '../../../graphql/types';
 import { scoreIntervalToDateTime } from '../../../components/ml/score/score_interval_to_datetime';
@@ -68,37 +68,38 @@ export const NetworkRoutes = ({
         render={() => <DnsQueryTabBody {...tabProps} />}
       />
       <Route
-        path={`${networkPagePath}/:tabName(${NetworkRouteType.ips})`}
+        path={`${networkPagePath}/:tabName(${NetworkRouteType.flows})`}
         render={() => (
-          <ConditionalFlexGroup direction="column">
-            <EuiFlexItem>
-              <IPsQueryTabBody {...tabProps} flowTarget={FlowTargetSourceDest.source} />
-            </EuiFlexItem>
+          <>
+            <ConditionalFlexGroup direction="column">
+              <EuiFlexItem>
+                <IPsQueryTabBody {...tabProps} flowTarget={FlowTargetSourceDest.source} />
+              </EuiFlexItem>
 
-            <EuiFlexItem>
-              <IPsQueryTabBody {...tabProps} flowTarget={FlowTargetSourceDest.destination} />
-            </EuiFlexItem>
-          </ConditionalFlexGroup>
+              <EuiFlexItem>
+                <IPsQueryTabBody {...tabProps} flowTarget={FlowTargetSourceDest.destination} />
+              </EuiFlexItem>
+            </ConditionalFlexGroup>
+            <EuiSpacer />
+            <ConditionalFlexGroup direction="column">
+              <EuiFlexItem>
+                <CountriesQueryTabBody {...tabProps} flowTarget={FlowTargetSourceDest.source} />
+              </EuiFlexItem>
+
+              <EuiFlexItem>
+                <CountriesQueryTabBody
+                  {...tabProps}
+                  flowTarget={FlowTargetSourceDest.destination}
+                />
+              </EuiFlexItem>
+            </ConditionalFlexGroup>
+          </>
         )}
       />
       <Route
         path={`${networkPagePath}/:tabName(${NetworkRouteType.tls})`}
         render={() => <TlsQueryTabBody {...tabProps} flowTarget={FlowTargetSourceDest.source} />}
       />
-      <Route
-        path={`${networkPagePath}/:tabName(${NetworkRouteType.countries})`}
-        render={() => (
-          <ConditionalFlexGroup direction="column">
-            <EuiFlexItem>
-              <CountriesQueryTabBody {...tabProps} flowTarget={FlowTargetSourceDest.source} />
-            </EuiFlexItem>
-
-            <EuiFlexItem>
-              <CountriesQueryTabBody {...tabProps} flowTarget={FlowTargetSourceDest.destination} />
-            </EuiFlexItem>
-          </ConditionalFlexGroup>
-        )}
-      />
       <Route
         path={`${networkPagePath}/:tabName(${NetworkRouteType.anomalies})`}
         render={() => <AnomaliesQueryTabBody {...anomaliesProps} />}

diff --git a/x-pack/legacy/plugins/siem/public/pages/network/navigation/types.ts b/x-pack/legacy/plugins/siem/public/pages/network/navigation/types.ts
@@ -47,9 +47,8 @@ export type NetworkRoutesProps = GlobalTimeArgs & {
   setAbsoluteRangeDatePicker: SetAbsoluteRangeDatePicker;
 };
 
-export type KeyNetworkNavTabWithoutMlPermission = NetworkRouteType.countries &
-  NetworkRouteType.dns &
-  NetworkRouteType.ips &
+export type KeyNetworkNavTabWithoutMlPermission = NetworkRouteType.dns &
+  NetworkRouteType.flows &
   NetworkRouteType.tls;
 
 type KeyNetworkNavTabWithMlPermission = KeyNetworkNavTabWithoutMlPermission &
@@ -60,8 +59,7 @@ type KeyNetworkNavTab = KeyNetworkNavTabWithoutMlPermission | KeyNetworkNavTabWi
 export type NetworkNavTab = Record<KeyNetworkNavTab, NavTab>;
 
 export enum NetworkRouteType {
-  ips = 'ips',
-  countries = 'countries',
+  flows = 'flows',
   dns = 'dns',
   anomalies = 'anomalies',
   tls = 'tls',

diff --git a/x-pack/legacy/plugins/siem/public/pages/network/navigation/utils.ts b/x-pack/legacy/plugins/siem/public/pages/network/navigation/utils.ts
@@ -12,14 +12,13 @@ export const getNetworkRoutePath: GetNetworkRoutePath = (
   hasMlUserPermission
 ) => {
   if (capabilitiesFetched && !hasMlUserPermission) {
-    return `${pagePath}/:tabName(${NetworkRouteType.ips}|${NetworkRouteType.dns}|${NetworkRouteType.countries}|${NetworkRouteType.tls})`;
+    return `${pagePath}/:tabName(${NetworkRouteType.flows}|${NetworkRouteType.dns}|${NetworkRouteType.tls})`;
   }
 
   return (
     `${pagePath}/:tabName(` +
-    `${NetworkRouteType.ips}|` +
+    `${NetworkRouteType.flows}|` +
     `${NetworkRouteType.dns}|` +
-    `${NetworkRouteType.countries}|` +
     `${NetworkRouteType.anomalies}|` +
     `${NetworkRouteType.tls})`
   );

diff --git a/x-pack/legacy/plugins/siem/public/pages/network/translations.ts b/x-pack/legacy/plugins/siem/public/pages/network/translations.ts
@@ -27,17 +27,10 @@ export const EMPTY_ACTION_SECONDARY = i18n.translate('xpack.siem.network.emptyAc
   defaultMessage: 'Go to documentation',
 });
 
-export const NAVIGATION_IPS_TITLE = i18n.translate('xpack.siem.network.navigation.ipsTitle', {
-  defaultMessage: 'IPs',
+export const NAVIGATION_FLOWS_TITLE = i18n.translate('xpack.siem.network.navigation.flowsTitle', {
+  defaultMessage: 'Flows',
 });
 
-export const NAVIGATION_COUNTRIES_TITLE = i18n.translate(
-  'xpack.siem.network.navigation.countriesTitle',
-  {
-    defaultMessage: 'Top Countries',
-  }
-);
-
 export const NAVIGATION_DNS_TITLE = i18n.translate('xpack.siem.network.navigation.dnsTitle', {
   defaultMessage: 'DNS',
 });