Mutable.ai logoAuto Wiki by Mutable.ai
Create your own wiki
AI-generated instantly
Updates automatically
Solo and team plans
Create your own wiki
AI-generated instantly
Updates automatically
Solo and team plans

grafana

Auto-generated from grafana/grafana by Mutable.ai Auto WikiRevise

grafana
GitHub Repository
Developergrafana
Written inTypeScript
Stars60k
Watchers1.3k
Created12/11/2013
Last updated04/03/2024
LicenseGNU Affero General Public License v3.0
Homepagegrafana.com
Repositorygrafana/grafana
Auto Wiki
Revision
Software Version0.0.8Basic
Generated fromCommit aad79c
Generated at04/05/2024
• • •
Architecture Diagram for grafana
Architecture Diagram for grafana

The Grafana repository is a powerful open-source data visualization and monitoring platform that allows users to create, explore, and share interactive dashboards. The repository contains the core functionality of the Grafana application, including features such as alerting, annotations, data source management, dashboard creation and management, Explore functionality, and various panel visualizations.

The most important parts of the repository are the …/alerting, …/dashboard, …/datasource, and …/explore directories, which collectively provide the foundation for the Grafana application's core features.

The …/alerting directory contains the implementation of the alerting system in Grafana, including the management of alert rules, notification channels, and various other components and utilities that are essential for the alerting feature. The ThresholdMapper class is responsible for mapping alert conditions to graph thresholds, and the alertDef.ts file defines the structure of an alert query using the alertQueryDef object.

The …/dashboard directory contains the core functionality for managing and rendering Grafana dashboards. This includes the DashboardModel class, which is the central component for managing the state and functionality of a Grafana dashboard, and the PanelModel class, which is responsible for managing the state and behavior of individual panels within a dashboard. The DashboardLoaderSrv and DashboardSrv services handle the loading and saving of dashboards, respectively.

The …/datasource directory contains the implementation of various data source plugins for the Grafana application, allowing users to connect to and query data from a wide range of data sources, such as Prometheus, Elasticsearch, Loki, and Jaeger. Each data source plugin is implemented as a separate subdirectory, with the main implementation in a datasource.ts file.

The …/explore directory provides the core functionality for the Grafana Explore feature, which allows users to quickly iterate on queries, explore data, and visualize the results in various formats, such as graphs, logs, tables, and trace views. This includes the implementation of the Trace View component, which provides a comprehensive visualization and analysis experience for trace data, and the Logs feature, which handles the rendering, interaction, and management of log data.

The Grafana repository relies on several key technologies and design choices, including:

  • React: The Grafana user interface is built using the React library, which provides a component-based architecture and efficient rendering.
  • Redux: The application state is managed using the Redux library, which provides a predictable state container and a unidirectional data flow.
  • Modular Design: The codebase is organized into well-defined modules and directories, each with a specific responsibility, promoting maintainability and extensibility.
  • Plugins: The Grafana platform is designed to be extensible through plugins, allowing users to integrate with a wide range of data sources and visualizations.
  • Backend Services: The repository includes a robust set of backend services and APIs that provide the foundation for the Grafana application, handling tasks such as authentication, authorization, and data storage.

Alerting Dashboards and Panels Data Source Integration Visualization and UI Components Backend Services and API Plugins and Extensions Explore Functionality Internationalization and Localization Utility Functions and Services

Alerting
Revise

• • •
Architecture Diagram for Alerting
Architecture Diagram for Alerting

The core functionality of the …/alerting directory is to manage the alerting system in the Grafana application. This includes the management of alert rules, notification channels, and the overall state of the alerting system.

Read more

Alert Rules
Revise

• • •
Architecture Diagram for Alert Rules
Architecture Diagram for Alert Rules

The core functionality for managing alert rules in the Grafana Alerting Unified system is implemented in the …/rule-editor directory. This includes components and utilities for creating, editing, and deleting both Grafana-managed and cloud-based alert rules.

Read more

Alert Notifications
Revise

• • •
Architecture Diagram for Alert Notifications
Architecture Diagram for Alert Notifications

The …/receivers directory contains the core functionality for managing alert notification receivers in the Grafana Alerting Unified feature.

Read more

Alerting State Management
Revise

• • •
Architecture Diagram for Alerting State Management
Architecture Diagram for Alerting State Management

