feat: 【仪表盘】高级设置里，增加“降采样”的开关配置 --Story=120717565

# Reviewed, transaction id: 24166

Author: liangling0628

src/timeseries/src/components/addvance-setting.tsx

@@ -24,13 +24,14 @@
  * IN THE SOFTWARE.
  */
 import Select from 'antd/es/select';
+import Switch from 'antd/es/switch';
 import React from 'react';
 import { EditMode } from 'typings/metric';
 
 import { getEnByName } from '../utils/utils';
 import AliasInput from './alias-input';
 import EditorForm from './editor-form';
-export type AddvanceSettingKey = 'format' | 'promqlAlias' | 'step' | 'type';
+export type AddvanceSettingKey = 'enableDownSampling' | 'format' | 'promqlAlias' | 'step' | 'type';
 export interface IAddvanceSettingProps {
   format: string;
   mode: EditMode;
@@ -42,6 +43,7 @@ export interface IAddvanceSettingProps {
   promqlAlias: string;
   step: string;
   type: string;
+  enableDownSampling: boolean;
 }
 
 interface IAddvanceState {
@@ -87,7 +89,7 @@ export default class AddvanceSetting extends React.PureComponent<IAddvanceSettin
 
   render(): JSX.Element {
     const { showContent } = this.state;
-    const { format, mode, onChange, promqlAlias, step, type } = this.props;
+    const { format, mode, onChange, promqlAlias, step, type, enableDownSampling } = this.props;
     const getHeaderContent = () => (
       <div className='header-content'>
         {mode === 'code' && <span className='header-content-item'>Min Step: {step || 'auto'}</span>}
@@ -102,6 +104,9 @@ export default class AddvanceSetting extends React.PureComponent<IAddvanceSettin
         <span className='header-content-item'>
           {getEnByName('类型')}: {typeList.find(item => item.id === type)?.name || 'Range'}
         </span>
+        <span className='header-content-item'>
+          {getEnByName('降采样')}: {enableDownSampling ? getEnByName('开启') : getEnByName('关闭')}
+        </span>
       </div>
     );
     const uiForm = () => (
@@ -136,6 +141,17 @@ export default class AddvanceSetting extends React.PureComponent<IAddvanceSettin
               ))}
             </Select>
           </EditorForm>
+          <EditorForm title={getEnByName('降采样')}>
+            <div className='down-sample-wrapper'>
+              <Switch
+                checked={enableDownSampling}
+                checkedChildren={getEnByName('开启')}
+                size='small'
+                unCheckedChildren={getEnByName('关闭')}
+                onChange={v => onChange('enableDownSampling', v)}
+              />
+            </div>
+          </EditorForm>
         </EditorForm>
       </>
     );
@@ -202,6 +218,17 @@ export default class AddvanceSetting extends React.PureComponent<IAddvanceSettin
                   ))}
                 </Select>
               </EditorForm>
