@spinnaker/kayenta 0.0.0-2025.1-0

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

package/src/kayenta/edit/judgeSelect.tsx

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

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

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

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

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