@spinnaker/kayenta 2025.4.0 → 2025.4.1

package/src/kayenta/edit/editMetricModal.less

@@ -1,9 +0,0 @@
-.kayenta-edit-metric-modal {
-  .modal-content {
-    // Prevents the contents of a ReactSelect field from being clipped by the bottom of the modal.
-    overflow: visible;
-  }
-  .effect-size-wrapper {
-    width: 100px;
-  }
-}

package/src/kayenta/edit/editMetricModal.spec.tsx

@@ -1,129 +0,0 @@
-import { mount } from 'enzyme';
-import { ICanaryMetricConfig } from 'kayenta';
-import * as Creators from 'kayenta/actions/creators';
-import React from 'react';
-import { Provider } from 'react-redux';
-import { createMockStore } from 'redux-test-utils';
-
-import EditMetricModal from './editMetricModal';
-
-describe('EditMetricModal', () => {
-  const mockProps = {
-    metric: {
-      id: '1',
-      name: 'Test Metric',
-      groups: ['Test Group'],
-      type: 'Test Type',
-      analysisConfigurations: {
-        canary: {
-          direction: 'increase',
-          nanStrategy: 'default',
-          critical: false,
-        },
-      },
-    },
-    groups: ['Group 1', 'Group 2'],
-    isTemplateValid: true,
-    useInlineTemplateEditor: false,
-    disableEdit: false,
-    validationErrors: {},
-    rename: jest.fn(),
-    changeGroup: jest.fn(),
-    updateDirection: jest.fn(),
-    updateNanStrategy: jest.fn(),
-    updateCriticality: jest.fn(),
-    updateDataRequired: jest.fn(),
-    confirm: jest.fn(),
-    cancel: jest.fn(),
-  };
-
-  const mockState = {
-    app: {
-      disableConfigEdit: false,
-    },
-    selectedConfig: {
-      editingMetric: {
-        name: 'Test Metric',
-        query: {
-          serviceType: 'prometheus',
-        },
-        groups: ['Group 1'],
-      },
-      editingTemplate: {},
-      group: {
-        list: ['Group 1', 'Group 2'],
-      },
-      metricList: [] as ICanaryMetricConfig[],
-    },
-  };
-
-  const store = createMockStore(mockState);
-  store.dispatch = jest.fn();
-
-  const buildComponent = (props: object) =>
-    mount(
-      <Provider store={store}>
-        <EditMetricModal {...mockProps} {...props} />
-      </Provider>,
-    ).find(EditMetricModal);
-
-  it('renders without crashing', () => {
-    const component = buildComponent({});
-    expect(component.exists()).toBe(true);
-  });
-
-  it('calls cancel when the cancel button is clicked', () => {
-    const component = buildComponent({});
-    const cancelBtn = component
-      .find('button')
-      .filterWhere((btn) => btn.text().trim() === 'Cancel')
-      .at(0);
-    cancelBtn.simulate('click');
-    expect(store.dispatch).toHaveBeenCalledWith(Creators.editMetricCancel());
-  });
-
-  it('calls confirm when the confirm button is clicked', () => {
-    const component = buildComponent({});
-    const confirmBtn = component
-      .find('button')
-      .filterWhere((btn) => btn.text().trim() === 'OK')
-      .at(0);
-    confirmBtn.simulate('click');
-    expect(store.dispatch).toHaveBeenCalledWith(Creators.editMetricConfirm());
-  });
-
-  it('calls updateDirection when a direction radio button is clicked', () => {
-    const component = buildComponent({});
-    const changeDirectionEvent = { target: { value: 'increase', dataset: { id: '1' } } };
-    component.find('input[name="direction"][value="increase"]').simulate('change', changeDirectionEvent);
-    expect(store.dispatch).toHaveBeenCalledWith(Creators.updateMetricDirection({ id: '1', direction: 'increase' }));
-  });
-
-  it('calls updateNanStrategy when the nan strategy is changed', () => {
-    const component = buildComponent({});
-    const changeNanStrategyEvent = { target: { value: 'replace', dataset: { id: '1' } } };
-    component.find('input[name="nanStrategy"][value="replace"]').simulate('change', changeNanStrategyEvent);
-    expect(store.dispatch).toHaveBeenCalledWith(Creators.updateMetricNanStrategy({ id: '1', strategy: 'replace' }));
-  });
-
-  it('calls updateOutlierStrategy when the outlier strategy is changed', () => {
-    const component = buildComponent({});
-    const changeOutlierStrategyEvent = { target: { value: 'remove', dataset: { id: '1' } } };
-    component.find('input[name="outlierStrategy"][value="remove"]').simulate('change', changeOutlierStrategyEvent);
-    expect(store.dispatch).toHaveBeenCalledWith(Creators.updateMetricOutlierStrategy({ id: '1', strategy: 'remove' }));
-  });
-
-  it('calls updateCriticality when the criticality checkbox is changed', () => {
-    const component = buildComponent({});
-    const changeCriticalityEvent = { target: { checked: true, dataset: { id: '1' } } };
-    component.find('input[type="checkbox"][name="criticality"]').simulate('change', changeCriticalityEvent);
-    expect(store.dispatch).toHaveBeenCalledWith(Creators.updateMetricCriticality({ id: '1', critical: true }));
-  });
-
-  it('calls updateDataRequired when the data required checkbox is changed', () => {
-    const component = buildComponent({ disableEdit: true });
-    const changeDataRequiredEvent = { target: { checked: true, dataset: { id: '1' } } };
-    component.find('input[type="checkbox"][name="dataRequired"]').simulate('change', changeDataRequiredEvent);
-    expect(store.dispatch).toHaveBeenCalledWith(Creators.updateMetricDataRequired({ id: '1', mustHaveData: true }));
-  });
-});

