From 466bf8bdecababe7d41b8c89e8fd9fc0ce1431d9 Mon Sep 17 00:00:00 2001
From: John Susek <john@johnsolo.net>
Date: Wed, 14 Nov 2018 13:56:51 -0600
Subject: [PATCH 1/4] Update UPGRADING.md instructions. Show time labels along
 x-axis of chart. Fix issue with 'field changes' rule when used with a
 timeframe. Fix issue with thresholds not updating.

---
 MAINTENANCE.md              |  4 +++-
 UPGRADING.md                |  2 +-
 src/components/DateTime.vue | 17 ++---------------
 src/lib/chartOptions.js     |  8 +++++++-
 src/lib/parseDate.js        | 17 +++++++++++++++++
 src/store/config/index.js   |  1 +
 6 files changed, 31 insertions(+), 18 deletions(-)
 create mode 100644 src/lib/parseDate.js

diff --git a/MAINTENANCE.md b/MAINTENANCE.md
index 4a8a4ad2..d60365e3 100644
--- a/MAINTENANCE.md
+++ b/MAINTENANCE.md
@@ -14,7 +14,9 @@ Run `npm update` to install latest versions of packages per package.json.
 ## Elastalert (if neccessary)
 
 - Stash all changes in elastalert project
-- Create docker image + push to servercentral/elastalert
+- `make build v=master`
+- `docker tag id servercentral/elastalert`
+- `docker push servercentral/elastalert`
 
 ## Praeco
 
diff --git a/UPGRADING.md b/UPGRADING.md
index 88259064..cdea2727 100644
--- a/UPGRADING.md
+++ b/UPGRADING.md
@@ -3,7 +3,7 @@
 To upgrade to the newest release of praeco, run the following commands:
 
 - `docker pull servercentral/praeco && docker pull servercentral/elastalert`
-- `docker-compose down && docker-compose up`
+- `docker-compose up --force-recreate --build && docker image prune -f`
 
 Some version upgrades require further configuration. Version specific upgrade instructions are below.
 
