[ML] DF Analytics: Creation wizard part 1

x-pack/plugins/ml/public/application/components/job_selector/custom_selection_table/custom_selection_table.js → x-pack/plugins/ml/public/application/components/custom_selection_table/custom_selection_table.js

@@ -29,7 +29,7 @@ import {
 import { Pager } from '@elastic/eui/lib/services';
 import { i18n } from '@kbn/i18n';
 
-const JOBS_PER_PAGE = 20;
+const ITEMS_PER_PAGE = 20;
 
 function getError(error) {
   if (error !== null) {
@@ -43,23 +43,26 @@ function getError(error) {
 }
 
 export function CustomSelectionTable({
+  checkboxDisabledCheck,
   columns,
   filterDefaultFields,
   filters,
   items,
+  itemsPerPage = ITEMS_PER_PAGE,
   onTableChange,
+  radioDisabledCheck,
   selectedIds,
   singleSelection,
   sortableProperties,
-  timeseriesOnly,
+  tableItemId = 'id',
 }) {
   const [itemIdToSelectedMap, setItemIdToSelectedMap] = useState(getCurrentlySelectedItemIdsMap());
   const [currentItems, setCurrentItems] = useState(items);
   const [lastSelected, setLastSelected] = useState(selectedIds);
   const [sortedColumn, setSortedColumn] = useState('');
   const [pager, setPager] = useState();
   const [pagerSettings, setPagerSettings] = useState({
-    itemsPerPage: JOBS_PER_PAGE,
+    itemsPerPage: itemsPerPage,
     firstItemIndex: 0,
     lastItemIndex: 1,
   });
@@ -77,9 +80,9 @@ export function CustomSelectionTable({
   }, [selectedIds]); // eslint-disable-line
 
   useEffect(() => {
-    const tablePager = new Pager(currentItems.length, JOBS_PER_PAGE);
+    const tablePager = new Pager(currentItems.length, itemsPerPage);
     setPagerSettings({
-      itemsPerPage: JOBS_PER_PAGE,
+      itemsPerPage: itemsPerPage,
       firstItemIndex: tablePager.getFirstItemIndex(),
       lastItemIndex: tablePager.getLastItemIndex(),
     });
@@ -100,7 +103,7 @@ export function CustomSelectionTable({
 
   function handleTableChange({ isSelected, itemId }) {
     const selectedMapIds = Object.getOwnPropertyNames(itemIdToSelectedMap);
-    const currentItemIds = currentItems.map((item) => item.id);
+    const currentItemIds = currentItems.map((item) => item[tableItemId]);
 
     let currentSelected = selectedMapIds.filter(
       (id) => itemIdToSelectedMap[id] === true && id !== itemId
@@ -124,11 +127,11 @@ export function CustomSelectionTable({
     onTableChange(currentSelected);
   }
 
-  function handleChangeItemsPerPage(itemsPerPage) {
-    pager.setItemsPerPage(itemsPerPage);
+  function handleChangeItemsPerPage(numItemsPerPage) {
+    pager.setItemsPerPage(numItemsPerPage);
     setPagerSettings({
       ...pagerSettings,
-      itemsPerPage,
+      itemsPerPage: numItemsPerPage,
       firstItemIndex: pager.getFirstItemIndex(),
       lastItemIndex: pager.getLastItemIndex(),
     });
@@ -161,7 +164,9 @@ export function CustomSelectionTable({
   }
 
   function areAllItemsSelected() {
-    const indexOfUnselectedItem = currentItems.findIndex((item) => !isItemSelected(item.id));
+    const indexOfUnselectedItem = currentItems.findIndex(
+      (item) => !isItemSelected(item[tableItemId])
+    );
     return indexOfUnselectedItem === -1;
   }
 
@@ -199,7 +204,7 @@ export function CustomSelectionTable({
   function toggleAll() {
     const allSelected = areAllItemsSelected() || itemIdToSelectedMap.all === true;
     const newItemIdToSelectedMap = {};
-    currentItems.forEach((item) => (newItemIdToSelectedMap[item.id] = !allSelected));
+    currentItems.forEach((item) => (newItemIdToSelectedMap[item[tableItemId]] = !allSelected));
     setItemIdToSelectedMap(newItemIdToSelectedMap);
     handleTableChange({ isSelected: !allSelected, itemId: 'all' });
   }
@@ -255,20 +260,23 @@ export function CustomSelectionTable({
             <EuiTableRowCellCheckbox key={column.id}>
               {!singleSelection && (
                 <EuiCheckbox
-                  id={`${item.id}-checkbox`}
-                  data-test-subj={`${item.id}-checkbox`}
-                  checked={isItemSelected(item.id)}
-                  onChange={() => toggleItem(item.id)}
+                  disabled={
+                    checkboxDisabledCheck !== undefined ? checkboxDisabledCheck(item) : undefined
+                  }
+                  id={`${item[tableItemId]}-checkbox`}
+                  data-test-subj={`${item[tableItemId]}-checkbox`}
+                  checked={isItemSelected(item[tableItemId])}
+                  onChange={() => toggleItem(item[tableItemId])}
                   type="inList"
                 />
               )}
               {singleSelection && (
                 <EuiRadio
-                  id={item.id}
-                  data-test-subj={`${item.id}-radio-button`}
-                  checked={isItemSelected(item.id)}
-                  onChange={() => toggleItem(item.id)}
-                  disabled={timeseriesOnly && item.isSingleMetricViewerJob === false}
+                  id={item[tableItemId]}
+                  data-test-subj={`${item[tableItemId]}-radio-button`}
+                  checked={isItemSelected(item[tableItemId])}
+                  onChange={() => toggleItem(item[tableItemId])}
+                  disabled={radioDisabledCheck !== undefined ? radioDisabledCheck(item) : undefined}
                 />
               )}
             </EuiTableRowCellCheckbox>
@@ -299,11 +307,11 @@ export function CustomSelectionTable({
 
       return (
         <EuiTableRow
-          key={item.id}
-          isSelected={isItemSelected(item.id)}
+          key={item[tableItemId]}
+          isSelected={isItemSelected(item[tableItemId])}
           isSelectable={true}
           hasActions={true}
-          data-test-subj="mlFlyoutJobSelectorTableRow"
+          data-test-subj="mlCustomSelectionTableRow"
         >
           {cells}
         </EuiTableRow>
@@ -331,7 +339,7 @@ export function CustomSelectionTable({
     <Fragment>
       <EuiSpacer size="s" />
       <EuiFlexGroup direction="column">
-        <EuiFlexItem grow={false} data-test-subj="mlFlyoutJobSelectorSearchBar">
+        <EuiFlexItem grow={false} data-test-subj="mlCustomSelectionTableSearchBar">
           <EuiSearchBar
             defaultQuery={query}
             box={{
@@ -359,7 +367,7 @@ export function CustomSelectionTable({
           <EuiFlexItem grow={false}>{renderSelectAll(true)}</EuiFlexItem>
         </EuiFlexGroup>
       </EuiTableHeaderMobile>
-      <EuiTable data-test-subj="mlFlyoutJobSelectorTable">
+      <EuiTable data-test-subj="mlCustomSelectionTable">
         <EuiTableHeader>{renderHeaderCells()}</EuiTableHeader>
         <EuiTableBody>{renderRows()}</EuiTableBody>
       </EuiTable>
@@ -368,7 +376,7 @@ export function CustomSelectionTable({
         <EuiTablePagination
           activePage={pager.getCurrentPageIndex()}
           itemsPerPage={pagerSettings.itemsPerPage}
-          itemsPerPageOptions={[10, JOBS_PER_PAGE, 50]}
+          itemsPerPageOptions={[5, 10, 20, 50]}
           pageCount={pager.getTotalPages()}
           onChangeItemsPerPage={handleChangeItemsPerPage}
           onChangePage={(pageIndex) => handlePageChange(pageIndex)}
@@ -379,13 +387,16 @@ export function CustomSelectionTable({
 }
 
 CustomSelectionTable.propTypes = {
+  checkboxDisabledCheck: PropTypes.func,
   columns: PropTypes.array.isRequired,
   filterDefaultFields: PropTypes.array,
   filters: PropTypes.array,
   items: PropTypes.array.isRequired,
+  itemsPerPage: PropTypes.number,
   onTableChange: PropTypes.func.isRequired,
+  radioDisabledCheck: PropTypes.func,
   selectedId: PropTypes.array,
   singleSelection: PropTypes.bool,
   sortableProperties: PropTypes.object,
-  timeseriesOnly: PropTypes.bool,
+  tableItemId: PropTypes.string,
 };

x-pack/plugins/ml/public/application/components/job_selector/job_selector_table/job_selector_table.js

@@ -6,7 +6,7 @@
 
 import React, { Fragment, useState, useEffect } from 'react';
 import { PropTypes } from 'prop-types';
-import { CustomSelectionTable } from '../custom_selection_table';
+import { CustomSelectionTable } from '../../custom_selection_table';
 import { JobSelectorBadge } from '../job_selector_badge';
 import { TimeRangeBar } from '../timerange_bar';
 
@@ -107,7 +107,7 @@ export function JobSelectorTable({
         id: 'checkbox',
         isCheckbox: true,
         textOnly: false,
-        width: '24px',
+        width: '32px',
       },
       {
         label: 'job ID',
@@ -157,6 +157,9 @@ export function JobSelectorTable({
         filterDefaultFields={!singleSelection ? JOB_FILTER_FIELDS : undefined}
         items={jobs}
         onTableChange={(selectionFromTable) => onSelection({ selectionFromTable })}
+        radioDisabledCheck={(item) => {
+          return timeseriesOnly && item.isSingleMetricViewerJob === false;
+        }}
         selectedIds={selectedIds}
         singleSelection={singleSelection}
         sortableProperties={sortableProperties}

x-pack/plugins/ml/public/application/data_frame_analytics/_index.scss

@@ -2,3 +2,4 @@
 @import 'pages/analytics_management/components/analytics_list/index';
 @import 'pages/analytics_management/components/create_analytics_form/index';
 @import 'pages/analytics_management/components/create_analytics_flyout/index';
+@import 'pages/analytics_management/components/create_analytics_button/index';

x-pack/plugins/ml/public/application/data_frame_analytics/common/analytics.ts

@@ -24,6 +24,21 @@ export enum ANALYSIS_CONFIG_TYPE {
   CLASSIFICATION = 'classification',
 }
 
+export enum ANALYSIS_ADVANCED_FIELDS {
+  FEATURE_INFLUENCE_THRESHOLD = 'feature_influence_threshold',
+  GAMMA = 'gamma',
+  LAMBDA = 'lambda',
+  MAX_TREES = 'max_trees',
+  NUM_TOP_FEATURE_IMPORTANCE_VALUES = 'num_top_feature_importance_values',
+}
+
+export enum OUTLIER_ANALYSIS_METHOD {
+  LOF = 'lof',
+  LDOF = 'ldof',
+  DISTANCE_KTH_NN = 'distance_kth_nn',
+  DISTANCE_KNN = 'distance_knn',
+}
+
 interface OutlierAnalysis {
   [key: string]: {};
   outlier_detection: {};
@@ -263,11 +278,13 @@ export const isClassificationAnalysis = (arg: any): arg is ClassificationAnalysi
 };
 
 export const isResultsSearchBoolQuery = (arg: any): arg is ResultsSearchBoolQuery => {
+  if (arg === undefined) return false;
   const keys = Object.keys(arg);
   return keys.length === 1 && keys[0] === 'bool';
 };
 
 export const isQueryStringQuery = (arg: any): arg is QueryStringQuery => {
+  if (arg === undefined) return false;
   const keys = Object.keys(arg);
   return keys.length === 1 && keys[0] === 'query_string';
 };

x-pack/plugins/ml/public/application/data_frame_analytics/common/index.ts

@@ -17,6 +17,7 @@ export {
   IndexPattern,
   REFRESH_ANALYTICS_LIST_STATE,
   ANALYSIS_CONFIG_TYPE,
+  OUTLIER_ANALYSIS_METHOD,
   RegressionEvaluateResponse,
   getValuesFromResponse,
   loadEvalData,

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/advanced_step/advanced_step.tsx

@@ -0,0 +1,32 @@
+/*
+ * 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, { FC } from 'react';
+import { EuiForm } from '@elastic/eui';
+
+import { CreateAnalyticsStepProps } from '../../../analytics_management/hooks/use_create_analytics_form';
+import { AdvancedStepForm } from './advanced_step_form';
+import { AdvancedStepDetails } from './advanced_step_details';
+import { ANALYTICS_STEPS } from '../../page';
+
+export const AdvancedStep: FC<CreateAnalyticsStepProps> = ({
+  actions,
+  state,
+  step,
+  setCurrentStep,
+  stepActivated,
+}) => {
+  return (
+    <EuiForm>
+      {step === ANALYTICS_STEPS.ADVANCED && (
+        <AdvancedStepForm actions={actions} state={state} setCurrentStep={setCurrentStep} />
+      )}
+      {step !== ANALYTICS_STEPS.ADVANCED && stepActivated === true && (
+        <AdvancedStepDetails setCurrentStep={setCurrentStep} state={state} />
+      )}
+    </EuiForm>
+  );
+};