[ML] Fix for wizard card layout when cloning (elastic#21403) (elastic…

…#21412)
snide · Jul 30, 2018 · 9af7440 · 9af7440
1 parent ac1f823
commit 9af7440
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 152 deletions.
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list/components/job_actions/management.js b/x-pack/plugins/ml/public/jobs/jobs_list/components/job_actions/management.js
@@ -62,6 +62,7 @@ export function actionsMenuContent(showEditJobFlyout, showDeleteJobModal, showSt
       enabled: () => (canCreateJob),
       onClick: (item) => {
         cloneJob(item.id);
+        closeMenu(true);
       }
     }, {
       name: 'Edit job',

diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/components/general_job_details/styles/main.less b/x-pack/plugins/ml/public/jobs/new_job/simple/components/general_job_details/styles/main.less
@@ -16,3 +16,93 @@
     }
   }
 }
+
+.charts-container {
+  transition: transform 0.2s ;
+  .chart-list-panel {
+    margin: 0px;
+    padding: 10px;
+    overflow: hidden;
+
+  }
+
+  .card {
+    background-color: #FFFFFF;
+    border-radius: 3px;
+    border: 1px solid #CCCCCC;
+    z-index: 10;
+    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
+
+    .card-title {
+      color: steelblue;
+      font-weight: bold;
+      margin-left: 10px;
+      margin-top: 1px;
+      margin-bottom: 5px;
+      border-bottom: 1px solid #CCCCCC;
+      padding-bottom: 5px;
+    }
+    .chart {
+      margin: 0px 10px;
+    }
+  }
+
+  .card-behind {
+    position: absolute;
+    float: left;
+    height: 100px;
+    display: auto;
+    z-index: 1;
+    opacity: 0;
+    transition: opacity 0.5s ;
+    width: 100px;
+
+    label {
+      margin-left: 10px;
+    }
+  }
+  .card-behind-0 {
+    width: calc(~"100% - 32px");
+    margin-left: 0px;
+  }
+  .card-behind-1 {
+    width: calc(~"100% - 44px");
+    margin-left: 5px;
+  }
+  .card-behind-2 {
+    width: calc(~"100% - 53px");
+    margin-left: 9.5px;
+  }
+  .card-behind-3 {
+    width: calc(~"100% - 61px");
+    margin-left: 13.5px;
+  }
+  .card-behind-4 {
+    width: calc(~"100% - 68px");
+    margin-left: 17px;
+  }
+  .card-behind-5 {
+    width: calc(~"100% - 74px");
+    margin-left: 20px;
+  }
+  .card-behind-6 {
+    width: calc(~"100% - 79px");
+    margin-left: 22.5px;
+  }
+  .card-behind-7 {
+    width: calc(~"100% - 83px");
+    margin-left: 24.5px;
+  }
+  .card-behind-8 {
+    width: calc(~"100% - 86px");
+    margin-left: 26px;
+  }
+  .card-behind-9 {
+    width: calc(~"100% - 88px");
+    margin-left: 27px;
+  }
+
+  .card-front {
+    position: relative;
+  }
+}
diff --git a/...ck/plugins/ml/public/jobs/new_job/simple/multi_metric/create_job/create_job_controller.js b/...ck/plugins/ml/public/jobs/new_job/simple/multi_metric/create_job/create_job_controller.js
@@ -369,7 +369,6 @@ module
       const $frontCard = angular.element('.multi-metric-job-container .detector-container .card-front');
       $frontCard.addClass('card');
       $frontCard.find('.card-title').text(labels[0]);
-      const w = $frontCard.width();
 
       let marginTop = (labels.length > 1) ? 54 : 0;
       $frontCard.css('margin-top', marginTop);
