@spinnaker/kayenta 0.0.0-main-2

package/src/kayenta/canary.less

@@ -0,0 +1,168 @@
+.kayenta {
+  width: 100%;
+
+  button {
+    &[disabled] {
+      cursor: not-allowed;
+      opacity: 0.4;
+    }
+  }
+
+  &.kayenta-root {
+    overflow: hidden;
+  }
+
+  .spinner {
+    position: inherit;
+  }
+
+  .list-detail {
+    > .col-md-2,
+    .col-md-10 {
+      padding-left: 0;
+      padding-right: 0;
+    }
+  }
+
+  .config-list {
+    ul {
+      max-height: calc(~'70vh - 44px'); // i.e., minus the footer.
+      overflow: auto;
+      @media screen and (max-height: 1000px) {
+        max-height: 55vh;
+      }
+
+      @media screen and (max-height: 700px) {
+        max-height: 45vh;
+      }
+    }
+  }
+
+  .config-detail {
+    padding: 0 1rem 1rem;
+    margin-bottom: 40px;
+    overflow-y: auto;
+    .config-detail-header {
+      padding: 5px 15px 7px 0;
+      .heading-1 {
+        margin: 3px 0 0 0;
+      }
+    }
+
+    .config-detail-edit-warning {
+      padding: 12px;
+      margin-bottom: 12px;
+      i.fa {
+        color: var(--color-notice);
+        font-size: 32px;
+      }
+    }
+
+    .contents .native-table-header {
+      padding-top: 10px;
+    }
+  }
+
+  .group-tabs {
+    .fas.fa-pencil-alt {
+      padding-left: 1rem;
+      font-size: smaller;
+      &.disabled {
+        color: var(--color-accessory);
+      }
+    }
+
+    .tabs-basic {
+      input {
+        text-transform: none;
+        font-weight: normal;
+      }
+    }
+  }
+
+  .table-header {
+    &.sticky-header {
+      background-color: var(--color-alabaster);
+    }
+    h6 {
+      font-weight: 600;
+    }
+  }
+
+  .table-row {
+    > div,
+    > td {
+      padding: 0.8rem 0;
+    }
+
+    i {
+      &.fa,
+      &.far {
+        padding: 0 0.5rem;
+        cursor: pointer;
+        &.fa-edit,
+        &.fa-folder {
+          font-weight: 100;
+        }
+        &.fa-folder {
+          margin-top: 0.2rem;
+        }
+        &.fa-trash {
+          font-size: small;
+          margin-top: 0.1rem;
+        }
+      }
+    }
+
+    // This is the wrapper around the change metric group folder icon.
+    g {
+      margin-top: -0.25rem;
+      margin-right: 0.1rem;
+    }
+  }
+
+  .table-header,
+  .table-row {
+    border-bottom: 1px solid var(--color-divider);
+    h6 {
+      margin-bottom: 5px;
+    }
+    &.background-white {
+      background-color: var(--color-white);
+    }
+    &.selected {
+      background-color: var(--color-accent-g2);
+    }
+  }
+
+  // As of 9/31/2018 this must be applied to a <th> for sticky table headers to work (not a <tr>/<thead>)
+  // https://bugs.chromium.org/p/chromium/issues/detail?id=702927
+  .native-table-header {
+    position: sticky;
+    top: 0;
+    background-color: var(--color-alabaster);
+    // Borders don't work w/ position: sticky in this case
+    box-shadow: 0 1px 0 var(--color-divider);
+  }
+
+  .metric-list {
+    top: -10px;
+  }
+
+  .header-transparent {
+    .native-table-header {
+      background-color: transparent;
+    }
+  }
+
+  .header-white {
+    .native-table-header {
+      background-color: white;
+    }
+  }
+
+  // Allow children of flex-1 with overflow of scroll or auto to scroll correctly in firefox
+  .flex-1 {
+    min-height: 0;
+  }
+}

package/src/kayenta/canary.settings.ts

