ElsQuery
Elastic Search Query Builder Of Vuejs which is Like Kibana Query Builder. See also :
Demo
Environment
vue 2.5.13buefy 0.6.6
Installation
npm i -S els-queryUsage
main.js
import Vue from 'vue';
import Vuex from 'vuex';
import ElsQuery from 'els-query';
import Buefy from 'buefy';
import 'buefy/lib/buefy.min.css';
Vue.use(Vuex);
Vue.use(Buefy);
const store = new Vuex.Store();
Vue.use(ElsQuery, {
store
});index.html
<link rel="stylesheet" href="//cdn.materialdesignicons.com/2.0.46/css/materialdesignicons.min.css">template
<els-query @change="(query) => yourMethod(query)" :update-interval="10000"></els-query>Features
-
FiltersADDEDITDELETEDISABLE, ENABLE
-
TimeRangeQUICKABSOLUTE
-
QueryStringWILDCARD
-
AutoRefresh
Options
- Props
| key | description | type | default |
|---|---|---|---|
label |
label of panel |
String |
ElsQuery |
filterFactors |
factors of elastic search |
Array |
[] |
filterFields |
fields of _source |
Array |
[{ key: "duration", value: "duration" },{ key: "user_id", value: "user.udid" },{ key: "user_tags", value: "user.tags" },{ key: "user_name", value: "user.name" },{ key: "device_model", value: "user.device_info.model" },{ key: "device_system", value: "user.device_info.system_name" },{ key: "device_system_api", value: "user.device_info.system_api_id" },{ key: "device_system_build", value: "user.device_info.system_build_number" },{ key: "device_system_version", value: "user.device_info.system_version" },{ key: "zone_id", value: "zone.id" },{ key: "zone_name", value: "zone.name" },{ key: "zone_tags", value: "zone.tags" },{ key: "event_title", value: "event.title" },{ key: "event_type", value: "event.type" },{ key: "event_style", value: "event.style" }] |
updateInterval |
auto refresh interval |
Number |
1000 |
- Events
| name | description | arguments |
|---|---|---|
change |
query has changed, perhaps caused by filters, queryString, dateTimeStart, dateTimeEnd |
(query) |
Example
{
"query": {
"bool": {
"must": [
{
"range": {
"timestamp": {
"gte": 1522739455974,
"lte": 1522740355974,
"format": "epoch_millis"
}
}
},
{
"range": {
"duration": {
"gte": "asa"
}
}
},
{
"bool": {
"should": [
{
"match_phrase": {
"zone.id": "sas"
}
}
],
"minimum_should_match": 1
}
}
],
"must_not": [
]
}
}
}Store
state
// TimeRange module
this.$store.state.TimeRange.dateTimeStart;
this.$store.state.TimeRange.dateTimeEnd;
// ElsQuery module
this.$store.state.ElsQuery.query;getters
// recommend to deep clone this query so that you won't change the internal query
this.$store.getters['ElsQuery/GET_QUERY'];
mutations
this.$store.commit('TimeRange/EDIT_DATE_TIME_START', new Date());
this.$store.commit('TimeRange/EDIT_DATE_TIME_END', new Date());License
MIT