Elastic UI framework integration (first iteration)

[adri9valle]

It's time to use in our app the Elastic UI framework. It comes with a bunch of built-in components and it uses the latest frontend technologies such as React and small components.

Reference: https://elastic.github.io/eui/#/

With this first iteration the goal is to familiarize with the framework and to implement some small components that we already have implemented using Angular.js but this time we are going to use the EUI framework.

We can also start to look at the icons, buttons and many other small elements that we can implement with no risk.

Regards

[adri9valle]

Working on this branch: 3.9-elastic-ui

[adri9valle]

Update

Hi team, I've been working on this issue, I could load React and after several tests, while trying to create a custom component to check if React works properly, I could load a component but I have this error:

VM9843:166 Uncaught Error: Mismatched anonymous define() module: function (React) {
  'use strict'
  class TestDiv extends React.Component {
    constructor(props) {
      super(props)

      this.state = {}
    }

    render() {
      return (
        '<div> <p>TESTING REACT COMPONENTS</p></div>'
      )
    }
  }
}
http://requirejs.org/docs/errors.html#mismatch
    at makeError (eval at module.exports (index.js:607), <anonymous>:166:17)
    at intakeDefines (eval at module.exports (index.js:607), <anonymous>:1229:36)
    at eval (eval at module.exports (index.js:607), <anonymous>:1416:25)

Looking in require documentation seems to be a common problem https://requirejs.org/docs/errors.html#mismatch.

Tomorrow I'll follow work on this.

[pablotr9]

Update After many tries, I successfully achieved to load React(16.8.6) into our app and test that it's working correctly https://github.com/wazuh/wazuh-splunk/commit/c5186bea448bb4c27072e2d9f8b54d2d8fd4a228: As we are using AMD, in order to define React I configured RequireJS as follows: main.js

require.config(
.... 
  paths: {
     ....
     // React
     react: 'js/libs/react/react.development',
     ReactDom: 'js/libs/react/react-dom.development
  },
...
)

Once React was loaded without errors, we encountered some difficulties to test its functionality so we created a dummy <div> to see if React was working as expected: <controller_name>.js

define(['../../module','react','ReactDom'], function(controllers,React,ReactDOM) {
  'use strict'
....
ReactDOM.render(
            React.createElement('p', {}, 'test div'),
              document.getElementById('react-test')
          );
....

<controller_name>.html

    ....
    <div id=react-test"></div>
    ....

The obtained result:

Problems encountered: We can not create components using JSX syntax so the previous react element was created using JavaScript, this could be solved by transpiling our code with tools like Babel

[pablotr9]

Update

• I have achieved to make a reusable react class component in JSX that is being transpiled into JS (following this React guide to preprocess jsx files. Unlike previous process to create a component we can now simply use JSX:

render() {
      ...
      return (<div style={divStyle }>test div<br/><button>button</button></div>);
      ...
}

basic example:

• EUI CSS has also been added which is needed in order to use EUI React Components

Currently working on importing and use EUI framework.