@spinnaker/kayenta 0.0.0-main-2

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

package/src/kayenta/layout/keyValueList.less

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

package/src/kayenta/layout/keyValueList.tsx

@@ -0,0 +1,114 @@
+import classNames from 'classnames';
+import * as React from 'react';
+
+import { IKayentaAction } from '../actions/creators';
+import AddNewButton from './addNewButton';
+import DeleteButton from './deleteButton';
+import { DISABLE_EDIT_CONFIG, DisableableInput } from './disableable';
+
+import './keyValueList.less';
+
+export enum KeyValueListAction {
+  ADD,
+  DELETE,
+  KEY_EDIT,
+  VALUE_EDIT,
+}
+
+export interface IKeyValuePair {
+  key: string;
+  value: string;
+}
+
+export interface IUpdateKeyValueListPayload {
+  type: KeyValueListAction;
+  index?: number;
+  key?: string;
+  value?: string;
+}
+
+export const updateListReducer = (defaultValue = { key: '', value: '' }) => (
+  state: IKeyValuePair[],
+  action: IKayentaAction<IUpdateKeyValueListPayload>,
+) => {
+  const { index, value, type } = action.payload;
+  switch (type) {
+    case KeyValueListAction.ADD:
+      return state.concat(defaultValue);
+    case KeyValueListAction.DELETE:
+      return [...state.slice(0, index), ...state.slice(index + 1)];
+    case KeyValueListAction.KEY_EDIT:
+      return [...state.slice(0, index), { ...state[index], key: value }, ...state.slice(index + 1)];
+    case KeyValueListAction.VALUE_EDIT:
+      return [...state.slice(0, index), { ...state[index], value }, ...state.slice(index + 1)];
+  }
+};
+
+export interface IKeyValueListProps {
+  list: IKeyValuePair[];
+  className?: string;
+  actionCreator: (action: IUpdateKeyValueListPayload) => void;
+}
+
+export default function KeyValueList({ list, className, actionCreator }: IKeyValueListProps) {
+  const onKeyChange = (i: number) => (event: any) =>
+    actionCreator({
+      type: KeyValueListAction.KEY_EDIT,
+      index: i,
+      value: event.target.value,
+    });
+
+  const onValueChange = (i: number) => (event: any) =>
+    actionCreator({
+      type: KeyValueListAction.VALUE_EDIT,
+      index: i,
+      value: event.target.value,
+    });
+
+  const deleteValue = (i: number) => () =>
+    actionCreator({
+      type: KeyValueListAction.DELETE,
+      index: i,
+    });
+
+  const addValue = () =>
+    actionCreator({
+      type: KeyValueListAction.ADD,
+    });
+
+  return (
+    <section className={classNames('kv-pair-list', className)}>
+      {list.map((kvPair, index) => {
+        const { key, value } = kvPair;
+        return (
+          <div key={index} className="kv-pair-item">
+            <div className="kv-pair-item-section">
+              <div className="kv-pair-item-section-label-wrapper">
+                <div className="kv-pair-item-section-label">Key</div>
+              </div>
+              <div className="kv-pair-item-section-input">
+                <DisableableInput value={key} onChange={onKeyChange(index)} disabledStateKeys={[DISABLE_EDIT_CONFIG]} />
+              </div>
+            </div>
+            <div className="kv-pair-item-section">
+              <div className="kv-pair-item-section-label-wrapper">
+                <div className="kv-pair-item-section-label">Value</div>
+              </div>
+              <div className="kv-pair-item-section-input">
+                <DisableableInput
+                  value={value}
+                  onChange={onValueChange(index)}
+                  disabledStateKeys={[DISABLE_EDIT_CONFIG]}
+                />
+              </div>
+            </div>
+            <div className="kv-pair-item-section">
+              <DeleteButton onClick={deleteValue(index)} />
+            </div>
+          </div>
+        );
+      })}
+      <AddNewButton onClick={addValue} />
+    </section>
+  );
+}

package/src/kayenta/layout/list.less

@@ -0,0 +1,9 @@
+.kayenta-list {
+  a.clickable {
+    margin: 5px 0 0 10px;
+  }
+
+  input.input-sm {
+    width: 93%;
+  }
+}

package/src/kayenta/layout/list.spec.tsx

@@ -0,0 +1,83 @@
+import { mount } from 'enzyme';
+import { IKayentaAction } from 'kayenta/actions/creators';
+import * as React from 'react';
+import { Provider } from 'react-redux';
+import { createStore } from 'redux';
+
+import { IUpdateListPayload, List, ListAction, updateListReducer } from './list';
+import { rootReducer } from '../reducers';
+
+describe('Reducer: updateListReducer', () => {
+  const createAction = (payload: IUpdateListPayload): IKayentaAction<IUpdateListPayload> => ({
+    type: 'update_list',
+    payload,
+  });
+
+  const reducer = updateListReducer('defaultValue');
+
+  it('adds', () => {
+    expect(
+      reducer(
+        [],
+        createAction({
+          type: ListAction.Add,
+        }),
+      ),
+    ).toEqual(['defaultValue']);
+  });
+
+  it('deletes', () => {
+    expect(
+      reducer(
+        ['toRemain', 'toRemove'],
+        createAction({
+          type: ListAction.Delete,
+          index: 1,
+        }),
+      ),
+    ).toEqual(['toRemain']);
+  });
+
+  it('edits', () => {
+    expect(
+      reducer(
+        ['unedited', 'beforeEdit'],
+        createAction({
+          type: ListAction.Edit,
+          index: 1,
+          value: 'afterEdit',
+        }),
+      ),
+    ).toEqual(['unedited', 'afterEdit']);
+  });
+});
+
+describe('Component: List', () => {
+  it('renders a list', () => {
+    const component = mount(
+      <Provider store={createStore(rootReducer)}>
+        <List list={['a', 'b', 'c']} actionCreator={() => null} />
+      </Provider>,
+    );
+
+    expect(component.find('input').length).toEqual(3);
+  });
+
+  it('emits the correct value and index on update', () => {
+    const spy = jest.fn();
+    const component = mount(
+      <Provider store={createStore(rootReducer)}>
+        <List list={['a', 'b', 'c']} actionCreator={spy} />
+      </Provider>,
+    );
+
+    const input = component.find('input').at(1);
+    input.simulate('change', { target: { value: 'newValue' } });
+
+    expect(spy).toHaveBeenCalledWith({
+      type: ListAction.Edit,
+      index: 1,
+      value: 'newValue',
+    });
+  });
+});