@splunk/visualizations 25.4.0 → 25.6.0

package/Events.js

@@ -87,7 +87,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 182);
+/******/ 	return __webpack_require__(__webpack_require__.s = 189);
 /******/ })
 /************************************************************************/
 /******/ ([
@@ -209,7 +209,7 @@ var React = __webpack_require__(1);
 
 var styled_components_1 = __webpack_require__(4);
 
-var SizeAwareWrapper_1 = __webpack_require__(20);
+var SizeAwareWrapper_1 = __webpack_require__(21);
 
 var style_1 = __webpack_require__(15);
 
@@ -270,7 +270,7 @@ var withFixedSizeContainer = function withFixedSizeContainer(Viz) {
 
     return React.createElement(FixSizeItem, {
       "data-test": "fix-size-item",
-      "data-splunk-visualization-version": "25.4.0 - 6a8a433b8",
+      "data-splunk-visualization-version": "25.6.0 - f5eb3abf9",
       width: width,
       height: height,
       backgroundColor: backgroundColor
@@ -336,6 +336,12 @@ module.exports = require("@splunk/visualizations-shared/schemaUtils");
 
 /***/ }),
 /* 17 */
+/***/ (function(module, exports) {
+
+module.exports = require("@babel/runtime/helpers/slicedToArray");
+
+/***/ }),
+/* 18 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -571,46 +577,58 @@ var insertLayout = function insertLayout(layout, index) {
 exports.insertLayout = insertLayout;
 
 /***/ }),
-/* 18 */,
-/* 19 */
+/* 19 */,
+/* 20 */
 /***/ (function(module, exports) {
 
 module.exports = require("@babel/runtime/helpers/createClass");
 
 /***/ }),
-/* 20 */
+/* 21 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/SizeAwareWrapper");
 
 /***/ }),
-/* 21 */
+/* 22 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/themes/pick");
 
 /***/ }),
-/* 22 */,
-/* 23 */
+/* 23 */,
+/* 24 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualization-context/TimezoneContext");
 
 /***/ }),
-/* 24 */,
-/* 25 */
+/* 25 */,
+/* 26 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualization-context/FeatureFlagContext");
+
+/***/ }),
+/* 27 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/hocUtils");
 
 /***/ }),
-/* 26 */
+/* 28 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/JSONSchemaUtils");
 
 /***/ }),
-/* 27 */
+/* 29 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualizations-shared/numberUtils");
+
+/***/ }),
+/* 30 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -701,7 +719,13 @@ IconPlaceholder.defaultProps = {
 exports.default = FixedSizeContainer_1.default(IconPlaceholder);
 
 /***/ }),
-/* 28 */
+/* 31 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/ui-utils/id");
+
+/***/ }),
+/* 32 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -718,7 +742,7 @@ var T = __webpack_require__(0);
 
 var lodash_1 = __webpack_require__(3);
 
-var DataSource_1 = __webpack_require__(39);
+var DataSource_1 = __webpack_require__(43);
 
 exports.SortParamsPropTypes = T.shape({
   currentSortKey: T.string,
@@ -771,7 +795,7 @@ var getSortingParams = function getSortingParams(_ref) {
 exports.getSortingParams = getSortingParams;
 
 /***/ }),
-/* 29 */
+/* 33 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -835,8 +859,7 @@ var getPaginationParams = function getPaginationParams(_ref) {
 exports.getPaginationParams = getPaginationParams;
 
 /***/ }),
-/* 30 */,
-/* 31 */
+/* 34 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -864,12 +887,14 @@ var VizCategory;
 })(VizCategory = exports.VizCategory || (exports.VizCategory = {}));
 
 /***/ }),
-/* 32 */
+/* 35 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
+var _slicedToArray = __webpack_require__(17);
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -878,44 +903,51 @@ var React = __webpack_require__(1);
 
 var lodash_1 = __webpack_require__(3);
 
-var getSettingsFromThemedProps_1 = __webpack_require__(33);
+var getSettingsFromThemedProps_1 = __webpack_require__(36);
+
+var Options_1 = __webpack_require__(37);
 
-var Options_1 = __webpack_require__(34);
+var SanitizeProps_1 = __webpack_require__(38);
 
-var SanitizeProps_1 = __webpack_require__(35);
+var TimezoneContext_1 = __webpack_require__(24);
 
-var TimezoneContext_1 = __webpack_require__(23);
+var moment_1 = __webpack_require__(39);
 
-var moment_1 = __webpack_require__(36);
+var FeatureFlagContext_1 = __webpack_require__(26);
 
 var styled_components_1 = __webpack_require__(4);
 
-var hocUtils_1 = __webpack_require__(25);
+var hocUtils_1 = __webpack_require__(27);
+
+var JSONSchemaUtils_1 = __webpack_require__(28);
+
+var async_dynamic_options_evaluator_1 = __webpack_require__(40);
 
-var JSONSchemaUtils_1 = __webpack_require__(26);
+var id_1 = __webpack_require__(31);
 
-var SplunkVisualization_1 = __webpack_require__(37);
+var SplunkVisualization_1 = __webpack_require__(41);
 
 var VizBehavior_1 = __webpack_require__(6);
 
-var getSorting_1 = __webpack_require__(28);
+var getSorting_1 = __webpack_require__(32);
 
-var getPagination_1 = __webpack_require__(29);
+var getPagination_1 = __webpack_require__(33);
 
-var useDeepMemo_1 = __webpack_require__(40);
+var useDeepMemo_1 = __webpack_require__(44);
 
-var MissingPropsMessage_1 = __webpack_require__(41);
+var MissingPropsMessage_1 = __webpack_require__(45);
 
-var withEditModeCover_1 = __webpack_require__(42);
+var withEditModeCover_1 = __webpack_require__(46);
 
-var withPlaceholder_1 = __webpack_require__(43);
+var withPlaceholder_1 = __webpack_require__(47);
+
+var UUID = id_1.createGUID();
 /**
  * hoc that wraps a pure react visualization in a Dashboard visualization
  * @param {DashboardVizOpts} opts
  * @returns {HOC}
  */
 