The core functionality for managing the state and lifecycle of alerts in the Grafana Alerting Unified system is primarily implemented in the following components and modules:

Read more

Alerting Integrations
Revise

The Grafana Alerting Unified feature provides functionality to integrate with other Grafana plugins and services, such as the Grafana On-Call and Incident Management plugins.

Read more

Dashboards and Panels
Revise

• • •
Architecture Diagram for Dashboards and Panels
Architecture Diagram for Dashboards and Panels

The core functionality for managing and rendering Grafana dashboards is primarily handled in the …/dashboard directory. This directory contains components and services responsible for loading, saving, and interacting with dashboards, as well as handling various dashboard-related features.

Read more

Dashboard Loading and Initialization
Revise

• • •
Architecture Diagram for Dashboard Loading and Initialization
Architecture Diagram for Dashboard Loading and Initialization

The initDashboard.ts file in the Grafana codebase is responsible for initializing and loading a dashboard. It handles the process of fetching the dashboard data, creating the dashboard model, and setting up the necessary services and dependencies.

Read more

Dashboard State Management
Revise

The DashboardModel class in the …/DashboardModel.ts file is the central component for managing the state and functionality of a Grafana dashboard. It handles various aspects of the dashboard, including:

Read more

Dashboard Rendering and Layout
Revise

• • •
Architecture Diagram for Dashboard Rendering and Layout
Architecture Diagram for Dashboard Rendering and Layout

The DashboardGrid class in the file …/DashboardGrid.tsx is responsible for rendering the dashboard grid layout in the Grafana application. It uses the ReactGridLayout library to manage the positioning and resizing of panels within the dashboard.

Read more

Dashboard Sharing and Exporting
Revise

• • •
Architecture Diagram for Dashboard Sharing and Exporting
Architecture Diagram for Dashboard Sharing and Exporting

The …/ShareModal directory contains the functionality for sharing and exporting Grafana dashboards. This includes generating shareable links, creating public snapshots, embedding dashboards or panels, and exporting dashboards as JSON.

Read more

Dashboard Settings and Configuration
Revise

The DashboardSettings component in the Grafana dashboard settings is responsible for managing the various settings and configurations of a Grafana dashboard. This includes functionality for handling general settings, annotations, variables, links, and permissions.

Read more

Panel Editor and Configuration
Revise

The core functionality for the panel editor in the Grafana dashboard is managed by the PanelEditor component, defined in the …/PanelEditor.tsx file. This component is responsible for handling the state of the panel, managing user interactions, and rendering the various UI elements required for editing a panel.

Read more

AI-Powered Dashboard Enhancements
Revise

The …/GenAI directory contains the core functionality for integrating large language models (LLMs) into the Grafana dashboard. This includes components for generating and managing AI-generated content, such as panel descriptions, dashboard titles, and dashboard changes summaries.

Read more

Data Source Integration
Revise

The Grafana data visualization platform provides a wide range of data source plugins, allowing users to connect to and query data from a diverse set of data sources. These data source plugins are implemented in the …/datasource directory, and each plugin handles the specific functionality required to interact with its respective data source.

Read more

Alertmanager Data Source
Revise

The AlertManagerDatasource class is the main implementation of the Alertmanager data source in the Grafana application. This data source is responsible for interacting with the Alertmanager component of the Prometheus monitoring system, allowing Grafana to display and manage alerts from the Alertmanager.

Read more

Azure Monitor Data Source
Revise

The Datasource class in …/datasource.ts is the main entry point for the Azure Monitor data source plugin in Grafana. It serves as a wrapper around several sub-datasources, each responsible for handling specific types of Azure Monitor queries:

Read more

Cloud Monitoring Data Source
Revise

The CloudMonitoringDataSource class in the …/datasource.ts file is the main implementation of the Google Cloud Monitoring data source in Grafana. This class is responsible for handling data queries, annotations, and variable support for the Cloud Monitoring service.

Read more

CloudWatch Data Source
Revise

The CloudWatchDatasource class is the main implementation of the CloudWatch data source plugin for Grafana. It provides functionality to query CloudWatch metrics, logs, and annotations.

Read more

Elasticsearch Data Source
Revise

