@spinnaker/kayenta 0.0.0-main-2

package/src/kayenta/reducers/stackdriverMetricConfig.spec.ts

@@ -0,0 +1,33 @@
+import * as Actions from 'kayenta/actions';
+
+import { stackdriverMetricConfigReducer } from './stackdriverMetricConfig';
+
+describe('Reducer: stackdriverMetricConfigReducer', () => {
+  describe('update query field', () => {
+    it('updates arbitrary query key/value pairs on a query', () => {
+      const nextState = stackdriverMetricConfigReducer({ query: { crossSeriesReducer: 'REDUCE_NONE' } } as any, {
+        type: Actions.UPDATE_STACKDRIVER_METRIC_QUERY_FIELD,
+        payload: { field: 'crossSeriesReducer', value: 'REDUCE_MEAN' },
+      });
+      expect(nextState.query.crossSeriesReducer).toEqual('REDUCE_MEAN');
+    });
+
+    it('creates key/value pair if not already extant on the query', () => {
+      const nextState = stackdriverMetricConfigReducer({ query: {} } as any, {
+        type: Actions.UPDATE_STACKDRIVER_METRIC_QUERY_FIELD,
+        payload: { field: 'crossSeriesReducer', value: 'REDUCE_MEAN' },
+      });
+      expect(nextState.query.crossSeriesReducer).toEqual('REDUCE_MEAN');
+    });
+
+    it('deletes key/value pair if passed falsy value', () => {
+      [null, undefined, ''].forEach((falsyValue) => {
+        const nextState = stackdriverMetricConfigReducer({ query: { crossSeriesReducer: 'REDUCE_NONE' } } as any, {
+          type: Actions.UPDATE_STACKDRIVER_METRIC_QUERY_FIELD,
+          payload: { field: 'crossSeriesReducer', value: falsyValue },
+        });
+        expect(nextState.query.crossSeriesReducer).toBeUndefined();
+      });
+    });
+  });
+});

package/src/kayenta/reducers/stackdriverMetricConfig.ts

@@ -0,0 +1,41 @@
+import * as Actions from 'kayenta/actions';
+import { IKayentaAction } from 'kayenta/actions/creators';
+import { ICanaryMetricConfig } from 'kayenta/domain';
+import { IUpdateListPayload, updateListReducer } from 'kayenta/layout/list';
+import { IStackdriverCanaryMetricSetQueryConfig } from 'kayenta/metricStore/stackdriver/domain/IStackdriverCanaryMetricSetQueryConfig';
+import { omit } from 'lodash';
+import { Action } from 'redux';
+import { handleActions } from 'redux-actions';
+
+const updateGroupByReducer = updateListReducer();
+
+type IStackdriverMetricConfig = ICanaryMetricConfig<IStackdriverCanaryMetricSetQueryConfig>;
+
+export const stackdriverMetricConfigReducer = handleActions<IStackdriverMetricConfig, Action & any>(
+  {
+    [Actions.UPDATE_STACKDRIVER_GROUP_BY_FIELDS]: (
+      state: IStackdriverMetricConfig,
+      action: IKayentaAction<IUpdateListPayload>,
+    ) => ({
+      ...state,
+      query: {
+        ...state.query,
+        groupByFields: updateGroupByReducer(state.query.groupByFields || [], action),
+      },
+    }),
+    [Actions.UPDATE_STACKDRIVER_METRIC_QUERY_FIELD]: (state: IStackdriverMetricConfig, action: Action & any) => {
+      if (!action.payload.value) {
+        return {
+          ...state,
+          query: omit(state.query, action.payload.field),
+        };
+      }
+
+      return {
+        ...state,
+        query: { ...state.query, [action.payload.field]: action.payload.value, type: 'stackdriver' },
+      };
+    },
+  },
+  null,
+);

package/src/kayenta/reducers/templates.spec.ts

