Update docs. Dont allow test to be run until local validation passes.

CREDITS.TXT

@@ -0,0 +1,14 @@
+# Credits
+
+Yelp - for Elastalert and documentation snippets used in UI
+https://github.com/Yelp/elastalert
+
+Bitsensor - for Elastalert API server
+https://github.com/bitsensor/elastalert
+
+ServerCentral - Sponsors of Praeco development
+https://github.com/ServerCentral
+
+Praeco designed and created by John Susek
+https://github.com/johnsusek
+

README.md

@@ -8,23 +8,23 @@ Praeco is a GUI for elastalert, using [bitsensor's elastalert API](https://githu
 
 ## Installation
 
-- Copy `praeco.config.json.default` to `public/praeco.config.json` and update apiBaseUrl to point to your API instance.
+- Copy `praeco.config.json.default` to `public/praeco.config.json` and update apiBaseUrl to point to your API instance. See instructions below for setting up the required API server.
 
 ## Running
 
 For just running the app, use the official docker images:
 
 ### [Server] Elastalert API server:
 
-- At the moment, our fork of the elastalert API is required:
+- At the moment, our fork of the elastalert API is required.
 
 ```bash
 git clone -b folders https://github.com/ServerCentral/elastalert-server.git && cd elastalert-server
 ```
 
 - Instructions for configuring the API are on the [github repo](https://github.com/servercentral/elastalert-server/tree/folders).
 
-- Run the below docker image (note this is servercentral/elastalert) once your API config files are set up:
+- Run the below docker image (note this is servercentral/elastalert) once your API config files are set up per the above link:
 
 ```bash
 docker run -d -p 3030:3030 -p 3333:3333 \
@@ -39,6 +39,8 @@ Elastalert API server should now be available at http://127.0.0.1:3030 and ws://
 
 ### [Client] Praeco client:
 
+Now that your Elastalert API server is up and listening, start the Praeco UI.
+
 ```
 docker run -v ${PWD}/public/praeco.config.json:/var/www/html/praeco.config.json -it -p 8080:80 servercentral/praeco
 ```

src/components/config/ConfigTest.vue

@@ -99,6 +99,8 @@ import { logger } from '@/lib/logger.js';
 const average = arr => arr.reduce((p, c) => p + c, 0) / arr.length;
 
 export default {
+  props: ['valid'],
+
   data() {
     return {
       startTime: 0,
@@ -111,11 +113,13 @@ export default {
       testRunLoading: false
     };
   },
+
   computed: {
     lastRateAverage() {
       return Math.trunc(average(this.lastRates)) || 0;
     }
   },
+
   watch: {
     messages() {
       if (!this.messages.length || !this.startTime) return 0;
@@ -127,9 +131,11 @@ export default {
       }
     }
   },
+
   destroyed() {
     this.$disconnect();
   },
+
   mounted() {
     this.$options.sockets.onmessage = ev => {
       let payload = JSON.parse(ev.data);
@@ -160,6 +166,7 @@ export default {
       }
     };
   },
+
   methods: {
     colorFromPercent(percent) {
       if (percent > 75) {
@@ -174,35 +181,41 @@ export default {
       this.$disconnect();
     },
     runTest() {
-      this.$connect();
-
-      let rule = this.$store.getters['config/yaml'];
-
-      this.testRunLoading = true;
-      this.testRunResult = '';
-      this.testRunError = '';
-      this.messages = [];
-      this.messages.push('Starting test run...');
-
-      let options = {
-        testType: 'all',
-        days: 1,
-        alert: false,
-        format: 'json',
-        maxResults: 1
-      };
-
-      this.$socket.onopen = () => {
-        this.startTime = +new Date();
-        this.$socket.sendObj({ rule, options });
-      };
-
-      this.$socket.onclose = () => {
-        this.lastRates = [];
-        this.startTime = 0;
-        this.testRunStats = {};
-        this.testRunLoading = false;
-      };
+      this.$emit('validate');
+
+      this.$nextTick(() => {
+        if (!this.valid) return;
+
+        this.$connect();
+
+        let rule = this.$store.getters['config/yaml'];
+
+        this.testRunLoading = true;
+        this.testRunResult = '';
+        this.testRunError = '';
+        this.messages = [];
+        this.messages.push('Starting test run...');
+
+        let options = {
+          testType: 'all',
+          days: 1,
+          alert: false,
+          format: 'json',
+          maxResults: 1
+        };
+
+        this.$socket.onopen = () => {
+          this.startTime = +new Date();
+          this.$socket.sendObj({ rule, options });
+        };
+
+        this.$socket.onclose = () => {
+          this.lastRates = [];
+          this.startTime = 0;
+          this.testRunStats = {};
+          this.testRunLoading = false;
+        };
+      });
     }
   }
 };

src/components/config/match/ConfigMatch.vue

@@ -54,7 +54,7 @@
       </el-col>
 
       <el-col :span="12">
-        <ConfigTest />
+        <ConfigTest :valid="valid" @validate="validate" />
       </el-col>
     </el-row>
   </el-form>
@@ -78,6 +78,12 @@ export default {
     ConfigTest
   },
 
+  data() {
+    return {
+      valid: false
+    };
+  },
+
   computed: {
     type: {
       get() {
@@ -94,33 +100,35 @@ export default {
       try {
         if (this.$refs.freq) {
           if (!await this.$refs.freq.$refs.form.validate()) {
-            return false;
+            this.valid = false;
           }
         }
         if (this.$refs.spike) {
           if (!await this.$refs.spike.$refs.form.validate()) {
-            return false;
+            this.valid = false;
           }
         }
         if (this.$refs.blacklist) {
           if (!await this.$refs.blacklist.$refs.form.validate()) {
-            return false;
+            this.valid = false;
           }
         }
         if (this.$refs.whitelist) {
           if (!await this.$refs.whitelist.$refs.form.validate()) {
-            return false;
+            this.valid = false;
           }
         }
         if (this.$refs.change) {
           if (!await this.$refs.change.$refs.form.validate()) {
-            return false;
+            this.valid = false;
           }
         }
 
-        return true;
+        this.valid = true;
+        return this.valid;
       } catch (error) {
-        return false;
+        this.valid = false;
+        return this.valid;
       }
     }
   }

src/components/config/match/ConfigMatchSpike.vue

@@ -23,11 +23,11 @@
       </label>
     </el-form-item>
 
-    <el-form-item label="Direction" prop="spikeType">
+    <el-form-item label="Direction" prop="spikeType" required>
       <el-select v-model="spikeType">
-        <el-option label="Up" value="up"/>
-        <el-option label="Down" value="down"/>
-        <el-option label="Both" value="both"/>
+        <el-option label="Up" value="up" />
+        <el-option label="Down" value="down" />
+        <el-option label="Both" value="both" />
       </el-select>
       <label>
         ‘Up’ means the rule will only match when the number of events is "spike height" times

src/store/config/index.js

@@ -311,7 +311,7 @@ export default {
         config.timeframe = state.match.timeframe;
       }
 
-      config.ignore_null = state.match.ignoreNull;
+      config.ignore_null = !!state.match.ignoreNull;
 
       return config;
     },
@@ -323,7 +323,7 @@ export default {
         config.compare_key = state.match.compareKey;
       }
 
-      config.ignore_null = state.match.ignoreNull;
+      config.ignore_null = !!state.match.ignoreNull;
 
       if (state.match.whitelist && state.match.whitelist.length) {
         config.whitelist = state.match.whitelist;

src/store/config/match.js

@@ -219,7 +219,7 @@ export default {
     // Frequency
     //
     UPDATE_NUM_EVENTS(state, numEvents) {
-      state.numEvents = parseInt(numEvents);
+      state.numEvents = parseInt(numEvents) || null;
     },
 
     UPDATE_USE_TERMS_QUERY(state, useTermsQuery) {
@@ -231,26 +231,27 @@ export default {
     },
 
     UPDATE_TERMS_SIZE(state, termsSize) {
-      state.termsSize = parseInt(termsSize);
+      state.termsSize = parseInt(termsSize) || null;
     },
 
     //
     // Spike
     //
 
     UPDATE_THRESHOLD_REF(state, thresholdRef) {
-      state.thresholdRef = parseFloat(thresholdRef);
+      state.thresholdRef = parseFloat(thresholdRef) || null;
     },
 
     UPDATE_THRESHOLD_CUR(state, thresholdCur) {
-      state.thresholdCur = parseFloat(thresholdCur);
+      state.thresholdCur = parseFloat(thresholdCur) || null;
     },
 
     UPDATE_SPIKE_HEIGHT(state, spikeHeight) {
-      state.spikeHeight = parseFloat(spikeHeight);
+      state.spikeHeight = parseFloat(spikeHeight) || null;
     },
 
     UPDATE_SPIKE_TYPE(state, spikeType) {
+      if (!spikeType) return;
       state.spikeType = spikeType;
     }
   }

src/views/ConfigEditor.vue

@@ -4,6 +4,8 @@
       <el-col :span="24">
         <h1 class="m-s-sm">{{ pageTitle }}</h1>
 
+        <!-- <vue-json-pretty :data="$store.getters['config/config']" /> -->
+
         <el-button v-if="!saving" type="primary" plain @click="save">Save</el-button>
         <el-button v-else type="primary" plain disabled>Saving...</el-button>
 
@@ -76,11 +78,6 @@ export default {
     this.$store.commit('config/UPDATE_TYPE', this.type);
 
     this.$store.dispatch('config/load', { type: `${this.type}s`, path: this.path });
-    // if (this.path) {
-    //   this.$store.dispatch('config/load', { type: `${this.type}s`, path: this.path });
-    //   // get data from store (fetchconfig)
-    //   // and set it to our working config
-    // }
   },
 
 };