add event replay mode

awx/ui/client/features/output/_index.less

@@ -38,6 +38,16 @@
         }
     }
 
+    &-menuIcon--md {
+        font-size: 14px;
+        padding: 10px;
+        cursor: pointer;
+
+        &:hover {
+            color: @at-blue;
+        }
+    }
+
     &-menuIcon--lg {
         font-size: 22px;
         line-height: 12px;

awx/ui/client/features/output/index.controller.js

@@ -412,6 +412,22 @@ function reloadState (params) {
     return $state.transitionTo($state.current, params, { inherit: false, location: 'replace' });
 }
 
+function clear () {
+    stopListening();
+    render.clear();
+
+    followOnce = true;
+    lockFollow = false;
+    lockFrames = false;
+
+    bufferInit();
+    status.init(resource);
+    slide.init(render, resource.events, scroll);
+    status.subscribe(data => { vm.status = data.status; });
+
+    startListening();
+}
+
 function OutputIndexController (
     _$compile_,
     _$q_,
@@ -428,7 +444,8 @@ function OutputIndexController (
     strings,
     $stateParams,
 ) {
-    const { isPanelExpanded } = $stateParams;
+    const { isPanelExpanded, _debug } = $stateParams;
+    const isProcessingFinished = !_debug && _resource_.model.get('event_processing_finished');
 
     $compile = _$compile_;
     $q = _$q_;
@@ -440,7 +457,7 @@ function OutputIndexController (
     render = _render_;
     status = _status_;
     stream = _stream_;
-    slide = resource.model.get('event_processing_finished') ? _page_ : _slide_;
+    slide = isProcessingFinished ? _page_ : _slide_;
 
     vm = this || {};
 
@@ -454,7 +471,7 @@ function OutputIndexController (
     vm.togglePanelExpand = togglePanelExpand;
 
     // Stdout Navigation
-    vm.menu = { last: menuLast, first, down, up };
+    vm.menu = { last: menuLast, first, down, up, clear };
     vm.isMenuExpanded = true;
     vm.isFollowing = false;
     vm.toggleMenuExpand = toggleMenuExpand;
@@ -462,6 +479,7 @@ function OutputIndexController (
     vm.showHostDetails = showHostDetails;
     vm.toggleLineEnabled = resource.model.get('type') === 'job';
     vm.followTooltip = vm.strings.get('tooltips.MENU_LAST');
+    vm.debug = _debug;
 
     render.requestAnimationFrame(() => {
         bufferInit();
@@ -497,7 +515,7 @@ function OutputIndexController (
             }
         });
 
-        if (resource.model.get('event_processing_finished')) {
+        if (isProcessingFinished) {
             followOnce = false;
             lockFollow = true;
             lockFrames = true;
@@ -511,6 +529,10 @@ function OutputIndexController (
             startListening();
         }
 
+        if (_debug) {
+            return render.clear();
+        }
+
         return last();
     });
 }

awx/ui/client/features/output/index.js

@@ -82,7 +82,7 @@ function resolveResource (
         order_by: OUTPUT_ORDER_BY,
     };
 
-    if (job_event_search) { // eslint-disable-line camelcase
+    if (job_event_search) {
         const query = qs.encodeQuerysetObject(qs.decodeArr(job_event_search));
         Object.assign(params, query);
     }
@@ -173,7 +173,7 @@ function JobsRun ($stateRegistry, $filter, strings) {
     const sanitize = $filter('sanitize');
 
     const state = {
-        url: '/:type/:id?job_event_search',
+        url: '/:type/:id?job_event_search?_debug',
         name: 'output',
         parent,
         ncyBreadcrumb,

awx/ui/client/features/output/index.view.html

@@ -46,6 +46,9 @@
                     <i class="at-Stdout-menuIcon--lg fa fa-angle-up"
                         data-placement="top" aw-tool-tip="{{:: vm.strings.get('tooltips.MENU_UP') }}"></i>
                 </div>
+                <div class="pull-right" ng-if="vm.debug" ng-click="vm.menu.clear()">
+                    <i class="at-Stdout-menuIcon--md fa fa-undo"></i>
+                </div>
                 <div class="at-u-clear"></div>
             </div>
             <div class="at-Stdout-container">