package/src/kayenta/edit/editMetricModal.tsx

@@ -1,294 +0,0 @@
-import classNames from 'classnames';
-import * as Creators from 'kayenta/actions/creators';
-import { CanarySettings } from 'kayenta/canary.settings';
-import { ICanaryMetricConfig } from 'kayenta/domain';
-import { DISABLE_EDIT_CONFIG, DisableableInput, DisableableSelect } from 'kayenta/layout/disableable';
-import FormRow from 'kayenta/layout/formRow';
-import RadioChoice from 'kayenta/layout/radioChoice';
-import Styleguide from 'kayenta/layout/styleguide';
-import metricStoreConfigService from 'kayenta/metricStore/metricStoreConfig.service';
-import { ICanaryState } from 'kayenta/reducers';
-import { editingMetricValidationErrorsSelector } from 'kayenta/selectors';
-import { isTemplateValidSelector, useInlineTemplateEditorSelector } from 'kayenta/selectors/filterTemplatesSelectors';
-import { isNull, values } from 'lodash';
-import * as React from 'react';
-import { Modal } from 'react-bootstrap';
-import { connect } from 'react-redux';
-
-import { noop } from '@spinnaker/core';
-
-import EditMetricEffectSizes from './editMetricEffectSizes';
-import { ICanaryMetricValidationErrors } from './editMetricValidation';
-import FilterTemplateSelector from './filterTemplateSelector';
-import InlineTemplateEditor from './inlineTemplateEditor';
-import MetricConfigurerDelegator from './metricConfigurerDelegator';
-
-import './editMetricModal.less';
-
-interface IEditMetricModalDispatchProps {
-  rename: (event: any) => void;
-  changeGroup: (event: any) => void;
-  updateDirection: (event: any) => void;
-  updateNanStrategy: (event: any) => void;
-  updateOutlierStrategy: (event: any) => void;
-  updateCriticality: (event: any) => void;
-  updateDataRequired: (event: any) => void;
-  confirm: () => void;
-  cancel: () => void;
-}
-
-interface IEditMetricModalStateProps {
-  metric: ICanaryMetricConfig;
-  groups: string[];
-  isTemplateValid: boolean;
-  useInlineTemplateEditor: boolean;
-  disableEdit: boolean;
-  validationErrors: ICanaryMetricValidationErrors;
-}
-
-/*
- * Modal to edit metric details.
- */
-function EditMetricModal({
-  metric,
-  rename,
-  changeGroup,
-  groups,
-  confirm,
-  cancel,
-  isTemplateValid,
-  updateDirection,
-  updateNanStrategy,
-  updateOutlierStrategy,
-  updateCriticality,
-  updateDataRequired,
-  useInlineTemplateEditor,
-  disableEdit,
-  validationErrors,
-}: IEditMetricModalDispatchProps & IEditMetricModalStateProps) {
-  if (!metric) {
-    return null;
-  }
-
-  const direction = metric.analysisConfigurations?.canary?.direction ?? 'either';
-  const nanStrategy = metric.analysisConfigurations?.canary?.nanStrategy ?? 'default';
-  const outlierStrategy = metric.analysisConfigurations?.canary?.outliers?.strategy ?? 'default';
-  const critical = metric.analysisConfigurations?.canary?.critical ?? false;
-  const dataRequired = metric.analysisConfigurations?.canary?.mustHaveData ?? false;
-  const isConfirmDisabled =
-    !isTemplateValid ||
-    disableEdit ||
-    CanarySettings.disableConfigEdit ||
-    values(validationErrors).some((e) => !isNull(e));
-
-  const metricGroup = metric.groups.length ? metric.groups[0] : groups[0];
-  const templatesEnabled =
-    metricStoreConfigService.getDelegate(metric.query.type) &&
-    metricStoreConfigService.getDelegate(metric.query.type).useTemplates &&
-    CanarySettings.templatesEnabled;
-  return (
-    <Modal bsSize="large" show={true} onHide={noop} className={classNames('kayenta-edit-metric-modal')}>
-      <Styleguide>
-        <Modal.Header>
-          <Modal.Title>
-            {disableEdit || CanarySettings.disableConfigEdit ? 'Metric Details' : 'Configure Metric'}
-          </Modal.Title>
-        </Modal.Header>
-        <Modal.Body>
-          <FormRow label="Group" inputOnly={true}>
-            {metric.groups.length > 1 && (
-              <DisableableInput
-                type="text"
-                value={metric.groups}
-                data-id={metric.id}
-                onChange={changeGroup}
-                disabled={CanarySettings.disableConfigEdit}
-                disabledStateKeys={[DISABLE_EDIT_CONFIG]}
-              />
-            )}
-            {metric.groups.length < 2 && (
-              <DisableableSelect
-                value={metricGroup}
-                onChange={changeGroup}
-                className="form-control input-sm"
-                disabled={CanarySettings.disableConfigEdit}
-                disabledStateKeys={[DISABLE_EDIT_CONFIG]}
-              >
-                {groups.map((g) => (
-                  <option key={g} value={g}>
-                    {g}
-                  </option>
-                ))}
-              </DisableableSelect>
-            )}
-          </FormRow>
-          <FormRow label="Name" error={validationErrors?.name?.message ?? null} inputOnly={true}>
-            <DisableableInput
-              type="text"
-              value={metric.name}
-              data-id={metric.id}
-              onChange={rename}
-              disabled={CanarySettings.disableConfigEdit}
-              disabledStateKeys={[DISABLE_EDIT_CONFIG]}
-            />
-          </FormRow>
-          <FormRow label="Fail on">
-            <RadioChoice
-              value="increase"
-              label="Increase"
-              name="direction"
-              current={direction}
-              action={updateDirection}
-            />
-            <RadioChoice
-              value="decrease"
-              label="Decrease"
-              name="direction"
-              current={direction}
-              action={updateDirection}
-            />
-            <RadioChoice value="either" label="Either" name="direction" current={direction} action={updateDirection} />
-          </FormRow>
-          <FormRow label="Criticality" checkbox={true}>
-            <label>
-              <DisableableInput
-                type="checkbox"
-                name="criticality"
-                checked={critical}
-                onChange={updateCriticality}
-                disabled={CanarySettings.disableConfigEdit}
-                disabledStateKeys={[DISABLE_EDIT_CONFIG]}
-              />
-              Fail the canary if this metric fails
-            </label>
-          </FormRow>
-          <FormRow label="Data Required" checkbox={true}>
-            <label>
-              <DisableableInput
-                type="checkbox"
-                name="dataRequired"
-                checked={dataRequired}
-                onChange={updateDataRequired}
-                disabled={CanarySettings.disableConfigEdit}
-                disabledStateKeys={[DISABLE_EDIT_CONFIG]}
-              />
-              Fail the metric if data is missing
-            </label>
-          </FormRow>
-          <FormRow label="NaN Strategy" helpId="canary.config.nanStrategy">
-            <RadioChoice
-              value="default"
-              label="Default (remove)"
-              name="nanStrategy"
-              current={nanStrategy}
-              action={updateNanStrategy}
-            />
-            <RadioChoice
-              value="replace"
-              label="Replace with zero"
-              name="nanStrategy"
-              current={nanStrategy}
-              action={updateNanStrategy}
-            />
-            <RadioChoice
-              value="remove"
-              label="Remove"
-              name="nanStrategy"
-              current={nanStrategy}
-              action={updateNanStrategy}
-            />
-          </FormRow>
-          <FormRow label="Outlier Strategy" helpId="canary.config.outlierStrategy">
-            <RadioChoice
-              value="default"
-              label="Default (keep)"
-              name="outlierStrategy"
-              current={outlierStrategy}
-              action={updateOutlierStrategy}
-            />
-            <RadioChoice
-              value="remove"
-              label="Remove"
-              name="outlierStrategy"
-              current={outlierStrategy}
-              action={updateOutlierStrategy}
-            />
-            <RadioChoice
-              value="keep"
-              label="Keep"
-              name="outlierStrategy"
-              current={outlierStrategy}
-              action={updateOutlierStrategy}
-            />
-          </FormRow>
-          <EditMetricEffectSizes />
-          <MetricConfigurerDelegator />
-          {templatesEnabled && !useInlineTemplateEditor && <FilterTemplateSelector />}
-          {templatesEnabled && useInlineTemplateEditor && <InlineTemplateEditor />}
-        </Modal.Body>
-        <Modal.Footer>
-          <ul className="list-inline pull-right">
-            <li>
-              <button className="passive" onClick={cancel}>
-                Cancel
-              </button>
-            </li>
-            <li>
-              <button className="primary" disabled={isConfirmDisabled} onClick={confirm}>
-                OK
-              </button>
-            </li>
-          </ul>
-        </Modal.Footer>
-      </Styleguide>
-    </Modal>
-  );
-}
-
-function mapDispatchToProps(dispatch: any): IEditMetricModalDispatchProps {
-  return {
-    rename: (event: any) => {
-      dispatch(Creators.renameMetric({ id: event.target.dataset.id, name: event.target.value }));
-    },
-    changeGroup: (event: any) => {
-      dispatch(Creators.updateMetricGroup({ id: event.target.dataset.id, group: event.target.value }));
-    },
-    cancel: () => {
-      dispatch(Creators.editMetricCancel());
-      dispatch(Creators.editTemplateCancel());
-    },
-    confirm: () => {
-      dispatch(Creators.editMetricConfirm());
-      dispatch(Creators.editTemplateCancel());
-    },
-    updateDirection: ({ target }: React.ChangeEvent<HTMLInputElement>) => {
-      dispatch(Creators.updateMetricDirection({ id: target.dataset.id, direction: target.value }));
-    },
-    updateNanStrategy: ({ target }: React.ChangeEvent<HTMLInputElement>) => {
-      dispatch(Creators.updateMetricNanStrategy({ id: target.dataset.id, strategy: target.value }));
-    },
-    updateOutlierStrategy: ({ target }: React.ChangeEvent<HTMLInputElement>) => {
-      dispatch(Creators.updateMetricOutlierStrategy({ id: target.dataset.id, strategy: target.value }));
-    },
-    updateCriticality: ({ target }: React.ChangeEvent<HTMLInputElement>) => {
-      dispatch(Creators.updateMetricCriticality({ id: target.dataset.id, critical: Boolean(target.checked) }));
-    },
-    updateDataRequired: ({ target }: React.ChangeEvent<HTMLInputElement>) => {
-      dispatch(Creators.updateMetricDataRequired({ id: target.dataset.id, mustHaveData: Boolean(target.checked) }));
-    },
-  };
-}
-
-function mapStateToProps(state: ICanaryState): IEditMetricModalStateProps {
-  return {
-    metric: state.selectedConfig.editingMetric,
-    groups: state.selectedConfig.group.list.sort(),
-    isTemplateValid: isTemplateValidSelector(state),
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    useInlineTemplateEditor: useInlineTemplateEditorSelector(state),
-    disableEdit: state.app.disableConfigEdit || CanarySettings.disableConfigEdit,
-    validationErrors: editingMetricValidationErrorsSelector(state),
-  };
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(EditMetricModal);

package/src/kayenta/edit/editMetricValidation.spec.ts

@@ -1,63 +0,0 @@
-import { ICanaryMetricConfig } from '../domain';
-import { ICanaryMetricValidationErrors, validateMetric, validateMetricName } from './editMetricValidation';
-
-describe('Canary metric validation', () => {
-  let errors: ICanaryMetricValidationErrors;
-  let editingMetric: ICanaryMetricConfig;
-  let metricList: ICanaryMetricConfig[];
-
-  beforeEach(() => {
-    errors = createErrors();
-    editingMetric = createEditingMetric('A', 'a');
-    metricList = createMetricList();
-  });
-
-  describe('validateMetricName', () => {
-    it('Does not update errors when metric name is valid', () => {
-      editingMetric.name = 'D';
-      expect(validateMetricName(errors, editingMetric, metricList).name).toBeNull();
-    });
-    it('Updates errors appropriately when metric name is empty', () => {
-      editingMetric.name = '';
-      expect(validateMetricName(errors, editingMetric, metricList).name).toEqual({
-        message: 'Name is required',
-      });
-    });
-    it('Updates errors appropriately when metric name is not unique', () => {
-      editingMetric.name = 'B';
-      expect(validateMetricName(errors, editingMetric, metricList).name).toEqual({
-        message: "Metric 'B' already exists",
-      });
-    });
-  });
-
-  describe('validateMetric', () => {
-    it('Does not update errors when all fields are valid', () => {
-      expect(validateMetric(editingMetric, metricList)).toEqual(errors);
-    });
-    it('Reduces validation of all fields into one object', () => {
-      editingMetric.name = '';
-      expect(validateMetric(editingMetric, metricList)).toEqual({
-        name: { message: 'Name is required' },
-      });
-    });
-  });
-});
-
-function createErrors(): ICanaryMetricValidationErrors {
-  return {
-    name: null,
-  };
-}
-
-function createEditingMetric(name: string, id: string): ICanaryMetricConfig {
-  return {
-    name,
-    id,
-    scopeName: 'default',
-  } as ICanaryMetricConfig;
-}
-
-function createMetricList(): ICanaryMetricConfig[] {
-  return [createEditingMetric('A', 'a'), createEditingMetric('B', 'b'), createEditingMetric('C', 'c')];
-}

package/src/kayenta/edit/editMetricValidation.ts

@@ -1,50 +0,0 @@
-import { get } from 'lodash';
-import { ICanaryMetricConfig } from '../domain';
-
-export interface ICanaryMetricValidationError {
-  message: string;
-}
-
-export interface ICanaryMetricValidationErrors {
-  [key: string]: ICanaryMetricValidationError;
-}
-export type MetricValidatorFunction = (
-  errors: ICanaryMetricValidationErrors,
-  editingMetric: ICanaryMetricConfig,
-  metricList?: ICanaryMetricConfig[],
-) => ICanaryMetricValidationErrors;
-
-export function validateMetricName(
-  errors: ICanaryMetricValidationErrors,
-  editingMetric: ICanaryMetricConfig,
-  metricList: ICanaryMetricConfig[],
-): ICanaryMetricValidationErrors {
-  const nextErrors = { ...errors };
-
-  const editingMetricName = get(editingMetric, 'name', '');
-  if (!editingMetricName) {
-    nextErrors.name = { message: 'Name is required' };
-    return nextErrors;
-  }
-
-  const isNameUnique = metricList.every((m) => m.name !== editingMetricName || m.id === editingMetric.id);
-  if (!isNameUnique) {
-    nextErrors.name = { message: `Metric '${editingMetricName}' already exists` };
-  }
-
-  return nextErrors;
-}
-
-export function validateMetric(
-  editingMetric: ICanaryMetricConfig,
-  metricList: ICanaryMetricConfig[],
-): ICanaryMetricValidationErrors {
-  const errors: ICanaryMetricValidationErrors = {
-    name: null,
-  };
-
-  return [validateMetricName].reduce(
-    (reducedErrors, validator) => validator(reducedErrors, editingMetric, metricList),
-    errors,
-  );
-}

package/src/kayenta/edit/filterTemplateSelector.less

@@ -1,15 +0,0 @@
-.template-editor-textarea {
-  // Prevent horizontal resizing
-  min-width: 100%;
-  max-width: 100%;
-}
-
-.template-editor-value-formatted {
-  margin: 0;
-}
-
-.filter-template-option {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}

package/src/kayenta/edit/filterTemplateSelector.spec.tsx

@@ -1,106 +0,0 @@
-import { mount } from 'enzyme';
-import { DisableableInput, DisableableTextarea } from 'kayenta/layout/disableable';
-import * as React from 'react';
-import { Provider } from 'react-redux';
-import Select, { Option } from 'react-select';
-import { createMockStore } from 'redux-test-utils';
-
-import { noop, ValidationMessage } from '@spinnaker/core';
-
-import { FilterTemplateSelector, IFilterTemplateSelectorProps } from './filterTemplateSelector';
-
-const buildComponent = (props: IFilterTemplateSelectorProps) =>
-  mount(
-    <Provider store={createMockStore()}>
-      <FilterTemplateSelector {...props} />
-    </Provider>,
-  ).find(FilterTemplateSelector);
-
-describe('<FilterTemplateSelector />', () => {
-  let defaultProps: IFilterTemplateSelectorProps;
-  beforeEach(() => {
-    defaultProps = {
-      editedTemplateName: null,
-      editedTemplateValue: null,
-      selectedTemplateName: 'my-filter-template',
-      templates: {
-        'my-filter-template': 'metadata.user_labels."app"="${scope}"',
-        'my-other-filter-template': 'metadata.user_labels."app"="${location}"',
-      },
-      validation: { warnings: {}, errors: {} },
-      deleteTemplate: noop,
-      editTemplateBegin: noop,
-      editTemplateCancel: noop,
-      editTemplateConfirm: noop,
-      editTemplateName: noop,
-      editTemplateValue: noop,
-      selectTemplate: noop,
-    };
-  });
-  it('builds options from filter template map', () => {
-    const component = buildComponent(defaultProps);
-    const allProps: any = component.find(Select).first().props();
-
-    expect(allProps.options.map((o: Option) => o.value)).toEqual([
-      'my-filter-template',
-      'my-other-filter-template',
-      null,
-    ]); // null is "Create new" option
-  });
-
-  it('renders filter template', () => {
-    let component = buildComponent(defaultProps);
-
-    let pre = component.find('pre').first();
-    expect(pre.html()).toContain('${scope}');
-
-    component = buildComponent({
-      ...defaultProps,
-      selectedTemplateName: 'my-other-filter-template',
-    });
-    pre = component.find('pre').first();
-    expect(pre.html()).toContain('${location}');
-  });
-
-  it('does not render filter template if not selected', () => {
-    const component = buildComponent({
-      ...defaultProps,
-      selectedTemplateName: null,
-    });
-    expect(component.find('pre').length).toEqual(0);
-  });
-
-  it('renders errors when appropriate', () => {
-    let component = buildComponent(defaultProps);
-    expect(component.find(ValidationMessage).length).toEqual(0);
-
-    component = buildComponent({
-      ...defaultProps,
-      editedTemplateName: '',
-      editedTemplateValue: 'metadata.user_labels."app"="${scope}"',
-      validation: {
-        warnings: {},
-        errors: {
-          templateName: {
-            message: 'Template name is required',
-          },
-        },
-      },
-    });
-    expect(component.find(ValidationMessage).first().props().message).toEqual('Template name is required');
-  });
-
-  it('renders input and textarea when editing template', () => {
-    let component = buildComponent(defaultProps);
-    expect(component.find(DisableableInput).length).toEqual(0);
-    expect(component.find(DisableableTextarea).length).toEqual(0);
-
-    component = buildComponent({
-      ...defaultProps,
-      editedTemplateName: 'edited name',
-      editedTemplateValue: 'edited value',
-    });
-    expect(component.find(DisableableInput).length).toEqual(1);
-    expect(component.find(DisableableTextarea).length).toEqual(1);
-  });
-});