@splunk/visualizations 25.5.0 → 25.7.0

package/Events.js

@@ -87,20 +87,20 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 183);
+/******/ 	return __webpack_require__(__webpack_require__.s = 196);
 /******/ })
 /************************************************************************/
 /******/ ([
 /* 0 */
 /***/ (function(module, exports) {
 
-module.exports = require("prop-types");
+module.exports = require("react");
 
 /***/ }),
 /* 1 */
 /***/ (function(module, exports) {
 
-module.exports = require("react");
+module.exports = require("prop-types");
 
 /***/ }),
 /* 2 */
@@ -156,31 +156,32 @@ var VizBehavior;
 
   VizBehavior["PLACEHOLDER"] = "placeholder";
   VizBehavior["PAGE_AND_SORT"] = "page-and-sort";
+  VizBehavior["TRELLIS"] = "trellis";
 })(VizBehavior = exports.VizBehavior || (exports.VizBehavior = {}));
 
 /***/ }),
 /* 7 */
 /***/ (function(module, exports) {
 
-module.exports = require("@babel/runtime/helpers/defineProperty");
+module.exports = require("@babel/runtime/helpers/toConsumableArray");
 
 /***/ }),
 /* 8 */
 /***/ (function(module, exports) {
 
-module.exports = require("@babel/runtime/helpers/toConsumableArray");
+module.exports = require("@babel/runtime/helpers/defineProperty");
 
 /***/ }),
 /* 9 */
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/themes/variables");
+module.exports = require("@splunk/visualizations-shared/Message");
 
 /***/ }),
 /* 10 */
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/Message");
+module.exports = require("@splunk/themes/variables");
 
 /***/ }),
 /* 11 */
@@ -205,13 +206,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var React = __webpack_require__(1);
+var React = __webpack_require__(0);
 
 var styled_components_1 = __webpack_require__(4);
 
-var SizeAwareWrapper_1 = __webpack_require__(20);
+var SizeAwareWrapper_1 = __webpack_require__(18);
 
-var style_1 = __webpack_require__(15);
+var style_1 = __webpack_require__(14);
 
 var colorUtils_1 = __webpack_require__(12);
 
@@ -270,7 +271,7 @@ var withFixedSizeContainer = function withFixedSizeContainer(Viz) {
 
     return React.createElement(FixSizeItem, {
       "data-test": "fix-size-item",
-      "data-splunk-visualization-version": "25.5.0 - 12c0447a7",
+      "data-splunk-visualization-version": "25.7.0 - d10a7789b",
       width: width,
       height: height,
       backgroundColor: backgroundColor
@@ -292,6 +293,12 @@ exports.default = withFixedSizeContainer;
 
 /***/ }),
 /* 14 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualizations-shared/style");
+
+/***/ }),
+/* 15 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -323,27 +330,33 @@ var extendStaticWrapperProps = function extendStaticWrapperProps(_ref) {
 exports.extendStaticWrapperProps = extendStaticWrapperProps;
 
 /***/ }),
-/* 15 */
+/* 16 */
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/style");
+module.exports = require("@splunk/visualizations-shared/schemaUtils");
 
 /***/ }),
-/* 16 */
+/* 17 */
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/schemaUtils");
+module.exports = require("@babel/runtime/helpers/slicedToArray");
 
 /***/ }),
-/* 17 */
+/* 18 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualizations-shared/SizeAwareWrapper");
+
+/***/ }),
+/* 19 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _toConsumableArray = __webpack_require__(8);
+var _toConsumableArray = __webpack_require__(7);
 
-var _defineProperty = __webpack_require__(7);
+var _defineProperty = __webpack_require__(8);
 
 var __rest = this && this.__rest || function (s, e) {
   var t = {};
@@ -571,46 +584,58 @@ var insertLayout = function insertLayout(layout, index) {
 exports.insertLayout = insertLayout;
 
 /***/ }),
-/* 18 */,
-/* 19 */
+/* 20 */
 /***/ (function(module, exports) {
 
-module.exports = require("@babel/runtime/helpers/createClass");
+module.exports = require("@splunk/visualization-context/FeatureFlagContext");
 
 /***/ }),
-/* 20 */
+/* 21 */,
+/* 22 */
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/SizeAwareWrapper");
+module.exports = require("@babel/runtime/helpers/createClass");
 
 /***/ }),
-/* 21 */
+/* 23 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/themes/pick");
 
 /***/ }),
-/* 22 */,
-/* 23 */
+/* 24 */,
+/* 25 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualization-context/TimezoneContext");
 
 /***/ }),
-/* 24 */,
-/* 25 */
+/* 26 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/hocUtils");
 
 /***/ }),
-/* 26 */
+/* 27 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/JSONSchemaUtils");
 
 /***/ }),
-/* 27 */
+/* 28 */,
+/* 29 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualization-encoding/Options");
+
+/***/ }),
+/* 30 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualizations-shared/numberUtils");
+
+/***/ }),
+/* 31 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -621,15 +646,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.shouldShowIconPlaceholder = void 0;
 
-var React = __webpack_require__(1);
+var React = __webpack_require__(0);
 
-var T = __webpack_require__(0);
+var T = __webpack_require__(1);
 
 var lodash_1 = __webpack_require__(3);
 
 var i18n_1 = __webpack_require__(2);
 
-var Message_1 = __webpack_require__(10);
+var Message_1 = __webpack_require__(9);
 
 var FixedSizeContainer_1 = __webpack_require__(13);
 /**
@@ -701,24 +726,30 @@ IconPlaceholder.defaultProps = {
 exports.default = FixedSizeContainer_1.default(IconPlaceholder);
 
 /***/ }),
