New dropdown to select data

Author: guyplusplus

vis_type_custom_form_filter_accounts/public/custom_form_filter_accounts_vis_controller.tsx

@@ -24,23 +24,36 @@ import {
   EuiFormRow,
   EuiFieldText,
   EuiSpacer,
+  EuiComboBox,
 } from '@elastic/eui';
 import { useKibana } from '../../../src/plugins/kibana_react/public';
 import { CustomFormFilterAccountsVisDependencies } from './plugin';
 import { CustomFormFilterAccountsVisParams } from './types';
 import { removeFiltersByControlledBy, stringToInt, stringToFloat } from './filter_helper';
+import { fetchData } from './fetch_data';
 
 const filterControlledBy = 'accountsVis';
 
 interface CustomFormFilterAccountsVisComponentProps extends CustomFormFilterAccountsVisParams {
   renderComplete: () => {};
 }
 
+interface AccountFormState {
+  age: string,
+  minimumBalance: string,
+  countryStates: any,
+  countryStateSelected: any
+}
+
 /**
  * The CustomFormFilterAccountsVisComponent renders the form.
  */
 class CustomFormFilterAccountsVisComponent extends React.Component<CustomFormFilterAccountsVisComponentProps> {
 
+  asyncInitStated : boolean = false;
+  isLoading : boolean = true;
+  state : AccountFormState;
+
   /**
    * Will be called after the first render when the component is present in the DOM.
    *
@@ -63,17 +76,46 @@ class CustomFormFilterAccountsVisComponent extends React.Component<CustomFormFil
 
   constructor(props: CustomFormFilterAccountsVisComponentProps) {
     super(props);
+
     removeFiltersByControlledBy(this.props.filterManager, filterControlledBy);
+    const initialCountryStates = [{label: '-- All --', value: 0}];
     this.state = {
       age: "",
-      minimumBalance: ""
+      minimumBalance: "",
+      countryStates: initialCountryStates,
+      countryStateSelected: [initialCountryStates[0]],
     };
     if(props.age != null)
       this.state.age = String(props.age);
     if(props.minimumBalance != null)
       this.state.minimumBalance = String(props.minimumBalance);
   }
 
+  async initControls() {
+    if(this.asyncInitStated)
+      return;
+    this.asyncInitStated = true;
+    let statesArray = null;
+    try {
+      statesArray = await fetchData(this.props.coreSetup, "bank*", "state.keyword");
+      statesArray.sort();
+    }
+    catch(error) {
+      statesArray = null;
+    }
+    if(!statesArray)
+      statesArray = [];
+    statesArray.unshift('-- All --');
+    let countryStates = [];
+    for(let i = 0; i<statesArray.length; i++) {
+      countryStates.push({label: statesArray[i], value: i});
+    }
+    this.isLoading = false;
+    this.setState({
+      ["countryStates"]: countryStates
+    });
+  }
+
   onClickButtonApplyFilter = () => {
     removeFiltersByControlledBy(this.props.filterManager, filterControlledBy);
 
@@ -113,6 +155,23 @@ class CustomFormFilterAccountsVisComponent extends React.Component<CustomFormFil
       };
       this.props.filterManager.addFilters(minimumBalanceFilter); 
     }
+
+    if(this.state.countryStateSelected[0].value != 0) {
+      const stateFilter = {
+        meta: {
+          controlledBy: filterControlledBy,
+          alias: 'State: ' + this.state.countryStateSelected[0].label,
+          disabled: false,
+          negate: false,
+        },
+        query: {
+          match_phrase: {
+            state: this.state.countryStateSelected[0].label
+          }
+        }
+      };
+      this.props.filterManager.addFilters(stateFilter);  
+    }
   }
 
   onClickButtonDeleteFilter = () => {
@@ -122,6 +181,7 @@ class CustomFormFilterAccountsVisComponent extends React.Component<CustomFormFil
   onClickButtonClearForm = () => {
     this.state.age = "";
     this.state.minimumBalance = "";
+    this.state.countryStateSelected = [this.state.countryStates[0]];
     removeFiltersByControlledBy(this.props.filterManager, filterControlledBy);
     this.forceUpdate();
   };
@@ -142,10 +202,17 @@ class CustomFormFilterAccountsVisComponent extends React.Component<CustomFormFil
     });
   };
 
+  onCountryStateChange = selectedOptions => {
+    this.setState({
+      ["countryStateSelected"]: selectedOptions
+    });
+  };
+
   /**
    * Render the actual HTML.
    */
   render() {
+    this.initControls();
     const minimumBalanceHelpText = `Input account minimum balance (Maximum is ${this.props.maximumBalance})`;
     return (
       <div className="cffVis" >
@@ -157,6 +224,16 @@ class CustomFormFilterAccountsVisComponent extends React.Component<CustomFormFil
             <EuiFieldText name="minimumBalance" onChange={e => this.onFormChange(e)} value={this.state.minimumBalance} />
           </EuiFormRow>
           <EuiSpacer />
+          <EuiComboBox
+            placeholder="Select a state"
+            isLoading={this.isLoading}
+            singleSelection={{ asPlainText: true }}
+            options={this.state.countryStates}
+            selectedOptions={this.state.countryStateSelected}
+            onChange={this.onCountryStateChange}
+            isClearable={false}
+          />
+          <EuiSpacer />
           <EuiButton onClick={this.onClickButtonApplyFilter} fill>Apply filter</EuiButton>&nbsp;
           <EuiButton onClick={this.onClickButtonDeleteFilter} >Delete filter</EuiButton>&nbsp;
           <EuiButton onClick={this.onClickButtonClearForm} >Clear form</EuiButton>&nbsp;
@@ -192,6 +269,7 @@ export function CustomFormFilterAccountsVisWrapper(props: CustomFormFilterAccoun
       renderComplete={props.renderComplete}
       timefilter={kibana.services.timefilter}
       filterManager={kibana.services.filterManager}
+      coreSetup={kibana.services.coreSetup}
     />
   );
 }

vis_type_custom_form_filter_accounts/public/fetch_data.tsx

@@ -0,0 +1,115 @@
+import {
+  IFieldType,
+  TimefilterContract,
+  SearchSourceFields,
+  DataPublicPluginStart,
+} from '../../../src/plugins/data/public';
+import { CoreSetup } from '../../../src/core/public';
+
+
+function getEscapedQuery(query = '') {
+  // https://www.elastic.co/guide/en/elasticsearch/reference/current/query-dsl-regexp-query.html#_standard_operators
+  return query.replace(/[.?+*|{}[\]()"\\#@&<>~]/g, (match) => `\\${match}`);
+}
+
+interface TermsAggArgs {
+  field?: IFieldType;
+  size: number | null;
+  direction: string;
+  query?: string;
+}
+
+const termsAgg = ({ field, size, direction, query }: TermsAggArgs) => {
+  const terms: any = {
+    order: {
+      _count: direction,
+    },
+  };
+
+  if (size) {
+    terms.size = size < 1 ? 1 : size;
+  }
+
+  if (field?.scripted) {
+    terms.script = {
+      source: field.script,
+      lang: field.lang,
+    };
+    terms.value_type = field.type === 'number' ? 'float' : field.type;
+  } else {
+    terms.field = field?.name;
+  }
+
+  if (query) {
+    terms.include = `.*${getEscapedQuery(query)}.*`;
+  }
+
+  return {
+    termsAgg: {
+      terms,
+    },
+  };
+};
+
+export async function fetchData(core: CoreSetup, indexName, fieldName) {
+  const [, { data: dataPluginStart }] = await core.getStartServices();
+  //search for indexes matching the name
+  const indexPatternsCache = await dataPluginStart.indexPatterns.getCache();
+  const indexPatternAtributes = indexPatternsCache.find(pattern => pattern.attributes.title === indexName);
+  //get all information about this index
+  const indexPattern = await dataPluginStart.indexPatterns.get(indexPatternAtributes.id);
+  const field = indexPattern.fields.find(({ name }) => name === fieldName);
+  const initialSearchSourceState: SearchSourceFields = {
+    timeout: "1000ms",
+    terminate_after: 100000,
+  };
+  const query = null;
+  const aggs = termsAgg({
+    field: indexPattern.fields.getByName("state.keyword"),
+    size: 100, //null means 10 as default bucket size
+    direction: 'desc',
+    query,
+  });
+  const filters = [];
+  const create = dataPluginStart.search.searchSource.create;
+  const searchSource = create(initialSearchSourceState);
+  searchSource.setParent(undefined);
+  const useTimeFilter = false;
+  const timefilter = null;
+  searchSource.setField('filter', () => {
+    const activeFilters = [...filters];
+    if (useTimeFilter) {
+      const filter = timefilter.createFilter(indexPattern);
+      if (filter) {
+        activeFilters.push(filter);
+      }
+    }
+    return activeFilters;
+  });
+  searchSource.setField('size', 0);
+  searchSource.setField('index', indexPattern);
+  searchSource.setField('aggs', aggs);
+  const abortController = new AbortController();
+  const abortSignal = abortController.signal;
+  let resp;
+  try {
+    resp = await searchSource.fetch(abortSignal);
+  } catch (error) {
+    // If the fetch was aborted then no need to surface this error in the UI
+    if (error.name === 'AbortError')
+      return;
+    this.disable('Unable to fetch terms, error: {error.message}'); //TODO
+    return;
+  }
+  const selectOptions = _.get(resp, 'aggregations.termsAgg.buckets', []).map((bucket: any) => {
+    return bucket?.key;
+  });
+
+  if (selectOptions.length === 0) {
+    this.disable('No value to display'); //TODO noValuesDisableMsg(fieldName, indexPattern.title));
+    return;
+  }
+
+  return selectOptions;
+}
+

vis_type_custom_form_filter_accounts/public/plugin.ts

@@ -34,6 +34,7 @@ export interface CustomFormFilterAccountsPluginSetupDependencies {
 }
 
 export interface CustomFormFilterAccountsVisDependencies extends Partial<CoreStart> {
+  coreSetup: CoreSetup;
   timefilter: TimefilterContract;
   filterManager: FilterManager;
 }
@@ -46,10 +47,11 @@ export class CustomFormFilterAccountsPlugin implements Plugin<void, CustomFormFi
     this.initializerContext = initializerContext;
   }
 
-  public setup(core: CoreSetup, { expressions, visualizations, data }: CustomFormFilterAccountsPluginSetupDependencies) {
+  public setup(coreSetup: CoreSetup, { expressions, visualizations, data }: CustomFormFilterAccountsPluginSetupDependencies) {
     const dependencies: CustomFormFilterAccountsVisDependencies = {
       timefilter: data.query.timefilter.timefilter,
       filterManager: data.query.filterManager,
+      coreSetup: coreSetup,
     };
     visualizations.createReactVisualization(getCustomFormFilterAccountsVisDefinition(dependencies));
     //expressions.registerFunction(createCustomFormFilterAccountsVisFn);

vis_type_custom_form_filter_accounts/public/types.ts

@@ -18,6 +18,7 @@
  */
 
 import { TimefilterContract, FilterManager } from '../../../src/plugins/data/public';
+import { CoreSetup } from '../../../src/core/public';
 
 export interface CustomFormFilterAccountsVisParams {
   filterCounter: number;
@@ -26,4 +27,5 @@ export interface CustomFormFilterAccountsVisParams {
   maximumBalance: number;
   timefilter: TimefilterContract;
   filterManager: FilterManager;
+  coreSetup: CoreSetup;
 }