Merge pull request #40 from Enapter/ym/use-variables

commands(feat): added support for $variables
Enapter · Oct 10, 2023 · 6b2cd69 · 6b2cd69
2 parents 01e3102 + 0a0d164
commit 6b2cd69
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 11 deletions.
diff --git a/enapter-commands-panel/CHANGELOG.md b/enapter-commands-panel/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
-## 1.0.0 (Unreleased)
+## v1.1.0
+
+- Added support for $variables in command name, command argumens, button text, and device ID
+
+## v1.0.0
 
 Initial release.
diff --git a/enapter-commands-panel/src/components/CommandButtonPanel.tsx b/enapter-commands-panel/src/components/CommandButtonPanel.tsx
@@ -2,7 +2,7 @@ import React, { useCallback, useState } from 'react';
 import { AppEvents, PanelProps } from '@grafana/data';
 import { Button, ConfirmModal } from '@grafana/ui';
 import { CommandButtonPanelProps } from '../types';
-import { getAppEvents, getBackendSrv } from '@grafana/runtime';
+import { getAppEvents, getBackendSrv, getTemplateSrv } from '@grafana/runtime';
 
 // if (process.env.NODE_ENV === 'development') {
 //   console.log('Setting up mirage server');
@@ -17,17 +17,17 @@ const getArgumentsAsObject = (
 ) => {
   const result: { [key: string]: any } = {};
   args.forEach((arg) => {
-    let value = arg.value;
+    let value: string | number = getTemplateSrv().replace(arg.value)
 
     try {
-      const isContainCommaOrDot = arg.value.includes(',') || arg.value.includes('.');
-      const isInt = Number.isInteger(Number.parseInt(arg.value, 10));
-      const isFloat = Number.isFinite(Number.parseFloat(arg.value));
+      const isContainCommaOrDot = value.includes(',') || value.includes('.');
+      const isInt = Number.isInteger(Number.parseInt(value, 10));
+      const isFloat = Number.isFinite(Number.parseFloat(value));
 
       if (!isContainCommaOrDot && isInt) {
-        value = Number.parseInt(arg.value, 10);
+        value = Number.parseInt(value, 10);
       } else if (isFloat) {
-        value = Number.parseFloat(arg.value);
+        value = Number.parseFloat(value);
       }
     } catch (e) {
       console.error(e);
@@ -38,9 +38,20 @@ const getArgumentsAsObject = (
   return result;
 };
 
+const replaceVariables = (v: string) => getTemplateSrv().replace(v)
+
 export const CommandButtonPanel: React.FC<PanelProps<CommandButtonPanelProps>> = (props) => {
-  const { commandName, commandArgs, buttonText, size, variant, icon, fullWidth, fullHeight, deviceId, datasourceName } =
-    props.options.commands[0];
+  const { commandName, commandArgs, buttonText, size, variant, icon, fullWidth, fullHeight, deviceId, datasourceName } = (() => {
+    const command = props.options.commands[0]
+
+    return {
+      ...command,
+      commandName: replaceVariables(command.commandName),
+      commandArgs: getArgumentsAsObject(command.commandArgs),
+      buttonText: replaceVariables(command.buttonText),
+      deviceId: replaceVariables(command.deviceId)
+    }
+  })()
 
   const [commandState, setCommandState] = useState<'idle' | 'running'>('idle');
 
@@ -106,7 +117,7 @@ export const CommandButtonPanel: React.FC<PanelProps<CommandButtonPanelProps>> =
           },
           payload: {
             commandName,
-            commandArgs: getArgumentsAsObject(commandArgs),
+            commandArgs,
             deviceId,
           },
         },