@spinnaker/kayenta 0.0.0-main-2

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

@@ -0,0 +1,108 @@
+import {
+  ITemplateValidationInput,
+  validateTemplateInUseWarning,
+  validateTemplateName,
+  validateTemplateValue,
+} from './filterTemplatesValidation';
+import { PrometheusQueryType } from '../metricStore/prometheus/domain/IPrometheusCanaryMetricSetQueryConfig';
+
+describe('Filter template validation', () => {
+  let validationInput: ITemplateValidationInput;
+  beforeEach(() => {
+    validationInput = getTestValidationInput();
+  });
+  describe('validateTemplateName', () => {
+    it('handles valid name', () => {
+      expect(validateTemplateName({ errors: {}, warnings: {} }, validationInput)).toEqual({ errors: {}, warnings: {} });
+    });
+    it('handles missing template name', () => {
+      validationInput.editingTemplate.editedName = '';
+      expect(validateTemplateName({ errors: {}, warnings: {} }, validationInput).errors.templateName.message).toEqual(
+        'Name is required',
+      );
+    });
+    it('handles duplicate template name', () => {
+      validationInput.editingTemplate.editedName = 'my-other-filter-template';
+      expect(validateTemplateName({ errors: {}, warnings: {} }, validationInput).errors.templateName.message).toEqual(
+        "Filter template named 'my-other-filter-template' already exists",
+      );
+    });
+  });
+  describe('validateTemplateValue', () => {
+    it('handles valid template value', () => {
+      expect(validateTemplateValue({ errors: {}, warnings: {} }, validationInput)).toEqual({
+        errors: {},
+        warnings: {},
+      });
+    });
+    it('handles missing template value', () => {
+      validationInput.editingTemplate.editedValue = '';
+      expect(validateTemplateValue({ errors: {}, warnings: {} }, validationInput).errors.templateValue.message).toEqual(
+        'Value is required',
+      );
+    });
+  });
+  describe('validateTemplateInUseWarning', () => {
+    it('handles template not in use by other metrics', () => {
+      expect(validateTemplateInUseWarning({ errors: {}, warnings: {} }, validationInput)).toEqual({
+        errors: {},
+        warnings: {},
+      });
+    });
+    it('warns if other metrics are using selected template', () => {
+      validationInput.metricList.push({
+        id: '#1',
+        name: 'my other metric',
+        groups: ['group-1'],
+        analysisConfigurations: null,
+        scopeName: 'default',
+        query: {
+          customFilterTemplate: 'my-filter-template',
+          queryType: PrometheusQueryType.DEFAULT,
+        },
+      });
+      expect(
+        validateTemplateInUseWarning({ errors: {}, warnings: {} }, validationInput).warnings.template.message,
+      ).toEqual('Warning: editing or deleting this template will affect the following metrics: my other metric');
+    });
+  });
+});
+
+function getTestValidationInput(): ITemplateValidationInput {
+  return {
+    editingTemplate: {
+      name: 'my-filter-template',
+      editedName: 'my-filter-template-edited',
+      editedValue: 'metadata.user_labels."app"="${scope}"',
+      isNew: false,
+    },
+    configTemplates: {
+      'my-filter-template': 'metadata.user_labels."app"="${scope}"',
+      'my-other-filter-template': 'metadata.user_labels."app"="${location}"',
+    },
+    metricList: [
+      {
+        id: '#0',
+        name: 'my metric',
+        groups: ['group-1'],
+        analysisConfigurations: null,
+        scopeName: 'default',
+        query: {
+          customFilterTemplate: 'my-filter-template',
+          queryType: PrometheusQueryType.DEFAULT,
+        },
+      },
+    ],
+    editingMetric: {
+      id: '#0',
+      name: 'my metric',
+      groups: ['group-1'],
+      analysisConfigurations: null,
+      scopeName: 'default',
+      query: {
+        customFilterTemplate: 'my-filter-template',
+        queryType: PrometheusQueryType.DEFAULT,
+      },
+    },
+  };
+}

package/src/kayenta/edit/filterTemplatesValidation.ts