@@ -0,0 +1,192 @@
+import {
+  DELETE_TEMPLATE,
+  EDIT_TEMPLATE_BEGIN,
+  EDIT_TEMPLATE_CANCEL,
+  EDIT_TEMPLATE_CONFIRM,
+  EDIT_TEMPLATE_NAME,
+  EDIT_TEMPLATE_VALUE,
+} from 'kayenta/actions';
+
+import { selectedConfig as reducer } from './selectedConfig';
+
+describe('Reducer: selectedConfig (templates)', () => {
+  const createAction = (type: string, payload: any = {}) => ({
+    type,
+    payload,
+  });
+
+  const runActionSequence = (...actions: any[]) => (initialState: any) =>
+    actions.reduce((s: any, a: any) => reducer(s, a), initialState);
+
+  describe('editing template name & value', () => {
+    let state: any;
+    beforeEach(() => {
+      state = {
+        config: {
+          templates: {
+            'my-template': 'my-value',
+            'my-other-template': 'my-other-value',
+          },
+        },
+        metricList: [
+          {
+            name: 'cpu_utilization',
+            query: {
+              customFilterTemplate: 'my-template',
+              metricType: 'compute.googleapis.com/instance/cpu_utilization',
+            },
+          },
+        ],
+      };
+    });
+
+    it('handles editing template name & value', () => {
+      state = runActionSequence(
+        createAction(EDIT_TEMPLATE_BEGIN, {
+          name: 'my-template',
+          value: 'my-value',
+        }),
+        createAction(EDIT_TEMPLATE_NAME, { name: 'my-edited-template' }),
+        createAction(EDIT_TEMPLATE_VALUE, {
+          value: 'resource.metadata.tag.my-custom-tag-1=${tag1} AND resource.metadata.tag.my-custom-tag-2=${tag2}',
+        }),
+        createAction(EDIT_TEMPLATE_CONFIRM),
+      )(state);
+
+      const {
+        config: { templates },
+      } = state;
+
+      expect(templates).toEqual({
+        'my-edited-template':
+          'resource.metadata.tag.my-custom-tag-1=${tag1} AND resource.metadata.tag.my-custom-tag-2=${tag2}',
+        'my-other-template': 'my-other-value',
+      });
+    });
+
+    it('updates metrics to reflect template name changes', () => {
+      state = runActionSequence(
+        createAction(EDIT_TEMPLATE_BEGIN, {
+          name: 'my-template',
+          value: 'my-value',
+        }),
+        createAction(EDIT_TEMPLATE_NAME, { name: 'my-edited-template' }),
+        createAction(EDIT_TEMPLATE_CONFIRM),
+      )(state);
+
+      const { metricList } = state;
+      expect(metricList[0].query.customFilterTemplate).toEqual('my-edited-template');
+    });
+
+    it('leaves template name & value unchanged on EDIT_TEMPLATE_CANCEL', () => {
+      state = runActionSequence(
+        createAction(EDIT_TEMPLATE_BEGIN, {
+          name: 'my-template',
+          value: 'my-value',
+        }),
+        createAction(EDIT_TEMPLATE_NAME, { name: 'my-edited-template' }),
+        createAction(EDIT_TEMPLATE_VALUE, {
+          value: 'resource.metadata.tag.my-custom-tag-1=${tag1} ' + 'AND resource.metadata.tag.my-custom-tag-2=${tag2}',
+        }),
+        createAction(EDIT_TEMPLATE_CANCEL),
+      )(state);
+
+      const {
+        config: { templates },
+      } = state;
+
+      expect(templates).toEqual({
+        'my-template': 'my-value',
+        'my-other-template': 'my-other-value',
+      });
+    });
+  });
+
+  describe('template cleanup', () => {
+    it('clears temporary variables on EDIT_TEMPLATE_CONFIRM', () => {
+      const state: any = {
+        editingTemplate: {
+          name: 'my-template',
+          editedName: 'my-edited-template',
+          editedValue: '',
+        },
+        config: {
+          templates: {
+            'my-template': '',
+          },
+        },
+      };
+
+      const {
+        editingTemplate: { name, editedName, editedValue },
+      } = reducer(state, createAction(EDIT_TEMPLATE_CONFIRM));
+
+      [name, editedName, editedValue].forEach((value) => expect(value).toEqual(null));
+    });
+
+    it('deletes a template', () => {
+      let state: any = {
+        config: {
+          templates: {
+            'my-template': 'my-value',
+            'my-other-template': 'my-other-value',
+          },
+        },
+      };
+
+      state = reducer(state, createAction(DELETE_TEMPLATE, { name: 'my-template' }));
+      expect(Object.keys(state.config.templates)).toEqual(['my-other-template']);
+
+      state = reducer(state, createAction(DELETE_TEMPLATE, { name: 'my-other-template' }));
+      expect(Object.keys(state.config.templates)).toEqual([]);
+
+      state = reducer(state, createAction(DELETE_TEMPLATE, { name: 'my-other-template' }));
+      expect(Object.keys(state.config.templates)).toEqual([]);
+    });
+
+    it('cleans up a newly added template on EDIT_TEMPLATE_CANCEL', () => {
+      let state: any = {
+        config: {
+          templates: {
+            'my-template': 'my-value',
+          },
+        },
+      };
+
+      state = runActionSequence(
+        createAction(EDIT_TEMPLATE_BEGIN, { name: '', value: '' }),
+        createAction(EDIT_TEMPLATE_VALUE, { value: 'new-value' }),
+        createAction(EDIT_TEMPLATE_NAME, { name: 'new-name' }),
+        createAction(EDIT_TEMPLATE_CANCEL),
+      )(state);
+
+      expect(state.config.templates).toEqual({
+        'my-template': 'my-value',
+      });
+    });
+  });
+
+  describe('creating a template', () => {
+    it('adds a new template', () => {
+      let state: any = {
+        config: {
+          templates: {
+            'my-template': 'my-value',
+          },
+        },
+      };
+
+      state = runActionSequence(
+        createAction(EDIT_TEMPLATE_BEGIN, { name: '', value: '' }),
+        createAction(EDIT_TEMPLATE_VALUE, { value: 'new-value' }),
+        createAction(EDIT_TEMPLATE_NAME, { name: 'new-name' }),
+        createAction(EDIT_TEMPLATE_CONFIRM),
+      )(state);
+
+      expect(state.config.templates).toEqual({
+        'my-template': 'my-value',
+        'new-name': 'new-value',
+      });
+    });
+  });
+});

