topic Re: How to use React.js Component in Splunk Dashboard ? in Splunk Dev

How to use React.js Component in Splunk Dashboard ?

kamlesh_vaghela — Sun, 07 Jun 2020 18:15:54 GMT

Hello Everyone,

I am trying to do POC for integration of React.js in Splunk Dashboards.
My questions are:
1) Is it possible?
2) if yes then how we can make it and what are the best practice of implementation.

Kindly provide your valuable feedback.

Thanks
Kamlesh

Re: How to use React.js Component in Splunk Dashboard ?

rjthibod — Thu, 04 May 2017 11:00:19 GMT

I can't comment on the specifics, because I have never tried to incorporate React or Angular or any other JS framework.

My guess is you are fighting an uphill battle if you are trying to incorporate it directly in the existing Splunk Web stack. Instead, you should build a standalone application with a React front-end that happens to use a Splunk SDK.

Re: How to use React.js Component in Splunk Dashboard ?

kamlesh_vaghela — Thu, 04 May 2017 11:22:22 GMT

Thanks rjthibod for your reply.

Yes, you are right, I have tried a lot to incorporate react js, but unable to do it.

Now let me try with React stand-alone app.

Thanks
Kamlesh

Re: How to use React.js Component in Splunk Dashboard ?

splunkian — Tue, 06 Feb 2018 13:45:27 GMT

This question is older but maybe this will help others. The simple answer is you can do this.

In my example I am using JSX and then using babel / npm to convert to regular old JS. The details of which I wont outline but generally in my JSX file I am doing the following:

require.config({
    paths: {
        'react': 'https://unpkg.com/react@16/umd/react.production.min',
        'react-dom': 'https://unpkg.com/react-dom@16/umd/react-dom.production.min'
    }
});

require([
    "underscore",
    "backbone",
    "splunkjs/mvc",
    "jquery",
    "react",
    "react-dom"
], function( _, Backbone, mvc, $, React, ReactDOM){

    ReactDOM.render(
    <h1>Hello, world!</h1>,
      document.getElementById('root')
    );

});

The above assumes you have an element on your dashboard with an id of root like so:

    <dashboard script="your_javascript.js">
      <label>Dashboard Title</label>
      <row>
        <panel>
          <html><div id="root"></div></html>
        </panel>
      </row>
    </dashboard>

Additionally, if you're not using JSX then for example purposes something like this would suffice for ReactDOM.render():

    ReactDOM.render(React.createElement(
        'h1',
        null,
        'Hello, world!'
    ), document.getElementById('root'));

Re: How to use React.js Component in Splunk Dashboard ?

stoutrw — Thu, 09 May 2019 18:54:37 GMT

So are you able to actually leverage npm and node in development for Splunk? I've noticed there's a node instance in the bin directory that you can run using ./splunk cmd node

I'm very interested in learning how to do this if you could offer any advice.

Re: How to use React.js Component in Splunk Dashboard ?

splunkian — Fri, 10 May 2019 20:26:44 GMT

You can definitely leverage npm and node. However, npm will need to be installed independently of your Splunk environment. You can use Splunk's built in node to build modular inputs among other things. You can look in the Splunk-SDK for examples.

Re: How to use React.js Component in Splunk Dashboard ?

niketn — Sat, 11 May 2019 01:49:01 GMT

@stoutrw if you are looking for reactUI development in Splunk you can request for Splunk Developer Cloud Beta Program Which was introduced at Splunk .conf last year.

Following is the Splunk Blog which lists all the sessions on Splunk Developer Cloud and react based dashboard development: https://www.splunk.com/blog/2018/10/03/new-for-developers-splunk-developer-cloud-more.html

Re: How to use React.js Component in Splunk Dashboard ?

pgoldweic — Thu, 31 Oct 2019 15:37:19 GMT

