@spinnaker/kayenta 0.0.0-2025.1-0

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

@@ -0,0 +1,129 @@
+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

@@ -0,0 +1,294 @@
+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

@@ -0,0 +1,63 @@
+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

@@ -0,0 +1,50 @@
+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

@@ -0,0 +1,15 @@
+.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

@@ -0,0 +1,106 @@
+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);
+  });
+});