Start adding dataset filter to setup screen (incomplete)

x-pack/plugins/infra/public/components/logging/log_analysis_setup/initial_configuration_step/analysis_setup_indices_form.tsx

@@ -9,7 +9,7 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import React, { useCallback } from 'react';
 import { LoadingOverlayWrapper } from '../../../loading_overlay_wrapper';
-import { IndexSetupRow } from './index_form_row';
+import { IndexSetupRow } from './index_setup_row';
 import { ValidatedIndex } from './validation';
 
 export const AnalysisSetupIndicesForm: React.FunctionComponent<{
@@ -41,31 +41,6 @@ export const AnalysisSetupIndicesForm: React.FunctionComponent<{
     [indices, onChangeSelectedIndices]
   );
 
-  // const choices = useMemo(
-  //   () =>
-  //     indices.map(index => {
-  //       const checkbox = (
-  //         <EuiCheckbox
-  //           key={index.name}
-  //           id={index.name}
-  //           label={<EuiCode>{index.name}</EuiCode>}
-  //           onChange={handleCheckboxChange}
-  //           checked={index.validity === 'valid' && index.isSelected}
-  //           disabled={disabled || index.validity === 'invalid'}
-  //         />
-  //       );
-
-  //       return index.validity === 'valid' ? (
-  //         checkbox
-  //       ) : (
-  //         <div key={index.name}>
-  //           <EuiToolTip content={formatValidationError(index.errors)}>{checkbox}</EuiToolTip>
-  //         </div>
-  //       );
-  //     }),
-  //   [disabled, indices]
-  // );
-
   return (
     <EuiDescribedFormGroup
       title={

x-pack/plugins/infra/public/components/logging/log_analysis_setup/initial_configuration_step/index_setup_dataset_filter.tsx

@@ -0,0 +1,87 @@
+/*
+ * 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 {
+  EuiFilterButton,
+  EuiFilterGroup,
+  EuiPopover,
+  EuiPopoverTitle,
+  EuiSelectable,
+  EuiSelectableOption,
+} from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+import React, { useCallback, useMemo } from 'react';
+import { useVisibilityState } from '../../../../utils/use_visibility_state';
+import { DatasetFilter } from './validation';
+
+export const IndexSetupDatasetFilter: React.FC<{
+  availableDatasets: string[];
+  datasetFilter: DatasetFilter;
+  onChangeDatasetFilter: (datasetFilter: DatasetFilter) => void;
+}> = ({ availableDatasets, datasetFilter, onChangeDatasetFilter }) => {
+  const { isVisible, hide, show } = useVisibilityState(false);
+
+  const changeDatasetFilter = useCallback(
+    (options: EuiSelectableOption[]) => {
+      const selectedDatasets = options
+        .filter(({ checked }) => checked === 'on')
+        .map(({ label }) => label);
+
+      onChangeDatasetFilter(
+        selectedDatasets.length === 0
+          ? { include: 'all' }
+          : { include: 'some', datasets: selectedDatasets }
+      );
+    },
+    [onChangeDatasetFilter]
+  );
+
+  const selectableOptions: EuiSelectableOption[] = useMemo(
+    () =>
+      availableDatasets.map(datasetName => ({
+        label: datasetName,
+        checked:
+          datasetFilter.include === 'some' && datasetFilter.datasets.includes(datasetName)
+            ? 'on'
+            : undefined,
+      })),
+    [availableDatasets, datasetFilter]
+  );
+
+  const datasetFilterButton = (
+    <EuiFilterButton isSelected={isVisible} onClick={show}>
+      <FormattedMessage
+        id="xpack.infra.analysisSetup.indexDatasetFilterIncludeAllButtonLabel"
+        defaultMessage="{includeType, select, all {All datasets} some {{includedDatasetCount, plural, one {# dataset} other {# datasets}}}}"
+        values={{
+          includeType: datasetFilter.include,
+          includedDatasetCount:
+            datasetFilter.include === 'some' ? datasetFilter.datasets.length : 0,
+        }}
+      />
+    </EuiFilterButton>
+  );
+
+  return (
+    <EuiFilterGroup>
+      <EuiPopover
+        button={datasetFilterButton}
+        closePopover={hide}
+        isOpen={isVisible}
+        panelPaddingSize="none"
+      >
+        <EuiSelectable onChange={changeDatasetFilter} options={selectableOptions} searchable>
+          {(list, search) => (
+            <div>
+              <EuiPopoverTitle>{search}</EuiPopoverTitle>
+              {list}
+            </div>
+          )}
+        </EuiSelectable>
+      </EuiPopover>
+    </EuiFilterGroup>
+  );
+};

x-pack/plugins/infra/public/components/logging/log_analysis_setup/initial_configuration_step/index_form_row.tsx → x-pack/plugins/infra/public/components/logging/log_analysis_setup/initial_configuration_step/index_setup_row.tsx

@@ -4,51 +4,59 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiCheckbox, EuiCode, EuiToolTip } from '@elastic/eui';
+import { EuiCheckbox, EuiCode, EuiFlexGroup, EuiFlexItem, EuiIcon, EuiToolTip } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import React, { useCallback } from 'react';
+import { IndexSetupDatasetFilter } from './index_setup_dataset_filter';
 import { DatasetFilter, ValidatedIndex, ValidationIndicesUIError } from './validation';
-import { euiStyled } from '../../../../../../observability/public';
 
 export const IndexSetupRow: React.FC<{
   index: ValidatedIndex;
   isDisabled: boolean;
   onChangeDatasetFilter: (indexName: string, datasetFilter: DatasetFilter) => void;
   onChangeIsSelected: (indexName: string, isSelected: boolean) => void;
 }> = ({ index, isDisabled, onChangeDatasetFilter, onChangeIsSelected }) => {
-  const handleCheckboxChange = useCallback(
+  const changeIsSelected = useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => {
       onChangeIsSelected(index.name, event.currentTarget.checked);
     },
     [index.name, onChangeIsSelected]
   );
 
-  const checkbox = (
-    <EuiCheckbox
-      key={index.name}
-      id={index.name}
-      label={<EuiCode>{index.name}</EuiCode>}
-      onChange={handleCheckboxChange}
-      checked={index.validity === 'valid' && index.isSelected}
-      disabled={isDisabled || index.validity === 'invalid'}
-    />
+  const changeDatasetFilter = useCallback(
+    (datasetFilter: DatasetFilter) => onChangeDatasetFilter(index.name, datasetFilter),
+    [index.name, onChangeDatasetFilter]
   );
 
   return (
-    <IndexSetupRowWrapper>
-      {index.validity === 'valid' ? (
-        checkbox
-      ) : (
-        <EuiToolTip content={formatValidationError(index.errors)}>{checkbox}</EuiToolTip>
-      )}
-    </IndexSetupRowWrapper>
+    <EuiFlexGroup alignItems="center">
+      <EuiFlexItem>
+        <EuiCheckbox
+          key={index.name}
+          id={index.name}
+          label={<EuiCode>{index.name}</EuiCode>}
+          onChange={changeIsSelected}
+          checked={index.validity === 'valid' && index.isSelected}
+          disabled={isDisabled || index.validity === 'invalid'}
+        />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        {index.validity === 'invalid' ? (
+          <EuiToolTip content={formatValidationError(index.errors)}>
+            <EuiIcon type="alert" color="danger" />
+          </EuiToolTip>
+        ) : (
+          <IndexSetupDatasetFilter
+            availableDatasets={index.availableDatasets}
+            datasetFilter={index.datasetFilter}
+            onChangeDatasetFilter={changeDatasetFilter}
+          />
+        )}
+      </EuiFlexItem>
+    </EuiFlexGroup>
   );
 };
 
-const IndexSetupRowWrapper = euiStyled.div`
-  padding: ${props => props.theme.eui.paddingSizes.xs};
-`;
-
 const formatValidationError = (errors: ValidationIndicesUIError[]): React.ReactNode => {
   return errors.map(error => {
     switch (error.error) {

x-pack/plugins/infra/public/components/logging/log_analysis_setup/initial_configuration_step/validation.tsx

@@ -24,6 +24,7 @@ interface ValidIndex {
   validity: 'valid';
   name: string;
   isSelected: boolean;
+  availableDatasets: string[];
   datasetFilter: DatasetFilter;
 }
 

x-pack/plugins/infra/public/containers/logs/log_analysis/log_analysis_setup_state.tsx

@@ -67,6 +67,10 @@ export const useAnalysisSetupState = <JobType extends string>({
                   previousValidatedIndex?.validity === 'valid'
                     ? previousValidatedIndex?.isSelected
                     : !isExampleDataIndex(indexName),
+                availableDatasets: ['a', 'b', 'c'],
+                datasetFilter: {
+                  include: 'all',
+                },
               };
             }
           })