+              <EditorForm title={getEnByName('降采样')}>
+                <div className='down-sample-wrapper'>
+                  <Switch
+                    checked={enableDownSampling}
+                    checkedChildren={getEnByName('开启')}
+                    size='small'
+                    unCheckedChildren={getEnByName('关闭')}
+                    onChange={v => onChange('enableDownSampling', v)}
+                  />
+                </div>
+              </EditorForm>
             </EditorForm>
           ) : (
             uiForm()

src/timeseries/src/components/query-editor.tsx

@@ -93,6 +93,7 @@ interface IQueryEditorState {
   // onlyPromql: boolean;
   step: string;
   type: string;
+  enableDownSampling: boolean;
 }
 export default class MonitorQueryEditor extends React.PureComponent<IQueryEditorProps, IQueryEditorState> {
   constructor(props, context) {
@@ -116,6 +117,7 @@ export default class MonitorQueryEditor extends React.PureComponent<IQueryEditor
       promqlAlias = '',
       source = '',
       step = '',
+      enableDownSampling = true,
     } = query;
     let expressions: IExpresionItem[] = expressionList;
     // 兼容旧版本
@@ -147,6 +149,7 @@ export default class MonitorQueryEditor extends React.PureComponent<IQueryEditor
       searchState: SearcState.deafult,
       source,
       step,
+      enableDownSampling,
       type: query.type ?? 'range',
     };
     this.initState(query);
@@ -942,7 +945,7 @@ export default class MonitorQueryEditor extends React.PureComponent<IQueryEditor
     return letter;
   }
   handleGetQueryData(metricList: MetricDetail[]) {
-    const { cluster, expressionList, host, module, promqlAlias } = this.state;
+    const { cluster, expressionList, host, module, promqlAlias, enableDownSampling } = this.state;
     // const curExpression = typeof expression === 'undefined' ? this.state.expression : expression;
     // const curDisplay = typeof display === 'undefined' ? this.state.display : display;
     return {
@@ -957,6 +960,7 @@ export default class MonitorQueryEditor extends React.PureComponent<IQueryEditor
       host,
       module,
       promqlAlias,
+      enableDownSampling,
       query_configs: metricList
         .filter(item => item.metricMetaId)
         .map(item => {
@@ -1413,6 +1417,7 @@ export default class MonitorQueryEditor extends React.PureComponent<IQueryEditor
                 ) : undefined}
                 {
                   <AddvanceSetting
+                    enableDownSampling={this.state.enableDownSampling}
                     format={this.state.format}
                     mode={mode}
                     promqlAlias={promqlAlias}

src/timeseries/src/datasource/datasource.ts

@@ -857,7 +857,7 @@ export default class DashboardDatasource extends DataSourceApi<QueryData, QueryO
               this.request({
                 data: {
                   display: config.display,
-                  down_sample_range,
+                  down_sample_range: item.enableDownSampling !== false ? down_sample_range : undefined,
                   end_time: options.range.to.unix(),
                   expression: config.refId || '',
                   format: item.format,
@@ -892,7 +892,7 @@ export default class DashboardDatasource extends DataSourceApi<QueryData, QueryO
         if (item.mode === 'code' || item.only_promql) {
           const params = {
             data: {
-              down_sample_range,
+              down_sample_range: item.enableDownSampling !== false ? down_sample_range : undefined,
               end_time: options.range.to.unix(),
               format: item.format,
               promql: this.buildPromqlVariables(item.source!, {
@@ -924,13 +924,13 @@ export default class DashboardDatasource extends DataSourceApi<QueryData, QueryO
               }),
           );
         } else {
-          const { cluster, expressionList, host, module } = item;
+          const { cluster, expressionList, host, module, enableDownSampling } = item;
           expressionList?.forEach(exp => {
             if (exp.expression && exp.active) {
               const p = {
                 data: {
                   display: exp.active,
-                  down_sample_range,
+                  down_sample_range: enableDownSampling !== false ? down_sample_range : undefined,
                   end_time: options.range.to.unix(),
                   expression: exp.expression,
                   format: item.format,

src/timeseries/src/lang/en.json

@@ -72,5 +72,8 @@
   "指标选择": "Metric selection",
   "- 空 -": "- empty -",
   "复制成功": "Copy Success",
-  "已选": "Selected"
+  "已选": "Selected",
+  "开启": "on",
+  "关闭": "off",
+  "降采样": "Down Sampling"
 }

src/timeseries/src/sass/grafana-antd.light.less

@@ -1,4 +1,3 @@
-
 // @import '~antd/es/style/themes/default.less';
 // @import '~antd/dist/antd.less'; // 引入官方提供的 less 样式入口文件
 // @import './custom-antd-theme.less'; // 用于覆盖上面定义的变量
@@ -16,4 +15,5 @@
 @import '~antd/es/spin/style/index.less';
 @import '~antd/es/cascader/style/index.less';
 @import '~antd/es/input-number/style/index.less';
-@import '~antd/es/button/style/index.less';
+@import '~antd/es/button/style/index.less';
+@import '~antd/es/switch/style/index.less';

src/timeseries/src/sass/query.scss

@@ -626,6 +626,12 @@
       }
     }
   }
+  .down-sample-wrapper {
+    display: flex;
+    align-items: center;
+    padding: 0px 8px;
+    border: 1px solid #dcdee5;
+  }
 }
 
 .key-del {

src/timeseries/src/typings/datasource.ts

@@ -68,6 +68,7 @@ export interface QueryData extends DataQuery {
   source?: string;
   step?: string;
   type?: string;
+  enableDownSampling?: boolean;
 }
 
 export const DIM_NULL_ID = '';