@@ -0,0 +1,95 @@
+import { get, isEmpty } from 'lodash';
+
+import { ICanaryMetricConfig } from '../domain';
+import { IEditingTemplateState } from '../reducers/editingTemplate';
+
+export interface ICanaryFilterTemplateValidationMessage {
+  message: string;
+}
+
+type ICanaryFilterTemplateValidationErrorKeys = 'templateName' | 'templateValue';
+
+type ICanaryFilterTemplateValidationWarningKeys = 'template';
+
+export interface ICanaryFilterTemplateValidationMessages {
+  errors: { [K in ICanaryFilterTemplateValidationErrorKeys]?: ICanaryFilterTemplateValidationMessage };
+  warnings: { [K in ICanaryFilterTemplateValidationWarningKeys]?: ICanaryFilterTemplateValidationMessage };
+}
+
+export interface ITemplateValidationInput {
+  editingTemplate: IEditingTemplateState;
+  configTemplates: { [name: string]: string };
+  metricList: ICanaryMetricConfig[];
+  editingMetric: ICanaryMetricConfig;
+}
+
+export function validateTemplateName(
+  validation: ICanaryFilterTemplateValidationMessages,
+  validationInput: ITemplateValidationInput,
+): ICanaryFilterTemplateValidationMessages {
+  const { editingTemplate, configTemplates } = validationInput;
+
+  if (editingTemplate.editedName === '') {
+    validation.errors.templateName = {
+      message: 'Name is required',
+    };
+    return validation;
+  }
+
+  const isNameEdited = editingTemplate && editingTemplate.editedName !== editingTemplate.name;
+  const savedTemplateNames = Object.keys(configTemplates || {});
+  const isNameDuplicate = isNameEdited && savedTemplateNames.some((name) => editingTemplate.editedName === name);
+  if (isNameDuplicate) {
+    validation.errors.templateName = {
+      message: `Filter template named '${editingTemplate.editedName}' already exists`,
+    };
+  }
+
+  return validation;
+}
+
+export function validateTemplateValue(
+  validation: ICanaryFilterTemplateValidationMessages,
+  validationInput: ITemplateValidationInput,
+): ICanaryFilterTemplateValidationMessages {
+  const { editingTemplate } = validationInput;
+
+  if (editingTemplate.editedValue === '') {
+    validation.errors.templateValue = {
+      message: 'Value is required',
+    };
+  }
+
+  return validation;
+}
+
+export function validateTemplateInUseWarning(
+  validation: ICanaryFilterTemplateValidationMessages,
+  validationInput: ITemplateValidationInput,
+): ICanaryFilterTemplateValidationMessages {
+  const { metricList, editingMetric } = validationInput;
+  const filterTemplate = get(editingMetric, 'query.customFilterTemplate');
+
+  const otherMetricsUsingTemplate =
+    editingMetric != null &&
+    filterTemplate != null &&
+    metricList.filter((m) => m.name !== editingMetric.name && filterTemplate === get(m, 'query.customFilterTemplate'));
+
+  if (!isEmpty(otherMetricsUsingTemplate)) {
+    validation.warnings.template = {
+      message: `Warning: editing or deleting this template will affect the following metrics: ${otherMetricsUsingTemplate
+        .map((m) => m.name)
+        .join(', ')}`,
+    };
+  }
+  return validation;
+}
+
+export function validateTemplate(
+  templateValidationInput: ITemplateValidationInput,
+): ICanaryFilterTemplateValidationMessages {
+  return [validateTemplateName, validateTemplateValue, validateTemplateInUseWarning].reduce(
+    (reducedValidation, validator) => validator(reducedValidation, templateValidationInput),
+    { errors: {}, warnings: {} },
+  );
+}

package/src/kayenta/edit/footer.less

@@ -0,0 +1,30 @@
+// Copied from deck/core .pipeline-footer. Not clear at this point if they should converge.
+.canary-footer {
+  position: fixed;
+  z-index: 4;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: #ffffff;
+  margin: 0;
+  border-top: 1px solid #d9d9d9;
+  .col-sm-12 {
+    padding: 5px;
+  }
+
+  .alert {
+    display: inline-block;
+    margin-bottom: 0;
+    margin-right: 5px;
+    padding: 6px 12px;
+    vertical-align: middle;
+  }
+
+  .fa.fa-exclamation-triangle {
+    font-size: 125%;
+    color: var(--color-danger);
+    opacity: 1;
+    margin-left: 5px;
+    padding: 0 2px;
+  }
+}

package/src/kayenta/edit/footer.tsx

@@ -0,0 +1,12 @@
+import classNames from 'classnames';
+import * as React from 'react';
+
+import './footer.less';
+
+export interface IFooterProps {
+  children?: JSX.Element;
+}
+
+export default function Footer({ children }: IFooterProps) {
+  return <div className={classNames('row', 'canary-footer')}>{children}</div>;
+}

package/src/kayenta/edit/groupName.tsx