diff --git a/src/components/DateTime.vue b/src/components/DateTime.vue
index cd01e045..4aef23b9 100644
--- a/src/components/DateTime.vue
+++ b/src/components/DateTime.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import moment from 'moment-timezone';
+import parseDate from '@/lib/parseDate';
 
 export default {
   props: {
@@ -35,21 +35,8 @@ export default {
   computed: {
     formatted() {
       if (!this.date) return;
-
-      let momentDate;
-
-      if (typeof this.date === 'string') {
-        momentDate = moment(String(this.date)).tz(this.timeZone);
-      } else if (this.date.toString().length === 10) {
-        momentDate = moment.unix(String(this.date)).tz(this.timeZone);
-      } else {
-        momentDate = moment(this.date).tz(this.timeZone);
-      }
-
+      let momentDate = parseDate(this.date);
       return momentDate.format('M/D/YYYY h:mm:ssa');
-    },
-    timeZone() {
-      return Intl.DateTimeFormat().resolvedOptions().timeZone;
     }
   },
   watch: {
diff --git a/src/lib/chartOptions.js b/src/lib/chartOptions.js
index 5e734630..9f2cc5e3 100644
--- a/src/lib/chartOptions.js
+++ b/src/lib/chartOptions.js
@@ -1,3 +1,5 @@
+import parseDate from '@/lib/parseDate';
+
 let textStyle = {
   fontSize: 13,
   fontWeight: '500',
@@ -27,7 +29,11 @@ export default {
     boundaryGap: true,
     data: [],
     axisLabel: {
-      show: false
+      show: true,
+      formatter(val) {
+        let momentDate = parseDate(val);
+        return momentDate.format('h:mma');
+      }
     }
   },
   yAxis: {
diff --git a/src/lib/parseDate.js b/src/lib/parseDate.js
new file mode 100644
index 00000000..298b3bfc
--- /dev/null
+++ b/src/lib/parseDate.js
@@ -0,0 +1,17 @@
+import moment from 'moment-timezone';
+
+let timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+
+export default function parseDate(val) {
+  let momentDate;
+
+  if (typeof val === 'string') {
+    momentDate = moment(String(val)).tz(timeZone);
+  } else if (val.toString().length === 10) {
+    momentDate = moment.unix(String(val)).tz(timeZone);
+  } else {
+    momentDate = moment(val).tz(timeZone);
+  }
+
+  return momentDate;
+}
diff --git a/src/store/config/index.js b/src/store/config/index.js
index e6f8c880..25d6aa3b 100644
--- a/src/store/config/index.js
+++ b/src/store/config/index.js
@@ -111,6 +111,7 @@ export default {
         commit('match/UPDATE_QUERY_KEY', config.query_key);
         commit('match/UPDATE_COMPARE_KEY', config.compare_key);
         commit('match/UPDATE_TIMEFRAME', config.timeframe);
+
         if (config.type === 'change' && config.timeframe && Object.keys(config.timeframe).length) {
           commit('match/UPDATE_USE_TIMEFRAME', true);
         }

From 9af722d65942121bac8c6df94c8802073b70c3d8 Mon Sep 17 00:00:00 2001
From: John Susek <john@johnsolo.net>
Date: Wed, 5 Dec 2018 12:52:24 -0600
Subject: [PATCH 2/4] Update README with new update instructions + details for
 127.0.0.1 usage. Fix issue with thresholds. Add a "use timeframe" switch when
 in the Change rule type. Fix issue with template variables on "grouped over"
 queries

---
 .eslintrc.js                                  |   9 +-
 README.md                                     |  36 ++++--
 src/components/config/ConfigCondition.vue     | 106 ++++++++++++++----
 .../config/alert/ConfigAlertSubjectBody.vue   |   8 +-
 src/store/metadata.js                         |  16 +++
 version.json                                  |   2 +-
 6 files changed, 141 insertions(+), 36 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 00e9d686..5b5dcc28 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -44,7 +44,14 @@ module.exports = {
         optionalDependencies: ['test/unit/index.js']
       }
     ],
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'vue/html-closing-bracket-newline': [
+      'error',
+      {
+        singleline: 'never',
+        multiline: 'never'
+      }
+    ]
   },
   parserOptions: {
     parser: 'babel-eslint'
diff --git a/README.md b/README.md
index 6501ccb4..f6146812 100644
--- a/README.md
+++ b/README.md
@@ -3,11 +3,11 @@
 Praeco is an alerting tool for elasticsearch – a GUI for [elastalert](https://github.com/yelp/elastalert), using the [elastalert API](https://github.com/bitsensor/elastalert).
 
 - Interactively build alert rules using a query builder
-- View a preview of your query and a graph of results over the last 24h
-- Supports Any, Blacklist, Whitelist, Change, Frequency, Flatline, Spike and Metric Aggregation elastalert rule types
+- View a preview of your query and a graph of results
 - Test your alerts against historical data
 - See a preview of your alert subject/body as you are editing
 - Supports notifications to Slack, Email or HTTP POST
+- Supports Any, Blacklist, Whitelist, Change, Frequency, Flatline, Spike and Metric Aggregation elastalert rule types
 - View logs of when your alerts are checked and when they fire
 - Use templates to pre-fill commonly used rule options
 
@@ -20,22 +20,24 @@ First, edit rules/BaseRule.config and change the slack and smtp settings to matc
 Then run the app using docker:
 
 ```bash
-export PRAECO_ELASTICSEARCH=<your elasticsearch ip>
+export PRAECO_ELASTICSEARCH=<your elasticsearch ip*>
 docker-compose up
 ```
 
+\* If you are using 127.0.0.1 for ES, it won't work. See first item under the Troubleshooting section.
+
 Praeco should now be available on http://127.0.0.1:8080
 
-A [walkthrough article](https://medium.com/@john_8166/praeco-walkthrough-5aada7e078a9) is available to guide you through creating your first template and rule.
+A [walkthrough article](https://medium.com/@john_8166/praeco-walkthrough-5aada7e078a9) is available to guide you through creating your first rule.
 
 ## Upgrading
 
 ```
-docker pull servercentral/praeco && docker pull servercentral/elastalert
-docker-compose down && docker-compose up
+docker pull servercentral/praeco; docker pull servercentral/elastalert
+docker-compose up --force-recreate --build; docker image prune -f
 ```
 
-Please see [UPGRADING.md](https://github.com/ServerCentral/praeco/blob/master/UPGRADING.md) for version-specific instructions.
+ℹ️ You may need to update your config files when a new version comes out. Please see [UPGRADING.md](https://github.com/ServerCentral/praeco/blob/master/UPGRADING.md) for version-specific instructions.
 
 ## Configuration
 
@@ -83,9 +85,23 @@ Replace 1.2.3.4 with your Elasticsearch IP.
 
 ## Troubleshooting
 
+#### I am using 127.0.0.1 for PRAECO_ELASTICSEARCH and it isn't working
+
+Praeco, running within a docker container, cannot communicate with your ES bound to localhost. You need to change your ES `network.host` setting
+to something different. The value of `_site_` is suggested, that will bind to a local network IP on your machine. Then use that
+IP address for PRAECO_ELASTICSEARCH. Here's a working example:
+
+```
+elasticsearch -E network.host=_site_
+export PRAECO_ELASTICSEARCH=192.168.1.145
+docker-compose up
+```
+
+Replace 192.168.1.145 with the IP address your ES binds to (look for bound_addresses in the elasticsearch launch log).
+
 #### I'm not receiving alerts even though I expect them
 
-First of all, try to test your alert and see if that is returning results.
+First of all, try to test your alert with varying time frames and see if that is returning any results.
 
 If the test is returning results, but you are not receiving any alerts, check the error log. There may be a problem with your slack or email settings. Make sure you edited rules/BaseRule.config and have correct values in there.
 
@@ -93,11 +109,11 @@ If the test is not returning results, even though you think it should, try readi
 
 #### Failed to establish a new connection: [Errno 111] Connection refused
 
-You will see this error when launching if praeco cannot find elasticsearch at the IP address you specified at $PRAECO_ELASTICSEARCH. Please make sure you can communicate with this IP address by issuing the following command: `curl http://$PRAECO_ELASTICSEARCH:9200`. If the connection is refused, your machine cannot communicate with Elasticsearch, it may be a networking problem.
+You will see this error when launching if praeco cannot find elasticsearch at the IP address you specified at \$PRAECO_ELASTICSEARCH. Please make sure you can communicate with this IP address by issuing the following command: `curl http://$PRAECO_ELASTICSEARCH:9200`. If the connection is refused, your machine cannot communicate with Elasticsearch, it may be a networking problem.
 
 #### 404 error in error log for slack webhook
 
-Make sure the channel you are trying to post to exists.
+Make sure the channel/username you are trying to post to exists.
 
 ## Developing
 
diff --git a/src/components/config/ConfigCondition.vue b/src/components/config/ConfigCondition.vue
index 7b4aa994..661ebe29 100644
--- a/src/components/config/ConfigCondition.vue
+++ b/src/components/config/ConfigCondition.vue
@@ -368,20 +368,43 @@
     </el-popover>
 
     <span v-show="showTime">
-      <el-popover v-show="metricAggType === 'count' || metricAggType === 'field changes'">
-        <span slot="reference" class="pop-trigger">
+      <el-popover v-show="metricAggType === 'count' || metricAggType === 'field changes'" popper-class="popover-time">
+        <span
+          slot="reference"
+          class="pop-trigger">
           <span>
-            <span v-if="metricAggType === 'field changes'">WITHIN</span>
-            <span v-if="metricAggType === 'count'">FOR</span>
-            THE LAST
+            <span v-if="metricAggType === 'field changes'">
+              WITHIN
+              <span v-if="!useTimeframe">ANY TIMEFRAME</span>
+            </span>
+            <span v-if="metricAggType === 'count'">FOR </span>
+            <span v-if="useTimeframe">THE LAST</span>
           </span>
-          <ElastalertTimeView :time="timeframe" />
+          <ElastalertTimeView
+            v-if="useTimeframe"
+            :time="timeframe"/>
         </span>
-        <ElastalertTimePicker
-          :unit="Object.keys(timeframe)[0]"
-          :amount="Object.values(timeframe)[0]"
-          @input="updateTimeframe" />
-        <label v-if="metricAggType === 'field changes'">The maximum time between changes.</label>
+
+        <el-form v-if="metricAggType === 'field changes'" :class="{ 'm-s-lg': useTimeframe }">
+          <el-form-item label="Limit timeframe">
+            <el-switch v-model="useTimeframe" />
+            <label>
+              By default, the change rule type has no maximum time limit between changes.
+              Enable this option to check for a change within a limited time window.
+            </label>
+          </el-form-item>
+        </el-form>
+        <div v-if="useTimeframe">
+          <ElastalertTimePicker
+            :unit="Object.keys(timeframe)[0]"
+            :amount="Object.values(timeframe)[0]"
+            @input="updateTimeframe"/>
+          <label v-if="metricAggType === 'field changes'">
+            The maximum time between changes.
+            After this time period, elastalert will forget the old
+            value of the {{ compareKey }} field.
+          </label>
+        </div>
       </el-popover>
 
       <el-popover v-show="metricAggType !== 'count' && metricAggType !== 'field changes'">
@@ -581,9 +604,18 @@ export default {
       return document.body.clientHeight - 85;
     },
 
+    useTimeframe: {
+      get() {
+        return this.$store.state.config.match.useTimeframe;
+      },
+      set(value) {
+        this.$store.commit('config/match/UPDATE_USE_TIMEFRAME', value);
+      }
+    },
+
     thresholdRef: {
       get() {
-        return this.$store.state.config.match.threasholdRef;
+        return this.$store.state.config.match.thresholdRef;
       },
       set(value) {
         this.$store.commit('config/match/UPDATE_THRESHOLD_REF', value);
@@ -592,7 +624,7 @@ export default {
 
     thresholdCur: {
       get() {
-        return this.$store.state.config.match.threasholdCur;
+        return this.$store.state.config.match.thresholdCur;
       },
       set(value) {
         this.$store.commit('config/match/UPDATE_THRESHOLD_CUR', value);
@@ -675,17 +707,24 @@ export default {
 
     showOptions() {
       let shouldShowOptions = ['field not in list', 'field changes'].includes(this.metricAggType);
-      let shouldShowOptionsSt = this.metricAggType === 'count' && this.spikeOrThreshold !== 'any';
+      let shouldShowOptionsSt =
+        this.metricAggType === 'count' && this.spikeOrThreshold !== 'any';
 
       return shouldShowOptions || shouldShowOptionsSt;
     },
 
     showPopOf() {
-      return this.metricAggType !== 'count' && !['field changes', 'field in list', 'field not in list'].includes(this.metricAggType);
+      return (
+        this.metricAggType !== 'count' &&
+        !['field changes', 'field in list', 'field not in list'].includes(this.metricAggType)
+      );
     },
 
     showPopOver() {
-      return this.spikeOrThreshold !== 'any' && !['field changes', 'field in list', 'field not in list'].includes(this.metricAggType);
+      return (
+        this.spikeOrThreshold !== 'any' &&
+        !['field changes', 'field in list', 'field not in list'].includes(this.metricAggType)
+      );
     },
 
     showPopAbove() {
@@ -709,7 +748,10 @@ export default {
     },
 
     showTime() {
-      return !['field in list', 'field not in list'].includes(this.metricAggType) && this.spikeOrThreshold !== 'any';
+      return (
+        !['field in list', 'field not in list'].includes(this.metricAggType) &&
+        this.spikeOrThreshold !== 'any'
+      );
     },
 
     queryTree: {
@@ -836,7 +878,9 @@ export default {
     },
 
     queryString() {
-      return this.$store.getters['config/query/queryString'] || `${this.timeField}:*`;
+      return (
+        this.$store.getters['config/query/queryString'] || `${this.timeField}:*`
+      );
     },
 
     numberFields() {
@@ -879,10 +923,17 @@ export default {
       }
 
       // if querykey and type is freq or flatline, set groupedOver to field
-      if (this.queryKey && (this.type === 'frequency' || this.type === 'flatline')) {
+      if (
+        this.queryKey &&
+        (this.type === 'frequency' || this.type === 'flatline')
+      ) {
         this.groupedOver = 'field';
       }
 
+      if (this.metricAggType === 'count') {
+        this.useTimeframe = true;
+      }
+
       setTimeout(() => {
         this.validate();
       }, 10);
@@ -895,6 +946,7 @@ export default {
 
       if (this.groupedOver === 'all') {
         this.groupByValue = '';
+        this.queryKey = '';
       }
     },
 
@@ -1097,7 +1149,10 @@ export default {
     updateBlacklist(entry, index) {
       if (Number.isNaN(entry)) return;
 
-      this.$store.commit('config/match/UPDATE_BLACKLIST_ENTRY', { entry, index });
+      this.$store.commit('config/match/UPDATE_BLACKLIST_ENTRY', {
+        entry,
+        index
+      });
       this.$nextTick(() => {
         this.validate();
       });
@@ -1118,7 +1173,10 @@ export default {
     },
 
     updateWhitelist(entry, index) {
-      this.$store.commit('config/match/UPDATE_WHITELIST_ENTRY', { entry, index });
+      this.$store.commit('config/match/UPDATE_WHITELIST_ENTRY', {
+        entry,
+        index
+      });
       this.$nextTick(() => {
         this.validate();
       });
@@ -1188,6 +1246,8 @@ export default {
         this.type = 'metric_aggregation';
       }
 
+      this.useTimeframe = true;
+
       this.threshold = null;
       this.numEvents = null;
       this.maxThreshold = null;
@@ -1224,6 +1284,10 @@ export default {
   padding-top: 5px;
   max-width: 600px;
 }
+
+.popover-time {
+  max-width: 320px;
+}
 </style>
 
 <style scoped>
diff --git a/src/components/config/alert/ConfigAlertSubjectBody.vue b/src/components/config/alert/ConfigAlertSubjectBody.vue
index 58b09f96..5135ea92 100644
--- a/src/components/config/alert/ConfigAlertSubjectBody.vue
+++ b/src/components/config/alert/ConfigAlertSubjectBody.vue
@@ -84,7 +84,7 @@ import At from 'vue-at';
 
 export default {
   components: {
-    At,
+    At
   },
 
   props: ['viewOnly'],
@@ -123,7 +123,9 @@ export default {
 
     fields() {
       let fields = [];
-      let mappingFields = this.$store.getters['metadata/fieldsForCurrentConfig'];
+      let mappingFields = this.$store.getters[
+        'metadata/templateFieldsForCurrentConfig'
+      ];
 
       // Handle JSON fields with dot notation
       Object.entries(mappingFields).forEach(([field, mapping]) => {
@@ -176,7 +178,7 @@ export default {
   height: auto;
 }
 
-[contenteditable='false'] {
+[contenteditable="false"] {
   border: 0 !important;
   padding: 0 !important;
 }
diff --git a/src/store/metadata.js b/src/store/metadata.js
index 78d6c2a9..d8bb17db 100644
--- a/src/store/metadata.js
+++ b/src/store/metadata.js
@@ -101,6 +101,22 @@ export default {
       return fields;
     },
 
+    templateFieldsForCurrentConfig: (state, getters, rootState) => {
+      let fields = {};
+
+      // if using "grouped over field", only allow for the grouped field (queryKey)
+      if (
+        rootState.config.match.queryKey &&
+        (rootState.config.match.type === 'frequency' || rootState.config.match.type === 'flatline')
+      ) {
+        fields[rootState.config.match.queryKey] = rootState.config.match.queryKey;
+        return fields;
+      }
+
+      fields = getters.fieldsForCurrentConfig;
+      return fields;
+    },
+
     fieldsForCurrentConfig: (state, getters, rootState) => {
       let index = rootState.config.settings.index;
       let mappings = state.mappings[formatIndex(index)];
diff --git a/version.json b/version.json
index ca55d017..0d50d0a3 100644
--- a/version.json
+++ b/version.json
@@ -1 +1 @@
-"v0.2.2"
+"v0.2.3"

From bbd6587ebe2ed10a4b4c56979356606d03ef79d3 Mon Sep 17 00:00:00 2001
From: John Susek <john@johnsolo.net>
Date: Wed, 5 Dec 2018 14:25:10 -0600
Subject: [PATCH 3/4] Add ability to enter filter query manually, instead of
 using query builder.

---
 README.md                                     |   4 +-
 src/components/config/ConfigCondition.vue     |  15 ++-
 src/components/config/ConfigQuery.vue         | 117 +++++++++++++-----
 .../config/alert/ConfigAlertSubjectBody.vue   |   2 +-
 src/store/config/index.js                     |  10 +-
 src/store/config/query.js                     |  16 ++-
 src/store/configs.js                          |   1 +
 src/style/element.scss                        |   4 +
 8 files changed, 130 insertions(+), 39 deletions(-)

diff --git a/README.md b/README.md
index f6146812..9adcffe8 100644
--- a/README.md
+++ b/README.md
@@ -20,11 +20,11 @@ First, edit rules/BaseRule.config and change the slack and smtp settings to matc
 Then run the app using docker:
 
 ```bash
-export PRAECO_ELASTICSEARCH=<your elasticsearch ip*>
+export PRAECO_ELASTICSEARCH=<your elasticsearch ip>
 docker-compose up
 ```
 
-\* If you are using 127.0.0.1 for ES, it won't work. See first item under the Troubleshooting section.
+ℹ️ Don't use 127.0.0.1 for PRAECO_ELASTICSEARCH. See first item under the Troubleshooting section.
 
 Praeco should now be available on http://127.0.0.1:8080
 
diff --git a/src/components/config/ConfigCondition.vue b/src/components/config/ConfigCondition.vue
index 661ebe29..68619479 100644
--- a/src/components/config/ConfigCondition.vue
+++ b/src/components/config/ConfigCondition.vue
@@ -261,11 +261,12 @@
     </el-popover>
 
     <span class="pop-trigger" @click="popFilterVisible = true">
-      <span v-if="!queryTree.children.length">UNFILTERED</span>
+      <span v-if="!queryTree.children.length && !queryString">UNFILTERED</span>
       <span v-else>{{ queryString }}</span>
     </span>
 
-    <el-dialog :visible.sync="popFilterVisible" fullscreen>
+    <el-dialog :visible.sync="popFilterVisible" :show-close="false" fullscreen>
+      <el-button type="primary" plain class="close-button" @click="popFilterVisible = false">Done</el-button>
       <ConfigQuery ref="query" class="config-query" />
     </el-dialog>
 
@@ -368,7 +369,9 @@
     </el-popover>
 
     <span v-show="showTime">
-      <el-popover v-show="metricAggType === 'count' || metricAggType === 'field changes'" popper-class="popover-time">
+      <el-popover
+        v-show="metricAggType === 'count' || metricAggType === 'field changes'"
+        popper-class="popover-time">
         <span
           slot="reference"
           class="pop-trigger">
@@ -1298,4 +1301,10 @@ export default {
 .el-dialog__wrapper {
   z-index: 9999;
 }
+
+.close-button {
+  position: absolute;
+  right: 20px;
+  z-index: 9;
+}
 </style>
diff --git a/src/components/config/ConfigQuery.vue b/src/components/config/ConfigQuery.vue
index 23ec1684..5b287538 100644
--- a/src/components/config/ConfigQuery.vue
+++ b/src/components/config/ConfigQuery.vue
@@ -1,34 +1,45 @@
 <template>
   <el-form ref="form" label-position="top" @submit.native.prevent>
 
-    <el-popover v-model="popFilterVisible">
-      <span slot="reference" class="pop-trigger">
-        <span v-if="!queryTree.children.length">NEW FILTER</span>
-        <span else>{{ queryString }}</span>
-      </span>
-      <div>
-        <el-row :gutter="30" :class="{ 'empty': !queryTree.children.length }">
-          <el-col :span="24">
-            <el-form-item class="el-form-item-tight">
-              <vue-query-builder
-                v-if="rules.length"
-                v-model="queryTree"
-                :rules="rules"
-                :labels="labels"
-                :styled="false" />
-            </el-form-item>
-            <el-form-item v-if="!queryTree.children.length">
-              <label>
-                To get started, select a term from the dropdown menu and click the "Add filter" button.
-              </label>
-            </el-form-item>
-          </el-col>
-        </el-row>
-      </div>
-    </el-popover>
-
-
-    <EventTable v-if="queryString" :height="eventTableHeight" class="m-n-xl" />
+    <el-tabs v-model="queryType" type="card" @tab-click="changeQueryType">
+      <el-tab-pane label="Builder" name="tree">
+        <el-popover v-model="popFilterVisible">
+          <span slot="reference" class="pop-trigger">
+            <span v-if="!queryTree.children.length">NEW FILTER</span>
+            <span else>{{ queryString }}</span>
+          </span>
+          <div>
+            <el-row :gutter="30" :class="{ 'empty': !queryTree.children.length }">
+              <el-col :span="24">
+                <el-form-item class="el-form-item-tight">
+                  <vue-query-builder
+                    v-if="rules.length"
+                    v-model="queryTree"
+                    :rules="rules"
+                    :labels="labels"
+                    :styled="false" />
+                </el-form-item>
+                <el-form-item v-if="!queryTree.children.length">
+                  <label>
+                    To get started, select a term from the dropdown menu and click the "Add filter" button.
+                  </label>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </div>
+        </el-popover>
+      </el-tab-pane>
+
+      <el-tab-pane label="Manual" name="manual">
+        <el-input
+          ref="manual"
+          v-model="manual"
+          placeholder="Search... (e.g. status:200 AND extension:PL)"
+          size="medium" />
+      </el-tab-pane>
+    </el-tabs>
+
+    <EventTable v-if="queryString" :height="eventTableHeight" class="m-n-lg" />
   </el-form>
 </template>
 
@@ -59,7 +70,25 @@ export default {
 
   computed: {
     eventTableHeight() {
-      return document.body.clientHeight - 85;
+      return document.body.clientHeight - 140;
+    },
+
+    queryType: {
+      get() {
+        return this.$store.state.config.query.type;
+      },
+      set(value) {
+        this.$store.commit('config/query/UPDATE_TYPE', value);
+      }
+    },
+
+    manual: {
+      get() {
+        return this.$store.state.config.query.manual;
+      },
+      set(value) {
+        this.$store.commit('config/query/UPDATE_MANUAL', value);
+      }
     },
 
     queryString() {
@@ -83,7 +112,13 @@ export default {
       let rules = [];
 
       Object.entries(this.fields).forEach(([k, v]) => {
-        let operators = ['contains', 'does not contain', 'is empty', 'is not empty', 'regex'];
+        let operators = [
+          'contains',
+          'does not contain',
+          'is empty',
+          'is not empty',
+          'regex'
+        ];
 
         if (v.type === 'long') {
           operators = operators.concat(['less than', 'greater than']);
@@ -105,6 +140,16 @@ export default {
 
       return rules;
     }
+  },
+
+  methods: {
+    changeQueryType() {
+      if (this.queryType === 'manual') {
+        this.$nextTick(() => {
+          this.$refs.manual.focus();
+        });
+      }
+    }
   }
 };
 </script>
@@ -118,7 +163,11 @@ export default {
   display: none;
 }
 
-.el-row.empty .vue-query-builder > .vqb-group > .vqb-group-body > .rule-actions {
+.el-row.empty
+  .vue-query-builder
+  > .vqb-group
+  > .vqb-group-body
+  > .rule-actions {
   position: static;
 }
 
@@ -135,4 +184,10 @@ export default {
 .el-form {
   margin-top: -2ex;
 }
+
+.el-tabs .el-input {
+  font-size: 16px;
+  font-weight: bold;
+  font-family: monospace;
+}
 </style>
diff --git a/src/components/config/alert/ConfigAlertSubjectBody.vue b/src/components/config/alert/ConfigAlertSubjectBody.vue
index 5135ea92..446a8319 100644
--- a/src/components/config/alert/ConfigAlertSubjectBody.vue
+++ b/src/components/config/alert/ConfigAlertSubjectBody.vue
@@ -153,7 +153,7 @@ export default {
   },
 
   methods: {
-    sampleDebounced: debounce(() => {
+    sampleDebounced: debounce(function() {
       this.$store.dispatch('config/sample');
     }, 750)
   }
diff --git a/src/store/config/index.js b/src/store/config/index.js
index 25d6aa3b..bbba5d55 100644
--- a/src/store/config/index.js
+++ b/src/store/config/index.js
@@ -95,6 +95,10 @@ export default {
 
         if (config.__praeco_query_builder && config.__praeco_query_builder.query) {
           commit('query/UPDATE_TREE', config.__praeco_query_builder.query);
+          commit('query/UPDATE_TYPE', 'tree');
+        } else {
+          commit('query/UPDATE_MANUAL', config.filter[0].query.query_string.query);
+          commit('query/UPDATE_TYPE', 'manual');
         }
 
         if (config.timestamp_field) {
@@ -560,7 +564,11 @@ export default {
         config.__praeco_full_path = state.settings.name;
       }
 
-      config.__praeco_query_builder = JSON.stringify({ query: state.query.tree });
+      // if the user is using a manual query, then don't save this to the config,
+      // so we know when loading it is manual
+      if (state.query.type === 'tree') {
+        config.__praeco_query_builder = JSON.stringify({ query: state.query.tree });
+      }
 
       if (state.settings.name) {
         config.name = state.settings.name;
diff --git a/src/store/config/query.js b/src/store/config/query.js
index 08889be7..48485674 100644
--- a/src/store/config/query.js
+++ b/src/store/config/query.js
@@ -5,7 +5,9 @@ function initialState() {
     tree: {
       logicalOperator: 'all',
       children: []
-    }
+    },
+    manual: '',
+    type: 'tree'
   };
 }
 
@@ -25,11 +27,23 @@ export default {
 
     UPDATE_TREE(state, tree) {
       state.tree = tree;
+    },
+
+    UPDATE_MANUAL(state, manual) {
+      state.manual = manual;
+    },
+
+    UPDATE_TYPE(state, type) {
+      state.type = type;
     }
   },
 
   getters: {
     queryString(state) {
+      if (state.type === 'manual') {
+        return state.manual;
+      }
+
       return luceneSyntaxFromQueryBuilder(state.tree);
     }
   }
diff --git a/src/store/configs.js b/src/store/configs.js
index 5a5e22c4..ddca199a 100644
--- a/src/store/configs.js
+++ b/src/store/configs.js
@@ -201,6 +201,7 @@ export default {
         fullPath = '';
       } else if (config.__praeco_full_path) {
         fullPath = config.__praeco_full_path;
+        delete config.__praeco_full_path;
       } else {
         fullPath = '';
       }
diff --git a/src/style/element.scss b/src/style/element.scss
index ed983075..79047dd0 100644
--- a/src/style/element.scss
+++ b/src/style/element.scss
@@ -171,6 +171,10 @@
   font-size: 20px;
 }
 
+.el-dialog__headerbtn {
+  z-index: 9;
+}
+
 //
 // Menu
 //

From cc9ba3b672a01defc807c149243c64f115622dd9 Mon Sep 17 00:00:00 2001
From: John Susek <john@johnsolo.net>
Date: Wed, 5 Dec 2018 16:31:14 -0600
Subject: [PATCH 4/4] Add loading indicator for event table

---
 config/elastalert.yaml                |  2 ++
 src/components/EventTable.vue         | 43 +++++++++++++++++++--------
 src/components/config/ConfigQuery.vue |  2 +-
 3 files changed, 34 insertions(+), 13 deletions(-)

diff --git a/config/elastalert.yaml b/config/elastalert.yaml
index 4fc641cd..efc230f5 100644
--- a/config/elastalert.yaml
+++ b/config/elastalert.yaml
@@ -47,3 +47,5 @@ writeback_index: praeco_elastalert_status
 # sending the alert until this time period has elapsed
 alert_time_limit:
   days: 2
+
+skip_invalid: True
diff --git a/src/components/EventTable.vue b/src/components/EventTable.vue
index 3bef8da2..9762c44e 100644
--- a/src/components/EventTable.vue
+++ b/src/components/EventTable.vue
@@ -1,6 +1,7 @@
 <template>
-  <div v-show="loadedEvents.length" class="event-table">
+  <div class="event-table">
     <el-table
+      v-loading="eventsLoading && !loadedEvents.length"
       ref="table"
       :data="loadedEvents"
       :border="true"
@@ -107,7 +108,9 @@ export default {
 
     visibleColumns() {
       if (this.loadedEvents.length) {
-        return Object.keys(this.loadedEvents[0]).sort().filter(col => !this.hidden.includes(col));
+        return Object.keys(this.loadedEvents[0])
+          .sort()
+          .filter(col => !this.hidden.includes(col));
       }
       return [];
     },
@@ -171,16 +174,25 @@ export default {
     },
 
     saveColumns() {
-      localStorage.setItem('hiddenEventTableColumns', JSON.stringify(this.hidden));
+      localStorage.setItem(
+        'hiddenEventTableColumns',
+        JSON.stringify(this.hidden)
+      );
     },
 
     saveColumnWidths(newWidth, oldWidth, column) {
       this.widths[column.property] = newWidth;
-      localStorage.setItem('eventTableColumnWidths', JSON.stringify(this.widths));
+      localStorage.setItem(
+        'eventTableColumnWidths',
+        JSON.stringify(this.widths)
+      );
     },
 
     loadMore() {
-      if (!this.eventsLoading && (this.totalEvents === 0 || this.loadedEvents.length < this.totalEvents)) {
+      if (
+        !this.eventsLoading &&
+        (this.totalEvents === 0 || this.loadedEvents.length < this.totalEvents)
+      ) {
         this.fetchEvents();
       }
     },
@@ -200,7 +212,9 @@ export default {
             must: [
               {
                 query_string: {
-                  query: this.$store.getters['config/query/queryString'] || `${this.timeField}:*`
+                  query:
+                    this.$store.getters['config/query/queryString'] ||
+                    `${this.timeField}:*`
                 }
               }
             ]
@@ -251,7 +265,8 @@ export default {
         this.source = CancelToken.source();
         res = await axios.post(
           `/api/search/${this.$store.state.config.settings.index}`,
-          query, { cancelToken: this.source.token }
+          query,
+          { cancelToken: this.source.token }
         );
       } catch (error) {
         if (!axios.isCancel(error)) {
@@ -262,9 +277,11 @@ export default {
       }
 
       if (res && res.data && res.data.hits) {
-        res.data.hits.hits.map(h => h._source).forEach(event => {
-          this.loadedEvents.push(event);
-        });
+        res.data.hits.hits
+          .map(h => h._source)
+          .forEach(event => {
+            this.loadedEvents.push(event);
+          });
         this.totalEvents = res.data.hits.total;
         this.offset += 40;
       }
@@ -288,8 +305,10 @@ export default {
 
 .event-table .el-table td {
   color: #212121;
-  font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono',
-    'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace;
+  font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console",
+    "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono",
+    "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier,
+    monospace;
   vertical-align: top;
 }
 
diff --git a/src/components/config/ConfigQuery.vue b/src/components/config/ConfigQuery.vue
index 5b287538..232ab59f 100644
--- a/src/components/config/ConfigQuery.vue
+++ b/src/components/config/ConfigQuery.vue
@@ -70,7 +70,7 @@ export default {
 
   computed: {
     eventTableHeight() {
-      return document.body.clientHeight - 140;
+      return document.body.clientHeight - 145;
     },
 
     queryType: {