@spinnaker/kayenta 2025.4.0 → 2025.4.1

package/src/kayenta/edit/filterTemplateSelector.tsx

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

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

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

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

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

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

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