Transformations: De-emphasize non-applicable transformations

packages/grafana-data/src/transformations/transformers/formatTime.ts

@@ -18,6 +18,19 @@ export const formatTimeTransformer: DataTransformerInfo<FormatTimeTransformerOpt
   name: 'Format Time',
   description: 'Set the output format of a time field',
   defaultOptions: { timeField: '', outputFormat: '', useTimezone: true },
+  applicator: (data) => {
+    // Search for a time field
+    // if there is one then we can use this transformation
+    for (const frame of data) {
+      for (const field of frame.fields) {
+        if (field.type === 'time') {
+          return true;
+        }
+      }
+    }
+
+    return false;
+  },
   operator: (options) => (source) =>
     source.pipe(
       map((data) => {

packages/grafana-data/src/transformations/transformers/groupBy.ts

@@ -29,7 +29,21 @@ export const groupByTransformer: DataTransformerInfo<GroupByTransformerOptions>
   defaultOptions: {
     fields: {},
   },
-
+  applicator: (data) => {
+    let maxFields = 0;
+
+    // Group by needs at least two fields
+    // a field to group on and a field to aggregate
+    // We make sure that at least one frame has at
+    // least two fields
+    for (const frame of data) {
+      if (frame.fields.length > maxFields) {
+        maxFields = frame.fields.length;
+      }
+    }
+
+    return maxFields >= 2;
+  },
   /**
    * Return a modified copy of the series. If the transform is not or should not
    * be applied, just return the input series

packages/grafana-data/src/transformations/transformers/groupingToMatrix.ts

@@ -33,7 +33,18 @@ export const groupingToMatrixTransformer: DataTransformerInfo<GroupingToMatrixTr
     rowField: DEFAULT_ROW_FIELD,
     valueField: DEFAULT_VALUE_FIELD,
   },
+  /**
+   * Grouping to matrix requires at least 3 fields to work.
+   */
+  applicator: (data) => {
+    let numFields = 0;
+
+    for (const frame of data) {
+      numFields += frame.fields.length;
+    }
 
+    return numFields >= 3;
+  },
   operator: (options) => (source) =>
     source.pipe(
       map((data) => {

packages/grafana-data/src/transformations/transformers/merge.ts

@@ -19,6 +19,9 @@ export const mergeTransformer: DataTransformerInfo<MergeTransformerOptions> = {
   name: 'Merge series/tables',
   description: 'Merges multiple series/tables into a single serie/table',
   defaultOptions: {},
+  applicator: (data) => {
+    return data.length > 1;
+  },
   operator: (options) => (source) =>
     source.pipe(
       map((dataFrames) => {

packages/grafana-data/src/types/transformations.ts

@@ -28,6 +28,12 @@ export interface DataTransformerInfo<TOptions = any> extends RegistryItemWithOpt
    * @param options
    */
   operator: (options: TOptions, context: DataTransformContext) => MonoTypeOperatorFunction<DataFrame[]>;
+  /**
+   * Function that is present will indicate whether a transformation is applicable 
+   * given the current data.
+   * @param options
+   */
+  applicator?: (data: DataFrame[]) => boolean;
 }
 
 /**

public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx

@@ -486,6 +486,7 @@ class UnThemedTransformationsEditor extends React.PureComponent<TransformationsE
                 <TransformationsGrid
                   showIllustrations={this.state.showIllustrations}
                   transformations={xforms}
+                  data={this.state.data}
                   onClick={(id) => {
                     this.onTransformationAdd({ value: id });
                   }}
@@ -680,40 +681,50 @@ interface TransformationsGridProps {
   transformations: Array<TransformerRegistryItem<any>>;
   showIllustrations?: boolean;
   onClick: (id: string) => void;
+  data: DataFrame[];
 }
 
-function TransformationsGrid({ showIllustrations, transformations, onClick }: TransformationsGridProps) {
+function TransformationsGrid({ showIllustrations, transformations, onClick, data }: TransformationsGridProps) {
   const styles = useStyles2(getStyles);
 
   return (
     <div className={styles.grid}>
-      {transformations.map((transform) => (
-        <Card
-          key={transform.id}
-          className={styles.newCard}
-          data-testid={selectors.components.TransformTab.newTransform(transform.name)}
-          onClick={() => onClick(transform.id)}
-        >
-          <Card.Heading className={styles.heading}>
-            <>
-              <span>{transform.name}</span>
-              <span className={styles.pluginStateInfoWrapper}>
-                <PluginStateInfo state={transform.state} />
-              </span>
-            </>
-          </Card.Heading>
-          <Card.Description className={styles.description}>
-            <>
-              <span>{getTransformationsRedesignDescriptions(transform.id)}</span>
-              {showIllustrations && (
-                <span>
-                  <img className={styles.image} src={getImagePath(transform.id)} alt={transform.name} />
+      {transformations.map((transform) => {
+        // Check to see if the transform 
+        // is applicable to the given data
+        let applicable = true;
+        if (transform.transformation.applicator !== undefined) {
+          applicable = transform.transformation.applicator(data);
+        }
+
+        return (
+          <Card
+            key={transform.id}
+            className={styles.newCard}
+            data-testid={selectors.components.TransformTab.newTransform(transform.name)}
+            onClick={() => onClick(transform.id)}
+            disabled={!applicable}
+          >
+            <Card.Heading className={styles.heading}>
+              <>
+                <span>{transform.name}</span>
+                <span className={styles.pluginStateInfoWrapper}>
+                  <PluginStateInfo state={transform.state} />
                 </span>
-              )}
-            </>
-          </Card.Description>
-        </Card>
-      ))}
+              </>
+            </Card.Heading>
+            <Card.Description className={styles.description}>
+              <>
+                <span>{getTransformationsRedesignDescriptions(transform.id)}</span>
+                {showIllustrations && (
+                  <span>
+                    <img className={styles.image} src={getImagePath(transform.id)} alt={transform.name} />
+                  </span>
+                )}
+              </>
+            </Card.Description>
+          </Card>
+        )})}
     </div>
   );
 }