[feature] deepflow querier datasource, 'SHOW METRICS' add 'auto' option as default

**Phenomenon and reproduction steps**

none

**Root cause and solution**

none

**Impactions**

none

**Test method**

- deepflow querier datasource
- 'SHOW METRICS' default value is 'auto'
- when select multi metrics, will display
- when select single metircs, will hidden

**Affected branch(es)**

- main

**Checklist**

- [ ] Dependencies update required
- [ ] Common bug (similar problem in other repo)

Author: twou12031

deepflow-querier-datasource/src/QueryEditor.tsx

@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react'
 import { QueryEditorProps, VariableModel } from '@grafana/data'
 import { DataSource } from './datasource'
 import { MyDataSourceOptions, MyQuery } from './types'
-import { Button, Form, InlineField, Select, Input, Alert, getTheme } from '@grafana/ui'
+import { Button, Form, InlineField, Select, Input, Alert, getTheme, Icon, Tooltip } from '@grafana/ui'
 import { QueryEditorFormRow } from './components/QueryEditorFormRow'
 import _ from 'lodash'
 import * as querierJs from 'deepflow-sdk-js'
@@ -1230,14 +1230,34 @@ export class QueryEditor extends PureComponent<Props> {
                             />
                           </InlineField>
                           <InlineField className="custom-label" label="SHOW METRICS" labelWidth={14}>
-                            <Select
-                              options={showMetricsOpts}
-                              value={this.state.showMetrics}
-                              onChange={(val: any) => this.onFieldChange('showMetrics', val)}
-                              placeholder="SHOW METRICS"
-                              key={this.state.showMetrics ? 'showMetricsWithVal' : 'showMetricsWithoutVal'}
-                              width="auto"
-                            />
+                            <div>
+                              <Select
+                                options={showMetricsOpts}
+                                value={this.state.showMetrics}
+                                onChange={(val: any) => this.onFieldChange('showMetrics', val)}
+                                placeholder="SHOW METRICS"
+                                key={this.state.showMetrics ? 'showMetricsWithVal' : 'showMetricsWithoutVal'}
+                                width="auto"
+                              />
+                              <Tooltip
+                                placement="top"
+                                content={
+                                  <div>
+                                    <span>whether to display metrics&apos;s names in legends.</span>
+                                    <br />
+                                    <span>auto: when select multiple metrics to display; otherwise do not show.</span>
+                                  </div>
+                                }
+                              >
+                                <Icon
+                                  style={{
+                                    cursor: 'pointer',
+                                    marginLeft: '4px'
+                                  }}
+                                  name="question-circle"
+                                />
+                              </Tooltip>
+                            </div>
                           </InlineField>
                         </>
                       ) : null}

deepflow-querier-datasource/src/consts.ts

@@ -125,7 +125,7 @@ export type FormTypes = keyof typeof formItemConfigs
 
 export type BasicDataWithId = BasicData & { uuid: string }
 
-export type ShowMetricsVal = 1 | 0
+export type ShowMetricsVal = -1 | 1 | 0
 export type QueryDataType = {
   appType: string
   db: string
@@ -199,12 +199,16 @@ export const defaultFormData: Omit<QueryDataType, 'appType' | 'db' | 'sources'>
   offset: '',
   formatAs: 'timeSeries',
   alias: '',
-  showMetrics: 0
+  showMetrics: -1
 }
 
 export const ID_PREFIX = 'id-'
 
 export const showMetricsOpts: SelectOpts = [
+  {
+    label: 'auto',
+    value: -1
+  },
   {
     label: 'true',
     value: 1

deepflow-querier-datasource/src/datasource.ts

@@ -284,6 +284,19 @@ export class DataSource extends DataSourceApi<MyQuery, MyDataSourceOptions> {
               })
               .join('，')
 
+          let _showMetrics: boolean
+          switch (queryData.showMetrics) {
+            case 0:
+              _showMetrics = false
+              break
+            case 1:
+              _showMetrics = true
+              break
+            case -1:
+            default:
+              _showMetrics = returnMetrics.length > 1
+              break
+          }
           const frame = new MutableDataFrame({
             refId: target.refId,
             fields: [
@@ -302,7 +315,7 @@ export class DataSource extends DataSourceApi<MyQuery, MyDataSourceOptions> {
                   }
                 }
                 return {
-                  name: [keyPrefix || '*', ...(queryData.showMetrics ? [key] : [])].join('-'),
+                  name: [keyPrefix || '*', ...(_showMetrics ? [key] : [])].join('-'),
                   type: type
                 }
               })
@@ -313,7 +326,7 @@ export class DataSource extends DataSourceApi<MyQuery, MyDataSourceOptions> {
             const e = _.cloneDeep(_e)
             _.forIn(e, (val, key) => {
               if (returnMetricNames.includes(key)) {
-                const keyName = [keyPrefix || '*', ...(queryData.showMetrics ? [key] : [])].join('-')
+                const keyName = [keyPrefix || '*', ...(_showMetrics ? [key] : [])].join('-')
                 e[keyName] = val
               }
             })