@spinnaker/kayenta 2025.3.0 → 2025.4.1

package/src/kayenta/edit/groupWeight.tsx

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

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

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

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

package/src/kayenta/edit/judgeSelect.tsx

@@ -1,82 +0,0 @@
-import * as Creators from 'kayenta/actions/creators';
-import { CanarySettings } from 'kayenta/canary.settings';
-import { DISABLE_EDIT_CONFIG, DisableableInput, DisableableReactSelect } from 'kayenta/layout/disableable';
-import FormRow from 'kayenta/layout/formRow';
-import { ICanaryState } from 'kayenta/reducers';
-import * as React from 'react';
-import { connect } from 'react-redux';
-import { Option } from 'react-select';
-import { Action } from 'redux';
-
-interface IJudgeSelectStateProps {
-  judgeOptions: Option[];
-  selectedJudge: string;
-  renderState: JudgeSelectRenderState;
-}
-
-interface IJudgeSelectDispatchProps {
-  handleJudgeSelect: (option: Option) => void;
-}
-
-export enum JudgeSelectRenderState {
-  Multiple,
-  Single,
-  None,
-}
-
-/*
- * Select field for picking canary judge.
- */
-function JudgeSelect({
-  judgeOptions,
-  selectedJudge,
-  handleJudgeSelect,
-  renderState,
-}: IJudgeSelectStateProps & IJudgeSelectDispatchProps) {
-  switch (renderState) {
-    case JudgeSelectRenderState.Multiple:
-      return (
-        <FormRow>
-          <DisableableReactSelect
-            value={selectedJudge}
-            options={judgeOptions}
-            clearable={false}
-            onChange={handleJudgeSelect}
-            disabled={CanarySettings.disableConfigEdit}
-            disabledStateKeys={[DISABLE_EDIT_CONFIG]}
-          />
-        </FormRow>
-      );
-    case JudgeSelectRenderState.Single:
-      return (
-        <FormRow>
-          <DisableableInput
-            type="text"
-            value={selectedJudge}
-            disabled={true}
-            disabledStateKeys={[DISABLE_EDIT_CONFIG]}
-          />
-        </FormRow>
-      );
-    case JudgeSelectRenderState.None:
-      return null;
-  }
-}
-
-function mapStateToProps(state: ICanaryState): IJudgeSelectStateProps {
-  return {
-    judgeOptions: (state.data.judges || []).map((judge) => ({ value: judge.name, label: judge.name })),
-    selectedJudge: state.selectedConfig.judge.judgeConfig.name,
-    renderState: state.selectedConfig.judge.renderState,
-  };
-}
-
-function mapDispatchToProps(dispatch: (action: Action & any) => void): IJudgeSelectDispatchProps {
-  return {
-    handleJudgeSelect: (option: Option) => {
-      dispatch(Creators.selectJudgeName({ judge: { name: option.value as string } }));
-    },
-  };
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(JudgeSelect);

package/src/kayenta/edit/metricConfigurerDelegator.tsx

@@ -1,30 +0,0 @@
-import { ICanaryMetricConfig } from 'kayenta/domain/ICanaryConfig';
-import metricStoreConfigService from 'kayenta/metricStore/metricStoreConfig.service';
-import { ICanaryState } from 'kayenta/reducers';
-import * as React from 'react';
-import { connect } from 'react-redux';
-
-interface IMetricConfigurerDelegatorStateProps {
-  editingMetric: ICanaryMetricConfig;
-}
-
-/*
- * Should find and render the appropriate metric configurer for a given metric store.
- * */
-function MetricConfigurerDelegator({ editingMetric }: IMetricConfigurerDelegatorStateProps) {
-  const config = metricStoreConfigService.getDelegate(editingMetric.query.type);
-  if (config && config.metricConfigurer) {
-    const MetricConfigurer = config.metricConfigurer;
-    return <MetricConfigurer />;
-  } else {
-    return <p>Metric configuration has not been implemented for {editingMetric.query.type}.</p>;
-  }
-}
-
-function mapStateToProps(state: ICanaryState): IMetricConfigurerDelegatorStateProps {
-  return {
-    editingMetric: state.selectedConfig.editingMetric,
-  };
-}
-
-export default connect(mapStateToProps)(MetricConfigurerDelegator);

package/src/kayenta/edit/metricList.less

@@ -1,21 +0,0 @@
-.metrics-action-buttons {
-  .link {
-    padding: 0 12px;
-  }
-}
-
-.metric-filter-options {
-  label {
-    font-weight: 600;
-    margin: 6px;
-    padding: 6px 12px;
-    border: 1px solid var(--color-divider);
-  }
-}
-
-.metric-fail-on-icon {
-  color: var(--color-warning);
-  &.critical {
-    color: var(--color-danger);
-  }
-}

package/src/kayenta/edit/metricList.tsx

@@ -1,215 +0,0 @@
-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, DisableableButton } from 'kayenta/layout/disableable';
-import { ITableColumn, NativeTable } from 'kayenta/layout/table';
-import { ICanaryState } from 'kayenta/reducers';
-import { cloneDeep } from 'lodash';
-import * as React from 'react';
-import { connect } from 'react-redux';
-import { Action } from 'redux';
-
-import { Tooltip } from '@spinnaker/core';
-
-import ChangeMetricGroupModal from './changeMetricGroupModal';
-
-import './metricList.less';
-
-interface IMetricListStateProps {
-  selectedGroup: string;
-  metrics: ICanaryMetricConfig[];
-  showGroups: boolean;
-  changingGroupMetric: ICanaryMetricConfig;
-  groupList: string[];
-  metricStore: string;
-  disableEdit: boolean;
-}
-
-interface IMetricListDispatchProps {
-  addMetric: (event: any) => void;
-  editMetric: (event: any) => void;
-  copyMetric: (metric: ICanaryMetricConfig) => void;
-  removeMetric: (event: any) => void;
-  openChangeMetricGroupModal: (event: any) => void;
-}
-
-function FailOn({ metric }: { metric: ICanaryMetricConfig }) {
-  const direction = metric.analysisConfigurations?.canary?.direction;
-  const isCritical = metric.analysisConfigurations?.canary?.critical;
-  const tooltipSuffix = isCritical ? '(critical — if this metric fails, the entire canary will fail)' : '';
-  const classes = classNames('metric-fail-on-icon', 'fas', 'sp-margin-xs-right', { critical: isCritical });
-  if (direction === 'decrease') {
-    return (
-      <Tooltip value={`decrease ${tooltipSuffix}`}>
-        <i className={`fa-caret-square-down ${classes}`} />
-      </Tooltip>
-    );
-  }
-  if (direction === 'increase') {
-    return (
-      <Tooltip value={`increase ${tooltipSuffix}`}>
-        <i className={`fa-caret-square-up ${classes}`} />
-      </Tooltip>
-    );
-  }
-  return (
-    <Tooltip value={`increase OR decrease ${tooltipSuffix}`}>
-      <span>
-        <i className={`fa-caret-square-down ${classes}`} />
-        <i className={`fa-caret-square-up ${classes}`} />
-      </span>
-    </Tooltip>
-  );
-}
-
-/*
- * Configures an entire list of metrics.
- */
-function MetricList({
-  metrics,
-  groupList,
-  selectedGroup,
-  showGroups,
-  addMetric,
-  editMetric,
-  copyMetric,
-  removeMetric,
-  changingGroupMetric,
-  openChangeMetricGroupModal,
-  metricStore,
-  disableEdit,
-}: IMetricListStateProps & IMetricListDispatchProps) {
-  const columns: Array<ITableColumn<ICanaryMetricConfig>> = [
-    {
-      label: 'Metric Name',
-      getContent: (metric) => <span>{metric.name || '(new)'}</span>,
-    },
-    {
-      label: 'Fail On',
-      getContent: (metric) => <FailOn metric={metric} />,
-    },
-    {
-      label: 'Groups',
-      getContent: (metric) => <span>{metric.groups.join(', ')}</span>,
-      hide: () => !showGroups,
-    },
-    {
-      getContent: (metric) => (
-        <div className="horizontal pull-right metrics-action-buttons">
-          <button className="link" data-id={metric.id} onClick={editMetric}>
-            {disableEdit || CanarySettings.disableConfigEdit ? 'View' : 'Edit'}
-          </button>
-          <button
-            className="link"
-            data-id={metric.id}
-            disabled={disableEdit || CanarySettings.disableConfigEdit}
-            onClick={openChangeMetricGroupModal}
-          >
-            Move Group
-          </button>
-          <button
-            className="link"
-            data-id={metric.id}
-            disabled={disableEdit || CanarySettings.disableConfigEdit}
-            onClick={() => copyMetric(metric)}
-          >
-            Copy
-          </button>
-          <button
-            className="link"
-            data-id={metric.id}
-            disabled={disableEdit || CanarySettings.disableConfigEdit}
-            onClick={removeMetric}
-          >
-            Delete
-          </button>
-        </div>
-      ),
-    },
-  ];
-
-  return (
-    <>
-      <NativeTable columns={columns} rows={metrics} rowKey={(metric) => metric.id} className="header-white" />
-      {!metrics.length && selectedGroup ? (
-        <p>
-          This group is empty! The group will be not be present the next time the config is loaded unless it is saved
-          with at least one metric in it.
-        </p>
-      ) : null}
-      {changingGroupMetric && <ChangeMetricGroupModal metric={changingGroupMetric} />}
-      <DisableableButton
-        className="passive self-left"
-        data-group={selectedGroup}
-        data-default={groupList[0]}
-        data-metric-store={metricStore}
-        onClick={addMetric}
-        disabled={CanarySettings.disableConfigEdit}
-        disabledStateKeys={[DISABLE_EDIT_CONFIG]}
-      >
-        Add Metric
-      </DisableableButton>
-    </>
-  );
-}
-
-function mapStateToProps(state: ICanaryState): IMetricListStateProps {
-  const selectedGroup = state.selectedConfig.group.selected;
-  const metricList = state.selectedConfig.metricList;
-
-  const filter = selectedGroup ? (metric: ICanaryMetricConfig) => metric.groups.includes(selectedGroup) : () => true;
-  return {
-    selectedGroup,
-    groupList: state.selectedConfig.group.list,
-    metrics: metricList.filter(filter),
-    showGroups: !selectedGroup || metricList.filter(filter).some((metric) => metric.groups.length > 1),
-    changingGroupMetric: state.selectedConfig.metricList.find(
-      (m) => m.id === state.selectedConfig.changeMetricGroup.metric,
-    ),
-    metricStore: state.selectedConfig.selectedStore,
-    disableEdit: state.app.disableConfigEdit || CanarySettings.disableConfigEdit,
-  };
-}
-
-function mapDispatchToProps(dispatch: (action: Action & any) => void): IMetricListDispatchProps {
-  return {
-    addMetric: (event: any) => {
-      const group = event.target.dataset.group || event.target.dataset.default;
-      dispatch(
-        Creators.addMetric({
-          metric: {
-            // TODO: need to block saving an invalid name
-            // TODO: for Atlas metrics, attempt to gather name when query changes
-            id: '[new]',
-            analysisConfigurations: {},
-            name: '',
-            query: {
-              type: event.target.dataset.metricStore,
-              serviceType: event.target.dataset.metricStore,
-            },
-            groups: group ? [group] : [],
-            scopeName: 'default', // scopeName always defaults to `default` and is not configurable from the UI
-            isNew: true,
-          },
-        }),
-      );
-    },
-    copyMetric: (metric: ICanaryMetricConfig) => {
-      const metricCopy: ICanaryMetricConfig = cloneDeep(metric);
-      metricCopy.id = '[new]';
-      metricCopy.isNew = true;
-      metricCopy.name = '';
-      dispatch(Creators.addMetric({ metric: metricCopy }));
-    },
-    editMetric: (event: any) => {
-      dispatch(Creators.editMetricBegin({ id: event.target.dataset.id }));
-    },
-    removeMetric: (event: any) => {
-      dispatch(Creators.removeMetric({ id: event.target.dataset.id }));
-    },
-    openChangeMetricGroupModal: (event: any) => dispatch(Creators.changeMetricGroup({ id: event.target.dataset.id })),
-  };
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(MetricList);

package/src/kayenta/edit/metricStoreSelector.tsx

@@ -1,66 +0,0 @@
-import * as Creators from 'kayenta/actions/creators';
-import { CanarySettings } from 'kayenta/canary.settings';
-import { KayentaAccountType } from 'kayenta/domain';
-import { DISABLE_EDIT_CONFIG, DisableableSelect } from 'kayenta/layout/disableable';
-import FormRow from 'kayenta/layout/formRow';
-import { ICanaryState } from 'kayenta/reducers';
-import { chain } from 'lodash';
-import * as React from 'react';
-import { connect, Dispatch } from 'react-redux';
-
-interface IMetricStoreSelectorStateProps {
-  stores: string[];
-  selectedStore: string;
-}
-
-interface IMetricStoreSelectorDispatchProps {
-  select: (event: any) => void;
-}
-
-const MetricStoreSelector = ({
-  stores,
-  selectedStore,
-  select,
-}: IMetricStoreSelectorDispatchProps & IMetricStoreSelectorStateProps) => {
-  if (stores.length < 2) {
-    return null;
-  }
-
-  return (
-    <FormRow label="Metric Store" inputOnly={true}>
-      <DisableableSelect
-        value={selectedStore || ''}
-        onChange={select}
-        className="form-control input-sm"
-        disabled={CanarySettings.disableConfigEdit}
-        disabledStateKeys={[DISABLE_EDIT_CONFIG]}
-      >
-        {stores.map((s) => (
-          <option key={s} value={s}>
-            {s}
-          </option>
-        ))}
-      </DisableableSelect>
-    </FormRow>
-  );
-};
-
-const mapStateToProps = (state: ICanaryState): IMetricStoreSelectorStateProps => {
-  return {
-    stores: chain(state.data.kayentaAccounts.data)
-      .filter((account) => account.supportedTypes.includes(KayentaAccountType.MetricsStore))
-      .map((account) => account.metricsStoreType || account.type)
-      .uniq()
-      .sort()
-      .valueOf(),
-    selectedStore: state.selectedConfig.selectedStore,
-  };
-};
-
-const mapDispatchToProps = (dispatch: Dispatch<ICanaryState>): IMetricStoreSelectorDispatchProps => {
-  return {
-    select: (event: any) => dispatch(Creators.selectMetricStore({ store: event.target.value })),
-  };
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(MetricStoreSelector);