[ML] Data Frames: Fixes JSON pane. (#42816) (#42844)

Moves the client-side mode attribute from the job config object to the outer transform list row object. The mode attribute wrongly showed up as part of the JSON config in the transform list.
Fixes the JSON pane of expanded transform list rows to span the full width.

x-pack/legacy/plugins/ml/public/data_frame/common/transform.ts

@@ -47,7 +47,6 @@ export interface CreateRequestBody extends PreviewRequestBody {
 
 export interface DataFrameTransformPivotConfig extends CreateRequestBody {
   id: DataFrameTransformId;
-  mode?: string; // added property on client side to allow filtering by this field
 }
 
 // Don't allow intervals of '0', don't allow floating intervals.

x-pack/legacy/plugins/ml/public/data_frame/pages/transform_management/components/transform_list/__snapshots__/expanded_row_json_pane.test.tsx.snap

@@ -2,13 +2,7 @@
 
 exports[`Data Frame: Transform List Expanded Row <ExpandedRowJsonPane /> Minimal initialization 1`] = `
 <EuiFlexGroup>
-  <EuiFlexItem
-    style={
-      Object {
-        "width": "100%",
-      }
-    }
-  >
+  <EuiFlexItem>
     <EuiSpacer
       size="s"
     />
@@ -16,6 +10,11 @@ exports[`Data Frame: Transform List Expanded Row <ExpandedRowJsonPane /> Minimal
       mode="json"
       readOnly={true}
       setOptions={Object {}}
+      style={
+        Object {
+          "width": "100%",
+        }
+      }
       value="{
   \\"id\\": \\"fq_date_histogram_1m_1441\\",
   \\"source\\": {

x-pack/legacy/plugins/ml/public/data_frame/pages/transform_management/components/transform_list/_transform_table.scss

@@ -6,6 +6,9 @@
   // where the inner content would result in the DOM changing the height.
   .euiTableRow-isExpandedRow .euiTableCellContent {
     animation: none !important;
+    .euiTableCellContent__text {
+      width: 100%;
+    }
   }
   // Another override: Because an update to the table replaces the DOM, the same
   // icon would still again fade in with an animation. If the table refreshes with

x-pack/legacy/plugins/ml/public/data_frame/pages/transform_management/components/transform_list/columns.tsx

@@ -135,10 +135,10 @@ export const getColumns = (
     },
     {
       name: i18n.translate('xpack.ml.dataframe.mode', { defaultMessage: 'Mode' }),
-      sortable: (item: DataFrameTransformListRow) => item.config.mode,
+      sortable: (item: DataFrameTransformListRow) => item.mode,
       truncateText: true,
       render(item: DataFrameTransformListRow) {
-        const mode = item.config.mode;
+        const mode = item.mode;
         const color = 'hollow';
         return <EuiBadge color={color}>{mode}</EuiBadge>;
       },

x-pack/legacy/plugins/ml/public/data_frame/pages/transform_management/components/transform_list/common.ts

@@ -101,8 +101,9 @@ export function isDataFrameTransformStats(arg: any): arg is DataFrameTransformSt
 export interface DataFrameTransformListRow {
   id: DataFrameTransformId;
   checkpointing: object;
-  stats: DataFrameTransformStats;
   config: DataFrameTransformPivotConfig;
+  mode?: string; // added property on client side to allow filtering by this field
+  stats: DataFrameTransformStats;
 }
 
 // Used to pass on attribute names to table columns

x-pack/legacy/plugins/ml/public/data_frame/pages/transform_management/components/transform_list/expanded_row_json_pane.tsx

@@ -21,9 +21,14 @@ interface Props {
 export const ExpandedRowJsonPane: SFC<Props> = ({ json }) => {
   return (
     <EuiFlexGroup>
-      <EuiFlexItem style={{ width: '100%' }}>
+      <EuiFlexItem>
         <EuiSpacer size="s" />
-        <EuiCodeEditor value={JSON.stringify(json, null, 2)} readOnly={true} mode="json" />
+        <EuiCodeEditor
+          value={JSON.stringify(json, null, 2)}
+          readOnly={true}
+          mode="json"
+          style={{ width: '100%' }}
+        />
       </EuiFlexItem>
       <EuiFlexItem grow={false}>&nbsp;</EuiFlexItem>
     </EuiFlexGroup>

x-pack/legacy/plugins/ml/public/data_frame/pages/transform_management/components/transform_list/transform_list.tsx

@@ -154,7 +154,7 @@ export const DataFrameTransformList: SFC = () => {
           // the status value is an array of string(s) e.g. ['failed', 'stopped']
           ts = transforms.filter(transform => c.value.includes(transform.stats.task_state));
         } else {
-          ts = transforms.filter(transform => transform.config.mode === c.value);
+          ts = transforms.filter(transform => transform.mode === c.value);
         }
       }
 
@@ -256,7 +256,7 @@ export const DataFrameTransformList: SFC = () => {
       },
       {
         type: 'field_value_selection',
-        field: 'config.mode',
+        field: 'mode',
         name: i18n.translate('xpack.ml.dataframe.modeFilter', { defaultMessage: 'Mode' }),
         multiSelect: false,
         options: Object.values(DATA_FRAME_MODE).map(val => ({

x-pack/legacy/plugins/ml/public/data_frame/pages/transform_management/services/transform_service/get_transforms.ts

@@ -86,16 +86,15 @@ export const getTransformsFactory = (
               return reducedtableRows;
             }
 
-            config.mode =
-              typeof config.sync !== 'undefined'
-                ? DATA_FRAME_MODE.CONTINUOUS
-                : DATA_FRAME_MODE.BATCH;
-
             // Table with expandable rows requires `id` on the outer most level
             reducedtableRows.push({
-              config,
               id: config.id,
               checkpointing: stats.checkpointing,
+              config,
+              mode:
+                typeof config.sync !== 'undefined'
+                  ? DATA_FRAME_MODE.CONTINUOUS
+                  : DATA_FRAME_MODE.BATCH,
               stats,
             });
             return reducedtableRows;