-/* 28 */
+/* 32 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/ui-utils/id");
+
+/***/ }),
+/* 33 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _defineProperty = __webpack_require__(7);
+var _defineProperty = __webpack_require__(8);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getSortingParams = exports.SortParamsPropTypes = void 0;
 
-var T = __webpack_require__(0);
+var T = __webpack_require__(1);
 
 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,
@@ -738,7 +769,7 @@ var getSortingParams = function getSortingParams(_ref) {
   };
   var onSort;
 
-  if (lodash_1.isFunction(onRequestParamsChange)) {
+  if (typeof onRequestParamsChange === 'function') {
     if (requestParams && lodash_1.has(requestParams, 'sort')) {
       currentSortKey = Object.keys(requestParams.sort).shift();
       currentSortDir = requestParams.sort[currentSortKey];
@@ -771,7 +802,7 @@ var getSortingParams = function getSortingParams(_ref) {
 exports.getSortingParams = getSortingParams;
 
 /***/ }),
-/* 29 */
+/* 34 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -782,7 +813,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getPaginationParams = exports.PaginatorParamsPropTypes = void 0;
 
-var T = __webpack_require__(0);
+var T = __webpack_require__(1);
 
 var lodash_1 = __webpack_require__(3);
 
@@ -802,7 +833,7 @@ var getPaginationParams = function getPaginationParams(_ref) {
   var count = requestParams && requestParams.count;
   var totalPages = typeof count === 'number' && count > 0 ? Math.ceil(totalCount / count) : 0;
   var current = typeof count === 'number' && count > 0 ? Math.floor(offset / count) + 1 : 0;
-  var isPaging = totalPages > 1 && lodash_1.isFunction(onRequestParamsChange);
+  var isPaging = totalPages > 1 && typeof onRequestParamsChange === 'function';
 
   var onChangeHandler = function onChangeHandler(e, _ref2) {
     var page = _ref2.page,
@@ -828,15 +859,14 @@ var getPaginationParams = function getPaginationParams(_ref) {
     isPaging: isPaging,
     current: current,
     totalPages: totalPages,
-    onChange: lodash_1.isFunction(onRequestParamsChange) ? onChangeHandler : lodash_1.noop
+    onChange: typeof onRequestParamsChange === 'function' ? onChangeHandler : lodash_1.noop
   };
 };
 
 exports.getPaginationParams = getPaginationParams;
 
 /***/ }),
-/* 30 */,
-/* 31 */
+/* 35 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -864,58 +894,67 @@ var VizCategory;
 })(VizCategory = exports.VizCategory || (exports.VizCategory = {}));
 
 /***/ }),
-/* 32 */
+/* 36 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
+var _slicedToArray = __webpack_require__(17);
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var React = __webpack_require__(1);
+var React = __webpack_require__(0);
 
 var lodash_1 = __webpack_require__(3);
 
-var getSettingsFromThemedProps_1 = __webpack_require__(33);
+var getSettingsFromThemedProps_1 = __webpack_require__(37);
+
+var Options_1 = __webpack_require__(29);
 
-var Options_1 = __webpack_require__(34);
+var SanitizeProps_1 = __webpack_require__(38);
 
-var SanitizeProps_1 = __webpack_require__(35);
+var TimezoneContext_1 = __webpack_require__(25);
 
-var TimezoneContext_1 = __webpack_require__(23);
+var moment_1 = __webpack_require__(39);
 
-var moment_1 = __webpack_require__(36);
+var FeatureFlagContext_1 = __webpack_require__(20);
 
 var styled_components_1 = __webpack_require__(4);
 
-var hocUtils_1 = __webpack_require__(25);
+var hocUtils_1 = __webpack_require__(26);
+
+var JSONSchemaUtils_1 = __webpack_require__(27);
+
+var async_dynamic_options_evaluator_1 = __webpack_require__(40);
 
-var JSONSchemaUtils_1 = __webpack_require__(26);
+var id_1 = __webpack_require__(32);
 
-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__(33);
 
-var getPagination_1 = __webpack_require__(29);
+var getPagination_1 = __webpack_require__(34);
 
-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,
@@ -928,6 +967,8 @@ var withDashboardViz = function withDashboardViz(opts) {
   var defaultOptions = JSONSchemaUtils_1.pickFieldFromJSONSchema(vizConfig.optionsSchema, 'default');
 
   var DashboardViz = function DashboardViz(props) {
+    var _a;
+
     var mode = props.mode,
         hasEventHandlers = props.hasEventHandlers,
         dataSources = props.dataSources,
@@ -975,38 +1016,97 @@ 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; // trellis specific backgroundColor update for onComputedProps
+    // if trellis is enabled following these three criteria - 1) trellis feature flag is enabled 2) vizConfig supports array has 'trellis' 3)  option 'splitByLayout' is set to 'trellis
+    // onComputedProps api should return back trellisBackgroundColor value for backgroundColor option to support coloring of sibling panels (for eg:- title/ description on UDF side)
+
+    var isTrellisFeatureFlagOn = Boolean(featureFlagContext && featureFlagContext.visualizations_enableTrellis);
+    var clonedEvaluatedOptions = lodash_1.cloneDeep(evaluatedOptionsToUse);
+
+    if (isTrellisFeatureFlagOn && ((_a = vizConfig === null || vizConfig === void 0 ? void 0 : vizConfig.supports) === null || _a === void 0 ? void 0 : _a.includes(VizBehavior_1.VizBehavior.TRELLIS)) && (clonedEvaluatedOptions === null || clonedEvaluatedOptions === void 0 ? void 0 : clonedEvaluatedOptions.splitByLayout) === VizBehavior_1.VizBehavior.TRELLIS) {
+      clonedEvaluatedOptions.backgroundColor = clonedEvaluatedOptions === null || clonedEvaluatedOptions === void 0 ? void 0 : clonedEvaluatedOptions.trellisBackgroundColor;
+    } // 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(clonedEvaluatedOptions);
+    });
     React.useEffect(function () {
-      onComputedProps(evaluatedOptions);
-    }); // present warning message if any required props are missing
+      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);
-
-    if (missing.length > 0 && supports.includes(VizBehavior_1.VizBehavior.PLACEHOLDER)) {
-      return React.createElement(MissingPropsMessage_1.default, {
-        "data-test": "missing-props-message",
-        width: width,
-        height: height,
-        missingProps: missing,
-        backgroundColor: bgColorFromTheme
-      });
-    } // events
+    var missing = MissingPropsMessage_1.missingKeys(requiredProps, evaluatedOptionsToUse);
+
+    if (missing.length > 0 && supports.includes(VizBehavior_1.VizBehavior.PLACEHOLDER) && vizConfig.key !== 'splunk.singlevalue' // For SV missing props msg is not displayed if required props majorValue is missing, instead this will be handled from the component, instead handled within component
+    ) {
+        return React.createElement(MissingPropsMessage_1.default, {
+          "data-test": "missing-props-message",
+          width: width,
+          height: height,
+          missingProps: missing,
+          backgroundColor: bgColorFromTheme
+        });
+      } // events
 
 
     var eventCallbackProps = {};
@@ -1023,7 +1123,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 +1142,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 +1162,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 +1192,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 +1209,31 @@ var withDashboardViz = function withDashboardViz(opts) {
 exports.default = withDashboardViz;
 
 /***/ }),
