@spinnaker/kayenta 2025.3.0 → 2025.4.1

package/src/kayenta/edit/configDetailLoader.tsx

@@ -1,60 +0,0 @@
-import * as React from 'react';
-import { connect } from 'react-redux';
-import { Action } from 'redux';
-import { Observable } from 'rxjs/Observable';
-import { Subscription } from 'rxjs/Subscription';
-
-import * as Creators from '../actions/creators';
-import ConfigDetailLoadStates from './configDetailLoadStates';
-
-interface IConfigLoaderStateParamsProps {
-  configNameStream: Observable<IConfigDetailStateParams>;
-}
-
-interface IConfigLoaderDispatchProps {
-  loadConfig: (stateParams: IConfigDetailStateParams) => void;
-}
-
-interface IConfigDetailStateParams {
-  id: string;
-  copy: boolean;
-  new: boolean;
-}
-
-/*
- * Top-level .configDetail state component.
- * Loads config details on changes to /canary/:configName path parameter, renders load states.
- */
-class ConfigDetailLoader extends React.Component<IConfigLoaderDispatchProps & IConfigLoaderStateParamsProps> {
-  private subscription: Subscription;
-
-  constructor(props: IConfigLoaderDispatchProps & IConfigLoaderStateParamsProps) {
-    const { configNameStream, loadConfig } = props;
-    super(props);
-    this.subscription = configNameStream.subscribe(loadConfig);
-  }
-
-  public componentWillUnmount(): void {
-    this.subscription.unsubscribe();
-  }
-
-  public render() {
-    return <ConfigDetailLoadStates />;
-  }
-}
-
-function mapDispatchToProps(dispatch: (action: Action & any) => void): IConfigLoaderDispatchProps {
-  return {
-    loadConfig: (stateParams: IConfigDetailStateParams) => {
-      if (stateParams.copy) {
-        dispatch(Creators.copySelectedConfig());
-      } else if (stateParams.new) {
-        dispatch(Creators.createNewConfig());
-      } else if (stateParams.id) {
-        dispatch(Creators.loadConfigRequest({ id: stateParams.id }));
-      }
-    },
-  };
-}
-
-export default connect(null, mapDispatchToProps)(ConfigDetailLoader);

package/src/kayenta/edit/configJson.less

@@ -1,42 +0,0 @@
-.ace-editor {
-  div,
-  span {
-    font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
-  }
-
-  > div.ace_gutter {
-    z-index: 0;
-  }
-}
-
-.kayenta-config-json {
-  textarea {
-    height: 65vh;
-    overflow: scroll;
-    padding: 2px 6px;
-    line-height: 1.4rem;
-    font-family: monospace;
-    font-size: 1rem;
-  }
-
-  pre.diff {
-    height: 65vh;
-    box-shadow: none;
-    width: 100%;
-    padding: 0;
-    .match,
-    .add,
-    .remove {
-      font-family: monospace;
-      font-size: 1rem;
-    }
-  }
-
-  .modal-show-history {
-    .show-history {
-      .summary-nav {
-        right: 7px;
-      }
-    }
-  }
-}

package/src/kayenta/edit/configJsonModal.tsx

