Unhide distributed execution mode

This commit exposes the distributed query execution mode to end-users by unhiding the
flag used to toggle this feature.

The commit also adds documentation on when the mode is appropriate to be used.

Signed-off-by: Filip Petkovski <filip.petkovsky@gmail.com>

cmd/thanos/query.go

@@ -105,7 +105,6 @@ func registerQuery(app *extkingpin.App) {
 		Enum(string(apiv1.PromqlEnginePrometheus), string(apiv1.PromqlEngineThanos))
 	extendedFunctionsEnabled := cmd.Flag("query.enable-x-functions", "Whether to enable extended rate functions (xrate, xincrease and xdelta). Only has effect when used with Thanos engine.").Default("false").Bool()
 	promqlQueryMode := cmd.Flag("query.mode", "PromQL query mode. One of: local, distributed.").
-		Hidden().
 		Default(string(queryModeLocal)).
 		Enum(string(queryModeLocal), string(queryModeDistributed))
 
@@ -647,6 +646,8 @@ func runQuery(
 
 	var remoteEngineEndpoints api.RemoteEndpoints
 	if queryMode != queryModeLocal {
+		level.Info(logger).Log("msg", "Distributed query mode enabled, using Thanos as the default query engine.")
+		defaultEngine = string(apiv1.PromqlEngineThanos)
 		remoteEngineEndpoints = query.NewRemoteEndpoints(logger, endpoints.GetQueryAPIClients, query.Opts{
 			AutoDownsample:        enableAutodownsampling,
 			ReplicaLabels:         queryReplicaLabels,

docs/components/query.md

@@ -274,6 +274,16 @@ In case of nested Thanos Query components, it's important to note that tenancy e
 
 Further, note that there are no authentication mechanisms in Thanos, so anyone can set an arbitrary tenant in the HTTP header. It is recommended to use a proxy in front of the querier in case an authentication mechanism is needed. The Query UI also includes an option to set an arbitrary tenant, and should therefore not be exposed to end-users if users should not be able to see each others data.
 
+### Distributed execution mode
+
+The distributed execution mode can be enabled using `--query.mode=distributed`. When this mode is enabled, the Querier will break down each query into independent fragments and delegate them to components which implement the Query API.
+
+This mode is particularly useful in architectures where multiple independent Queriers are deployed in separate environments (different regions or different Kubernetes clusters) and are federated through a separate central Querier.
+A Querier running in the distributed mode will only talk to Queriers, or other components which implement the Query API. Endpoints which only act as Stores (e.g. Store Gateways or Rulers), and are directly connected to a distributed Querier, will not be included in the execution of a distributed query.
+This constraint should help with keeping the distributed query execution simple and efficient, but could be removed in the future if there are good use cases for it.
+
+For further details on the design and use cases of this feature, see the [official design document](https://thanos.io/tip/proposals-accepted/202301-distributed-query-execution.md/).
+
 ## Flags
 
 ```$ mdox-exec="thanos query --help"
@@ -406,6 +416,7 @@ Flags:
                                  when the range parameters are not specified.
                                  The zero value means range covers the time
                                  since the beginning.
+      --query.mode=local         PromQL query mode. One of: local, distributed.
       --query.partial-response   Enable partial response for queries if
                                  no partial_response param is specified.
                                  --no-query.partial-response for disabling.

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

@@ -13,6 +13,8 @@ const defaultGraphControlProps = {
   resolution: 10,
   stacked: false,
   maxSourceResolution: '0s',
+  queryMode: 'local',
+  engine: 'prometheus',
 
   onChangeRange: (): void => {
     // Do nothing.

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

@@ -14,6 +14,8 @@ interface GraphControlsProps {
   resolution: number | null;
   stacked: boolean;
   maxSourceResolution: string;
+  engine: string;
+  queryMode: string;
 
   onChangeRange: (range: number) => void;
   onChangeEndTime: (endTime: number | null) => void;
@@ -154,8 +156,8 @@ class GraphControls extends Component<GraphControlsProps> {
             <FontAwesomeIcon icon={faChartArea} fixedWidth />
           </Button>
         </ButtonGroup>
-
         <Input
+          disabled={this.props.queryMode != 'local' && this.props.engine != 'prometheus'}
           type="select"
           value={this.props.maxSourceResolution}
           onChange={this.handleMaxSourceResChange}

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

@@ -51,6 +51,7 @@ const defaultProps: PanelProps = {
   enableHighlighting: true,
   enableLinter: true,
   defaultEngine: 'prometheus',
+  queryMode: 'local',
   usePartialResponse: true,
 };
 

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

@@ -48,6 +48,7 @@ export interface PanelProps {
   enableLinter: boolean;
   defaultStep: string;
   defaultEngine: string;
+  queryMode: string;
   onUsePartialResponseChange: (value: boolean) => void;
 }
 
@@ -539,6 +540,7 @@ class Panel extends Component<PanelProps & PathPrefixProps, PanelState> {
           <Col>
             <div className="float-left">
               <Checkbox
+                disabled={this.props.queryMode != 'local' && this.props.options.engine != 'prometheus'}
                 wrapperStyles={{ marginLeft: 20, display: 'inline-block' }}
                 id={`use-deduplication-checkbox-${id}`}
                 onChange={this.handleChangeDeduplication}
@@ -547,6 +549,7 @@ class Panel extends Component<PanelProps & PathPrefixProps, PanelState> {
                 Use Deduplication
               </Checkbox>
               <Checkbox
+                disabled={this.props.queryMode != 'local' && this.props.options.engine != 'prometheus'}
                 wrapperStyles={{ marginLeft: 20, display: 'inline-block' }}
                 id={`use-partial-resp-checkbox-${id}`}
                 onChange={this.handleChangePartialResponse}
@@ -726,6 +729,8 @@ class Panel extends Component<PanelProps & PathPrefixProps, PanelState> {
                       resolution={options.resolution}
                       stacked={options.stacked}
                       maxSourceResolution={options.maxSourceResolution}
+                      queryMode={this.props.queryMode}
+                      engine={options.engine}
                       onChangeRange={this.handleChangeRange}
                       onChangeEndTime={this.handleChangeEndTime}
                       onChangeResolution={this.handleChangeResolution}

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

@@ -31,6 +31,7 @@ interface PanelListProps extends PathPrefixProps, RouteComponentProps {
   enableLinter: boolean;
   defaultStep: string;
   defaultEngine: string;
+  queryMode: string;
   usePartialResponse: boolean;
 }
 
@@ -45,6 +46,7 @@ export const PanelListContent: FC<PanelListProps> = ({
   enableLinter,
   defaultStep,
   defaultEngine,
+  queryMode,
   usePartialResponse,
   ...rest
 }) => {
@@ -131,6 +133,7 @@ export const PanelListContent: FC<PanelListProps> = ({
           enableAutocomplete={enableAutocomplete}
           enableHighlighting={enableHighlighting}
           defaultEngine={defaultEngine}
+          queryMode={queryMode}
           enableLinter={enableLinter}
           defaultStep={defaultStep}
           usePartialResponse={usePartialResponse}
@@ -167,7 +170,8 @@ const PanelList: FC<RouteComponentProps & PathPrefixProps> = ({ pathPrefix = ''
     isLoading: flagsLoading,
   } = useFetch<FlagMap>(`${pathPrefix}/api/v1/status/flags`);
   const defaultStep = flagsRes?.data?.['query.default-step'] || '1s';
-  const defaultEngine = flagsRes?.data?.['query.promql-engine'];
+  const queryMode = flagsRes?.data?.['query.mode'];
+  const defaultEngine = queryMode == 'distributed' ? 'thanos' : flagsRes?.data?.['query.promql-engine'];
   const usePartialResponse = flagsRes?.data?.['query.partial-response'] || true;
 
   const browserTime = new Date().getTime() / 1000;
@@ -279,6 +283,7 @@ const PanelList: FC<RouteComponentProps & PathPrefixProps> = ({ pathPrefix = ''
         enableLinter={enableLinter}
         defaultStep={defaultStep}
         defaultEngine={defaultEngine}
+        queryMode={queryMode}
         queryHistoryEnabled={enableQueryHistory}
         usePartialResponse={!!usePartialResponse}
         isLoading={storesLoading || flagsLoading}

pkg/ui/react-app/src/thanos/Navbar.tsx

@@ -29,7 +29,7 @@ interface NavDropDown {
 const navConfig: { [component: string]: (NavConfig | NavDropDown)[] } = {
   query: [
     { name: 'Graph', uri: '/graph' },
-    { name: 'Stores', uri: '/stores' },
+    { name: 'Endpoints', uri: '/stores' },
     {
       name: 'Status',
       children: [

pkg/ui/static/react/asset-manifest.json

@@ -1,15 +1,15 @@
 {
   "files": {
     "main.css": "./static/css/main.5a4981c4.css",
-    "main.js": "./static/js/main.1da5c0bf.js",
+    "main.js": "./static/js/main.5808e5d4.js",
     "static/media/codicon.ttf": "./static/media/codicon.b3726f0165bf67ac6849.ttf",
     "index.html": "./index.html",
     "static/media/index.cjs": "./static/media/index.cd351d7c31d0d3fccf96.cjs",
     "main.5a4981c4.css.map": "./static/css/main.5a4981c4.css.map",
-    "main.1da5c0bf.js.map": "./static/js/main.1da5c0bf.js.map"
+    "main.5808e5d4.js.map": "./static/js/main.5808e5d4.js.map"
   },
   "entrypoints": [
     "static/css/main.5a4981c4.css",
-    "static/js/main.1da5c0bf.js"
+    "static/js/main.5808e5d4.js"
   ]
 }

pkg/ui/static/react/index.html

@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="shortcut icon" href="./favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/><meta name="theme-color" content="#000000"/><script>const GLOBAL_PATH_PREFIX="{{ pathPrefix }}"</script><script>const THANOS_COMPONENT="{{ .Component }}",THANOS_QUERY_URL="{{ .queryURL }}",THANOS_TENANT_HEADER="{{ .tenantHeader }}",THANOS_DEFAULT_TENANT="{{ .defaultTenant }}"</script><link rel="manifest" href="./manifest.json"/><title>Thanos | Highly available Prometheus setup</title><script defer="defer" src="./static/js/main.1da5c0bf.js"></script><link href="./static/css/main.5a4981c4.css" rel="stylesheet"></head><body class="bootstrap"><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="shortcut icon" href="./favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/><meta name="theme-color" content="#000000"/><script>const GLOBAL_PATH_PREFIX="{{ pathPrefix }}"</script><script>const THANOS_COMPONENT="{{ .Component }}",THANOS_QUERY_URL="{{ .queryURL }}",THANOS_TENANT_HEADER="{{ .tenantHeader }}",THANOS_DEFAULT_TENANT="{{ .defaultTenant }}"</script><link rel="manifest" href="./manifest.json"/><title>Thanos | Highly available Prometheus setup</title><script defer="defer" src="./static/js/main.5808e5d4.js"></script><link href="./static/css/main.5a4981c4.css" rel="stylesheet"></head><body class="bootstrap"><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>