@spinnaker/kayenta 0.0.0-main-2

package/src/kayenta/metricStore/prometheus/metricConfigurer.tsx

@@ -0,0 +1,157 @@
+import * as Creators from 'kayenta/actions/creators';
+import { ICanaryMetricConfig } from 'kayenta/domain/ICanaryConfig';
+import { DISABLE_EDIT_CONFIG, DisableableReactSelect } from 'kayenta/layout/disableable';
+import FormRow from 'kayenta/layout/formRow';
+import { IUpdateListPayload, List } from 'kayenta/layout/list';
+import RadioChoice from 'kayenta/layout/radioChoice';
+import { ICanaryState } from 'kayenta/reducers';
+import { queryTypeSelector } from 'kayenta/selectors/filterTemplatesSelectors';
+import { get } from 'lodash';
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { Option } from 'react-select';
+import { Action } from 'redux';
+import { createSelector } from 'reselect';
+
+import {
+  IPrometheusCanaryMetricSetQueryConfig,
+  PrometheusQueryType,
+} from './domain/IPrometheusCanaryMetricSetQueryConfig';
+import { ICanaryMetricValidationErrors } from '../../edit/editMetricValidation';
+import PrometheusMetricTypeSelector from './metricTypeSelector';
+import { editingMetricSelector } from '../../selectors';
+
+interface IPrometheusMetricConfigurerStateProps {
+  editingMetric: ICanaryMetricConfig;
+  queryType: PrometheusQueryType;
+  validationErrors: ICanaryMetricValidationErrors;
+}
+
+interface IPrometheusMetricConfigurerDispatchProps {
+  updateLabelBindings: (payload: IUpdateListPayload) => void;
+  updateGroupBy: (payload: IUpdateListPayload) => void;
+  updateFilterQueryType: (queryType: PrometheusQueryType) => void;
+  updatePrometheusMetricQueryField: <T extends keyof IPrometheusCanaryMetricSetQueryConfig>(
+    field: keyof IPrometheusCanaryMetricSetQueryConfig,
+    value: Option<IPrometheusCanaryMetricSetQueryConfig[T]>,
+  ) => void;
+}
+
+const RESOURCE_TYPES = ['gce_instance', 'aws_ec2_instance'];
+
+const toReactSelectOptions = (values: string[]): Array<Option<string>> =>
+  values.map((value) => ({ value, label: value }));
+
+/*
+ * Component for configuring a Prometheus metric.
+ * */
+function PrometheusMetricConfigurer({
+  editingMetric,
+  queryType,
+  updateLabelBindings,
+  updateGroupBy,
+  updateFilterQueryType,
+  updatePrometheusMetricQueryField,
+  validationErrors,
+}: IPrometheusMetricConfigurerStateProps & IPrometheusMetricConfigurerDispatchProps) {
+  return (
+    <>
+      <FormRow label="Query Type" helpId="canary.config.prometheus.queryType">
+        <RadioChoice
+          value={PrometheusQueryType.DEFAULT}
+          label="Default"
+          name="queryType"
+          current={queryType}
+          action={() => updateFilterQueryType(PrometheusQueryType.DEFAULT)}
+        />
+        <RadioChoice
+          value={PrometheusQueryType.PROMQL}
+          label="PromQL"
+          name="queryType"
+          current={queryType}
+          action={() => updateFilterQueryType(PrometheusQueryType.PROMQL)}
+        />
+      </FormRow>
+      {queryType === PrometheusQueryType.DEFAULT && (
+        <>
+          <FormRow label="Resource Type" inputOnly={true}>
+            <DisableableReactSelect
+              value={get(editingMetric, 'query.resourceType')}
+              options={toReactSelectOptions(RESOURCE_TYPES)}
+              onChange={(option: Option<string>) => updatePrometheusMetricQueryField('resourceType', option)}
+              disabledStateKeys={[DISABLE_EDIT_CONFIG]}
+            />
+          </FormRow>
+          <FormRow label="Metric Name" inputOnly={true} error={get(validationErrors, 'metricName.message', null)}>
+            <PrometheusMetricTypeSelector
+              value={get(editingMetric, 'query.metricName', '')}
+              onChange={(option: Option<string>) => updatePrometheusMetricQueryField('metricName', option)}
+            />
+          </FormRow>
+          <FormRow label="Label Bindings">
+            <List list={editingMetric.query.labelBindings || []} actionCreator={updateLabelBindings} />
+          </FormRow>
+          <FormRow label="Group By">
+            <List list={editingMetric.query.groupByFields || []} actionCreator={updateGroupBy} />
+          </FormRow>
+        </>
+      )}
+    </>
+  );
+}
+
+function mapStateToProps(state: ICanaryState): IPrometheusMetricConfigurerStateProps {
+  return {
+    editingMetric: state.selectedConfig.editingMetric,
+    queryType: queryTypeSelector(state),
+    validationErrors: prometheusMetricValidationSelector(state),
+  };
+}
+
+function mapDispatchToProps(dispatch: (action: Action & any) => void): IPrometheusMetricConfigurerDispatchProps {
+  return {
+    updateLabelBindings: (payload) => dispatch(Creators.updatePrometheusLabelBindings(payload)),
+    updateGroupBy: (payload) => dispatch(Creators.updatePrometheusGroupBy(payload)),
+    updatePrometheusMetricQueryField: (field, option) =>
+      dispatch(Creators.updatePrometheusMetricQueryField({ field, value: option && option.value })),
+    updateFilterQueryType: (value: PrometheusQueryType) => {
+      dispatch(Creators.updatePrometheusMetricQueryField({ field: 'queryType', value }));
+      dispatch(Creators.editTemplateCancel()); // clear template editing
+      dispatch(Creators.selectTemplate({ name: null })); // deselect template
+      dispatch(Creators.editInlineTemplate({ value: '' })); // clear inline template
+    },
+  };
+}
+
+const prometheusMetricValidationSelector = createSelector(editingMetricSelector, validateMetric);
+
+/**
+ * Validates Prometheus specific fields on the edit metric modal
+ */
+function validateMetric(editingMetric: ICanaryMetricConfig): ICanaryMetricValidationErrors {
+  const errors: ICanaryMetricValidationErrors = {
+    metricName: null,
+  };
+  return [validatePrometheusMetricName].reduce(
+    (reducedErrors, validator) => validator(reducedErrors, editingMetric),
+    errors,
+  );
+}
+
+/**
+ * Validates that the user has supplied a Prometheus metric.
+ */
+function validatePrometheusMetricName(
+  errors: ICanaryMetricValidationErrors,
+  editingMetric: ICanaryMetricConfig,
+): ICanaryMetricValidationErrors {
+  const nextErrors = { ...errors };
+  const metricName = get(editingMetric, 'query.metricName', '');
+  if (!metricName) {
+    nextErrors.metricName = { message: 'The Prometheus metric is required.' };
+    return nextErrors;
+  }
+  return nextErrors;
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(PrometheusMetricConfigurer);

package/src/kayenta/metricStore/prometheus/metricTypeSelector.less

@@ -0,0 +1,5 @@
+.prometheus-metric-type-selector-account-hint {
+  display: flex;
+  align-items: center;
+  height: 30px;
+}

package/src/kayenta/metricStore/prometheus/metricTypeSelector.spec.tsx

@@ -0,0 +1,62 @@
+import { shallow } from 'enzyme';
+import { DisableableReactSelect } from 'kayenta/layout/disableable';
+import * as React from 'react';
+
+import { noop } from '@spinnaker/core';
+
+import { IPrometheusMetricTypeSelectorProps, PrometheusMetricTypeSelector } from './metricTypeSelector';
+
+describe('<PrometheusMetricTypeSelector />', () => {
+  let wrapper: any;
+  const defaultProps: IPrometheusMetricTypeSelectorProps = {
+    accountOptions: [
+      {
+        label: 'my-first-prometheus-account',
+        value: 'my-first-prometheus-account',
+      },
+      {
+        label: 'my-second-prometheus-account',
+        value: 'my-second-prometheus-account',
+      },
+    ],
+    load: noop,
+    loading: false,
+    metricOptions: [],
+    onChange: noop,
+    value: '',
+  };
+
+  it('renders a typeahead select to search for metrics', () => {
+    wrapper = shallow(<PrometheusMetricTypeSelector {...defaultProps} />);
+    expect(wrapper.find(DisableableReactSelect).length).toEqual(1);
+    expect(wrapper.find(DisableableReactSelect).props().placeholder).toEqual(
+      'Enter at least three characters to search.',
+    );
+  });
+
+  it('displays which account will populate the search when >1 account is configured, defaulting to the first account alphabetically', () => {
+    wrapper = shallow(<PrometheusMetricTypeSelector {...defaultProps} />);
+    expect(wrapper.find('.prometheus-metric-type-selector-account-hint span').at(0).text()).toEqual(
+      'Metric search is currently populating from my-first-prometheus-account.',
+    );
+  });
+
+  it('allows the user to switch which account populates the search when >1 account is configured', () => {
+    wrapper = shallow(<PrometheusMetricTypeSelector {...defaultProps} />);
+    expect(wrapper.find('.btn').text()).toEqual('Switch Account');
+    wrapper.find('.btn').simulate('click');
+    expect(wrapper.state('showAccountDropdown')).toEqual(true);
+    expect(wrapper.find(DisableableReactSelect).length).toEqual(2);
+  });
+
+  it('does not display account selection hint when there is only one account configured', () => {
+    wrapper = shallow(
+      <PrometheusMetricTypeSelector
+        {...defaultProps}
+        accountOptions={[{ label: 'my-only-prometheus-account', value: 'my-only-prometheus-account' }]}
+      />,
+    );
+    expect(wrapper.find('.prometheus-metric-type-selector-account-hint').length).toEqual(0);
+    expect(wrapper.find('.btn').length).toEqual(0);
+  });
+});

package/src/kayenta/metricStore/prometheus/metricTypeSelector.tsx

@@ -0,0 +1,144 @@
+import * as Creators from 'kayenta/actions/creators';
+import { KayentaAccountType } from 'kayenta/domain';
+import { DISABLE_EDIT_CONFIG, DisableableReactSelect } from 'kayenta/layout/disableable';
+import { ICanaryState } from 'kayenta/reducers';
+import { AsyncRequestState } from 'kayenta/reducers/asyncRequest';
+import { chain, get } from 'lodash';
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { Option } from 'react-select';
+import { Dispatch } from 'redux';
+import { createSelector } from 'reselect';
+
+import { IPrometheusMetricDescriptor } from './domain/IPrometheusMetricDescriptor';
+
+import './metricTypeSelector.less';
+
+interface IPrometheusMetricTypeSelectorDispatchProps {
+  load: (filter: string, metricsAccountName: string) => void;
+}
+
+interface IPrometheusMetricTypeSelectorStateProps {
+  accountOptions: Array<Option<string>>;
+  loading: boolean;
+  metricOptions: Array<Option<string>>;
+}
+
+interface IPrometheusMetricTypeSelectorOwnProps {
+  onChange: (option: Option<string>) => void;
+  value: string;
+}
+
+interface IPrometheusMetricTypeSelectorState {
+  selectedAccount: string;
+  showAccountDropdown: boolean;
+}
+
+export type IPrometheusMetricTypeSelectorProps = IPrometheusMetricTypeSelectorDispatchProps &
+  IPrometheusMetricTypeSelectorStateProps &
+  IPrometheusMetricTypeSelectorOwnProps;
+
+export class PrometheusMetricTypeSelector extends React.Component<
+  IPrometheusMetricTypeSelectorProps,
+  IPrometheusMetricTypeSelectorState
+> {
+  public constructor(props: IPrometheusMetricTypeSelectorProps) {
+    super(props);
+    this.state = {
+      showAccountDropdown: false,
+      selectedAccount: get(props, ['accountOptions', 0, 'value']),
+    };
+  }
+
+  public render() {
+    const { accountOptions, load, loading, metricOptions, onChange, value } = this.props;
+
+    const metricOptionsWithSelected =
+      value && metricOptions.every((o) => o.value !== value)
+        ? metricOptions.concat({ label: value, value })
+        : metricOptions;
+
+    return (
+      <>
+        <DisableableReactSelect
+          isLoading={loading}
+          options={metricOptionsWithSelected}
+          onChange={onChange}
+          value={value}
+          placeholder={'Enter at least three characters to search.'}
+          onInputChange={(input) => {
+            load(input, this.state.selectedAccount);
+            return input;
+          }}
+          disabledStateKeys={[DISABLE_EDIT_CONFIG]}
+        />
+        {accountOptions.length > 1 && (
+          <div className="prometheus-metric-type-selector-account-hint">
+            <span>Metric search is currently populating from {this.state.selectedAccount}.</span>
+            <span className="btn btn-link" onClick={this.showAccountDropdown}>
+              {!this.state.showAccountDropdown && 'Switch Account'}
+            </span>
+          </div>
+        )}
+        {this.state.showAccountDropdown && (
+          <DisableableReactSelect
+            clearable={false}
+            options={accountOptions}
+            onChange={this.selectAccount}
+            value={this.state.selectedAccount}
+            disabledStateKeys={[DISABLE_EDIT_CONFIG]}
+          />
+        )}
+      </>
+    );
+  }
+
+  private showAccountDropdown = (): void => {
+    this.setState({
+      showAccountDropdown: true,
+    });
+  };
+
+  private selectAccount = (option: Option<string>): void => {
+    this.setState({
+      selectedAccount: option.value,
+      showAccountDropdown: false,
+    });
+  };
+}
+
+const accountOptionsSelector = createSelector(
+  (state: ICanaryState) => state.data.kayentaAccounts.data,
+  (accounts): Array<Option<string>> => {
+    return chain(accounts)
+      .filter((a) => a.supportedTypes.includes(KayentaAccountType.MetricsStore) && a.type === 'prometheus')
+      .sortBy((a) => a.name)
+      .map((a) => ({ label: a.name, value: a.name }))
+      .value();
+  },
+);
+
+const metricOptionsSelector = createSelector(
+  (state: ICanaryState) => state.data.metricsServiceMetadata.data,
+  (descriptors: IPrometheusMetricDescriptor[]): Array<Option<string>> =>
+    descriptors.map((d) => ({ label: d.name, value: d.name })),
+);
+
+const mapStateToProps = (state: ICanaryState, ownProps: IPrometheusMetricTypeSelectorOwnProps) => {
+  return {
+    accountOptions: accountOptionsSelector(state),
+    metricOptions: metricOptionsSelector(state),
+    loading: state.data.metricsServiceMetadata.load === AsyncRequestState.Requesting,
+    ...ownProps,
+  };
+};
+
+const mapDispatchToProps = (dispatch: Dispatch<ICanaryState>) => {
+  return {
+    load: (filter: string, metricsAccountName: string) => {
+      dispatch(Creators.updatePrometheusMetricDescriptorFilter({ filter, metricsAccountName }));
+    },
+  };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(PrometheusMetricTypeSelector);

package/src/kayenta/metricStore/prometheus/queryTypeSelectors.spec.ts

@@ -0,0 +1,61 @@
+import { ICanaryMetricConfig } from '../../domain';
+import { PrometheusQueryType } from './domain/IPrometheusCanaryMetricSetQueryConfig';
+import { appendPromQLPrefix, getPrometheusQueryType, isQueryPromQL, removePromQLPrefix } from './queryTypeSelectors';
+
+describe('Prometheus query type selectors', () => {
+  describe('isQueryPromQL', () => {
+    it('identifies PromQL queries by prefix', () => {
+      expect(isQueryPromQL('PromQL:count(prometheus_target_interval_length_seconds)')).toEqual(true);
+      expect(isQueryPromQL('metadata.user_labels."app"="${location}"')).toEqual(false);
+    });
+  });
+  describe('removePromQLPrefix', () => {
+    it('removes PromQL prefix from query', () => {
+      expect(removePromQLPrefix('PromQL:count(prometheus_target_interval_length_seconds)')).toEqual(
+        'count(prometheus_target_interval_length_seconds)',
+      );
+    });
+    it('does not modify queries not prefixed by the PromQL prefix', () => {
+      expect(removePromQLPrefix('Not a PromQL template')).toEqual('Not a PromQL template');
+    });
+  });
+  describe('appendPromQLPrefix', () => {
+    it('appends the PromQL prefix to the input', () => {
+      expect(appendPromQLPrefix('count(prometheus_target_interval_length_seconds)')).toEqual(
+        'PromQL:count(prometheus_target_interval_length_seconds)',
+      );
+    });
+  });
+  describe('getPrometheusQueryType', () => {
+    let editingMetric: ICanaryMetricConfig;
+    beforeEach(() => {
+      editingMetric = {
+        id: '#0',
+        name: 'my metric',
+        groups: ['group-1'],
+        analysisConfigurations: null,
+        scopeName: 'default',
+        query: {
+          customFilterTemplate: 'myDefaultTemplate',
+          queryType: PrometheusQueryType.DEFAULT,
+        },
+      };
+    });
+    it('reads query type from metric state if set', () => {
+      expect(getPrometheusQueryType(editingMetric)).toEqual(PrometheusQueryType.DEFAULT);
+      editingMetric.query.queryType = PrometheusQueryType.PROMQL;
+      expect(getPrometheusQueryType(editingMetric)).toEqual(PrometheusQueryType.PROMQL);
+    });
+    it('infers query type from custom inline template if query type not set on state', () => {
+      editingMetric.query.queryType = null;
+      expect(getPrometheusQueryType(editingMetric)).toEqual(PrometheusQueryType.DEFAULT);
+      editingMetric.query.customInlineTemplate = 'PromQL:count(prometheus_target_interval_length_seconds)';
+      expect(getPrometheusQueryType(editingMetric)).toEqual(PrometheusQueryType.PROMQL);
+    });
+    it('defaults to PrometheusQueryType.DEFAULT if query type not set on state and no inline template added', () => {
+      editingMetric.query.queryType = null;
+      editingMetric.query.customInlineTemplate = null;
+      expect(getPrometheusQueryType(editingMetric)).toEqual(PrometheusQueryType.DEFAULT);
+    });
+  });
+});

package/src/kayenta/metricStore/prometheus/queryTypeSelectors.ts

@@ -0,0 +1,38 @@
+import { ICanaryMetricConfig } from '../../domain';
+import { PrometheusQueryType } from './domain/IPrometheusCanaryMetricSetQueryConfig';
+import { ITemplateTransformFunctions } from '../../selectors/filterTemplatesSelectors';
+
+const PROMQL_PREFIX = 'PromQL:';
+
+export function isQueryPromQL(template: string): boolean {
+  return template != null && template.startsWith(PROMQL_PREFIX);
+}
+
+export function removePromQLPrefix(template: string): string {
+  if (isQueryPromQL(template)) {
+    return template.substring(PROMQL_PREFIX.length);
+  }
+  return template;
+}
+
+export function appendPromQLPrefix(template: string): string {
+  return `${PROMQL_PREFIX}${template}`;
+}
+
+export const getPrometheusQueryType = (editingMetric: ICanaryMetricConfig) => {
+  if (editingMetric.query.queryType) {
+    return editingMetric.query.queryType;
+  }
+  const inlineTemplate = editingMetric.query.customInlineTemplate;
+  if (isQueryPromQL(inlineTemplate)) {
+    return PrometheusQueryType.PROMQL;
+  }
+  return PrometheusQueryType.DEFAULT;
+};
+
+export const prometheusQueryTypeToTransformFunction: { [queryType: string]: ITemplateTransformFunctions } = {
+  [PrometheusQueryType.PROMQL]: {
+    fromValue: removePromQLPrefix,
+    toValue: appendPromQLPrefix,
+  },
+};

package/src/kayenta/metricStore/signalfx/domain/ISignalFxCanaryMetricSetQueryConfig.ts

@@ -0,0 +1,7 @@
+import { ICanaryMetricSetQueryConfig } from 'kayenta/domain';
+
+export interface ISignalFxCanaryMetricSetQueryConfig extends ICanaryMetricSetQueryConfig {
+  metricName: string;
+  aggregationMethod: string;
+  queryPairs: [{ key: string; value: string }];
+}

package/src/kayenta/metricStore/signalfx/index.ts

@@ -0,0 +1,8 @@
+import SignalFxMetricConfigurer, { queryFinder } from './metricConfigurer';
+import metricStoreConfigStore from '../metricStoreConfig.service';
+
+metricStoreConfigStore.register({
+  name: 'signalfx',
+  metricConfigurer: SignalFxMetricConfigurer,
+  queryFinder,
+});

package/src/kayenta/metricStore/signalfx/metricConfigurer.less

@@ -0,0 +1,10 @@
+.signalfx-query-pairs {
+  padding: 10px 10px 0;
+  border-radius: 4px;
+  border: 1px solid #ccc;
+
+  .add-new {
+    margin-bottom: 10px;
+    margin-top: 5px;
+  }
+}

package/src/kayenta/metricStore/signalfx/metricConfigurer.tsx

@@ -0,0 +1,187 @@
+import autoBindMethods from 'class-autobind-decorator';
+import * as Creators from 'kayenta/actions/creators';
+import { ICanaryMetricConfig } from 'kayenta/domain';
+import { DISABLE_EDIT_CONFIG, DisableableInput } from 'kayenta/layout/disableable';
+import FormRow from 'kayenta/layout/formRow';
+import { ICanaryState } from 'kayenta/reducers';
+import { get } from 'lodash';
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { Action } from 'redux';
+import { createSelector } from 'reselect';
+
+import { ICanaryMetricValidationErrors, MetricValidatorFunction } from '../../edit/editMetricValidation';
+import KeyValueList, { IKeyValuePair, IUpdateKeyValueListPayload } from '../../layout/keyValueList';
+import { editingMetricSelector } from '../../selectors';
+
+import './metricConfigurer.less';
+
+interface ISignalFxMetricConfigurerStateProps {
+  editingMetric: ICanaryMetricConfig;
+  validationErrors: ICanaryMetricValidationErrors;
+}
+
+interface ISignalFxMetricConfigurerDispatchProps {
+  updateMetricName: (name: string) => void;
+  updateAggregationMethod: (method: string) => void;
+  updateQueryPairs: (payload: IUpdateKeyValueListPayload) => void;
+}
+
+type SignalFxMetricConfigurerProps = ISignalFxMetricConfigurerStateProps & ISignalFxMetricConfigurerDispatchProps;
+
+export const queryFinder = (metric: ICanaryMetricConfig) => get(metric, 'query.metricName', '');
+const getSignalFxMetric = queryFinder;
+const getQueryPairs = (metric: ICanaryMetricConfig) => get(metric, 'query.queryPairs', []) as IKeyValuePair[];
+const getAggregationMethod = (metric: ICanaryMetricConfig) => get(metric, 'query.aggregationMethod', '');
+
+@autoBindMethods
+class SignalFxMetricConfigurer extends React.Component<SignalFxMetricConfigurerProps> {
+  public onMetricNameChange(e: React.ChangeEvent<HTMLInputElement>) {
+    this.props.updateMetricName(e.target.value);
+  }
+
+  public onAggregationMethodChange(e: React.ChangeEvent<HTMLInputElement>) {
+    this.props.updateAggregationMethod(e.target.value);
+  }
+
+  public render() {
+    const { editingMetric, updateQueryPairs, validationErrors } = this.props;
+
+    return (
+      <section>
+        <FormRow label="SignalFx Metric" error={get(validationErrors, 'signalFxMetric.message', null)} inputOnly={true}>
+          <DisableableInput
+            type="text"
+            value={getSignalFxMetric(editingMetric)}
+            onChange={this.onMetricNameChange}
+            disabledStateKeys={[DISABLE_EDIT_CONFIG]}
+          />
+        </FormRow>
+        <FormRow
+          label="Aggregation Method"
+          inputOnly={true}
+          helpId="canary.config.signalFx.aggregationMethod"
+          error={get(validationErrors, 'aggregationMethod.message', null)}
+        >
+          <DisableableInput
+            type="text"
+            value={getAggregationMethod(editingMetric)}
+            onChange={this.onAggregationMethodChange}
+            disabledStateKeys={[DISABLE_EDIT_CONFIG]}
+          />
+        </FormRow>
+        <FormRow
+          label="Query Pairs"
+          helpId="canary.config.signalFx.queryPairs"
+          error={get(validationErrors, 'queryPairs.message', null)}
+        >
+          <KeyValueList
+            className="signalfx-query-pairs"
+            list={getQueryPairs(editingMetric)}
+            actionCreator={updateQueryPairs}
+          />
+        </FormRow>
+      </section>
+    );
+  }
+}
+
+/**
+ * Validates SignalFx specific fields on the edit metric modal
+ */
+export function validateMetric(editingMetric: ICanaryMetricConfig): ICanaryMetricValidationErrors {
+  const errors: ICanaryMetricValidationErrors = {};
+
+  const validators: MetricValidatorFunction[] = [...getSignalFxValidators(editingMetric)];
+
+  return validators.reduce((reducedErrors, validator) => validator(reducedErrors, editingMetric), errors);
+}
+
+/**
+ * returns the list of validators for the SignalFx edit metric form.
+ */
+export function getSignalFxValidators(editingMetric: ICanaryMetricConfig): MetricValidatorFunction[] {
+  if (!editingMetric || !editingMetric.query) {
+    return [];
+  }
+  return [validateSignalFxMetricName, validateAggregationMethod, validateQueryPairs];
+}
+
+/**
+ * Validates that the user has supplied a SignalFx metric.
+ */
+function validateSignalFxMetricName(
+  errors: ICanaryMetricValidationErrors,
+  editingMetric: ICanaryMetricConfig,
+): ICanaryMetricValidationErrors {
+  const nextErrors = { ...errors };
+
+  const signalFxMetric = getSignalFxMetric(editingMetric);
+
+  if (!signalFxMetric) {
+    nextErrors.signalFxMetric = { message: 'The SignalFx metric is required.' };
+  }
+
+  return nextErrors;
+}
+
+/**
+ * Validates that the user has supplied an aggregation method.
+ */
+function validateAggregationMethod(
+  errors: ICanaryMetricValidationErrors,
+  editingMetric: ICanaryMetricConfig,
+): ICanaryMetricValidationErrors {
+  const nextErrors = { ...errors };
+
+  const aggregationMethod = getAggregationMethod(editingMetric);
+
+  if (!aggregationMethod) {
+    nextErrors.aggregationMethod = { message: 'The SignalFx SignalFlow stream aggregation method is required.' };
+  }
+
+  return nextErrors;
+}
+
+/**
+ * Validates that if the user has supplied query pairs that all key value combos contain values.
+ */
+function validateQueryPairs(
+  errors: ICanaryMetricValidationErrors,
+  editingMetric: ICanaryMetricConfig,
+): ICanaryMetricValidationErrors {
+  const nextErrors = { ...errors };
+
+  const queryPairs: IKeyValuePair[] = getQueryPairs(editingMetric);
+
+  queryPairs.forEach((qp) => {
+    if (!qp.key || !qp.value) {
+      nextErrors.queryPairs = { message: 'All query pairs must contain a non-blank key and value.' };
+    }
+  });
+
+  return nextErrors;
+}
+
+const sfxEditingMetricValidationErrorsSelector = createSelector(editingMetricSelector, validateMetric);
+
+function mapStateToProps(state: ICanaryState): ISignalFxMetricConfigurerStateProps {
+  return {
+    editingMetric: state.selectedConfig.editingMetric,
+    validationErrors: sfxEditingMetricValidationErrorsSelector(state),
+  };
+}
+
+function mapDispatchToProps(dispatch: (action: Action & any) => void): ISignalFxMetricConfigurerDispatchProps {
+  return {
+    updateMetricName: (metricName: string): void => {
+      dispatch(Creators.updateSignalFxMetricName({ metricName }));
+    },
+    updateAggregationMethod: (aggregationMethod: string): void => {
+      dispatch(Creators.updateSignalFxAggregationMethod({ aggregationMethod }));
+    },
+    updateQueryPairs: (payload) => dispatch(Creators.updateSignalFxQueryPairs(payload)),
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(SignalFxMetricConfigurer);