diff --git a/CHANGELOG.md b/CHANGELOG.md index d3c457c2c..a2e57adfd 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -16,6 +16,7 @@ NOTE: As semantic versioning states all 0.y.z releases can contain breaking chan - [#10](https://github.com/kobsio/kobs/pull/10): Add Elasticsearch as datasource for Application logs. - [#12](https://github.com/kobsio/kobs/pull/12): :warning: *Breaking change:* :warning: Add plugin system and readd Prometheus and Elasticsearch as plugins. - [#13](https://github.com/kobsio/kobs/pull/13): Add Jaeger plugin to show traces for an Application and to compare traces. +- [#16](https://github.com/kobsio/kobs/pull/16): Add support for multiple queries in the Prometheus plugin page. ### Fixed diff --git a/app/src/plugins/prometheus/PrometheusPage.tsx b/app/src/plugins/prometheus/PrometheusPage.tsx index 1c6b9e127..581fce836 100644 --- a/app/src/plugins/prometheus/PrometheusPage.tsx +++ b/app/src/plugins/prometheus/PrometheusPage.tsx @@ -131,7 +131,7 @@ const PrometheusPage: React.FunctionComponent = ({ name, descr

{data.error}

) : ( - + )} diff --git a/app/src/plugins/prometheus/PrometheusPageData.tsx b/app/src/plugins/prometheus/PrometheusPageData.tsx index e4f88e486..8bcc77866 100644 --- a/app/src/plugins/prometheus/PrometheusPageData.tsx +++ b/app/src/plugins/prometheus/PrometheusPageData.tsx @@ -15,6 +15,7 @@ import PrometheusChartDefault from 'plugins/prometheus/PrometheusChartDefault'; interface IPrometheusPageDataProps { metrics: Metrics.AsObject[]; + queries: string[]; } // PrometheusPageData is used to render the fetched metrics, for the user provided queries. By default the corresponding @@ -22,6 +23,7 @@ interface IPrometheusPageDataProps { // metrics. A user can also decided, how he wants to see his data: As line vs. area chart or unstacked vs. stacked. const PrometheusPageData: React.FunctionComponent = ({ metrics, + queries, }: IPrometheusPageDataProps) => { const [type, setType] = useState('line'); const [stacked, setStacked] = useState(false); @@ -79,7 +81,7 @@ const PrometheusPageData: React.FunctionComponent = ({ onClick={(): void => select(metric)} isActive={selectedMetrics.length === 1 && selectedMetrics[0].label === metric.label} > - {metric.label} + {metric.label === '{}' && metrics.length === queries.length ? queries[index] : metric.label} {metric.dataList[metric.dataList.length - 1].y} ))} diff --git a/app/src/plugins/prometheus/PrometheusPageToolbar.tsx b/app/src/plugins/prometheus/PrometheusPageToolbar.tsx index 00034acc3..c479876ad 100644 --- a/app/src/plugins/prometheus/PrometheusPageToolbar.tsx +++ b/app/src/plugins/prometheus/PrometheusPageToolbar.tsx @@ -1,6 +1,9 @@ import { Button, ButtonVariant, + Flex, + FlexItem, + InputGroup, TextArea, Toolbar, ToolbarContent, @@ -10,6 +13,8 @@ import { } from '@patternfly/react-core'; import React, { useState } from 'react'; import FilterIcon from '@patternfly/react-icons/dist/js/icons/filter-icon'; +import MinusIcon from '@patternfly/react-icons/dist/js/icons/minus-icon'; +import PlusIcon from '@patternfly/react-icons/dist/js/icons/plus-icon'; import SearchIcon from '@patternfly/react-icons/dist/js/icons/search-icon'; import Options, { IAdditionalFields } from 'components/Options'; @@ -38,6 +43,18 @@ const PrometheusPageToolbar: React.FunctionComponent { + const tmpQueries = [...data.queries]; + tmpQueries.push(''); + setData({ ...data, queries: tmpQueries }); + }; + + const removeQuery = (index: number): void => { + const tmpQueries = [...data.queries]; + tmpQueries.splice(index, 1); + setData({ ...data, queries: tmpQueries }); + }; + // changeQuery changes the value of a single query. const changeQuery = (index: number, value: string): void => { const tmpQueries = [...data.queries]; @@ -77,15 +94,32 @@ const PrometheusPageToolbar: React.FunctionComponent} breakpoint="lg"> -