[Logs UI] Make column configurations reorderable

test/functional/services/lib/web_element_wrapper/web_element_wrapper.ts

@@ -205,6 +205,18 @@ export class WebElementWrapper {
     });
   }
 
+  /**
+   * Focuses this element.
+   *
+   * @return {Promise<void>}
+   */
+  public async focus() {
+    await this.retryCall(async function focus(wrapper) {
+      await wrapper.scrollIntoViewIfNecessary();
+      await wrapper.driver.executeScript(`arguments[0].focus()`, wrapper._webElement);
+    });
+  }
+
   /**
    * Clear the value of this element. This command has no effect if the underlying DOM element
    * is neither a text INPUT element nor a TEXTAREA element.

x-pack/legacy/plugins/infra/public/components/source_configuration/log_columns_configuration_panel.tsx

@@ -171,7 +171,7 @@ const FieldLogColumnConfigurationPanel: React.FunctionComponent<{
   <EuiPanel data-test-subj={`logColumnPanel fieldLogColumnPanel fieldLogColumnPanel:${field}`}>
     <EuiFlexGroup>
       <EuiFlexItem grow={false}>
-        <div {...dragHandleProps}>
+        <div data-test-subj="moveLogColumnHandle" {...dragHandleProps}>
           <EuiIcon type="grab" />
         </div>
       </EuiFlexItem>
@@ -202,7 +202,7 @@ const ExplainedLogColumnConfigurationPanel: React.FunctionComponent<{
   >
     <EuiFlexGroup>
       <EuiFlexItem grow={false}>
-        <div {...dragHandleProps}>
+        <div data-test-subj="moveLogColumnHandle" {...dragHandleProps}>
           <EuiIcon type="grab" />
         </div>
       </EuiFlexItem>

x-pack/test/functional/apps/infra/logs_source_configuration.ts

@@ -98,14 +98,16 @@ export default ({ getPageObjects, getService }: KibanaFunctionalTestDefaultProvi
         await infraSourceConfigurationFlyout.addTimestampLogColumn();
         await infraSourceConfigurationFlyout.addFieldLogColumn('host.name');
 
+        await infraSourceConfigurationFlyout.moveLogColumn(0, 1);
+
         await infraSourceConfigurationFlyout.saveConfiguration();
         await infraSourceConfigurationFlyout.closeFlyout();
       });
 
       it('renders the changed log columns with their headers', async () => {
         const columnHeaderLabels = await infraLogStream.getColumnHeaderLabels();
 
-        expect(columnHeaderLabels).to.eql(['Timestamp', 'host.name', '']);
+        expect(columnHeaderLabels).to.eql(['host.name', 'Timestamp', '']);
 
         const logStreamEntries = await infraLogStream.getStreamEntries();
 

x-pack/test/functional/services/infra_source_configuration_flyout.ts

@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { Key } from 'selenium-webdriver';
 import { KibanaFunctionalTestDefaultProviders } from '../../types/providers';
 import { WebElementWrapper } from '../../../../test/functional/services/lib/web_element_wrapper';
 
@@ -81,6 +82,25 @@ export function InfraSourceConfigurationFlyoutProvider({
         await this.removeLogColumn(0);
       }
     },
+    async moveLogColumn(sourceIndex: number, destinationIndex: number) {
+      const logColumnPanel = (await this.getLogColumnPanels())[sourceIndex];
+      const moveLogColumnHandle = await testSubjects.findDescendant(
+        'moveLogColumnHandle',
+        logColumnPanel
+      );
+      await moveLogColumnHandle.focus();
+      const movementDifference = destinationIndex - sourceIndex;
+      await moveLogColumnHandle.pressKeys(Key.SPACE);
+      for (let i = 0; i < Math.abs(movementDifference); i++) {
+        await new Promise(res => setTimeout(res, 100));
+        if (movementDifference > 0) {
+          await moveLogColumnHandle.pressKeys(Key.ARROW_DOWN);
+        } else {
+          await moveLogColumnHandle.pressKeys(Key.ARROW_UP);
+        }
+      }
+      await moveLogColumnHandle.pressKeys(Key.SPACE);
+    },
 
     /**
      * Form and flyout