UI Support for Store filtering

CHANGELOG.md

@@ -15,6 +15,7 @@ We use *breaking :warning:* to mark changes that are not backward compatible (re
 
 ### Added
 
+- [#3166](https://github.com/thanos-io/thanos/pull/3166) UIs: Added UI for passing a `storeMatch[]` parameter to queries.
 - [#3184](https://github.com/thanos-io/thanos/pull/3184) Compact: Fix web.prefix-header to use &wc.prefixHeaderName
 - [#3181](https://github.com/thanos-io/thanos/pull/3181) Logging: Add debug level logging for responses between 300-399
 - [#3133](https://github.com/thanos-io/thanos/pull/3133) Query: Allow passing a `storeMatch[]` to Labels APIs. Also time range metadata based store filtering is supported on Labels APIs.

pkg/ui/react-app/package.json

@@ -16,6 +16,7 @@
     "@types/react-copy-to-clipboard": "^4.3.0",
     "@types/react-dom": "^16.8.0",
     "@types/react-resize-detector": "^4.0.2",
+    "@types/react-select": "^3.0.20",
     "@types/sanitize-html": "^1.20.2",
     "bootstrap": "^4.2.1",
     "css.escape": "^1.5.1",
@@ -37,6 +38,7 @@
     "react-dom": "^16.7.0",
     "react-resize-detector": "^4.2.1",
     "react-scripts": "^3.4.0",
+    "react-select": "^3.1.0",
     "react-test-renderer": "^16.9.0",
     "reactstrap": "^8.0.1",
     "sanitize-html": "^1.20.1",

pkg/ui/react-app/src/App.css

@@ -251,3 +251,12 @@ button.execute-btn {
   display: block;
   font-family: monospace;
 }
+
+.store-filter-wrapper {
+  display: flex;
+}
+
+.store-filter-label {
+  width: 100px;
+  padding: 5px;
+}

pkg/ui/react-app/src/pages/graph/Panel.test.tsx

@@ -21,6 +21,7 @@ const defaultProps = {
     maxSourceResolution: 'auto',
     useDeduplication: true,
     usePartialResponse: false,
+    storeMatches: [],
   },
   onOptionsChanged: (): void => {
     // Do nothing.
@@ -37,6 +38,7 @@ const defaultProps = {
   onExecuteQuery: (): void => {
     // Do nothing.
   },
+  stores: [],
 };
 
 describe('Panel', () => {
@@ -96,6 +98,7 @@ describe('Panel', () => {
       maxSourceResolution: 'auto',
       useDeduplication: true,
       usePartialResponse: false,
+      storeMatches: [],
     };
     const graphPanel = mount(<Panel {...defaultProps} options={options} />);
     const controls = graphPanel.find(GraphControls);

pkg/ui/react-app/src/pages/graph/Panel.tsx

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 
 import { UncontrolledAlert, Button, Col, Nav, NavItem, NavLink, Row, TabContent, TabPane } from 'reactstrap';
+import Select from 'react-select';
 
 import moment from 'moment-timezone';
 
@@ -11,6 +12,7 @@ import { GraphTabContent } from './GraphTabContent';
 import DataTable from './DataTable';
 import TimeInput from './TimeInput';
 import QueryStatsView, { QueryStats } from './QueryStatsView';
+import { Store } from '../../thanos/pages/stores/store';
 import PathPrefixProps from '../../types/PathPrefixProps';
 import { QueryParams } from '../../types/types';
 
@@ -23,6 +25,7 @@ interface PanelProps {
   metricNames: string[];
   removePanel: () => void;
   onExecuteQuery: (query: string) => void;
+  stores: Store[];
 }
 
 interface PanelState {
@@ -44,6 +47,7 @@ export interface PanelOptions {
   maxSourceResolution: string;
   useDeduplication: boolean;
   usePartialResponse: boolean;
+  storeMatches: Store[];
 }
 
 export enum PanelType {
@@ -61,6 +65,7 @@ export const PanelDefaultOptions: PanelOptions = {
   maxSourceResolution: '0s',
   useDeduplication: true,
   usePartialResponse: false,
+  storeMatches: [],
 };
 
 class Panel extends Component<PanelProps & PathPrefixProps, PanelState> {
@@ -80,6 +85,7 @@ class Panel extends Component<PanelProps & PathPrefixProps, PanelState> {
 
     this.handleChangeDeduplication = this.handleChangeDeduplication.bind(this);
     this.handleChangePartialResponse = this.handleChangePartialResponse.bind(this);
+    this.handleStoreMatchChange = this.handleStoreMatchChange.bind(this);
   }
 
   componentDidUpdate({ options: prevOpts }: PanelProps) {
@@ -91,6 +97,7 @@ class Panel extends Component<PanelProps & PathPrefixProps, PanelState> {
       maxSourceResolution,
       useDeduplication,
       usePartialResponse,
+      // TODO: Add support for Store Matches
     } = this.props.options;
     if (
       prevOpts.endTime !== endTime ||
@@ -100,6 +107,7 @@ class Panel extends Component<PanelProps & PathPrefixProps, PanelState> {
       prevOpts.maxSourceResolution !== maxSourceResolution ||
       prevOpts.useDeduplication !== useDeduplication ||
       prevOpts.usePartialResponse !== usePartialResponse
+      // Check store matches
     ) {
       this.executeQuery();
     }
@@ -138,6 +146,11 @@ class Panel extends Component<PanelProps & PathPrefixProps, PanelState> {
       partial_response: this.props.options.usePartialResponse.toString(),
     });
 
+    // Add storeMatches to query params.
+    this.props.options.storeMatches?.forEach((store: Store) =>
+      params.append('storeMatch[]', `{__address__="${store.name}"}`)
+    );
+
     let path: string;
     switch (this.props.options.type) {
       case 'graph':
@@ -255,8 +268,12 @@ class Panel extends Component<PanelProps & PathPrefixProps, PanelState> {
     this.setOptions({ usePartialResponse: event.target.checked });
   };
 
+  handleStoreMatchChange = (selectedStores: any): void => {
+    this.setOptions({ storeMatches: selectedStores || [] });
+  };
+
   render() {
-    const { pastQueries, metricNames, options, id } = this.props;
+    const { pastQueries, metricNames, options, id, stores } = this.props;
     return (
       <div className="panel">
         <Row>
@@ -296,6 +313,25 @@ class Panel extends Component<PanelProps & PathPrefixProps, PanelState> {
             </Checkbox>
           </Col>
         </Row>
+        {stores?.length > 0 && (
+          <Row>
+            <Col>
+              <div className="store-filter-wrapper">
+                <label className="store-filter-label">Store Filter:</label>
+                <Select
+                  defaultValue={options.storeMatches}
+                  options={stores}
+                  isMulti
+                  getOptionLabel={(option: Store) => option.name}
+                  getOptionValue={(option: Store) => option.name}
+                  closeMenuOnSelect={false}
+                  styles={{ container: (provided, state) => ({ ...provided, marginBottom: 20, zIndex: 3, width: '100%' }) }}
+                  onChange={this.handleStoreMatchChange}
+                />
+              </div>
+            </Col>
+          </Row>
+        )}
         <Row>
           <Col>
             <Nav tabs>

pkg/ui/react-app/src/pages/graph/PanelList.tsx

@@ -5,9 +5,12 @@ import { UncontrolledAlert, Button } from 'reactstrap';
 import Panel, { PanelOptions, PanelDefaultOptions } from './Panel';
 import Checkbox from '../../components/Checkbox';
 import PathPrefixProps from '../../types/PathPrefixProps';
+import { StoreListProps } from '../../thanos/pages/stores/Stores';
+import { Store } from '../../thanos/pages/stores/store';
 import { generateID, decodePanelOptionsFromQueryString, encodePanelOptionsToQueryString, callAll } from '../../utils';
 import { useFetch } from '../../hooks/useFetch';
 import { useLocalStorage } from '../../hooks/useLocalStorage';
+import { withStatusIndicator } from '../../components/withStatusIndicator';
 
 export type PanelMeta = { key: string; options: PanelOptions; id: string };
 
@@ -21,19 +24,30 @@ interface PanelListProps extends PathPrefixProps, RouteComponentProps {
   metrics: string[];
   useLocalTime: boolean;
   queryHistoryEnabled: boolean;
+  stores: StoreListProps;
 }
 
 export const PanelListContent: FC<PanelListProps> = ({
   metrics = [],
   useLocalTime,
   pathPrefix,
   queryHistoryEnabled,
+  stores = {},
   ...rest
 }) => {
   const [panels, setPanels] = useState(rest.panels);
   const [historyItems, setLocalStorageHistoryItems] = useLocalStorage<string[]>('history', []);
+  const [storeData, setStoreData] = useState([] as Store[]);
 
   useEffect(() => {
+    // Convert stores data to a unified stores array.
+    let storeList: Store[] = [];
+    for (let type in stores) {
+      storeList.push(...stores[type]);
+    }
+    setStoreData(storeList);
+    // Clear selected stores for each panel.
+    panels.forEach((panel: PanelMeta) => (panel.options.storeMatches = []));
     !panels.length && addPanel();
     window.onpopstate = () => {
       const panels = decodePanelOptionsFromQueryString(window.location.search);
@@ -43,7 +57,7 @@ export const PanelListContent: FC<PanelListProps> = ({
     };
     // We want useEffect to act only as componentDidMount, but react still complains about the empty dependencies list.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [stores]);
 
   const handleExecuteQuery = (query: string) => {
     const isSimpleMetric = metrics.indexOf(query) !== -1;
@@ -99,6 +113,7 @@ export const PanelListContent: FC<PanelListProps> = ({
           metricNames={metrics}
           pastQueries={queryHistoryEnabled ? historyItems : []}
           pathPrefix={pathPrefix}
+          stores={storeData}
         />
       ))}
       <Button className="mb-3" color="primary" onClick={addPanel}>
@@ -108,12 +123,18 @@ export const PanelListContent: FC<PanelListProps> = ({
   );
 };
 
+const PanelListContentWithIndicator = withStatusIndicator(PanelListContent);
+
 const PanelList: FC<RouteComponentProps & PathPrefixProps> = ({ pathPrefix = '' }) => {
   const [delta, setDelta] = useState(0);
   const [useLocalTime, setUseLocalTime] = useLocalStorage('use-local-time', false);
   const [enableQueryHistory, setEnableQueryHistory] = useLocalStorage('enable-query-history', false);
+  const [debugMode, setDebugMode] = useState(false);
 
   const { response: metricsRes, error: metricsErr } = useFetch<string[]>(`${pathPrefix}/api/v1/label/__name__/values`);
+  const { response: storesRes, error: storesErr, isLoading: storesLoading } = useFetch<StoreListProps>(
+    `${pathPrefix}/api/v1/stores`
+  );
 
   const browserTime = new Date().getTime() / 1000;
   const { response: timeRes, error: timeErr } = useFetch<{ result: number[] }>(`${pathPrefix}/api/v1/query?query=time()`);
@@ -149,6 +170,14 @@ const PanelList: FC<RouteComponentProps & PathPrefixProps> = ({ pathPrefix = ''
       >
         Use local time
       </Checkbox>
+      <Checkbox
+        wrapperStyles={{ marginLeft: 20, display: 'inline-block' }}
+        id="debug-mode-checkbox"
+        defaultChecked={debugMode}
+        onChange={({ target }) => setDebugMode(target.checked)}
+      >
+        Enable Store Filtering
+      </Checkbox>
       {(delta > 30 || timeErr) && (
         <UncontrolledAlert color="danger">
           <strong>Warning: </strong>
@@ -163,12 +192,20 @@ const PanelList: FC<RouteComponentProps & PathPrefixProps> = ({ pathPrefix = ''
           Error fetching metrics list: Unexpected response status when fetching metric names: {metricsErr.message}
         </UncontrolledAlert>
       )}
-      <PanelListContent
+      {storesErr && (
+        <UncontrolledAlert color="danger">
+          <strong>Warning: </strong>
+          Error fetching stores list: Unexpected response status when fetching stores: {storesErr.message}
+        </UncontrolledAlert>
+      )}
+      <PanelListContentWithIndicator
         panels={decodePanelOptionsFromQueryString(window.location.search)}
         pathPrefix={pathPrefix}
         useLocalTime={useLocalTime}
         metrics={metricsRes.data}
+        stores={debugMode ? storesRes.data : {}}
         queryHistoryEnabled={enableQueryHistory}
+        isLoading={storesLoading}
       />
     </>
   );

pkg/ui/react-app/src/utils/index.ts

@@ -181,6 +181,9 @@ export const parseOption = (param: string): Partial<PanelOptions> => {
 
     case 'partial_response':
       return { usePartialResponse: decodedValue === '1' };
+
+    case 'store_matches':
+      return { storeMatches: JSON.parse(decodedValue) };
   }
   return {};
 };
@@ -201,6 +204,7 @@ export const toQueryString = ({ key, options }: PanelMeta) => {
     maxSourceResolution,
     useDeduplication,
     usePartialResponse,
+    storeMatches,
   } = options;
   const time = isPresent(endTime) ? formatTime(endTime) : false;
   const urlParams = [
@@ -211,6 +215,7 @@ export const toQueryString = ({ key, options }: PanelMeta) => {
     formatWithKey('max_source_resolution', maxSourceResolution),
     formatWithKey('deduplicate', useDeduplication ? 1 : 0),
     formatWithKey('partial_response', usePartialResponse ? 1 : 0),
+    formatWithKey('store_matches', JSON.stringify(storeMatches)),
     time ? `${formatWithKey('end_input', time)}&${formatWithKey('moment_input', time)}` : '',
     isPresent(resolution) ? formatWithKey('step_input', resolution) : '',
   ];

pkg/ui/react-app/src/utils/utils.test.ts

@@ -134,6 +134,26 @@ describe('Utils', () => {
   });
 
   describe('URL Params', () => {
+    const stores: any = [
+      {
+        name: 'thanos_sidecar_one:10901',
+        lastCheck: '2020-09-20T11:35:18.250713478Z',
+        lastError: null,
+        labelSets: [
+          {
+            labels: [
+              {
+                name: 'monitor',
+                value: 'prometheus_one',
+              },
+            ],
+          },
+        ],
+        minTime: 1600598100000,
+        maxTime: 9223372036854776000,
+      },
+    ];
+
     const panels: any = [
       {
         key: '0',
@@ -147,6 +167,7 @@ describe('Utils', () => {
           useDeduplication: true,
           usePartialResponse: false,
           type: PanelType.Graph,
+          storeMatches: [],
         },
       },
       {
@@ -161,11 +182,12 @@ describe('Utils', () => {
           useDeduplication: false,
           usePartialResponse: true,
           type: PanelType.Table,
+          storeMatches: stores,
         },
       },
     ];
     const query =
-      '?g0.expr=rate(node_cpu_seconds_total%7Bmode%3D%22system%22%7D%5B1m%5D)&g0.tab=0&g0.stacked=0&g0.range_input=1h&g0.max_source_resolution=raw&g0.deduplicate=1&g0.partial_response=0&g0.end_input=2019-10-25%2023%3A37%3A00&g0.moment_input=2019-10-25%2023%3A37%3A00&g1.expr=node_filesystem_avail_bytes&g1.tab=1&g1.stacked=0&g1.range_input=1h&g1.max_source_resolution=auto&g1.deduplicate=0&g1.partial_response=1';
+      '?g0.expr=rate(node_cpu_seconds_total%7Bmode%3D%22system%22%7D%5B1m%5D)&g0.tab=0&g0.stacked=0&g0.range_input=1h&g0.max_source_resolution=raw&g0.deduplicate=1&g0.partial_response=0&g0.store_matches=%5B%5D&g0.end_input=2019-10-25%2023%3A37%3A00&g0.moment_input=2019-10-25%2023%3A37%3A00&g1.expr=node_filesystem_avail_bytes&g1.tab=1&g1.stacked=0&g1.range_input=1h&g1.max_source_resolution=auto&g1.deduplicate=0&g1.partial_response=1&g1.store_matches=%5B%7B%22name%22%3A%22thanos_sidecar_one%3A10901%22%2C%22lastCheck%22%3A%222020-09-20T11%3A35%3A18.250713478Z%22%2C%22lastError%22%3Anull%2C%22labelSets%22%3A%5B%7B%22labels%22%3A%5B%7B%22name%22%3A%22monitor%22%2C%22value%22%3A%22prometheus_one%22%7D%5D%7D%5D%2C%22minTime%22%3A1600598100000%2C%22maxTime%22%3A9223372036854776000%7D%5D';
 
     describe('decodePanelOptionsFromQueryString', () => {
       it('returns [] when query is empty', () => {
@@ -204,6 +226,13 @@ describe('Utils', () => {
       it('should parse partial_response', () => {
         expect(parseOption('partial_response=1')).toEqual({ usePartialResponse: true });
       });
+      it('it should parse store_matches', () => {
+        expect(
+          parseOption(
+            'store_matches=%5B%7B%22name%22%3A%22thanos_sidecar_one%3A10901%22%2C%22lastCheck%22%3A%222020-09-20T11%3A35%3A18.250713478Z%22%2C%22lastError%22%3Anull%2C%22labelSets%22%3A%5B%7B%22labels%22%3A%5B%7B%22name%22%3A%22monitor%22%2C%22value%22%3A%22prometheus_one%22%7D%5D%7D%5D%2C%22minTime%22%3A1600598100000%2C%22maxTime%22%3A9223372036854776000%7D%5D'
+          )
+        ).toEqual({ storeMatches: stores });
+      });
 
       describe('step_input', () => {
         it('should return step_input parsed if > 0', () => {
@@ -249,10 +278,11 @@ describe('Utils', () => {
               maxSourceResolution: 'raw',
               useDeduplication: true,
               usePartialResponse: false,
+              storeMatches: [],
             },
           })
         ).toEqual(
-          'g0.expr=foo&g0.tab=0&g0.stacked=1&g0.range_input=0y&g0.max_source_resolution=raw&g0.deduplicate=1&g0.partial_response=0&g0.step_input=1'
+          'g0.expr=foo&g0.tab=0&g0.stacked=1&g0.range_input=0y&g0.max_source_resolution=raw&g0.deduplicate=1&g0.partial_response=0&g0.store_matches=%5B%5D&g0.step_input=1'
         );
       });
     });