Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Timeseries: change of series name on refresh from s1 to {name="s1"} #69207

Closed
simPod opened this issue May 28, 2023 · 12 comments · Fixed by #69289
Closed

Timeseries: change of series name on refresh from s1 to {name="s1"} #69207

simPod opened this issue May 28, 2023 · 12 comments · Fixed by #69289
Labels

Comments

@simPod
Copy link
Contributor

simPod commented May 28, 2023

What went wrong?

What happened:

  • When I load my Timeseries panel with data, I can see series s1 in tooltip. Then I click Refresh button. After the response is received, the series name in tooltip changes to {name="s1"}
image image

What did you expect to happen:

  • Series name stays s1.

How do we reproduce it?

I checked play.grafana.com for the behaviour but that does not happen there.

What Grafana version are you using?

0b4c790

Optional Questions:

Is the bug inside a Dashboard Panel?

No response

Grafana Platform?

None

User's OS?

No response

User's Browser?

No response

Is this a Regression?

None

Are Datasources involved?

No response

Anything else to add?

Any idea why that might happen? Where to look at?

@simPod
Copy link
Contributor Author

simPod commented May 29, 2023

My fields don't have state.displayName after refresh.

@simPod
Copy link
Contributor Author

simPod commented May 29, 2023

This call fills the display name for me

config = props.prepConfig(alignedFrame, this.props.frames, this.getTimeRange);

The panel Reload is called with withConfig=false so this props.prepConfig is not called and the display name not filled.

@simPod
Copy link
Contributor Author

simPod commented May 29, 2023

This is my hotfix simPod@c64a8b8 though something tells me I'm missing something.

@leeoniya
Copy link
Contributor

that code hasnt changed in a long time. so this is probably not the correct fix. we gotta figure out which recent commit broke this to better understand the cause.

@simPod
Copy link
Contributor Author

simPod commented May 29, 2023

I'm not sure it ever worked since I migrated to Timeseries since last week or so.

But the fix is not correct. It's rather a hotfix for my users as I did not see any side effects.

@leeoniya
Copy link
Contributor

i cannot repro this locally.

if you make a panel debug snapshot and re-import it yourself, does the issue reproduce when hitting the dashboard data refresh button?

if yes, can you attach it here? otherwise we'll need to dig further.

@simPod
Copy link
Contributor Author

simPod commented May 29, 2023