-
 var withDashboardViz = function withDashboardViz(opts) {
   var ReactViz = opts.ReactViz,
       vizConfig = opts.vizConfig,
@@ -975,28 +1007,76 @@ var withDashboardViz = function withDashboardViz(opts) {
 
     var evaluatedOptions = {}; // evaluatedOptions need to be initialized as an empty object
 
+    var _React$useState = React.useState({}),
+        _React$useState2 = _slicedToArray(_React$useState, 2),
+        evaluatedOptionsAsync = _React$useState2[0],
+        setEvaluatedOptionsAsync = _React$useState2[1]; // evaluatedOptions need to be initialized as an empty object
+
+
+    var featureFlagContext = React.useContext(FeatureFlagContext_1.default);
+
+    var _React$useState3 = React.useState("".concat(vizConfig.name, " - ").concat(UUID)),
+        _React$useState4 = _slicedToArray(_React$useState3, 1),
+        visualizationID = _React$useState4[0];
+
+    var _React$useState5 = React.useState(Boolean(featureFlagContext && featureFlagContext['visualizations.useWebWorkersForDSL'] && typeof Worker !== 'undefined')),
+        _React$useState6 = _slicedToArray(_React$useState5, 2),
+        useAsyncEvaluatedOptions = _React$useState6[0],
+        setUseAsyncEvaluatedOptions = _React$useState6[1];
+
     evaluatedOptions = useDeepMemo_1.useDeepMemo(function () {
       try {
-        return Options_1.Options.evaluate({
-          context: lodash_1.defaultsDeep({}, context, vizConfig.defaultContext),
-          options: hocUtils_1.deepMergeWithArrayPrimitiveOverrides({}, options, defaultOptions)
-        }, dataSources, themeFunc);
+        if (useAsyncEvaluatedOptions) {
+          var optionsToEvaluate = {
+            context: lodash_1.defaultsDeep({}, context, vizConfig.defaultContext),
+            options: hocUtils_1.deepMergeWithArrayPrimitiveOverrides({}, options, defaultOptions)
+          };
+          var asyncDynamicOptionsEvaluatorParams = {
+            visualizationID: visualizationID,
+            props: props,
+            options: optionsToEvaluate,
+            dataSources: dataSources,
+            theme: vizConfig.themes
+          };
+          async_dynamic_options_evaluator_1.default.evaluate(asyncDynamicOptionsEvaluatorParams).then(function (results) {
+            setEvaluatedOptionsAsync(results.results);
+          }).catch(function (e) {
+            // eslint-disable-next-line no-console
+            console.error("unexpected error evaluating options - async: ".concat(e.message));
+            setUseAsyncEvaluatedOptions(false);
+          });
+        } else {
+          return Options_1.Options.evaluate({
+            context: lodash_1.defaultsDeep({}, context, vizConfig.defaultContext),
+            options: hocUtils_1.deepMergeWithArrayPrimitiveOverrides({}, options, defaultOptions)
+          }, dataSources, themeFunc);
+        }
       } catch (e) {
         // eslint-disable-next-line no-console
-        console.error("unexpected error evaluating options:  + ".concat(e.message));
+        console.error("unexpected error evaluating options: ".concat(e.message));
         return {};
       }
-    }, [currentThemeFamily, currentThemeColorScheme, currentThemeDensity, options, context, dataSources, serializedTimezone]); // useEffect hook needs to be initialized before any early returns
+
+      return {};
+    }, [currentThemeFamily, currentThemeColorScheme, currentThemeDensity, options, context, dataSources, serializedTimezone, useAsyncEvaluatedOptions]);
+    var evaluatedOptionsToUse = !useAsyncEvaluatedOptions ? evaluatedOptions : evaluatedOptionsAsync; // useEffect hook needs to be initialized before any early returns
     // this is in accordance with the order of hook calls being the same on each render https://reactjs.org/docs/hooks-rules.html#explanation
 
     React.useEffect(function () {
-      onComputedProps(evaluatedOptions);
-    }); // present warning message if any required props are missing
+      onComputedProps(evaluatedOptionsToUse);
+    });
+    React.useEffect(function () {
+      return function () {
+        if (useAsyncEvaluatedOptions) {
+          async_dynamic_options_evaluator_1.default.reset(visualizationID);
+        }
+      }; // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []); // present warning message if any required props are missing
 
     var _vizConfig$requiredPr = vizConfig.requiredProps,
         requiredProps = _vizConfig$requiredPr === void 0 ? [] : _vizConfig$requiredPr,
         supports = vizConfig.supports;
-    var missing = MissingPropsMessage_1.missingKeys(requiredProps, evaluatedOptions);
+    var missing = MissingPropsMessage_1.missingKeys(requiredProps, evaluatedOptionsToUse);
 
     if (missing.length > 0 && supports.includes(VizBehavior_1.VizBehavior.PLACEHOLDER)) {
       return React.createElement(MissingPropsMessage_1.default, {
@@ -1023,7 +1103,7 @@ var withDashboardViz = function withDashboardViz(opts) {
 
         if (Array.isArray(payloadKeys) && payloadKeys.length) {
           payloadKeys.forEach(function (p) {
-            payload[p] = evaluatedOptions[p];
+            payload[p] = evaluatedOptionsToUse[p];
           });
         }
 
@@ -1042,7 +1122,7 @@ var withDashboardViz = function withDashboardViz(opts) {
     } // compute pure viz props which are not from options
 
 
-    var computedVizProps = computeVizProps(Object.assign(Object.assign(Object.assign(Object.assign({}, props), evaluatedOptions), eventCallbackProps), {
+    var computedVizProps = computeVizProps(Object.assign(Object.assign(Object.assign(Object.assign({}, props), evaluatedOptionsToUse), eventCallbackProps), {
       themeFunc: themeFunc
     }));
     /**
@@ -1062,7 +1142,7 @@ var withDashboardViz = function withDashboardViz(opts) {
 
     var dataSourceMetadata = {};
     var OptionKey = 'paginateDataSourceKey';
-    var paginateDataSourceKey = lodash_1.has(evaluatedOptions, OptionKey) && evaluatedOptions[OptionKey] || 'primary';
+    var paginateDataSourceKey = lodash_1.has(evaluatedOptionsToUse, OptionKey) && evaluatedOptionsToUse[OptionKey] || 'primary';
 
     if (vizConfig.supports.indexOf(VizBehavior_1.VizBehavior.PAGE_AND_SORT) > -1 && lodash_1.has(dataSources, paginateDataSourceKey)) {
       var requestParams = lodash_1.get(dataSources, [paginateDataSourceKey, 'requestParams'], {});
@@ -1092,7 +1172,7 @@ var withDashboardViz = function withDashboardViz(opts) {
       mode: mode,
       width: width,
       height: height
-    }, evaluatedOptions, computedVizProps, eventCallbackProps, dataSourceMetadata));
+    }, evaluatedOptionsToUse, computedVizProps, eventCallbackProps, dataSourceMetadata));
   };
 
   DashboardViz.propTypes = Object.assign(Object.assign({}, SplunkVisualization_1.default.propTypes), ReactViz.propTypes);
@@ -1109,31 +1189,37 @@ var withDashboardViz = function withDashboardViz(opts) {
 exports.default = withDashboardViz;
 
 /***/ }),
-/* 33 */
+/* 36 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/themes/getSettingsFromThemedProps");
 
 /***/ }),
-/* 34 */
+/* 37 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualization-encoding/Options");
 
 /***/ }),
-/* 35 */
+/* 38 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/SanitizeProps");
 
 /***/ }),
-/* 36 */
+/* 39 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/moment");
 
 /***/ }),
-/* 37 */
+/* 40 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/async-dynamic-options-evaluator");
+
+/***/ }),
+/* 41 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1151,7 +1237,7 @@ var T = __webpack_require__(0);
 
 var lodash_1 = __webpack_require__(3);
 
-var VizActionHandler_1 = __webpack_require__(38); // this is identical to the initial height and width we use in BaseVisualization in dashboard-visualizations
+var VizActionHandler_1 = __webpack_require__(42); // this is identical to the initial height and width we use in BaseVisualization in dashboard-visualizations
 
 
 exports.INITIAL_WIDTH = 250;
@@ -1284,7 +1370,7 @@ SplunkVisualization.defaultProps = {
 exports.default = SplunkVisualization;
 
 /***/ }),
-/* 38 */
+/* 42 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1292,7 +1378,7 @@ exports.default = SplunkVisualization;
 
 var _classCallCheck = __webpack_require__(11);
 
-var _createClass = __webpack_require__(19);
+var _createClass = __webpack_require__(20);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -1321,7 +1407,7 @@ var DefaultVizActionHandler = /*#__PURE__*/function () {
 exports.DefaultVizActionHandler = DefaultVizActionHandler;
 
 /***/ }),
-/* 39 */
+/* 43 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1334,7 +1420,7 @@ exports.validSortDirs = void 0;
 exports.validSortDirs = ['asc', 'desc', 'none'];
 
 /***/ }),
-/* 40 */
+/* 44 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1379,7 +1465,7 @@ var useDeepMemo = function useDeepMemo(fn, dependencies) {
 exports.useDeepMemo = useDeepMemo;
 
 /***/ }),
-/* 41 */
+/* 45 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1459,7 +1545,7 @@ exports.MissingPropsMessage.defaultProps = {
 exports.default = FixedSizeContainer_1.default(exports.MissingPropsMessage);
 
 /***/ }),
-/* 42 */
+/* 46 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1480,7 +1566,7 @@ var Cover = styled_components_1.default.div.withConfig({
   componentId: "sc-1gsbnxb-0"
 })(["position:absolute;left:0;right:0;top:0;bottom:0;"]);
 var Blocker = styled_components_1.default.div.attrs({
-  'data-splunk-visualization-version': "25.4.0 - 6a8a433b8"
+  'data-splunk-visualization-version': "25.6.0 - f5eb3abf9"
 }).withConfig({
   displayName: "withEditModeCover__Blocker",
   componentId: "sc-1gsbnxb-1"
@@ -1511,7 +1597,7 @@ var withEditModeCover = function withEditModeCover(Visualization, disableEditMod
 exports.default = withEditModeCover;
 
 /***/ }),
-/* 43 */
+/* 47 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1527,7 +1613,7 @@ var colorUtils_1 = __webpack_require__(12);
 
 var variables_1 = __webpack_require__(9);
 
-var IconPlaceholder_1 = __webpack_require__(27);
+var IconPlaceholder_1 = __webpack_require__(30);
 
 var VizBehavior_1 = __webpack_require__(6);
 
@@ -1575,23 +1661,22 @@ var withPlaceholder = function withPlaceholder(Visualization) {
 exports.default = withPlaceholder;
 
 /***/ }),
-/* 44 */
+/* 48 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualization-icons/placeholders");
 
 /***/ }),
