feat(discover): Add option to map field values to a label (#11328)

This allows you to map field values to a custom label

src/sentry/static/sentry/app/views/organizationDiscover/result/utils.jsx

@@ -50,13 +50,14 @@ export function getChartData(data, query, options = {}) {
  * @param {Boolean} [options.useTimestamps] (default: false) Return raw timestamps instead of formatting dates
  * @param {Boolean} [options.assumeNullAsZero] (default: false) Assume null values as 0
  * @param {Boolean} [options.allSeries] (default: false) Return all series instead of top 10
+ * @param {Object} [options.fieldLabelMap] (default: false) Maps value from Snuba to a defined label
  * @returns {Array}
  */
 export function getChartDataByDay(rawData, query, options = {}) {
   // We only chart the first aggregation for now
   const aggregate = query.aggregations[0][2];
 
-  const data = getDataWithKeys(rawData, query);
+  const data = getDataWithKeys(rawData, query, options);
 
   // We only want to show the top 10 series
   const top10Series = getTopSeries(
@@ -143,14 +144,14 @@ function getTopSeries(data, aggregate, limit = NUMBER_OF_SERIES_BY_DAY) {
   return new Set(limit <= 0 ? orderedData : orderedData.slice(0, limit));
 }
 
-function getDataWithKeys(data, query) {
+function getDataWithKeys(data, query, options = {}) {
   const {aggregations, fields} = query;
   // We only chart the first aggregation for now
   const aggregate = aggregations[0][2];
 
   return data.map(row => {
     const key = fields.length
-      ? fields.map(field => getLabel(row[field])).join(',')
+      ? fields.map(field => getLabel(row[field], options)).join(',')
       : aggregate;
 
     return {
@@ -173,7 +174,7 @@ function formatDate(datetime, enabled = true) {
 // Converts a value to a string for the chart label. This could
 // potentially cause incorrect grouping, e.g. if the value null and string
 // 'null' are both present in the same series they will be merged into 1 value
-function getLabel(value) {
+function getLabel(value, options) {
   if (typeof value === 'object') {
     try {
       value = JSON.stringify(value);
@@ -183,6 +184,10 @@ function getLabel(value) {
     }
   }
 
+  if (options.fieldLabelMap && options.fieldLabelMap.hasOwnProperty(value)) {
+    return options.fieldLabelMap[value];
+  }
+
   return value;
 }
 

tests/js/spec/views/organizationDiscover/result/utils.spec.jsx

@@ -303,6 +303,48 @@ describe('Utils', function() {
         )
       ).toHaveLength(14);
     });
+
+    it('maps field value to label', function() {
+      const expected = [
+        {
+          data: [
+            {name: 'Jul 9th', value: 14},
+            {name: 'Jul 10th', value: null},
+            {name: 'Jul 20th', value: 30},
+          ],
+          seriesName: 'SNAKES,SnubaError',
+        },
+        {
+          data: [
+            {name: 'Jul 9th', value: 6},
+            {name: 'Jul 10th', value: null},
+            {name: 'Jul 20th', value: 8},
+          ],
+          seriesName: 'PHP,Exception',
+        },
+        {
+          data: [
+            {name: 'Jul 9th', value: 6},
+            {name: 'Jul 10th', value: null},
+            {name: 'Jul 20th', value: 5},
+          ],
+          seriesName: 'NOT JAVA,Type Error',
+        },
+        {
+          data: [
+            {name: 'Jul 9th', value: 6},
+            {name: 'Jul 10th', value: 20},
+            {name: 'Jul 20th', value: null},
+          ],
+          seriesName: 'SNAKES,ZeroDivisionError',
+        },
+      ];
+      expect(
+        getChartDataByDay(raw, query, {
+          fieldLabelMap: {python: 'SNAKES', php: 'PHP', javascript: 'NOT JAVA'},
+        })
+      ).toEqual(expected);
+    });
   });
 
   it('getDisplayValue()', function() {