@@ -385,33 +384,23 @@ module
       angular.element('.card-behind').remove();
 
       for (let i = 0; i < labels.length; i++) {
-        let el = '<div class="card card-behind"><div class="card-title">';
+        let el = `<div class="card card-behind card-behind-${i}"><div class="card-title">`;
         el += mlEscape(labels[i]);
         el += '</div><label class="kuiFormLabel">';
         el += mlEscape(backCardTitle);
         el += '</label></div>';
 
         const $backCard = angular.element(el);
-        $backCard.css('width', w);
-        $backCard.css('height', 100);
-        $backCard.css('display', 'auto');
         $backCard.css('z-index', (9 - i));
 
         $backCard.insertBefore($frontCard);
       }
 
       const cardsBehind = angular.element('.card-behind');
-      let marginLeft = 0;
-      let backWidth = w;
 
       for (let i = 0; i < cardsBehind.length; i++) {
         cardsBehind[i].style.marginTop = marginTop + 'px';
-        cardsBehind[i].style.marginLeft = marginLeft + 'px';
-        cardsBehind[i].style.width = backWidth + 'px';
-
         marginTop -= (10 - (i * (10 / labels.length))) * (10 / labels.length);
-        marginLeft += (5 - (i / 2));
-        backWidth -= (5 - (i / 2)) * 2;
       }
       let i = 0;
       let then = window.performance.now();
@@ -659,21 +648,6 @@ module
         });
     };
 
-    // resize the spilt cards on page resize.
-    // when the job starts the 'Analysis running' label appearing can cause a scroll bar to appear
-    // which will cause the split cards to look odd
-    // TODO - all charts should resize correctly on page resize
-    function resize() {
-      if ($scope.formConfig.splitField !== undefined) {
-        let width = angular.element('.card-front').width();
-        const cardsBehind = angular.element('.card-behind');
-        for (let i = 0; i < cardsBehind.length; i++) {
-          cardsBehind[i].style.width = width + 'px';
-          width -= (5 - (i / 2)) * 2;
-        }
-      }
-    }
-
     $scope.setFullTimeRange = function () {
       return mlFullTimeRangeSelectorService.setFullTimeRange($scope.ui.indexPattern, $scope.formConfig.combinedQuery);
     };
@@ -694,10 +668,6 @@ module
       }
     });
 
