From 788e2ecd2f4aa3566ca3cae8af15b6828d786f0c Mon Sep 17 00:00:00 2001
From: John Susek <john@johnsolo.net>
Date: Sun, 4 Nov 2018 17:00:11 -0600
Subject: [PATCH 1/2] Add loading indicators for mappings/indices dropdowns.

---
 src/components/config/ConfigSettings.vue | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/components/config/ConfigSettings.vue b/src/components/config/ConfigSettings.vue
index 1d908d79..e7e24889 100644
--- a/src/components/config/ConfigSettings.vue
+++ b/src/components/config/ConfigSettings.vue
@@ -29,11 +29,11 @@
       <el-col :span="6">
         <el-form-item label="Index" prop="index" required>
           <el-autocomplete
-            :disabled="viewOnly"
+            :disabled="viewOnly || indicesLoading"
             v-model="index"
             :fetch-suggestions="(qs, cb) => { cb(links); }"
+            :placeholder="indicesLoading ? `Loading indices...`: ''"
             class="el-input-wide"
-            placeholder=""
             @input="getMappingDebounced" />
           <label v-if="!viewOnly">
             e.g. logstash-* or logstash-%Y.%m.%d
@@ -60,10 +60,10 @@
         <el-form-item v-if="timeType === 'iso'" label="Time field" prop="timeField" required>
           <el-select
             v-model="timeField"
-            :disabled="viewOnly"
+            :disabled="viewOnly || mappingLoading"
+            :placeholder="mappingLoading ? `Loading mappings...`: ''"
             filterable
             clearable
-            placeholder=""
             class="el-select-wide">
             <el-option
               v-for="field in Object.keys(dateFields)"