-/* 45 */,
-/* 46 */,
-/* 47 */
+/* 49 */,
+/* 50 */,
+/* 51 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualization-icons");
 
 /***/ }),
-/* 48 */,
-/* 49 */,
-/* 50 */
+/* 52 */,
+/* 53 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1621,14 +1706,6 @@ var background = function background(_ref) {
 exports.default = background;
 
 /***/ }),
-/* 51 */
-/***/ (function(module, exports) {
-
-module.exports = require("@babel/runtime/helpers/slicedToArray");
-
-/***/ }),
-/* 52 */,
-/* 53 */,
 /* 54 */,
 /* 55 */,
 /* 56 */,
@@ -1644,15 +1721,15 @@ module.exports = require("@babel/runtime/helpers/slicedToArray");
 /* 66 */,
 /* 67 */,
 /* 68 */,
-/* 69 */
+/* 69 */,
+/* 70 */,
+/* 71 */,
+/* 72 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/themes");
 
 /***/ }),
-/* 70 */,
-/* 71 */,
-/* 72 */,
 /* 73 */,
 /* 74 */,
 /* 75 */,
@@ -1662,27 +1739,27 @@ module.exports = require("@splunk/themes");
 /* 79 */,
 /* 80 */,
 /* 81 */,
-/* 82 */
+/* 82 */,
+/* 83 */,
+/* 84 */
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/dataSourceUtils");
+module.exports = require("@splunk/react-ui/Popover");
 
 /***/ }),
-/* 83 */
+/* 85 */,
+/* 86 */
 /***/ (function(module, exports) {
 
-module.exports = require("@babel/runtime/helpers/typeof");
+module.exports = require("@splunk/visualizations-shared/dataSourceUtils");
 
 /***/ }),
-/* 84 */
+/* 87 */
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/react-ui/Popover");
+module.exports = require("@babel/runtime/helpers/typeof");
 
 /***/ }),
-/* 85 */,
-/* 86 */,
-/* 87 */,
 /* 88 */,
 /* 89 */,
 /* 90 */,
@@ -1702,13 +1779,310 @@ module.exports = require("@splunk/react-ui/Popover");
 /* 104 */,
 /* 105 */,
 /* 106 */,
-/* 107 */
+/* 107 */,
+/* 108 */,
+/* 109 */,
+/* 110 */,
+/* 111 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Menu");
 
 /***/ }),