-    angular.element(window).resize(() => {
-      resize();
-    });
-
     $scope.$on('$destroy', () => {
       globalForceStop = true;
       angular.element(window).off('resize');

diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/multi_metric/create_job/styles/main.less b/x-pack/plugins/ml/public/jobs/new_job/simple/multi_metric/create_job/styles/main.less
@@ -93,55 +93,6 @@
     height: 46px;
   }
 
-
-  .charts-container {
-    transition: transform 0.2s ;
-    .chart-list-panel {
-      margin: 0px;
-      padding: 10px;
-      overflow: hidden;
-
-    }
-
-    .card {
-      background-color: #FFFFFF;
-      border-radius: 3px;
-      border: 1px solid #CCCCCC;
-      z-index: 10;
-      box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
-
-      .card-title {
-        color: steelblue;
-        font-weight: bold;
-        margin-left: 10px;
-        margin-top: 1px;
-        margin-bottom: 5px;
-        border-bottom: 1px solid #CCCCCC;
-        padding-bottom: 5px;
-      }
-      .chart {
-        margin: 0px 10px;
-      }
-    }
-
-    .card-behind {
-      position: absolute;
-      float: left;
-      height: 100px;
-      z-index: 1;
-      opacity: 0;
-      transition: opacity 0.5s ;
-
-      label {
-        margin-left: 10px;
-      }
-    }
-
-    .card-front {
-      position: relative;
-    }
-  }
-
   div.validation-error {
     color: #fe5050;
     font-size: 12px;

diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/population/create_job/create_job_controller.js b/x-pack/plugins/ml/public/jobs/new_job/simple/population/create_job/create_job_controller.js
@@ -374,7 +374,6 @@ module
       const $frontCard = angular.element(`.population-job-container .detector-container.card-${fieldIndex} .card-front`);
       $frontCard.addClass('card');
       $frontCard.find('.card-title').text(labels[0]);
-      const w = $frontCard.width();
 
       let marginTop = (labels.length > 1) ? 54 : 0;
       $frontCard.css('margin-top', marginTop);
@@ -390,33 +389,24 @@ module
       angular.element(`.detector-container.card-${fieldIndex} .card-behind`).remove();
 
       for (let i = 0; i < labels.length; i++) {
-        let el = '<div class="card card-behind"><div class="card-title">';
+        let el = `<div class="card card-behind card-behind-${i}"><div class="card-title">`;
         el += mlEscape(labels[i]);
         el += '</div><label class="kuiFormLabel">';
         el += mlEscape(backCardTitle);
         el += '</label></div>';
 
         const $backCard = angular.element(el);
-        $backCard.css('width', w);
-        $backCard.css('height', 100);
-        $backCard.css('display', 'auto');
         $backCard.css('z-index', (9 - i));
 
         $backCard.insertBefore($frontCard);
       }
 
       const cardsBehind = angular.element(`.detector-container.card-${fieldIndex} .card-behind`);
-      let marginLeft = 0;
-      let backWidth = w;
 
       for (let i = 0; i < cardsBehind.length; i++) {
         cardsBehind[i].style.marginTop = marginTop + 'px';
-        cardsBehind[i].style.marginLeft = marginLeft + 'px';
-        cardsBehind[i].style.width = backWidth + 'px';
 
         marginTop -= (10 - (i * (10 / labels.length))) * (10 / labels.length);
-        marginLeft += (5 - (i / 2));
-        backWidth -= (5 - (i / 2)) * 2;
       }
       let i = 0;
       let then = window.performance.now();
@@ -665,21 +655,6 @@ module
       moveToAdvancedJobCreation(job);
     };
 
-    // resize the spilt cards on page resize.
-    // when the job starts the 'Analysis running' label appearing can cause a scroll bar to appear
-    // which will cause the split cards to look odd
-    // TODO - all charts should resize correctly on page resize
-    function resize() {
-      if ($scope.formConfig.splitField !== undefined) {
-        let width = angular.element('.card-front').width();
-        const cardsBehind = angular.element('.card-behind');
-        for (let i = 0; i < cardsBehind.length; i++) {
-          cardsBehind[i].style.width = width + 'px';
-          width -= (5 - (i / 2)) * 2;
-        }
-      }
-    }
-
     $scope.setFullTimeRange = function () {
       return mlFullTimeRangeSelectorService.setFullTimeRange($scope.ui.indexPattern, $scope.formConfig.combinedQuery);
     };
@@ -695,10 +670,6 @@ module
 
     $scope.$listenAndDigestAsync(timefilter, 'fetch', $scope.loadVis);
 
-    angular.element(window).resize(() => {
-      resize();
-    });
-
     $scope.$on('$destroy', () => {
       globalForceStop = true;
       angular.element(window).off('resize');

diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/population/create_job/styles/main.less b/x-pack/plugins/ml/public/jobs/new_job/simple/population/create_job/styles/main.less
@@ -87,12 +87,6 @@
 
 
   .charts-container {
-    transition: transform 0.2s ;
-    .chart-list-panel {
-      margin: 0px;
-      padding: 10px;
-      overflow: hidden;
-    }
 
     .chart {
       label {
@@ -126,47 +120,11 @@
     }
 
     .card {
-      background-color: #FFFFFF;
-      border-radius: 3px;
-      border: 1px solid #CCCCCC;
-      z-index: 10;
-      box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
-
-      .card-title {
-        color: steelblue;
-        font-weight: bold;
-        margin-left: 10px;
-        margin-top: 1px;
-        margin-bottom: 5px;
-        border-bottom: 1px solid #CCCCCC;
-        padding-bottom: 5px;
-      }
-      .chart {
-        margin: 0px 10px;
-      }
-
       label {
         margin-bottom: 10px;
       }
     }
 
-    .card-behind {
-      position: absolute;
-      float: left;
-      height: 100px;
-      z-index: 1;
-      opacity: 0;
-      transition: opacity 0.5s ;
-
-      label {
-        margin-left: 10px;
-      }
-    }
-
-    .card-front {
-      position: relative;
-    }
-
     .split-select {
       width: auto;
     }