Using Elastic UI components in scripts

It’s possible to use React components from Elastic UI in template scripts.

The Elastic UI version included in Siren Investigate is 34.6.0.

You can update the script created earlier to show a company name with a colored icon:

// EUI imports
const { EuiText, EuiTextColor, EuiIcon } = Eui;
async function reactView(input) {
  const computedData = await fetchRecordData(input);

  return (
    <EuiText>
      <h1>
        <EuiTextColor color="success"><EuiIcon type="cheer" /> {computedData.companyName}</EuiTextColor>
      </h1>
      <div>Location: {computedData.location}</div>
      <p>Total raised amount: {computedData.raisedAmount}</p>
    </EuiText>
  );
}

EUI components

Improving formatting with conditional output

You can use conditional output to provide more informative messages as opposed to plain numbers as shown in the following examples.

Plain number:

Plain number

Informative message:

Informative message

To make the message as in the example, add a JavaScript function to return it when the number is 0. The example below demonstrates this approach by modifying the reactView function implemented earlier:

function valueString(value) {
  // Conditional output implementation
  switch (value) {
    case undefined: return <i>Loading...</i>;
    case null: return <i>No data</i>;
    default: return value;
  }
}

function currencyString(value) {
  switch (value) {
    case undefined: return <i>Loading...</i>;
    case null: return <i>No data</i>;
    case 0: return <i>No investments</i>;
    default: return `${value} $`;
  }
}

async function reactView(input) {
  const computedData = await fetchRecordData(input);

  return (
    <EuiText>
      <h1>
        <EuiTextColor color="success"><EuiIcon type="cheer" /> {valueString(computedData.companyName)}</EuiTextColor>
      </h1>
      <p>Location: {valueString(computedData.location)}</p>
      <p>Total raised amount: {currencyString(computedData.raisedAmount)}</p>
    </EuiText>
  );
}

Next steps