Add support for multiple Prometheus queries

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
 

app/src/plugins/prometheus/PrometheusPage.tsx

@@ -131,7 +131,7 @@ const PrometheusPage: React.FunctionComponent<IPluginPageProps> = ({ name, descr
             <p>{data.error}</p>
           </Alert>
         ) : (
-          <PrometheusPageData metrics={data.metrics} />
+          <PrometheusPageData metrics={data.metrics} queries={options.queries} />
         )}
       </PageSection>
     </React.Fragment>

app/src/plugins/prometheus/PrometheusPageData.tsx

@@ -15,13 +15,15 @@ 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
 // chart will render all loaded metrics. When the user selects a specific metric, the chart will only render this
 // 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<IPrometheusPageDataProps> = ({
   metrics,
+  queries,
 }: IPrometheusPageDataProps) => {
   const [type, setType] = useState<string>('line');
   const [stacked, setStacked] = useState<boolean>(false);
@@ -79,7 +81,7 @@ const PrometheusPageData: React.FunctionComponent<IPrometheusPageDataProps> = ({
               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}
               <span style={{ float: 'right' }}>{metric.dataList[metric.dataList.length - 1].y}</span>
             </SimpleListItem>
           ))}

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<IPrometheusPageToolbarProps
     timeStart: timeStart,
   });
 
+  const addQuery = (): void => {
+    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<IPrometheusPageToolbarProps
         <ToolbarToggleGroup style={{ width: '100%' }} toggleIcon={<FilterIcon />} breakpoint="lg">
           <ToolbarGroup style={{ alignItems: 'flex-start', width: '100%' }}>
             <ToolbarItem style={{ width: '100%' }}>
-              <TextArea
-                aria-label="PromQL Query"
-                resizeOrientation="vertical"
-                rows={1}
-                type="text"
-                value={data.queries[0]}
-                onChange={(value): void => changeQuery(0, value)}
-                onKeyDown={onEnter}
-              />
+              <Flex style={{ width: '100%' }} direction={{ default: 'column' }} grow={{ default: 'grow' }}>
+                {data.queries.map((query, index) => (
+                  <FlexItem key={index}>
+                    <InputGroup>
+                      <TextArea
+                        aria-label={`PromQL Query ${index}`}
+                        resizeOrientation="vertical"
+                        rows={1}
+                        type="text"
+                        value={query}
+                        onChange={(value): void => changeQuery(index, value)}
+                        onKeyDown={onEnter}
+                      />
+                      {index === 0 ? (
+                        <Button variant={ButtonVariant.control} onClick={addQuery}>
+                          <PlusIcon />
+                        </Button>
+                      ) : (
+                        <Button variant={ButtonVariant.control} onClick={(): void => removeQuery(index)}>
+                          <MinusIcon />
+                        </Button>
+                      )}
+                    </InputGroup>
+                  </FlexItem>
+                ))}
+              </Flex>
             </ToolbarItem>
             <ToolbarItem>
               <Options