@spinnaker/kayenta 2025.3.0 → 2025.4.1

package/src/kayenta/metricStore/atlas/atlasMetricConfigurer.tsx

@@ -1,130 +0,0 @@
-import autoBindMethods from 'class-autobind-decorator';
-import { get } from 'lodash';
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-import { connect } from 'react-redux';
-import { Action } from 'redux';
-
-import { UPDATE_ATLAS_QUERY } from '../../actions/index';
-import { CanarySettings } from '../../canary.settings';
-import { ICanaryMetricConfig } from '../../domain/ICanaryConfig';
-import { ICanaryState } from '../../reducers/index';
-
-interface IAtlasMetricConfigurerStateProps {
-  editingMetric: ICanaryMetricConfig;
-}
-
-interface IAtlasMetricConfigurerDispatchProps {
-  updateQuery: (event: any) => void;
-}
-
-type IAtlasMetricConfigurerProps = IAtlasMetricConfigurerStateProps & IAtlasMetricConfigurerDispatchProps;
-
-interface IAtlasMetricConfigurerState {
-  webComponent: Element;
-}
-
-export interface IAtlasQuerySelector {
-  class: string;
-  backends: string;
-  query: string;
-  hide: string;
-  ref: (webComponent: Element) => void;
-}
-
-interface IChangeQueryStringEvent extends CustomEvent {
-  detail: string;
-}
-
-if (CanarySettings.atlasWebComponentsUrl) {
-  // make React available to components
-  const global = window as any;
-  global['React'] = React;
-  global['ReactDOM'] = ReactDOM;
-
-  if (CanarySettings.atlasWebComponentsPolyfillUrl) {
-    const polyfillScript = document.createElement('script');
-    polyfillScript.src = CanarySettings.atlasWebComponentsPolyfillUrl;
-    document.head.appendChild(polyfillScript);
-  }
-  // download components; they will register when the script executes
-  const componentScript = document.createElement('script');
-  componentScript.src = CanarySettings.atlasWebComponentsUrl;
-  document.head.appendChild(componentScript);
-}
-
-// Add <atlas-query-selector> to the elements allowed in TSX, using the IAtlasQuerySelector interface.
-declare global {
-  // eslint-disable-next-line @typescript-eslint/no-namespace
-  namespace JSX {
-    interface IntrinsicElements {
-      'atlas-query-selector': IAtlasQuerySelector;
-    }
-  }
-}
-
-const queryFinder = (metric: ICanaryMetricConfig) => get(metric, 'query.q', '');
-
-/*
- * Component for configuring an Atlas metric via the <atlas-query-selector> web component.
- */
-@autoBindMethods
-class AtlasMetricConfigurer extends React.Component<IAtlasMetricConfigurerProps, IAtlasMetricConfigurerState> {
-  constructor(props: IAtlasMetricConfigurerProps) {
-    super(props);
-    this.state = { webComponent: null };
-  }
-
-  private bindComponent(ref: Element) {
-    this.setState({ webComponent: ref });
-    if (ref) {
-      ref.addEventListener('change.queryString', (event: IChangeQueryStringEvent) => {
-        this.props.updateQuery(event.detail);
-      });
-      // This gets passed down to the inner React rendering beyond the web-component wrapper. Simply setting it in
-      // the render() method, it will not get passed to the web-component. Given that it doesn't change, why is it
-      // necessary? It seems to have something to do with the way React renders the component to the DOM; it triggers
-      // the web-component layer early, before the query is ready, and <atlas-query-selector> ignores all changes to
-      // the query after it's rendered. Adding a key after it's all set causes the inner React to re-render the
-      // component with the correct query.
-      ref.setAttribute('key', 'react');
-    }
-  }
-
-  public render() {
-    const editingMetric = this.props.editingMetric;
-    const query = queryFinder(editingMetric);
-    // TODO: select correct Atlas backend for app
-    const atlasBackend = 'https://atlas-global.prod.netflix.net';
-    return (
-      <atlas-query-selector
-        class="spinnaker-theme"
-        backends={atlasBackend}
-        hide="add_scope,comparison,timeOffset,lineStyle,des,trend,lineWidth,axis,color,alpha,multi"
-        query={query}
-        ref={this.bindComponent}
-      />
-    );
-  }
-}
-
-function mapStateToProps(state: ICanaryState): IAtlasMetricConfigurerStateProps {
-  return {
-    editingMetric: state.selectedConfig.editingMetric,
-  };
-}
-
-function mapDispatchToProps(dispatch: (action: Action & any) => void): IAtlasMetricConfigurerDispatchProps {
-  return {
-    updateQuery: (query: string): void => {
-      dispatch({
-        type: UPDATE_ATLAS_QUERY,
-        query,
-      });
-    },
-  };
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(AtlasMetricConfigurer);
-
-export { queryFinder };

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

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

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

@@ -1,9 +0,0 @@
-import DatadogMetricConfigurer, { queryFinder } from './metricConfigurer';
-import metricStoreConfigStore from '../metricStoreConfig.service';
-
-metricStoreConfigStore.register({
-  name: 'datadog',
-  metricConfigurer: DatadogMetricConfigurer,
-  queryFinder,
-  useTemplates: true,
-});

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

@@ -1,90 +0,0 @@
-import * as Creators from 'kayenta/actions/creators';
-import { ICanaryMetricConfig } from 'kayenta/domain';
-import FormRow from 'kayenta/layout/formRow';
-import RadioChoice from 'kayenta/layout/radioChoice';
-import { ICanaryState } from 'kayenta/reducers';
-import { get } from 'lodash';
-import * as React from 'react';
-import { connect } from 'react-redux';
-import { Option } from 'react-select';
-import { Action } from 'redux';
-
-import DatadogMetricTypeSelector from './metricTypeSelector';
-
-interface IDatadogMetricConfigurerStateProps {
-  editingMetric: ICanaryMetricConfig;
-}
-
-interface IDatadogMetricConfigurerDispatchProps {
-  changeMetricName: (agg: string, name: string) => void;
-}
-
-type DatadogMetricConfigurerProps = IDatadogMetricConfigurerStateProps & IDatadogMetricConfigurerDispatchProps;
-
-export const queryFinder = (metric: ICanaryMetricConfig) => get(metric, 'query.metricName', ':');
-
-export const nameFinder = (metric: ICanaryMetricConfig) => queryFinder(metric).split(':', 2)[1];
-export const aggFinder = (metric: ICanaryMetricConfig) => queryFinder(metric).split(':', 2)[0];
-
-/*
- * Component for configuring a Datadog metric.
- * */
-function DatadogMetricConfigurer({ changeMetricName, editingMetric }: DatadogMetricConfigurerProps) {
-  return (
-    <>
-      <FormRow label="Datadog Metric" inputOnly={true}>
-        <DatadogMetricTypeSelector
-          value={nameFinder(editingMetric)}
-          onChange={(option: Option<string>) => changeMetricName(aggFinder(editingMetric), get(option, 'value'))}
-        />
-      </FormRow>
-      <FormRow label="Metric Aggregation">
-        <RadioChoice
-          value="avg"
-          label="Average"
-          name="aggregator"
-          current={aggFinder(editingMetric)}
-          action={() => changeMetricName('avg', nameFinder(editingMetric))}
-        />
-        <RadioChoice
-          value="sum"
-          label="Sum"
-          name="aggregator"
-          current={aggFinder(editingMetric)}
-          action={() => changeMetricName('sum', nameFinder(editingMetric))}
-        />
-        <RadioChoice
-          value="max"
-          label="Max"
-          name="aggregator"
-          current={aggFinder(editingMetric)}
-          action={() => changeMetricName('max', nameFinder(editingMetric))}
-        />
-        <RadioChoice
-          value="min"
-          label="Min"
-          name="aggregator"
-          current={aggFinder(editingMetric)}
-          action={() => changeMetricName('min', nameFinder(editingMetric))}
-        />
-      </FormRow>
-    </>
-  );
-}
-
-function mapStateToProps(state: ICanaryState): IDatadogMetricConfigurerStateProps {
-  return {
-    editingMetric: state.selectedConfig.editingMetric,
-  };
-}
-
-function mapDispatchToProps(dispatch: (action: Action & any) => void): IDatadogMetricConfigurerDispatchProps {
-  return {
-    changeMetricName: (agg: string, name: string): void => {
-      const metricName = agg + ':' + name;
-      dispatch(Creators.updateDatadogMetricName({ metricName }));
-    },
-  };
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(DatadogMetricConfigurer);

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

@@ -1,59 +0,0 @@
-import { mountWithState, mountWithStore } from 'enzyme-redux';
-import * as Actions from 'kayenta/actions';
-import * as React from 'react';
-import { connect } from 'react-redux';
-import Select, { Option, ReactSelectProps } from 'react-select';
-import { createMockStore } from 'redux-test-utils';
-
-import { noop } from '@spinnaker/core';
-
-import { DatadogMetricTypeSelector, mapDispatchToProps, mapStateToProps } from './metricTypeSelector';
-
-describe('<DatadogMetricTypeSelector />', () => {
-  let Component: any;
-  let state: any;
-
-  beforeEach(() => {
-    state = {
-      data: {
-        metricsServiceMetadata: {
-          data: [
-            {
-              name: 'datadog.agent.running',
-            },
-            {
-              name: 'datadog.trace_agent.heartbeat',
-            },
-          ],
-        },
-      },
-    };
-
-    Component = connect(mapStateToProps, mapDispatchToProps)(DatadogMetricTypeSelector);
-  });
-
-  it('builds options from input descriptors', () => {
-    const component = mountWithState(<Component value="" onChange={noop} />, state);
-    const allProps: any = component.find(Select).first().props();
-
-    expect(allProps.options.map((o: Option) => o.value)).toEqual([
-      'datadog.agent.running',
-      'datadog.trace_agent.heartbeat',
-    ]);
-  });
-
-  it('queries for metric descriptors on input change', () => {
-    const store = createMockStore(state);
-    const component = mountWithStore(<Component value="" onChange={noop} />, store);
-
-    const allProps: ReactSelectProps = component.find(Select).props();
-    allProps.onInputChange('heartbeat');
-
-    expect(
-      store.isActionDispatched({
-        type: Actions.UPDATE_DATADOG_METRIC_DESCRIPTOR_FILTER,
-        payload: { filter: 'heartbeat' },
-      }),
-    ).toEqual(true);
-  });
-});

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

@@ -1,73 +0,0 @@
-import * as Creators from 'kayenta/actions/creators';
-import { DISABLE_EDIT_CONFIG, DisableableReactSelect } from 'kayenta/layout/disableable';
-import { ICanaryState } from 'kayenta/reducers';
-import { AsyncRequestState } from 'kayenta/reducers/asyncRequest';
-import * as React from 'react';
-import { connect } from 'react-redux';
-import { Option } from 'react-select';
-import { Dispatch } from 'redux';
-
-import { IDatadogMetricDescriptor } from './domain/IDatadogMetricDescriptor';
-
-interface IDatadogMetricTypeSelectorDispatchProps {
-  load: (filter: string) => void;
-}
-
-interface IDatadogMetricTypeSelectorStateProps {
-  options: Option[];
-  loading: boolean;
-}
-
-interface IDatadogMetricTypeSelectorOwnProps {
-  value: string;
-  onChange: (option: Option) => void;
-}
-
-export const DatadogMetricTypeSelector = ({
-  loading,
-  load,
-  options,
-  value,
-  onChange,
-}: IDatadogMetricTypeSelectorDispatchProps &
-  IDatadogMetricTypeSelectorStateProps &
-  IDatadogMetricTypeSelectorOwnProps) => {
-  if (value && options.every((o) => o.value !== value)) {
-    options = options.concat({ label: value, value });
-  }
-
-  return (
-    <DisableableReactSelect
-      isLoading={loading}
-      options={options}
-      onChange={onChange}
-      value={value}
-      placeholder={'Enter at least three characters to search.'}
-      onInputChange={(input: string) => {
-        load(input);
-        return input;
-      }}
-      disabledStateKeys={[DISABLE_EDIT_CONFIG]}
-    />
-  );
-};
-
-export const mapStateToProps = (state: ICanaryState, ownProps: IDatadogMetricTypeSelectorOwnProps) => {
-  const descriptors = state.data.metricsServiceMetadata.data as IDatadogMetricDescriptor[];
-  const options: Option[] = descriptors.map((d) => ({ label: d.name, value: d.name }));
-  return {
-    options,
-    loading: state.data.metricsServiceMetadata.load === AsyncRequestState.Requesting,
-    ...ownProps,
-  };
-};
-
-export const mapDispatchToProps = (dispatch: Dispatch<ICanaryState>) => {
-  return {
-    load: (filter: string) => {
-      dispatch(Creators.updateDatadogMetricDescriptorFilter({ filter }));
-    },
-  };
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(DatadogMetricTypeSelector);

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

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

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

@@ -1,54 +0,0 @@
-import * as Creators from 'kayenta/actions/creators';
-import { ICanaryMetricConfig } from 'kayenta/domain';
-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 GraphiteMetricTypeSelector from './metricTypeSelector';
-
-interface IGraphiteMetricConfigurerDispatchProps {
-  changeMetricName: (name: string) => void;
-}
-
-interface IGraphiteMetricConfigurerStateProps {
-  editingMetric: ICanaryMetricConfig;
-}
-
-type GraphiteMetricConfigurerProps = IGraphiteMetricConfigurerStateProps & IGraphiteMetricConfigurerDispatchProps;
-
-export const queryFinder = (metric: ICanaryMetricConfig) => get(metric, 'query.metricName', '');
-
-/*
- * Component for configuring a Graphite metric.
- * */
-function GraphiteMetricConfigurer({ changeMetricName, editingMetric }: GraphiteMetricConfigurerProps) {
-  return (
-    <FormRow label="Graphite Metric" inputOnly={true}>
-      <GraphiteMetricTypeSelector
-        value={queryFinder(editingMetric)}
-        onChange={(option: string[]) => {
-          changeMetricName(option[0]);
-        }}
-      />
-    </FormRow>
-  );
-}
-
-function mapStateToProps(state: ICanaryState): IGraphiteMetricConfigurerStateProps {
-  return {
-    editingMetric: state.selectedConfig.editingMetric,
-  };
-}
-
-function mapDispatchToProps(dispatch: (action: Action & any) => void): IGraphiteMetricConfigurerDispatchProps {
-  return {
-    changeMetricName: (metricName: string): void => {
-      dispatch(Creators.updateGraphiteMetricName({ metricName }));
-    },
-  };
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(GraphiteMetricConfigurer);

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

@@ -1,80 +0,0 @@
-import * as Creators from 'kayenta/actions/creators';
-import { DISABLE_EDIT_CONFIG, DisableableReactTypeahead } from 'kayenta/layout/disableable';
-import { ICanaryState } from 'kayenta/reducers';
-import { AsyncRequestState } from 'kayenta/reducers/asyncRequest';
-import * as React from 'react';
-import { connect } from 'react-redux';
-import { Dispatch } from 'redux';
-
-import { IGraphiteMetricDescriptor } from './domain/IGraphiteMetricDescriptor';
-
-import './typeahead.less';
-
-interface IGraphiteMetricTypeSelectorDispatchProps {
-  load: (filter: string) => void;
-}
-
-interface IGraphiteMetricTypeSelectorStateProps {
-  options: string[];
-  loading: boolean;
-}
-
-interface IGraphiteMetricTypeSelectorOwnProps {
-  value: string;
-  onChange: (option: string[]) => void;
-}
-
-export const GraphiteMetricTypeSelector = ({
-  loading,
-  load,
-  options,
-  value,
-  onChange,
-}: IGraphiteMetricTypeSelectorDispatchProps &
-  IGraphiteMetricTypeSelectorStateProps &
-  IGraphiteMetricTypeSelectorOwnProps) => {
-  options = options.concat(value);
-
-  return (
-    <DisableableReactTypeahead
-      options={options}
-      isLoading={loading}
-      onChange={(option: string[]) => {
-        onChange(option);
-        load(option[0]);
-      }}
-      defaultInputValue={value}
-      renderMenuItemChildren={(option) => (
-        <a style={{ pointerEvents: 'all', textDecoration: 'none', color: '#000000' }}>{option}</a>
-      )}
-      placeholder={'Enter at least three characters to search.'}
-      onInputChange={(input) => {
-        onChange([input]);
-        load(input);
-        return input;
-      }}
-      disabledStateKeys={[DISABLE_EDIT_CONFIG]}
-    />
-  );
-};
-
-export const mapStateToProps = (state: ICanaryState, ownProps: IGraphiteMetricTypeSelectorOwnProps) => {
-  const descriptors = state.data.metricsServiceMetadata.data as IGraphiteMetricDescriptor[];
-  const options: string[] = descriptors.map((d) => d.name);
-
-  return {
-    options,
-    loading: state.data.metricsServiceMetadata.load === AsyncRequestState.Requesting,
-    ...ownProps,
-  };
-};
-
-export const mapDispatchToProps = (dispatch: Dispatch<ICanaryState>) => {
-  return {
-    load: (filter: string) => {
-      dispatch(Creators.updateGraphiteMetricDescriptorFilter({ filter }));
-    },
-  };
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(GraphiteMetricTypeSelector);

package/src/kayenta/metricStore/graphite/typeahead.less

@@ -1,3 +0,0 @@
-li[id^='rbt-menu-item'] {
-  pointer-events: none;
-}

package/src/kayenta/metricStore/metricStoreConfig.service.ts

@@ -1,12 +0,0 @@
-import { ICanaryMetricConfig } from 'kayenta/domain';
-import { buildDelegateService } from 'kayenta/service/delegateFactory';
-import * as React from 'react';
-
-export interface IMetricStoreConfig {
-  name: string;
-  metricConfigurer: React.ComponentClass;
-  queryFinder: (metric: ICanaryMetricConfig) => string;
-  useTemplates?: boolean;
-}
-
-export default buildDelegateService<IMetricStoreConfig>();

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

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

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

@@ -1,58 +0,0 @@
-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';
-
-interface INewRelicMetricConfigurerStateProps {
-  editingMetric: ICanaryMetricConfig;
-}
-
-interface INewRelicMetricConfigurerDispatchProps {
-  changeSelect: (event: any) => void;
-}
-
-type INewRelicMetricConfigurerProps = INewRelicMetricConfigurerStateProps & INewRelicMetricConfigurerDispatchProps;
-
-export const queryFinder = (metric: ICanaryMetricConfig) => get(metric, 'query.select', '');
-
-/*
- * Component for configuring a New Relic metric
- */
-function NewRelicMetricConfigurer({ changeSelect, editingMetric }: INewRelicMetricConfigurerProps) {
-  return (
-    <>
-      <FormRow label="NRQL Select" inputOnly={true}>
-        <DisableableInput
-          type="text"
-          value={queryFinder(editingMetric)}
-          onChange={changeSelect}
-          disabledStateKeys={[DISABLE_EDIT_CONFIG]}
-        />
-        <span className="body-small color-text-caption" style={{ marginTop: '5px' }}>
-          Enter the NRQL query only up to, but not including, the WHERE clause
-        </span>
-      </FormRow>
-    </>
-  );
-}
-
-function mapStateToProps(state: ICanaryState): INewRelicMetricConfigurerStateProps {
-  return {
-    editingMetric: state.selectedConfig.editingMetric,
-  };
-}
-
-function mapDispatchToProps(dispatch: (action: Action & any) => void): INewRelicMetricConfigurerDispatchProps {
-  return {
-    changeSelect: (event: any) => {
-      dispatch(Creators.updateNewRelicSelect({ select: event.target.value }));
-    },
-  };
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(NewRelicMetricConfigurer);

package/src/kayenta/metricStore/prometheus/domain/IPrometheusCanaryMetricSetQueryConfig.ts

@@ -1,14 +0,0 @@
-import { ICanaryMetricSetQueryConfig } from 'kayenta/domain';
-
-export interface IPrometheusCanaryMetricSetQueryConfig extends ICanaryMetricSetQueryConfig {
-  resourceType: string;
-  metricName: string;
-  labelBindings: string[];
-  groupByFields: string[];
-  queryType: PrometheusQueryType;
-}
-
-export enum PrometheusQueryType {
-  PROMQL = 'PROMQL',
-  DEFAULT = 'DEFAULT',
-}

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

@@ -1,12 +0,0 @@
-import { ICanaryMetricConfig } from 'kayenta/domain/ICanaryConfig';
-import { get } from 'lodash';
-
-import PrometheusMetricConfigurer from './metricConfigurer';
-import metricStoreConfigStore from '../metricStoreConfig.service';
-
-metricStoreConfigStore.register({
-  name: 'prometheus',
-  metricConfigurer: PrometheusMetricConfigurer,
-  queryFinder: (metric: ICanaryMetricConfig) => get(metric, 'query.metricName', ''),
-  useTemplates: true,
-});