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

@@ -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;
 

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;
 

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();

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 += '../';

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;
 }

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',