Splunk Dev

How to use React.js Component in Splunk Dashboard ?

kamlesh_vaghela
SplunkTrust
SplunkTrust

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

Labels (1)
Tags (1)
0 Karma

chrisrabeaccent
Engager

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.

ivfisunov
Engager

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

 

pgoldweic
Communicator

Thanks for sharing!

0 Karma

pgoldweic
Communicator

@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?

0 Karma

chrisrabeaccent
Engager

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.

pgoldweic
Communicator

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.

0 Karma

niketn
Legend

@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

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

splunkian
Path Finder

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'));

ZBhura92
Engager

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;
0 Karma

pgoldweic
Communicator

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

0 Karma

ZBhura92
Engager

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;
0 Karma

splunkian
Path Finder

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

pgoldweic
Communicator

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.

0 Karma

pgoldweic
Communicator

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.

pgoldweic
Communicator

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

0 Karma

stoutrw
Path Finder

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.

0 Karma

splunkian
Path Finder

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.

0 Karma

rjthibod
Champion

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.

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

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

0 Karma
Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...