handle query caching TTL override on the frontend

packages/grafana-data/src/types/datasource.ts

@@ -145,6 +145,11 @@ interface PluginMetaQueryOptions {
   maxDataPoints?: boolean;
   minInterval?: boolean;
 }
+interface PluginQueryCachingConfig {
+  enabled?: boolean;
+  TTLMs?: number;
+  useDefaultTTL?: boolean;
+}
 
 export interface DataSourcePluginComponents<
   DSType extends DataSourceApi<TQuery, TOptions>,
@@ -224,6 +229,7 @@ abstract class DataSourceApi<
     this.id = instanceSettings.id;
     this.type = instanceSettings.type;
     this.meta = instanceSettings.meta;
+    this.cachingConfig = instanceSettings.cachingConfig;
     this.uid = instanceSettings.uid;
   }
 
@@ -301,6 +307,12 @@ abstract class DataSourceApi<
    */
   meta: DataSourcePluginMeta;
 
+  /**
+   * Information about the datasource's query caching configuration
+   * When the caching feature is disabled, this config will always be empty
+   */
+  cachingConfig?: PluginQueryCachingConfig;
+
   /**
    * Used by alerting to check if query contains template variables
    */
@@ -487,6 +499,7 @@ export interface DataQueryRequest<TQuery extends DataQuery = DataQuery> {
   app: CoreApp | string;
 
   cacheTimeout?: string | null;
+  queryCachingTTL?: number | null;
   rangeRaw?: RawTimeRange;
   timeInfo?: string; // The query time description (blue text in the upper right)
   panelId?: number;
@@ -586,6 +599,7 @@ export interface DataSourceInstanceSettings<T extends DataSourceJsonData = DataS
   type: string;
   name: string;
   meta: DataSourcePluginMeta;
+  cachingConfig?: PluginQueryCachingConfig;
   readOnly: boolean;
   url?: string;
   jsonData: T;

packages/grafana-data/src/types/queryRunner.ts

@@ -23,6 +23,7 @@ export interface QueryRunnerOptions {
   minInterval: string | undefined | null;
   scopedVars?: ScopedVars;
   cacheTimeout?: string;
+  queryCachingTTL?: number;
   app?: string;
 }
 

packages/grafana-runtime/src/utils/DataSourceWithBackend.ts

@@ -120,7 +120,7 @@ class DataSourceWithBackend<
    * Ideally final -- any other implementation may not work as expected
    */
   query(request: DataQueryRequest<TQuery>): Observable<DataQueryResponse> {
-    const { intervalMs, maxDataPoints, range, requestId, hideFromInspector = false } = request;
+    const { intervalMs, maxDataPoints, queryCachingTTL, range, requestId, hideFromInspector = false } = request;
     let targets = request.targets;
 
     if (this.filterQuery) {
@@ -172,6 +172,7 @@ class DataSourceWithBackend<
         datasourceId, // deprecated!
         intervalMs,
         maxDataPoints,
+        queryCachingTTL,
       };
     });
 

pkg/services/datasources/querycaching/models.go

@@ -11,6 +11,6 @@ type CacheConfigMap map[string]CacheConfig
 
 type CacheConfig struct {
 	Enabled       bool  `json:"enabled"`
-	TTLMS         int64 `json:"ttl_ms"`
-	UseDefaultTTL bool  `json:"default_ttl"`
+	TTLMS         int64 `json:"TTLMs"`
+	UseDefaultTTL bool  `json:"useDefaultTTL"`
 }

public/app/angular/panel/metrics_panel_ctrl.ts

@@ -203,6 +203,7 @@ class MetricsPanelCtrl extends PanelCtrl {
       publicDashboardAccessToken: this.dashboard.meta.publicDashboardAccessToken,
       scopedVars: panel.scopedVars,
       cacheTimeout: panel.cacheTimeout,
+      queryCachingTTL: panel.queryCachingTTL,
       transformations: panel.transformations,
     });
   }

public/app/features/dashboard/components/PanelEditor/PanelEditorQueries.tsx

@@ -33,6 +33,7 @@ export class PanelEditorQueries extends PureComponent<Props> {
         type: datasourceSettings?.type,
         uid: datasourceSettings?.uid,
       },
+      queryCachingTTL: datasourceSettings?.cachingConfig?.enabled ? panel.queryCachingTTL : undefined,
       queries: panel.targets,
       maxDataPoints: panel.maxDataPoints,
       minInterval: panel.interval,

public/app/features/dashboard/state/PanelModel.ts