The grafana/public/app/plugins/datasource/elasticsearch/datasource.ts file contains the implementation of the Elasticsearch data source plugin for Grafana. The main class responsible for this implementation is the ElasticDatasource class, which extends the DataSourceWithBackend class and implements several interfaces to provide additional functionality.

Read more

Grafana Data Source
Revise

• • •
Architecture Diagram for Grafana Data Source
Architecture Diagram for Grafana Data Source

The GrafanaDatasource class is the main implementation of the Grafana data source plugin. It extends the DataSourceWithBackend class and provides functionality for querying and retrieving data from the Grafana data source.

Read more

Grafana PostgreSQL Data Source
Revise

• • •
Architecture Diagram for Grafana PostgreSQL Data Source
Architecture Diagram for Grafana PostgreSQL Data Source

The PostgresDatasource class in the …/datasource.ts file is the main implementation of the Grafana PostgreSQL data source. It extends the SqlDatasource class from the @grafana/sql package, which provides a common interface for working with SQL-based data sources.

Read more

Visualization and UI Components
Revise

• • •
Architecture Diagram for Visualization and UI Components
Architecture Diagram for Visualization and UI Components

The Grafana UI library, located in the …/src directory, provides a comprehensive set of reusable UI components and visualization functionality that power the Grafana user interface. This directory is organized into several sub-directories, each focusing on a specific aspect of the user interface.

Read more

Components for Rendering Visualizations
Revise

• • •
Architecture Diagram for Components for Rendering Visualizations
Architecture Diagram for Components for Rendering Visualizations

The core UI components responsible for rendering various data visualizations in the Grafana user interface are primarily located in the …/components directory. These components provide a wide range of functionality, from basic UI elements like buttons and labels to more complex data visualization components.

Read more

Date and Time Pickers
Revise

The …/DateTimePickers directory contains a collection of React components and utility functions that provide date and time picker functionality for the Grafana UI library.

Read more

Form Components
Revise

The …/Forms directory contains a collection of reusable React components that provide form-related functionality for the Grafana user interface.

Read more

Table Visualization
Revise

• • •
Architecture Diagram for Table Visualization
Architecture Diagram for Table Visualization

The core functionality of the table visualization component in the Grafana UI library is implemented in the …/Table directory. This directory contains a comprehensive set of components, hooks, and utility functions that work together to provide a highly customizable and feature-rich table implementation.

Read more

Node Graph Visualization
Revise

The core functionality of the node graph visualization in the Grafana UI is implemented in the …/nodeGraph directory. The main components and functionality are as follows:

Read more

XY Chart Visualization
Revise

The core functionality of the XY chart visualization component in the Grafana UI is implemented in the …/xychart directory. The main components and functionality are as follows:

Read more

Stat Panel
Revise

• • •
Architecture Diagram for Stat Panel
Architecture Diagram for Stat Panel

The Stat panel is a native panel plugin in the Grafana data visualization platform. The core functionality of the Stat panel is to display a single large statistic with an optional graph sparkline.

Read more

Canvas Panel
Revise

The Canvas Panel in the Grafana application provides a flexible canvas-based visualization feature. The core functionality of this panel is managed by the CanvasPanel class, located in the …/CanvasPanel.tsx file.

Read more

Geomap Panel
Revise

• • •
Architecture Diagram for Geomap Panel
Architecture Diagram for Geomap Panel

The Geomap Panel is a plugin that provides geographic data visualization in the Grafana UI. The core functionality of the Geomap Panel is implemented in the …/geomap directory.

Read more

Time Series Panel
Revise

• • •
Architecture Diagram for Time Series Panel
Architecture Diagram for Time Series Panel

The Time Series panel is a core panel plugin in the Grafana data visualization platform. It is responsible for rendering time series data in a variety of visualizations, including line charts, area charts, and bar charts.

Read more

Table Panel
Revise

The Table Panel is a core panel plugin in the Grafana data visualization platform. It provides a highly flexible table-based visualization that supports multiple data formats, including time series, tables, annotations, and raw JSON data.

Read more

Backend Services and API
Revise

The core backend services and API functionality that provide the foundation for the Grafana application include the following:

Read more

Access Control
Revise

The core functionality of the …/accesscontrol directory is to manage access control and permissions for various Grafana resources. This includes the following key components:

Read more

Alerting Service
Revise

The core functionality for the Grafana Unified Alerting system is managed in the …/ngalert directory. This directory contains the following key components:

Read more

API Server
Revise

The core functionality of the Grafana API server is implemented in the …/apiserver directory. The main components and their responsibilities are as follows:

Read more

Authentication and Authorization
Revise

References: pkg/services/authn

The core functionality for handling user authentication and authorization in the Grafana application is implemented in the …/authn directory. This directory provides a unified authentication service that supports various authentication mechanisms, including API keys, basic authentication, JWT-based authentication, LDAP authentication, OAuth authentication, and session-based authentication.

Read more

Dashboard Management
Revise

The core functionality for managing and rendering Grafana dashboards is implemented in the …/dashboards directory. This directory contains the following key components:

Read more

Data Source Integration
Revise

• • •
Architecture Diagram for Data Source Integration
Architecture Diagram for Data Source Integration

The core functionality for the data source integration in Grafana is provided in the …/datasource directory. This directory contains the implementation of various data source plugins, allowing users to connect to and query data from a wide range of data sources, such as Alertmanager, Azure Monitor, Cloud Monitoring, CloudWatch, Elasticsearch, Grafana, and more.

Read more

Live Data Streaming
Revise

References: pkg/services/live

The core functionality for the Grafana Live service, which enables real-time communication and event broadcasting within the Grafana platform, is implemented in the …/live directory. This directory contains several sub-directories, each with its own specialized functionality:

Read more

Plugins Integration
Revise

• • •
Architecture Diagram for Plugins Integration
Architecture Diagram for Plugins Integration

The …/pluginsintegration directory is responsible for managing the integration of plugins in the Grafana application. It provides a comprehensive set of services and components that handle various aspects of plugin management, including plugin discovery, initialization, validation, and external integration.

Read more

Provisioning
Revise

The core functionality for provisioning various resources in the Grafana application, including dashboards, data sources, plugins, and alerting configurations, is implemented in the …/provisioning directory.

Read more

Secrets Management
Revise

The core functionality for managing secrets and encryption keys in the Grafana application is implemented in the …/secrets directory. The key components are:

Read more

Storage Service
Revise

References: pkg/services/store

• • •
Architecture Diagram for Storage Service
Architecture Diagram for Storage Service

The core functionality for managing the storage of various entities in the Grafana application, including dashboards, folders, library panels, playlists, reports, and snapshots, is implemented in the …/store directory.

Read more

Plugins and Extensions
Revise

The Grafana data visualization platform allows users to extend its functionality through plugins. These plugins can provide integrations with various data sources, as well as custom panel visualizations.

Read more

Data Source Plugins
Revise

The …/datasource directory contains the implementation of various data source plugins for Grafana, allowing users to connect to and query data from a wide range of data sources.

Read more

Alertmanager Data Source
Revise

• • •
Architecture Diagram for Alertmanager Data Source
Architecture Diagram for Alertmanager Data Source

The main implementation of the Alertmanager data source is the AlertManagerDatasource class, which is defined in the …/DataSource.ts file. This class is responsible for handling the communication between Grafana and the Alertmanager component of the Prometheus monitoring system.

Read more

Azure Monitor Data Source
Revise

The AzureMonitorDatasource class is the main implementation of the Azure Monitor data source in the Grafana application. It extends the DataSourceWithBackend class, which provides the base functionality for a Grafana data source.

Read more

Cloud Monitoring Data Source
Revise

The main implementation of the Google Cloud Monitoring data source is handled by the CloudMonitoringDatasource class, defined in the …/datasource.ts file.

Read more

CloudWatch Data Source
Revise

The main implementation of the CloudWatch data source is provided by the CloudWatchDatasource class, which is responsible for handling different types of CloudWatch queries, including metrics, logs, and annotations.

Read more

Elasticsearch Data Source
Revise

• • •
Architecture Diagram for Elasticsearch Data Source
Architecture Diagram for Elasticsearch Data Source

The main implementation of the Elasticsearch data source in the Grafana application is located in the …/elasticsearch directory. This directory contains the core functionality for managing and rendering various aspects of the Elasticsearch query, including the query editor, metric and bucket aggregations, and data links.

Read more

Grafana Data Source
Revise

The main implementation of the Grafana data source is provided in the GrafanaDatasource class, located in the …/datasource.ts file. This class is responsible for handling data queries, annotations, and other data-related functionality for the Grafana data source plugin.