It would be great if there were public documentation on how to integrate a standalone React app (possibly built with create-react-app) with the Splunk sdk libraries, including a complete example. This would make it clearer and more likely than people will actually use these two technologies together. While, as @stoutrw indicated, there is a developer Beta Program involved with React UI development, it is not clear that any frameworks in this beta are accessible to developers building standalone React apps that access an enterprise version of Splunk. Please clarify if this is the case.

Re: How to use React.js Component in Splunk Dashboard ?

ZBhura92 — Mon, 13 Jan 2020 19:13:17 GMT

In your example file, do you compile that JSX file? I have tried to do so on mine, but I'm getting undefined for the Splunk specific things like underscore, splunkjs/mvc, etc. I have also tried to compile my component separately and then adding it to the file referenced on the Splunk dashboard source, but I get undefined for the bundle.js that is being passed in. Could you show me how you are doing the compiling? I basically want to pass Splunk specific data to my components for rendering. I currently am trying to export my component as UMD in the webpack configuration.

dashboard_file.js:

require(['/static/<app_name>/dist/bundle.js', 'splunkjs/mvc'], function(component, mvc) {
  console.log(component);
});

webpack.config.js:

const path = require('path');

module.exports = {
  entry: './src/index.jsx',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    library: 'fast-load',
    libraryTarget: 'umd'
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      }
    ]
  },
  devtool: 'cheap-module-eval-source-map',
  devServer: {
    contentBase: path.join(__dirname, 'dist')
  }
};

index.jsx:

import React, {Component} from 'react';

import TileContainer from './presentational/TileContainer.jsx';

class DashboardContainer extends Component {
  renderTile(serviceInfo) {
    return <TileContainer service={serviceInfo} />;
  }

  render() {
    return (
      <div className="service-tiles">
        <h1>Hello again world!</h1>
        {this.props.serviceList.map(service => this.renderTile(service))}
      </div>
    );
  }
}

export default DashboardContainer;

Re: How to use React.js Component in Splunk Dashboard ?

pgoldweic — Mon, 13 Jan 2020 23:21:24 GMT

just pinging @splunkian for help, as I'm interested too (see also my comment)

Re: How to use React.js Component in Splunk Dashboard ?

pgoldweic — Mon, 13 Jan 2020 23:23:05 GMT

Just pinging @splunkian hoping that we may get further answers from Splunk on our comments

Re: How to use React.js Component in Splunk Dashboard ?

ZBhura92 — Mon, 13 Jan 2020 23:32:44 GMT

I finally got something working now. It took a lot of trial and error, but I'm relieved to see something working.

The hardest thing to determine was that the path system wasn't relative to the JavaScript file that is being used in the Splunk dashboard, in my case relative to dashboard_file.js.

You might have a file in the following path within your Splunk application directory: /appserver/static/(foldername)/(filename).

When setting the path for it in the dashboard JavaScript file, it will actually be in the format of /static/app/(splunkappname)/(foldername)/(filename).

This is what I have for my configuration:

dashboard_file.js

require.config({
  paths: {
    react:
      '/static/app/<splunk_app_name>/<folder_name>/node_modules/react/umd/react.production.min',
    'react-dom':
      '/static/app/<splunk_app_name>/<folder_name>/node_modules/react-dom/umd/react-dom.production.min',
    'dashboard-container': '/static/app/<splunk_app_name>/<folder_name>/dist/bundle'
  }
});

require([
  'underscore',
  'backbone',
  'splunkjs/mvc',
  'jquery',
  'react',
  'react-dom',
  'dashboard-container'
], function(_, Backbone, mvc, $, React, ReactDOM, DashboardContainer) {
  const serviceList = [
    {name: 'Service 1', status: 'Good'},
    {name: 'Service 2', status: 'Good'},
    {name: 'Service 3', status: 'Error'},
    {name: 'Service 4', status: 'Good'}
  ];
  ReactDOM.render(
    React.createElement(DashboardContainer.default, {serviceList: serviceList}, null),
    document.getElementById('app')
  );
});

