Interactive learning architecture
Interactive learning is an app-based plugin built using the Grafana plugin SDK. Its primary mount point is the Extension Sidebar. This is the same mount point that Grafana Assistant uses, which allows both applications to operate in any part of the Grafana UI.
The components of Interactive learning
Interactive learning has three main components:
- Context retrieval - Retrieves the context of the current page in Grafana.
- Documentation rendering - Renders the selected documentation or guide.
- Interactive engine - Facilitates the interactive features within the documentation or guide.
Context retrieval
Context retrieval is the process of retrieving the context of the current page in Grafana, as well as other relevant data points such as the current user role, datasource types, and contextual tags. The following table outlines the full set of data points that the context retrieval component collects.
The recommender service
The recommender service is a REST API that generates recommendations based on context data. Grafana Labs creates and hosts this service to generate recommendations for the Interactive learning plugin. The service uses pattern matching on the context data to generate recommendations.
Note
The recommender service is disabled by default for open source Grafana users. Grafana administrators can enable it by navigating to the plugin configuration and toggling the Enable context-aware recommendations switch. For more information, refer to the Administrators reference.
Documentation rendering
The documentation rendering component renders documentation or guide content. The system parses documentation into a React component tree rather than rendering it in an iframe. This approach allows the documentation to render in the same way as the rest of the Grafana UI, using the same components and styles. It also allows rendering images and videos directly in the sidebar. The renderer covers most elements of documentation and guide content. If you notice a rendering issue, let us know by opening an issue.
Interactive engine
The interactive engine provides interactive features within documentation or guides. It powers the Show me and Do it buttons, as well as interactive elements and the requirements and objectives system. The following components make up the interactive engine:
- Show me button - Shows the next step in the documentation or guide.
- Do it button - Executes the action of the current step in the documentation or guide.
- Do section button - Executes the action of the current section in the documentation or guide.
- Guided steps - Steps that guide users through actions by clicking a button to start.
- Multistep steps - Steps that execute in sequence after clicking a button to start.
- Requirements and objectives system - Checks if users have completed requirements and objectives for the current step.
Tracking user progress
Interactive learning uses localStorage to track user progress for interactive features within documentation or guides. Guide progression resets when a user closes the guide tab. Tabs and progression persist across sessions until the user closes the tab.