package/src/kayenta/reducers/validators.ts

@@ -0,0 +1,118 @@
+import { KayentaAccountType } from 'kayenta/domain';
+import { chain } from 'lodash';
+
+import { ICanaryState } from './index';
+
+export interface IConfigValidationError {
+  message: string;
+}
+
+type IConfigValidator = (state: ICanaryState) => IConfigValidationError;
+
+const createValidationReducer = (validator: IConfigValidator) => {
+  return (state: ICanaryState) => {
+    if (!state.selectedConfig.config) {
+      return state;
+    }
+
+    const error = validator(state);
+    if (!error) {
+      return state;
+    }
+
+    return {
+      ...state,
+      selectedConfig: {
+        ...state.selectedConfig,
+        validationErrors: state.selectedConfig.validationErrors.concat(error ? [error] : []),
+      },
+    };
+  };
+};
+
+const isConfigNameUnique: IConfigValidator = (state) => {
+  const selectedConfig = state.selectedConfig.config;
+  const configSummaries = state.data.configSummaries;
+  const isUnique = configSummaries.every((s) => selectedConfig.name !== s.name || selectedConfig.id === s.id);
+
+  return isUnique ? null : { message: `Canary config '${selectedConfig.name}' already exists.` };
+};
+
+// See https://github.com/Netflix-Skunkworks/kayenta/blob/master/kayenta-web/src/main/java/com/netflix/kayenta/controllers/CanaryConfigController.java
+const pattern = /^[a-zA-Z0-9_-]*$/;
+const isConfigNameValid: IConfigValidator = (state) => {
+  const isValid = pattern.test(state.selectedConfig.config.name);
+  return isValid
+    ? null
+    : {
+        message: 'Canary config names must contain only letters, numbers, dashes (-) and underscores (_).',
+      };
+};
+
+const isGroupWeightsSumValid: IConfigValidator = (state) => {
+  const weights = Object.values(state.selectedConfig.group.groupWeights);
+  const sumOfWeights = weights.reduce((sum, weight) => sum + weight, 0);
+  const groupWeightsSumIsValid = weights.length === 0 || sumOfWeights === 100;
+
+  return groupWeightsSumIsValid ? null : { message: 'Metric group weights must sum to 100.' };
+};
+
+const isEveryGroupWeightValid: IConfigValidator = (state) => {
+  const everyGroupWeightIsValid = Object.values(state.selectedConfig.group.groupWeights).every((weight) => weight >= 0);
+
+  return everyGroupWeightIsValid ? null : { message: 'A group weight must be greater than or equal to 0.' };
+};
+
+const isEveryQueriedMetricStoreAvailable: IConfigValidator = (state) => {
+  const available = chain(state.data.kayentaAccounts.data)
+    .filter((account) => account.supportedTypes.includes(KayentaAccountType.MetricsStore))
+    .map((account) => account.metricsStoreType || account.type)
+    .uniq()
+    .valueOf();
+
+  const queried = chain(state.selectedConfig.metricList)
+    .map((metric) => metric.query.type)
+    .uniq()
+    .valueOf();
+
+  const unavailableQueried = queried.filter((store) => !available.includes(store));
+  let message: string;
+  if (unavailableQueried.length === 1) {
+    message = `This config contains metrics configured to query a metric
+               store (${unavailableQueried[0]})
+               that does not have any configured accounts.`;
+  } else if (unavailableQueried.length > 1) {
+    message = `This config contains metrics configured to query metric
+               stores (${unavailableQueried.join()})
+               that do not have any configured accounts.`;
+  }
+  return unavailableQueried.length ? { message } : null;
+};
+
+const areMultipleMetricStoresQueried: IConfigValidator = (state) => {
+  const queried = chain(state.selectedConfig.metricList)
+    .map((metric) => metric.query.type)
+    .uniq()
+    .valueOf();
+
+  return queried.length > 1 ? { message: 'All metrics must be from the same metric store.' } : null;
+};
+
+export const validationErrorsReducer = (state: ICanaryState): ICanaryState => {
+  if (!state.selectedConfig) {
+    return state;
+  }
+
+  if (!state.selectedConfig.validationErrors) {
+    state = { ...state, selectedConfig: { ...state.selectedConfig, validationErrors: [] } };
+  }
+
+  return [
+    isConfigNameUnique,
+    isConfigNameValid,
+    isGroupWeightsSumValid,
+    isEveryGroupWeightValid,
+    isEveryQueriedMetricStoreAvailable,
+    areMultipleMetricStoresQueried,
+  ].reduce((s, validator) => createValidationReducer(validator)(s), state);
+};