-/* 108 */
+/* 112 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var _slicedToArray = __webpack_require__(17);
+
+var _defineProperty = __webpack_require__(7);
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getCustomTimeInterval = exports.getPredefinedTimeInterval = exports.getEpochTime = exports.generateTokenReplacementMap = exports.replaceTokens = exports.mergeFieldActions = exports.mergeEventActions = exports.getFieldSummaryMapping = exports.convertToPayloadFormat = void 0;
+
+var time_1 = __webpack_require__(193);
+
+var lodash_1 = __webpack_require__(3);
+
+var dataUtils_1 = __webpack_require__(113); // util to convert a field-value map into an object with row.<fieldname>.value keys for payloads
+
+
+var convertToPayloadFormat = function convertToPayloadFormat(obj) {
+  var initialValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  if (!obj) return {};
+  return Object.keys(obj).reduce(function (acc, curr) {
+    var key = "row.".concat(curr, ".value");
+    return Object.assign(Object.assign({}, acc), _defineProperty({}, key, obj[curr]));
+  }, initialValue);
+};
+
+exports.convertToPayloadFormat = convertToPayloadFormat;
+
+var getFieldSummaryMapping = function getFieldSummaryMapping(columns, fields) {
+  // convert the `fieldsummary` payload to an array of objects
+  var arr = dataUtils_1.convertToArrOfObjects(columns, fields); // forms an array of FieldData elements expected by the @splunk/react-field-summary component
+
+  var fieldSummaryData = arr.map(function (d) {
+    return {
+      name: d.field,
+      count: +d.count,
+      distinctCount: +d.distinct_count,
+      numericCount: +d.numeric_count,
+      max: d.max === null ? null : +d.max,
+      mean: d.mean === null ? null : +d.mean,
+      min: d.min === null ? null : +d.min,
+      stdev: d.stdev === null ? null : +d.stdev,
+      modes: JSON.parse(d.values)
+    };
+  }); // creates a map of field name to its data for O(1) retrieval in the tooltip component
+
+  var fieldSummaryMapping = fieldSummaryData.reduce(function (map, fieldData) {
+    return Object.assign(Object.assign({}, map), _defineProperty({}, fieldData.name, fieldData));
+  }, {});
+  return fieldSummaryMapping;
+};
+
+exports.getFieldSummaryMapping = getFieldSummaryMapping;
+/**
+ * Helper to merge event actions into one array of event actions.
+ * @method mergeEventActions
+ * @param {Action[]} fieldActions1
+ * @param {Action[]} fieldActions2
+ * @returns {Action[]} merged event actions
+ */
+
+var mergeEventActions = function mergeEventActions(eventActions1, eventActions2) {
+  return eventActions1.concat(eventActions2);
+};
+
+exports.mergeEventActions = mergeEventActions;
+/**
+ * Helper to merge field actions. If same key exists in both field actions,
+ * combine each array of actions under one key.
+ * @method mergeFieldActions
+ * @param {Record<string, Action[]>} fieldActions1
+ * @param {Record<string, Action[]>} fieldActions2
+ * @returns {Record<string, Action[]>} merged field actions
+ */
+
+var mergeFieldActions = function mergeFieldActions(fieldActions1, fieldActions2) {
+  return lodash_1.mergeWith(Object.assign({}, fieldActions1), fieldActions2, function (fieldAction1value, fieldAction2value) {
+    return Array.isArray(fieldAction1value) && Array.isArray(fieldAction2value) ? lodash_1.union(fieldAction1value, fieldAction2value) : undefined;
+  });
+};
+
+exports.mergeFieldActions = mergeFieldActions;
+/**
+ * Helper to replace all tokens from the tokenReplacementMap in text with their corresponding values.
+ * Special parameters will only be escaped if allowSpecialParametersEscape is true.
+ * Field values will only be escaped if allowFieldValuesEscape is true, and the field does not begin with `!`.
+ * https://dev.splunk.com/enterprise/docs/devtools/customworkflowactions/#Prevent-field-value-escape
+ *
+ * @method replaceTokens
+ * @param {string} text
+ * @param {TokenReplacementMap} tokenReplacementMap
+ * @param {boolean} allowSpecialParametersEscape
+ * @param {boolean} allowFieldValuesEscape
+ * @returns {string} text with replaced tokens
+ */
+
+var replaceTokens = function replaceTokens(_ref) {
+  var text = _ref.text,
+      tokenReplacementMap = _ref.tokenReplacementMap,
+      allowSpecialParametersEscape = _ref.allowSpecialParametersEscape,
+      allowFieldValuesEscape = _ref.allowFieldValuesEscape;
+  var replacedText = text; // replace special parameters
+
+  Object.entries(tokenReplacementMap.specialParameters).forEach(function (_ref2) {
+    var _ref3 = _slicedToArray(_ref2, 2),
+        tokenName = _ref3[0],
+        tokenValue = _ref3[1];
+
+    var maybeEscapedTokenValue = allowSpecialParametersEscape ? encodeURIComponent(tokenValue) : tokenValue;
+    replacedText = replacedText.split("$".concat(tokenName, "$")).join(maybeEscapedTokenValue);
+  }); // replace field values
+
+  Object.entries(tokenReplacementMap.fields).forEach(function (_ref4) {
+    var _ref5 = _slicedToArray(_ref4, 2),
+        tokenName = _ref5[0],
+        tokenValue = _ref5[1];
+
+    // when allowFieldValuesEscape is true, replace field with escaped value
+    var maybeEscapedTokenValue = allowFieldValuesEscape ? encodeURIComponent(tokenValue) : tokenValue;
+    replacedText = replacedText.split("$".concat(tokenName, "$")).join(maybeEscapedTokenValue); // If field starts with `!`, always replace with the unescaped value
+
+    replacedText = replacedText.split("$!".concat(tokenName, "$")).join(tokenValue);
+  });
+  return replacedText;
+};
+
+exports.replaceTokens = replaceTokens;
+/**
+ * Generate a token replacement map taking into account Special Parameters and field replacements.
+ */
+
+var generateTokenReplacementMap = function generateTokenReplacementMap(_ref6) {
+  var dataSources = _ref6.dataSources,
+      rowIndex = _ref6.rowIndex,
+      pageNumber = _ref6.pageNumber,
+      field = _ref6.field,
+      value = _ref6.value,
+      _ref6$event = _ref6.event,
+      event = _ref6$event === void 0 ? {} : _ref6$event;
+
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+
+  var tokenReplacementMap = {
+    specialParameters: {},
+    fields: {}
+  }; // Map special parameters for workflow actions with values
+  // Note that @latest_time will not be supported since it does not work in sxml
+  // https://dev.splunk.com/enterprise/docs/devtools/customworkflowactions/#Special-parameters
+
+  var count = (_b = (_a = dataSources === null || dataSources === void 0 ? void 0 : dataSources.primary) === null || _a === void 0 ? void 0 : _a.requestParams) === null || _b === void 0 ? void 0 : _b.count;
+  var offset = rowIndex !== undefined && pageNumber !== undefined && count !== undefined ? rowIndex + count * (pageNumber - 1) : undefined;
+
+  if (offset !== undefined) {
+    tokenReplacementMap.specialParameters['@offset'] = String(offset);
+  }
+
+  if ((_d = (_c = dataSources === null || dataSources === void 0 ? void 0 : dataSources.primary) === null || _c === void 0 ? void 0 : _c.meta) === null || _d === void 0 ? void 0 : _d.sid) {
+    tokenReplacementMap.specialParameters['@sid'] = (_f = (_e = dataSources === null || dataSources === void 0 ? void 0 : dataSources.primary) === null || _e === void 0 ? void 0 : _e.meta) === null || _f === void 0 ? void 0 : _f.sid;
+  }
+
+  if ((_h = (_g = dataSources === null || dataSources === void 0 ? void 0 : dataSources.primary) === null || _g === void 0 ? void 0 : _g.meta) === null || _h === void 0 ? void 0 : _h.app) {
+    tokenReplacementMap.specialParameters['@namespace'] = (_k = (_j = dataSources === null || dataSources === void 0 ? void 0 : dataSources.primary) === null || _j === void 0 ? void 0 : _j.meta) === null || _k === void 0 ? void 0 : _k.app;
+  }
+
+  if (field) {
+    tokenReplacementMap.specialParameters['@field_name'] = field;
+  }
+
+  if (value) {
+    tokenReplacementMap.specialParameters['@field_value'] = value;
+  } // Map fields with field values
+
+
+  Object.entries(event).forEach(function (_ref7) {
+    var _ref8 = _slicedToArray(_ref7, 2),
+        fieldName = _ref8[0],
+        fieldValue = _ref8[1];
+
+    // TODO handle _raw and _time cases
+    // https://cd.splunkdev.com/eui/splunkcore-web-ui/-/blob/develop/web_v2/search_mrsparkle/exposed/js/models/services/data/ui/WorkflowAction.js#L32
+    tokenReplacementMap.fields["".concat(fieldName)] = typeof fieldValue === 'string' ? fieldValue : JSON.stringify(fieldValue);
+  });
+  return tokenReplacementMap;
+};
+
+exports.generateTokenReplacementMap = generateTokenReplacementMap; // return epoch unix timestamp in seconds
+
+var getEpochTime = function getEpochTime(time) {
+  // if not a valid time string, then indicate an error and return NaN.
+  if (!time_1.isISO(time)) {
+    console.error("'".concat(time, "' is not a valid time string."));
+    return NaN;
+  } // retrieves the epoch time in milliseconds, and divides by 1000
+
+
+  return new Date(time).getTime() / 1000;
+};
+
+exports.getEpochTime = getEpochTime;
+/**
+ * Helper to calculate the start (`earliest`) and end (`latest`) times when user clicks a predefined control in the Time Controls Popover
+ *  (Before this time/After this time/At this time). If `Before this time` is selected, the time window only includes `latest`, as there is
+ *  no `earliest` start time, and adds a 0.001 increment is order to capture all events at `time`. If `After this time` is selected, the
+ *  window is from `time` to `now`. If `At this time` is selected, the window starts at `time` (in epoch time) and ends at `time` plus 0.001
+ *  in order to include all events at `time`.
+ * @method getPredefinedTimeInterval
+ * @param {string} time
+ * @param {('before'|'after'|'at')} when
+ * @returns {TimeInterval} interval with `earliest` and `latest` defined in epoch time
+ */
+
+var getPredefinedTimeInterval = function getPredefinedTimeInterval(_ref9) {
+  var time = _ref9.time,
+      when = _ref9.when;
+  var epochTime = exports.getEpochTime(time);
+
+  switch (when) {
+    case 'before':
+      return {
+        latest: epochTime + 0.001
+      };
+
+    case 'after':
+      return {
+        earliest: epochTime,
+        latest: 'now'
+      };
+
+    case 'at':
+      return {
+        earliest: epochTime,
+        latest: epochTime + 0.001
+      };
+
+    default:
+      // returns 'at' interval by default
+      return {
+        earliest: epochTime,
+        latest: epochTime + 0.001
+      };
+  }
+};
+
+exports.getPredefinedTimeInterval = getPredefinedTimeInterval;
+/**
+ * Helper to calculate the start (`earliest`) and end (`latest`) times when user clicks `Apply` in the Time Controls Popover.
+ * If the `plusminus` type is selected, the window expands either way with the `time` as a midpoint, and amount and interval length
+ *  dependent on `rangeAmount` and `rangeUnit`. `plus` indicates starting at `time` and `minus` indicates ending at `time`.
+ * To match sXML behavior, the time interval is converted to epoch time and 0.001 is added to the `latest` time to ensure the
+ *  time window is inclusive of the end time.
+ * @method getCustomTimeInterval
+ * @param {string} time
+ * @param {string} rangeType
+ * @param {string} rangeAmount
+ * @param {string} rangeUnit
+ * @returns {TimeInterval} interval with `earliest` and `latest` defined in epoch time
+ */
+
+var getCustomTimeInterval = function getCustomTimeInterval(_ref10) {
+  var time = _ref10.time,
+      rangeType = _ref10.rangeType,
+      rangeAmount = _ref10.rangeAmount,
+      rangeUnit = _ref10.rangeUnit;
+  var timeRange = time_1.getAcceleratedTimeRange(time, rangeAmount, rangeUnit);
+  var timeInterval;
+
+  if (rangeType === 'plusminus') {
+    timeInterval = Object.assign({}, timeRange);
+  } else if (rangeType === 'plus') {
+    timeInterval = Object.assign(Object.assign({}, timeRange), {
+      earliest: time
+    });
+  } else if (rangeType === 'minus') {
+    timeInterval = Object.assign(Object.assign({}, timeRange), {
+      latest: time
+    });
+  } // converts to use epoch time in the interval, and adds 0.001 to `latest` per spec
+
+
+  return {
+    earliest: exports.getEpochTime(timeInterval.earliest),
+    latest: exports.getEpochTime(timeInterval.latest) + 0.001
+  };
+};
+
+exports.getCustomTimeInterval = getCustomTimeInterval;
+
+/***/ }),
+/* 113 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1747,20 +2121,30 @@ var convertToArrOfObjects = function convertToArrOfObjects(columns, fields) {
 exports.convertToArrOfObjects = convertToArrOfObjects;
 
 /***/ }),
-/* 109 */
+/* 114 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Markdown");
 
 /***/ }),
-/* 110 */,
-/* 111 */,
-/* 112 */,
-/* 113 */,
-/* 114 */,
-/* 115 */,
-/* 116 */,
-/* 117 */,
+/* 115 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-ui/Button");
+
+/***/ }),
+/* 116 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-ui/Message");
+
+/***/ }),
+/* 117 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-ui/Heading");
+
+/***/ }),
 /* 118 */,
 /* 119 */,
 /* 120 */,
@@ -1775,7 +2159,13 @@ module.exports = require("@splunk/react-ui/Markdown");
 /* 129 */,
 /* 130 */,
 /* 131 */,