@@ -0,0 +1,26 @@
+import { SETTINGS } from '@spinnaker/core';
+
+export interface ICanarySettings {
+  showAllConfigs: boolean;
+  reduxLogger: boolean;
+  metricsAccountName: string;
+  storageAccountName: string;
+  defaultJudge: string;
+  metricStore: string;
+  stagesEnabled: boolean;
+  stageName: string;
+  executionsCountOptions: number[];
+  defaultExecutionCount: number;
+  stageDescription: string;
+  featureDisabled: boolean;
+  optInAll: boolean;
+  atlasWebComponentsUrl: string;
+  atlasWebComponentsPolyfillUrl: string;
+  atlasGraphBaseUrl: string;
+  templatesEnabled: boolean;
+  manualAnalysisEnabled: boolean;
+  disableConfigEdit: boolean;
+  legacySiteLocalFieldsEnabled: boolean; // legacy fields for backwards-compat with old systems, no long term support planned
+}
+
+export const CanarySettings: ICanarySettings = SETTINGS.canary || { featureDisabled: true };

package/src/kayenta/canary.tsx

@@ -0,0 +1,67 @@
+import { UIView } from '@uirouter/react';
+import * as React from 'react';
+import { Provider, Store } from 'react-redux';
+import { applyMiddleware, createStore } from 'redux';
+import { logger } from 'redux-logger';
+
+import { Application } from '@spinnaker/core';
+
+import { INITIALIZE } from './actions';
+import { CanarySettings } from './canary.settings';
+import { ICanaryConfigSummary, IJudge } from './domain';
+import Styleguide from './layout/styleguide';
+import { actionInterceptingMiddleware, asyncDispatchMiddleware, epicMiddleware } from './middleware';
+import { ICanaryState, rootReducer } from './reducers';
+
+export interface ICanaryProps {
+  app: Application;
+}
+
+const middleware = [epicMiddleware, actionInterceptingMiddleware, asyncDispatchMiddleware];
+
+export const canaryStore: Store<ICanaryState> = createStore<ICanaryState>(
+  rootReducer,
+  applyMiddleware(...(CanarySettings.reduxLogger ? [...middleware, logger] : middleware)),
+);
+
+export default class Canary extends React.Component<ICanaryProps> {
+  private readonly store: Store<ICanaryState>;
+
+  constructor(props: ICanaryProps) {
+    super(props);
+    this.store = canaryStore;
+    this.initializeAppState(props.app);
+  }
+
+  public componentWillReceiveProps(nextProps: ICanaryProps) {
+    if (this.props.app.name !== nextProps.app.name) {
+      this.initializeAppState(nextProps.app);
+    }
+  }
+
+  private initializeAppState(app: Application): void {
+    this.store.dispatch({
+      type: INITIALIZE,
+      state: {
+        data: {
+          application: app,
+          configSummaries: app.getDataSource('canaryConfigs').data as ICanaryConfigSummary[],
+          judges: app.getDataSource('canaryJudges').data as IJudge[],
+        },
+      },
+    });
+  }
+
+  public render() {
+    const noWrap = { wrap: false };
+    return (
+      <Styleguide className="kayenta-root vertical">
+        <Provider store={this.store}>
+          <div className="vertical flex-1">
+            <UIView {...noWrap} name="canary" />
+          </div>
+        </Provider>
+      </Styleguide>
+    );
+  }
+}

package/src/kayenta/components/canaryScore.component.less

