@spinnaker/kayenta 2025.4.0 → 2025.4.1

package/src/kayenta/canary.less

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

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

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

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

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

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

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

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

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

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