Elasticsearch gui for your browser https://elasticvue.com

Contents

1. About
2. Usage
   • Running elasticvue
   • Elasticsearch Configuration
3. Browser support
4. Troubleshooting
5. Comparing with other frontends
6. Development

Elasticvue is a gui for elasticsearch allowing you to search and filter your clusters data right in your browser.

It officially works with the following elasticsearch versions:

• 5.6
• 6.8
• 7.0
• 7.1
• 7.2
• 7.3
• 7.4
• 7.5

Other versions might or might not work, elasticsearch-js will fallback to the 7.4 api if an unsupported version is used.

• Cluster overview
• Index management
• Searching and filtering documents
• Manually running any query against your cluster
• Snapshot + repository management
• Utilities, e.g. deleting all indices

You can use one of the following ways to run elasticvue:

Online version

Visit https://app.elasticvue.com or https://app.elasticvue.com.

Docker

Use the existing image:

• docker run -p 8080:8080 -d cars10/elasticvue Image at Docker Hub (~50mb compressed)

Or build the image locally:

• Checkout the repo git clone https://github.com/cars10/elasticvue.git
• Open the folder cd elasticvue
• Build docker build -t elasticvue .
• Run docker run -p 8080:8080 elasticvue

Then open https://localhost:8080 in your browser.

Browser extensions

• Chrome: Install the extension from the chrome webstore
• Firefox: Install the extension from addons.mozilla.org

Start elasticvue by clicking on the icon in your toolbar.

Run locally

• Checkout the repo git clone https://github.com/cars10/elasticvue.git
• Open the folder cd elasticvue
• Install dependencies yarn install
• Run a production server via yarn prod or dev server yarn serve

Alternatively run yarn build and host the assets yourself. Example nginx config:

server {
  listen 80;
  server_name yourdomain.com;
  root /var/www/elasticvue_app/dist;
  location / {
    try_files $uri $uri/ /index.html?$args;
  }
}

See the official vuejs deployment guide for more details.

You have enable CORS to allow connection to your elasticsearch cluster, even if you run the app locally.

Find your elasticsearch configuration (for example /etc/elasticsearch/elasticsearch.yml) and add the following lines:

# enable CORS
http.cors.enabled: true

# Then set the allowed origins based on how you run elasticvue. Chose only one:
# for docker / running locally
http.cors.allow-origin: "https://localhost:8080"
# online version
http.cors.allow-origin: /https?:\/\/app.elasticvue.com/
# chrome extension
http.cors.allow-origin: "chrome-extension:https://hkedbapjpblbodpgbajblpnlpenaebaa"
# firefox extension
http.cors.allow-origin: "moz-extension:https://4b05c928-89bb-4a48-af52-b871f123a06b"

# and if your cluster uses authorization you also have to add:
http.cors.allow-headers: X-Requested-With,Content-Type,Content-Length,Authorization

You can also use a regex to enable all sources at once:

http.cors.allow-origin: /(http:\/\/localhost:8080)|(chrome-extension:\/\/hkedbapjpblbodpgbajblpnlpenaebaa)|(moz-extension:https://4b05c928-89bb-4a48-af52-b871f123a06b)|(https?:\/\/app.elasticvue.com)/

After configuration restart your cluster and you should be able to connect.

Development is done on chrome. Firefox, safari and edge should work but are mostly untested.

Before opening an issue please try to reset elasticvue to its default settings. To reset please click Disconnect and reset in the footer, this will reset all your saved filters and you have to reconnect to your cluster. Feel free to open an issue if your problem persists.

See the Wiki. Comparing to other frontends

Setup and running

# clone
git clone https://github.com/cars10/elasticvue.git
cd elasticvue

# install dependencies
yarn install

# serve with hot reload at localhost:8080
yarn serve

# tests
yarn test:unit   # add --watch to watch test files

# for e2e tests you need a running elasticsearch server on port 9123
yarn test:e2e    # add --headless for headless mode

Other commands

# linting
yarn lint

# minimized build for production
yarn build

# create bundle size report at dist/report.html, dist/legacy-report.html
yarn build --report

Building the chrome/firefox extensions: (Hint: you need web-ext for the firefox extension to build)

yarn build_browser_extensions

• refactor runRequest to use promises
• document, index, snapshot repo and snapshot: add edit/delete
• catch elasticsearch 5xx errors

• cluster settings
• data import/export

• add more specs
• refactor vuex state to use actions?
• performance - use web workers? wasm? requestIdleCallback?

MIT