-/* 33 */
+/* 37 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/themes/getSettingsFromThemedProps");
 
 /***/ }),
-/* 34 */
+/* 38 */
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualization-encoding/Options");
+module.exports = require("@splunk/visualizations-shared/SanitizeProps");
 
 /***/ }),
-/* 35 */
+/* 39 */
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/SanitizeProps");
+module.exports = require("@splunk/moment");
 
 /***/ }),
-/* 36 */
+/* 40 */
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/moment");
+module.exports = require("@splunk/async-dynamic-options-evaluator");
 
 /***/ }),
-/* 37 */
+/* 41 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1147,11 +1247,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.INITIAL_HEIGHT = exports.INITIAL_WIDTH = void 0;
 /* eslint-disable react/no-unused-prop-types,react/prefer-stateless-function */
 
-var T = __webpack_require__(0);
+var T = __webpack_require__(1);
 
 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 +1384,7 @@ SplunkVisualization.defaultProps = {
 exports.default = SplunkVisualization;
 
 /***/ }),
-/* 38 */
+/* 42 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1292,7 +1392,7 @@ exports.default = SplunkVisualization;
 
 var _classCallCheck = __webpack_require__(11);
 
-var _createClass = __webpack_require__(19);
+var _createClass = __webpack_require__(22);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -1321,7 +1421,7 @@ var DefaultVizActionHandler = /*#__PURE__*/function () {
 exports.DefaultVizActionHandler = DefaultVizActionHandler;
 
 /***/ }),
-/* 39 */
+/* 43 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1334,7 +1434,7 @@ exports.validSortDirs = void 0;
 exports.validSortDirs = ['asc', 'desc', 'none'];
 
 /***/ }),
-/* 40 */
+/* 44 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1345,7 +1445,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useDeepMemo = void 0;
 
-var react_1 = __webpack_require__(1);
+var react_1 = __webpack_require__(0);
 
 var lodash_1 = __webpack_require__(3);
 /**
@@ -1379,7 +1479,7 @@ var useDeepMemo = function useDeepMemo(fn, dependencies) {
 exports.useDeepMemo = useDeepMemo;
 
 /***/ }),
-/* 41 */
+/* 45 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1390,13 +1490,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.MissingPropsMessage = exports.missingKeys = exports.isMissing = void 0;
 
-var React = __webpack_require__(1);
+var React = __webpack_require__(0);
 
-var T = __webpack_require__(0);
+var T = __webpack_require__(1);
 
 var i18n_1 = __webpack_require__(2);
 
-var Message_1 = __webpack_require__(10);
+var Message_1 = __webpack_require__(9);
 
 var FixedSizeContainer_1 = __webpack_require__(13);
 /**
@@ -1459,7 +1559,7 @@ exports.MissingPropsMessage.defaultProps = {
 exports.default = FixedSizeContainer_1.default(exports.MissingPropsMessage);
 
 /***/ }),
-/* 42 */
+/* 46 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1469,18 +1569,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var React = __webpack_require__(1);
+var React = __webpack_require__(0);
 
 var styled_components_1 = __webpack_require__(4);
 
-var hocUtils_1 = __webpack_require__(14);
+var hocUtils_1 = __webpack_require__(15);
 
 var Cover = styled_components_1.default.div.withConfig({
   displayName: "withEditModeCover__Cover",
   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.5.0 - 12c0447a7"
+  'data-splunk-visualization-version': "25.7.0 - d10a7789b"
 }).withConfig({
   displayName: "withEditModeCover__Blocker",
   componentId: "sc-1gsbnxb-1"
@@ -1511,7 +1611,7 @@ var withEditModeCover = function withEditModeCover(Visualization, disableEditMod
 exports.default = withEditModeCover;
 
 /***/ }),
-/* 43 */
+/* 47 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1521,17 +1621,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var React = __webpack_require__(1);
+var React = __webpack_require__(0);
 
 var colorUtils_1 = __webpack_require__(12);
 
-var variables_1 = __webpack_require__(9);
+var variables_1 = __webpack_require__(10);
 
-var IconPlaceholder_1 = __webpack_require__(27);
+var IconPlaceholder_1 = __webpack_require__(31);
 
 var VizBehavior_1 = __webpack_require__(6);
 
-var hocUtils_1 = __webpack_require__(14);
+var hocUtils_1 = __webpack_require__(15);
 
 var withPlaceholder = function withPlaceholder(Visualization) {
   var useIconPlaceholder = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : IconPlaceholder_1.shouldShowIconPlaceholder;
@@ -1575,22 +1675,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 */
+/* 52 */,
+/* 53 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1620,21 +1720,17 @@ var background = function background(_ref) {
 exports.default = background;
 
 /***/ }),
