Add Engine Selector/ Dropdown to Query UI

Engine Selector is a dropdown that sets an engine to be used to run the query. Currently two engines `thanos` and `prometheus`. This dropdown sends a query param `engine` to query api, which runs the api using the engine provided. Provided to run query using multiple query engines from Query UI. Signed-off-by: Pradyumna Krishna <[email protected]>
thanos-io · Apr 5, 2023 · 8ef7010 · 8ef7010
1 parent 00eca42
commit 8ef7010
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 40 deletions.
diff --git a/pkg/ui/bindata.go b/pkg/ui/bindata.go
diff --git a/pkg/ui/react-app/src/components/Dropdown.tsx b/pkg/ui/react-app/src/components/Dropdown.tsx
@@ -0,0 +1,38 @@
+import React, { FC, memo } from 'react';
+import { FormGroup, Label, Input, InputProps } from 'reactstrap';
+
+export interface DropdownOption {
+  name: string;
+  value: string;
+}
+
+interface DropdownProps extends InputProps {
+  options: DropdownOption[];
+}
+
+const Dropdown: FC<DropdownProps> = ({ children, selected, options, id, ...rest }) => {
+  return (
+    <FormGroup className="custom-control d-inline">
+      <Label for={id} className="control-label">
+        {children}
+      </Label>
+      <Input
+        {...rest}
+        id={id}
+        type="select"
+        value={selected}
+        className="control-input custom-select"
+        style={{
+          width: 'auto',
+          marginLeft: '10px',
+        }}
+      >
+        {options.map(function (option) {
+          return <option value={option.value}>{option.name}</option>;
+        })}
+      </Input>
+    </FormGroup>
+  );
+};
+
+export default memo(Dropdown);
diff --git a/pkg/ui/react-app/src/pages/graph/Panel.test.tsx b/pkg/ui/react-app/src/pages/graph/Panel.test.tsx
@@ -42,6 +42,7 @@ const defaultProps: PanelProps = {
   defaultStep: '1s',
   enableHighlighting: true,
   enableLinter: true,
+  engine: 'prometheus',
 };
 
 describe('Panel', () => {

diff --git a/pkg/ui/react-app/src/pages/graph/Panel.tsx b/pkg/ui/react-app/src/pages/graph/Panel.tsx
@@ -31,6 +31,7 @@ export interface PanelProps {
   enableHighlighting: boolean;
   enableLinter: boolean;
   defaultStep: string;
+  engine: string;
 }
 
 interface PanelState {
@@ -169,11 +170,13 @@ class Panel extends Component<PanelProps & PathPrefixProps, PanelState> {
         params.append('end', endTime.toString());
         params.append('step', resolution.toString());
         params.append('max_source_resolution', this.props.options.maxSourceResolution);
+        params.append('engine', this.props.engine);
         // TODO path prefix here and elsewhere.
         break;
       case 'table':
         path = '/api/v1/query';
         params.append('time', endTime.toString());
+        params.append('engine', this.props.engine);
         break;
       default:
         throw new Error('Invalid panel type "' + this.props.options.type + '"');

diff --git a/pkg/ui/react-app/src/pages/graph/PanelList.tsx b/pkg/ui/react-app/src/pages/graph/PanelList.tsx
@@ -4,6 +4,7 @@ import { UncontrolledAlert, Button } from 'reactstrap';
 
 import Panel, { PanelOptions, PanelDefaultOptions } from './Panel';
 import Checkbox from '../../components/Checkbox';
+import Dropdown from '../../components/Dropdown';
 import PathPrefixProps from '../../types/PathPrefixProps';
 import { StoreListProps } from '../../thanos/pages/stores/Stores';
 import { Store } from '../../thanos/pages/stores/store';
@@ -30,6 +31,7 @@ interface PanelListProps extends PathPrefixProps, RouteComponentProps {
   enableHighlighting: boolean;
   enableLinter: boolean;
   defaultStep: string;
+  engine: string;
 }
 
 export const PanelListContent: FC<PanelListProps> = ({
@@ -42,6 +44,7 @@ export const PanelListContent: FC<PanelListProps> = ({
   enableHighlighting,
   enableLinter,
   defaultStep,
+  engine,
   ...rest
 }) => {
   const [panels, setPanels] = useState(rest.panels);
@@ -123,6 +126,7 @@ export const PanelListContent: FC<PanelListProps> = ({
           stores={storeData}
           enableAutocomplete={enableAutocomplete}
           enableHighlighting={enableHighlighting}
+          engine={engine}
           enableLinter={enableLinter}
           defaultStep={defaultStep}
         />
@@ -144,6 +148,11 @@ const PanelList: FC<RouteComponentProps & PathPrefixProps> = ({ pathPrefix = ''
   const [enableAutocomplete, setEnableAutocomplete] = useLocalStorage('enable-autocomplete', true);
   const [enableHighlighting, setEnableHighlighting] = useLocalStorage('enable-syntax-highlighting', true);
   const [enableLinter, setEnableLinter] = useLocalStorage('enable-linter', true);
+  const [engine, setEngine] = useLocalStorage<string>('engine', 'prometheus');
+  const engineOptions = [
+    { name: 'Prometheus', value: 'prometheus' },
+    { name: 'Thanos', value: 'thanos' },
+  ];
 
   const { response: metricsRes, error: metricsErr } = useFetch<string[]>(`${pathPrefix}/api/v1/label/__name__/values`);
   const {
@@ -204,6 +213,14 @@ const PanelList: FC<RouteComponentProps & PathPrefixProps> = ({ pathPrefix = ''
           </Checkbox>
         </div>
         <div className="float-right">
+          <Dropdown
+            selected={engine}
+            options={engineOptions}
+            id="engine-dropdown"
+            onChange={({ target }) => setEngine(target.value)}
+          >
+            Engine
+          </Dropdown>
           <Checkbox
             wrapperStyles={{ marginLeft: 20, display: 'inline-block' }}
             id="autocomplete-checkbox"
@@ -266,6 +283,7 @@ const PanelList: FC<RouteComponentProps & PathPrefixProps> = ({ pathPrefix = ''
         enableHighlighting={enableHighlighting}
         enableLinter={enableLinter}
         defaultStep={defaultStep}
+        engine={engine}
         queryHistoryEnabled={enableQueryHistory}
         isLoading={storesLoading || flagsLoading}
       />