@@ -104,6 +104,7 @@ const mustKeepProps: { [str: string]: boolean } = {
   hasRefreshed: true,
   events: true,
   cacheTimeout: true,
+  queryCachingTTL: true,
   cachedPluginOptions: true,
   transparent: true,
   pluginVersion: true,
@@ -184,6 +185,8 @@ export class PanelModel implements DataConfigSource, IPanelModel {
   hasSavedPanelEditChange?: boolean;
   hasRefreshed?: boolean;
   cacheTimeout?: string | null;
+  queryCachingTTL?: number | null;
+
   cachedPluginOptions: Record<string, PanelOptionsCache> = {};
   legend?: { show: boolean; sort?: string; sortDesc?: boolean };
   plugin?: PanelPlugin;
@@ -363,6 +366,7 @@ export class PanelModel implements DataConfigSource, IPanelModel {
       minInterval: this.interval,
       scopedVars: this.scopedVars,
       cacheTimeout: this.cacheTimeout,
+      queryCachingTTL: this.queryCachingTTL,
       transformations: this.transformations,
       app: this.isEditing ? CoreApp.PanelEditor : this.isViewing ? CoreApp.PanelViewer : CoreApp.Dashboard,
     });
@@ -529,6 +533,7 @@ export class PanelModel implements DataConfigSource, IPanelModel {
     }
 
     this.cacheTimeout = options.cacheTimeout;
+    this.queryCachingTTL = options.queryCachingTTL;
     this.timeFrom = options.timeRange?.from;
     this.timeShift = options.timeRange?.shift;
     this.hideTimeOverride = options.timeRange?.hide;

public/app/features/query/components/QueryGroupOptions.tsx

@@ -111,6 +111,21 @@ export class QueryGroupOptionsEditor extends PureComponent<Props, State> {
     });
   };
 
+  onQueryCachingTTLBlur = (event: ChangeEvent<HTMLInputElement>) => {
+    const { options, onChange } = this.props;
+
+    let ttl: number | null = parseInt(event.target.value, 10);
+
+    if (isNaN(ttl) || ttl === 0) {
+      ttl = null;
+    }
+
+    onChange({
+      ...options,
+      queryCachingTTL: ttl,
+    });
+  };
+
   onMaxDataPointsBlur = (event: ChangeEvent<HTMLInputElement>) => {
     const { options, onChange } = this.props;
 
@@ -168,6 +183,34 @@ export class QueryGroupOptionsEditor extends PureComponent<Props, State> {
     );
   }
 
+  renderQueryCachingTTLOption() {
+    const { dataSource, options } = this.props;
+
+    const tooltip = `Cache time-to-live: How long results from this queries in this panel will be cached, in milliseconds. Defaults to the TTL in the caching configuration for this datasource.`;
+
+    if (!dataSource.cachingConfig?.enabled) {
+      return null;
+    }
+
+    return (
+      <div className="gf-form-inline">
+        <div className="gf-form">
+          <InlineFormLabel width={9} tooltip={tooltip}>
+            Cache TTL
+          </InlineFormLabel>
+          <Input
+            type="number"
+            className="width-6"
+            placeholder={`${dataSource.cachingConfig.TTLMs}`}
+            spellCheck={false}
+            onBlur={this.onQueryCachingTTLBlur}
+            defaultValue={options.queryCachingTTL ?? undefined}
+          />
+        </div>
+      </div>
+    );
+  }
+
   renderMaxDataPointsOption() {
     const { data, options } = this.props;
     const realMd = data.request?.maxDataPoints;
@@ -312,6 +355,7 @@ export class QueryGroupOptionsEditor extends PureComponent<Props, State> {
         {this.renderMaxDataPointsOption()}
         {this.renderIntervalOption()}
         {this.renderCacheTimeoutOption()}
+        {this.renderQueryCachingTTLOption()}
 
         <div className="gf-form">
           <InlineFormLabel width={9}>Relative time</InlineFormLabel>

public/app/features/query/state/PanelQueryRunner.ts

@@ -58,6 +58,7 @@ export interface QueryRunnerOptions<
   minInterval: string | undefined | null;
   scopedVars?: ScopedVars;
   cacheTimeout?: string | null;
+  queryCachingTTL?: number | null;
   transformations?: DataTransformerConfig[];
   app?: CoreApp;
 }
@@ -209,6 +210,7 @@ export class PanelQueryRunner {
       timeRange,
       timeInfo,
       cacheTimeout,
+      queryCachingTTL,
       maxDataPoints,
       scopedVars,
       minInterval,
@@ -236,6 +238,7 @@ export class PanelQueryRunner {
       maxDataPoints: maxDataPoints,
       scopedVars: scopedVars || {},
       cacheTimeout,
+      queryCachingTTL,
       startTime: Date.now(),
       rangeRaw: timeRange.raw,
     };

public/app/features/query/state/QueryRunner.ts

@@ -45,6 +45,7 @@ export class QueryRunner implements QueryRunnerSrv {
       timeRange,
       timeInfo,
       cacheTimeout,
+      queryCachingTTL,
       maxDataPoints,
       scopedVars,
       minInterval,
@@ -68,6 +69,7 @@ export class QueryRunner implements QueryRunnerSrv {
       maxDataPoints: maxDataPoints,
       scopedVars: scopedVars || {},
       cacheTimeout,
+      queryCachingTTL,
       startTime: Date.now(),
     };
 

public/app/types/query.ts

@@ -7,6 +7,7 @@ export interface QueryGroupOptions {
   maxDataPoints?: number | null;
   minInterval?: string | null;
   cacheTimeout?: string | null;
+  queryCachingTTL?: number | null;
   timeRange?: {
     from?: string | null;
     shift?: string | null;