-/* 50 */,
-/* 51 */
-/***/ (function(module, exports) {
-
-module.exports = require("@babel/runtime/helpers/slicedToArray");
-
-/***/ }),
-/* 52 */,
-/* 53 */,
 /* 54 */,
 /* 55 */,
 /* 56 */,
 /* 57 */,
 /* 58 */,
-/* 59 */,
+/* 59 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/themes");
+
+/***/ }),
 /* 60 */,
 /* 61 */,
 /* 62 */,
@@ -1644,12 +1740,7 @@ module.exports = require("@babel/runtime/helpers/slicedToArray");
 /* 66 */,
 /* 67 */,
 /* 68 */,
-/* 69 */
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/themes");
-
-/***/ }),
+/* 69 */,
 /* 70 */,
 /* 71 */,
 /* 72 */,
@@ -1662,31 +1753,31 @@ module.exports = require("@splunk/themes");
 /* 79 */,
 /* 80 */,
 /* 81 */,
-/* 82 */
+/* 82 */,
+/* 83 */,
+/* 84 */,
+/* 85 */,
+/* 86 */,
+/* 87 */,
+/* 88 */
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/dataSourceUtils");
+module.exports = require("@babel/runtime/helpers/typeof");
 
 /***/ }),
-/* 83 */
+/* 89 */
 /***/ (function(module, exports) {
 
-module.exports = require("@babel/runtime/helpers/typeof");
+module.exports = require("@splunk/react-ui/Popover");
 
 /***/ }),
-/* 84 */
+/* 90 */,
+/* 91 */
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/react-ui/Popover");
+module.exports = require("@splunk/visualizations-shared/dataSourceUtils");
 
 /***/ }),
-/* 85 */,
-/* 86 */,
-/* 87 */,
-/* 88 */,
-/* 89 */,
-/* 90 */,
-/* 91 */,
 /* 92 */,
 /* 93 */,
 /* 94 */,
@@ -1704,89 +1795,466 @@ module.exports = require("@splunk/react-ui/Popover");
 /* 106 */,
 /* 107 */,
 /* 108 */,
-/* 109 */
+/* 109 */,
+/* 110 */,
+/* 111 */,
+/* 112 */,
+/* 113 */,
+/* 114 */,
+/* 115 */,
+/* 116 */,
+/* 117 */,
+/* 118 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Menu");
 
 /***/ }),
-/* 110 */
+/* 119 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
+var _typeof = __webpack_require__(88);
+
+var _slicedToArray = __webpack_require__(17);
+
+var _toConsumableArray = __webpack_require__(7);
+
+var _defineProperty = __webpack_require__(8);
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.convertToArrOfObjects = void 0; // TODO: utilize this fn in ParallelCoordinates
+exports.truncateString = exports.getCustomTimeInterval = exports.getPredefinedTimeInterval = exports.getEpochTime = exports.generateTokenReplacementMap = exports.replaceTokens = exports.mergeFieldActions = exports.mergeEventActions = exports.getFieldSummaryMapping = exports.convertToPayloadFormat = void 0;
 
-var convertToArrOfObjects = function convertToArrOfObjects(columns, fields) {
-  if (!columns || !columns[0].length) return [];
-  var data = [];
+var time_1 = __webpack_require__(200);
 
-  var _loop = function _loop(i) {
-    var newObj = {};
-    fields.forEach(function (field, index) {
-      var fieldName = typeof field === 'string' ? field : field.name;
+var lodash_1 = __webpack_require__(3);
 
-      if (columns[index][i] === '') {
-        newObj[fieldName] = null;
-      } else {
-        newObj[fieldName] = columns[index][i];
-      }
-    });
-    data.push(newObj);
-  };
+var dataUtils_1 = __webpack_require__(120); // util to convert a field-value map into an object with row.<fieldname>.value keys for payloads
 
-  for (var i = 0; i < columns[0].length; i += 1) {
-    _loop(i);
-  }
 
-  return data;
+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.convertToArrOfObjects = convertToArrOfObjects;
-
-/***/ }),
-/* 111 */
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/react-ui/Markdown");
+exports.convertToPayloadFormat = convertToPayloadFormat;
 
