Query Caching: Add per-panel query caching TTL (#61968)

* *Create Caching Config interface and OSS impl
*Create front-end facing DS Cache config
*Populate Caching Config on Datasource DTO
*Update OSS wire deps

* fix unit test

* handle query caching TTL override on the frontend

* Make sure the override works with pubdash

* move caching config to the right place in the ds info

* move caching config logic to enterprise index hook

* move queryCachingTTL to pubdash query payload

* Remove  from metadata (not needed)

* rename struct and add comment

* remove invalid wire dependency

* manual revert of 395c74b

* fix frontend test

* fix backend test

* fix tests for real this time

* truly fix frontend test

* fix back end unit test for real

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(),
     };