@@ -0,0 +1,80 @@
+import * as Creators from 'kayenta/actions/creators';
+import { CanarySettings } from 'kayenta/canary.settings';
+import { DISABLE_EDIT_CONFIG, DisableableInput } from 'kayenta/layout/disableable';
+import { ICanaryState } from 'kayenta/reducers';
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { Action } from 'redux';
+
+interface IGroupNameStateProps {
+  group: string;
+  edit: string;
+  editing: boolean;
+}
+
+interface IGroupNameDispatchProps {
+  handleSubmit: (event: any) => void;
+  handleUpdate: (event: any) => void;
+}
+
+export interface IGroupNameOwnProps {
+  group: string;
+  editing: boolean;
+  onClick: (event: React.SyntheticEvent<HTMLAnchorElement>) => void;
+  defaultGroup: string;
+}
+
+/*
+ * Configures a group name.
+ */
+function GroupName({
+  editing,
+  edit,
+  group,
+  onClick,
+  handleUpdate,
+  handleSubmit,
+  defaultGroup,
+}: IGroupNameStateProps & IGroupNameDispatchProps & IGroupNameOwnProps) {
+  if (editing) {
+    return (
+      <form onSubmit={handleSubmit} onBlur={handleSubmit} data-group={group} data-edit={edit}>
+        <DisableableInput
+          autoFocus={true}
+          value={edit}
+          onChange={handleUpdate}
+          disabled={CanarySettings.disableConfigEdit}
+          disabledStateKeys={[DISABLE_EDIT_CONFIG]}
+        />
+      </form>
+    );
+  } else {
+    return (
+      <a data-group={group} onClick={onClick}>
+        {group || defaultGroup}
+      </a>
+    );
+  }
+}
+
+function mapStateToProps(state: ICanaryState, ownProps: IGroupNameOwnProps): IGroupNameStateProps & IGroupNameOwnProps {
+  return {
+    edit: state.selectedConfig.group.edit,
+    ...ownProps,
+  };
+}
+
+function mapDispatchToProps(dispatch: (action: Action & any) => void): IGroupNameDispatchProps {
+  return {
+    handleUpdate: (event: any) => {
+      dispatch(Creators.editGroupUpdate({ edit: event.target.value }));
+    },
+    handleSubmit: (event: any) => {
+      dispatch(Creators.editGroupConfirm({ ...event.currentTarget.dataset }));
+      event.stopPropagation();
+      event.preventDefault();
+    },
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(GroupName);

package/src/kayenta/edit/groupTabs.tsx

@@ -0,0 +1,106 @@
+import classNames from 'classnames';
+import * as Creators from 'kayenta/actions/creators';
+import { CanarySettings } from 'kayenta/canary.settings';
+import { DISABLE_EDIT_CONFIG, DisableableButton } from 'kayenta/layout/disableable';
+import { Tab, Tabs } from 'kayenta/layout/tabs';
+import { ICanaryState } from 'kayenta/reducers';
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { Action } from 'redux';
+
+import { noop } from '@spinnaker/core';
+
+import GroupName from './groupName';
+
+export const ALL = 'all';
+
+interface IGroupTabsStateProps {
+  groupList: string[];
+  selectedGroup: string;
+  editing: boolean;
+  disableConfigEdit: boolean;
+}
+
+interface IGroupTabsDispatchProps {
+  selectGroup: (event: any) => void;
+  addGroup: (event: any) => void;
+  editGroupBegin: (event: any) => void;
+}
+
+/*
+ * Configures an entire list of metrics.
+ */
+function GroupTabs({
+  groupList,
+  selectedGroup,
+  selectGroup,
+  addGroup,
+  editing,
+  editGroupBegin,
+  disableConfigEdit,
+}: IGroupTabsStateProps & IGroupTabsDispatchProps) {
+  const GroupTab = ({ group, editable = false }: { group: string; editable?: boolean }) => {
+    const selected = selectedGroup === group;
+    return (
+      <Tab selected={selected}>
+        <GroupName group={group} editing={selected && editing} onClick={selectGroup} defaultGroup={ALL} />
+        {selected && editable && !editing && (
+          <i
+            data-group={group}
+            onClick={disableConfigEdit || CanarySettings.disableConfigEdit ? noop : editGroupBegin}
+            className={classNames('fas', 'fa-pencil-alt', {
+              disabled: disableConfigEdit || CanarySettings.disableConfigEdit,
+            })}
+          />
+        )}
+      </Tab>
+    );
+  };
+  return (
+    <section className="group-tabs">
+      <Tabs style={{ marginBottom: '0' }}>
+        <GroupTab group="" />
+        {groupList.map((group) => (
+          <GroupTab key={group} group={group} editable={true} />
+        ))}
+        <DisableableButton
+          className="passive float-right"
+          onClick={addGroup}
+          disabled={CanarySettings.disableConfigEdit}
+          disabledStateKeys={[DISABLE_EDIT_CONFIG]}
+        >
+          Add Group
+        </DisableableButton>
+      </Tabs>
+    </section>
+  );
+}
+
+function mapStateToProps(state: ICanaryState): IGroupTabsStateProps {
+  return {
+    groupList: state.selectedConfig.group.list,
+    selectedGroup: state.selectedConfig.group.selected,
+    editing: !!state.selectedConfig.group.edit || state.selectedConfig.group.edit === '',
+    disableConfigEdit: state.app.disableConfigEdit || CanarySettings.disableConfigEdit,
+  };
+}
+
+function mapDispatchToProps(dispatch: (action: Action & any) => void): IGroupTabsDispatchProps {
+  return {
+    selectGroup: (event: any) => {
+      dispatch(Creators.selectGroup({ name: event.target.dataset.group }));
+      event.preventDefault();
+      event.stopPropagation();
+    },
+    addGroup: (event: any) => {
+      dispatch(Creators.addGroup());
+      event.preventDefault();
+      event.stopPropagation();
+    },
+    editGroupBegin: (event: any) => {
+      dispatch(Creators.editGroupBegin({ group: event.target.dataset.group }));
+    },
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(GroupTabs);

package/src/kayenta/edit/groupWeight.tsx

@@ -0,0 +1,80 @@
+import * as Creators from 'kayenta/actions/creators';
+import { CanarySettings } from 'kayenta/canary.settings';
+import { ICanaryConfig } from 'kayenta/domain/ICanaryConfig';
+import { DISABLE_EDIT_CONFIG, DisableableInput } from 'kayenta/layout/disableable';
+import { ICanaryState } from 'kayenta/reducers';
+import { mapStateToConfig } from 'kayenta/service/canaryConfig.service';
+import { get, isNumber } from 'lodash';
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { Action } from 'redux';
+
+import FormRow from '../layout/formRow';
+
+export interface IGroupWeightOwnProps {
+  group: string;
+}
+
+interface IGroupWeightStateProps {
+  config: ICanaryConfig;
+}
+
+interface IGroupWeightDispatchProps {
+  handleInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+/*
+ * Component for configuring a group weight.
+ * */
+function GroupWeight({
+  group,
+  config,
+  handleInputChange,
+}: IGroupWeightOwnProps & IGroupWeightStateProps & IGroupWeightDispatchProps) {
+  const groupWeight = getGroupWeights(config)[group];
+  return (
+    <FormRow label={group} inputOnly={true}>
+      <DisableableInput
+        type="number"
+        value={isNumber(groupWeight) ? groupWeight : ''}
+        onChange={handleInputChange}
+        min={0}
+        max={100}
+        disabled={CanarySettings.disableConfigEdit}
+        disabledStateKeys={[DISABLE_EDIT_CONFIG]}
+      />
+    </FormRow>
+  );
+}
+
+function getGroupWeights(config: ICanaryConfig): { [key: string]: number } {
+  return get(config, 'classifier.groupWeights', {});
+}
+
+function mapStateToProps(
+  state: ICanaryState,
+  ownProps: IGroupWeightOwnProps,
+): IGroupWeightOwnProps & IGroupWeightStateProps {
+  return {
+    ...ownProps,
+    config: mapStateToConfig(state),
+  };
+}
+
+function mapDispatchToProps(
+  dispatch: (action: Action & any) => void,
+  { group }: IGroupWeightOwnProps,
+): IGroupWeightDispatchProps {
+  return {
+    handleInputChange: (event: React.ChangeEvent<HTMLInputElement>) => {
+      dispatch(
+        Creators.updateGroupWeight({
+          group,
+          weight: event.target.value ? parseInt(event.target.value, 10) : null,
+        }),
+      );
+    },
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(GroupWeight);

package/src/kayenta/edit/groupWeights.tsx

@@ -0,0 +1,38 @@
+import { flatMap, uniq } from 'lodash';
+import * as React from 'react';
+import { connect } from 'react-redux';
+
+import GroupWeight from './groupWeight';
+import { ICanaryState } from '../reducers/index';
+import { mapStateToConfig } from '../service/canaryConfig.service';
+
+interface IGroupWeightsStateProps {
+  groups: string[];
+}
+
+/*
+ * Component for rendering list of group weight configurers.
+ */
+function GroupWeights({ groups }: IGroupWeightsStateProps) {
+  const hasGroups = groups.length > 0;
+  return (
+    <section>
+      {hasGroups ? (
+        groups.map((group) => <GroupWeight key={group} group={group} />)
+      ) : (
+        <p key="no-groups">You have not configured any grouped metrics.</p>
+      )}
+    </section>
+  );
+}
+
+function mapStateToProps(state: ICanaryState): IGroupWeightsStateProps {
+  const config = mapStateToConfig(state);
+  const metrics = config ? config.metrics : [];
+  const groups = uniq(flatMap(metrics, (metric) => metric.groups || []));
+  return {
+    groups,
+  };
+}
+
+export default connect(mapStateToProps)(GroupWeights);

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

@@ -0,0 +1,42 @@
+import { mount } from 'enzyme';
+import { identity } from 'lodash';
+import * as React from 'react';
+import { Provider } from 'react-redux';
+import { createMockStore } from 'redux-test-utils';
+
+import { noop, ValidationMessage } from '@spinnaker/core';
+
+import { IInlineTemplateEditorProps, InlineTemplateEditor } from './inlineTemplateEditor';
+import { DisableableTextarea } from '../layout/disableable';
+
+describe('<InlineTemplateEditor />', () => {
+  const buildComponent = (props: IInlineTemplateEditorProps) =>
+    mount(
+      <Provider store={createMockStore()}>
+        <InlineTemplateEditor {...props} />
+      </Provider>,
+    ).find(InlineTemplateEditor);
+
+  it('renders a textarea with template value', () => {
+    const component = buildComponent({
+      templateValue: 'metadata.user_labels."app"="${scope}"',
+      transformValueForSave: identity,
+      editTemplateValue: noop,
+    });
+    expect(component.find(DisableableTextarea).first().props().value).toEqual('metadata.user_labels."app"="${scope}"');
+  });
+  it('renders an error for empty input', () => {
+    let component = buildComponent({
+      templateValue: 'metadata.user_labels."app"="${scope}"',
+      transformValueForSave: identity,
+      editTemplateValue: noop,
+    });
+    expect(component.find(ValidationMessage).length).toEqual(0);
+    component = buildComponent({
+      templateValue: '',
+      transformValueForSave: identity,
+      editTemplateValue: noop,
+    });
+    expect(component.find(ValidationMessage).props().message).toEqual('Template is required');
+  });
+});

package/src/kayenta/edit/inlineTemplateEditor.tsx

@@ -0,0 +1,61 @@
+import * as Creators from 'kayenta/actions/creators';
+import { CanarySettings } from 'kayenta/canary.settings';
+import { DISABLE_EDIT_CONFIG, DisableableTextarea } from 'kayenta/layout/disableable';
+import FormRow from 'kayenta/layout/formRow';
+import { ICanaryState } from 'kayenta/reducers';
+import {
+  inlineTemplateValueSelector,
+  transformInlineTemplateForSave,
+} from 'kayenta/selectors/filterTemplatesSelectors';
+import { isEmpty } from 'lodash';
+import * as React from 'react';
+import { connect } from 'react-redux';
+
+interface IInlineTemplateEditorStateProps {
+  templateValue: string;
+  transformValueForSave: (value: string) => string;
+}
+
+interface IInlineTemplateEditorDispatchProps {
+  editTemplateValue: (value: string) => void;
+}
+
+export type IInlineTemplateEditorProps = IInlineTemplateEditorStateProps & IInlineTemplateEditorDispatchProps;
+
+export function InlineTemplateEditor({
+  editTemplateValue,
+  templateValue,
+  transformValueForSave,
+}: IInlineTemplateEditorProps) {
+  return (
+    <FormRow
+      label="Template"
+      inputOnly={true}
+      helpId="canary.config.filterTemplate"
+      error={isEmpty(templateValue) && 'Template is required'}
+    >
+      <DisableableTextarea
+        className="template-editor-textarea"
+        disabledStateKeys={[DISABLE_EDIT_CONFIG]}
+        disabled={CanarySettings.disableConfigEdit}
+        onChange={(e: any) => editTemplateValue(transformValueForSave(e.target.value))}
+        value={templateValue}
+      />
+    </FormRow>
+  );
+}
+
+function mapStateToProps(state: ICanaryState): IInlineTemplateEditorStateProps {
+  return {
+    templateValue: inlineTemplateValueSelector(state),
+    transformValueForSave: transformInlineTemplateForSave(state),
+  };
+}
+
+function mapDispatchToProps(dispatch: any): IInlineTemplateEditorDispatchProps {
+  return {
+    editTemplateValue: (value: string) => dispatch(Creators.editInlineTemplate({ value })),
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(InlineTemplateEditor);