-/***/ }),
-/* 112 */,
-/* 113 */,
-/* 114 */,
-/* 115 */,
-/* 116 */,
-/* 117 */,
-/* 118 */,
-/* 119 */,
-/* 120 */,
-/* 121 */,
-/* 122 */,
-/* 123 */,
-/* 124 */,
-/* 125 */,
-/* 126 */,
-/* 127 */,
-/* 128 */,
-/* 129 */,
-/* 130 */,
-/* 131 */,
-/* 132 */
-/***/ (function(module, exports, __webpack_require__) {
+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
 
-"use strict";
+  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;
+};
 
-var __rest = this && this.__rest || function (s, e) {
-  var t = {};
+exports.getFieldSummaryMapping = getFieldSummaryMapping;
+/**
+ * Helper to merge event actions into one array of event actions.
+ * @method mergeEventActions
+ * @param {EventAction[]} eventActions1
+ * @param {EventAction[]} eventActions2
+ * @returns {EventAction[]} merged event actions
+ */
 
-  for (var p in s) {
-    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-  }
+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.
+ *
+ * Actions under the `default` key should be merged into actions under the `*` key.
+ * Although the `default` key is supported to indicate actions that apply to all fields,
+ * we are working towards deprecating the `default` key in favour of the `*` key.
+ * As of 5.0.0, the react-events-viewer only supports the `*` key to indicate common field actions.
+ * @method mergeFieldActions
+ * @param {FieldActions} fieldActions1
+ * @param {FieldActions} fieldActions2
+ * @returns {FieldActions} merged field actions
+ */
+
+var mergeFieldActions = function mergeFieldActions(fieldActions1, fieldActions2) {
+  var fieldActions1WithoutDefault = Object.assign({}, fieldActions1);
+
+  if ('default' in fieldActions1WithoutDefault) {
+    fieldActions1WithoutDefault['*'] = '*' in fieldActions1WithoutDefault ? [].concat(_toConsumableArray(fieldActions1WithoutDefault['*']), _toConsumableArray(fieldActions1WithoutDefault.default)) : fieldActions1WithoutDefault.default;
+    delete fieldActions1WithoutDefault.default;
+  }
+
+  var fieldActions2WithoutDefault = Object.assign({}, fieldActions2);
+
+  if ('default' in fieldActions2WithoutDefault) {
+    fieldActions2WithoutDefault['*'] = '*' in fieldActions2WithoutDefault ? [].concat(_toConsumableArray(fieldActions2WithoutDefault['*']), _toConsumableArray(fieldActions2WithoutDefault.default)) : fieldActions2WithoutDefault.default;
+    delete fieldActions2WithoutDefault.default;
+  }
+
+  return lodash_1.mergeWith(fieldActions1WithoutDefault, fieldActions2WithoutDefault, 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];
+
+    // handling of _raw and _time fields matches SXML behaviour. Implementation is based on fieldSubstitute() from splunkcore-web-ui
+    var replacedValue;
+
+    if (fieldName === '_time' && typeof fieldValue === 'string') {
+      var splunkTime = time_1.getISOWithTimeZone(fieldValue);
+      var epochTime = exports.getEpochTime(splunkTime);
+      replacedValue = Math.floor(epochTime).toString();
+    } else if (fieldName === '_raw' && _typeof(fieldValue) === 'object') {
+      var rawFieldValue = Array.isArray(fieldValue) ? fieldValue[0] : fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.value;
+      replacedValue = rawFieldValue ? rawFieldValue.toString() : '';
+    } else {
+      replacedValue = typeof fieldValue === 'string' ? fieldValue : JSON.stringify(fieldValue);
+    }
+
+    tokenReplacementMap.fields["".concat(fieldName)] = replacedValue;
+  });
+  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;
+/**
+ * Helper to truncate strings to a maximum length.
+ * The string is broken up into the leading characters, followed by ellipsis and the trailing characters.
+ * @method truncateString
+ * @param {string} stringToTruncate
+ * @returns {string} truncated string
+ */
+
+var truncateString = function truncateString(stringToTruncate) {
+  var MAX_LENGTH = 100;
+  var LEAD_AND_TRAIL_LENGTH = 50;
+  var truncatedString = stringToTruncate;
+
+  if (truncatedString.length > MAX_LENGTH) {
+    truncatedString = "".concat(truncatedString.substring(0, LEAD_AND_TRAIL_LENGTH), "...").concat(truncatedString.substring(truncatedString.length - LEAD_AND_TRAIL_LENGTH));
+  }
+
+  return truncatedString;
+};
+
+exports.truncateString = truncateString;
+
+/***/ }),
+/* 120 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.convertToArrOfObjects = void 0; // TODO: utilize this fn in ParallelCoordinates
+
+var convertToArrOfObjects = function convertToArrOfObjects(columns, fields) {
+  if (!columns || !columns[0].length) return [];
+  var data = [];
+
+  var _loop = function _loop(i) {
+    var newObj = {};
+    fields.forEach(function (field, index) {
+      var fieldName = typeof field === 'string' ? field : field.name;
+
+      if (columns[index][i] === '') {
+        newObj[fieldName] = null;
+      } else {
+        newObj[fieldName] = columns[index][i];
+      }
+    });
+    data.push(newObj);
+  };
+
+  for (var i = 0; i < columns[0].length; i += 1) {
+    _loop(i);
+  }
+
+  return data;
+};
+
+exports.convertToArrOfObjects = convertToArrOfObjects;
+
+/***/ }),
+/* 121 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-ui/Markdown");
+
+/***/ }),
+/* 122 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-ui/Button");
+
+/***/ }),
+/* 123 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-ui/Message");
+
+/***/ }),
+/* 124 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-ui/Heading");
+
+/***/ }),
+/* 125 */,
+/* 126 */,
+/* 127 */,
+/* 128 */,
+/* 129 */,
+/* 130 */,
+/* 131 */,
+/* 132 */,
+/* 133 */,
+/* 134 */,
+/* 135 */,
+/* 136 */,
+/* 137 */,
+/* 138 */,
+/* 139 */,
+/* 140 */,
+/* 141 */,
+/* 142 */,
+/* 143 */,
+/* 144 */,
+/* 145 */,
+/* 146 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
 
   if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
     if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
@@ -1797,23 +2265,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__(91);
 
-var withDashboardViz_1 = __webpack_require__(32);
+var withDashboardViz_1 = __webpack_require__(36);
 
-var constants_1 = __webpack_require__(133);
+var constants_1 = __webpack_require__(147);
 
-var config_1 = __webpack_require__(184);
+var config_1 = __webpack_require__(197);
 
 exports.config = config_1.default;
 
-var PureEvents_1 = __webpack_require__(185);
+var PureEvents_1 = __webpack_require__(198);
 
 exports.PureEvents = PureEvents_1.default;
+
+var EventUtils_1 = __webpack_require__(119);
+
+Object.defineProperty(exports, "replaceTokens", {
+  enumerable: true,
+  get: function get() {
+    return EventUtils_1.replaceTokens;
+  }
+});
 /**
  * @method showPlaceHolderIcon
  * @param {Object} dataSources
@@ -1847,6 +2324,7 @@ var Events = withDashboardViz_1.default({
   ReactViz: PureEvents_1.default,
   vizConfig: config_1.default,
   computeVizProps: exports.computeVizProps,
+  disableEditModeCover: true,
   useIconPlaceholder: function useIconPlaceholder(dataSources) {
     return exports.showPlaceHolderIcon(dataSources);
   }
@@ -1856,7 +2334,7 @@ exports.themes = themes;
 exports.default = Events;
 
 /***/ }),