webpack.config.js:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/js/components/container/DashboardContainer.jsx',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    library: 'DashboardContainer',
    libraryTarget: 'umd'
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader'
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: './index.html'
    })
  ],
  devtool: 'cheap-module-eval-source-map',
  devServer: {
    contentBase: path.join(__dirname, 'dist')
  }
};

DashboardContainer.jsx:

import React, {Component} from 'react';

import TileContainer from '../presentational/TileContainer.jsx';

class DashboardContainer extends Component {
  renderTile(serviceInfo) {
    return <TileContainer service={serviceInfo} />;
  }

  render() {
    return (
      <div className="service-tiles">
        <h1>Hello again world!</h1>
        {this.props.serviceList.map(service => this.renderTile(service))}
      </div>
    );
  }
}

export default DashboardContainer;

Re: How to use React.js Component in Splunk Dashboard ?

splunkian — Tue, 14 Jan 2020 13:41:17 GMT

@ZBhura92 - Nice work. That is generally what I would do.

Re: How to use React.js Component in Splunk Dashboard ?

pgoldweic — Tue, 14 Jan 2020 15:50:30 GMT

Hi @ZBhura92, do you know how you'd do something equivalent to this outside of the Splunk environment, within a standalone React app? Using create-react-app would be the ideal.

Re: How to use React.js Component in Splunk Dashboard ?

chrisrabeaccent — Tue, 17 Mar 2020 00:02:52 GMT

I created a step-by-step guide on how to do this on my Github page. I found two ways.

React Integration onto Splunk - The one from the answers
https://github.com/chrisrabe/how-to-guides/blob/master/splunk/react-splunk-integration.md

React Integration onto Splunk using create-react-app - A faster way
https://github.com/chrisrabe/how-to-guides/blob/master/splunk/improved-react-splunk-integration.md

I still need to figure out:
- Using Splunk search queries with React
- Setting up Typescript on a Splunk React app

If you know how to do this, contribution to the How-To repository would be a good addition.

Re: How to use React.js Component in Splunk Dashboard ?

pgoldweic — Thu, 19 Mar 2020 21:17:23 GMT

Thanks for sharing!

Re: How to use React.js Component in Splunk Dashboard ?

pgoldweic — Tue, 21 Apr 2020 18:06:49 GMT

@chrisrabeaccenture, it looks like you included the same URL above twice, and missed including the one referring to using create-react-app.
Also, I've been trying to create a React/Splunk app outside of Splunk, do you know how these instructions would apply (or not, perhaps with some variation?) to my case?

Re: How to use React.js Component in Splunk Dashboard ?

chrisrabeaccent — Wed, 22 Apr 2020 00:00:20 GMT

Hi @pgoldweic. Thanks. I updated the link.

If you wanted to create a React application outside Splunk, the only thing that worked for me so far is to create a NodeJS server that uses the Splunk SDK node module to handle search queries for you. When you want to make a query, you have to send a request to your NodeJS server endpoint and this server will forward the queries to Splunk.

I had errors when using the Splunk SDK in client-side but if you ever find a solution, please document it and link it so that I can put it in my how-to guides.

Re: How to use React.js Component in Splunk Dashboard ?

pgoldweic — Wed, 22 Apr 2020 15:16:22 GMT

Thanks for your reply @chrisrabeaccenture. I was hoping to be able to avoid this, since it'd mean that I cannot take advantage of Splunk's visualization features on the client side, so it's unfortunate to hear you could not make the client-side sdk work for you :-(. I hope the new beta program will provide a supported solution for this, but it is certainly not available yet, especially for apps outside of Splunk.

Re: How to use React.js Component in Splunk Dashboard ?

ivfisunov — Sun, 27 Jun 2021 13:56:55 GMT

If you need to make search queries from react you have to pass "splunkjs/mvc/searchmanager" to your react application.

The source code you can see here

https://github.com/ivfisunov/splunk-react-app