knightss27 / grafana-network-weathermap

A fully featured and customizable network weathermap plugin for Grafana (9.0+).
https://grafana.com/grafana/plugins/knightss27-weathermap-panel/
Apache License 2.0
139 stars 7 forks source link

The arrow part of the link are not visible #22

Closed earendilfr closed 1 year ago

earendilfr commented 1 year ago

Describe the problem I have a small issue with weathermap: the arrow part of the links are not visible I can see the Connection but, at place of the arrows, I only see a blank part

I have tried to play with all arrows parameters but I never see the arrow part of links

Screenshots image

VERSIONS:

knightss27 commented 1 year ago

Can you send a link to your panel's JSON? Where you would click to edit the panel, you can instead click Inspect > Panel JSON. This would be useful to see what your settings look like.

earendilfr commented 1 year ago

Of course: here, the JSON part:

{
  "annotations": {
    "list": [
      {
        "builtIn": 1,
        "datasource": {
          "type": "grafana",
          "uid": "-- Grafana --"
        },
        "enable": true,
        "hide": true,
        "iconColor": "rgba(0, 211, 255, 1)",
        "name": "Annotations & Alerts",
        "target": {
          "limit": 100,
          "matchAny": false,
          "tags": [],
          "type": "dashboard"
        },
        "type": "dashboard"
      }
    ]
  },
  "editable": true,
  "fiscalYearStartMonth": 0,
  "graphTooltip": 0,
  "id": 140,
  "links": [],
  "liveNow": false,
  "panels": [
    {
      "datasource": {
        "type": "prometheus",
        "uid": "${datasource}"
      },
      "gridPos": {
        "h": 16,
        "w": 22,
        "x": 0,
        "y": 0
      },
      "id": 2,
      "options": {
        "weathermap": {
          "id": "2af80acf-c86f-4730-a65e-5e2abfdfbe59",
          "links": [
            {
              "id": "c61a1d25-aaa0-4d44-845d-5ae35d7b9e8d",
              "nodes": [
                {
                  "anchors": {
                    "0": {
                      "numFilledLinks": 0,
                      "numLinks": 0
                    },
                    "1": {
                      "numFilledLinks": 0,
                      "numLinks": 0
                    },
                    "2": {
                      "numFilledLinks": 0,
                      "numLinks": 0
                    },
                    "3": {
                      "numFilledLinks": 0,
                      "numLinks": 0
                    },
                    "4": {
                      "numFilledLinks": 0,
                      "numLinks": 0
                    }
                  },
                  "colors": {
                    "background": "rgba(204, 204, 220, 0.16)",
                    "border": "rgba(204, 204, 220, 0.25)",
                    "font": "rgb(204, 204, 220)"
                  },
                  "compactVerticalLinks": false,
                  "id": "91225f21-8eb5-42f8-85a5-338566185ed0",
                  "label": "afm",
                  "nodeIcon": {
                    "drawInside": true,
                    "name": "cisco/router",
                    "padding": {
                      "horizontal": 0,
                      "vertical": 0
                    },
                    "size": {
                      "height": 40,
                      "width": 40
                    },
                    "src": "public/plugins/knightss27-weathermap-panel/icons/cisco/router.svg"
                  },
                  "padding": {
                    "horizontal": 10,
                    "vertical": 4
                  },
                  "position": [
                    4,
                    295
                  ],
                  "useConstantSpacing": false
                },
                {
                  "anchors": {
                    "0": {
                      "numFilledLinks": 0,
                      "numLinks": 0
                    },
                    "1": {
                      "numFilledLinks": 0,
                      "numLinks": 0
                    },
                    "2": {
                      "numFilledLinks": 0,
                      "numLinks": 0
                    },
                    "3": {
                      "numFilledLinks": 0,
                      "numLinks": 0
                    },
                    "4": {
                      "numFilledLinks": 0,
                      "numLinks": 0
                    }
                  },
                  "colors": {
                    "background": "rgba(204, 204, 220, 0.16)",
                    "border": "rgba(204, 204, 220, 0.25)",
                    "font": "rgb(204, 204, 220)"
                  },
                  "compactVerticalLinks": false,
                  "id": "a1586e18-75ed-478d-bddc-f96701215f93",
                  "label": "afm024a",
                  "nodeIcon": {
                    "drawInside": true,
                    "name": "cisco/workgroup-switch",
                    "padding": {
                      "horizontal": 0,
                      "vertical": 0
                    },
                    "size": {
                      "height": 40,
                      "width": 40
                    },
                    "src": "public/plugins/knightss27-weathermap-panel/icons/cisco/workgroup-switch.svg"
                  },
                  "padding": {
                    "horizontal": 10,
                    "vertical": 4
                  },
                  "position": [
                    400,
                    300
                  ],
                  "useConstantSpacing": false
                }
              ],
              "sides": {
                "A": {
                  "anchor": 4,
                  "bandwidth": 10000000000,
                  "bandwidthQuery": "afm - Speed: 10GigabitEthernet1/2/5",
                  "currentBandwidthText": "10  Gb/s",
                  "currentText": "1.10  Mb/s",
                  "currentValue": 1103176.6333333333,
                  "dashboardLink": "/d/ff7VXe3iz/icx-interface-explorer?var-Device=afm024a&var-Interface=10GigabitEthernet1%2F2%2F1",
                  "labelOffset": 52,
                  "query": "afm - 10GigabitEthernet1/2/5"
                },
                "Z": {
                  "anchor": 3,
                  "bandwidth": 10000000000,
                  "bandwidthQuery": "afm024a - Speed: 10GigabitEthernet1/2/1",
                  "currentBandwidthText": "10  Gb/s",
                  "currentText": "13.7  Mb/s",
                  "currentValue": 13659752.616724815,
                  "dashboardLink": "/d/ff7VXe3iz/icx-interface-explorer?var-Device=afm024a&var-Interface=10GigabitEthernet1%2F2%2F1",
                  "labelOffset": 51,
                  "query": "afm024a - 10GigabitEthernet1/2/1"
                }
              },
              "units": "bps"
            }
          ],
          "nodes": [
            {
              "anchors": {
                "0": {
                  "numFilledLinks": 0,
                  "numLinks": 0
                },
                "1": {
                  "numFilledLinks": 0,
                  "numLinks": 0
                },
                "2": {
                  "numFilledLinks": 0,
                  "numLinks": 0
                },
                "3": {
                  "numFilledLinks": 0,
                  "numLinks": 0
                },
                "4": {
                  "numFilledLinks": 0,
                  "numLinks": 0
                }
              },
              "colors": {
                "background": "#00000000",
                "border": "#00000000",
                "font": "rgb(204, 204, 220)"
              },
              "compactVerticalLinks": false,
              "id": "91225f21-8eb5-42f8-85a5-338566185ed0",
              "isConnection": false,
              "label": "afm",
              "nodeIcon": {
                "drawInside": true,
                "name": "cisco/router",
                "padding": {
                  "horizontal": 0,
                  "vertical": 0
                },
                "size": {
                  "height": 40,
                  "width": 40
                },
                "src": "public/plugins/knightss27-weathermap-panel/icons/cisco/router.svg"
              },
              "padding": {
                "horizontal": 10,
                "vertical": 4
              },
              "position": [
                4,
                295
              ],
              "useConstantSpacing": false
            },
            {
              "anchors": {
                "0": {
                  "numFilledLinks": 0,
                  "numLinks": 0
                },
                "1": {
                  "numFilledLinks": 0,
                  "numLinks": 0
                },
                "2": {
                  "numFilledLinks": 0,
                  "numLinks": 0
                },
                "3": {
                  "numFilledLinks": 0,
                  "numLinks": 0
                },
                "4": {
                  "numFilledLinks": 0,
                  "numLinks": 0
                }
              },
              "colors": {
                "background": "#00000000",
                "border": "#00000000",
                "font": "rgb(204, 204, 220)"
              },
              "compactVerticalLinks": false,
              "id": "a1586e18-75ed-478d-bddc-f96701215f93",
              "isConnection": false,
              "label": "afm024a",
              "nodeIcon": {
                "drawInside": true,
                "name": "cisco/workgroup-switch",
                "padding": {
                  "horizontal": 0,
                  "vertical": 0
                },
                "size": {
                  "height": 40,
                  "width": 40
                },
                "src": "public/plugins/knightss27-weathermap-panel/icons/cisco/workgroup-switch.svg"
              },
              "padding": {
                "horizontal": 10,
                "vertical": 4
              },
              "position": [
                633,
                291
              ],
              "useConstantSpacing": false
            }
          ],
          "scale": [
            {
              "color": "#8d8f91",
              "percent": 0
            },
            {
              "color": "#56A64B",
              "percent": 1e-10
            },
            {
              "color": "#FFEE52",
              "percent": 75
            },
            {
              "color": "#FF780A",
              "percent": 85
            },
            {
              "color": "#E02F44",
              "percent": 95
            }
          ],
          "settings": {
            "fontSizing": {
              "link": 7,
              "node": 10
            },
            "link": {
              "label": {
                "background": "rgba(204, 204, 220, 0.16)",
                "border": "rgba(204, 204, 220, 0.25)",
                "font": "rgb(204, 204, 220)"
              },
              "spacing": {
                "horizontal": 10,
                "vertical": 5
              },
              "stroke": {
                "color": "rgba(204, 204, 220, 0.16)",
                "width": 5
              }
            },
            "linkArrow": {
              "height": 5,
              "offset": 2,
              "width": 16
            },
            "panel": {
              "backgroundColor": "#181b1f",
              "grid": {
                "enabled": false,
                "guidesEnabled": false,
                "size": 10
              },
              "offset": {
                "x": 0,
                "y": 0
              },
              "panelSize": {
                "height": 600,
                "width": 600
              },
              "zoomScale": 0
            },
            "scale": {
              "fontSizing": {
                "threshold": 12,
                "title": 16
              },
              "position": {
                "x": 0,
                "y": 0
              },
              "size": {
                "height": 200,
                "width": 50
              },
              "title": "Traffic Load"
            },
            "tooltip": {
              "backgroundColor": "black",
              "fontSize": 8,
              "textColor": "white"
            }
          },
          "version": 5
        }
      },
      "targets": [
        {
          "datasource": {
            "type": "prometheus",
            "uid": "${datasource}"
          },
          "editorMode": "code",
          "exemplar": false,
          "expr": "rate(ifHCInOctets{instance=~\"afm.*\",ifDescr=~\"10Gig.*\"}[5m]) * 8",
          "instant": true,
          "legendFormat": "{{instance}} - {{ifDescr}}",
          "range": false,
          "refId": "ifHCInOctets"
        },
        {
          "datasource": {
            "type": "prometheus",
            "uid": "${datasource}"
          },
          "editorMode": "code",
          "exemplar": false,
          "expr": "avg_over_time(ifHighSpeed{instance=~\"afm.*\", ifDescr=~\"10Gig.*\"}[5m])*1000000",
          "format": "time_series",
          "hide": false,
          "instant": true,
          "legendFormat": "{{instance}} - Speed: {{ifDescr}}",
          "range": false,
          "refId": "ifHighSpeed"
        }
      ],
      "title": "Panel Title",
      "type": "knightss27-weathermap-panel"
    }
  ],
  "schemaVersion": 37,
  "style": "dark",
  "tags": [],
  "templating": {
    "list": [
      {
        "current": {
          "selected": false,
          "text": "prometheus01",
          "value": "prometheus01"
        },
        "hide": 0,
        "includeAll": false,
        "label": "Datasource",
        "multi": false,
        "name": "datasource",
        "options": [],
        "query": "prometheus",
        "refresh": 1,
        "regex": "",
        "skipUrlSync": false,
        "type": "datasource"
      }
    ]
  },
  "time": {
    "from": "now-6h",
    "to": "now"
  },
  "timepicker": {},
  "timezone": "",
  "title": "Test",
  "uid": "Bd9VR63nz",
  "version": 3,
  "weekStart": ""
}
knightss27 commented 1 year ago

Hmm. This all seems OK to me, nothing out of the ordinary. Is this issue easily reproducible for you? Do other links show their arrows (if you create more than one)? Or is this just happening with this one link (in fact, if you just recreate this link, are the arrows still gone?).

earendilfr commented 1 year ago

It's very easy to reproduce: all the link create on dashboard on my computer are displayed without the arrow. I have also try to create a new dashboard and the initial configuration posted when you add a new "weathermap" panel, the arrow are not displayed.

But a "good news", the problem seems to be only present with Firefox in fact: with Chromium, I can see the arrow

earendilfr commented 1 year ago

Good news: after a check, I have solve "potentially" the issue. It's on my side (I suspect something not correct in the browser cache).

knightss27 commented 1 year ago

Good to hear you found a fix. I would have doubted it was a Firefox specific problem given I actually develop with Firefox anyways, so it's much more likely to have broken on Chromium! Let me know if you have any more issues!