Connecting to Elasticsearch

This article illustrates how to build a report based on data from Elasticsearch.

Prerequisites

• Elasticsearch version 6.x or later
• Flexmonster Pivot version 2.7.0 or later
  Note If your Elasticsearch version is 8.x or later, ensure to use Flexmonster Pivot 2.9.26 or later.

Step 1. Set up Elasticsearch

Skip this step if you have already set up Elasticsearch. Otherwise, start from this guide: Download Elasticsearch.

Step 2. Enable cross-origin resource sharing (CORS)

By default, Elasticsearch blocks cross-domain requests. To allow Flexmonster to connect to your Elasticsearch index, you must enable CORS in Elasticsearch.

To enable CORS, open the elasticsearch.yml file. Then, add or update the following lines:

http.cors.enabled: true
# On production, use the domain where Flexmonster is running
http.cors.allow-origin: "*"
http.cors.allow-credentials: true
http.cors.allow-headers: "X-Requested-With, Content-Type, Content-Length, Authorization"

Note To allow a connection to the Elasticsearch server from a different machine, open an appropriate port in the firewall. The default port is 9200, but it may be different depending on your configuration in the elasticsearch.yml file.

Step 3. Embed the component into your webpage

If Flexmonster is not yet embedded, set up an empty component in your webpage:

const pivot = new Flexmonster({
  container: "pivotContainer",
  toolbar: true
});

<FlexmonsterReact.Pivot
 toolbar={true}
/>

<fm-pivot
 [toolbar]="true">
</fm-pivot>

<Pivot
 toolbar
/>

Step 4. Configure the report

On the client side, configure the report based on whether security is enabled or disabled in Elasticsearch:

const pivot = new Flexmonster({
  container: "pivotContainer",
  toolbar: true,
  report: {
    dataSource: {
      type: "elasticsearch",
      // Your secured Elasticsearch endpoint
      node: "https://localhost:9200", 
      // The name of your Elasticsearch index
      index: "fm-product-sales",
      requestHeaders: {
        Authorization: "Basic " + btoa("<your_username>:<your_password>")
      }
    },
  }
});

const pivot = new Flexmonster({
  container: "pivotContainer",
  toolbar: true,
  report: {
    dataSource: {
      type: "elasticsearch",
      // Your Elasticsearch endpoint
      node: "https://olap.flexmonster.com:9200",
      // The name of your Elasticsearch index
      index: "fm-product-sales"
    }
  }
});

See the full list of Flexmonster properties used to configure the dataSource object.

List of supported configuration parameters

When connecting to data from Elasticsearch, you can use the following properties of the DataSourceObject:

Step 5. See the result

Open your webpage in the browser to see Flexmonster with your Elasticsearch data Live example.

If you run into any issues, visit our troubleshooting page.

Optimize data loading

To decrease the data loading time, you can use the dataSource.subquery property. It sets a server-side filter, so Flexmonster will get only the needed part of the data. This approach also allows you to define which data is shown on the grid.

The example below demonstrates how to load specific members of Category and Color fields:

report: {
  dataSource: {
    type: "elasticsearch",
    node: "https://olap.flexmonster.com:9200",
    index: "fm-product-sales",
    subquery: {
      bool: {
        filter: [{
          terms: {
            "Category.keyword": ["Bikes", "Accessories"],
          }
        },
        {
          terms: {
            "Color.keyword": ["blue", "red"]
          }
        }]
      }
    }
  }
}

Live example

Custom security layer

If you need to add custom authentication or manually handle requests on the backend, try out our sample project, which connects Flexmonster to Elasticsearch using a proxy server.

See also

• Configuring the mapping
• Configuring which data subset is shown