@spinnaker/kayenta 0.0.0-main-2

package/src/kayenta/edit/editMetricModal.less

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

@@ -0,0 +1,245 @@
+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;
+  updateCriticality: (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,
+  updateCriticality,
+  useInlineTemplateEditor,
+  disableEdit,
+  validationErrors,
+}: IEditMetricModalDispatchProps & IEditMetricModalStateProps) {
+  if (!metric) {
+    return null;
+  }
+
+  const direction = metric.analysisConfigurations?.canary?.direction ?? 'either';
+  const nanStrategy = metric.analysisConfigurations?.canary?.nanStrategy ?? 'default';
+  const critical = metric.analysisConfigurations?.canary?.critical ?? 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"
+                checked={critical}
+                onChange={updateCriticality}
+                disabled={CanarySettings.disableConfigEdit}
+                disabledStateKeys={[DISABLE_EDIT_CONFIG]}
+              />
+              Fail the canary if this metric fails
+            </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>
+          <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 }));
+    },
+    updateCriticality: ({ target }: React.ChangeEvent<HTMLInputElement>) => {
+      dispatch(Creators.updateMetricCriticality({ id: target.dataset.id, critical: 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);
+  });
+});

package/src/kayenta/edit/filterTemplateSelector.tsx

@@ -0,0 +1,194 @@
+import * as Creators from 'kayenta/actions/creators';
+import { CanarySettings } from 'kayenta/canary.settings';
+import { ICanaryFilterTemplateValidationMessages } from 'kayenta/edit/filterTemplatesValidation';
+import {
+  DISABLE_EDIT_CONFIG,
+  DisableableInput,
+  DisableableReactSelect,
+  DisableableTextarea,
+} from 'kayenta/layout/disableable';
+import FormRow from 'kayenta/layout/formRow';
+import { ICanaryState } from 'kayenta/reducers';
+import { configTemplatesSelector, editingTemplateSelector } from 'kayenta/selectors';
+import {
+  editingTemplateValidationSelector,
+  selectedTemplateNameSelector,
+} from 'kayenta/selectors/filterTemplatesSelectors';
+import { get, isString } from 'lodash';
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { Option } from 'react-select';
+import { Dispatch } from 'redux';
+
+import './filterTemplateSelector.less';
+
+interface IFilterTemplateSelectorStateProps {
+  editedTemplateName: string;
+  editedTemplateValue: string;
+  selectedTemplateName: string;
+  templates: { [key: string]: string };
+  validation: ICanaryFilterTemplateValidationMessages;
+}
+
+interface IFilterTemplateSelectorDispatchProps {
+  deleteTemplate: (e: any, name: string) => void;
+  editTemplateBegin: (e: any, name: string, value: string) => void;
+  editTemplateCancel: () => void;
+  editTemplateConfirm: () => void;
+  editTemplateName: (event: any) => void;
+  editTemplateValue: (event: any) => void;
+  selectTemplate: (option: Option) => void;
+}
+
+export type IFilterTemplateSelectorProps = IFilterTemplateSelectorStateProps & IFilterTemplateSelectorDispatchProps;
+
+export class FilterTemplateSelector extends React.Component<IFilterTemplateSelectorProps> {
+  private getOptions = (): Option[] => {
+    const templateOptions = Object.keys(this.props.templates).map((t) => ({
+      value: t,
+      label: t,
+      requestingNew: false,
+    }));
+    templateOptions.push({ value: null, label: null, requestingNew: true });
+    return templateOptions;
+  };
+
+  private optionRenderer = (option: Option<string>): JSX.Element => {
+    if (option.requestingNew) {
+      return <span>Create new...</span>;
+    }
+    return (
+      <span className="filter-template-option">
+        <span>{option.label}</span>
+        <span>
+          <button className="link" onMouseDown={(e) => this.props.deleteTemplate(e, option.value)}>
+            Delete
+          </button>
+          <button
+            className="link"
+            onMouseDown={(e) => this.props.editTemplateBegin(e, option.value, this.props.templates[option.value])}
+          >
+            Edit
+          </button>
+        </span>
+      </span>
+    );
+  };
+
+  public render() {
+    const {
+      editedTemplateName,
+      editedTemplateValue,
+      editTemplateCancel,
+      editTemplateConfirm,
+      editTemplateName,
+      editTemplateValue,
+      selectTemplate,
+      selectedTemplateName,
+      templates,
+      validation,
+    } = this.props;
+    const isEditing = isString(editedTemplateName) && isString(editedTemplateValue);
+    return (
+      <>
+        <FormRow label="Filter Template" helpId="canary.config.filterTemplate" inputOnly={true}>
+          {!isEditing && (
+            <DisableableReactSelect
+              value={selectedTemplateName}
+              disabledStateKeys={[DISABLE_EDIT_CONFIG]}
+              disabled={CanarySettings.disableConfigEdit}
+              onChange={selectTemplate}
+              options={this.getOptions()}
+              optionRenderer={this.optionRenderer}
+            />
+          )}
+        </FormRow>
+        {isEditing && (
+          <>
+            <FormRow label="Name" error={get(validation, 'errors.templateName.message')} inputOnly={true}>
+              <DisableableInput
+                disabledStateKeys={[DISABLE_EDIT_CONFIG]}
+                disabled={CanarySettings.disableConfigEdit}
+                onChange={editTemplateName}
+                value={editedTemplateName}
+              />
+            </FormRow>
+            <FormRow
+              label="Template"
+              inputOnly={true}
+              error={get(validation, 'errors.templateValue.message')}
+              warning={get(validation, 'warnings.template.message')}
+            >
+              <DisableableTextarea
+                className="template-editor-textarea"
+                disabledStateKeys={[DISABLE_EDIT_CONFIG]}
+                disabled={CanarySettings.disableConfigEdit}
+                onChange={editTemplateValue}
+                value={editedTemplateValue}
+              />
+            </FormRow>
+            <FormRow>
+              <div className="horizontal pull-right">
+                <button className="link" onClick={editTemplateCancel}>
+                  Cancel
+                </button>
+                <button
+                  className="link"
+                  disabled={[validation.errors.templateName, validation.errors.templateValue].some((e) => e != null)}
+                  onClick={editTemplateConfirm}
+                >
+                  Save
+                </button>
+              </div>
+            </FormRow>
+          </>
+        )}
+        {!isEditing && selectedTemplateName && (
+          <FormRow>
+            <pre className="template-editor-value-formatted">{templates[selectedTemplateName]}</pre>
+          </FormRow>
+        )}
+      </>
+    );
+  }
+}
+
+const mapStateToProps = (state: ICanaryState): IFilterTemplateSelectorStateProps => ({
+  editedTemplateName: get(editingTemplateSelector(state), 'editedName'),
+  editedTemplateValue: get(editingTemplateSelector(state), 'editedValue'),
+  selectedTemplateName: selectedTemplateNameSelector(state),
+  templates: configTemplatesSelector(state),
+  validation: editingTemplateValidationSelector(state),
+});
+
+const mapDispatchToProps = (dispatch: Dispatch<ICanaryState>): IFilterTemplateSelectorDispatchProps => ({
+  deleteTemplate: (e: any, name: string) => {
+    e.stopPropagation();
+    dispatch(Creators.selectTemplate({ name: null }));
+    dispatch(Creators.deleteTemplate({ name }));
+  },
+  editTemplateBegin: (e: any, name: string, value: string) => {
+    e.stopPropagation();
+    dispatch(Creators.selectTemplate({ name }));
+    dispatch(
+      Creators.editTemplateBegin({
+        name,
+        value,
+      }),
+    );
+  },
+  editTemplateCancel: () => dispatch(Creators.editTemplateCancel()),
+  editTemplateConfirm: () => dispatch(Creators.editTemplateConfirm()),
+  editTemplateName: (event: any) => dispatch(Creators.editTemplateName({ name: event.target.value })),
+  editTemplateValue: (event: any) => dispatch(Creators.editTemplateValue({ value: event.target.value })),
+  selectTemplate: (option: Option<string>) => {
+    if (option && option.requestingNew === true) {
+      dispatch(Creators.selectTemplate({ name: null }));
+      dispatch(Creators.addTemplate());
+    } else {
+      dispatch(Creators.selectTemplate({ name: option ? option.value : null }));
+    }
+  },
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(FilterTemplateSelector);