Merge pull request #72 from andymchugh/linkvars

link variables

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 ## 1.x.0
 
+Link Variables
+---------------
+This adds the ability to define link url substitutions to simplify oft-repeated base urls
+or argument sets. New config terms in siteConfig and panelConfig:
+- linkVariables
+
 Zoom Pan Pinch Wheel Activation
 -------------------------------
 This adds the ability to require an activation key such as 'Alt' to be pressed in order to enter

provisioning/dashboardData/links.yaml

@@ -35,8 +35,12 @@ cellIdPreamble: "cell-"
 gradientMode: "hue"
 tagConfig:
   condensed: false
-cells: 
 
+linkVariables:
+  urlPanelWebsiteBase: "https://github.com/andymchugh/andrewbmchugh-flow-panel"
+  urlPanelWebsiteSurname: "mchugh"
+
+cells: 
   grafana:
     link:
       url: "https://grafana.com/"
@@ -69,4 +73,19 @@ cells:
     link:
       url: "\\\\< > bad data"
       params: null
-
+  websiteSiteVariables:
+    link:
+      url: "https://github.com/andy${urlSiteWebsiteSurname}/andrewb${urlSiteWebsiteSurname}-flow-panel"
+      params: null
+  websitePanelVariables:
+    link:
+      url: "${urlPanelWebsiteBase}/tree/main/src/README.md"
+      params: null
+  relativeSiteVar:
+    link:
+      url: "/d/c3c52b34-4c6f-4f25-b2b9-b4c8cb31bbe1/flow-${animationSiteVar}?orgId=1"
+      params: null
+  badLinkSiteVar:
+    link:
+      url: "\\\\< > bad link ${animationSiteVar} variable data"
+      params: null

provisioning/dashboardData/linksSite.yaml

@@ -0,0 +1,6 @@
+---
+
+linkVariables:
+  urlSiteWebsiteBase: "https://github.com/andymchugh/andrewbmchugh-flow-panel"
+  urlSiteWebsiteSurname: "mchugh"
+  animationSiteVar: "animation"

src/components/Config.tsx

@@ -1,5 +1,4 @@
 import { VariableInterpolation, getTemplateSrv } from "@grafana/runtime";
-import { createUrl } from "./Utils";
 
 export type DatapointMode = 'last' | 'lastNotNull';
 export type ColorGradientMode = 'none' | 'hue';