-/* 133 */
+/* 147 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -1867,7 +2345,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__(152);
+/* harmony import */ var _splunk_datasource_utils_DataSet__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(165);
 /* 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,35 +2794,16 @@ var FIELDSUMMARY_DS_DOC_HUB = {
 };
 
 /***/ }),
-/* 134 */
+/* 148 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualization-context/EventsContext");
 
 /***/ }),
-/* 135 */,
-/* 136 */,
-/* 137 */,
-/* 138 */,
-/* 139 */,
-/* 140 */,
-/* 141 */,
-/* 142 */,
-/* 143 */,
-/* 144 */,
-/* 145 */,
-/* 146 */,
-/* 147 */,
-/* 148 */,
 /* 149 */,
 /* 150 */,
 /* 151 */,
-/* 152 */
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/datasource-utils/DataSet");
-
-/***/ }),
+/* 152 */,
 /* 153 */,
 /* 154 */,
 /* 155 */,
@@ -2357,7 +2816,12 @@ module.exports = require("@splunk/datasource-utils/DataSet");
 /* 162 */,
 /* 163 */,
 /* 164 */,
-/* 165 */,
+/* 165 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/datasource-utils/DataSet");
+
+/***/ }),
 /* 166 */,
 /* 167 */,
 /* 168 */,
@@ -2375,7 +2839,20 @@ module.exports = require("@splunk/datasource-utils/DataSet");
 /* 180 */,
 /* 181 */,
 /* 182 */,
-/* 183 */
+/* 183 */,
+/* 184 */,
+/* 185 */,
+/* 186 */,
+/* 187 */,
+/* 188 */,
+/* 189 */,
+/* 190 */,
+/* 191 */,
+/* 192 */,
+/* 193 */,
+/* 194 */,
+/* 195 */,
+/* 196 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2405,9 +2882,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-__exportStar(__webpack_require__(132), exports);
+__exportStar(__webpack_require__(146), exports);
 
-var Events_1 = __webpack_require__(132);
+var Events_1 = __webpack_require__(146);
 
 Object.defineProperty(exports, "default", {
   enumerable: true,
@@ -2417,7 +2894,7 @@ Object.defineProperty(exports, "default", {
 });
 
 /***/ }),
-/* 184 */
+/* 197 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2427,23 +2904,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__(59);
 
 var i18n_1 = __webpack_require__(2);
 
 var VizBehavior_1 = __webpack_require__(6);
 
-var VizCategory_1 = __webpack_require__(31);
+var VizCategory_1 = __webpack_require__(35);
 
-var configUtils_1 = __webpack_require__(17);
+var configUtils_1 = __webpack_require__(19);
 
-var BackgroundColor_1 = __webpack_require__(49);
+var BackgroundColor_1 = __webpack_require__(53);
 
 var defaultContext = {};
 var dataContract = {
@@ -2479,29 +2956,88 @@ var optionsSchema = {
   },
   eventActions: {
     default: [],
-    description: 'Specify the available actions to take for an event. For example, `[{ "eventType": "eventAction.buildEventType.click", "label": "Build Event Type" }]`. Event types should end in `.click` if utilizing event handlers.',
+    description: 'Specify the available actions to take for an event. For example, `[{ "eventType": "eventAction.buildEventType.click", "label": "Build Event Type" }]`. Event types should end in `.click` if utilizing event handlers. Note that both `eventtypeValues` and `fieldFilters` keys support wildcard values.',
     type: 'array',
     items: {
-      type: 'object',
-      properties: {
-        eventType: {
-          description: 'The distinct type for the event emitted upon event action click.',
-          type: 'string',
-          pattern: '.click$',
-          default: ''
+      anyOf: [{
+        type: 'object',
+        properties: {
+          eventType: {
+            description: 'The distinct type for the event emitted upon event action click.',
+            type: 'string',
+            pattern: '.click$',
+            default: ''
+          },
+          label: {
+            description: 'The label for the event action.',
+            type: 'string',
+            default: ''
+          },
+          eventtypeValues: {
+            description: 'An array of string values that all need to match against the value(s) of the `eventtype` field if it exists in the event in order to be shown.',
+            items: {
+              type: 'string'
+            },
+            type: 'array',
+            default: []
+          },
+          fieldFilters: {
+            description: 'An array of string values for fields that need to exist in the event in order for the given event action in order to be shown.',
+            items: {
+              type: 'string'
+            },
+            type: 'array',
+            default: []
+          }
         },
-        label: {
-          description: 'The label for the event action.',
-          type: 'string',
-          default: ''
-        }
-      },
-      required: ['eventType', 'label']
+        required: ['eventType', 'label']
+      }]
     }
   },
   fieldActions: {
-    description: 'Specify the available actions for this field. For example, `{ default: [{ "eventType": "fieldAction.sharedAction1.click", "label": "Shared Action 1" }] }`. Event types should end in `.click` if utilizing event handlers. Actions under the `default` key are shared across all field dropdowns.',
-    type: 'object'
+    description: 'Specify the available actions for this field. For example, `{ *: [{ "eventType": "fieldAction.sharedAction1.click", "label": "Shared Action 1", "eventtypeValues": ["*"], "fieldFilters": ["*"] }] }`. Event types should end in `.click` if utilizing event handlers. Actions under the `*` key are shared across all field dropdowns. Note that both `eventtypeValues` and `fieldFilters` keys, as well as the field names, support wildcard values.',
+    type: 'object',
+    patternProperties: {
+      '.*': {
+        description: 'Specify the available actions for this field.',
+        type: 'array',
+        items: {
+          anyOf: [{
+            type: 'object',
+            properties: {
+              eventType: {
+                description: 'The distinct type for the event emitted upon event action click.',
+                type: 'string',
+                pattern: '.click$',
+                default: ''
+              },
+              label: {
+                description: 'The label for the event action.',
+                type: 'string',
+                default: ''
+              },
+              eventtypeValues: {
+                description: 'An array of string values that all need to match against the value(s) of the `eventtype` field if it exists in the event in order to be shown.',
+                items: {
+                  type: 'string'
+                },
+                type: 'array',
+                default: []
+              },
+              fieldFilters: {
+                description: 'An array of string values for fields that need to exist in the event in order for the given event action in order to be shown.',
+                items: {
+                  type: 'string'
+                },
+                type: 'array',
+                default: []
+              }
+            },
+            required: ['eventType', 'label']
+          }]
+        }
+      }
+    }
   },
   footerFields: {
     description: 'Specify field(s) that should be displayed in the footer component. Specify one or more fields to display in the footer component. For example, specify ["source", "dest"] to display the source and destination fields.',
@@ -2587,6 +3123,9 @@ var config = {
     },
     '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],
@@ -2596,57 +3135,59 @@ var config = {
 exports.default = configUtils_1.enhanceConfig(config);
 
 /***/ }),
