[Story] POC for Grafana and frontend integration

[peber7]

As a developer, I want create a proof of concept for integrating Grafana into a react/vue frontend, so that the we determine if Grafana is what we want to use.

Associated Epic:

Definition of Done

• [x] Acceptance criteria defined
• [x] Solution tasks specified
• [ ] Feature branch created
• [ ] Unit tests written
• [ ] Solution is code complete, i.e. passes full suite of unit tests
• [ ] Design documents updated if needed
• [ ] Pull request created
• [ ] Code is reviewed
• [ ] Code is merged to dev branch
• [x] Acceptance criteria is met
• [ ] Feature branch merged into master
• [ ] Feature branch deleted

Acceptance Criteria

• [x] #11 Completed
• [x] Test data from a test data source has been created into a dashboard in Grafana and the embedded html is being used by a React frontend
• [x] Test data on the frontend updates when the Grafana data updates

Solution Tasks

• [x] Create a test data source in Grafana
• [x] Create test graphs in Grafana
• [x] Create a test frontend in react to display the graphs from Grafana
• [x] Verify that the frontend updates the data from Grafana does

[peber7]

For this POC, the goal was to test the Grafana's embedded iframe option within a React project.

I had to change a few config settings for this to work. I needed to set allow_embedding = true and set anonymous access to enabled = true. For our main application/protype in the future, we will want to have the Single Pane of Glass authenticate with Grafana, so no random user can access the data.

Here is an example Graph with data from a database that is no longer used.

After updating one of the player's damage dealt, the data updates immediately when the graph is next requested. The graph in the react app needs to be refreshed to see the changes.

The last thing to show is that if the data source is unavailable, there is no data retention mechanism provided by Grafana. And this is what the graph will look like in the React app...

Example Iframe:

<iframe 
            title="table1"
            src="http://localhost:3000/d-solo/ac92f0d6-fa94-4789-928c-4bcee28fad82/new-dashboard?orgId=1&panelId=3" 
            width="1050" 
            height="200" 
            frameBorder="0">
</iframe>

Key Findings

• Data Retention by Grafana is no supported.
• Authorization is needed to view embedded Graphs.
• Graphs and Table in iframes need to be refreshed to get the latest data from Grafana