[v10.3.x] Elasticsearch: Fix legend for alerting, expressions and previously frontend queries

[grafana-delivery-bot]

Backport 494d169 from #84485

---

The detailed investigation and decision on why are we producing different names for regular queries and for alerting/expression queries can be found in https://docs.google.com/document/d/1tW0E2Ol5E90KwFvK-FMgfLNs6ChRlSouw-PwyjVNh60/edit

Summary:
We will have to use different naming for responses produced by regular queries vs produced by alerting and expression queries, which can be identified through headers - FromAlert and X-Grafana-From-Exp.

For regular queries, we are going to use the same naming as was in frontend, which 100% produces the same experience through frontend and new backend - using frame.Name and deleting labels valueField.Labels = nil.

For alerting and expression queries, we are going to use the same naming convention as was done initially field.SetConfig(&data.FieldConfig{DisplayNameFromDS: fieldName}).

Testing:

1. Create alert with gdev-elastic and the preview should look like this - graph legend shouldn't have duplicated name and labels {hostname=hostname1}... should be visible

2. Import following dashboard that tests for 3 issues - correct functioning of transformations, fields overrides and server side expressions.

es.mov

{
  "annotations": {
    "list": [
      {
        "builtIn": 1,
        "datasource": {
          "type": "grafana",
          "uid": "-- Grafana --"
        },
        "enable": true,
        "hide": true,
        "iconColor": "rgba(0, 211, 255, 1)",
        "name": "Annotations & Alerts",
        "type": "dashboard"
      }
    ]
  },
  "editable": true,
  "fiscalYearStartMonth": 0,
  "graphTooltip": 0,
  "id": 880,
  "links": [],
  "panels": [
    {
      "datasource": {
        "type": "elasticsearch",
        "uid": "gdev-elasticsearch"
      },
      "fieldConfig": {
        "defaults": {
          "custom": {
            "hideFrom": {
              "legend": false,
              "tooltip": false,
              "viz": false
            },
            "scaleDistribution": {
              "type": "linear"
            }
          }
        },
        "overrides": []
      },
      "gridPos": {
        "h": 8,
        "w": 12,
        "x": 0,
        "y": 0
      },
      "id": 4,
      "options": {
        "calculate": false,
        "cellGap": 1,
        "color": {
          "exponent": 0.5,
          "fill": "dark-orange",
          "mode": "scheme",
          "reverse": false,
          "scale": "exponential",
          "scheme": "Oranges",
          "steps": 64
        },
        "exemplars": {
          "color": "rgba(255,0,255,0.7)"
        },
        "filterValues": {
          "le": 1e-9
        },
        "legend": {
          "show": true
        },
        "rowsFrame": {
          "layout": "unknown"
        },
        "tooltip": {
          "maxHeight": 600,
          "mode": "single",
          "showColorScale": false,
          "yHistogram": false
        },
        "yAxis": {
          "axisPlacement": "left",
          "reverse": false
        }
      },
      "pluginVersion": "11.0.0-pre",
      "targets": [
        {
          "alias": "",
          "bucketAggs": [
            {
              "field": "label",
              "id": "3",
              "settings": {
                "min_doc_count": "1",
                "order": "desc",
                "orderBy": "_term",
                "size": "10"
              },
              "type": "terms"
            },
            {
              "field": "@timestamp",
              "id": "2",
              "settings": {
                "interval": "auto"
              },
              "type": "date_histogram"
            }
          ],
          "datasource": {
            "type": "elasticsearch",
            "uid": "gdev-elasticsearch"
          },
          "hide": true,
          "metrics": [
            {
              "id": "1",
              "type": "count"
            }
          ],
          "query": "hostname: hostname1",
          "refId": "hostname1",
          "timeField": "@timestamp"
        },
        {
          "alias": "",
          "bucketAggs": [
            {
              "field": "label",
              "id": "3",
              "settings": {
                "min_doc_count": "1",
                "order": "desc",
                "orderBy": "_term",
                "size": "10"
              },
              "type": "terms"
            },
            {
              "field": "@timestamp",
              "id": "2",
              "settings": {
                "interval": "auto"
              },
              "type": "date_histogram"
            }
          ],
          "datasource": {
            "type": "elasticsearch",
            "uid": "gdev-elasticsearch"
          },
          "hide": true,
          "metrics": [
            {
              "id": "1",
              "type": "count"
            }
          ],
          "query": "",
          "refId": "all",
          "timeField": "@timestamp"
        },
        {
          "datasource": {
            "name": "Expression",
            "type": "__expr__",
            "uid": "__expr__"
          },
          "expression": "$hostname1/$all",
          "hide": false,
          "refId": "ratio",
          "type": "math"
        }
      ],
      "title": "Panel Title",
      "type": "heatmap"
    },
    {
      "datasource": {
        "type": "elasticsearch",
        "uid": "gdev-elasticsearch"
      },
      "fieldConfig": {
        "defaults": {
          "color": {
            "mode": "palette-classic"
          },
          "custom": {
            "axisBorderShow": false,
            "axisCenteredZero": false,
            "axisColorMode": "text",
            "axisLabel": "",
            "axisPlacement": "auto",
            "barAlignment": 0,
            "drawStyle": "line",
            "fillOpacity": 0,
            "gradientMode": "none",
            "hideFrom": {
              "legend": false,
              "tooltip": false,
              "viz": false
            },
            "insertNulls": false,
            "lineInterpolation": "linear",
            "lineWidth": 1,
            "pointSize": 5,
            "scaleDistribution": {
              "type": "linear"
            },
            "showPoints": "auto",
            "spanNulls": false,
            "stacking": {
              "group": "A",
              "mode": "none"
            },
            "thresholdsStyle": {
              "mode": "off"
            }
          },
          "mappings": [],
          "thresholds": {
            "mode": "absolute",
            "steps": [
              {
                "color": "green",
                "value": null
              },
              {
                "color": "red",
                "value": 80
              }
            ]
          }
        },
        "overrides": [
          {
            "matcher": {
              "id": "byName",
              "options": "hostname5"
            },
            "properties": [
              {
                "id": "custom.axisLabel",
                "value": "this needs to be shown"
              }
            ]
          }
        ]
      },
      "gridPos": {
        "h": 8,
        "w": 12,
        "x": 12,
        "y": 0
      },
      "id": 2,
      "options": {
        "legend": {
          "calcs": [],
          "displayMode": "list",
          "placement": "bottom",
          "showLegend": true
        },
        "tooltip": {
          "maxHeight": 600,
          "mode": "single",
          "sort": "none"
        }
      },
      "pluginVersion": "11.0.0-pre",
      "targets": [
        {
          "alias": "",
          "bucketAggs": [
            {
              "field": "hostname",
              "id": "3",
              "settings": {
                "min_doc_count": "1",
                "order": "desc",
                "orderBy": "_term",
                "size": "10"
              },
              "type": "terms"
            },
            {
              "field": "@timestamp",
              "id": "2",
              "settings": {
                "interval": "6h"
              },
              "type": "date_histogram"
            }
          ],
          "datasource": {
            "type": "elasticsearch",
            "uid": "gdev-elasticsearch"
          },
          "metrics": [
            {
              "id": "1",
              "type": "count"
            }
          ],
          "query": "",
          "refId": "A",
          "timeField": "@timestamp"
        }
      ],
      "title": "overrides name ",
      "type": "timeseries"
    },
    {
      "datasource": {
        "type": "elasticsearch",
        "uid": "gdev-elasticsearch"
      },
      "fieldConfig": {
        "defaults": {
          "color": {
            "mode": "thresholds"
          },
          "mappings": [],
          "thresholds": {
            "mode": "absolute",
            "steps": [
              {
                "color": "green",
                "value": null
              },
              {
                "color": "red",
                "value": 80
              }
            ]
          }
        },
        "overrides": []
      },
      "gridPos": {
        "h": 8,
        "w": 12,
        "x": 0,
        "y": 8
      },
      "id": 3,
      "options": {
        "colorMode": "value",
        "graphMode": "area",
        "justifyMode": "auto",
        "orientation": "auto",
        "reduceOptions": {
          "calcs": [
            "lastNotNull"
          ],
          "fields": "",
          "values": false
        },
        "showPercentChange": false,
        "textMode": "auto",
        "wideLayout": true
      },
      "pluginVersion": "11.0.0-pre",
      "targets": [
        {
          "alias": "",
          "bucketAggs": [
            {
              "field": "@timestamp",
              "id": "2",
              "settings": {
                "interval": "6h"
              },
              "type": "date_histogram"
            }
          ],
          "datasource": {
            "type": "elasticsearch",
            "uid": "gdev-elasticsearch"
          },
          "metrics": [
            {
              "id": "1",
              "type": "count"
            }
          ],
          "query": "",
          "refId": "A",
          "timeField": "@timestamp"
        }
      ],
      "title": "transform + name",
      "transformations": [
        {
          "id": "reduce",
          "options": {
            "includeTimeField": false,
            "mode": "reduceFields",
            "reducers": [
              "last",
              "min"
            ]
          }
        },
        {
          "id": "filterFieldsByName",
          "options": {}
        }
      ],
      "type": "stat"
    }
  ],
  "schemaVersion": 39,
  "tags": [],
  "templating": {
    "list": []
  },
  "time": {
    "from": "now-6h",
    "to": "now"
  },
  "timeRangeUpdatedDuringEditOrView": false,
  "timepicker": {},
  "timezone": "browser",
  "title": "test es",
  "uid": "edfmgdz48dqm8b",
  "version": 11,
  "weekStart": ""
}

Also sanity check - that in our test dashboard, names are the same as frontend produced frames (this shouldn't change as we are not changing this logic)

Fixes: #84054
Fixes: #83968

[ivanahuckova]

Tested that fix works: