[7.x] [SIEM] Add TLS to Newtowrk overview page (#48062)

x-pack/legacy/plugins/siem/public/components/link_to/link_to.tsx

@@ -13,7 +13,6 @@ import { RedirectToNetworkPage } from './redirect_to_network';
 import { RedirectToOverviewPage } from './redirect_to_overview';
 import { RedirectToTimelinesPage } from './redirect_to_timelines';
 import { HostsTableType } from '../../store/hosts/model';
-
 interface LinkToPageProps {
   match: RouteMatch<{}>;
 }

x-pack/legacy/plugins/siem/public/components/page/network/tls_table/index.tsx

@@ -36,10 +36,14 @@ interface TlsTableReduxProps {
 }
 
 interface TlsTableDispatchProps {
-  updateTableActivePage: ActionCreator<{
+  updateIpDetailsTableActivePage: ActionCreator<{
     activePage: number;
     tableType: networkModel.IpDetailsTableType;
   }>;
+  updateNetworkPageTableActivePage: ActionCreator<{
+    activePage: number;
+    tableType: networkModel.NetworkTableType;
+  }>;
   updateTlsLimit: ActionCreator<{
     limit: number;
     networkType: networkModel.NetworkType;
@@ -80,9 +84,18 @@ class TlsTableComponent extends React.PureComponent<TlsTableProps> {
       tlsSortField,
       totalCount,
       type,
-      updateTableActivePage,
+      updateIpDetailsTableActivePage,
+      updateNetworkPageTableActivePage,
       updateTlsLimit,
     } = this.props;
+
+    const updateTableActivePage: ActionCreator<{
+      activePage: number;
+      tableType: networkModel.NetworkTableType | networkModel.IpDetailsTableType;
+    }> =
+      type === networkModel.NetworkType.page
+        ? updateNetworkPageTableActivePage
+        : updateIpDetailsTableActivePage;
     return (
       <PaginatedTable
         activePage={activePage}
@@ -130,17 +143,14 @@ class TlsTableComponent extends React.PureComponent<TlsTableProps> {
   };
 }
 
-const makeMapStateToProps = () => {
-  const getTlsSelector = networkSelectors.tlsSelector();
-  return (state: State) => ({
-    ...getTlsSelector(state),
-  });
-};
+const makeMapStateToProps = (state: State, ownProps: OwnProps) =>
+  networkSelectors.tlsSelector(ownProps.type);
 
 export const TlsTable = connect(
   makeMapStateToProps,
   {
-    updateTableActivePage: networkActions.updateIpDetailsTableActivePage,
+    updateNetworkPageTableActivePage: networkActions.updateNetworkPageTableActivePage,
+    updateIpDetailsTableActivePage: networkActions.updateIpDetailsTableActivePage,
     updateTlsLimit: networkActions.updateTlsLimit,
     updateTlsSort: networkActions.updateTlsSort,
   }

x-pack/legacy/plugins/siem/public/containers/tls/index.gql_query.ts

@@ -10,7 +10,7 @@ export const tlsQuery = gql`
   query GetTlsQuery(
     $sourceId: ID!
     $filterQuery: String
-    $flowTarget: FlowTarget!
+    $flowTarget: FlowTargetSourceDest!
     $ip: String!
     $pagination: PaginationInputPaginated!
     $sort: TlsSortField!

x-pack/legacy/plugins/siem/public/containers/tls/index.tsx

@@ -12,11 +12,11 @@ import { connect } from 'react-redux';
 import chrome from 'ui/chrome';
 import { DEFAULT_INDEX_KEY } from '../../../common/constants';
 import {
-  FlowTarget,
   PageInfoPaginated,
   TlsEdges,
   TlsSortField,
   GetTlsQuery,
+  FlowTargetSourceDest,
 } from '../../graphql/types';
 import { inputsModel, networkModel, networkSelectors, State, inputsSelectors } from '../../store';
 import { createFilter, getDefaultFetchPolicy } from '../helpers';
@@ -40,7 +40,7 @@ export interface TlsArgs {
 
 export interface OwnProps extends QueryTemplatePaginatedProps {
   children: (args: TlsArgs) => React.ReactNode;
-  flowTarget: FlowTarget;
+  flowTarget: FlowTargetSourceDest;
   ip: string;
   type: networkModel.NetworkType;
 }
@@ -139,18 +139,15 @@ class TlsComponentQuery extends QueryTemplatePaginated<
   }
 }
 
-const makeMapStateToProps = () => {
-  const getTlsSelector = networkSelectors.tlsSelector();
+const mapStateToProps = (state: State, { id = ID, type }: OwnProps) => {
+  const getTlsSelector = networkSelectors.tlsSelector(type);
   const getQuery = inputsSelectors.globalQueryByIdSelector();
-  const mapStateToProps = (state: State, { id = ID }: OwnProps) => {
-    const { isInspected } = getQuery(state, id);
-    return {
-      ...getTlsSelector(state),
-      isInspected,
-    };
-  };
+  const { isInspected } = getQuery(state, id);
 
-  return mapStateToProps;
+  return {
+    ...getTlsSelector(state),
+    isInspected,
+  };
 };
 
-export const TlsQuery = connect(makeMapStateToProps)(TlsComponentQuery);
+export const TlsQuery = connect(mapStateToProps)(TlsComponentQuery);