Dashboard Tutorial 3
In the third installment of the Splunk Dashboard tutorials, we cover how to use public 3rd party react packages in Splunk Dashboards. This projects uses react-google maps, a package that works with the Google Map Javascript API to render a map as part of a React component.
Be sure to check out tutorial.md for a step by step guide on how to build this project!
react-google-maps NPM: https://www.npmjs.com/package/react-google-maps
This project is also based on another Splunker's project, showcasing how you can go a step further to add some interactive elements and get more data from click events on a Google Map. You can check out that project here: https://github.com/splunk/supply-chain-tracking
License Notice
Copyright 2021 Splunk, Inc.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at
https://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
Contributing to DashboardTutorial3
Overview
The project contains a variety of packages that are published and versioned collectively. Each package lives in its own
directory in the /packages
directory. Each package is self contained, and defines its dependencies in a package.json file.
We use Yarn Workspaces and Lerna for managing and publishing multiple packages in the same repository.
Getting Started
- Clone the repo.
- Install yarn (>= 1.2) if you haven't already:
npm install --global yarn
. - Run the setup task:
yarn run setup
.
After this step, the following tasks will be available:
start
– Run thestart
task for each projectbuild
– Create a production bundle for all projectstest
– Run unit tests for each projectlint
– Run JS and CSS linters for each projectformat
– Run prettier to auto-format*.js
,*.jsx
and*.css
files. This command will overwrite files without asking,format:verify
won't.
Running yarn run setup
once is required to enable all other tasks. The command might take a few minutes to finish.
To link the app to your own local Splunk instance, you can do so by setting up the SPLUNK_HOME variable to your Splunk application directory. And then in the Splunk App directory of this repo, run yarn run link:app
Developer Scripts
Commands run from the root directory will be applied to all packages. This is handy when working on multiple packages
simultaneously. Commands can also be run from individual packages. This may be better for performance and reporting when
only working on a single package. All of the packages have similar developer scripts, but not all scripts are implemented
for every package. See the package.json
of the package in question to see which scripts are available there.
For more granular control of development scripts, consider using Lerna directly.
Code Formatting
DashboardTutorial3 uses prettier to ensure consistent code formatting. It is recommended to add a prettier plugin to your editor/ide.