package/src/kayenta/report/detail/allMetricResultsHeader.tsx

@@ -0,0 +1,32 @@
+import classNames from 'classnames';
+import { ICanaryJudgeScore, ICanaryScoreThresholds } from 'kayenta/domain';
+import * as React from 'react';
+
+import { mapGroupToColor } from './colors';
+import HeaderArrow from './headerArrow';
+
+export interface IAllMetricResultsHeader {
+  onClick: () => void;
+  className: string;
+  score: ICanaryJudgeScore;
+  scoreThresholds: ICanaryScoreThresholds;
+}
+
+/*
+ * Clickable header for all metric results.
+ */
+export default ({ className, onClick, score, scoreThresholds }: IAllMetricResultsHeader) => (
+  <section className={className}>
+    <div
+      onClick={onClick}
+      style={{
+        backgroundColor: mapGroupToColor(score, scoreThresholds),
+      }}
+      className={classNames('clickable', 'text-center', 'all-metric-results-header')}
+    >
+      <h3 className="heading-3 label">ALL</h3>
+      <HeaderArrow className="outer" arrowColor="var(--color-titanium)" />
+      <HeaderArrow className="inner" arrowColor={mapGroupToColor(score, scoreThresholds)} />
+    </div>
+  </section>
+);

package/src/kayenta/report/detail/clickableHeader.tsx

@@ -0,0 +1,21 @@
+import classNames from 'classnames';
+import * as React from 'react';
+
+import HeaderArrow from './headerArrow';
+
+export interface IGroupScoreProps {
+  label: string;
+  style?: { [key: string]: string };
+  onClick: () => void;
+  className: string;
+}
+
+/*
+ * Component for a labeled, clickable, colored header.
+ * */
+export default ({ label, onClick, style, className }: IGroupScoreProps) => (
+  <section style={style} onClick={onClick} className={classNames('clickable', 'text-center', 'group-score', className)}>
+    <h3 className="heading-3 uppercase label">{label}</h3>
+    <HeaderArrow arrowColor={style.backgroundColor} />
+  </section>
+);

package/src/kayenta/report/detail/colors.ts

