ui: React: Separate dedupe and partial response checkboxes per panel

CHANGELOG.md

@@ -24,6 +24,10 @@ We use *breaking* word for marking changes that are not backward compatible (rel
 - [#2832](https://github.com/thanos-io/thanos/pull/2832) ui: React: Add runtime and build info page
 - [#2305](https://github.com/thanos-io/thanos/pull/2305) Receive,Sidecar,Ruler: Propagate correct (stricter) MinTime for no-block TSDBs.
 
+### Changed
+
+- [#2902](https://github.com/thanos-io/thanos/pull/2902) ui: React: Separate dedupe and partial response checkboxes per panel.
+
 ## [v0.14.0](https://github.com/thanos-io/thanos/releases/tag/v0.14.0) - 2020.07.10
 
 ### Fixed

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

@@ -9,16 +9,18 @@ import DataTable from './DataTable';
 import { GraphTabContent } from './GraphTabContent';
 
 const defaultProps = {
+  id: 'abc123',
   useLocalTime: false,
-  useDeduplication: true,
-  usePartialResponse: false,
   options: {
     expr: 'prometheus_engine',
     type: PanelType.Table,
     range: 10,
     endTime: 1572100217898,
     resolution: 28,
     stacked: false,
+    maxSourceResolution: 'auto',
+    useDeduplication: true,
+    usePartialResponse: false,
   },
   onOptionsChanged: (): void => {
     // Do nothing.
@@ -91,6 +93,9 @@ describe('Panel', () => {
       endTime: 1572100217898,
       resolution: 28,
       stacked: false,
+      maxSourceResolution: 'auto',
+      useDeduplication: true,
+      usePartialResponse: false,
     };
     const graphPanel = mount(<Panel {...defaultProps} options={options} />);
     const controls = graphPanel.find(GraphControls);
@@ -101,6 +106,7 @@ describe('Panel', () => {
     expect(controls.prop('resolution')).toEqual(options.resolution);
     expect(controls.prop('stacked')).toEqual(options.stacked);
     expect(graph.prop('stacked')).toEqual(options.stacked);
+    expect(controls.prop('maxSourceResolution')).toEqual(options.maxSourceResolution);
   });
 
   describe('when switching between modes', () => {

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

@@ -4,6 +4,7 @@ import { Alert, Button, Col, Nav, NavItem, NavLink, Row, TabContent, TabPane } f
 
 import moment from 'moment-timezone';
 
+import Checkbox from '../../components/Checkbox';
 import ExpressionInput from './ExpressionInput';
 import GraphControls from './GraphControls';
 import { GraphTabContent } from './GraphTabContent';
@@ -14,11 +15,10 @@ import PathPrefixProps from '../../types/PathPrefixProps';
 import { QueryParams } from '../../types/types';
 
 interface PanelProps {
+  id: string;
   options: PanelOptions;
   onOptionsChanged: (opts: PanelOptions) => void;
   useLocalTime: boolean;
-  useDeduplication: boolean;
-  usePartialResponse: boolean;
   pastQueries: string[];
   metricNames: string[];
   removePanel: () => void;
@@ -42,6 +42,8 @@ export interface PanelOptions {
   resolution: number | null; // Resolution in seconds.
   stacked: boolean;
   maxSourceResolution: string;
+  useDeduplication: boolean;
+  usePartialResponse: boolean;
 }
 
 export enum PanelType {
@@ -57,6 +59,8 @@ export const PanelDefaultOptions: PanelOptions = {
   resolution: null,
   stacked: false,
   maxSourceResolution: '0s',
+  useDeduplication: true,
+  usePartialResponse: false,
 };
 
 class Panel extends Component<PanelProps & PathPrefixProps, PanelState> {
@@ -73,16 +77,29 @@ class Panel extends Component<PanelProps & PathPrefixProps, PanelState> {
       stats: null,
       exprInputValue: props.options.expr,
     };
+
+    this.handleChangeDeduplication = this.handleChangeDeduplication.bind(this);
+    this.handleChangePartialResponse = this.handleChangePartialResponse.bind(this);
   }
 
   componentDidUpdate({ options: prevOpts }: PanelProps) {
-    const { endTime, range, resolution, type, maxSourceResolution } = this.props.options;
+    const {
+      endTime,
+      range,
+      resolution,
+      type,
+      maxSourceResolution,
+      useDeduplication,
+      usePartialResponse,
+    } = this.props.options;
     if (
       prevOpts.endTime !== endTime ||
       prevOpts.range !== range ||
       prevOpts.resolution !== resolution ||
       prevOpts.type !== type ||
-      prevOpts.maxSourceResolution !== maxSourceResolution
+      prevOpts.maxSourceResolution !== maxSourceResolution ||
+      prevOpts.useDeduplication !== useDeduplication ||
+      prevOpts.usePartialResponse !== usePartialResponse
     ) {
       this.executeQuery();
     }
@@ -117,8 +134,8 @@ class Panel extends Component<PanelProps & PathPrefixProps, PanelState> {
     const resolution = this.props.options.resolution || Math.max(Math.floor(this.props.options.range / 250), 1);
     const params: URLSearchParams = new URLSearchParams({
       query: expr,
-      dedup: this.props.useDeduplication.toString(),
-      partial_response: this.props.useDeduplication.toString(),
+      dedup: this.props.options.useDeduplication.toString(),
+      partial_response: this.props.options.usePartialResponse.toString(),
     });
 
     let path: string;
@@ -230,8 +247,16 @@ class Panel extends Component<PanelProps & PathPrefixProps, PanelState> {
     this.setOptions({ stacked: stacked });
   };
 
+  handleChangeDeduplication = (event: React.ChangeEvent<HTMLInputElement>): void => {
+    this.setOptions({ useDeduplication: event.target.checked });
+  };
+
+  handleChangePartialResponse = (event: React.ChangeEvent<HTMLInputElement>): void => {
+    this.setOptions({ usePartialResponse: event.target.checked });
+  };
+
   render() {
-    const { pastQueries, metricNames, options } = this.props;
+    const { pastQueries, metricNames, options, id } = this.props;
     return (
       <div className="panel">
         <Row>
@@ -251,6 +276,26 @@ class Panel extends Component<PanelProps & PathPrefixProps, PanelState> {
         <Row>
           <Col>{this.state.error && <Alert color="danger">{this.state.error}</Alert>}</Col>
         </Row>
+        <Row>
+          <Col>
+            <Checkbox
+              wrapperStyles={{ marginLeft: 20, display: 'inline-block' }}
+              id={`use-deduplication-checkbox-${id}`}
+              onChange={this.handleChangeDeduplication}
+              defaultChecked={options.useDeduplication}
+            >
+              Use Deduplication
+            </Checkbox>
+            <Checkbox
+              wrapperStyles={{ marginLeft: 20, display: 'inline-block' }}
+              id={`use-partial-resp-checkbox-${id}`}
+              onChange={this.handleChangePartialResponse}
+              defaultChecked={options.usePartialResponse}
+            >
+              Use Partial Response
+            </Checkbox>
+          </Col>
+        </Row>
         <Row>
           <Col>
             <Nav tabs>

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

@@ -21,15 +21,11 @@ interface PanelListProps extends PathPrefixProps, RouteComponentProps {
   metrics: string[];
   useLocalTime: boolean;
   queryHistoryEnabled: boolean;
-  useDeduplication: boolean;
-  usePartialResponse: boolean;
 }
 
 export const PanelListContent: FC<PanelListProps> = ({
   metrics = [],
   useLocalTime,
-  useDeduplication,
-  usePartialResponse,
   pathPrefix,
   queryHistoryEnabled,
   ...rest
@@ -84,6 +80,7 @@ export const PanelListContent: FC<PanelListProps> = ({
           onExecuteQuery={handleExecuteQuery}
           key={id}
           options={options}
+          id={id}
           onOptionsChanged={opts =>
             callAll(setPanels, updateURL)(panels.map(p => (id === p.id ? { ...p, options: opts } : p)))
           }
@@ -99,8 +96,6 @@ export const PanelListContent: FC<PanelListProps> = ({
             )
           }
           useLocalTime={useLocalTime}
-          useDeduplication={useDeduplication}
-          usePartialResponse={usePartialResponse}
           metricNames={metrics}
           pastQueries={queryHistoryEnabled ? historyItems : []}
           pathPrefix={pathPrefix}
@@ -117,8 +112,6 @@ 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 [useDeduplication, setUseDeduplication] = useLocalStorage('use-deduplication', true);
-  const [usePartialResponse, setUsePartialResponse] = useLocalStorage('use-partial-response', false);
 
   const { response: metricsRes, error: metricsErr } = useFetch<string[]>(`${pathPrefix}/api/v1/label/__name__/values`);
 
@@ -156,22 +149,6 @@ const PanelList: FC<RouteComponentProps & PathPrefixProps> = ({ pathPrefix = ''
       >
         Use local time
       </Checkbox>
-      <Checkbox
-        wrapperStyles={{ marginLeft: 20, display: 'inline-block' }}
-        id="use-deduplication-checkbox"
-        onChange={({ target }) => setUseDeduplication(target.checked)}
-        defaultChecked={useDeduplication}
-      >
-        Use Deduplication
-      </Checkbox>
-      <Checkbox
-        wrapperStyles={{ marginLeft: 20, display: 'inline-block' }}
-        id="use-partial-response-checkbox"
-        onChange={({ target }) => setUsePartialResponse(target.checked)}
-        defaultChecked={usePartialResponse}
-      >
-        Use Partial Response
-      </Checkbox>
       {(delta > 30 || timeErr) && (
         <Alert color="danger">
           <strong>Warning: </strong>
@@ -190,8 +167,6 @@ const PanelList: FC<RouteComponentProps & PathPrefixProps> = ({ pathPrefix = ''
         panels={decodePanelOptionsFromQueryString(window.location.search)}
         pathPrefix={pathPrefix}
         useLocalTime={useLocalTime}
-        usePartialResponse={usePartialResponse}
-        useDeduplication={useDeduplication}
         metrics={metricsRes.data}
         queryHistoryEnabled={enableQueryHistory}
       />

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

@@ -171,6 +171,15 @@ export const parseOption = (param: string): Partial<PanelOptions> => {
     case 'step_input':
       const resolution = parseInt(decodedValue);
       return resolution > 0 ? { resolution } : {};
+
+    case 'max_source_resolution':
+      return { maxSourceResolution: decodedValue };
+
+    case 'deduplicate':
+      return { useDeduplication: decodedValue === '1' };
+
+    case 'partial_response':
+      return { usePartialResponse: decodedValue === '1' };
   }
   return {};
 };
@@ -181,13 +190,26 @@ export const formatParam = (key: string) => (paramName: string, value: number |
 
 export const toQueryString = ({ key, options }: PanelMeta) => {
   const formatWithKey = formatParam(key);
-  const { expr, type, stacked, range, endTime, resolution } = options;
+  const {
+    expr,
+    type,
+    stacked,
+    range,
+    endTime,
+    resolution,
+    maxSourceResolution,
+    useDeduplication,
+    usePartialResponse,
+  } = options;
   const time = isPresent(endTime) ? formatTime(endTime) : false;
   const urlParams = [
     formatWithKey('expr', expr),
     formatWithKey('tab', type === PanelType.Graph ? 0 : 1),
     formatWithKey('stacked', stacked ? 1 : 0),
     formatWithKey('range_input', formatRange(range)),
+    formatWithKey('max_source_resolution', maxSourceResolution),
+    formatWithKey('deduplicate', useDeduplication ? 1 : 0),
+    formatWithKey('partial_response', usePartialResponse ? 1 : 0),
     time ? `${formatWithKey('end_input', time)}&${formatWithKey('moment_input', time)}` : '',
     isPresent(resolution) ? formatWithKey('step_input', resolution) : '',
   ];

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

@@ -143,6 +143,9 @@ describe('Utils', () => {
           range: 3600,
           resolution: null,
           stacked: false,
+          maxSourceResolution: 'raw',
+          useDeduplication: true,
+          usePartialResponse: false,
           type: PanelType.Graph,
         },
       },
@@ -154,12 +157,15 @@ describe('Utils', () => {
           range: 3600,
           resolution: null,
           stacked: false,
+          maxSourceResolution: 'auto',
+          useDeduplication: false,
+          usePartialResponse: true,
           type: PanelType.Table,
         },
       },
     ];
     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.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';
+      '?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';
 
     describe('decodePanelOptionsFromQueryString', () => {
       it('returns [] when query is empty', () => {
@@ -189,6 +195,16 @@ describe('Utils', () => {
         });
       });
 
+      it('should parse max source res', () => {
+        expect(parseOption('max_source_resolution=auto')).toEqual({ maxSourceResolution: 'auto' });
+      });
+      it('should parse use deduplicate', () => {
+        expect(parseOption('deduplicate=1')).toEqual({ useDeduplication: true });
+      });
+      it('should parse partial_response', () => {
+        expect(parseOption('partial_response=1')).toEqual({ usePartialResponse: true });
+      });
+
       describe('step_input', () => {
         it('should return step_input parsed if > 0', () => {
           expect(parseOption('step_input=2')).toEqual({ resolution: 2 });
@@ -223,9 +239,21 @@ describe('Utils', () => {
           toQueryString({
             id: 'asdf',
             key: '0',
-            options: { expr: 'foo', type: PanelType.Graph, stacked: true, range: 0, endTime: null, resolution: 1 },
+            options: {
+              expr: 'foo',
+              type: PanelType.Graph,
+              stacked: true,
+              range: 0,
+              endTime: null,
+              resolution: 1,
+              maxSourceResolution: 'raw',
+              useDeduplication: true,
+              usePartialResponse: false,
+            },
           })
-        ).toEqual('g0.expr=foo&g0.tab=0&g0.stacked=1&g0.range_input=0y&g0.step_input=1');
+        ).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'
+        );
       });
     });