Key Value
Panel timeseries @ 10.1.0-pre (9655d5d)
Grafana 10.1.0-pre (9655d5d) // Open Source
Panel debug snapshot dashboard
{
  "panels": [
    {
      "datasource": {
        "type": "grafana",
        "uid": "grafana"
      },
      "fieldConfig": {
        "defaults": {
          "custom": {
            "drawStyle": "line",
            "lineInterpolation": "stepBefore",
            "barAlignment": 0,
            "lineWidth": 1,
            "fillOpacity": 80,
            "gradientMode": "none",
            "spanNulls": false,
            "showPoints": "auto",
            "pointSize": 5,
            "stacking": {
              "mode": "normal",
              "group": "A"
            },
            "axisPlacement": "auto",
            "axisLabel": "",
            "axisColorMode": "text",
            "scaleDistribution": {
              "type": "linear"
            },
            "axisCenteredZero": false,
            "hideFrom": {
              "tooltip": false,
              "viz": false,
              "legend": false
            },
            "thresholdsStyle": {
              "mode": "line"
            },
            "axisWidth": 90
          },
          "color": {
            "mode": "palette-classic"
          },
          "mappings": [],
          "thresholds": {
            "mode": "absolute",
            "steps": []
          }
        },
        "overrides": [
          {
            "matcher": {
              "id": "byName",
              "options": "s1"
            },
            "properties": [
              {
                "id": "color",
                "value": {
                  "fixedColor": "#705da0",
                  "mode": "fixed"
                }
              },
              {
                "id": "custom.fillOpacity",
                "value": 0
              }
            ]
          },
          {
            "matcher": {
              "id": "byName",
              "options": "Force Y-axis"
            },
            "properties": [
              {
                "id": "color",
                "value": {
                  "fixedColor": "transparent",
                  "mode": "fixed"
                }
              },
              {
                "id": "custom.hideFrom",
                "value": {
                  "legend": true,
                  "tooltip": true,
                  "viz": false
                }
              },
              {
                "id": "custom.axisPlacement",
                "value": "right"
              },
              {
                "id": "custom.thresholdsStyle",
                "value": {
                  "mode": "off"
                }
              },
              {
                "id": "custom.axisWidth",
                "value": 70
              },
              {
                "id": "unit",
                "value": "bool_hack_axis"
              }
            ]
          }
        ]
      },
      "gridPos": {
        "h": 13,
        "w": 15,
        "x": 0,
        "y": 0
      },
      "id": 2,
      "links": [],
      "minSpan": null,
      "options": {
        "tooltip": {
          "mode": "multi",
          "sort": "desc"
        },
        "legend": {
          "showLegend": true,
          "displayMode": "table",
          "placement": "right",
          "calcs": [
            "max",
            "last"
          ],
          "width": 400
        }
      },
      "repeat": null,
      "repeatDirection": null,
      "targets": [
        {
          "refId": "A",
          "datasource": {
            "type": "grafana",
            "uid": "grafana"
          },
          "queryType": "snapshot",
          "snapshot": [
            {
              "schema": {
                "name": "s1",
                "fields": [
                  {
                    "name": "Time",
                    "type": "time",
                    "config": {}
                  },
                  {
                    "name": "Value",
                    "type": "number",
                    "config": {}
                  }
                ]
              },
              "data": {
                "values": [
                  [
                    1685348666000,
                    1685370266000
                  ],
                  [
                    1,
                    1
                  ]
                ]
              }
            },
            {
              "schema": {
                "name": "Force Y-axis",
                "fields": [
                  {
                    "name": "Time",
                    "type": "time",
                    "config": {}
                  },
                  {
                    "name": "Value",
                    "type": "number",
                    "config": {}
                  }
                ]
              },
              "data": {
                "values": [
                  [
                    1685348666000,
                    1685370266000
                  ],
                  [
                    0,
                    0
                  ]
                ]
              }
            }
          ]
        }
      ],
      "title": "Reproduced with embedded data",
      "transformations": [],
      "transparent": true,
      "type": "timeseries"
    },
    {
      "gridPos": {
        "h": 7,
        "w": 9,
        "x": 15,
        "y": 0
      },
      "id": 5,
      "options": {
        "content": "<table width=\"100%\">\n    <tr>\n      <th width=\"2%\">Panel</th>\n      <td >timeseries @ 10.1.0-pre (e15303bffa)</td>\n    </tr>\n    <tr>\n      <th>Queries</th>\n      <td>A[undefined]</td>\n    </tr>\n    <tr>\n      <th>Transform</th>\n      <td></td>\n  </tr>\n    <tr><th>Data</th><td> 2 frames, 4 fields, 4 rows </td></tr>\n    \n    <tr>\n      <th>Grafana</th>\n      <td>10.1.0-pre (e15303bffa) // Open Source</td>\n    </tr>\n  </table>",
        "mode": "html"
      },
      "title": "Debug info",
      "type": "text"
    },
    {
      "id": 6,
      "title": "Original Panel JSON",
      "type": "text",
      "gridPos": {
        "h": 13,
        "w": 9,
        "x": 15,
        "y": 7
      },
      "options": {
        "content": "{\n  \"datasource\": {\n    \"type\": \"mixed\",\n    \"uid\": \"-- Mixed --\"\n  },\n  \"fieldConfig\": {\n    \"defaults\": {\n      \"custom\": {\n        \"drawStyle\": \"line\",\n        \"lineInterpolation\": \"stepBefore\",\n        \"barAlignment\": 0,\n        \"lineWidth\": 1,\n        \"fillOpacity\": 80,\n        \"gradientMode\": \"none\",\n        \"spanNulls\": false,\n        \"showPoints\": \"auto\",\n        \"pointSize\": 5,\n        \"stacking\": {\n          \"mode\": \"normal\",\n          \"group\": \"A\"\n        },\n        \"axisPlacement\": \"auto\",\n        \"axisLabel\": \"\",\n        \"axisColorMode\": \"text\",\n        \"scaleDistribution\": {\n          \"type\": \"linear\"\n        },\n        \"axisCenteredZero\": false,\n        \"hideFrom\": {\n          \"tooltip\": false,\n          \"viz\": false,\n          \"legend\": false\n        },\n        \"thresholdsStyle\": {\n          \"mode\": \"line\"\n        },\n        \"axisWidth\": 90\n      },\n      \"color\": {\n        \"mode\": \"palette-classic\"\n      },\n      \"mappings\": [],\n      \"thresholds\": {\n        \"mode\": \"absolute\",\n        \"steps\": []\n      }\n    },\n    \"overrides\": [\n      {\n        \"matcher\": {\n          \"id\": \"byName\",\n          \"options\": \"s1\"\n        },\n        \"properties\": [\n          {\n            \"id\": \"color\",\n            \"value\": {\n              \"fixedColor\": \"#705da0\",\n              \"mode\": \"fixed\"\n            }\n          },\n          {\n            \"id\": \"custom.fillOpacity\",\n            \"value\": 0\n          }\n        ]\n      },\n      {\n        \"matcher\": {\n          \"id\": \"byName\",\n          \"options\": \"Force Y-axis\"\n        },\n        \"properties\": [\n          {\n            \"id\": \"color\",\n            \"value\": {\n              \"fixedColor\": \"transparent\",\n              \"mode\": \"fixed\"\n            }\n          },\n          {\n            \"id\": \"custom.hideFrom\",\n            \"value\": {\n              \"legend\": true,\n              \"tooltip\": true,\n              \"viz\": false\n            }\n          },\n          {\n            \"id\": \"custom.axisPlacement\",\n            \"value\": \"right\"\n          },\n          {\n            \"id\": \"custom.thresholdsStyle\",\n            \"value\": {\n              \"mode\": \"off\"\n            }\n          },\n          {\n            \"id\": \"custom.axisWidth\",\n            \"value\": 70\n          },\n          {\n            \"id\": \"unit\",\n            \"value\": \"bool_hack_axis\"\n          }\n        ]\n      }\n    ]\n  },\n  \"gridPos\": {\n    \"h\": 8,\n    \"w\": 24,\n    \"x\": 0,\n    \"y\": 32\n  },\n  \"id\": 5,\n  \"links\": [],\n  \"minSpan\": null,\n  \"options\": {\n    \"tooltip\": {\n      \"mode\": \"multi\",\n      \"sort\": \"desc\"\n    },\n    \"legend\": {\n      \"showLegend\": true,\n      \"displayMode\": \"table\",\n      \"placement\": \"right\",\n      \"calcs\": [\n        \"max\",\n        \"last\"\n      ],\n      \"width\": 400\n    }\n  },\n  \"repeat\": null,\n  \"repeatDirection\": null,\n  \"targets\": [\n    {\n      \"alias\": \"\",\n      \"datasource\": \"JSON\",\n      \"payload\": \"{\\\"timeseries_group_by\\\":\\\"none\\\",\\\"force_second_y_axis\\\":true,\\\"panel_type\\\":\\\"timeseries\\\"}\",\n      \"refId\": \"A\",\n      \"target\": \"S1\"\n    }\n  ],\n  \"title\": \"Paneů\",\n  \"transformations\": [],\n  \"transparent\": true,\n  \"type\": \"timeseries\"\n}",
        "mode": "code",
        "code": {
          "language": "json",
          "showLineNumbers": true,
          "showMiniMap": true
        }
      }
    },
    {
      "id": 3,
      "title": "Data from panel above",
      "type": "table",
      "datasource": {
        "type": "datasource",
        "uid": "-- Dashboard --"
      },
      "gridPos": {
        "h": 7,
        "w": 15,
        "x": 0,
        "y": 13
      },
      "options": {
        "showTypeIcons": true
      },
      "targets": [
        {
          "datasource": {
            "type": "datasource",
            "uid": "-- Dashboard --"
          },
          "panelId": 2,
          "withTransforms": true,
          "refId": "A"
        }
      ]
    }
  ],
  "schemaVersion": 37,
  "title": "Debug: Paneů // 2023-05-29 14:24:36",
  "tags": [
    "debug",
    "debug-timeseries"
  ],
  "time": {
    "from": "2023-05-29T08:24:36.794Z",
    "to": "2023-05-29T14:24:36.794Z"
  }
}

