Skip to content

Commit

Permalink
demo: replace Elasticsearch with OpenSearch
Browse files Browse the repository at this point in the history
  • Loading branch information
ntarocco committed Feb 7, 2025
1 parent 251d324 commit 761a35b
Show file tree
Hide file tree
Showing 33 changed files with 3,002 additions and 28,275 deletions.
8 changes: 4 additions & 4 deletions .github/workflows/js-tests.yml
Original file line number Diff line number Diff line change
Expand Up @@ -19,18 +19,18 @@ on:

jobs:
Tests:
runs-on: ubuntu-20.04
runs-on: ubuntu-latest

strategy:
matrix:
node-version: [18.x, 16.x]
node-version: [22.x, 18.x, 16.x]

steps:
- name: Checkout
uses: actions/checkout@v3
uses: actions/checkout@v4

- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v3
uses: actions/setup-node@v4
with:
node-version: ${{ matrix.node-version }}

Expand Down
14 changes: 7 additions & 7 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,33 +27,33 @@ Main features:

You can find a collection of examples in the `src/demos` folder:

- Elasticsearch, an example on how to query Elasticsearch (see below)
- OpenSearch, an example on how to query OpenSearch (see below)
- Zenodo.org, an example on how to query an Invenio 3 instance
- CERN Videos, another Invenio 3 example

Install dependencies and run the React app to try them out (see steps below).

### Elasticsearch
### OpenSearch

To run the Elasticsearch backend for the demo, you can use Docker. A `docker-compose` file with `ES 7` and `nginx` as reverse proxy is available and ready to use.
To run the OpenSearch backend for the demo, you can use Docker. A `docker-compose` file with `ES 7` and `nginx` as reverse proxy is available and ready to use.
Run the services:

```bash
cd src/demos/elasticsearch/docker
cd src/demos/opensearch/docker
docker-compose up
```

Then, init the demo data:

```bash
curl -XPUT 'http://localhost:9200/random?pretty' -H 'Content-Type: application/json' -d @es7-mappings.json
curl -XPOST 'http://localhost:9200/random/_bulk' -H 'Content-Type: application/json' --data-binary @es-random-data.json
curl -XPUT 'http://localhost:9200/random?pretty' -H 'Content-Type: application/json' -d @os2-mappings.json
curl -XPOST 'http://localhost:9200/random/_bulk' -H 'Content-Type: application/json' --data-binary @os-random-data.json
curl -XGET 'http://localhost:9200/random/_count?pretty'
```

Demo data have been randomly generated using <https://next.json-generator.com>.

> In case you want to clear your elastic search from data you can use `curl -X DELETE 'http://localhost:9200/_all'`
> Delete data in the cluster: `curl -X DELETE 'http://localhost:9200/_all'`
## Developer guide

Expand Down
14 changes: 7 additions & 7 deletions docs/docs/connect_your_rest_apis.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ id: connect-your-rest-apis
title: Connect Your REST APIs
---