-/* 132 */
+/* 132 */,
+/* 133 */,
+/* 134 */,
+/* 135 */,
+/* 136 */,
+/* 137 */,
+/* 138 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1797,23 +2187,32 @@ var __rest = this && this.__rest || function (s, e) {
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PureEvents = exports.config = exports.themes = exports.computeVizProps = exports.showPlaceHolderIcon = void 0;
+exports.replaceTokens = exports.PureEvents = exports.config = exports.themes = exports.computeVizProps = exports.showPlaceHolderIcon = void 0;
 
 var lodash_1 = __webpack_require__(3);
 
-var dataSourceUtils_1 = __webpack_require__(82);
+var dataSourceUtils_1 = __webpack_require__(86);
 
-var withDashboardViz_1 = __webpack_require__(32);
+var withDashboardViz_1 = __webpack_require__(35);
 
-var constants_1 = __webpack_require__(133);
+var constants_1 = __webpack_require__(139);
 
-var config_1 = __webpack_require__(183);
+var config_1 = __webpack_require__(190);
 
 exports.config = config_1.default;
 
-var PureEvents_1 = __webpack_require__(184);
+var PureEvents_1 = __webpack_require__(191);
 
 exports.PureEvents = PureEvents_1.default;
+
+var EventUtils_1 = __webpack_require__(112);
+
+Object.defineProperty(exports, "replaceTokens", {
+  enumerable: true,
+  get: function get() {
+    return EventUtils_1.replaceTokens;
+  }
+});
 /**
  * @method showPlaceHolderIcon
  * @param {Object} dataSources
@@ -1856,7 +2255,7 @@ exports.themes = themes;
 exports.default = Events;
 
 /***/ }),
-/* 133 */
+/* 139 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -1867,7 +2266,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "EMPTY_DATASOURCE", function() { return EMPTY_DATASOURCE; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "FIELDSUMMARY_DS_STORYBOOK", function() { return FIELDSUMMARY_DS_STORYBOOK; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "FIELDSUMMARY_DS_DOC_HUB", function() { return FIELDSUMMARY_DS_DOC_HUB; });
-/* harmony import */ var _splunk_datasource_utils_DataSet__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(151);
+/* harmony import */ var _splunk_datasource_utils_DataSet__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(158);
 /* harmony import */ var _splunk_datasource_utils_DataSet__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_splunk_datasource_utils_DataSet__WEBPACK_IMPORTED_MODULE_0__);
 // TODO: convert this file to .ts - created as .js as copied from SUI EventsViewer repo
 
@@ -2316,18 +2715,12 @@ var FIELDSUMMARY_DS_DOC_HUB = {
 };
 
 /***/ }),
-/* 134 */
+/* 140 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualization-context/EventsContext");
 
 /***/ }),
-/* 135 */,
-/* 136 */,
-/* 137 */,
-/* 138 */,
-/* 139 */,
-/* 140 */,
 /* 141 */,
 /* 142 */,
 /* 143 */,
@@ -2338,19 +2731,19 @@ module.exports = require("@splunk/visualization-context/EventsContext");
 /* 148 */,
 /* 149 */,
 /* 150 */,
-/* 151 */
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/datasource-utils/DataSet");
-
-/***/ }),
+/* 151 */,
 /* 152 */,
 /* 153 */,
 /* 154 */,
 /* 155 */,
 /* 156 */,
 /* 157 */,
-/* 158 */,
+/* 158 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/datasource-utils/DataSet");
+
+/***/ }),
 /* 159 */,
 /* 160 */,
 /* 161 */,
@@ -2374,7 +2767,14 @@ module.exports = require("@splunk/datasource-utils/DataSet");
 /* 179 */,
 /* 180 */,
 /* 181 */,
-/* 182 */
+/* 182 */,
+/* 183 */,
+/* 184 */,
+/* 185 */,
+/* 186 */,
+/* 187 */,
+/* 188 */,
+/* 189 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2404,9 +2804,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-__exportStar(__webpack_require__(132), exports);
+__exportStar(__webpack_require__(138), exports);
 
-var Events_1 = __webpack_require__(132);
+var Events_1 = __webpack_require__(138);
 
 Object.defineProperty(exports, "default", {
   enumerable: true,
@@ -2416,7 +2816,7 @@ Object.defineProperty(exports, "default", {
 });
 
 /***/ }),
-/* 183 */
+/* 190 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2426,23 +2826,23 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var visualization_icons_1 = __webpack_require__(47);
+var visualization_icons_1 = __webpack_require__(51);
 
-var placeholders_1 = __webpack_require__(44);
+var placeholders_1 = __webpack_require__(48);
 
 var schemaUtils_1 = __webpack_require__(16);
 
-var themes_1 = __webpack_require__(69);
+var themes_1 = __webpack_require__(72);
 
 var i18n_1 = __webpack_require__(2);
 
 var VizBehavior_1 = __webpack_require__(6);
 
-var VizCategory_1 = __webpack_require__(31);
+var VizCategory_1 = __webpack_require__(34);
 
-var configUtils_1 = __webpack_require__(17);
+var configUtils_1 = __webpack_require__(18);
 
-var BackgroundColor_1 = __webpack_require__(50);
+var BackgroundColor_1 = __webpack_require__(53);
 
 var defaultContext = {};
 var dataContract = {
@@ -2532,11 +2932,6 @@ var themes = {
   }
 };
 var editorConfig = [{
-  label: i18n_1._('Color and style'),
-  layout: [BackgroundColor_1.default({
-    themes: themes
-  })]
-}, {
   label: i18n_1._('Data display'),
   layout: [[{
     label: i18n_1._('Show field summary'),
@@ -2546,6 +2941,11 @@ var editorConfig = [{
       labelPosition: 'right'
     }
   }]]
+}, {
+  label: i18n_1._('Color and style'),
+  layout: [BackgroundColor_1.default({
+    themes: themes
+  })]
 }];
 /**
  * visualization configuration
@@ -2583,6 +2983,12 @@ var config = {
     },
     'events.search.<fieldSummaryReportActionName>': {
       description: 'Triggered when a user selects a report action in the field summary of an event. Application developers must pass context and handle events in their applications. For more information, see the Concepts tab.'
+    },
+    'value.click': {
+      description: 'Triggered when a user clicks a value in an event.'
+    },
+    'time.click': {
+      description: 'Triggered when a user clicks to drilldown in the time controls popover.'
     }
   },
   supports: [VizBehavior_1.VizBehavior.DYNAMIC_OPTIONS, VizBehavior_1.VizBehavior.EVENTS, VizBehavior_1.VizBehavior.PLACEHOLDER],
@@ -2592,15 +2998,15 @@ var config = {
 exports.default = configUtils_1.enhanceConfig(config);
 
 /***/ }),