-/* 185 */
+/* 198 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _typeof = __webpack_require__(83);
+var _typeof = __webpack_require__(88);
 
-var _slicedToArray = __webpack_require__(51);
+var _slicedToArray = __webpack_require__(17);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var React = __webpack_require__(1);
+var React = __webpack_require__(0);
 
-var react_1 = __webpack_require__(1);
+var react_1 = __webpack_require__(0);
 
-var T = __webpack_require__(0);
+var T = __webpack_require__(1);
 
-var EventsViewer_1 = __webpack_require__(186);
+var EventsViewer_1 = __webpack_require__(199);
 
 var styled_components_1 = __webpack_require__(4);
 
-var pick_1 = __webpack_require__(21);
+var pick_1 = __webpack_require__(23);
 
-var variables_1 = __webpack_require__(9);
+var variables_1 = __webpack_require__(10);
 
 var colorUtils_1 = __webpack_require__(12);
 
-var style_1 = __webpack_require__(15);
+var style_1 = __webpack_require__(14);
 
-var EventsContext_1 = __webpack_require__(134);
+var EventsContext_1 = __webpack_require__(148);
 
 var lodash_1 = __webpack_require__(3);
 
-var Menu_1 = __webpack_require__(109);
+var Menu_1 = __webpack_require__(118);
 
-var constants_1 = __webpack_require__(133);
+var constants_1 = __webpack_require__(147);
 
 var FixedSizeContainer_1 = __webpack_require__(13);
 
-var EventUtils_1 = __webpack_require__(187);
+var EventUtils_1 = __webpack_require__(119);
+
+var FieldSummaryTooltip_1 = __webpack_require__(201);
 
-var FieldSummaryTooltip_1 = __webpack_require__(188); // Inspired by VizTableContainer in PureTable.tsx
+var TimeControlsPopover_1 = __webpack_require__(203); // Inspired by VizTableContainer in PureTable.tsx
 
 
 var EventsContainer = styled_components_1.default.div.withConfig({
   displayName: "PureEvents__EventsContainer",
   componentId: "iniqvm-0"
-})(["width:", ";height:", ";box-sizing:border-box;padding:", ";display:flex;flex-flow:column nowrap;overflow:hidden;background-color:", ";table[data-test='main-table']{background-color:", ";}"], function (props) {
+})(["width:", ";height:", ";box-sizing:border-box;padding:", ";display:flex;flex-flow:column nowrap;overflow:hidden;background-color:", ";table[data-test='main-table']{background-color:", ";}table[data-test='main-table']{td:nth-child(3){word-break:break-word;}}"], function (props) {
   return lodash_1.isNumber(props.width) ? "".concat(props.width, "px") : props.width;
 }, function (props) {
   return lodash_1.isNumber(props.height) ? "".concat(props.height, "px") : props.height;
@@ -2688,9 +3229,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,
@@ -2731,69 +3275,138 @@ 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]; // An array of objects with eventtypeValues for filtering by eventtype, fieldFilters for filtering by fields,
+  // and eventActionComponent (needs to be Menu.Item and will be rendered inside a Menu component)
+  // 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);
+          label = _ref2.label,
+          _ref2$eventtypeValues = _ref2.eventtypeValues,
+          eventtypeValues = _ref2$eventtypeValues === void 0 ? [] : _ref2$eventtypeValues,
+          _ref2$fieldFilters = _ref2.fieldFilters,
+          fieldFilters = _ref2$fieldFilters === void 0 ? [] : _ref2$fieldFilters;
+
+      var onMenuItemClick = function onMenuItemClick(e, eventActionProps, tokenReplacementMap) {
+        var payload = EventUtils_1.convertToPayloadFormat(eventActionProps.event, {
+          tokenReplacementMap: tokenReplacementMap
+        });
         onEventTrigger({
           originalEvent: e,
           type: eventType,
           payload: payload
         });
-      }; // eslint-disable-next-line react/display-name
-
+      };
 
-      return function (event) {
+      var eventActionComponent = function eventActionComponent(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
+        });
+        var truncatedLabel = EventUtils_1.truncateString(replacedLabel);
         return React.createElement(Menu_1.default.Item, {
-          key: "event-action-".concat(label),
-          onClick: function onClick() {
-            return onMenuItemClick(event);
+          key: "event-action-".concat(truncatedLabel),
+          onClick: function onClick(e) {
+            return onMenuItemClick(e, eventActionProps, tokenReplacementMap);
           }
-        }, label);
+        }, truncatedLabel);
+      };
+
+      return {
+        eventtypeValues: eventtypeValues,
+        fieldFilters: fieldFilters,
+        eventActionComponent: eventActionComponent
       };
     });
-  }, [eventActions]); // creates map of field names to array of menu components to display in its respective dropdown
-  //  in the Actions column
+  }, [eventActions]); // A map of fields, each associated with an array of objects with eventtypeValues for filtering by eventtype,
+  // and fieldActionComponent (needs to be Menu.Item and will be rendered inside a Menu component)
+  // 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,
+            _ref5$eventtypeValues = _ref5.eventtypeValues,
+            eventtypeValues = _ref5$eventtypeValues === void 0 ? [] : _ref5$eventtypeValues;
+
+        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,
             type: eventType,
             payload: payload
           });
-        }; // eslint-disable-next-line react/display-name
-
+        };
 
-        return function (event) {
+        var fieldActionComponent = function fieldActionComponent(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
+          });
+          var truncatedLabel = EventUtils_1.truncateString(replacedLabel);
           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(truncatedLabel),
+            onClick: function onClick(e) {
+              return onMenuItemClick(e, fieldActionProps, tokenReplacementMap);
             }
-          }, label);
+          }, truncatedLabel);
+        };
+
+        return {
+          eventtypeValues: eventtypeValues,
+          fieldActionComponent: fieldActionComponent
         };
       });
-      return currFieldActionsMap;
-    }, {});
+    });
     return fieldActionsMap;
   }, [fieldActions]); // formulate the options object required by the SUI EventsViewer component
 
@@ -2804,15 +3417,21 @@ 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 handleValueClicked = function handleValueClicked(e, _ref5) {
-    var field = _ref5.field,
-        value = _ref5.value;
+  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',
@@ -2823,6 +3442,19 @@ var PureEvents = function PureEvents(props) {
     });
   };
 
+  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;
@@ -2848,7 +3480,8 @@ var PureEvents = function PureEvents(props) {
     dataSources: dataSources,
     onRequestParamsChange: onRequestParamsChange,
     onFieldClicked: handleFieldClicked,
-    onFieldValueClicked: handleValueClicked
+    onFieldValueClicked: handleValueClicked,
+    onTimeClicked: handleTimeClicked
   }), React.createElement(FieldSummaryTooltip_1.default, {
     open: !!fieldSummaryAnchor && !!fieldSummaryField,
     anchor: fieldSummaryAnchor,
@@ -2860,6 +3493,15 @@ var PureEvents = function PureEvents(props) {
     fieldSummaryMap: fieldSummaryMap,
     onActionClicked: handleActionClicked,
     onFieldValueClicked: handleValueClicked
+  }), React.createElement(TimeControlsPopover_1.default, {
+    open: !!timeFieldAnchor,
+    anchor: timeFieldAnchor,
+    time: timeValue,
+    onTimeDrilldown: handleTimeDrilldown,
+    handleTooltipClose: function handleTooltipClose() {
+      setTimeValue(null);
+      setTimeFieldAnchor(null);
+    }
   })));
 };
 
@@ -2874,13 +3516,16 @@ PureEvents.propTypes = {
     // key to identify this event
     eventType: T.string,
     // label for the menu item
-    label: T.string
+    label: T.string,
+    eventtypeValues: T.arrayOf(T.string),
+    fieldFilters: T.arrayOf(T.string)
   })),
   fieldActions: T.objectOf(T.arrayOf(T.shape({
     // key to identify this event
     eventType: T.string,
     // label for the menu item
-    label: T.string
+    label: T.string,
+    eventtypeValues: T.arrayOf(T.string)
   }))),
   showFieldSummary: T.bool,
   footerFields: T.array,
@@ -2907,98 +3552,19 @@ PureEvents.defaultProps = {
 exports.default = FixedSizeContainer_1.default(PureEvents);
 
 /***/ }),