React-SearchKit comes out of the box with a working adapter for [Elasticsearch 7](https://www.elastic.co/) and [Invenio](https://inveniosoftware.org) REST APIs. However, the library has been designed to allow the creation of custom adapters to plug in any REST API service.
React-SearchKit comes out of the box with a working adapter for [OpenSearch 2](https://opensearch.org/) and [Invenio](https://inveniosoftware.org) REST APIs. However, the library has been designed to allow the creation of custom adapters to plug in any REST API service.

There are 2 ways of connecting your REST APIs:

Expand All @@ -12,12 +12,12 @@ There are 2 ways of connecting your REST APIs:

## Use one of the available

The `Elasticsearch` adapter can be configured by passing an object. The configuration will be injected directly in the [axios](https://github.com/axios/axios) instance used under the hood to perform network requests.
The `OpenSearch` adapter can be configured by passing an object. The configuration will be injected directly in the [axios](https://github.com/axios/axios) instance used under the hood to perform network requests.

```jsx
const searchApi = new ESSearchApi({
const searchApi = new OSSearchApi({
axios: {
url: 'https://my.es.backend.org/search/',
url: 'https://my.os.backend.org/search/',
timeout: 5000,
}
});
Expand Down Expand Up @@ -100,12 +100,12 @@ Custom serializers can then be injected in the configuration of the adapter:
const MyRequestSerializer = new MyRequestSerializer();
const MyResponseSerializer = new MyResponseSerializer();

const searchApi = new ESSearchAPI({
const searchApi = new OSSearchAPI({
axios: {
url: 'https://my.es.backend.org/search/',
url: 'https://my.os.backend.org/search/',
timeout: 5000,
},
es: {
os: {
requestSerializer: MyRequestSerializer,
responseSerializer: MyResponseSerializer,
},
Expand Down
8 changes: 4 additions & 4 deletions docs/docs/filters_aggregations.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ Filters allow to refine search results with exact match on specific fields. For

In React-SearchKit, the query state contains a field called `filters` which contains the list of filters selected by the user.

[Filters](https://www.elastic.co/guide/en/elasticsearch/reference/current/query-filter-context.html#filter-context) and [Aggregations](https://www.elastic.co/guide/en/elasticsearch/reference/current/search-aggregations.html) are fundamental concepts of Elasticsearch.
[Filters](https://opensearch.org/docs/latest/query-dsl/query-filter-context/) and [Aggregations](https://opensearch.org/docs/latest/aggregations/) are fundamental concepts of OpenSearch.
However, they can be applied to any backend or REST APIs.

## Aggregations
Expand All @@ -23,11 +23,11 @@ For example, for each existing `age` value:
* `31`: 18 results
* etc.

In Elasticsearch, there are several types of aggregations available. React-SearchKit comes out of the box with a component that implements [Bucket Terms Aggregations](https://www.elastic.co/guide/en/elasticsearch/reference/current/search-aggregations-bucket-terms-aggregation.html), but any other aggregation should be easy to implement.
In OpenSearch, there are several types of aggregations available. React-SearchKit comes out of the box with a component that implements [Bucket Terms Aggregations](https://opensearch.org/docs/latest/aggregations/bucket/terms/), but any other aggregation should be easy to implement.

## Bucket aggregations

The `<BucketAggregation>` component defines the name of the aggregation to request to the backend or Elasticsearch and the field to compute the aggregations on.
The `<BucketAggregation>` component defines the name of the aggregation to request to the backend or OpenSearch and the field to compute the aggregations on.
For example:

```jsx
Expand All @@ -41,7 +41,7 @@ For example:

> It is your responsibility to create the search request to your backend taking into account the configured aggregations.
The `results` state should then contains aggregations results in the object `aggregations`. The `<BucketAggregation>` component expects the Elasticsearch format:
The `results` state should then contains aggregations results in the object `aggregations`. The `<BucketAggregation>` component expects the OpenSearch format:

```json
{
Expand Down
2 changes: 1 addition & 1 deletion docs/docs/getting_started.md
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ class App extends Component {
}
```

> Note: `React-SearchKit` comes out of the box with support to ElasticSearch 7 and [Invenio](https://inveniosoftware.org) REST APIs. To connect your own REST APIs, you can override the default configuration or provide your own adapter for your backend. Follow the next steps of this guide for detailed instructions on how to do it.
> Note: `React-SearchKit` comes out of the box with support to OpenSearch 2 and [Invenio](https://inveniosoftware.org) REST APIs. To connect your own REST APIs, you can override the default configuration or provide your own adapter for your backend. Follow the next steps of this guide for detailed instructions on how to do it.
## Add the first component

Expand Down
2 changes: 1 addition & 1 deletion docs/docs/main_concepts.md
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ API responses will update this part of the state. Components that are connected

The API layer is composed of:

* `SearchAPI`: adapter for HTTP requests. Available in 2 flavors, for Elasticsearch and Invenio, it is responsible of serializing the `query` state to search requests for your REST APIs and serialize back responses to mutate the `results` state.
* `SearchAPI`: adapter for HTTP requests. Available in 2 flavors, for OpenSearch and Invenio, it is responsible of serializing the `query` state to search requests for your REST APIs and serialize back responses to mutate the `results` state.
* `UrlHandlerApi`: an object capable of serializing the `query` state to the URL query string and vice versa, very useful for deep linking.

> Note: given the structure of the Redux state, responses serialization must be adapted to the `results` state structure.
Expand Down
29 changes: 15 additions & 14 deletions docs/website/pages/en/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,14 @@
* under the terms of the MIT License; see LICENSE file for more details.
*/

const React = require('react');
const React = require("react");

const CompLibrary = require("../../core/CompLibrary.js");

const CompLibrary = require('../../core/CompLibrary.js');
const Container = CompLibrary.Container;
const GridBlock = CompLibrary.GridBlock;

const siteConfig = require(process.cwd() + '/siteConfig.js');
const siteConfig = require(process.cwd() + "/siteConfig.js");

class Button extends React.Component {
render() {
Expand All @@ -27,7 +28,7 @@ class Button extends React.Component {
}

Button.defaultProps = {
target: '_self',
target: "_self",
};

class Header extends React.Component {
Expand Down Expand Up @@ -55,13 +56,13 @@ class Header extends React.Component {
</div>
</div>
</div>
<div className="githubButton" style={{ minHeight: '20px' }}>
<div className="githubButton" style={{ minHeight: "20px" }}>
<a
className="github-button"
href={this.props.config.repoUrl}
data-icon="octicon-star"
data-count-href="/inveniosoftware/react-searchkit/stargazers"
data-show-count={true}
data-show-count
data-count-aria-label="# stargazers on GitHub"
aria-label="Star inveniosoftware/react-searchkit on GitHub"
>
Expand All @@ -82,31 +83,31 @@ class Home extends React.Component {
<div>
<Header config={siteConfig} />
<div className="mainContainer">
<Container padding={['bottom', 'top']} background="light">
<Container padding={["bottom", "top"]} background="light">
<GridBlock
align="center"
layout="threeColumn"
contents={[
{
title: 'Ready To Use',
title: "Ready To Use",
content: `Compose your search UI choosing between any of the available components. Override the
default look and feel of each component and provide yours.`,
},
{
title: 'Fully Configurable',
content: `Use React-SearchKit with your search REST API endpoint or Elasticsearch by providing your
title: "Fully Configurable",
content: `Use React-SearchKit with your search REST API endpoint or OpenSearch by providing your
configuration or implementation. Customize deep linking and integrate with React Router.`,
},
{
title: 'Extensible',
title: "Extensible",
content:
'Create new components in a simple way and plug them to the other already available ones.',
"Create new components in a simple way and plug them to the other already available ones.",
},
]}
/>
</Container>
<Container padding={['all']}>
<div style={{ textAlign: 'center' }}>
<Container padding={["all"]}>
<div style={{ textAlign: "center" }}>
<img
src={`${siteConfig.baseUrl}img/screenshot.png`}
alt="Screenshot"
Expand Down
Loading

0 comments on commit 761a35b

Please sign in to comment.