@@ -0,0 +1,46 @@
+import {
+  ICanaryJudgeGroupScore,
+  ICanaryJudgeScore,
+  ICanaryScoreThresholds,
+  MetricClassificationLabel,
+  ScoreClassificationLabel,
+} from 'kayenta/domain';
+
+// Standard Spinnaker styleguide colors.
+const GREEN = 'var(--color-success)';
+const RED = 'var(--color-danger)';
+const GREY = 'var(--color-text-caption)';
+const YELLOW = 'var(--color-warning)';
+
+export const mapMetricClassificationToColor = (classification: MetricClassificationLabel): string =>
+  ({
+    [MetricClassificationLabel.High]: RED,
+    [MetricClassificationLabel.Low]: RED,
+    [MetricClassificationLabel.Error]: YELLOW,
+    [MetricClassificationLabel.Nodata]: GREY,
+    [MetricClassificationLabel.Pass]: GREEN,
+  }[classification]);
+
+export const mapScoreClassificationToColor = (classification: ScoreClassificationLabel): string =>
+  ({
+    [ScoreClassificationLabel.Fail]: RED,
+    [ScoreClassificationLabel.Error]: YELLOW,
+    [ScoreClassificationLabel.Marginal]: GREY,
+    [ScoreClassificationLabel.Nodata]: GREY,
+    [ScoreClassificationLabel.Pass]: GREEN,
+  }[classification]);
+
+export const mapGroupToColor = (
+  group: ICanaryJudgeGroupScore | ICanaryJudgeScore,
+  scoreThresholds: ICanaryScoreThresholds,
+): string => {
+  if (typeof group.score !== 'number') {
+    return YELLOW; // Some kind of error.
+  } else if (group.score > scoreThresholds.pass) {
+    return GREEN;
+  } else if (group.score > scoreThresholds.marginal) {
+    return GREY;
+  } else {
+    return RED;
+  }
+};

package/src/kayenta/report/detail/detail.less

@@ -0,0 +1,16 @@
+.kayenta-overview-toggle {
+  height: 30px;
+  line-height: 30px;
+  cursor: pointer;
+  padding-right: 0 10px;
+
+  p {
+    height: 100%;
+    text-transform: uppercase;
+    margin: 0 10px;
+  }
+
+  span {
+    margin-bottom: 4px;
+  }
+}

package/src/kayenta/report/detail/detail.tsx

@@ -0,0 +1,48 @@
+import { ICanaryExecutionStatusResult } from 'kayenta/domain';
+import { ICanaryState } from 'kayenta/reducers';
+import * as React from 'react';
+import { connect } from 'react-redux';
+
+import ReportHeader from './header';
+import MetricResults from './metricResults';
+import ReportException from './reportException';
+import ReportExplanation from './reportExplanation';
+import ReportScores from './reportScores';
+
+import './detail.less';
+
+/*
+ * Layout for report detail view.
+ * */
+
+interface IDetailViewProps {
+  run: ICanaryExecutionStatusResult;
+}
+
+function DetailView({ run }: IDetailViewProps) {
+  const [isExpanded, setIsExpanded] = React.useState<boolean>(true);
+
+  if (!run.result?.judgeResult.results?.length && run.exception) {
+    return <ReportException />;
+  }
+
+  const toggleDetailHeader = () => {
+    setIsExpanded(!isExpanded);
+  };
+  return (
+    <>
+      <div className="vertical flex-1">
+        {isExpanded && <ReportHeader />}
+        <ReportExplanation />
+        <ReportScores isExpanded={isExpanded} toggleHeader={toggleDetailHeader} />
+        <MetricResults />
+      </div>
+    </>
+  );
+}
+
+const mapStateToProps = (state: ICanaryState) => ({
+  run: state.selectedRun.run,
+});
+
+export default connect(mapStateToProps)(DetailView);

package/src/kayenta/report/detail/detailLoader.tsx