@simPod
Copy link
Contributor Author

simPod commented May 29, 2023

2023-05-29 16-26-09 2023-05-29 16_26_35

@leeoniya
Copy link
Contributor

👍

@simPod
Copy link
Contributor Author

simPod commented May 31, 2023

Thanks for the fix. I understand I use some legacy data format. Will inspect play.grafana in order to migrate.

@sbengo
Copy link
Contributor

sbengo commented Aug 31, 2023

Hi,
@leeoniya , @ryantxu , I have encountered the same case with other datasource that is using an old timeseries format. I thought that it would be fixed on Grafana 10.x version, but the issue is still present on latest vesrsion, at least, partially:

The tooltip is now rendering most of the time OK (it randomly fails...) if the user changes the variable selection, but when the user changes the time range of the dashboard, it shows again the {name=s1} format.

The issue can be reproduced on the following play.grafana.org dashboard:

  1. Go to (please, note the variables to get data):
    https://play.grafana.org/d/data-frame-scenarios-timeseries-panel/data-frame-scenarios-timeseries-panel?orgId=1&var-scenario=multi-frame&var-resultState=success&var-generator=frontend

  2. Change the time range using the arrows (or select now and then click into zoom):
    image

@leeoniya
Copy link
Contributor

@sbengo can you plz open a new issue with your comment and just link this issue from the new one?

thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants