红帽全球峰会7.6.2.60. QueryBrowser
A component that renders a graph of the results from a Prometheus PromQL query along with controls for interacting with the graph.
Example
<QueryBrowser
defaultTimespan={15 * 60 * 1000}
namespace={namespace}
pollInterval={30 * 1000}
queries={[
'process_resident_memory_bytes{job="console"}',
'sum(irate(container_network_receive_bytes_total[6h:5m])) by (pod)',
]}
/>| Parameter Name | Description |
|---|---|
|
| (optional) Base URL of an API endpoint that handles PromQL queries. If provided, this is used instead of the default API for fetching data. |
|
| (optional) The default number of data samples plotted for each data series. If there are many data series, QueryBrowser might automatically pick a lower number of data samples than specified here. |
|
| (optional) The default timespan for the graph in milliseconds - defaults to 1,800,000 (30 minutes). |
|
| (optional) Disable (do not display) data series with these exact label / value pairs. |
|
| (optional) Flag to disable the graph zoom controls. |
|
| (optional) Optionally filter the returned data series to only those that match these label / value pairs. |
|
| (optional) Set the end time for the displayed time range rather than showing data up to the current time. |
|
| (optional) Function that returns a string to use as the title for a single data series. |
|
| (optional) Component for rendering a link to another page (for example getting more information about this query). |
|
| (optional) Flag to hide the graph controls for changing the graph timespan, and so on. |
|
| (optional) Flag to display a stacked graph instead of a line graph. If showStackedControl is set, it is still possible for the user to switch to a line graph. |
|
| (optional) If provided, data is only returned for this namespace (only series that have this namespace label). |
|
| (optional) Callback called when the graph is zoomed. |
|
| (optional) If set, determines how often the graph is updated to show the latest data (in milliseconds). |
|
| Array of PromQL queries to run and display the results in the graph. |
|
| (optional) Flag to enable displaying a legend below the graph. |
|
| Flag to enable displaying a graph control for switching between stacked graph mode and line graph mode. |
|
| (optional) The timespan that should be covered by the graph in milliseconds. |
|
| (optional) Units to display on the Y-axis and in the tooltip. |
'%20d='M201.5%20305.5c-13.8%200-24.9-11.1-24.9-24.6%200-13.8%2011.1-24.9%2024.9-24.9%2013.6%200%2024.6%2011.1%2024.6%2024.9%200%2013.6-11.1%2024.6-24.6%2024.6zM504%20256c0%20137-111%20248-248%20248S8%20393%208%20256%20119%208%20256%208s248%20111%20248%20248zm-132.3-41.2c-9.4%200-17.7%203.9-23.8%2010-22.4-15.5-52.6-25.5-86.1-26.6l17.4-78.3%2055.4%2012.5c0%2013.6%2011.1%2024.6%2024.6%2024.6%2013.8%200%2024.9-11.3%2024.9-24.9s-11.1-24.9-24.9-24.9c-9.7%200-18%205.8-22.1%2013.8l-61.2-13.6c-3-.8-6.1%201.4-6.9%204.4l-19.1%2086.4c-33.2%201.4-63.1%2011.3-85.5%2026.8-6.1-6.4-14.7-10.2-24.1-10.2-34.9%200-46.3%2046.9-14.4%2062.8-1.1%205-1.7%2010.2-1.7%2015.5%200%2052.6%2059.2%2095.2%20132%2095.2%2073.1%200%20132.3-42.6%20132.3-95.2%200-5.3-.6-10.8-1.9-15.8%2031.3-16%2019.8-62.5-14.9-62.5zM302.8%20331c-18.2%2018.2-76.1%2017.9-93.6%200-2.2-2.2-6.1-2.2-8.3%200-2.5%202.5-2.5%206.4%200%208.6%2022.8%2022.8%2087.3%2022.8%20110.2%200%202.5-2.2%202.5-6.1%200-8.6-2.2-2.2-6.1-2.2-8.3%200zm7.7-75c-13.6%200-24.6%2011.1-24.6%2024.9%200%2013.6%2011.1%2024.6%2024.6%2024.6%2013.8%200%2024.9-11.1%2024.9-24.6%200-13.8-11-24.9-24.9-24.9z'/%3e%3c/svg%3e){kind=small}