@@ -0,0 +1,55 @@
+import * as Creators from 'kayenta/actions/creators';
+import { ICanaryState } from 'kayenta/reducers';
+import * as React from 'react';
+import { connect, Dispatch } from 'react-redux';
+import { Observable } from 'rxjs/Observable';
+import { Subscription } from 'rxjs/Subscription';
+
+import ReportDetailLoadStates from './loadStates';
+
+interface IResultLoaderStateParamsProps {
+  resultIdStream: Observable<IResultLoaderStateParams>;
+}
+
+interface IResultLoaderDispatchProps {
+  loadResult: (stateParams: IResultLoaderStateParams) => void;
+}
+
+interface IResultLoaderStateParams {
+  configId: string;
+  runId: string;
+}
+
+/*
+ * Top-level .reportDetail state component.
+ * Loads result details on changes to /report/:configId/:runId path parameter, renders load states.
+ */
+class ResultDetailLoader extends React.Component<IResultLoaderDispatchProps & IResultLoaderStateParamsProps> {
+  private subscription: Subscription;
+
+  constructor(props: IResultLoaderDispatchProps & IResultLoaderStateParamsProps) {
+    super(props);
+    const { resultIdStream, loadResult } = props;
+    this.subscription = resultIdStream.subscribe(loadResult);
+  }
+
+  public componentWillUnmount(): void {
+    this.subscription.unsubscribe();
+  }
+
+  public render() {
+    return <ReportDetailLoadStates />;
+  }
+}
+
+const mapDispatchToProps = (dispatch: Dispatch<ICanaryState>): IResultLoaderDispatchProps => ({
+  loadResult: (stateParams: IResultLoaderStateParams) =>
+    dispatch(
+      Creators.loadRunRequest({
+        configId: stateParams.configId,
+        runId: stateParams.runId,
+      }),
+    ),
+});
+
+export default connect(null, mapDispatchToProps)(ResultDetailLoader);

package/src/kayenta/report/detail/graph/graph.tsx

@@ -0,0 +1,37 @@
+import { ICanaryAnalysisResult } from 'kayenta/domain/ICanaryJudgeResult';
+import { IMetricSetPair } from 'kayenta/domain/IMetricSetPair';
+import { ICanaryState } from 'kayenta/reducers';
+import { metricResultsSelector } from 'kayenta/selectors';
+import * as React from 'react';
+import { connect } from 'react-redux';
+
+import { GraphType, metricSetPairGraphService } from './metricSetPairGraph.service';
+
+interface IMetricSetPairGraphStateProps {
+  pair: IMetricSetPair;
+  result: ICanaryAnalysisResult;
+  graphType: GraphType;
+}
+
+const GRAPH_IMPLEMENTATIONS = ['semiotic'];
+
+const MetricSetPairGraph = ({ pair, result, graphType }: IMetricSetPairGraphStateProps) => {
+  const delegates = GRAPH_IMPLEMENTATIONS.map((name) => metricSetPairGraphService.getDelegate(name)).filter((d) => !!d);
+  const delegate = delegates.find((candidate) => candidate.handlesGraphType(graphType));
+  if (!delegate) {
+    return <h3 className="heading-3">Could not load graph.</h3>;
+  }
+  const Graph = delegate.getGraph();
+  return <Graph metricSetPair={pair} result={result} type={graphType} />;
+};
+
+const mapStateToProps = (state: ICanaryState): IMetricSetPairGraphStateProps => {
+  const selectedMetric = state.selectedRun.selectedMetric;
+  return {
+    pair: state.selectedRun.metricSetPair.pair,
+    result: metricResultsSelector(state).find((result) => result.id === selectedMetric),
+    graphType: state.selectedRun.graphType,
+  };
+};
+
+export default connect(mapStateToProps)(MetricSetPairGraph);

package/src/kayenta/report/detail/graph/metricSetPairGraph.service.ts

@@ -0,0 +1,35 @@
+import { ICanaryAnalysisResult, IMetricSetPair } from 'kayenta/domain';
+import { buildDelegateService } from 'kayenta/service/delegateFactory';
+import * as React from 'react';
+
+// e.g., amplitude vs. time, histogram, etc.
+export enum GraphType {
+  TimeSeries = 'Time Series',
+  Histogram = 'Histogram',
+  BoxPlot = 'Beeswarm Box Plot',
+}
+
+export interface IMetricSetPairGraphProps {
+  type: GraphType;
+  metricSetPair: IMetricSetPair;
+  result: ICanaryAnalysisResult;
+}
+
+export interface IMetricSetPairGraph {
+  /*
+   * Name of the graph implementation, referenced in settings.js.
+   * */
+  name: string;
+
+  /*
+   * Returns top-level graph component class.
+   * */
+  getGraph: () => React.ComponentType<IMetricSetPairGraphProps>;
+
+  /*
+   * Returns true if the graph implementation supports a given graph type.
+   * */
+  handlesGraphType: (type: GraphType) => boolean;
+}
+
+export const metricSetPairGraphService = buildDelegateService<IMetricSetPairGraph>();