-/* 184 */
+/* 191 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _typeof = __webpack_require__(83);
+var _typeof = __webpack_require__(87);
 
-var _slicedToArray = __webpack_require__(51);
+var _slicedToArray = __webpack_require__(17);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -2612,11 +3018,11 @@ var react_1 = __webpack_require__(1);
 
 var T = __webpack_require__(0);
 
-var EventsViewer_1 = __webpack_require__(185);
+var EventsViewer_1 = __webpack_require__(192);
 
 var styled_components_1 = __webpack_require__(4);
 
-var pick_1 = __webpack_require__(21);
+var pick_1 = __webpack_require__(22);
 
 var variables_1 = __webpack_require__(9);
 
@@ -2624,19 +3030,21 @@ var colorUtils_1 = __webpack_require__(12);
 
 var style_1 = __webpack_require__(15);
 
-var EventsContext_1 = __webpack_require__(134);
+var EventsContext_1 = __webpack_require__(140);
 
 var lodash_1 = __webpack_require__(3);
 
-var Menu_1 = __webpack_require__(107);
+var Menu_1 = __webpack_require__(111);
 
-var constants_1 = __webpack_require__(133);
+var constants_1 = __webpack_require__(139);
 
 var FixedSizeContainer_1 = __webpack_require__(13);
 
-var EventUtils_1 = __webpack_require__(186);
+var EventUtils_1 = __webpack_require__(112);
+
+var FieldSummaryTooltip_1 = __webpack_require__(194);
 
-var FieldSummaryTooltip_1 = __webpack_require__(187); // Inspired by VizTableContainer in PureTable.tsx
+var TimeControlsPopover_1 = __webpack_require__(196); // Inspired by VizTableContainer in PureTable.tsx
 
 
 var EventsContainer = styled_components_1.default.div.withConfig({
@@ -2684,9 +3092,12 @@ var PureEvents = function PureEvents(props) {
   var width = props.width,
       height = props.height,
       backgroundColor = props.backgroundColor,
-      dataSources = props.dataSources,
-      eventActionsProps = props.eventActions,
-      fieldActionsProps = props.fieldActions,
+      _props$dataSources = props.dataSources,
+      dataSources = _props$dataSources === void 0 ? {} : _props$dataSources,
+      _props$eventActions = props.eventActions,
+      eventActionsProps = _props$eventActions === void 0 ? [] : _props$eventActions,
+      _props$fieldActions = props.fieldActions,
+      fieldActionsProps = _props$fieldActions === void 0 ? {} : _props$fieldActions,
       showFieldSummary = props.showFieldSummary,
       footerFields = props.footerFields,
       highlightValuesByField = props.highlightValuesByField,
@@ -2727,16 +3138,28 @@ var PureEvents = function PureEvents(props) {
   var _React$useState3 = React.useState(null),
       _React$useState4 = _slicedToArray(_React$useState3, 2),
       fieldSummaryAnchor = _React$useState4[0],
-      setFieldSummaryAnchor = _React$useState4[1]; // creates array menu components to display in the Event Actions dropdown
+      setFieldSummaryAnchor = _React$useState4[1];
+
+  var _React$useState5 = React.useState(null),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      timeValue = _React$useState6[0],
+      setTimeValue = _React$useState6[1];
+
+  var _React$useState7 = React.useState(null),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      timeFieldAnchor = _React$useState8[0],
+      setTimeFieldAnchor = _React$useState8[1]; // creates array menu components to display in the Event Actions dropdown
 
 
   var renderEventActions = React.useMemo(function () {
-    return !Array.isArray(eventActions) || eventActions.length === 0 ? null : eventActions.map(function (_ref2) {
+    return !Array.isArray(eventActions) ? [] : eventActions.map(function (_ref2) {
       var eventType = _ref2.eventType,
           label = _ref2.label;
 
-      var onMenuItemClick = function onMenuItemClick(e) {
-        var payload = EventUtils_1.convertToPayloadFormat(e.event);
+      var onMenuItemClick = function onMenuItemClick(e, eventActionProps, tokenReplacementMap) {
+        var payload = EventUtils_1.convertToPayloadFormat(eventActionProps.event, {
+          tokenReplacementMap: tokenReplacementMap
+        });
         onEventTrigger({
           originalEvent: e,
           type: eventType,
@@ -2745,31 +3168,50 @@ var PureEvents = function PureEvents(props) {
       }; // eslint-disable-next-line react/display-name
 
 
-      return function (event) {
+      return function (eventActionProps) {
+        var rowIndex = eventActionProps.rowIndex,
+            pageNumber = eventActionProps.pageNumber,
+            event = eventActionProps.event;
+        var tokenReplacementMap = EventUtils_1.generateTokenReplacementMap({
+          dataSources: dataSources,
+          rowIndex: rowIndex,
+          pageNumber: pageNumber,
+          event: event
+        });
+        var replacedLabel = EventUtils_1.replaceTokens({
+          text: label,
+          tokenReplacementMap: tokenReplacementMap,
+          allowSpecialParametersEscape: false,
+          allowFieldValuesEscape: false
+        });
         return React.createElement(Menu_1.default.Item, {
-          key: "event-action-".concat(label),
-          onClick: function onClick() {
-            return onMenuItemClick(event);
+          key: "event-action-".concat(replacedLabel),
+          onClick: function onClick(e) {
+            return onMenuItemClick(e, eventActionProps, tokenReplacementMap);
           }
-        }, label);
+        }, replacedLabel);
       };
     });
   }, [eventActions]); // creates map of field names to array of menu components to display in its respective dropdown
   //  in the Actions column
 
   var renderFieldActions = React.useMemo(function () {
-    // undefined hides the Actions column, per logic in SUI EventsViewer
-    if (_typeof(fieldActions) !== 'object' || Object.keys(fieldActions).length === 0) return undefined;
-    var fieldActionsMap = Object.keys(fieldActions).reduce(function (currFieldActionsMap, fieldName) {
-      // eslint-disable-next-line no-param-reassign
-      currFieldActionsMap[fieldName] = fieldActions[fieldName].map(function (_ref3) {
-        var eventType = _ref3.eventType,
-            label = _ref3.label;
-
-        var onMenuItemClick = function onMenuItemClick(e) {
-          var payload = EventUtils_1.convertToPayloadFormat(e.event, {
-            name: e.field,
-            value: e.value
+    if (_typeof(fieldActions) !== 'object') return {};
+    var fieldActionsMap = {};
+    Object.entries(fieldActions).forEach(function (_ref3) {
+      var _ref4 = _slicedToArray(_ref3, 2),
+          currentFieldName = _ref4[0],
+          currentFieldActions = _ref4[1];
+
+      fieldActionsMap[currentFieldName] = currentFieldActions.map(function (_ref5) {
+        var eventType = _ref5.eventType,
+            label = _ref5.label;
+
+        var onMenuItemClick = function onMenuItemClick(e, fieldActionProps, tokenReplacementMap) {
+          var payload = EventUtils_1.convertToPayloadFormat(fieldActionProps.event, {
+            name: fieldActionProps.field,
+            value: fieldActionProps.value,
+            tokenReplacementMap: tokenReplacementMap
           });
           onEventTrigger({
             originalEvent: e,
@@ -2779,17 +3221,35 @@ var PureEvents = function PureEvents(props) {
         }; // eslint-disable-next-line react/display-name
 
 
-        return function (event) {
+        return function (fieldActionProps) {
+          var field = fieldActionProps.field,
+              value = fieldActionProps.value,
+              rowIndex = fieldActionProps.rowIndex,
+              pageNumber = fieldActionProps.pageNumber,
+              event = fieldActionProps.event;
+          var tokenReplacementMap = EventUtils_1.generateTokenReplacementMap({
+            dataSources: dataSources,
+            rowIndex: rowIndex,
+            pageNumber: pageNumber,
+            field: field,
+            value: value,
+            event: event
+          });
+          var replacedLabel = EventUtils_1.replaceTokens({
+            text: label,
+            tokenReplacementMap: tokenReplacementMap,
+            allowSpecialParametersEscape: false,
+            allowFieldValuesEscape: false
+          });
           return React.createElement(Menu_1.default.Item, {
-            key: "".concat(fieldName, "-field-action-").concat(label),
-            onClick: function onClick() {
-              return onMenuItemClick(event);
+            key: "".concat(currentFieldName, "-field-action-").concat(replacedLabel),
+            onClick: function onClick(e) {
+              return onMenuItemClick(e, fieldActionProps, tokenReplacementMap);
             }
-          }, label);
+          }, replacedLabel);
         };
       });
-      return currFieldActionsMap;
-    }, {});
+    });
     return fieldActionsMap;
   }, [fieldActions]); // formulate the options object required by the SUI EventsViewer component
 
@@ -2800,12 +3260,44 @@ var PureEvents = function PureEvents(props) {
     fieldValueHighlightMap: highlightValuesByField
   };
 
-  var handleFieldClicked = showFieldSummary && function (e, _ref4) {
-    var field = _ref4.field;
+  var handleFieldClicked = showFieldSummary && function (e, _ref6) {
+    var field = _ref6.field;
     setFieldSummaryField(field);
     setFieldSummaryAnchor(e.currentTarget.parentElement);
   };
 
+  var handleTimeClicked = function handleTimeClicked(e, _ref7) {
+    var time = _ref7.time;
+    setTimeValue(time);
+    setTimeFieldAnchor(e.currentTarget);
+  };
+
+  var handleValueClicked = function handleValueClicked(e, _ref8) {
+    var field = _ref8.field,
+        value = _ref8.value;
+    onEventTrigger({
+      originalEvent: e,
+      type: 'value.click',
+      payload: {
+        name: field,
+        value: value
+      }
+    });
+  };
+
+  var handleTimeDrilldown = function handleTimeDrilldown(e, timeInterval) {
+    onEventTrigger({
+      originalEvent: e,
+      type: 'time.click',
+      payload: {
+        name: '_time',
+        value: timeValue,
+        epochTime: EventUtils_1.getEpochTime(timeValue),
+        window: timeInterval
+      }
+    });
+  };
+
   var handleActionClicked = function handleActionClicked(event, data) {
     var actionType = data.action,
         field = data.field;
@@ -2830,7 +3322,9 @@ var PureEvents = function PureEvents(props) {
     onOptionsChange: onOptionsChange,
     dataSources: dataSources,
     onRequestParamsChange: onRequestParamsChange,
-    onFieldClicked: handleFieldClicked
+    onFieldClicked: handleFieldClicked,
+    onFieldValueClicked: handleValueClicked,
+    onTimeClicked: handleTimeClicked
   }), React.createElement(FieldSummaryTooltip_1.default, {
     open: !!fieldSummaryAnchor && !!fieldSummaryField,
     anchor: fieldSummaryAnchor,
@@ -2840,7 +3334,17 @@ var PureEvents = function PureEvents(props) {
     },
     fieldName: fieldSummaryField,
     fieldSummaryMap: fieldSummaryMap,
-    onActionClicked: handleActionClicked
+    onActionClicked: handleActionClicked,
+    onFieldValueClicked: handleValueClicked
+  }), React.createElement(TimeControlsPopover_1.default, {
+    open: !!timeFieldAnchor,
+    anchor: timeFieldAnchor,
+    time: timeValue,
+    onTimeDrilldown: handleTimeDrilldown,
+    handleTooltipClose: function handleTooltipClose() {
+      setTimeValue(null);
+      setTimeFieldAnchor(null);
+    }
   })));
 };
 
@@ -2888,98 +3392,19 @@ PureEvents.defaultProps = {
 exports.default = FixedSizeContainer_1.default(PureEvents);
 
 /***/ }),
