@spinnaker/kayenta 0.0.0-2025.1-0

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);

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);