@spinnaker/kayenta 2025.3.0 → 2025.4.1

package/src/kayenta/edit/nameAndDescription.tsx

@@ -1,90 +0,0 @@
-import * as Creators from 'kayenta/actions/creators';
-import { CanarySettings } from 'kayenta/canary.settings';
-import { DISABLE_EDIT_CONFIG, DisableableInput, DisableableTextarea } from 'kayenta/layout/disableable';
-import FormList from 'kayenta/layout/formList';
-import FormRow from 'kayenta/layout/formRow';
-import { ICanaryState } from 'kayenta/reducers';
-import * as React from 'react';
-import { connect } from 'react-redux';
-import { Action } from 'redux';
-
-import MetricStoreSelector from './metricStoreSelector';
-
-interface INameAndDescriptionDispatchProps {
-  changeName: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  changeDescription: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
-}
-
-interface INameAndDescriptionStateProps {
-  name: string;
-  description: string;
-}
-
-/*
- * Configures canary config name and description.
- */
-function NameAndDescription({
-  name,
-  description,
-  changeName,
-  changeDescription,
-}: INameAndDescriptionDispatchProps & INameAndDescriptionStateProps) {
-  return (
-    <FormList>
-      <FormRow label="Configuration Name" inputOnly={true}>
-        <DisableableInput
-          type="text"
-          value={name}
-          onChange={changeName}
-          disabled={CanarySettings.disableConfigEdit}
-          disabledStateKeys={[DISABLE_EDIT_CONFIG]}
-        />
-      </FormRow>
-      <MetricStoreSelector />
-      <FormRow label="Description" inputOnly={true}>
-        <DisableableTextarea
-          className="form-control input-sm"
-          value={description}
-          onChange={changeDescription}
-          disabled={CanarySettings.disableConfigEdit}
-          disabledStateKeys={[DISABLE_EDIT_CONFIG]}
-        />
-      </FormRow>
-    </FormList>
-  );
-}
-
-function mapStateToProps(state: ICanaryState): INameAndDescriptionStateProps {
-  if (state.selectedConfig.config) {
-    return {
-      name: state.selectedConfig.config.name,
-      description: state.selectedConfig.config.description,
-    };
-  } else {
-    return {
-      name: '',
-      description: '',
-    };
-  }
-}
-
-function mapDispatchToProps(dispatch: (action: Action & any) => void): INameAndDescriptionDispatchProps {
-  return {
-    changeName: (event: React.ChangeEvent<HTMLInputElement>) => {
-      dispatch(
-        Creators.updateConfigName({
-          name: event.target.value,
-        }),
-      );
-    },
-    changeDescription: (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-      dispatch(
-        Creators.updateConfigDescription({
-          description: event.target.value,
-        }),
-      );
-    },
-  };
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(NameAndDescription);

package/src/kayenta/edit/openConfigJsonModalButton.tsx

@@ -1,33 +0,0 @@
-import * as React from 'react';
-import { connect } from 'react-redux';
-import { Action } from 'redux';
-
-import * as Creators from '../actions/creators';
-import ConfigJsonModal from './configJsonModal';
-
-interface IOpenConfigJsonModalDispatchProps {
-  openConfigJsonModal: () => void;
-}
-
-/*
- * Button for opening the edit config JSON modal.
- */
-function OpenConfigJsonModalButton({ openConfigJsonModal }: IOpenConfigJsonModalDispatchProps) {
-  return (
-    <div>
-      <button className="passive" onClick={openConfigJsonModal}>
-        <i className="far fa-file-code" />
-        <span>JSON</span>
-      </button>
-      <ConfigJsonModal />
-    </div>
-  );
-}
-
-function mapDispatchToProps(dispatch: (action: Action & any) => void): IOpenConfigJsonModalDispatchProps {
-  return {
-    openConfigJsonModal: () => dispatch(Creators.openConfigJsonModal()),
-  };
-}
-
-export default connect(null, mapDispatchToProps)(OpenConfigJsonModalButton);

package/src/kayenta/edit/openDeleteModalButton.tsx

@@ -1,50 +0,0 @@
-import * as Creators from 'kayenta/actions/creators';
-import { CanarySettings } from 'kayenta/canary.settings';
-import { DISABLE_EDIT_CONFIG, DisableableButton } from 'kayenta/layout/disableable';
-import { ICanaryState } from 'kayenta/reducers';
-import * as React from 'react';
-import { connect } from 'react-redux';
-
-import DeleteConfigModal from './deleteModal';
-
-interface IDeleteButtonStateProps {
-  disabled: boolean;
-}
-
-interface IDeleteButtonDispatchProps {
-  openDeleteConfigModal: () => void;
-}
-
-/*
- * Button for opening the delete canary config confirmation modal.
- */
-function DeleteConfigButton({ openDeleteConfigModal, disabled }: IDeleteButtonDispatchProps & IDeleteButtonStateProps) {
-  return (
-    <div>
-      <DisableableButton
-        className="passive"
-        disabled={disabled || CanarySettings.disableConfigEdit}
-        onClick={openDeleteConfigModal}
-        disabledStateKeys={[DISABLE_EDIT_CONFIG]}
-      >
-        <i className="fa fa-trash" />
-        <span>Delete</span>
-      </DisableableButton>
-      <DeleteConfigModal />
-    </div>
-  );
-}
-
-function mapStateToProps(state: ICanaryState) {
-  return {
-    disabled: (state.selectedConfig.config && state.selectedConfig.config.isNew) || CanarySettings.disableConfigEdit,
-  };
-}
-
-function mapDispatchToProps(dispatch: any): IDeleteButtonDispatchProps {
-  return {
-    openDeleteConfigModal: () => dispatch(Creators.openDeleteConfigModal()),
-  };
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(DeleteConfigButton);

package/src/kayenta/edit/ownedBy.tsx

@@ -1,34 +0,0 @@
-import * as React from 'react';
-
-import { HelpField } from '@spinnaker/core';
-
-interface IOwnedByProps {
-  owningApplications: string[];
-  currentApplication: string;
-}
-
-const buildHelpText = (ownedBy: string[]): string => {
-  if (ownedBy.length === 0) {
-    return null;
-  } else if (ownedBy.length === 1) {
-    return `This config can only be edited from within the application <strong>${ownedBy[0]}.</strong>`;
-  } else {
-    return `This config can only be edited from within the following applications: <strong>${ownedBy.join(
-      ', ',
-    )}.</strong>`;
-  }
-};
-
-export const OwnedBy = ({ owningApplications, currentApplication }: IOwnedByProps) => {
-  if (owningApplications.length < 2 && owningApplications.includes(currentApplication)) {
-    return null;
-  }
-
-  return (
-    <span>
-      Owned by: {owningApplications.join(', ')}
-      &nbsp;
-      <HelpField placement="right" content={buildHelpText(owningApplications)} />
-    </span>
-  );
-};

package/src/kayenta/edit/save.tsx

@@ -1,19 +0,0 @@
-import classNames from 'classnames';
-import * as React from 'react';
-
-import SaveConfigButton from './saveConfigButton';
-import SaveConfigError from './saveConfigError';
-import ValidationErrors from './validationErrors';
-
-/*
- * Responsible for canary config save component layout.
- */
-export default function Save() {
-  return (
-    <div className={classNames('col-sm-12', 'text-right')}>
-      <ValidationErrors />
-      <SaveConfigError />
-      <SaveConfigButton />
-    </div>
-  );
-}

package/src/kayenta/edit/saveConfigButton.tsx

@@ -1,65 +0,0 @@
-import { CanarySettings } from 'kayenta/canary.settings';
-import * as React from 'react';
-import { connect } from 'react-redux';
-
-import { SubmitButton } from '@spinnaker/core';
-
-import * as Creators from '../actions/creators';
-import { ICanaryState } from '../reducers';
-import { AsyncRequestState } from '../reducers/asyncRequest';
-
-interface ISaveButtonStateProps {
-  saveConfigState: AsyncRequestState;
-  inSyncWithServer: boolean;
-  disable: boolean;
-}
-
-interface ISaveButtonDispatchProps {
-  saveConfig: () => void;
-}
-
-/*
- * Button for saving a canary config.
- */
-function SaveConfigButton({
-  saveConfigState,
-  inSyncWithServer,
-  saveConfig,
-  disable,
-}: ISaveButtonStateProps & ISaveButtonDispatchProps) {
-  if (inSyncWithServer && saveConfigState !== AsyncRequestState.Requesting) {
-    return (
-      <span className="btn btn-link disabled">
-        <i className="far fa-check-circle" /> In sync with server
-      </span>
-    );
-  } else {
-    return (
-      <SubmitButton
-        label="Save Changes"
-        onClick={saveConfig}
-        isDisabled={disable || CanarySettings.disableConfigEdit}
-        submitting={saveConfigState === AsyncRequestState.Requesting}
-      />
-    );
-  }
-}
-
-function mapStateToProps(state: ICanaryState): ISaveButtonStateProps {
-  const disable = !!state.selectedConfig.validationErrors.length || CanarySettings.disableConfigEdit;
-  return {
-    saveConfigState: state.selectedConfig.save.state,
-    inSyncWithServer: state.selectedConfig.isInSyncWithServer,
-    disable,
-  };
-}
-
-function mapDispatchToProps(dispatch: any): ISaveButtonDispatchProps {
-  return {
-    saveConfig: () => {
-      dispatch(Creators.saveConfig());
-    },
-  };
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(SaveConfigButton);

package/src/kayenta/edit/saveConfigError.tsx

@@ -1,59 +0,0 @@
-import classNames from 'classnames';
-import * as React from 'react';
-import { connect } from 'react-redux';
-
-import * as Creators from '../actions/creators';
-import { ICanaryState } from '../reducers';
-import { AsyncRequestState } from '../reducers/asyncRequest';
-
-interface ISaveErrorStateProps {
-  saveConfigState: AsyncRequestState;
-  saveConfigErrorMessage: string;
-}
-
-interface ISaveErrorDispatchProps {
-  dismissError: () => void;
-}
-
-/*
- * Renders canary config save error.
- */
-function SaveConfigError({
-  saveConfigState,
-  saveConfigErrorMessage,
-  dismissError,
-}: ISaveErrorStateProps & ISaveErrorDispatchProps) {
-  return (
-    saveConfigState === AsyncRequestState.Failed && (
-      <span className={classNames('alert', 'alert-danger')}>
-        {buildErrorMessage(saveConfigErrorMessage)}
-        <a className={classNames('alert-dismiss', 'clickable')} onClick={dismissError}>
-          {' '}
-          [dismiss]
-        </a>
-      </span>
-    )
-  );
-}
-
-function buildErrorMessage(saveConfigErrorMessage: string): string {
-  const message = 'There was an error saving your config';
-  return saveConfigErrorMessage ? message + `: ${saveConfigErrorMessage}.` : message + '.';
-}
-
-function mapStateToProps(state: ICanaryState): ISaveErrorStateProps {
-  return {
-    saveConfigState: state.selectedConfig.save.state,
-    saveConfigErrorMessage: state.selectedConfig.save.error,
-  };
-}
-
-function mapDispatchToProps(dispatch: any): ISaveErrorDispatchProps {
-  return {
-    dismissError: () => {
-      dispatch(Creators.dismissSaveConfigError());
-    },
-  };
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(SaveConfigError);

package/src/kayenta/edit/scoring.tsx

@@ -1,35 +0,0 @@
-import TitledSubsection from 'kayenta/layout/titledSubsection';
-import * as React from 'react';
-import { connect } from 'react-redux';
-
-import GroupWeights from './groupWeights';
-import JudgeSelect, { JudgeSelectRenderState } from './judgeSelect';
-import FormList from '../layout/formList';
-import { ICanaryState } from '../reducers/index';
-
-interface IScoringStateProps {
-  renderJudgeSelect: boolean;
-}
-
-function Scoring({ renderJudgeSelect }: IScoringStateProps) {
-  return (
-    <FormList>
-      {renderJudgeSelect && (
-        <TitledSubsection title="Judge">
-          <JudgeSelect />
-        </TitledSubsection>
-      )}
-      <TitledSubsection title="Metric Group Weights" helpKey="canary.config.metricGroupWeights">
-        <GroupWeights />
-      </TitledSubsection>
-    </FormList>
-  );
-}
-
-function mapStateToProps(state: ICanaryState) {
-  return {
-    renderJudgeSelect: state.selectedConfig.judge.renderState !== JudgeSelectRenderState.None,
-  };
-}
-
-export default connect(mapStateToProps)(Scoring);

package/src/kayenta/edit/selectConfig.tsx

@@ -1,10 +0,0 @@
-import * as React from 'react';
-import CenteredDetail from '../layout/centeredDetail';
-
-export default function SelectConfig() {
-  return (
-    <CenteredDetail>
-      <h3 className="heading-3">Click a configuration to edit.</h3>
-    </CenteredDetail>
-  );
-}

package/src/kayenta/edit/validationErrors.tsx

@@ -1,39 +0,0 @@
-import * as React from 'react';
-import { connect } from 'react-redux';
-import { HoverablePopover } from '@spinnaker/core';
-import { ICanaryState } from '../reducers/index';
-
-interface IConfigValidationErrorsStateProps {
-  errors: string[];
-}
-
-const ConfigValidationErrors = ({ errors }: IConfigValidationErrorsStateProps) => {
-  if (!errors || !errors.length) {
-    return null;
-  }
-
-  const template = (
-    <section>
-      <p>The following errors may prevent this config from working properly:</p>
-      <ul>
-        {errors.map((e) => (
-          <li key={e}>{e}</li>
-        ))}
-      </ul>
-    </section>
-  );
-
-  return (
-    <HoverablePopover placement={'left'} template={template}>
-      <button className="btn btn-link">
-        <i className="fa fa-exclamation-triangle" />
-      </button>
-    </HoverablePopover>
-  );
-};
-
-const mapStateToProps = (state: ICanaryState): IConfigValidationErrorsStateProps => ({
-  errors: state.selectedConfig.validationErrors.map((e) => e.message),
-});
-
-export default connect(mapStateToProps)(ConfigValidationErrors);

package/src/kayenta/layout/addNewButton.tsx

@@ -1,20 +0,0 @@
-import classNames from 'classnames';
-import * as React from 'react';
-
-import { DISABLE_EDIT_CONFIG, DisableableButton } from './disableable';
-
-interface IAddNewButtonProps {
-  onClick: () => void;
-  className?: string;
-  label?: string;
-}
-
-export default ({ onClick, className, label }: IAddNewButtonProps) => (
-  <DisableableButton
-    onClick={onClick}
-    disabledStateKeys={[DISABLE_EDIT_CONFIG]}
-    className={classNames('add-new', 'btn', 'btn-block', 'btn-sm', className)}
-  >
-    <span className="glyphicon glyphicon-plus-sign" /> {label || 'Add new'}
-  </DisableableButton>
-);

package/src/kayenta/layout/centeredDetail.tsx

@@ -1,13 +0,0 @@
-import * as React from 'react';
-
-export interface ICenteredDetailProps {
-  children: JSX.Element;
-}
-
-export default function CenteredDetail({ children }: ICenteredDetailProps) {
-  return (
-    <div className="row">
-      <div className="col-sm-offset-4">{children}</div>
-    </div>
-  );
-}

package/src/kayenta/layout/deleteButton.tsx

@@ -1,11 +0,0 @@
-import * as React from 'react';
-
-export interface IDeleteButtonProps {
-  onClick: () => void;
-}
-
-export default ({ onClick }: IDeleteButtonProps) => (
-  <a className="clickable" onClick={onClick}>
-    <span className="glyphicon glyphicon-trash" />
-  </a>
-);

package/src/kayenta/layout/disableable.tsx

@@ -1,87 +0,0 @@
-import classNames from 'classnames';
-import { ICanaryState } from 'kayenta/reducers';
-import { get, omit } from 'lodash';
-import * as React from 'react';
-import { Typeahead, TypeaheadProps } from 'react-bootstrap-typeahead';
-import { connect } from 'react-redux';
-import Select, { ReactSelectProps } from 'react-select';
-
-// Well-known keys that flag if a component should be disabled.
-export const DISABLE_EDIT_CONFIG = 'app.disableConfigEdit';
-
-interface IDisableable {
-  disabled?: boolean;
-}
-
-interface IDisableableStateProps {
-  disabledBecauseOfState: boolean;
-}
-
-interface IDisableableOwnProps {
-  disabledStateKeys: string[];
-}
-
-const mapStateToProps = (state: ICanaryState, ownProps: IDisableableOwnProps) => ({
-  disabledBecauseOfState: (ownProps.disabledStateKeys || []).some((key) => get<boolean>(state, key, false)),
-});
-
-// A component wrapped in `disableable` is disabled if one of the keys passed
-// through `disabledStateKeys` returns true when checked against the Redux store.
-function disableable<T extends IDisableable>(Component: React.SFC<T>) {
-  return connect(mapStateToProps)((props: T & IDisableable & IDisableableStateProps) => {
-    const { disabled, disabledBecauseOfState } = props;
-
-    // Would use object spread except for weird interaction with TS generics.
-    const otherProps: T = omit(props, ['disabled', 'disabledBecauseOfState', 'disabledStateKeys', 'dispatch']);
-    return <Component {...otherProps} disabled={disabled || disabledBecauseOfState} />;
-  });
-}
-
-type IDisableableButtonProps = React.DetailedHTMLProps<
-  React.ButtonHTMLAttributes<HTMLButtonElement>,
-  HTMLButtonElement
->;
-export const DisableableButton = disableable<IDisableableButtonProps>((props) => {
-  const { children, ...otherProps } = props;
-  return <button {...otherProps}>{children}</button>;
-});
-
-type IDisableableInputProps = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
-export const DisableableInput = disableable<IDisableableInputProps>((props) => {
-  const { className, ...inputProps } = props;
-  return (
-    <input
-      {...inputProps}
-      className={classNames(className, {
-        'form-control': !['radio', 'checkbox'].includes(inputProps.type),
-        'input-sm': !['radio', 'checkbox'].includes(inputProps.type),
-      })}
-    />
-  );
-});
-
-export const DisableableReactSelect = disableable<ReactSelectProps>((props) => {
-  const { children, ...selectProps } = props;
-  return <Select {...selectProps}>{children}</Select>;
-});
-
-export const DisableableReactTypeahead = disableable<TypeaheadProps<any>>((props) => {
-  const { children, ...selectProps } = props;
-  return <Typeahead {...selectProps}>{children}</Typeahead>;
-});
-
-type IDisableableSelectProps = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>;
-export const DisableableSelect = disableable<IDisableableSelectProps>((props) => {
-  const { children, ...selectProps } = props;
-  return <select {...selectProps}>{children}</select>;
-});
-
-// TODO(dpeach): why do I have to type `rows` explicitly here?
-type IDisableableTextareaProps = React.DetailedHTMLProps<
-  React.InputHTMLAttributes<HTMLTextAreaElement>,
-  HTMLTextAreaElement
-> & { rows?: number };
-export const DisableableTextarea = disableable<IDisableableTextareaProps>((props) => {
-  const { className, ...textareaProps } = props;
-  return <textarea className={classNames('form-control', 'input-sm', className)} {...textareaProps} />;
-});

package/src/kayenta/layout/formList.tsx

@@ -1,26 +0,0 @@
-import * as React from 'react';
-
-export interface IFormListProps {
-  children: JSX.Element[] | JSX.Element;
-}
-
-/*
- * Mostly exists to centralize styles for form components.
- * */
-export default function FormList({ children }: IFormListProps) {
-  return (
-    <ul className="list-group">
-      {React.Children.map(
-        children,
-        (c) =>
-          c && (
-            <li className="list-unstyled">
-              <form role="form" className="form-horizontal container-fluid">
-                <div className="col-md-12">{c}</div>
-              </form>
-            </li>
-          ),
-      )}
-    </ul>
-  );
-}

package/src/kayenta/layout/formRow.tsx

@@ -1,36 +0,0 @@
-import classNames from 'classnames';
-import * as React from 'react';
-
-import { HelpField, ValidationMessage } from '@spinnaker/core';
-
-export interface IFormRowProps {
-  label?: string | React.ReactFragment;
-  helpId?: string;
-  children?: any;
-  checkbox?: boolean;
-  error?: string;
-  warning?: string;
-  inputOnly?: boolean;
-}
-
-export default function FormRow({ label, helpId, children, checkbox, error, warning, inputOnly }: IFormRowProps) {
-  const style: any = {};
-  if (!inputOnly) {
-    style.marginTop = '5px';
-  }
-  if (checkbox) {
-    style.marginBottom = '0';
-  }
-  return (
-    <div className="form-group row">
-      <label className="col-sm-2 control-label sm-label-right">
-        {label} {helpId && <HelpField id={helpId} />}
-      </label>
-      <div className={classNames('col-sm-10', { checkbox })} style={style}>
-        {children}
-        {error && <ValidationMessage type="error" message={error} />}
-        {warning && <ValidationMessage type="warning" message={warning} />}
-      </div>
-    </div>
-  );
-}

package/src/kayenta/layout/formattedDate.tsx

@@ -1,14 +0,0 @@
-import * as React from 'react';
-import { timestamp } from '@spinnaker/core';
-
-export interface IDateLabelProps {
-  dateIso: string;
-}
-
-export default function FormattedDate({ dateIso }: IDateLabelProps) {
-  if (dateIso) {
-    return <span>{timestamp(new Date(dateIso).getTime())}</span>;
-  } else {
-    return <span>N/A</span>;
-  }
-}

package/src/kayenta/layout/keyValueList.less

@@ -1,20 +0,0 @@
-.kv-pair-item {
-  display: flex;
-  align-items: center;
-
-  .kv-pair-item-section {
-    display: flex;
-    margin-right: 5px;
-    margin-bottom: 7px;
-
-    .kv-pair-item-section-label-wrapper {
-      display: flex;
-      flex-flow: column;
-      justify-content: center;
-    }
-
-    .kv-pair-item-section-input {
-      margin-left: 5px;
-    }
-  }
-}