@@ -24,6 +23,7 @@ export type Threshold = {
 export type Link = {
   url: string;
   params: LinkUrlParams;
+  initialized: boolean | undefined;
 };
 
 export type Background = {
@@ -132,6 +132,7 @@ export type ZoomPanPinch = {
 export type SiteConfig = {
   zoomPanPinch: ZoomPanPinch;
   variableThresholdScalars: Map<string, VariableThresholdScalars[]>;
+  linkVariables: Map<string, string>;
   links: Map<string, Link>;
   colors: Map<string, string>;
   thresholds: Map<string, Threshold[]>;
@@ -141,6 +142,7 @@ export type SiteConfig = {
 export type PanelConfig = {
   test: TestConfig;
   zoomPanPinch: ZoomPanPinch;
+  linkVariables: Map<string, string>;
   background: Background;
   animationsPresent: boolean;
   variableThresholdScalars: Map<string, VariableThresholdScalars[]>;
@@ -182,6 +184,7 @@ export function panelConfigFactory(config: any) {
   return {
     test: config.test || {},
     zoomPanPinch: config.zoomPanPinch || {},
+    linkVariables: new Map<string, string>(Object.entries(config.linkVariables || {})),
     background: config.background || {},
     variableThresholdScalars: new Map<string, VariableThresholdScalars[]>(Object.entries(config.variableThresholdScalars || {})),
     gradientMode: config.gradientMode || 'none',
@@ -198,6 +201,7 @@ export function siteConfigFactory(config: any) {
   config = config || {};
   return {
     zoomPanPinch: config.zoomPanPinch || {},
+    linkVariables: new Map<string, string>(Object.entries(config.linkVariables || {})),
     links: new Map<string, Link>(Object.entries(config.links || {})),
     colors: new Map<string, string>(Object.entries(config.colors || {})),
     variableThresholdScalars: new Map<string, VariableThresholdScalars[]>(Object.entries(config.variableThresholdScalars || {})),
@@ -246,6 +250,7 @@ function panelConfigDereference(siteConfig: SiteConfig, panelConfig: PanelConfig
     }
 
   }
+
   panelConfig.cells.forEach((cell) => {
     colorBlend(cell, 'labelColor', cell.labelColorCompound);
     colorBlend(cell, 'strokeColor', cell.strokeColorCompound);
@@ -254,9 +259,6 @@ function panelConfigDereference(siteConfig: SiteConfig, panelConfig: PanelConfig
     if (!cell.link && cell.linkRef) {
       cell.link = siteConfig.links.get(cell.linkRef);
     }
-    if (cell.link) {
-      cell.link = createUrl(cell.link);
-    }
 
     if (cell.label) {
       if (typeof cell.label.decimalPoints === 'undefined') {
@@ -313,6 +315,9 @@ function panelConfigDereference(siteConfig: SiteConfig, panelConfig: PanelConfig
     }
   });
 
+  // Blend linkVariables
+  panelConfig.linkVariables = new Map([...siteConfig.linkVariables, ...panelConfig.linkVariables]);
+
   // Blend ZoomPanPinch settings
   panelConfig.zoomPanPinch = {...siteConfig.zoomPanPinch, ...panelConfig.zoomPanPinch};
 }

src/components/FlowPanel.tsx

@@ -11,7 +11,7 @@ import { svgInit, svgUpdate, SvgHolder, SvgElementAttribs } from 'components/Svg
 import { seriesExtend, seriesInterpolate , seriesTransform } from 'components/TimeSeries';
 import { TimeSliderFactory } from 'components/TimeSlider';
 import { displayColorsInner, displayDataInner, displayMappingsInner, displaySvgInner } from 'components/DebuggingEditor';
-import { appendUrlParams, colorLookup, getInstrumenter } from 'components/Utils';
+import { colorLookup, constructUrl, getInstrumenter } from 'components/Utils';
 import { addHook, sanitize } from 'dompurify';
 import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch';
 
@@ -74,31 +74,22 @@ const getStyles = () => {
   };
 };
 
-function clickHandlerFactory(elementAttribs: Map<string, SvgElementAttribs>) {
+function clickHandlerFactory(elementAttribs: Map<string, SvgElementAttribs>, linkVariables: Map<string, string>) {
   return (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
     if (event.target) {
       const element = event.target as HTMLElement;
       const link = elementAttribs.get(element.id)?.link;
       if (link) {
-        let url = link.url;
-        if (link.params === 'time') {
-          const urlParams = new URLSearchParams(window.location.search);
-          const from = urlParams.get('from');
-          const to = urlParams.get('to');
-          const phrase = from && to ? `?from=${from}&to=${to}` :
-            from ? `?from=${from}` :
-            to ? `?to=${to}` : '';
-          url = appendUrlParams(url, phrase);
+        const url = constructUrl(link, linkVariables);
+        if (url) {
+          window.open(getTemplateSrv().replace(url));
         }
-        else if (link.params === 'all') {
-          url = appendUrlParams(url, window.location.search);
-        }
-        window.open(getTemplateSrv().replace(url));
       }
     }
   }
 }
 
+
 export const FlowPanel: React.FC<Props> = ({ options, data, width, height, timeZone }) => {
   //---------------------------------------------------------------------------
   // State for 'load -> init -> update' startup phasing
@@ -171,7 +162,7 @@ export const FlowPanel: React.FC<Props> = ({ options, data, width, height, timeZ
         doc: svgDoc,
         attribs: svgAttribs,
       };
-      clickHandlerRef.current = clickHandlerFactory(svgAttribs.elementAttribs);
+      clickHandlerRef.current = clickHandlerFactory(svgAttribs.elementAttribs, panelConfig.linkVariables);
 
       setHighlighterSelection(undefined);
       setInitialized(true);

src/components/Utils.tsx

@@ -41,17 +41,45 @@ export function isUrl(str: string) {
   }
 }
 
-export function createUrl(link: Link) {
+export function createUrl(url: string) {
   try {
-    link.url = new URL(link.url, document.baseURI).href;
-    return link;
+    url = new URL(url, document.baseURI).href;
+    return url;
   }
   catch(err) {
-    console.log('invalid url link', link.url, 'error:', err);
+    console.log('invalid url', url, 'error:', err);
     return undefined;
   }
 }
 
+export function constructUrl(link: Link, linkVariables: Map<string, string>) {
+  if (!link.initialized) {
+    link.initialized = true;
+    linkVariables.forEach((value: string, key: string) => {
+      const token = '\$\{'.concat(key, '\}');
+      link.url = link.url.split(token).join(value);
+    });
+    link.url = createUrl(link.url) || "";
+  }
+  if (link.url.length) {
+    let url = link.url;
+    if (link.params === 'time') {
+      const urlParams = new URLSearchParams(window.location.search);
+      const from = urlParams.get('from');
+      const to = urlParams.get('to');
+      const phrase = from && to ? `?from=${from}&to=${to}` :
+        from ? `?from=${from}` :
+        to ? `?to=${to}` : '';
+      url = appendUrlParams(url, phrase);
+    }
+    else if (link.params === 'all') {
+      url = appendUrlParams(url, window.location.search);
+    }
+    return url;
+  }
+  return undefined;
+}
+
 //-----------------------------------------------------------------------------
 // RegExp
 //-------

yaml_defs/panelConfig.yaml

@@ -31,6 +31,7 @@ test:
   # Version 1.12.0 onwards: When set test data values are extended with a string-data timeseries.
   testDataStringData: false
 
+#------------------------------------------------------------------------------
 # Version 1.14.0 onwards: The zoomPanPinch yaml provides customization of the zoom-pan-pinch
 # behavior. It can be defined in either panelConfig or siteConfig.
 zoomPanPinch:
@@ -40,6 +41,14 @@ zoomPanPinch:
   # requiring a combo such as ALT+Scroll this clash can be avoided. 
   wheelActivationKeys: ["Alt"]
 
+#------------------------------------------------------------------------------
+# Version 1.14.0 onwards: Link variables will be substituted in urls prior to passing through
+# grafana variable substitution. Variables should be defined in the same format as grafana variables.
+# i.e. ${urlBasePlugin}. These variables can be defined in siteConfig or panelConfig.
+linkVariables:
+  urlBasePlugin: "https://github.com/andymchugh/andrewbmchugh-flow-panel/blob/main/"
+  urlBaseGrafana: "https://app.diagrams.net/"
+
 #------------------------------------------------------------------------------
 # Grafana Variable Scalars
 

yaml_defs/siteConfig.yaml

@@ -20,6 +20,13 @@ variableThresholdScalars:
   environment:
     - {variableValuePattern: "dev", thresholdScalar: 0.2, cellIdPatternScope: ["inbox_depth"]}
 
+# Version 1.14.0 onwards: Link variables will be substituted in urls prior to passing through
+# grafana variable substitution. Variables should be defined in the same format as grafana variables.
+# i.e. ${urlBasePlugin}. These variables can be defined in siteConfig or panelConfig.
+linkVariables:
+  urlBasePlugin: "https://github.com/andymchugh/andrewbmchugh-flow-panel/blob/main/"
+  urlBaseGrafana: "https://app.diagrams.net/"
+
 # These are referenced from panelConfig via the 'linkRef' field.
 # The fields inside a link are explained in the panelConfig documentation.
 # i.e. In panelConfig you see: linkRef: "drawio"