@spinnaker/kayenta 0.0.0-main-2

package/src/kayenta/edit/judgeSelect.tsx

@@ -0,0 +1,82 @@
+import * as Creators from 'kayenta/actions/creators';
+import { CanarySettings } from 'kayenta/canary.settings';
+import { DISABLE_EDIT_CONFIG, DisableableInput, DisableableReactSelect } from 'kayenta/layout/disableable';
+import FormRow from 'kayenta/layout/formRow';
+import { ICanaryState } from 'kayenta/reducers';
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { Option } from 'react-select';
+import { Action } from 'redux';
+
+interface IJudgeSelectStateProps {
+  judgeOptions: Option[];
+  selectedJudge: string;
+  renderState: JudgeSelectRenderState;
+}
+
+interface IJudgeSelectDispatchProps {
+  handleJudgeSelect: (option: Option) => void;
+}
+
+export enum JudgeSelectRenderState {
+  Multiple,
+  Single,
+  None,
+}
+
+/*
+ * Select field for picking canary judge.
+ */
+function JudgeSelect({
+  judgeOptions,
+  selectedJudge,
+  handleJudgeSelect,
+  renderState,
+}: IJudgeSelectStateProps & IJudgeSelectDispatchProps) {
+  switch (renderState) {
+    case JudgeSelectRenderState.Multiple:
+      return (
+        <FormRow>
+          <DisableableReactSelect
+            value={selectedJudge}
+            options={judgeOptions}
+            clearable={false}
+            onChange={handleJudgeSelect}
+            disabled={CanarySettings.disableConfigEdit}
+            disabledStateKeys={[DISABLE_EDIT_CONFIG]}
+          />
+        </FormRow>
+      );
+    case JudgeSelectRenderState.Single:
+      return (
+        <FormRow>
+          <DisableableInput
+            type="text"
+            value={selectedJudge}
+            disabled={true}
+            disabledStateKeys={[DISABLE_EDIT_CONFIG]}
+          />
+        </FormRow>
+      );
+    case JudgeSelectRenderState.None:
+      return null;
+  }
+}
+
+function mapStateToProps(state: ICanaryState): IJudgeSelectStateProps {
+  return {
+    judgeOptions: (state.data.judges || []).map((judge) => ({ value: judge.name, label: judge.name })),
+    selectedJudge: state.selectedConfig.judge.judgeConfig.name,
+    renderState: state.selectedConfig.judge.renderState,
+  };
+}
+
+function mapDispatchToProps(dispatch: (action: Action & any) => void): IJudgeSelectDispatchProps {
+  return {
+    handleJudgeSelect: (option: Option) => {
+      dispatch(Creators.selectJudgeName({ judge: { name: option.value as string } }));
+    },
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(JudgeSelect);

package/src/kayenta/edit/metricConfigurerDelegator.tsx

@@ -0,0 +1,30 @@
+import { ICanaryMetricConfig } from 'kayenta/domain/ICanaryConfig';
+import metricStoreConfigService from 'kayenta/metricStore/metricStoreConfig.service';
+import { ICanaryState } from 'kayenta/reducers';
+import * as React from 'react';
+import { connect } from 'react-redux';
+
+interface IMetricConfigurerDelegatorStateProps {
+  editingMetric: ICanaryMetricConfig;
+}
+
+/*
+ * Should find and render the appropriate metric configurer for a given metric store.
+ * */
+function MetricConfigurerDelegator({ editingMetric }: IMetricConfigurerDelegatorStateProps) {
+  const config = metricStoreConfigService.getDelegate(editingMetric.query.type);
+  if (config && config.metricConfigurer) {
+    const MetricConfigurer = config.metricConfigurer;
+    return <MetricConfigurer />;
+  } else {
+    return <p>Metric configuration has not been implemented for {editingMetric.query.type}.</p>;
+  }
+}
+
+function mapStateToProps(state: ICanaryState): IMetricConfigurerDelegatorStateProps {
+  return {
+    editingMetric: state.selectedConfig.editingMetric,
+  };
+}
+
+export default connect(mapStateToProps)(MetricConfigurerDelegator);

package/src/kayenta/edit/metricList.less

@@ -0,0 +1,21 @@
+.metrics-action-buttons {
+  .link {
+    padding: 0 12px;
+  }
+}
+
+.metric-filter-options {
+  label {
+    font-weight: 600;
+    margin: 6px;
+    padding: 6px 12px;
+    border: 1px solid var(--color-divider);
+  }
+}
+
+.metric-fail-on-icon {
+  color: var(--color-warning);
+  &.critical {
+    color: var(--color-danger);
+  }
+}

package/src/kayenta/edit/metricList.tsx

@@ -0,0 +1,215 @@
+import classNames from 'classnames';
+import * as Creators from 'kayenta/actions/creators';
+import { CanarySettings } from 'kayenta/canary.settings';
+import { ICanaryMetricConfig } from 'kayenta/domain';
+import { DISABLE_EDIT_CONFIG, DisableableButton } from 'kayenta/layout/disableable';
+import { ITableColumn, NativeTable } from 'kayenta/layout/table';
+import { ICanaryState } from 'kayenta/reducers';
+import { cloneDeep } from 'lodash';
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { Action } from 'redux';
+
+import { Tooltip } from '@spinnaker/core';
+
+import ChangeMetricGroupModal from './changeMetricGroupModal';
+
+import './metricList.less';
+
+interface IMetricListStateProps {
+  selectedGroup: string;
+  metrics: ICanaryMetricConfig[];
+  showGroups: boolean;
+  changingGroupMetric: ICanaryMetricConfig;
+  groupList: string[];
+  metricStore: string;
+  disableEdit: boolean;
+}
+
+interface IMetricListDispatchProps {
+  addMetric: (event: any) => void;
+  editMetric: (event: any) => void;
+  copyMetric: (metric: ICanaryMetricConfig) => void;
+  removeMetric: (event: any) => void;
+  openChangeMetricGroupModal: (event: any) => void;
+}
+
+function FailOn({ metric }: { metric: ICanaryMetricConfig }) {
+  const direction = metric.analysisConfigurations?.canary?.direction;
+  const isCritical = metric.analysisConfigurations?.canary?.critical;
+  const tooltipSuffix = isCritical ? '(critical — if this metric fails, the entire canary will fail)' : '';
+  const classes = classNames('metric-fail-on-icon', 'fas', 'sp-margin-xs-right', { critical: isCritical });
+  if (direction === 'decrease') {
+    return (
+      <Tooltip value={`decrease ${tooltipSuffix}`}>
+        <i className={`fa-caret-square-down ${classes}`} />
+      </Tooltip>
+    );
+  }
+  if (direction === 'increase') {
+    return (
+      <Tooltip value={`increase ${tooltipSuffix}`}>
+        <i className={`fa-caret-square-up ${classes}`} />
+      </Tooltip>
+    );
+  }
+  return (
+    <Tooltip value={`increase OR decrease ${tooltipSuffix}`}>
+      <span>
+        <i className={`fa-caret-square-down ${classes}`} />
+        <i className={`fa-caret-square-up ${classes}`} />
+      </span>
+    </Tooltip>
+  );
+}
+
+/*
+ * Configures an entire list of metrics.
+ */
+function MetricList({
+  metrics,
+  groupList,
+  selectedGroup,
+  showGroups,
+  addMetric,
+  editMetric,
+  copyMetric,
+  removeMetric,
+  changingGroupMetric,
+  openChangeMetricGroupModal,
+  metricStore,
+  disableEdit,
+}: IMetricListStateProps & IMetricListDispatchProps) {
+  const columns: Array<ITableColumn<ICanaryMetricConfig>> = [
+    {
+      label: 'Metric Name',
+      getContent: (metric) => <span>{metric.name || '(new)'}</span>,
+    },
+    {
+      label: 'Fail On',
+      getContent: (metric) => <FailOn metric={metric} />,
+    },
+    {
+      label: 'Groups',
+      getContent: (metric) => <span>{metric.groups.join(', ')}</span>,
+      hide: () => !showGroups,
+    },
+    {
+      getContent: (metric) => (
+        <div className="horizontal pull-right metrics-action-buttons">
+          <button className="link" data-id={metric.id} onClick={editMetric}>
+            {disableEdit || CanarySettings.disableConfigEdit ? 'View' : 'Edit'}
+          </button>
+          <button
+            className="link"
+            data-id={metric.id}
+            disabled={disableEdit || CanarySettings.disableConfigEdit}
+            onClick={openChangeMetricGroupModal}
+          >
+            Move Group
+          </button>
+          <button
+            className="link"
+            data-id={metric.id}
+            disabled={disableEdit || CanarySettings.disableConfigEdit}
+            onClick={() => copyMetric(metric)}
+          >
+            Copy
+          </button>
+          <button
+            className="link"
+            data-id={metric.id}
+            disabled={disableEdit || CanarySettings.disableConfigEdit}
+            onClick={removeMetric}
+          >
+            Delete
+          </button>
+        </div>
+      ),
+    },
+  ];
+
+  return (
+    <>
+      <NativeTable columns={columns} rows={metrics} rowKey={(metric) => metric.id} className="header-white" />
+      {!metrics.length && selectedGroup ? (
+        <p>
+          This group is empty! The group will be not be present the next time the config is loaded unless it is saved
+          with at least one metric in it.
+        </p>
+      ) : null}
+      {changingGroupMetric && <ChangeMetricGroupModal metric={changingGroupMetric} />}
+      <DisableableButton
+        className="passive self-left"
+        data-group={selectedGroup}
+        data-default={groupList[0]}
+        data-metric-store={metricStore}
+        onClick={addMetric}
+        disabled={CanarySettings.disableConfigEdit}
+        disabledStateKeys={[DISABLE_EDIT_CONFIG]}
+      >
+        Add Metric
+      </DisableableButton>
+    </>
+  );
+}
+
+function mapStateToProps(state: ICanaryState): IMetricListStateProps {
+  const selectedGroup = state.selectedConfig.group.selected;
+  const metricList = state.selectedConfig.metricList;
+
+  const filter = selectedGroup ? (metric: ICanaryMetricConfig) => metric.groups.includes(selectedGroup) : () => true;
+  return {
+    selectedGroup,
+    groupList: state.selectedConfig.group.list,
+    metrics: metricList.filter(filter),
+    showGroups: !selectedGroup || metricList.filter(filter).some((metric) => metric.groups.length > 1),
+    changingGroupMetric: state.selectedConfig.metricList.find(
+      (m) => m.id === state.selectedConfig.changeMetricGroup.metric,
+    ),
+    metricStore: state.selectedConfig.selectedStore,
+    disableEdit: state.app.disableConfigEdit || CanarySettings.disableConfigEdit,
+  };
+}
+
+function mapDispatchToProps(dispatch: (action: Action & any) => void): IMetricListDispatchProps {
+  return {
+    addMetric: (event: any) => {
+      const group = event.target.dataset.group || event.target.dataset.default;
+      dispatch(
+        Creators.addMetric({
+          metric: {
+            // TODO: need to block saving an invalid name
+            // TODO: for Atlas metrics, attempt to gather name when query changes
+            id: '[new]',
+            analysisConfigurations: {},
+            name: '',
+            query: {
+              type: event.target.dataset.metricStore,
+              serviceType: event.target.dataset.metricStore,
+            },
+            groups: group ? [group] : [],
+            scopeName: 'default', // scopeName always defaults to `default` and is not configurable from the UI
+            isNew: true,
+          },
+        }),
+      );
+    },
+    copyMetric: (metric: ICanaryMetricConfig) => {
+      const metricCopy: ICanaryMetricConfig = cloneDeep(metric);
+      metricCopy.id = '[new]';
+      metricCopy.isNew = true;
+      metricCopy.name = '';
+      dispatch(Creators.addMetric({ metric: metricCopy }));
+    },
+    editMetric: (event: any) => {
+      dispatch(Creators.editMetricBegin({ id: event.target.dataset.id }));
+    },
+    removeMetric: (event: any) => {
+      dispatch(Creators.removeMetric({ id: event.target.dataset.id }));
+    },
+    openChangeMetricGroupModal: (event: any) => dispatch(Creators.changeMetricGroup({ id: event.target.dataset.id })),
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(MetricList);

package/src/kayenta/edit/metricStoreSelector.tsx

@@ -0,0 +1,66 @@
+import * as Creators from 'kayenta/actions/creators';
+import { CanarySettings } from 'kayenta/canary.settings';
+import { KayentaAccountType } from 'kayenta/domain';
+import { DISABLE_EDIT_CONFIG, DisableableSelect } from 'kayenta/layout/disableable';
+import FormRow from 'kayenta/layout/formRow';
+import { ICanaryState } from 'kayenta/reducers';
+import { chain } from 'lodash';
+import * as React from 'react';
+import { connect, Dispatch } from 'react-redux';
+
+interface IMetricStoreSelectorStateProps {
+  stores: string[];
+  selectedStore: string;
+}
+
+interface IMetricStoreSelectorDispatchProps {
+  select: (event: any) => void;
+}
+
+const MetricStoreSelector = ({
+  stores,
+  selectedStore,
+  select,
+}: IMetricStoreSelectorDispatchProps & IMetricStoreSelectorStateProps) => {
+  if (stores.length < 2) {
+    return null;
+  }
+
+  return (
+    <FormRow label="Metric Store" inputOnly={true}>
+      <DisableableSelect
+        value={selectedStore || ''}
+        onChange={select}
+        className="form-control input-sm"
+        disabled={CanarySettings.disableConfigEdit}
+        disabledStateKeys={[DISABLE_EDIT_CONFIG]}
+      >
+        {stores.map((s) => (
+          <option key={s} value={s}>
+            {s}
+          </option>
+        ))}
+      </DisableableSelect>
+    </FormRow>
+  );
+};
+
+const mapStateToProps = (state: ICanaryState): IMetricStoreSelectorStateProps => {
+  return {
+    stores: chain(state.data.kayentaAccounts.data)
+      .filter((account) => account.supportedTypes.includes(KayentaAccountType.MetricsStore))
+      .map((account) => account.metricsStoreType || account.type)
+      .uniq()
+      .sort()
+      .valueOf(),
+    selectedStore: state.selectedConfig.selectedStore,
+  };
+};
+
+const mapDispatchToProps = (dispatch: Dispatch<ICanaryState>): IMetricStoreSelectorDispatchProps => {
+  return {
+    select: (event: any) => dispatch(Creators.selectMetricStore({ store: event.target.value })),
+  };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(MetricStoreSelector);

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>
+  );
+}