@@ -0,0 +1,77 @@
+.score.score-label {
+  font-size: 110%;
+  padding: 3px 6px;
+  display: inline-block;
+  height: 20px;
+  line-height: 14px;
+  color: white;
+  &.inverse {
+    padding: 0;
+  }
+  &.label-failing {
+    background-color: var(--color-alert-light);
+    &.inverse {
+      color: var(--color-alert-light);
+    }
+  }
+  &.label-healthy {
+    background-color: var(--color-success);
+    &.inverse {
+      color: var(--color-success);
+    }
+  }
+  &.label-unhealthy {
+    background-color: var(--color-danger);
+    &.inverse {
+      color: var(--color-danger);
+    }
+  }
+  &.label-unknown {
+    background-color: var(--color-text-caption);
+    &.inverse {
+      color: var(--color-text-caption);
+    }
+  }
+  &.inverse {
+    background-color: transparent;
+    font-size: 100%;
+    padding: 0;
+  }
+  .score-classification {
+    font-size: 45%;
+    display: block;
+    margin-top: 15px;
+    font-weight: 400;
+    text-transform: uppercase;
+  }
+}
+
+.score-large.score {
+  height: 48px;
+}
+
+.score-large .score.score-label {
+  height: auto;
+  line-height: 48px;
+  padding: 0 10px;
+  font-size: 28px;
+  font-weight: bold;
+  margin: 0;
+  border-radius: 0;
+  display: inline-block;
+}
+
+.score.score-report {
+  align-items: center;
+  padding: 12px 12px 6px;
+  font-size: 28px;
+  font-weight: bold;
+  margin-bottom: 10px;
+  height: 100%;
+}
+
+.table-row {
+  .score.score-report {
+    display: inline-block;
+  }
+}

package/src/kayenta/components/canaryScore.component.ts

@@ -0,0 +1,12 @@
+import { module } from 'angular';
+import { react2angular } from 'react2angular';
+
+import { withErrorBoundary } from '@spinnaker/core';
+
+import { CanaryScore } from './canaryScore';
+
+export const CANARY_SCORE_COMPONENT = 'spinnaker.kayenta.score.component';
+module(CANARY_SCORE_COMPONENT, []).component(
+  'kayentaCanaryScore',
+  react2angular(withErrorBoundary(CanaryScore, 'kayentaCanaryScore'), ['score', 'health', 'result', 'inverse']),
+);

package/src/kayenta/components/canaryScore.tsx

@@ -0,0 +1,63 @@
+import classNames from 'classnames';
+import * as React from 'react';
+
+import { ScoreClassificationLabel } from '../domain/ScoreClassificationLabel';
+import { getHealthLabel } from '../service/canaryRun.service';
+
+import './canaryScore.component.less';
+
+export interface ICanaryScoreProps {
+  score: number | string;
+  health?: string;
+  result: string;
+  inverse: boolean;
+  className?: string;
+  classification?: ScoreClassificationLabel;
+}
+
+export interface ICanaryScoreState {
+  score: number | string;
+  healthLabel: string;
+}
+
+export class CanaryScore extends React.Component<ICanaryScoreProps, ICanaryScoreState> {
+  public static defaultProps: Partial<ICanaryScoreProps> = {
+    health: '',
+  };
+
+  constructor(props: ICanaryScoreProps) {
+    super(props);
+    this.state = this.getLabelState(props);
+  }
+
+  private getLabelState(props: ICanaryScoreProps): ICanaryScoreState {
+    const score = props.score === 0 || (props.score && props.score > 0) ? props.score : 'N/A';
+
+    return {
+      score,
+      healthLabel: getHealthLabel(props.health, props.result),
+    };
+  }
+
+  public componentWillReceiveProps(props: ICanaryScoreProps) {
+    this.setState(this.getLabelState(props));
+  }
+
+  public render() {
+    const className = [
+      this.props.inverse ? 'inverse' : '',
+      'score',
+      'score-label',
+      'label-default',
+      `label-${this.state.healthLabel}`,
+    ].join(' ');
+    return (
+      <span className={classNames(className, this.props.className)}>
+        {this.state.score}
+        {this.props.classification && (
+          <span className="score-classification">{this.props.classification.toString()}</span>
+        )}
+      </span>
+    );
+  }
+}

package/src/kayenta/components/canaryScores.component.ts

@@ -0,0 +1,20 @@
+import { module } from 'angular';
+import { react2angular } from 'react2angular';
+
+import { withErrorBoundary } from '@spinnaker/core';
+
+import { CanaryScores } from './canaryScores';
+
+export const CANARY_SCORES_CONFIG_COMPONENT = 'spinnaker.kayenta.canaryScores.component';
+module(CANARY_SCORES_CONFIG_COMPONENT, []).component(
+  'kayentaCanaryScores',
+  react2angular(withErrorBoundary(CanaryScores, 'kayentaCanaryScores'), [
+    'onChange',
+    'successfulHelpFieldId',
+    'successfulLabel',
+    'successfulScore',
+    'unhealthyHelpFieldId',
+    'unhealthyLabel',
+    'unhealthyScore',
+  ]),
+);