Read more

Grafana PostgreSQL Data Source
Revise

The main implementation of the Grafana PostgreSQL data source is provided in the …/grafana-postgresql-datasource directory. The key components and functionality are as follows:

Read more

Loki Data Source
Revise

The main implementation of the Loki data source in the Grafana data visualization platform is located in the …/loki directory. This directory contains the core functionality for rendering the Loki query editor, handling Loki annotations, providing a cheat sheet for the Loki query language, and managing the Loki log context UI.

Read more

InfluxDB Data Source
Revise

The main implementation of the InfluxDB data source in the Grafana application is handled by the InfluxDatasource class, defined in the …/datasource.ts file. This class provides the core functionality for querying data, handling annotations, and retrieving metadata from an InfluxDB time series database.

Read more

Prometheus Data Source
Revise

The main implementation of the Prometheus data source in the Grafana application is located in the …/prometheus directory. This directory contains the core functionality for querying, visualizing, and managing Prometheus data within the Grafana ecosystem.

Read more

Tempo Data Source
Revise

The main implementation of the Tempo data source is located in the …/tempo directory. This directory contains several sub-directories and files that provide various features and capabilities for the Tempo data source plugin.

Read more

Panel Visualizations
Revise

The Grafana data visualization platform provides a wide range of panel visualizations, each with its own implementation and functionality. These panel plugins allow users to display data in various formats, including time series graphs, heatmaps, gauges, histograms, and more.

Read more

Alert List Panel
Revise

• • •
Architecture Diagram for Alert List Panel
Architecture Diagram for Alert List Panel

The Alert List panel in the Grafana monitoring platform is responsible for displaying a list of alerts, allowing users to view and interact with the current state of alerts or recent alert state changes. The core functionality of the Alert List panel is implemented in the …/alertlist directory.

Read more

Annotation List Panel
Revise

The Annotation List panel is a core feature of the Grafana data visualization platform, allowing users to quickly collect, filter, and access annotations for easy reference or referral. The main implementation of this panel is found in the …/annolist directory.

Read more

Bar Chart Panel
Revise

The implementation of the Bar Chart panel in the Grafana data visualization tool is primarily handled by the BarChartPanel component in the …/BarChartPanel.tsx file.

Read more

Bar Gauge Panel
Revise

• • •
Architecture Diagram for Bar Gauge Panel
Architecture Diagram for Bar Gauge Panel

The implementation of the Bar Gauge panel in the Grafana data visualization platform is primarily handled in the …/bargauge directory. The key components and functionality are as follows:

Read more

Candlestick Panel
Revise

• • •
Architecture Diagram for Candlestick Panel
Architecture Diagram for Candlestick Panel

The Candlestick panel in the Grafana data visualization platform is responsible for rendering a candlestick chart, which is commonly used to display the price movements of securities, derivatives, or currencies.

Read more

Canvas Panel
Revise

• • •
Architecture Diagram for Canvas Panel
Architecture Diagram for Canvas Panel

The Canvas Panel in the Grafana application is implemented in the …/canvas directory. The main component responsible for rendering and managing the canvas-based visualization is the CanvasPanel class, defined in the …/CanvasPanel.tsx file.

Read more

Dashboard List Panel
Revise

• • •
Architecture Diagram for Dashboard List Panel
Architecture Diagram for Dashboard List Panel

The Dashboard List panel is a Grafana panel plugin that allows users to display a list of dashboards based on various criteria, such as starred dashboards, recently viewed dashboards, and dashboards matching a search query.

Read more

Datagrid Panel
Revise

The Datagrid Panel in the Grafana project is a core panel plugin that allows users to view, edit, and manipulate tabular data within the Grafana application. The main implementation of this panel is located in the …/datagrid directory.

Read more

Debug Panel
Revise

The Debug Panel in Grafana is a panel plugin that provides various debugging tools and information to help users debug their panels. The main implementation of this panel is in the …/DebugPanel.tsx file.

Read more

Flame Graph Panel
Revise

• • •
Architecture Diagram for Flame Graph Panel
Architecture Diagram for Flame Graph Panel

The Flame Graph panel in the Grafana application is implemented in the …/flamegraph directory. The main functionality is handled by the FlameGraphPanel component, which is responsible for rendering the flame graph visualization.

