CODEWITHSUNDEEP
chronograf
Triple B
Triple B

Reputation: 13

Customizing the UI of Chronograf

I am trying to use Chronograf in my project. I would like to change the UI of the Chronograf to suit the project.

I couldn't find any documents related to this. Can we customize the Chronograf UI to suit the requirement? If so, how can we do it?

Upvotes: 0

Views: 629

Answers (1)

Sam
Sam

Reputation: 6160

I did some similar work. I had to make sure the Chronograf UI was limited to the explore and dashboard tabs. Plus, I had to add user management so that users where limited to specific measurements and dashboards.

Chronograf is open source. You can clone it from https://github.com/influxdata/chronograf

  • The back-end is written in Go.
  • The UI is written in React.js (using Typescript).

You can find the UI code in the sub folder /ui: https://github.com/influxdata/chronograf/tree/master/ui

To build it, you will need Node.js and yarn.

If you only want to work on the UI, you can can edit parcel.js and change the location of http://localhost:8888 to the location of your current Chronograf instance.

Then run yarn start from the /ui folder and go to http://localhost:8080

If you make changes to the UI code, http://localhost:8080 will automaticlly refresh to reflect your changes.

If you are ready with development, follow the instructions to build Chronograf from source in their Readme: https://github.com/influxdata/chronograf#from-source

Upvotes: 0

Related Questions