package/src/kayenta/components/canaryScores.less

@@ -0,0 +1,22 @@
+div.canary-score {
+  div.progress {
+    border-radius: 0;
+    box-shadow: none;
+    -webkit-box-shadow: none;
+    height: 10px;
+    margin: 20px 0 10px;
+  }
+  div.progress-bar {
+    box-shadow: none;
+    -webkit-box-shadow: none;
+  }
+  div.progress-bar-danger {
+    background-color: var(--color-danger);
+  }
+  div.progress-bar.progress-bar-warning {
+    background-color: var(--color-alto);
+  }
+  div.progress-bar.progress-bar-success {
+    background-color: var(--color-success-light);
+  }
+}

package/src/kayenta/components/canaryScores.tsx

@@ -0,0 +1,163 @@
+import classNames from 'classnames';
+import { isString } from 'lodash';
+import * as React from 'react';
+
+import { HelpField } from '@spinnaker/core';
+
+import './canaryScores.less';
+
+export interface IScoreConfig {
+  successfulScore: string;
+  unhealthyScore: string;
+}
+
+export interface ICanaryScoresProps {
+  onChange: (scoreConfig: IScoreConfig) => void;
+  successfulHelpFieldId?: string;
+  successfulLabel?: string;
+  successfulScore: string;
+  unhealthyHelpFieldId?: string;
+  unhealthyLabel?: string;
+  unhealthyScore: string;
+  disabled?: boolean;
+}
+
+export interface ICanaryScoresState {
+  successfulTouched: boolean;
+  unhealthyTouched: boolean;
+}
+
+export function CanaryScores(props: ICanaryScoresProps) {
+  const [successfulTouched, setSuccessfulTouched] = React.useState(!!props.successfulScore);
+  const [unhealthyTouched, setUnhealthyTouched] = React.useState(!!props.unhealthyScore);
+
+  const { successfulScore, unhealthyScore } = props;
+
+  const isExpression = (scoreValue: string): boolean => {
+    return isString(scoreValue) && scoreValue.includes('${');
+  };
+
+  const hasExpressions = isExpression(unhealthyScore) || isExpression(successfulScore);
+
+  let successful: number;
+  let unhealthy: number;
+  if (!hasExpressions) {
+    successful = Number(successfulScore);
+    unhealthy = Number(unhealthyScore);
+  }
+
+  const handleSuccessfulChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
+    props.onChange({
+      successfulScore: event.target.value,
+      unhealthyScore,
+    });
+  };
+
+  const handleUnhealthyChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
+    props.onChange({
+      successfulScore,
+      unhealthyScore: event.target.value,
+    });
+  };
+
+  const errors = {
+    successful: '',
+    unhealthy: '',
+  };
+
+  if (successfulTouched) {
+    if (successful <= 0) {
+      errors.successful = 'Must be positive';
+    }
+    if (successful >= 100) {
+      errors.successful = 'Must be less than 100';
+    }
+  }
+
+  if (unhealthyTouched) {
+    if (unhealthy <= 0) {
+      errors.unhealthy = 'Must be positive';
+    }
+    if (unhealthy >= 100) {
+      errors.unhealthy = 'Must be less than 100';
+    }
+  }
+
+  if (successfulTouched && unhealthyTouched) {
+    if (successful <= unhealthy) {
+      errors.successful = `Must be greater than ${props.unhealthyLabel}`;
+    }
+  }
+
+  const invalid = !(successful && unhealthy);
+  return (
+    <div>
+      {hasExpressions && (
+        <div className="form-group">
+          <div className="col-md-2 col-md-offset-1 sm-label-right">Canary Scores</div>
+          <div className="col-md-9 form-control-static">Expressions are currently being used for canary scores.</div>
+        </div>
+      )}
+      {!hasExpressions && (
+        <div className="canary-score">
+          <div className="form-group">
+            <div className="col-md-2 col-md-offset-1 sm-label-right">
+              {props.unhealthyLabel || 'Unhealthy Score '}
+              <HelpField id={props.unhealthyHelpFieldId || 'pipeline.config.canary.unhealthyScore'} />
+            </div>
+            <div className="col-md-2">
+              <input
+                type="number"
+                required={true}
+                disabled={props.disabled}
+                onBlur={() => setUnhealthyTouched(true)}
+                value={Number.isNaN(unhealthy) ? '' : unhealthy}
+                onChange={handleUnhealthyChange}
+                className={classNames('form-control', 'input-sm', {
+                  'ng-invalid': !!errors.unhealthy,
+                  'ng-invalid-validate-min': !!errors.unhealthy,
+                })}
+              />
+              {errors.unhealthy && <div className="error-message">{errors.unhealthy}</div>}
+            </div>
+            <div className="col-md-2 col-md-offset-1 sm-label-right">
+              {props.successfulLabel || 'Successful Score '}
+              <HelpField id={props.successfulHelpFieldId || 'pipeline.config.canary.successfulScore'} />
+            </div>
+            <div className="col-md-2">
+              <input
+                type="number"
+                required={true}
+                disabled={props.disabled}
+                onBlur={() => setSuccessfulTouched(true)}
+                value={Number.isNaN(successful) ? '' : successful}
+                onChange={handleSuccessfulChange}
+                className={classNames('form-control', 'input-sm', {
+                  'ng-invalid': !!errors.successful,
+                  'ng-invalid-validate-max': !!errors.successful,
+                })}
+              />
+              {errors.successful && <div className="error-message">{errors.successful}</div>}
+            </div>
+          </div>
+          <div className="row">
+            <div className="col-md-offset-1 col-md-10">
+              <div className="progress">
+                <div className="progress-bar progress-bar-danger" style={{ width: `${invalid ? 0 : unhealthy}%` }} />
+                <div
+                  className="progress-bar progress-bar-warning"
+                  style={{ width: `${invalid ? 0 : 100 - (unhealthy + (100 - successful))}%` }}
+                />
+                <div
+                  className="progress-bar progress-bar-success"
+                  style={{ width: `${invalid ? 0 : 100 - successful}%` }}
+                />
+                <div className="progress-bar progress-bar-warning" style={{ width: `${invalid ? 100 : 0}%` }} />
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/kayenta/components/loadStates.tsx

@@ -0,0 +1,52 @@
+import { AsyncRequestState } from 'kayenta/reducers/asyncRequest';
+import * as React from 'react';
+
+import { Spinner } from '@spinnaker/core';
+
+export interface ILoadStatesProps {
+  state: AsyncRequestState;
+}
+
+/*
+ * Builder for rendering load states. Defaults to standard spinner during
+ * `Requesting` state.
+ * */
+export default class LoadStatesBuilder {
+  private requesting: JSX.Element;
+  private fulfilled: JSX.Element;
+  private failed: JSX.Element;
+
+  public onRequesting(requesting: JSX.Element): LoadStatesBuilder {
+    this.requesting = requesting;
+    return this;
+  }
+
+  public onFulfilled(fulfilled: JSX.Element): LoadStatesBuilder {
+    this.fulfilled = fulfilled;
+    return this;
+  }
+
+  public onFailed(failed: JSX.Element): LoadStatesBuilder {
+    this.failed = failed;
+    return this;
+  }
+
+  public build(): React.SFC<ILoadStatesProps> {
+    return ({ state }: ILoadStatesProps) => {
+      switch (state) {
+        case AsyncRequestState.Requesting:
+          return (
+            this.requesting || (
+              <div className="horizontal center middle spinner-container">
+                <Spinner />
+              </div>
+            )
+          );
+        case AsyncRequestState.Fulfilled:
+          return this.fulfilled;
+        case AsyncRequestState.Failed:
+          return this.failed;
+      }
+    };
+  }
+}