Read more

Geomap Panel
Revise

• • •
Architecture Diagram for Geomap Panel
Architecture Diagram for Geomap Panel

The Geomap panel in the Grafana visualization plugin is responsible for rendering geographic data on a map. The core functionality of the Geomap panel is implemented in the …/ directory.

Read more

Node Graph Panel
Revise

The Node Graph panel in the Grafana nodeGraph plugin provides a comprehensive visualization of a directed graph or network. The core functionality of this panel is implemented in the …/NodeGraph.tsx file.

Read more

Time Series Panel
Revise

• • •
Architecture Diagram for Time Series Panel
Architecture Diagram for Time Series Panel

The TimeSeriesPanel component in the …/TimeSeriesPanel.tsx file is responsible for rendering a time series panel in the Grafana visualization tool. It handles the display of time series data, annotations, thresholds, and various plugins that enhance the functionality of the panel.

Read more

Table Panel
Revise

The core functionality of the Table Panel in the Grafana data visualization platform is to render a table-based visualization. The TablePanel component, defined in …/TablePanel.tsx, is responsible for this functionality.

Read more

XY Chart Panel
Revise

• • •
Architecture Diagram for XY Chart Panel
Architecture Diagram for XY Chart Panel

The XY Chart panel in the Grafana data visualization platform provides a flexible way to plot arbitrary X vs Y data in a graph. The core functionality of this panel is implemented in the …/xychart directory.

Read more

Configuration and Settings
Revise

• • •
Architecture Diagram for Configuration and Settings
Architecture Diagram for Configuration and Settings

The …/src directory contains the core functionality and data types used throughout the Grafana data visualization platform. This directory covers a wide range of functionality, including configuration and settings management.

Read more

Themes
Revise

• • •
Architecture Diagram for Themes
Architecture Diagram for Themes

The …/themes directory in the Grafana project provides a comprehensive set of utilities and functionality for managing and customizing the visual themes of the Grafana application.

Read more

Date and Time Handling
Revise

• • •
Architecture Diagram for Date and Time Handling
Architecture Diagram for Date and Time Handling

The …/datetime directory contains a comprehensive set of utilities and functionality for handling date and time-related operations in the Grafana application. This includes:

Read more

Value Formatting
Revise

The grafana-data/src/valueFormats directory contains a collection of modules and utilities for formatting various types of values, including numerical, date/time, and boolean values.

Read more

Explore Functionality
Revise

• • •
Architecture Diagram for Explore Functionality
Architecture Diagram for Explore Functionality

The Grafana Explore feature provides a powerful and flexible interface for users to focus on querying data without the overhead of building dashboards. The core functionality of the Explore feature is implemented across several directories and files in the Grafana codebase, with each component handling a specific aspect of the overall functionality.

Read more

Trace View Functionality
Revise

The Trace View component in the Grafana Explore feature provides a comprehensive visualization and analysis experience for trace data. The core functionality includes:

Read more

Critical Path Computation
Revise

• • •
Architecture Diagram for Critical Path Computation
Architecture Diagram for Critical Path Computation

The core functionality for computing the critical path in a Jaeger trace is implemented in the …/index.tsx file. This file exports two key functions:

Read more

Trace View Header
Revise

• • •
Architecture Diagram for Trace View Header
Architecture Diagram for Trace View Header

The …/TracePageHeader directory contains the implementation of the header section for the Trace View in the Grafana Explore feature. This header displays key information about the trace, such as the trace name, duration, timestamp, and relevant HTTP tags (method, status, and URL). It also includes functionality for external links, trace actions, and span filters.

Read more

Trace Timeline Viewer
Revise

• • •
Architecture Diagram for Trace Timeline Viewer
Architecture Diagram for Trace Timeline Viewer

The core functionality of the Trace Timeline Viewer is implemented in the …/TraceTimelineViewer directory. This directory contains several key components that work together to provide a virtualized and interactive view of the trace timeline.

Read more

Common Components and Utilities
Revise

The …/common directory contains several reusable React components that are used throughout the Grafana Explore TraceView feature. These components provide common functionality, such as rendering breakable text, copy-to-clipboard buttons, external links, labeled lists, and search input fields.

Read more

Trace Data Modeling
Revise

