Add cross-links back and forth between the Indices and Data Streams t…

…abs.

- Refactor routing service to expose decodePathFromReactRouter and encodePathForReactRouter methods to clarify their purpose.
- Add stub data stream detail panel, with the intention to populate it with content in the future.
- Converted index_list to TS.

x-pack/plugins/index_management/public/application/sections/home/data_stream_list/data_stream_detail_panel/data_stream_detail_panel.tsx

@@ -0,0 +1,99 @@
+/*
+ * 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, { Fragment } from 'react';
+import { FormattedMessage } from '@kbn/i18n/react';
+import {
+  EuiFlyout,
+  EuiFlyoutHeader,
+  EuiTitle,
+  EuiFlyoutBody,
+  EuiFlyoutFooter,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiButtonEmpty,
+} from '@elastic/eui';
+
+import { SectionLoading, SectionError, Error } from '../../../../components';
+import { useLoadDataStream } from '../../../../services/api';
+
+interface Props {
+  dataStreamName: string;
+  onClose: () => void;
+}
+
+export const DataStreamDetailPanel: React.FunctionComponent<Props> = ({
+  dataStreamName,
+  onClose,
+}) => {
+  const { error, data: dataStream, isLoading } = useLoadDataStream(dataStreamName);
+
+  let content;
+
+  if (isLoading) {
+    content = (
+      <SectionLoading>
+        <FormattedMessage
+          id="xpack.idxMgmt.dataStreamDetailPanel.loadingDataStreamDescription"
+          defaultMessage="Loading data stream"
+        />
+      </SectionLoading>
+    );
+  } else if (error) {
+    content = (
+      <SectionError
+        title={
+          <FormattedMessage
+            id="xpack.idxMgmt.dataStreamDetailPanel.loadingDataStreamErrorMessage"
+            defaultMessage="Error loading data stream"
+          />
+        }
+        error={error as Error}
+        data-test-subj="sectionError"
+      />
+    );
+  } else if (dataStream) {
+    content = <Fragment>{JSON.stringify(dataStream)}</Fragment>;
+  }
+
+  return (
+    <EuiFlyout
+      onClose={onClose}
+      data-test-subj="dataStreamDetailPanel"
+      aria-labelledby="dataStreamDetailPanelTitle"
+      size="m"
+      maxWidth={500}
+    >
+      <EuiFlyoutHeader>
+        <EuiTitle size="m">
+          <h2 id="dataStreamDetailPanelTitle" data-test-subj="title">
+            {dataStreamName}
+          </h2>
+        </EuiTitle>
+      </EuiFlyoutHeader>
+
+      <EuiFlyoutBody data-test-subj="content">{content}</EuiFlyoutBody>
+
+      <EuiFlyoutFooter>
+        <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
+          <EuiFlexItem grow={false}>
+            <EuiButtonEmpty
+              iconType="cross"
+              flush="left"
+              onClick={onClose}
+              data-test-subj="closeDetailsButton"
+            >
+              <FormattedMessage
+                id="xpack.idxMgmt.dataStreamDetailPanel.closeButtonLabel"
+                defaultMessage="Close"
+              />
+            </EuiButtonEmpty>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFlyoutFooter>
+    </EuiFlyout>
+  );
+};

x-pack/plugins/index_management/public/application/sections/home/data_stream_list/data_stream_detail_panel/index.ts

@@ -0,0 +1,7 @@
+/*
+ * 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.
+ */
+
+export { DataStreamDetailPanel } from './data_stream_detail_panel';

x-pack/plugins/index_management/public/application/sections/home/data_stream_list/data_stream_list.tsx

@@ -5,14 +5,25 @@
  */
 
 import React from 'react';
+import { RouteComponentProps } from 'react-router-dom';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiTitle, EuiText, EuiSpacer, EuiEmptyPrompt } from '@elastic/eui';
+import { ScopedHistory } from 'kibana/public';
 
 import { SectionError, SectionLoading, Error } from '../../../components';
 import { useLoadDataStreams } from '../../../services/api';
 import { DataStreamTable } from './data_stream_table';
 
