topic How to show Splunk Enterprise data in standalone ReactJS web app using dashboard beta instead of test data? in Dashboards & Visualizations

How to show Splunk Enterprise data in standalone ReactJS web app using dashboard beta instead of test data?

zofxare — Mon, 24 Aug 2020 13:14:10 GMT

I have a standalone ReactJS web application and Splunk Enterprise free version both running on localhost of the same laptop. The react app will never be run in Splunk Enterprise as a dashboard.

I have the conf19 dashboard Buttercup Games App demo running in my React app. That example uses test data. I now want to set the datasource to ds.search, query my local Splunk and visualize the results.

I'm only changing the definition file. This is an excerpt:

dataSources: {
total_count_search: {
type: 'ds.search',
options: { query: 'index=_internal | stats count' }
}},
visualizations: {
sv_total_event: {
title: '_internal event count',
type: 'viz.singlevalue',
options: { backgroundColor: '#53a051' },
dataSources: { primary: 'total_count_search' }
}}

I'm getting a cors error:

Request header field x-requested-with is not allowed by Access-Control-Allow-Headers in preflight response.

The web, input and settings conf files all have crossOriginSharingPolicy set to my react app url.

I'm not sure how to get past this.

I can create searches and get results by using the REST API.

Are there any examples/documentation to search Splunk from a standalone React app using the new Splunk dashboard or to use the REST API to create a visualization with the new dashboard?

Re: How to show Splunk Enterprise data in standalone ReactJS web app using dashboard beta instead of test data?

zofxare — Wed, 26 Aug 2020 15:47:43 GMT

UPDATE:

I've gotten past the cors issue by adding the following to the settings stanza in yoursplunkdir/etc/system/local/web.conf:

crossOriginSharingPolicy = http://localhost:3000

crossOriginSharingHeaders = x-requested-with,x-splunk-form-key

Now I'm getting a json error:

index.js:1 failed to create search job: SyntaxError: Unexpected token < in JSON at position 0

This is the definition file:

const definition = {

dataSources: {

ds_GHKftNxx: {

type: 'ds.search',

options: {

queryParameters: {

earliest: '@y',

latest: 'now'

query: 'index=_internal | stats count'

name: 'Search_1'

}

inputs: {},

layout: {

type: 'absolute',

options: {

width: 1164,

height: 824,

display: 'auto-scale',

backgroundColor: 'transparent'

structure: [

{

item: 'viz_2rArKe2X',

type: 'block',

position: {

h: 230,

w: 280,

x: 20,

y: 20

}

]

title: 'Buttercup Games',

description: '',

visualizations: {

viz_2rArKe2X: {

type: 'viz.singlevalue',

title: 'Single Value Example with ds.search',

options: { backgroundColor: '#53a051' },

dataSources: {

primary: 'ds_GHKftNxx'

}

};

export default definition;

Re: How to show Splunk Enterprise data in standalone ReactJS web app using dashboard beta instead of test data?

mleati — Sat, 29 Aug 2020 22:42:22 GMT

I am also studying the ReactJS app presented at .conf19. Is there any documentation for Splunk components for ReactJS? Are these components officially supported by Splunk? Obviously, without official support use ReactJS components would not be an option for most projects.