@@ -107,6 +107,8 @@ export default {
 
   data() {
     return {
+      indicesLoading: false,
+      mappingLoading: false,
       mappingError: '',
       rules: {
         name: [{
@@ -181,9 +183,11 @@ export default {
     }
   },
 
-  mounted() {
+  async mounted() {
     // Get the indices needed to build the suggestions list
-    this.$store.dispatch('metadata/fetchIndices');
+    this.indicesLoading = true;
+    await this.$store.dispatch('metadata/fetchIndices');
+    this.indicesLoading = false;
 
     // Automatically get the mapping on start
     if (this.index) {
@@ -199,7 +203,9 @@ export default {
     async getMapping() {
       this.mappingError = '';
 
+      this.mappingLoading = true;
       let fetched = await this.$store.dispatch('metadata/fetchMappings', formatIndex(this.index));
+      this.mappingLoading = false;
 
       if (!fetched) {
         this.mappingError = 'Could not fetch mappings.';

From 79b924cf742fb27a4b36d4704f3dc9b813f6f084 Mon Sep 17 00:00:00 2001
From: John Susek <john@johnsolo.net>
Date: Sun, 4 Nov 2018 22:13:25 -0600
Subject: [PATCH 2/2] Fix issue with tooltips in metric aggregation charts. Fix
 issue with grouped results in event table. Fix validation issue with grouped
 over selector.

---
 src/components/ESChart.vue                | 51 ++++++++++++++---------
 src/components/EventTable.vue             | 10 ++++-
 src/components/config/ConfigCondition.vue | 33 ++++++++++-----
 src/store/config/index.js                 |  9 +++-
 src/style/element.scss                    |  4 ++
 src/views/RuleView.vue                    |  6 ++-
 6 files changed, 79 insertions(+), 34 deletions(-)

diff --git a/src/components/ESChart.vue b/src/components/ESChart.vue
index 167a5e9c..8a36155b 100644
--- a/src/components/ESChart.vue
+++ b/src/components/ESChart.vue
@@ -9,7 +9,12 @@
 
     <div class="praeco-chart m-s-med">
       <div v-if="groupBy">
-        <el-tabs v-if="groups.length" v-model="activeGroupIndex" tab-position="bottom" @input="updateGroupIndex">
+        <el-tabs
+          v-if="groups.length"
+          v-model="activeGroupIndex"
+          tab-position="bottom"
+          @input="updateGroupIndex"
+          @tab-click="clickTab">
           <el-tab-pane
             v-for="(group, index) in groups"
             v-model="activeGroupIndex"
@@ -339,6 +344,7 @@ export default {
     },
 
     query() {
+      this.activeGroupIndex = 0;
       this.updateChart();
     },
 
@@ -385,6 +391,10 @@ export default {
   },
 
   methods: {
+    clickTab() {
+      this.$emit('group', this.groups[this.activeGroupIndex].key);
+    },
+
     getYValue(result) {
       let value = 0;
 
@@ -412,13 +422,6 @@ export default {
 
       let y = this.groups[this.activeGroupIndex].by_minute.buckets.map(this.getYValue);
 
-      // Remove the first and last values because they will contain
-      // partial data
-      x.pop();
-      x.shift();
-      y.pop();
-      y.shift();
-
       this.chart.xAxis.data = x;
       this.chart.series[0].data = y;
     },
@@ -436,7 +439,21 @@ export default {
           momentDate = moment.unix(String(event.value)).tz(Intl.DateTimeFormat().resolvedOptions().timeZone);
         }
 
-        return `${momentDate.format('M/D/YYYY h:mm:ssa')} <br> ${options.data.value} Events`;
+        let tip = `${momentDate.format('M/D/YYYY h:mm:ssa')}<br>`;
+
+        if (this.aggAvg) {
+          tip += `average of ${this.aggAvg}: ${options.data.value}`;
+        } else if (this.aggSum) {
+          tip += `sum of ${this.aggSum}: ${options.data.value}`;
+        } else if (this.aggMin) {
+          tip += `min of ${this.aggMin}: ${options.data.value}`;
+        } else if (this.aggMax) {
+          tip += `max of ${this.aggMax}: ${options.data.value}`;
+        } else {
+          tip += `${options.data.value} results`;
+        }
+
+        return tip;
       });
     },
 
@@ -568,7 +585,8 @@ export default {
           let y = null;
 
           if (this.groupBy) {
-            if (res.data.aggregations.group_by_field.buckets.length) {
+            if (res.data.aggregations.group_by_field &&
+                res.data.aggregations.group_by_field.buckets.length) {
               let buckets = res.data.aggregations.group_by_field.buckets;
 
               x = buckets[this.activeGroupIndex].by_minute.buckets.map(r => ({
@@ -578,6 +596,10 @@ export default {
               y = buckets[this.activeGroupIndex].by_minute.buckets.map(this.getYValue);
 
               this.groups = buckets;
+
+              if (this.groups.length) {
+                this.$emit('group', this.groups[0].key);
+              }
             } else {
               this.groups = [];
             }
@@ -589,15 +611,6 @@ export default {
             y = res.data.aggregations.by_minute.buckets.map(this.getYValue);
           }
 
-          // Remove the first and last values because they will contain
-          // partial data
-          if (x && y) {
-            x.pop();
-            x.shift();
-            y.pop();
-            y.shift();
-          }
-
           this.chart.xAxis.data = x;
           this.chart.series[0].data = y;
 
diff --git a/src/components/EventTable.vue b/src/components/EventTable.vue
index 964db227..3bef8da2 100644
--- a/src/components/EventTable.vue
+++ b/src/components/EventTable.vue
@@ -83,7 +83,7 @@ function msFromTimeframe(timeframe) {
 }
 
 export default {
-  props: ['timeframe', 'from', 'height'],
+  props: ['timeframe', 'from', 'height', 'groupByField', 'groupByValue'],
 
   data() {
     return {
@@ -211,6 +211,14 @@ export default {
         size: 40
       };
 
+      if (this.groupByField && this.groupByValue) {
+        query.query.bool.must.push({
+          query_string: {
+            query: `${this.groupByField}:"${this.groupByValue}"`
+          }
+        });
+      }
+
       if (this.from) {
         let to;
 
diff --git a/src/components/config/ConfigCondition.vue b/src/components/config/ConfigCondition.vue
index 6fe568d5..b9678cdb 100644
--- a/src/components/config/ConfigCondition.vue
+++ b/src/components/config/ConfigCondition.vue
@@ -52,8 +52,8 @@
         <span v-if="groupedOver === 'field'">{{ queryKey }}</span>
       </span>
       <div>
-        <el-radio v-model="groupedOver" label="all" border @change="validate">All documents</el-radio>
-        <el-radio v-model="groupedOver" label="field" border @change="validate">Field</el-radio>
+        <el-radio v-model="groupedOver" label="all" border @change="changeGroupedOver">All documents</el-radio>
+        <el-radio v-model="groupedOver" label="field" border @change="changeGroupedOver">Field</el-radio>
         <div v-if="groupedOver === 'all' && type === 'metric_aggregation'">
           <el-form ref="overall" :model="$store.state.config.match">
             <el-form-item label="" prop="docType" required>
@@ -512,10 +512,17 @@
       :agg-min="metricAggType === 'min' && metricAggKey"
       :agg-max="metricAggType === 'max' && metricAggKey"
       class="m-n-med"
-      @click="clickChart" />
+      @click="clickChart"
+      @group="val => groupByValue = val" />
 
     <el-dialog :visible.sync="eventViewerVisible" title="Event viewer" fullscreen custom-class="event-table-dialog">
-      <EventTable v-if="eventViewerFrom" :from="eventViewerFrom" :timeframe="timeframe" :height="eventTableHeight" />
+      <EventTable
+        v-if="eventViewerFrom"
+        :group-by-field="queryKey"
+        :group-by-value="groupByValue"
+        :from="eventViewerFrom"
+        :timeframe="timeframe"
+        :height="eventTableHeight" />
     </el-dialog>
   </div>
 </template>
@@ -524,6 +531,7 @@
 export default {
   data() {
     return {
+      groupByValue: '',
       eventViewerFrom: '',
       eventViewerVisible: false,
       popWhenVisible: false,
@@ -877,6 +885,14 @@ export default {
   },
 
   methods: {
+    changeGroupedOver() {
+      this.validate();
+
+      if (this.groupedOver === 'all') {
+        this.groupByValue = '';
+      }
+    },
+
     clickChart(val) {
       this.eventViewerFrom = val.name;
       this.eventViewerVisible = true;
@@ -888,13 +904,8 @@ export default {
           await this.validateOf();
         }
 
-        if (this.$refs.over) {
-          await this.validateOver();
-        }
-
-        if (this.$refs.overall) {
-          await this.validateOverall();
-        }
+        await this.validateOver();
+        await this.validateOverall();
 
         if (this.$refs.compare) {
           await this.validateCompare();
diff --git a/src/store/config/index.js b/src/store/config/index.js
index 98e448b5..e6f8c880 100644
--- a/src/store/config/index.js
+++ b/src/store/config/index.js
@@ -536,10 +536,15 @@ export default {
       };
 
       if (forTest) {
-        // when run as part of a test, fix path since rule will be in server_data/tests/
         config.import = '../../rules/BaseRule.config';
       } else {
-        let dots = '';
+        let dots;
+
+        if (!state.path) {
+          dots = '';
+        } else {
+          dots = '../';
+        }
 
         for (let i = 1; i < state.path.split('/').length; i++) {
           dots += '../';
diff --git a/src/style/element.scss b/src/style/element.scss
index a656111d..ed983075 100644
--- a/src/style/element.scss
+++ b/src/style/element.scss
@@ -15,6 +15,10 @@
   border-radius: 0 !important;
 }
 
+.el-select-dropdown {
+  max-width: 800px;
+}
+
 .view-only.el-form-item--mini .el-form-item__content {
   line-height: 1.3;
 }
diff --git a/src/views/RuleView.vue b/src/views/RuleView.vue
index 84ff18a3..946d884e 100644
--- a/src/views/RuleView.vue
+++ b/src/views/RuleView.vue
@@ -461,7 +461,11 @@ export default {
         }
       )
         .then(async () => {
-          let enabled = await this.$store.dispatch('configs/enableRule', this.$store.getters['config/config']());
+          let enabled = await this.$store.dispatch(
+            'configs/enableRule',
+            this.$store.getters['config/config']()
+          );
+
           if (enabled) {
             this.$message({
               type: 'success',