-export const DataStreamList = () => {
+interface MatchParams {
+  dataStreamName?: string;
+}
+
+export const DataStreamList: React.FunctionComponent<RouteComponentProps<MatchParams>> = ({
+  match: {
+    params: { dataStreamName },
+  },
+  history,
+}) => {
   const { error, isLoading, data: dataStreams, sendRequest: reload } = useLoadDataStreams();
 
   let content;
@@ -65,8 +76,25 @@ export const DataStreamList = () => {
             />
           </EuiText>
         </EuiTitle>
+
         <EuiSpacer size="l" />
-        <DataStreamTable dataStreams={dataStreams} reload={reload} />
+
+        <DataStreamTable
+          filters={dataStreamName !== undefined ? `name=${dataStreamName}` : ''}
+          dataStreams={dataStreams}
+          reload={reload}
+          history={history as ScopedHistory}
+        />
+
+        {/* TODO: Implement this once we have something to put in here, e.g. storage size, docs count */}
+        {/* dataStreamName && (
+          <DataStreamDetailPanel
+            dataStreamName={decodePathFromReactRouter(dataStreamName)}
+            onClose={() => {
+              history.push('/data_streams');
+            }}
+          />
+        )*/}
       </>
     );
   }

x-pack/plugins/index_management/public/application/sections/home/data_stream_list/data_stream_table/data_stream_table.tsx

@@ -7,16 +7,26 @@
 import React from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { EuiInMemoryTable, EuiBasicTableColumn, EuiButton } from '@elastic/eui';
+import { EuiInMemoryTable, EuiBasicTableColumn, EuiButton, EuiLink } from '@elastic/eui';
+import { ScopedHistory } from 'kibana/public';
 
 import { DataStream } from '../../../../../../common/types';
+import { reactRouterNavigate } from '../../../../../shared_imports';
+import { encodePathForReactRouter } from '../../../../services/routing';
 
 interface Props {
   dataStreams?: DataStream[];
   reload: () => {};
+  history: ScopedHistory;
+  filters?: string;
 }
 
-export const DataStreamTable: React.FunctionComponent<Props> = ({ dataStreams, reload }) => {
+export const DataStreamTable: React.FunctionComponent<Props> = ({
+  dataStreams,
+  reload,
+  history,
+  filters,
+}) => {
   const columns: Array<EuiBasicTableColumn<DataStream>> = [
     {
       field: 'name',
@@ -34,8 +44,18 @@ export const DataStreamTable: React.FunctionComponent<Props> = ({ dataStreams, r
       }),
       truncateText: true,
       sortable: true,
-      // TODO: Render as a deep-link into the indices tab
-      render: (indices: DataStream['indices']) => indices.length,
+      render: (indices: DataStream['indices'], dataStream) => (
+        <EuiLink
+          {...reactRouterNavigate(history, {
+            pathname: '/indices',
+            search: `includeHiddenIndices=true&filter=data_stream=${encodePathForReactRouter(
+              dataStream.name
+            )}`,
+          })}
+        >
+          {indices.length}
+        </EuiLink>
+      ),
     },
     {
       field: 'timeStampField',
@@ -68,6 +88,7 @@ export const DataStreamTable: React.FunctionComponent<Props> = ({ dataStreams, r
   } as const;
 
   const searchConfig = {
+    query: filters,
     box: {
       incremental: true,
     },

x-pack/plugins/index_management/public/application/sections/home/home.tsx

@@ -116,7 +116,11 @@ export const IndexManagementHome: React.FunctionComponent<RouteComponentProps<Ma
         <EuiSpacer size="m" />
 
         <Switch>
-          <Route exact path="/data_streams" component={DataStreamList} />
+          <Route
+            exact
+            path={['/data_streams', '/data_streams/:dataStreamName?']}
+            component={DataStreamList}
+          />
           <Route exact path="/indices" component={IndexList} />
           <Route exact path="/indices/filter/:filter?" component={IndexList} />
           <Route

x-pack/plugins/index_management/public/application/sections/home/index_list/detail_panel/detail_panel.container.d.ts

@@ -0,0 +1,7 @@
+/*
+ * 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.
+ */
+
+export declare function DetailPanel(props: any): any;

x-pack/plugins/index_management/public/application/sections/home/index_list/index_list.js → x-pack/plugins/index_management/public/application/sections/home/index_list/index_list.tsx

@@ -5,14 +5,16 @@
  */
 
 import React from 'react';
+import { RouteComponentProps } from 'react-router-dom';
+
 import { DetailPanel } from './detail_panel';
 import { IndexTable } from './index_table';
 
-export function IndexList() {
+export const IndexList: React.FunctionComponent<RouteComponentProps> = ({ history }) => {
   return (
     <div className="im-snapshotTestSubject" data-test-subj="indicesList">
-      <IndexTable />
+      <IndexTable history={history} />
       <DetailPanel />
     </div>
   );
-}
+};

x-pack/plugins/index_management/public/application/sections/home/index_list/index_list.d.ts → x-pack/plugins/index_management/public/application/sections/home/index_list/index_table/index_table.container.d.ts

@@ -4,4 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export declare function IndexList(match: any): any;
+export declare function IndexTable(props: any): any;