@@ -1,158 +0,0 @@
-import 'brace/ext/searchbox';
-import 'brace/mode/json';
-import * as Creators from 'kayenta/actions/creators';
-import { CanarySettings } from 'kayenta/canary.settings';
-import Styleguide from 'kayenta/layout/styleguide';
-import { Tab, Tabs } from 'kayenta/layout/tabs';
-import { ICanaryState } from 'kayenta/reducers';
-import { mapStateToConfig } from 'kayenta/service/canaryConfig.service';
-import { get, omit } from 'lodash';
-import * as React from 'react';
-import { Modal } from 'react-bootstrap';
-import { connect } from 'react-redux';
-import { Action } from 'redux';
-
-import { DiffView, IJsonDiff, JsonEditor, JsonUtils } from '@spinnaker/core';
-
-import './configJson.less';
-
-interface IConfigJsonDispatchProps {
-  closeModal: () => void;
-  setConfigJson: (json: string) => void;
-  updateConfig: (event: any) => void;
-  setTabState: (state: ConfigJsonModalTabState) => () => void;
-}
-
-interface IConfigJsonStateProps {
-  show: boolean;
-  disabled: boolean;
-  configJson: string;
-  id: string;
-  deserializationError: string;
-  tabState: ConfigJsonModalTabState;
-  diff: IJsonDiff;
-}
-
-export enum ConfigJsonModalTabState {
-  Edit,
-  Diff,
-}
-
-/*
- * Modal for viewing canary config JSON.
- */
-function ConfigJsonModal({
-  show,
-  disabled,
-  configJson,
-  id,
-  deserializationError,
-  closeModal,
-  setConfigJson,
-  updateConfig,
-  setTabState,
-  tabState,
-  diff,
-}: IConfigJsonDispatchProps & IConfigJsonStateProps) {
-  return (
-    <Modal show={show} onHide={(): void => null} bsSize="large">
-      <Styleguide>
-        <Modal.Header>
-          <Modal.Title>JSON</Modal.Title>
-        </Modal.Header>
-        <Modal.Body>
-          <section>
-            <Tabs>
-              <Tab selected={tabState === ConfigJsonModalTabState.Edit}>
-                <a onClick={setTabState(ConfigJsonModalTabState.Edit)}>Edit</a>
-              </Tab>
-              <Tab selected={tabState === ConfigJsonModalTabState.Diff}>
-                <a onClick={setTabState(ConfigJsonModalTabState.Diff)}>Diff</a>
-              </Tab>
-            </Tabs>
-          </section>
-          <section className="kayenta-config-json">
-            {tabState === ConfigJsonModalTabState.Edit && (
-              <JsonEditor value={configJson} debounceChangePeriod={500} onChange={setConfigJson} readOnly={disabled} />
-            )}
-            {tabState === ConfigJsonModalTabState.Diff && !deserializationError && (
-              <div className="modal-show-history">
-                <div className="show-history">
-                  <DiffView diff={diff} />
-                </div>
-              </div>
-            )}
-            {!!deserializationError && (
-              <div className="horizontal row center">
-                <span className="error-message">Error: {deserializationError}</span>
-              </div>
-            )}
-          </section>
-        </Modal.Body>
-        <Modal.Footer>
-          <ul className="list-inline pull-right">
-            <li>
-              <button className="passive" onClick={closeModal}>
-                Close
-              </button>
-            </li>
-            <li>
-              <button
-                className="primary"
-                data-id={id}
-                data-serialized={configJson}
-                onClick={updateConfig}
-                disabled={!!deserializationError || disabled}
-              >
-                Update
-              </button>
-            </li>
-          </ul>
-        </Modal.Footer>
-      </Styleguide>
-    </Modal>
-  );
-}
-
-function mapDispatchToProps(dispatch: (action: Action & any) => void): IConfigJsonDispatchProps {
-  return {
-    closeModal: () => dispatch(Creators.closeConfigJsonModal()),
-    setTabState: (state: ConfigJsonModalTabState) => () => dispatch(Creators.setConfigJsonModalTabState({ state })),
-    setConfigJson: (json: string) => dispatch(Creators.setConfigJson({ json })),
-    updateConfig: (event: any) => {
-      dispatch(
-        Creators.selectConfig({
-          config: {
-            id: event.target.dataset.id,
-            ...JSON.parse(event.target.dataset.serialized),
-          },
-        }),
-      );
-    },
-  };
-}
-
-function mapStateToProps(state: ICanaryState): IConfigJsonStateProps {
-  const id: string = get(state, 'selectedConfig.config.id');
-  const persistedConfig = JsonUtils.makeSortedStringFromObject(
-    omit(state.data.configs.find((c) => c.id === id) || {}, 'id'),
-  );
-
-  const configJson =
-    state.selectedConfig.json.configJson ||
-    JsonUtils.makeSortedStringFromObject(omit(mapStateToConfig(state) || {}, 'id'));
-
-  const disabled = state.app.disableConfigEdit || CanarySettings.disableConfigEdit;
-
-  return {
-    configJson,
-    id,
-    disabled,
-    show: state.app.configJsonModalOpen,
-    deserializationError: state.selectedConfig.json.error,
-    tabState: state.app.configJsonModalTabState,
-    diff: state.selectedConfig.json.error ? null : JsonUtils.diff(persistedConfig, configJson, true),
-  };
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(ConfigJsonModal);

package/src/kayenta/edit/configList.less

@@ -1,7 +0,0 @@
-.config-list > .tabs-vertical > li {
-  padding: 0;
-
-  & > a {
-    padding: 18px 12px;
-  }
-}

package/src/kayenta/edit/configList.tsx

@@ -1,57 +0,0 @@
-import { UISref } from '@uirouter/react';
-import { ICanaryConfigSummary } from 'kayenta/domain/ICanaryConfigSummary';
-import FormattedDate from 'kayenta/layout/formattedDate';
-import { ICanaryState } from 'kayenta/reducers';
-import { sortBy } from 'lodash';
-import * as React from 'react';
-import { connect } from 'react-redux';
-
-import CreateConfigButton from './createConfigButton';
-import { OwnedBy } from './ownedBy';
-
-import './configList.less';
-
-interface IConfigListStateProps {
-  configs: ICanaryConfigSummary[];
-  selectedConfigId: string;
-  application: string;
-}
-
-/*
- * Shows a list of available configurations the user can select for editing.
- */
-function ConfigList({ configs, selectedConfigId, application }: IConfigListStateProps) {
-  return (
-    <section className="config-list">
-      <ul className="tabs-vertical list-unstyled " style={{ wordBreak: 'break-all' }}>
-        {configs.map((config) => (
-          <li key={config.id} className={config.id === selectedConfigId ? 'selected' : ''}>
-            <UISref to=".configDetail" params={{ id: config.id, new: false, copy: false }}>
-              <a>
-                <div className="heading-4 color-text-primary">{config.name}</div>
-                <div className="body-small color-text-caption caption" style={{ marginTop: '5px', marginBottom: '0' }}>
-                  Edited: <FormattedDate dateIso={config.updatedTimestampIso} />
-                  <br />
-                  <OwnedBy owningApplications={config.applications} currentApplication={application} />
-                </div>
-              </a>
-            </UISref>
-          </li>
-        ))}
-      </ul>
-      <CreateConfigButton />
-    </section>
-  );
-}
-
-function mapStateToProps(state: ICanaryState): IConfigListStateProps {
-  const selectedConfigId = state.selectedConfig.config ? state.selectedConfig.config.id : null;
-  const application = state.data.application.name;
-  return {
-    selectedConfigId,
-    configs: sortBy(state.data.configSummaries, 'name'),
-    application,
-  };
-}
-
-export default connect(mapStateToProps)(ConfigList);

package/src/kayenta/edit/copyConfigButton.tsx

@@ -1,34 +0,0 @@
-import { UISref } from '@uirouter/react';
-import { CanarySettings } from 'kayenta/canary.settings';
-import { get } from 'lodash';
-import * as React from 'react';
-import { connect } from 'react-redux';
-
-import { ICanaryState } from '../reducers/index';
-
-interface ICopyConfigButtonStateProps {
-  disabled: boolean;
-}
-
-/*
- * Button for copying a canary config.
- */
-function CopyConfigButton({ disabled }: ICopyConfigButtonStateProps) {
-  return (
-    <UISref to="^.configDetail" params={{ copy: true }}>
-      <button className="passive" disabled={disabled}>
-        <i className="fa fa-copy" />
-        <span>Copy</span>
-      </button>
-    </UISref>
-  );
-}
-
-function mapStateToProps(state: ICanaryState) {
-  return {
-    disabled:
-      get(state.selectedConfig, 'config.isNew') || state.app.disableConfigEdit || CanarySettings.disableConfigEdit,
-  };
-}
-
-export default connect(mapStateToProps)(CopyConfigButton);

package/src/kayenta/edit/createConfigButton.tsx

@@ -1,34 +0,0 @@
-import { UISref } from '@uirouter/react';
-import { CanarySettings } from 'kayenta/canary.settings';
-import * as React from 'react';
-import { connect } from 'react-redux';
-
-import { UUIDGenerator } from '@spinnaker/core';
-
-import { ICanaryState } from '../reducers/index';
-
-interface ICreateConfigButtonStateProps {
-  disabled: boolean;
-}
-
-/*
- * Button for creating a new canary config.
- */
-function CreateConfigButton({ disabled }: ICreateConfigButtonStateProps) {
-  return (
-    <UISref to=".configDetail" params={{ id: UUIDGenerator.generateUuid(), new: true }}>
-      <button className="zombie text-left form-control" disabled={disabled}>
-        <i className="fa fa-plus-circle" />
-        <span>Add configuration</span>
-      </button>
-    </UISref>
-  );
-}
-
-function mapStateToProps(state: ICanaryState): ICreateConfigButtonStateProps {
-  return {
-    disabled: (state.selectedConfig.config && state.selectedConfig.config.isNew) || CanarySettings.disableConfigEdit,
-  };
-}
-
-export default connect(mapStateToProps)(CreateConfigButton);

package/src/kayenta/edit/deleteModal.tsx

@@ -1,87 +0,0 @@
-import classNames from 'classnames';
-import * as Creators from 'kayenta/actions/creators';
-import * as React from 'react';
-import { Modal } from 'react-bootstrap';
-import { connect } from 'react-redux';
-import { Action } from 'redux';
-
-import Styleguide from '../layout/styleguide';
-import { AsyncRequestState } from '../reducers/asyncRequest';
-import { ICanaryState } from '../reducers/index';
-
-interface IDeleteModalDispatchProps {
-  closeDeleteConfigModal: () => void;
-  deleteConfig: () => void;
-}
-
-interface IDeleteModalStateProps {
-  show: boolean;
-  selectedConfigName: string;
-  deleteConfigState: AsyncRequestState;
-  deleteConfigErrorMessage: string;
-}
-
-/*
- * Modal to confirm canary config deletion.
- */
-function DeleteConfigModal({
-  show,
-  selectedConfigName,
-  deleteConfigState,
-  deleteConfigErrorMessage,
-  closeDeleteConfigModal,
-  deleteConfig,
-}: IDeleteModalDispatchProps & IDeleteModalStateProps) {
-  return (
-    <Modal show={show} onHide={null}>
-      <Styleguide>
-        <Modal.Header>
-          <Modal.Title>Really delete {selectedConfigName}?</Modal.Title>
-        </Modal.Header>
-        {deleteConfigState === AsyncRequestState.Failed && (
-          <Modal.Body>
-            {/*TODO: create generic error message component */}
-            <span className={classNames('alert', 'alert-danger')}>{buildErrorMessage(deleteConfigErrorMessage)}</span>
-          </Modal.Body>
-        )}
-        <Modal.Footer>
-          <ul className="list-inline pull-right">
-            <li>
-              <button className="passive" onClick={closeDeleteConfigModal}>
-                Cancel
-              </button>
-            </li>
-            <li>
-              <button className="primary" onClick={deleteConfig}>
-                Delete
-              </button>
-            </li>
-          </ul>
-        </Modal.Footer>
-      </Styleguide>
-    </Modal>
-  );
-}
-
-function buildErrorMessage(deleteConfigErrorMessage: string): string {
-  const message = 'The was an error deleting your config';
-  return deleteConfigErrorMessage ? message + `: ${deleteConfigErrorMessage}.` : message + '.';
-}
-
-function mapDispatchToProps(dispatch: (action: Action & any) => void): IDeleteModalDispatchProps {
-  return {
-    closeDeleteConfigModal: () => dispatch(Creators.closeDeleteConfigModal()),
-    deleteConfig: () => dispatch(Creators.deleteConfig()),
-  };
-}
-
-function mapStateToProps(state: ICanaryState): IDeleteModalStateProps {
-  return {
-    show: state.app.deleteConfigModalOpen,
-    selectedConfigName: state.selectedConfig.config ? state.selectedConfig.config.name : null,
-    deleteConfigState: state.selectedConfig.destroy.state,
-    deleteConfigErrorMessage: state.selectedConfig.destroy.error,
-  };
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(DeleteConfigModal);

package/src/kayenta/edit/edit.tsx

@@ -1,24 +0,0 @@
-import { UIView } from '@uirouter/react';
-import * as React from 'react';
-
-import ConfigList from './configList';
-import Footer from './footer';
-import ListDetail from '../layout/listDetail';
-
-/*
- * Component for editing canary configurations for an application.
- */
-export default function CanaryConfigEdit() {
-  const List = <ConfigList />;
-  // TODO: need to break these down by groups
-  const noWrap = { wrap: false };
-  const Detail = <UIView {...noWrap} name="detail" />;
-  return (
-    <div className="vertical flex-1">
-      <ListDetail list={List} detail={Detail} className="flex-1" detailClass="vertical flex-1" />
-      <Footer>
-        <UIView {...noWrap} name="footer" />
-      </Footer>
-    </div>
-  );
-}

package/src/kayenta/edit/editMetricEffectSizes.tsx

@@ -1,186 +0,0 @@
-import * as Creators from 'kayenta/actions/creators';
-import { CanarySettings } from 'kayenta/canary.settings';
-import { ICanaryMetricEffectSizeConfig } from 'kayenta/domain';
-import FormRow from 'kayenta/layout/formRow';
-import RadioChoice from 'kayenta/layout/radioChoice';
-import { ICanaryState } from 'kayenta/reducers';
-import * as React from 'react';
-import { connect } from 'react-redux';
-
-import { HelpField, robotToHuman } from '@spinnaker/core';
-
-import { DISABLE_EDIT_CONFIG, DisableableInput } from '../layout/disableable';
-
-interface IEditMetricEffectSizesProps {
-  metricId: string;
-  direction: string;
-  disabled: boolean;
-  effectSizes: ICanaryMetricEffectSizeConfig;
-}
-
-interface IEditMetricEffectSizesDispatchProps {
-  updateEffectSize: (id: string, value: ICanaryMetricEffectSizeConfig) => void;
-}
-
-export function EditMetricEffectSizes({
-  effectSizes = {},
-  updateEffectSize,
-  direction,
-  metricId,
-  disabled,
-}: IEditMetricEffectSizesProps & IEditMetricEffectSizesDispatchProps) {
-  const [showEffectSizes, setShowEffectSizes] = React.useState<boolean>(!!Object.keys(effectSizes).length);
-  // only allow editing of measurement type if it was set to "cles" programmatically
-  const [allowEditMeasurementType] = React.useState<boolean>(effectSizes.measure === 'cles');
-
-  const description = (
-    <p>
-      Effect sizes should be used when your canary data produces a lot of metrics that flag as "high", but where you
-      only want the test to fail if they are sufficiently larger or smaller than the control data.
-    </p>
-  );
-
-  if (!showEffectSizes && disabled) {
-    return null;
-  }
-
-  if (!showEffectSizes) {
-    return (
-      <FormRow label="Effect Sizes">
-        {description}
-        <button className="passive" onClick={() => setShowEffectSizes(true)}>
-          Configure effect sizes
-        </button>
-      </FormRow>
-    );
-  }
-
-  const isCles = effectSizes.measure === 'cles';
-  const defaultSize = isCles ? 0.5 : 1;
-
-  const {
-    allowedIncrease = defaultSize,
-    criticalIncrease = defaultSize,
-    allowedDecrease = defaultSize,
-    criticalDecrease = defaultSize,
-    measure = 'meanRatio',
-  } = effectSizes;
-
-  const updateSize = (field: keyof ICanaryMetricEffectSizeConfig, percent: string) => {
-    const value = isCles ? Number(percent) : fromPercent(field, percent);
-    const newEffectSizes = { ...effectSizes, [field]: value };
-    if (value === defaultSize) {
-      delete newEffectSizes[field];
-    }
-    updateEffectSize(metricId, newEffectSizes);
-  };
-
-  const updateMeasure = (event: React.ChangeEvent<HTMLInputElement>) => {
-    updateEffectSize(metricId, { ...effectSizes, measure: event.target.value });
-  };
-
-  const fromPercent = (field: keyof ICanaryMetricEffectSizeConfig, percent: string) => {
-    const size = Number(percent) / 100;
-    return field.endsWith('Increase') ? 1 + size : 1 - size;
-  };
-
-  const toPercent = (value: number, field: keyof ICanaryMetricEffectSizeConfig) => {
-    const normalized = field.endsWith('Increase') ? value - 1 : 1 - value;
-    return Math.round(normalized * 100);
-  };
-
-  const clesLabel = (
-    <>
-      CLES <HelpField id="canary.config.effectSize.cles" />
-    </>
-  );
-
-  const noEffectLabel = (effect: number) => {
-    if (effect === defaultSize) {
-      return <HelpField expand={true} content="(will not affect metric evaluation)" />;
-    }
-    return null;
-  };
-
-  const buildInput = (field: keyof ICanaryMetricEffectSizeConfig, value: number) => (
-    <div className="form-group flex-1">
-      <label>{robotToHuman(field)}</label>
-      <div className="row">
-        <div className="col-md-4">
-          <div className="input-group effect-size-wrapper">
-            <DisableableInput
-              className="form-control input-sm"
-              type="number"
-              min={0}
-              step={isCles ? 0.01 : 1}
-              onChange={(e) => updateSize(field, e.target.value)}
-              value={isCles ? value : toPercent(value, field)}
-              disabled={CanarySettings.disableConfigEdit}
-              disabledStateKeys={[DISABLE_EDIT_CONFIG]}
-            />
-            {!isCles && <div className="input-group-addon">%</div>}
-          </div>
-        </div>
-      </div>
-      {noEffectLabel(value)}
-    </div>
-  );
-
-  return (
-    <FormRow label="Effect Sizes">
-      {description}
-      <div className="vertical" style={{ marginTop: '5px' }}>
-        {allowEditMeasurementType && (
-          <div className="form-group vertical">
-            <label>Measurement Type</label>
-            <div>
-              <RadioChoice
-                value="meanRatio"
-                label="Mean (default)"
-                name="measure"
-                current={measure}
-                action={updateMeasure}
-              />
-              <RadioChoice value="cles" label={clesLabel} name="measure" current={measure} action={updateMeasure} />
-            </div>
-          </div>
-        )}
-        <label className="sp-margin-m-top">Allowed Effects</label>
-        <p>
-          If the canary surpasses the baseline by the supplied (non-zero) percentage, the <em>metric</em> will fail.
-        </p>
-        <div className="horizontal">
-          {direction !== 'increase' && buildInput('allowedDecrease', allowedDecrease)}
-          {direction !== 'decrease' && buildInput('allowedIncrease', allowedIncrease)}
-        </div>
-        <label className="sp-margin-m-top">Critical Effects</label>
-        <p>
-          If the canary surpasses the baseline by the supplied (non-zero) percentage, the <em>entire analysis</em> will
-          fail with a score of 0.
-        </p>
-        <div className="horizontal">
-          {direction !== 'increase' && buildInput('criticalDecrease', criticalDecrease)}
-          {direction !== 'decrease' && buildInput('criticalIncrease', criticalIncrease)}
-        </div>
-      </div>
-    </FormRow>
-  );
-}
-
-function mapStateToProps(state: ICanaryState): IEditMetricEffectSizesProps {
-  return {
-    metricId: state.selectedConfig.editingMetric.id,
-    direction: state.selectedConfig.editingMetric.analysisConfigurations?.canary?.direction ?? 'either',
-    disabled: state.app.disableConfigEdit || CanarySettings.disableConfigEdit,
-    effectSizes: state.selectedConfig.editingMetric.analysisConfigurations?.canary?.effectSize ?? {},
-  };
-}
-
-function mapDispatchToProps(dispatch: any): IEditMetricEffectSizesDispatchProps {
-  return {
-    updateEffectSize: (id: string, value: ICanaryMetricEffectSizeConfig) =>
-      dispatch(Creators.updateEffectSize({ id, value })),
-  };
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(EditMetricEffectSizes);