[ML] Fix Latest timestamp column in the Anomaly Detection jobs table (#137280) (#137359)

* fix position of the AD and SMV buttons

* show actions column header

* remove unused class

(cherry picked from commit 34b5a2f49a)

Co-authored-by: Dima Arnautov <dmitrii.arnautov@elastic.co>

x-pack/plugins/ml/public/application/jobs/jobs_list/_index.scss

@@ -4,6 +4,5 @@
 @import 'components/job_details/index'; // SASSTODO: Dangerous EUI overwrites
 @import 'components/job_filter_bar/index'; // SASSTODO: Dangerous EUI overwrites
 @import 'components/job_group/index';
-@import 'components/jobs_list/index'; // SASSTODO: Dangerous EUI overwrites
 @import 'components/jobs_list_view/index';
 @import 'components/multi_job_actions/index'; // SASSTODO: Dangerous EUI overwrites

x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_actions/results.js

@@ -75,7 +75,6 @@ export function ResultLinks({ jobs }) {
               href={timeSeriesExplorerLink}
               iconType="visLine"
               aria-label={openJobsInSingleMetricViewerText}
-              className="results-button"
               isDisabled={singleMetricEnabled === false || jobActionsDisabled === true}
               data-test-subj="mlOpenJobsInSingleMetricViewerButton"
             />
@@ -88,7 +87,6 @@ export function ResultLinks({ jobs }) {
             href={anomalyExplorerLink}
             iconType="visTable"
             aria-label={openJobsInAnomalyExplorerText}
-            className="results-button"
             isDisabled={jobActionsDisabled === true}
             data-test-subj="mlOpenJobsInAnomalyExplorerButton"
           />

x-pack/plugins/ml/public/application/jobs/jobs_list/components/jobs_list/_index.scss

@@ -1 +0,0 @@
-@import 'jobs_list';

x-pack/plugins/ml/public/application/jobs/jobs_list/components/jobs_list/_jobs_list.scss

@@ -1,105 +0,0 @@
-// SASSTODO: Rewrite this, can use props for most of it.
-.jobs-list-table > div > .euiTable {
-  & > thead {
-    th {
-      text-align: left;
-      white-space: normal;
-    }
-    th:nth-child(2) {
-      width: 34px;
-    }
-    th:nth-child(3) {
-      width: auto;
-    }
-    th:nth-child(4) {
-      width: 20px;
-    }
-    th:nth-child(5) {
-      width: auto;
-    }
-    th:nth-child(6) {
-      width: 100px;
-    }
-    th:nth-child(7) {
-      width: 85px;
-    }
-    th:nth-child(8) {
-      width: 80px;
-    }
-    th:nth-child(9) {
-      width: 80px;
-    }
-    th:nth-child(10) {
-      width: 150px;
-    }
-    th:nth-child(11) {
-      width: 80px;
-    }
-    th:nth-child(12) {
-      width: 30px;
-      .euiTableCellContent__text {
-        display: none;
-      }
-    }
-  }
-  & > tbody {
-
-    td:nth-child(4) .euiTableCellContent {
-      padding: 0;
-    }
-
-    td:nth-child(10) {
-      white-space: nowrap;
-    }
-
-    .euiTableCellContent {
-      animation: unset;
-    }
-
-    .euiTableRow.euiTableRow-isExpandedRow > td > div > .euiTableCellContent__text {
-      width: 100%;
-      .euiTableRowCell {
-        background-color: inherit;
-      }
-    }
-
-    .euiTableRow > .euiTableRowCell > .euiTableCellContent > .euiTableCellContent__hoverItem {
-      opacity: 1;
-    }
-
-    .euiContextMenuPanel {
-      .euiContextMenuItem {
-        white-space: nowrap;
-      }
-      .euiContextMenuItem:last-child:not(.euiContextMenuItem-isDisabled) {
-        color: $euiColorDanger;
-      }
-    }
-
-    .results-button {
-      margin-right: $euiSizeXS;
-      // SASSTODO: Proper calc
-      width: 18px;
-    }
-
-    .euiContextMenuItem .euiIcon {
-      margin-right: $euiSizeXS;
-    }
-  }
-
-  .job-description {
-    display: inline-block;
-  }
-
-  // SASSTODO: Use eui-textCenter
-  .job-loading-spinner {
-    text-align: center;
-  }
-}
-
-.jobs-list-table.jobs-selected {
-  .results-button {
-    color: $euiColorLightShade;
-    pointer-events: none;
-  }
-}

x-pack/plugins/ml/public/application/jobs/jobs_list/components/jobs_list/jobs_list.js

@@ -137,6 +137,7 @@ export class JobsList extends Component {
             </p>
           </EuiScreenReaderOnly>
         ),
+        'data-test-subj': 'mlJobListColumnExpand',
         render: (item) => (
           <EuiButtonIcon
             onClick={() => this.toggleRow(item)}
@@ -195,6 +196,7 @@ export class JobsList extends Component {
       },
       {
         field: 'auditMessage',
+        'data-test-subj': 'mlJobListColumnIcons',
         name: (
           <EuiScreenReaderOnly>
             <p>
@@ -209,6 +211,7 @@ export class JobsList extends Component {
       },
       {
         field: 'alertingRules',
+        'data-test-subj': 'mlJobListColumnAlertingRuleIndicator',
         name: (
           <EuiScreenReaderOnly>
             <p>
@@ -292,13 +295,6 @@ export class JobsList extends Component {
         truncateText: false,
         width: '8%',
       },
-      {
-        name: i18n.translate('xpack.ml.jobsList.actionsLabel', {
-          defaultMessage: 'Actions',
-        }),
-        render: (item) => <ResultLinks jobs={[item]} />,
-        width: '8%',
-      },
       {
         name: i18n.translate('xpack.ml.jobsList.latestTimestampLabel', {
           defaultMessage: 'Latest timestamp',
@@ -328,6 +324,13 @@ export class JobsList extends Component {
             </p>
           </EuiScreenReaderOnly>
         ),
+        render: (item) => <ResultLinks jobs={[item]} />,
+        width: '64px',
+      },
+      {
+        name: i18n.translate('xpack.ml.jobsList.actionsLabel', {
+          defaultMessage: 'Actions',
+        }),
         actions: actionsMenuContent(
           this.props.showEditJobFlyout,
           this.props.showDatafeedChartFlyout,
@@ -339,7 +342,7 @@ export class JobsList extends Component {
           this.props.refreshJobs,
           this.props.showCreateAlertFlyout
         ),
-        width: '40px',
+        width: '5%',
       },
     ];