-/* 186 */
+/* 199 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-events-viewer/components/EventsViewer");
 
 /***/ }),
-/* 187 */
-/***/ (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__(110); // 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
- */
+/* 200 */
+/***/ (function(module, exports) {
 
-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;
-  });
-};
-
-exports.mergeFieldActions = mergeFieldActions;
+module.exports = require("@splunk/time-range-utils/time");
 
 /***/ }),
-/* 188 */
+/* 201 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -3008,15 +3574,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var React = __webpack_require__(1);
+var React = __webpack_require__(0);
 
-var react_1 = __webpack_require__(1);
+var react_1 = __webpack_require__(0);
 
-var Popover_1 = __webpack_require__(84);
+var Popover_1 = __webpack_require__(89);
 
-var Markdown_1 = __webpack_require__(111);
+var Markdown_1 = __webpack_require__(121);
 
-var FieldSummary_1 = __webpack_require__(189);
+var FieldSummary_1 = __webpack_require__(202);
 
 var lodash_1 = __webpack_require__(3);
 
@@ -3024,7 +3590,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__(148);
 
 var popoverContainerStyle = {
   padding: '20px',
@@ -3126,11 +3692,305 @@ FieldSummaryTooltip.defaultProps = {
 exports.default = FieldSummaryTooltip;
 
 /***/ }),
-/* 189 */
+/* 202 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-field-summary/components/FieldSummary");
 
+/***/ }),
+/* 203 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var _slicedToArray = __webpack_require__(17);
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var React = __webpack_require__(0);
+
+var Popover_1 = __webpack_require__(89);
+
+var ControlGroup_1 = __webpack_require__(204);
+
+var Button_1 = __webpack_require__(122);
+
+var Text_1 = __webpack_require__(205);
+
+var Message_1 = __webpack_require__(123);
+
+var Select_1 = __webpack_require__(206);
+
+var Link_1 = __webpack_require__(207);
+
+var Heading_1 = __webpack_require__(124);
+
+var lodash_1 = __webpack_require__(3);
+
+var i18n_1 = __webpack_require__(2);
+
+var styled_components_1 = __webpack_require__(4);
+
+var numberUtils_1 = __webpack_require__(30);
+
+var pick_1 = __webpack_require__(23);
+
+var EventUtils_1 = __webpack_require__(119); // 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;
+
+/***/ }),
+/* 204 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-ui/ControlGroup");
+
+/***/ }),
+/* 205 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-ui/Text");
+
+/***/ }),
+/* 206 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-ui/Select");
+
+/***/ }),
+/* 207 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-ui/Link");
+
 /***/ })
 /******/ ]);
 //# sourceMappingURL=Events.js.map