This assignment is to further assess your development and critical thinking skills. A variety of technologies, including Elastic Search, to build a robust front-end application.
We have provided you a sample front-end application and a node server application. The node server application connects to the Elastic Search and the front-end application is a react SPA.
- You must first export the following environment variable: export BONSAI_URL="https://pscdj5wv3i:[email protected]:443"
- You can run the node application as:
npm start
The front-end application is setup with a table that can render IRoleDef[]. At the moment, it does not do anything. Your assignment is to implement functionality.
Run using npm run dev.
There are a total of 18 documents in the Elastic Search Index. The Node Server application is already configured to connect with Elastic Search. You can view the documents by running the node app and using the following JavaScript. You must use Axios to make requests. The fetch below is just an example.
fetch("http://localhost:3000/searchRoles", {
body: "{\n \"from\" : 0, \"size\" : 20,\n \"query\": {\n \"match_all\": {}\n }\n}",
headers: {
"Content-Type": "application/json"
},
method: "GET"
})
Note: Elastic Search client is already setup on node_server.js. You only need to pass the correct queries in the body, and node application will relay it to Elastic Search.
The documents contain many properties. You will mostly deal with id, name, description, entityState.itemID, entityState, and allowedMemberTypes. (Other fields are less likely to be used).
Each document is either Published or Deleted. You will be using these in assignment.
Published: In the document, if entityState.itemID = 5, then document is published.
Deleted: In the document, if entityState.itemID = 7, then document is published.
In this assignment, you will do the following:
- Query data from Elastic Search.
- Implement Redux for Data flow.
- Add
idColumn to the table. - Prepend your name to all class names using Webpack loader.
- Review Code and make any architectural/UI changes you deem necessary.
- Additional functionality missing that you believe would be good to add.
The provided RoleDefsContainer must do the following:
- When page Load, show only "Published" Items.
- When Filter Input changes, apply search filter to Elastic Search query. You must search both the "Name" and "Description" fields.
- When "Show Deleted" is clicked under
...right of the filter input, show "Deleted" items in addition to published items.
Note: You should make Elastic Search reuqest for filtering and getting deleted. Do not frontload all data in JavaScript and filter in JavaScript.
Please use React Redux to implement API calls and storing elastic search documents. Architecture choices will be strongly evaluated.
In the table, add an ID column and show document IDs for the data.
Update Webpack configuration to append your name to all class names generated by Webpack.
Ex: If current class name is flexbox-wrap, you can make it something like John-flexbox-wrap.
Hint: css-loader.
"TLC" means tender loving care. In this part, use your best judgement to improve UI and architecture. Also feel free to add any other functionality that would make the application better.
To help you get started, here is the query you would use to get "Published" items.
curl -X GET "http://localhost:3000/searchRoles" -H 'Content-Type: application/json' -d '{
"from" : 0, "size" : 20,
"query": {
"bool" : {
"must" : [
{"term":{"entityState.itemID":5}}
]
}
}
}'
Here are some resources on Elastic Search:
- https://www.elastic.co/guide/en/elasticsearch/reference/current/query-dsl.html
- https://medium.com/elasticsearch/introduction-to-elasticsearch-queries-b5ea254bf455
We are extensively using engage-ui to style our library. You can view the project on GitHub for reference.