-/* 185 */
+/* 192 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-events-viewer/components/EventsViewer");
 
 /***/ }),
-/* 186 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var _defineProperty = __webpack_require__(7);
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.mergeFieldActions = exports.mergeEventActions = exports.getFieldSummaryMapping = exports.convertToPayloadFormat = void 0;
-
-var lodash_1 = __webpack_require__(3);
-
-var dataUtils_1 = __webpack_require__(108); // util to convert a field-value map into an object with row.<fieldname>.value keys for payloads
-
-
-var convertToPayloadFormat = function convertToPayloadFormat(obj) {
-  var initialValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  if (!obj) return {};
-  return Object.keys(obj).reduce(function (acc, curr) {
-    var key = "row.".concat(curr, ".value");
-    return Object.assign(Object.assign({}, acc), _defineProperty({}, key, obj[curr]));
-  }, initialValue);
-};
-
-exports.convertToPayloadFormat = convertToPayloadFormat;
-
-var getFieldSummaryMapping = function getFieldSummaryMapping(columns, fields) {
-  // convert the `fieldsummary` payload to an array of objects
-  var arr = dataUtils_1.convertToArrOfObjects(columns, fields); // forms an array of FieldData elements expected by the @splunk/react-field-summary component
-
-  var fieldSummaryData = arr.map(function (d) {
-    return {
-      name: d.field,
-      count: +d.count,
-      distinctCount: +d.distinct_count,
-      numericCount: +d.numeric_count,
-      max: d.max === null ? null : +d.max,
-      mean: d.mean === null ? null : +d.mean,
-      min: d.min === null ? null : +d.min,
-      stdev: d.stdev === null ? null : +d.stdev,
-      modes: JSON.parse(d.values)
-    };
-  }); // creates a map of field name to its data for O(1) retrieval in the tooltip component
-
-  var fieldSummaryMapping = fieldSummaryData.reduce(function (map, fieldData) {
-    return Object.assign(Object.assign({}, map), _defineProperty({}, fieldData.name, fieldData));
-  }, {});
-  return fieldSummaryMapping;
-};
-
-exports.getFieldSummaryMapping = getFieldSummaryMapping;
-/**
- * Helper to merge event actions into one array of event actions.
- * @method mergeEventActions
- * @param {Action[]} fieldActions1
- * @param {Action[]} fieldActions2
- * @returns {Action[]} merged event actions
- */
-
-var mergeEventActions = function mergeEventActions(eventActions1, eventActions2) {
-  return eventActions1.concat(eventActions2);
-};
-
-exports.mergeEventActions = mergeEventActions;
-/**
- * Helper to merge field actions. If same key exists in both field actions,
- * combine each array of actions under one key.
- * @method mergeFieldActions
- * @param {Record<string, Action[]>} fieldActions1
- * @param {Record<string, Action[]>} fieldActions2
- * @returns {Record<string, Action[]>} merged field actions
- */
-
-var mergeFieldActions = function mergeFieldActions(fieldActions1, fieldActions2) {
-  return lodash_1.mergeWith(fieldActions1, fieldActions2, function (fieldAction1value, fieldAction2value) {
-    return Array.isArray(fieldAction1value) && Array.isArray(fieldAction2value) ? lodash_1.union(fieldAction1value, fieldAction2value) : undefined;
-  });
-};
+/* 193 */
+/***/ (function(module, exports) {
 
-exports.mergeFieldActions = mergeFieldActions;
+module.exports = require("@splunk/time-range-utils/time");
 
 /***/ }),
-/* 187 */
+/* 194 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2995,9 +3420,9 @@ var react_1 = __webpack_require__(1);
 
 var Popover_1 = __webpack_require__(84);
 
-var Markdown_1 = __webpack_require__(109);
+var Markdown_1 = __webpack_require__(114);
 
-var FieldSummary_1 = __webpack_require__(188);
+var FieldSummary_1 = __webpack_require__(195);
 
 var lodash_1 = __webpack_require__(3);
 
@@ -3005,7 +3430,7 @@ var i18n_1 = __webpack_require__(2);
 
 var styled_components_1 = __webpack_require__(4);
 
-var EventsContext_1 = __webpack_require__(134);
+var EventsContext_1 = __webpack_require__(140);
 
 var popoverContainerStyle = {
   padding: '20px',
@@ -3059,7 +3484,8 @@ var FieldSummaryTooltip = function FieldSummaryTooltip(props) {
       handleTooltipClose = props.handleTooltipClose,
       fieldName = props.fieldName,
       fieldSummaryMap = props.fieldSummaryMap,
-      onActionClicked = props.onActionClicked;
+      onActionClicked = props.onActionClicked,
+      onFieldValueClicked = props.onFieldValueClicked;
 
   var _react_1$useContext = react_1.useContext(EventsContext_1.default),
       isSplunkWebAvailable = _react_1$useContext.isSplunkWebAvailable;
@@ -3079,6 +3505,7 @@ var FieldSummaryTooltip = function FieldSummaryTooltip(props) {
     open: open,
     defaultPlacement: "below",
     anchor: anchor,
+    takeFocus: true,
     onRequestClose: handleTooltipClose
   }, React.createElement("div", {
     style: popoverContainerStyle
@@ -3086,7 +3513,8 @@ var FieldSummaryTooltip = function FieldSummaryTooltip(props) {
     eventCount: field.count,
     field: field,
     actionsForField: getActionsForField,
-    onActionClicked: onActionClicked
+    onActionClicked: onActionClicked,
+    onFieldValueClicked: onFieldValueClicked
   }) : React.createElement(StyledMarkdown, {
     text: fallbackText
   })));
@@ -3098,16 +3526,311 @@ FieldSummaryTooltip.defaultProps = {
   fieldName: '',
   fieldSummaryMap: {},
   handleTooltipClose: lodash_1.noop,
-  onActionClicked: lodash_1.noop
+  onActionClicked: lodash_1.noop,
+  onFieldValueClicked: lodash_1.noop
 };
 exports.default = FieldSummaryTooltip;
 
 /***/ }),
