Transformer: Rename metrics based on regex (#29281)

* Grafana: Rename By Regex Transformer * Removing unused deps * Add scrollIntoView() to TranformTab.content() * Exporting RenameByRegexTransformerOptions * Add doc block to renameByRegex transformer * Adding doc block for RenameByRegexTransformerOptions * removing scrollIntoView() for transform tab * Adding back in scrollIntoView() for transform panel * Tests: fixes e2e tests * Apply to displayName instead of just the name of the frame * Rewrite docblock to match new functionality * Adding documentation * Changing TLD to domain name * Fixing typo * Update docs/sources/panels/transformations/types-options.md Co-authored-by: Diana Payton <52059945+oddlittlebird@users.noreply.github.com> * Update docs/sources/panels/transformations/types-options.md Co-authored-by: Diana Payton <52059945+oddlittlebird@users.noreply.github.com> * Update docs/sources/panels/transformations/types-options.md Co-authored-by: achatterjee-grafana <70489351+achatterjee-grafana@users.noreply.github.com> Co-authored-by: Hugo Häggmark <hugo.haggmark@grafana.com> Co-authored-by: Diana Payton <52059945+oddlittlebird@users.noreply.github.com> Co-authored-by: achatterjee-grafana <70489351+achatterjee-grafana@users.noreply.github.com>
2025-02-25 18:55:37 -06:00 · 2020-12-09 03:31:13 -07:00
parent 3f2b28975c
commit 82b21fe35e
8 changed files with 394 additions and 0 deletions
--- a/public/app/core/components/TransformersUI/RenameByRegexTransformer.tsx
+++ b/public/app/core/components/TransformersUI/RenameByRegexTransformer.tsx
@@ -0,0 +1,131 @@
+import React from 'react';
+import {
+  DataTransformerID,
+  standardTransformers,
+  TransformerRegistyItem,
+  TransformerUIProps,
+  stringToJsRegex,
+} from '@grafana/data';
+import { Field, Input } from '@grafana/ui';
+import { css } from 'emotion';
+import { RenameByRegexTransformerOptions } from '@grafana/data/src/transformations/transformers/renameByRegex';
+
+interface RenameByRegexTransformerEditorProps extends TransformerUIProps<RenameByRegexTransformerOptions> {}
+
+interface RenameByRegexTransformerEditorState {
+  regex?: string;
+  renamePattern?: string;
+  isRegexValid?: boolean;
+}
+
+export class RenameByRegexTransformerEditor extends React.PureComponent<
+  RenameByRegexTransformerEditorProps,
+  RenameByRegexTransformerEditorState
+> {
+  constructor(props: RenameByRegexTransformerEditorProps) {
+    super(props);
+    this.state = {
+      regex: props.options.regex,
+      renamePattern: props.options.renamePattern,
+      isRegexValid: true,
+    };
+  }
+
+  handleRegexChange = (e: React.FormEvent<HTMLInputElement>) => {
+    const regex = e.currentTarget.value;
+    let isRegexValid = true;
+    if (regex) {
+      try {
+        if (regex) {
+          stringToJsRegex(regex);
+        }
+      } catch (e) {
+        isRegexValid = false;
+      }
+    }
+    this.setState(previous => ({ ...previous, regex, isRegexValid }));
+  };
+
+  handleRenameChange = (e: React.FormEvent<HTMLInputElement>) => {
+    const renamePattern = e.currentTarget.value;
+    this.setState(previous => ({ ...previous, renamePattern }));
+  };
+
+  handleRegexBlur = (e: React.FocusEvent<HTMLInputElement>) => {
+    const regex = e.currentTarget.value;
+    let isRegexValid = true;
+
+    try {
+      if (regex) {
+        stringToJsRegex(regex);
+      }
+    } catch (e) {
+      isRegexValid = false;
+    }
+
+    this.setState({ isRegexValid }, () => {
+      if (isRegexValid) {
+        this.props.onChange({ ...this.props.options, regex });
+      }
+    });
+  };
+
+  handleRenameBlur = (e: React.FocusEvent<HTMLInputElement>) => {
+    const renamePattern = e.currentTarget.value;
+    this.setState({ renamePattern }, () => this.props.onChange({ ...this.props.options, renamePattern }));
+  };
+
+  render() {
+    const { regex, renamePattern, isRegexValid } = this.state;
+    return (
+      <>
+        <div className="gf-form-inline">
+          <div className="gf-form gf-form--grow">
+            <div className="gf-form-label width-8">Match</div>
+            <Field
+              invalid={!isRegexValid}
+              error={!isRegexValid ? 'Invalid pattern' : undefined}
+              className={css`
+                margin-bottom: 0;
+              `}
+            >
+              <Input
+                placeholder="Regular expression pattern"
+                value={regex || ''}
+                onChange={this.handleRegexChange}
+                onBlur={this.handleRegexBlur}
+                width={25}
+              />
+            </Field>
+          </div>
+        </div>
+        <div className="gf-form-inline">
+          <div className="gf-form gf-form--grow">
+            <div className="gf-form-label width-8">Replace</div>
+            <Field
+              className={css`
+                margin-bottom: 0;
+              `}
+            >
+              <Input
+                placeholder="Replacement pattern"
+                value={renamePattern || ''}
+                onChange={this.handleRenameChange}
+                onBlur={this.handleRenameBlur}
+                width={25}
+              />
+            </Field>
+          </div>
+        </div>
+      </>
+    );
+  }
+}
+
+export const renameByRegexTransformRegistryItem: TransformerRegistyItem<RenameByRegexTransformerOptions> = {
+  id: DataTransformerID.renameByRegex,
+  editor: RenameByRegexTransformerEditor,
+  transformation: standardTransformers.renameByRegexTransformer,
+  name: 'Rename by regex',
+  description: 'Renames part of the query result by using regular expression with placeholders.',
+};