@spinnaker/kayenta 0.0.0-2025.1-0

package/src/kayenta/edit/configJsonModal.tsx

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

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

package/src/kayenta/edit/configList.tsx

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

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

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

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

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

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

package/src/kayenta/edit/editMetricModal.less

@@ -0,0 +1,9 @@
+.kayenta-edit-metric-modal {
+  .modal-content {
+    // Prevents the contents of a ReactSelect field from being clipped by the bottom of the modal.
+    overflow: visible;
+  }
+  .effect-size-wrapper {
+    width: 100px;
+  }
+}