Coder Social home page Coder Social logo

eihabshadeed / dejavu Goto Github PK

View Code? Open in Web Editor NEW

This project forked from appbaseio/dejavu

0.0 2.0 0.0 54.2 MB

The Missing Web UI for Elasticsearch

Home Page: https://opensource.appbase.io/dejavu

License: MIT License

JavaScript 57.71% HTML 30.31% CSS 11.97%

dejavu's Introduction

dejavu: The Missing Web UI for Elasticsearch

GitHub License React Version Code Climate

  1. Dejavu: Intro
  2. Features
    a. Filter Views
    b. Modern UI Elements
    c. Realtime Data Updates
    d. Importing JSON or CSV Data
  3. Comparison
  4. Roadmap
  5. Build Locally
  6. Get Dejavu
    a. Docker Installation
    b. Hosted Alternatives

1. Dejavu Intro

dejavu is the missing web UI for Elasticsearch. Existing web UIs leave much to be desired or are built with server side page rendering techniques (I am looking at you, Kibana).

Thus started the journey of dejavu, with a goal to build a modern Web UI (no page reloads, infinite scroll, filtered views, realtime updates) with 100% client side rendering. It is available today as a hosted app, chrome extension and as a docker image.

Starting version 1.0.0, dejavu is the only web UI that supports importing data via JSON and CSV files.


2. Features

Filter Views

Filter Views

Sort through the data, find things visually, hide irrelevant data and make sense of all the numbers and dates. Filters work by identifying data mappings from the Elasticsearch index. If dejavu sees a string field, it will provide filters for search, has and has not and is also mindful if the data is analyzed. Similarly a numeric field allows filtering on ranges and a date field allows filtering data by dates.

dejavu also supports local filters like column sorting and showing a subset of columns.

dejavu also supports query filtered view, where a user can write an Elasticsearch query and the data view will be filtered according to the query.

Modern UI elements

Pagination

It's not uncommon to have thousands of records in a type. dejavu supports an infinite scroll based UI, pagination is so old school.

dejavu also supports browsing data from multiple types and bulk deletions. It also let's you add new records and update existing records.

Realtime Data Updates

Realtime data updates

dejavu uses a websockets based API and subscribes for data changes for the current filtered view. For this to work, the Elasticsearch server needs to support a websockets based publish API. Currently, you can take advantage of this feature by hosting your data with appbase.io.

Importing JSON or CSV Data

Importing JSON or CSV files

This newly supported feature allows importing CSV or JSON data directly into Elasticsearch through a guided data mappings configuration.


3. Comparison with other data browsers

Features dejavu ES-head ES-kopf ES-browser Kibana
Installation Chrome extension, Docker Image, Hosted App. Elasticsearch plugin, static page Elasticsearch plugin, static page Elasticsearch plugin (doesn't work with v2.0 and above) Elasticsearch plugin
Modern UI Built with React v15.6.0, uses a live-reload interface. Built with jQuery v1.6.1, slightly stodgy Built with Angular 1.x Built with ExtJs, but a bit stodgy Built with Node.JS, Hapi, Jade
Browser features CRUD with support for data filters. Read data with support for full-text search. No data view Data view support for a single type Read view with support for visualizations / charting
Data Import/Export Yes, in JSON and CSV formats. - - - Only export is supported, no CSV support.
Open Source MIT license Apache v2.0 MIT license Apache v2.0 Apache v2.0

4. Roadmap

Here's a rough roadmap of things to come in the version 1.0.0 release.

๐ŸŽ† We just hit the 1.0.0 roadmap.

  • Battle-testing with different datasets
  • Feature support for advanced filtering
    Offline detection and reconnection for realtime updates
  • Performance improvements while scrolling
  • Support for importing and exporting data
  • Support for a continuous query view
  • Available as a docker image

Roadmap for version 2.0.0 release, subject to change:

  • An intuitive data editing experience in tabular mode (v/s JSON edit mode)
  • View data types from within the data browser view
  • A more streamlined import process
  • Create a test coverage suite

5. Build Locally

dev branch is the bleeding edge version of dejavu, all new changes go here.

chrome-extension branch is where we make chrome extension related changes.

gh-pages branch is for the hosted app, as well as for the version that runs on https://dashboard.appbase.io.

Local Installation

  1. git clone https://github.com/appbaseio/dejavu
  2. git checkout master
  3. npm install
  4. bower install
  5. npm start (open dejavu in the browser on http://localhost:1358/live)

Local Build

chrome-extension branch: Chrome extension

$ npm run build_chrome_extension

gh-pages branch: Github hosted pages

$ npm run build_gh_pages

How to Contribute

The source code is under the live/src directory. You can make pull requests against the dev branch.


6. Get Dejavu

Docker Installation

docker run -p 1358:1358 -d appbaseio/dejavu
open http://localhost:1358/live

You can also run a specific version of dejavu by specifying a tag. For example, version 1.0.0 can be used by specifying the docker run -p 1358:1358 appbaseio/dejavu:1.0.0 command.

CORS

To make sure you enable CORS settings for your ElasticSearch instance, add the following lines in the ES configuration file.

http.port: 9200
http.cors.allow-origin: "http://localhost:1358"
http.cors.enabled: true
http.cors.allow-headers : X-Requested-With,X-Auth-Token,Content-Type,Content-Length,Authorization
http.cors.allow-credentials: true

If you are running your Elasticsearch with docker, you can use flags to pass the custom CORS configuration.

Elasticsearch v2.x

docker run --name es -d -p 9200:9200 elasticsearch:2 -Des.http.port=9200 -Des.http.cors.allow-origin="http://localhost:1358" -Des.http.cors.enabled=true -Des.http.cors.allow-headers=X-Requested-With,X-Auth-Token,Content-Type,Content-Length,Authorization -Des.http.cors.allow-credentials=true

Elasticsearch v5.x

docker run --name es -d -p 9200:9200 -d elasticsearch:5 -E http.port=9200 -E http.cors.allow-origin="http://localhost:1358" -E http.cors.enabled=true -E http.cors.allow-headers=X-Requested-With,X-Auth-Token,Content-Type,Content-Length,Authorization -E http.cors.allow-credentials=true

Hosted Alternatives

can also be run via hosted app at https://opensource.appbase.io/dejavu/live or installed as a chrome extension.

For example: If you are using the chrome-extension instead of docker image, the http.cors.allow-origin in Elasticsearch.yml file would change accordingly:

http.port: 9200
http.cors.allow-origin: "chrome-extension://jopjeaiilkcibeohjdmejhoifenbnmlh"
http.cors.enabled: true
http.cors.allow-headers : X-Requested-With,X-Auth-Token,Content-Type,Content-Length,Authorization
http.cors.allow-credentials: true

dejavu's People

Contributors

farhan687 avatar divyanshu013 avatar siddharthlatest avatar kaushik94 avatar hkulekci avatar agnivade avatar matthewberryman avatar sacheendra avatar ccoenraets avatar chrisdfeld avatar

Watchers

James Cloos avatar Eihab Shadeed avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.