From 08bb69a3c16baeabf89dd0df58d9c804d0adcd9f Mon Sep 17 00:00:00 2001
From: rozetko <rozetko@corpglory.com>
Date: Thu, 28 Mar 2024 19:39:51 +0300
Subject: [PATCH] fix the link issue

---
 src/components/Panel.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/Panel.tsx b/src/components/Panel.tsx
index 7e39434..6cc1e1d 100644
--- a/src/components/Panel.tsx
+++ b/src/components/Panel.tsx
@@ -14,13 +14,13 @@ import { PanelData, TimeRange, PanelProps } from '@grafana/data';
 import { VizLegend } from '@grafana/ui';
 import { LegendDisplayMode } from '@grafana/schema';
 
-import React, { useRef } from 'react';
+import React, { useCallback, useRef } from 'react';
 import { css } from 'emotion';
 import * as _ from 'lodash';
 
 interface Props extends PanelProps<PanelOptions> {}
 
-export function Panel({ options, data, width, height, timeRange, onChangeTimeRange }: Props) {
+export function Panel({ options, data, width, height, timeRange, onChangeTimeRange, replaceVariables }: Props) {
   const grafanaSeriesList = getGrafanaSeriesList(data, timeRange);
   let chartContainer = useRef(null);
 
@@ -45,13 +45,14 @@ export function Panel({ options, data, width, height, timeRange, onChangeTimeRan
   });
 
   const isLinkActive = !_.isEmpty(options.gauge.link);
-  const chartClickHandler = (event: React.MouseEvent<HTMLDivElement>) => {
+  const chartClickHandler = useCallback((event: React.MouseEvent<HTMLDivElement>) => {
     event.preventDefault();
     if (!isLinkActive) {
       return;
     }
-    window.open(options.gauge.link, '_self');
-  };
+    const link = replaceVariables(options.gauge.link as string);
+    window.open(link, '_self');
+  }, [options.gauge.link]);
   const legendItems = _.map(grafanaSeriesList, (serie) => {
     return {
       label: serie.alias,