-/* 188 */
+/* 195 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-field-summary/components/FieldSummary");
 
+/***/ }),
+/* 196 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var _slicedToArray = __webpack_require__(17);
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var React = __webpack_require__(1);
+
+var Popover_1 = __webpack_require__(84);
+
+var ControlGroup_1 = __webpack_require__(197);
+
+var Button_1 = __webpack_require__(115);
+
+var Text_1 = __webpack_require__(198);
+
+var Message_1 = __webpack_require__(116);
+
+var Select_1 = __webpack_require__(199);
+
+var Link_1 = __webpack_require__(200);
+
+var Heading_1 = __webpack_require__(117);
+
+var lodash_1 = __webpack_require__(3);
+
+var i18n_1 = __webpack_require__(2);
+
+var styled_components_1 = __webpack_require__(4);
+
+var numberUtils_1 = __webpack_require__(29);
+
+var pick_1 = __webpack_require__(22);
+
+var EventUtils_1 = __webpack_require__(112); // custom popover sizing for Enterprise vs. Prisma themes - additional px for Prisma theme to fit controls
+
+
+var TimePopoverContainer = styled_components_1.default.div.withConfig({
+  displayName: "TimeControlsPopover__TimePopoverContainer",
+  componentId: "fj32ze-0"
+})(["padding:20px;width:", ";.time-drilldown-header{margin:0px;}[data-test='nearby-controls']{margin:0px;width:", ";}"], function (props) {
+  return pick_1.default({
+    enterprise: '372px',
+    prisma: '422px'
+  })(props);
+}, function (props) {
+  return pick_1.default({
+    enterprise: '289.75px',
+    prisma: '329.75px'
+  })(props);
+});
+var TimeTable = styled_components_1.default.table.withConfig({
+  displayName: "TimeControlsPopover__TimeTable",
+  componentId: "fj32ze-1"
+})(["width:100%;display:table;border-collapse:separate;box-sizing:border-box;text-indent:initial;border-spacing:2px;border-color:grey;"]);
+var NearbyValueRow = styled_components_1.default.div.withConfig({
+  displayName: "TimeControlsPopover__NearbyValueRow",
+  componentId: "fj32ze-2"
+})(["display:flex;align-items:flex-start;justify-content:center;"]);
+var SectionHeading = styled_components_1.default(Heading_1.default).withConfig({
+  displayName: "TimeControlsPopover__SectionHeading",
+  componentId: "fj32ze-3"
+})(["margin-top:20px;"]);
+var rangeTypeInputStyle = {
+  minWidth: 80
+};
+var rangeAmountInputStyle = {
+  width: 54.88,
+  minWidth: 48
+};
+var rangeUnitInputStyle = {
+  width: 154.88,
+  textAlign: 'center'
+};
+var applyButtonStyle = {
+  marginLeft: 10
+};
+
+var TimeControlsPopover = function TimeControlsPopover(props) {
+  var open = props.open,
+      anchor = props.anchor,
+      time = props.time,
+      handleTooltipClose = props.handleTooltipClose,
+      onTimeDrilldown = props.onTimeDrilldown; // nearby events controls default to +/- 5 second(s)
+
+  var _React$useState = React.useState('plusminus'),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      rangeType = _React$useState2[0],
+      setRangeType = _React$useState2[1];
+
+  var _React$useState3 = React.useState('5'),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      rangeAmount = _React$useState4[0],
+      setRangeAmount = _React$useState4[1];
+
+  var _React$useState5 = React.useState('s'),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      rangeUnit = _React$useState6[0],
+      setRangeUnit = _React$useState6[1]; // if validation fails, this triggers the error state on the controls to show
+
+
+  var _React$useState7 = React.useState(false),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      isInvalidInput = _React$useState8[0],
+      setInvalidInput = _React$useState8[1];
+
+  var errorMessage = i18n_1._('Value must be an integer greater than 0');
+
+  var handleRangeTypeChange = function handleRangeTypeChange(e, _ref) {
+    var value = _ref.value;
+    setRangeType(value);
+  };
+
+  var handleRangeAmountChange = function handleRangeAmountChange(e, _ref2) {
+    var value = _ref2.value;
+    setRangeAmount(value);
+  };
+
+  var handleRangeUnitChange = function handleRangeUnitChange(e, _ref3) {
+    var value = _ref3.value;
+    setRangeUnit(value);
+  };
+
+  var handleSubmit = function handleSubmit(e) {
+    // if the entered range amount is not a number, is not greater than 0, or is not an integer, then it is invalid
+    var parsedIntervalAmount = numberUtils_1.parseNumber(rangeAmount);
+
+    if (Number.isNaN(parsedIntervalAmount) || parsedIntervalAmount <= 0 || !Number.isInteger(parsedIntervalAmount)) {
+      setInvalidInput(true);
+      return;
+    }
+
+    setInvalidInput(false);
+    var timeInterval = EventUtils_1.getCustomTimeInterval({
+      time: time,
+      rangeType: rangeType,
+      rangeAmount: rangeAmount,
+      rangeUnit: rangeUnit
+    });
+    onTimeDrilldown(e, timeInterval);
+  };
+
+  var handleEventIntervalClick = function handleEventIntervalClick(e, when) {
+    e.preventDefault();
+    var timeInterval = EventUtils_1.getPredefinedTimeInterval({
+      time: time,
+      when: when
+    });
+    onTimeDrilldown(e, timeInterval);
+  };
+
+  return React.createElement(Popover_1.default, {
+    open: open,
+    defaultPlacement: "below",
+    anchor: anchor,
+    takeFocus: true,
+    onRequestClose: handleTooltipClose
+  }, React.createElement(TimePopoverContainer, {
+    "data-test": "time-controls"
+  }, React.createElement(Heading_1.default, {
+    level: 2,
+    className: "time-drilldown-header"
+  }, "_time"), isInvalidInput && React.createElement(Message_1.default, {
+    type: "error",
+    "data-test": "invalid-time-input-message"
+  }, errorMessage), React.createElement(SectionHeading, {
+    level: 4
+  }, i18n_1._('Events Before or After')), React.createElement(TimeTable, null, React.createElement("tbody", null, React.createElement("tr", {
+    className: "before-after-values"
+  }, React.createElement("td", null, React.createElement(Link_1.default, {
+    "data-test": "before-time",
+    to: "#",
+    onClick: function onClick(e) {
+      handleEventIntervalClick(e, 'before');
+    }
+  }, i18n_1._('Before this time'))), React.createElement("td", null, React.createElement(Link_1.default, {
+    "data-test": "after-time",
+    to: "#",
+    onClick: function onClick(e) {
+      handleEventIntervalClick(e, 'after');
+    }
+  }, i18n_1._('After this time'))), React.createElement("td", null, React.createElement(Link_1.default, {
+    "data-test": "at-time",
+    to: "#",
+    onClick: function onClick(e) {
+      handleEventIntervalClick(e, 'at');
+    }
+  }, i18n_1._('At this time')))))), React.createElement(SectionHeading, {
+    level: 4,
+    className: "nearby-header"
+  }, i18n_1._('Nearby Events')), React.createElement(NearbyValueRow, {
+    className: "nearby-value"
+  }, React.createElement(ControlGroup_1.default, {
+    "data-test": "nearby-controls",
+    controlsLayout: "fillJoin",
+    label: "Time controls",
+    labelPosition: "top",
+    hideLabel: true
+  }, React.createElement(Select_1.default, {
+    inline: true,
+    value: rangeType,
+    onChange: handleRangeTypeChange,
+    error: isInvalidInput,
+    style: rangeTypeInputStyle,
+    "data-test": "type-selection"
+  }, React.createElement(Select_1.default.Option, {
+    label: "+",
+    value: "plus"
+  }), React.createElement(Select_1.default.Option, {
+    label: "-",
+    value: "minus"
+  }), React.createElement(Select_1.default.Option, {
+    label: "+/-",
+    value: "plusminus"
+  })), React.createElement(Text_1.default, {
+    inline: true,
+    value: rangeAmount,
+    onChange: handleRangeAmountChange,
+    error: isInvalidInput,
+    style: rangeAmountInputStyle,
+    "data-test": "amount-input"
+  }), React.createElement(Select_1.default, {
+    "data-test": "unit-selection",
+    inline: true,
+    value: rangeUnit,
+    onChange: handleRangeUnitChange,
+    error: isInvalidInput,
+    style: rangeUnitInputStyle
+  }, React.createElement(Select_1.default.Option, {
+    label: "week(s)",
+    value: "w"
+  }), React.createElement(Select_1.default.Option, {
+    label: "day(s)",
+    value: "d"
+  }), React.createElement(Select_1.default.Option, {
+    label: "hour(s)",
+    value: "h"
+  }), React.createElement(Select_1.default.Option, {
+    label: "minute(s)",
+    value: "m"
+  }), React.createElement(Select_1.default.Option, {
+    label: "second(s)",
+    value: "s"
+  }), React.createElement(Select_1.default.Option, {
+    label: "millisecond(s)",
+    value: "ms"
+  }))), React.createElement(Button_1.default, {
+    label: i18n_1._('Apply'),
+    onClick: handleSubmit,
+    style: applyButtonStyle,
+    "data-test": "apply-custom-time"
+  }))));
+};
+
+TimeControlsPopover.defaultProps = {
+  open: false,
+  anchor: null,
+  time: null,
+  handleTooltipClose: lodash_1.noop,
+  onTimeDrilldown: lodash_1.noop
+};
+exports.default = TimeControlsPopover;
+
+/***/ }),
+/* 197 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-ui/ControlGroup");
+
+/***/ }),
+/* 198 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-ui/Text");
+
+/***/ }),
+/* 199 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-ui/Select");
+
+/***/ }),
+/* 200 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-ui/Link");
+
 /***/ })
 /******/ ]);
 //# sourceMappingURL=Events.js.map