• • •
Architecture Diagram for Trace Data Modeling
Architecture Diagram for Trace Data Modeling

The …/model directory contains the core functionality for handling and transforming trace data in the Grafana Explore module. This directory defines the main types and classes used to represent the structure and relationships within a trace, including TDdgService, TDdgOperation, TDdgPath, and PathElem. It also provides utility functions for processing and computing trace links, as well as transforming the trace data into a format suitable for the Grafana Explore application.

Read more

Selectors and Utilities
Revise

• • •
Architecture Diagram for Selectors and Utilities
Architecture Diagram for Selectors and Utilities

The utility functions and selectors related to the handling and visualization of trace data are located in the …/selectors directory.

Read more

Span Bar Settings
Revise

• • •
Architecture Diagram for Span Bar Settings
Architecture Diagram for Span Bar Settings

The SpanBarSettings component in the …/settings directory provides the functionality for configuring the span bar settings in the Grafana Explore TraceView component.

Read more

Logs Functionality
Revise

• • •
Architecture Diagram for Logs Functionality
Architecture Diagram for Logs Functionality

The core functionality for the Logs feature in the Grafana Explore section is handled by the …/Logs directory. This directory contains several key components and utilities that are responsible for rendering, interacting with, and managing log data within the Grafana Explore experience.

Read more

Live Logs
Revise

The LiveLogs component in the …/LiveLogs.tsx file is responsible for rendering live logs in real-time in the Grafana Explore feature. This component allows users to pause, resume, and clear the log stream.

Read more

Logs Deduplication and Filtering
Revise

• • •
Architecture Diagram for Logs Deduplication and Filtering
Architecture Diagram for Logs Deduplication and Filtering

The Logs component in the …/Logs.tsx file is responsible for rendering and managing the display of historical log data in the Grafana Explore feature. This component provides functionality for deduplicating and filtering log rows, allowing users to customize the way log data is presented.

Read more

Logs Container
Revise

The LogsContainer component is the central hub for managing the logs functionality in the Grafana Explore feature. It is responsible for the following key functionalities:

Read more

Logs Table
Revise

• • •
Architecture Diagram for Logs Table
Architecture Diagram for Logs Table

The LogsTable component in the …/LogsTable.tsx file is responsible for rendering a table-based view of the log data in the Grafana Explore feature. It provides functionality for sorting, filtering, and applying field overrides to the log data.

Read more

Logs Volume Functionality
Revise

• • •
Architecture Diagram for Logs Volume Functionality
Architecture Diagram for Logs Volume Functionality

The LogsVolumePanel component in the …/LogsVolumePanel.tsx file is responsible for rendering a logs volume histogram graph in the Grafana Explore feature. The component handles various scenarios, such as loading state, timeout errors, and errors in the logs volume data.

Read more

Explore State Management
Revise

The Redux state management logic for the Explore feature in Grafana is implemented in the …/state directory. This includes actions, reducers, and utility functions for managing the state of the Explore panes, data sources, queries, time ranges, rich history, and correlation editor.

Read more

Explore Hooks
Revise

The Grafana Explore feature utilizes several React hooks to handle various aspects of its functionality. These hooks play a crucial role in synchronizing the Explore state with the URL, managing keyboard shortcuts, updating the page title and navigation, and handling the split size of the Explore panes.

Read more

Rich History Functionality
Revise

• • •
Architecture Diagram for Rich History Functionality
Architecture Diagram for Rich History Functionality

The Rich History feature in the Grafana Explore view allows users to view, filter, and interact with their past queries. The core functionality is implemented in the following files and components:

Read more

Prometheus List View
Revise

• • •
Architecture Diagram for Prometheus List View
Architecture Diagram for Prometheus List View

The …/PrometheusListView directory contains the components and utilities responsible for rendering the Prometheus list view in the Grafana Explore UI. The main functionality includes transforming Prometheus query results into a format suitable for display in a virtualized list, rendering the list items with expandable attributes, and providing functionality for copying the raw query string to the clipboard.

Read more

Explore Utilities
Revise

• • •
Architecture Diagram for Explore Utilities
Architecture Diagram for Explore Utilities

The …/utils directory contains a wide range of utility functions and services used throughout the Grafana Explore feature. These utilities are responsible for processing and decorating data frames from different data sources, such as graphs, logs, tables, and flame graphs, to prepare them for display in the Explore view.

