From ce0a4cc9565f1f333ccecf6c7f87a5b673d90d9d Mon Sep 17 00:00:00 2001
From: Ethan3600 <Ethan3600@gmail.com>
Date: Sun, 6 May 2018 14:02:12 -0400
Subject: [PATCH 1/5] Replace foreachProp with fastForEach

This will significantly speed up performance. We only need to transform
our data once after the ajax call now, and allow the fastForEach plugin
to blaze through our data
---
 .../js/lib/knockout/bindings/boostrapExt.js   | 10 ----
 .../js/lib/knockout/bindings/foreach-prop.js  | 30 ------------
 view/adminhtml/web/js/timeline/timeline.js    | 22 +++++++--
 .../web/templates/timeline/timeline.html      | 46 +++++++++----------
 4 files changed, 40 insertions(+), 68 deletions(-)
 delete mode 100644 view/adminhtml/web/js/lib/knockout/bindings/boostrapExt.js
 delete mode 100644 view/adminhtml/web/js/lib/knockout/bindings/foreach-prop.js

diff --git a/view/adminhtml/web/js/lib/knockout/bindings/boostrapExt.js b/view/adminhtml/web/js/lib/knockout/bindings/boostrapExt.js
deleted file mode 100644
index 09216800..00000000
--- a/view/adminhtml/web/js/lib/knockout/bindings/boostrapExt.js
+++ /dev/null
@@ -1,10 +0,0 @@
-define([
-    'underscore',
-    'Magento_Ui/js/lib/knockout/bindings/bootstrap',
-    'require',
-    './foreach-prop'
-], function (_, bootstrap, require) {
-   return _.extend(bootstrap, {
-       foreachProp: require('./foreach-prop')
-   }) 
-});
diff --git a/view/adminhtml/web/js/lib/knockout/bindings/foreach-prop.js b/view/adminhtml/web/js/lib/knockout/bindings/foreach-prop.js
deleted file mode 100644
index 41c65021..00000000
--- a/view/adminhtml/web/js/lib/knockout/bindings/foreach-prop.js
+++ /dev/null
@@ -1,30 +0,0 @@
-define([
-    'ko',
-    'Magento_Ui/js/lib/knockout/template/renderer'
-], function (ko, renderer) {
-    'use strict';
-
-        ko.bindingHandlers.foreachProp = {
-            transformObject: function (obj) {
-                var properties = [];
-                ko.utils.objectForEach(obj, function (key, value) {
-                    properties.push({ key: key, value: value });
-                });
-                return properties;
-            },
-
-            /**
-             * Binding init callback.
-             */
-            init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
-                var properties = ko.pureComputed(function () {
-                    var obj = ko.utils.unwrapObservable(valueAccessor());
-                    return ko.bindingHandlers.foreachProp.transformObject(obj);
-                });
-                ko.applyBindingsToNode(element, { foreach: properties }, bindingContext);
-                return { controlsDescendantBindings: true };
-            }
-        };
-
-    renderer.addAttribute('foreachProp');
-});
diff --git a/view/adminhtml/web/js/timeline/timeline.js b/view/adminhtml/web/js/timeline/timeline.js
index 7033c87a..ad6700c2 100644
--- a/view/adminhtml/web/js/timeline/timeline.js
+++ b/view/adminhtml/web/js/timeline/timeline.js
@@ -1,14 +1,14 @@
 define([
     'underscore',
     'jquery',
+    'ko',
     'uiLayout',
     'Magento_Ui/js/lib/spinner',
     'rjsResolver',
     'uiRegistry',
     'moment',
     'uiCollection',
-    '../lib/knockout/bindings/boostrapExt',
-], function (_, $, layout, loader, resolver, registry, moment, Collection) {
+], function (_, $, ko, layout, loader, resolver, registry, moment, Collection) {
     'use strict';
 
     return Collection.extend({
@@ -31,6 +31,7 @@ define([
             step: 2,
             width: 0,
             now: 0,
+            transformedRows: [],
             tracks: {
                 rows: true,
                 range: true,
@@ -57,7 +58,10 @@ define([
          * @returns {Listing} Chainable.
          */
         initObservable: function () {
-            this._super();
+            this._super()
+                // fastForEach only takes observables
+                // we must NOT use ES5 get/set accessor descriptors
+                .observe('transformedRows');
             return this;
         },
 
@@ -250,6 +254,7 @@ define([
             this.updateRange();
             this.updateTimelineWidth();
             this.setNow();
+            this.transformObject(this.rows);
         },
 
         reloader: function () {
@@ -262,6 +267,17 @@ define([
             });
         },
 
+        transformObject: function (obj) {
+            var properties = [];
+            ko.utils.objectForEach(obj, function (key, value) {
+                properties.push({ key: key, value: value });
+            });
+            // we don't need the range key, which is stored
+            // in the first element
+            properties.shift();
+            this.transformedRows(properties);
+        },
+
         /**
          * Handles dragging functionality on the timeline window
          */
diff --git a/view/adminhtml/web/templates/timeline/timeline.html b/view/adminhtml/web/templates/timeline/timeline.html
index eea4d369..5d10df63 100644
--- a/view/adminhtml/web/templates/timeline/timeline.html
+++ b/view/adminhtml/web/templates/timeline/timeline.html
@@ -18,15 +18,13 @@
                     <span data-bind="text: range.timeframe"/>
                 </div>
             </div>
-            <div foreachProp="rows">
-                <!-- ko if: $index() != 0 -->
+            <fastForEach args="data: transformedRows">
                 <div class="row">
                     <div class="job-code">
                         <text args="$data.key" />
                     </div>
                 </div>
-                <!-- /ko -->
-            </div>
+            </fastForEach>
         </div>
         <div class="main-content">
             <div class="timeline-container" afterRender="afterTimelineRender">
@@ -46,30 +44,28 @@
                             </div>
                         </div>
                     </div>
-                    <div foreachProp="rows">
-                        <!-- ko if: $index() != 0 -->
-                            <div class="row">
-                                <div data-bind="attr: { class: 'cjm-timeline cjm-timeline_' + $data.key }">
-                                    <div data-bind="foreach: $data.value">
-                                        <div data-bind="attr: { 'data-tooltip-search-scope': 'search-scope-' + $data.schedule_id }">
-                                            <div data-bind="
-                                            attr: { 
-                                                class: 'cron-job ' + $data.status,
-                                                id: $data.schedule_id,
-                                                'data-tooltip-trigger': 'update-' + $data.schedule_id,
-                                            },
-                                            style: {
-                                                width: $parentContext.$parent.getCronWidth($data) + 'px',
-                                                left: $parentContext.$parent.getOffset($data)
-                                            }">
-                                                <div render="$parentContext.$parent.detailsTmpl"/> 
-                                            </div>
+                    <fastForEach args="data: transformedRows">
+                        <div class="row">
+                            <div data-bind="attr: { class: 'cjm-timeline cjm-timeline_' + $data.key }">
+                                <fastForEach args="data: $data.value">
+                                    <div data-bind="attr: { 'data-tooltip-search-scope': 'search-scope-' + $data.schedule_id }">
+                                        <div data-bind="
+                                        attr: { 
+                                            class: 'cron-job ' + $data.status,
+                                            id: $data.schedule_id,
+                                            'data-tooltip-trigger': 'update-' + $data.schedule_id,
+                                        },
+                                        style: {
+                                            width: $parentContext.$parent.getCronWidth($data) + 'px',
+                                            left: $parentContext.$parent.getOffset($data)
+                                        }">
+                                            <div render="$parentContext.$parent.detailsTmpl"/> 
                                         </div>
                                     </div>
-                                </div>
+                                </fastForEach>
                             </div>
-                        <!-- /ko -->
-                    </div>
+                        </div>
+                    </fastForEach>
                 </div>
             </div>
         </div>

From e994fb8a92edc888adb1095c932ec5966f585a25 Mon Sep 17 00:00:00 2001
From: Ethan3600 <Ethan3600@gmail.com>
Date: Sun, 6 May 2018 16:10:46 -0400
Subject: [PATCH 2/5] Remove async template calls from timeline

This was slowing us down exponentially because it re-triggers
subscribers each time we call it
---
 .../web/templates/timeline/details.html       | 55 ------------------
 .../web/templates/timeline/timeline.html      | 57 ++++++++++++++++++-
 2 files changed, 54 insertions(+), 58 deletions(-)
 delete mode 100644 view/adminhtml/web/templates/timeline/details.html

diff --git a/view/adminhtml/web/templates/timeline/details.html b/view/adminhtml/web/templates/timeline/details.html
deleted file mode 100644
index 2430bcf9..00000000
--- a/view/adminhtml/web/templates/timeline/details.html
+++ /dev/null
@@ -1,55 +0,0 @@
-<div tooltip=" trigger: '[data-tooltip-trigger=update-' + $data.schedule_id + ']',
-    action: 'hover',
-    delay: 0,
-    position: 'right',
-    step: 5,
-    strict: true,
-    closeButton: false,
-    parentScope: '[data-tooltip-search-scope=search-scope-' + $data.schedule_id + ']'">
-    <div>
-        <div class="data-tooltip-title">
-            <text args="job_code"/>
-        </div>
-        <div class="data-tooltip-content">
-            <dl class="staging-events-summary">
-            	<dt>
-                    <translate args="'Schedule Id'"/>:
-                </dt>
-                <dd>
-                    <text args="schedule_id"/>
-                </dd>
-                <dt>
-                    <translate args="'Status'"/>:
-                </dt>
-                <dd>
-                    <text args="status"/>
-                </dd>
-                <dt>
-                    <translate args="'Created at'"/>:
-                </dt>
-                <dd>
-                    <time text="$parentContext.$parent.formatTime(created_at)"/>
-                </dd>
-                <dt>
-                    <translate args="'Scheduled at'"/>:
-                </dt>
-                <dd>
-                    <time text="$parentContext.$parent.formatTime(scheduled_at) || 'N/A'"/>
-                </dd>
-                <dt>
-                    <translate args="'Executed at'"/>:
-                </dt>
-                <dd>
-                    <time text="$parentContext.$parent.formatTime(executed_at) || 'N/A'"/>
-                </dd>
-                <dt>
-                    <translate args="'Finished at'"/>:
-                </dt>
-                <dd>
-                    <time text="$parentContext.$parent.formatTime(finished_at) || 'N/A'"/>
-                </dd>
-            </dl>
-        </div>
-    </div>
-</div>
-
diff --git a/view/adminhtml/web/templates/timeline/timeline.html b/view/adminhtml/web/templates/timeline/timeline.html
index 5d10df63..2ab6e597 100644
--- a/view/adminhtml/web/templates/timeline/timeline.html
+++ b/view/adminhtml/web/templates/timeline/timeline.html
@@ -48,7 +48,7 @@
                         <div class="row">
                             <div data-bind="attr: { class: 'cjm-timeline cjm-timeline_' + $data.key }">
                                 <fastForEach args="data: $data.value">
-                                    <div data-bind="attr: { 'data-tooltip-search-scope': 'search-scope-' + $data.schedule_id }">
+                                    <div>
                                         <div data-bind="
                                         attr: { 
                                             class: 'cron-job ' + $data.status,
@@ -58,8 +58,59 @@
                                         style: {
                                             width: $parentContext.$parent.getCronWidth($data) + 'px',
                                             left: $parentContext.$parent.getOffset($data)
-                                        }">
-                                            <div render="$parentContext.$parent.detailsTmpl"/> 
+                                        }"/>
+                                        <div tooltip=" trigger: '[data-tooltip-trigger=update-' + schedule_id + ']',
+                                            action: 'hover',
+                                            delay: 0,
+                                            position: 'right',
+                                            step: 5,
+                                            strict: true,
+                                            closeButton: false">
+                                            <div>
+                                                <div class="data-tooltip-title">
+                                                    <text args="job_code"/>
+                                                </div>
+                                                <div class="data-tooltip-content">
+                                                    <dl class="staging-events-summary">
+                                                        <dt>
+                                                            <translate args="'Schedule Id'"/>:
+                                                        </dt>
+                                                        <dd>
+                                                            <text args="schedule_id"/>
+                                                        </dd>
+                                                        <dt>
+                                                            <translate args="'Status'"/>:
+                                                        </dt>
+                                                        <dd>
+                                                            <text args="status"/>
+                                                        </dd>
+                                                        <dt>
+                                                            <translate args="'Created at'"/>:
+                                                        </dt>
+                                                        <dd>
+                                                            <time text="$parentContext.$parent.formatTime(created_at)"/>
+                                                        </dd>
+                                                        <dt>
+                                                            <translate args="'Scheduled at'"/>:
+                                                        </dt>
+                                                        <dd>
+                                                            <time text="$parentContext.$parent.formatTime(scheduled_at) || 'N/A'"/>
+                                                        </dd>
+                                                        <dt>
+                                                            <translate args="'Executed at'"/>:
+                                                        </dt>
+                                                        <dd>
+                                                            <time text="$parentContext.$parent.formatTime(executed_at) || 'N/A'"/>
+                                                        </dd>
+                                                        <dt>
+                                                            <translate args="'Finished at'"/>:
+                                                        </dt>
+                                                        <dd>
+                                                            <time text="$parentContext.$parent.formatTime(finished_at) || 'N/A'"/>
+                                                        </dd>
+                                                    </dl>
+                                                </div>
+                                            </div>
                                         </div>
                                     </div>
                                 </fastForEach>

From 16ad4ae86279427d70db8f3f4d55a4c369a7228e Mon Sep 17 00:00:00 2001
From: Ethan3600 <Ethan3600@gmail.com>
Date: Sun, 6 May 2018 18:23:13 -0400
Subject: [PATCH 3/5] Refactor cron width logic

---
 .../web/css/source/module/_timeline.less          |  1 +
 view/adminhtml/web/js/timeline/timeline.js        | 15 +++++++++------
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/view/adminhtml/web/css/source/module/_timeline.less b/view/adminhtml/web/css/source/module/_timeline.less
index 0ab841ed..5df1834a 100644
--- a/view/adminhtml/web/css/source/module/_timeline.less
+++ b/view/adminhtml/web/css/source/module/_timeline.less
@@ -148,6 +148,7 @@
 
         &.running {
             background-color: @status--running;
+            z-index: 0;
         }
 
         &.error {
diff --git a/view/adminhtml/web/js/timeline/timeline.js b/view/adminhtml/web/js/timeline/timeline.js
index ad6700c2..4dfdec27 100644
--- a/view/adminhtml/web/js/timeline/timeline.js
+++ b/view/adminhtml/web/js/timeline/timeline.js
@@ -93,16 +93,19 @@ define([
 
         getCronWidth: function (job) {
             var minWidth = 3,
-                start = moment.utc(job.executed_at).local(),
-                end = moment.utc(job.finished_at).local(),
+                timezoneOffset = new Date().getTimezoneOffset() * 60,
+                startTime = job.executed_at || job.scheduled_at || job.created_at,
+                start = new Date(startTime).getTime() / 1000,
+                end = new Date(job.finished_at).getTime() / 1000,
+                now = (new Date().getTime() / 1000) + timezoneOffset,
                 duration = 0;
 
-            if (job.finished_at == null && job.status == 'running') {
-                duration = moment().diff(start, 'seconds') / this.scale;
+            if (job.finished_at == null && job.status == 'running' && start != 0) {
+                duration = (now - start) / this.scale;
             }
 
-            if (end.isValid()) {
-               duration = end.diff(start, 'seconds') / this.scale;
+            if (moment(end).isValid() && job.executed_at != null) {
+               duration = (end - start) / this.scale;
             }
             duration = Math.round(duration);
             duration = duration > minWidth ? duration : minWidth;

From 3bc6fe1e18d7ab40b595a2ee0c364c198be1e27b Mon Sep 17 00:00:00 2001
From: Ethan3600 <Ethan3600@gmail.com>
Date: Sun, 13 May 2018 16:34:37 -0400
Subject: [PATCH 4/5] Remove strict mode for tooltip

---
 view/adminhtml/web/templates/timeline/timeline.html | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/view/adminhtml/web/templates/timeline/timeline.html b/view/adminhtml/web/templates/timeline/timeline.html
index 2ab6e597..0acc56d8 100644
--- a/view/adminhtml/web/templates/timeline/timeline.html
+++ b/view/adminhtml/web/templates/timeline/timeline.html
@@ -62,9 +62,7 @@
                                         <div tooltip=" trigger: '[data-tooltip-trigger=update-' + schedule_id + ']',
                                             action: 'hover',
                                             delay: 0,
-                                            position: 'right',
-                                            step: 5,
-                                            strict: true,
+                                            strict: false,
                                             closeButton: false">
                                             <div>
                                                 <div class="data-tooltip-title">

From 196595875b53ecb5d3d90fd677614155e523b690 Mon Sep 17 00:00:00 2001
From: Ethan3600 <Ethan3600@gmail.com>
Date: Sun, 13 May 2018 22:41:19 -0400
Subject: [PATCH 5/5] Bump semver

---
 etc/module.xml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/etc/module.xml b/etc/module.xml
index 4b5c467a..e55ff253 100755
--- a/etc/module.xml
+++ b/etc/module.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0"?>
 <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
-    <module name="EthanYehuda_CronjobManager" setup_version="1.6.0" >
+    <module name="EthanYehuda_CronjobManager" setup_version="1.6.1" >
     	<sequence>
             <module name="Magento_Cron"/>
         </sequence>