@spinnaker/kayenta 0.0.0-2025.1-0

package/src/kayenta/edit/nameAndDescription.tsx

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,39 @@
+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/index.ts

@@ -0,0 +1,6 @@
+export * from './actions';
+export * from './domain';
+export * from './metricStore';
+export * from './selectors';
+export * from './layout';
+export * from './reducers';

package/src/kayenta/layout/addNewButton.tsx

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

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

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

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

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

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

@@ -0,0 +1,14 @@
+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/index.ts

@@ -0,0 +1,2 @@
+export { default as FormRow } from './formRow';
+export * from './disableable';