Read more

Explore Extensions
Revise

• • •
Architecture Diagram for Explore Extensions
Architecture Diagram for Explore Extensions

The functionality for extending the Explore feature in Grafana is provided in the …/extensions directory. This includes the implementation of the "Add to Dashboard" and "Add Correlation" functionality.

Read more

Explore Graph
Revise

The core functionality for rendering a graph visualization in the Grafana Explore feature is provided by the ExploreGraph component and related utility functions.

Read more

Logs Utilities
Revise

The …/utils directory contains several utility files that provide functionality related to the Logs feature in the Grafana Explore section.

Read more

Content Outline
Revise

• • •
Architecture Diagram for Content Outline
Architecture Diagram for Content Outline

The implementation of the content outline feature in the Grafana Explore panel is handled in the …/ContentOutline directory. The main components and functionality are:

Read more

Explore Functionality Tests
Revise

The …/spec directory contains unit tests for the Explore feature in Grafana. The tests cover various aspects of the Explore functionality, including:

Read more

Internationalization and Localization
Revise

The core functionality for handling internationalization and localization in the Grafana application is implemented in the …/internationalization directory. This directory contains the necessary components and utilities to set up the i18next library for managing translations, provide utility functions for changing the language and formatting dates, and export a custom Trans component for rendering translated content.

Read more

Internationalization Constants
Revise

The constants.ts file in the Grafana internationalization module defines various constants and language definitions for supporting multiple languages in the Grafana application.

Read more

Internationalization Setup
Revise

The grafana/public/app/core/internationalization/index.tsx file is responsible for setting up the internationalization and localization functionality in the Grafana application. It initializes the i18next library, which is a popular internationalization framework for JavaScript, and provides utility functions for managing the current language and formatting dates.

Read more

Translated Content Rendering
Revise

• • •
Architecture Diagram for Translated Content Rendering
Architecture Diagram for Translated Content Rendering

The Trans component and related utility functions in the …/index.tsx file are responsible for rendering translated content in the Grafana application.

Read more

Utility Functions and Services
Revise

The Grafana codebase provides a wide range of utility functions and services that are used throughout the application. These utilities cover various aspects of the application, including data handling, event management, and geo layer functionality.

Read more

Registry and Registry-related Functionality
Revise

• • •
Architecture Diagram for Registry and Registry-related Functionality
Architecture Diagram for Registry and Registry-related Functionality

The Registry class in the grafana-data package provides a flexible and extensible way to manage and access various types of items, such as plugins or extensions, within the Grafana ecosystem. The registry allows for the registration, retrieval, and selection of these items, with support for features like aliasing, exclusion from pickers, and plugin state management.

Read more

CSV Utilities
Revise

• • •
Architecture Diagram for CSV Utilities
Architecture Diagram for CSV Utilities

The csv.ts file in the grafana-data package provides functionality for reading and writing CSV (Comma-Separated Values) data in Grafana. The key features include:

Read more

Data Source Utilities
Revise

The grafana-data/src/utils/datasource.ts file contains utility functions related to data sources in the Grafana application. These functions provide functionality for working with data source references, updating data source options, and handling secure JSON data.

Read more

Deprecation Warning Utility
Revise

• • •
Architecture Diagram for Deprecation Warning Utility
Architecture Diagram for Deprecation Warning Utility

The deprecationWarning() function in the …/deprecationWarning.ts file provides a utility for logging deprecation warnings to the console. This function helps inform users about deprecated functionality in the Grafana application and suggests alternative options where applicable.

Read more

Array and Number Utilities
Revise

The arrayUtils.ts file provides utility functions for working with arrays, including:

Read more

Location and URL Utilities
Revise

• • •
Architecture Diagram for Location and URL Utilities
Architecture Diagram for Location and URL Utilities

The location.ts and url.ts files in the …/utils directory provide a set of utility functions for working with URLs and the browser's location object in the Grafana application.

Read more

Value Mapping Utilities
Revise

• • •
Architecture Diagram for Value Mapping Utilities
Architecture Diagram for Value Mapping Utilities

The valueMappings.ts file in the Grafana data package provides utility functions for handling value mappings in Grafana. Value mappings are used to transform data values into more meaningful or readable text representations.

Read more