@spinnaker/kayenta 2025.3.0 → 2025.4.1

package/src/kayenta/report/detail/reportScores.tsx

@@ -1,80 +0,0 @@
-import classNames from 'classnames';
-import * as Creators from 'kayenta/actions/creators';
-import { ICanaryJudgeGroupScore, ICanaryJudgeScore, ICanaryScoreThresholds } from 'kayenta/domain';
-import { ICanaryState } from 'kayenta/reducers';
-import { judgeResultSelector, serializedGroupWeightsSelector } from 'kayenta/selectors';
-import { sortBy } from 'lodash';
-import * as React from 'react';
-import { connect, Dispatch } from 'react-redux';
-
-import AllMetricResultsHeader from './allMetricResultsHeader';
-import GroupScores from './groupScores';
-
-import './reportScores.less';
-
-interface IReportScoresStateProps {
-  groups: ICanaryJudgeGroupScore[];
-  score: ICanaryJudgeScore;
-  scoreThresholds: ICanaryScoreThresholds;
-  selectedGroup: string;
-}
-
-interface IReportScoresDispatchProps {
-  clearSelectedGroup: () => void;
-}
-
-interface IReportScoreParentProps {
-  isExpanded: boolean;
-  toggleHeader: () => void;
-}
-
-/*
- * Layout for the report scores.
- * */
-const ReportScores = ({
-  groups,
-  isExpanded,
-  selectedGroup,
-  clearSelectedGroup,
-  score,
-  scoreThresholds,
-  toggleHeader,
-}: IReportScoresStateProps & IReportScoresDispatchProps & IReportScoreParentProps) => {
-  const chevronStyle = {
-    transform: isExpanded ? 'rotate(90deg)' : 'rotate(0deg)',
-    transition: 'all ease 0.15s',
-  };
-
-  return (
-    <section className="horizontal report-scores">
-      <AllMetricResultsHeader
-        onClick={clearSelectedGroup}
-        score={score}
-        scoreThresholds={scoreThresholds}
-        className={classNames('flex-1', 'report-score', { active: !selectedGroup })}
-      />
-      <GroupScores groups={groups} className="flex-12" />
-      <div className="kayenta-overview-toggle horizontal middle" onClick={() => toggleHeader()}>
-        {isExpanded ? <p>hide details</p> : <p>show details</p>}
-        <span className="glyphicon glyphicon-chevron-right" style={chevronStyle} />
-      </div>
-    </section>
-  );
-};
-
-const mapStateToProps = (state: ICanaryState): IReportScoresStateProps => ({
-  groups: sortBy(
-    judgeResultSelector(state).groupScores,
-    // Sort by group weight, then by name.
-    [(group: ICanaryJudgeGroupScore) => -serializedGroupWeightsSelector(state)[group.name], 'name'],
-  ),
-  score: judgeResultSelector(state).score,
-  scoreThresholds: state.selectedRun.run.canaryExecutionRequest.thresholds,
-  selectedGroup: state.selectedRun.selectedGroup,
-});
-
-const mapDispatchToProps = (dispatch: Dispatch<ICanaryState>): IReportScoresDispatchProps => ({
-  clearSelectedGroup: () => dispatch(Creators.selectReportMetricGroup({ group: null })),
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(ReportScores);

package/src/kayenta/report/detail/score.tsx

@@ -1,33 +0,0 @@
-import { CanaryScore } from 'kayenta/components/canaryScore';
-import { ICanaryJudgeScore } from 'kayenta/domain/ICanaryJudgeResult';
-import { ScoreClassificationLabel } from 'kayenta/domain/ScoreClassificationLabel';
-import { round } from 'lodash';
-import * as React from 'react';
-
-export interface ICanaryJudgeScoreProps {
-  score: ICanaryJudgeScore;
-  showClassification?: boolean;
-  inverse?: boolean;
-}
-
-// TODO(dpeach): don't use ACA statuses in the CanaryScore component.
-const mapKayentaToACA = (score: ICanaryJudgeScore): { health: string; result: string } => {
-  if (score.classification === ScoreClassificationLabel.Pass) {
-    return { health: null, result: 'success' };
-  } else if (score.classification === ScoreClassificationLabel.Fail) {
-    return { health: 'unhealthy', result: null };
-  } else {
-    return { health: null, result: null };
-  }
-};
-
-export default ({ score, showClassification, inverse }: ICanaryJudgeScoreProps) => (
-  <CanaryScore
-    className="score-report"
-    score={round(score.score, 2)}
-    result={mapKayentaToACA(score).result}
-    health={mapKayentaToACA(score).health}
-    classification={showClassification ? score.classification : null}
-    inverse={inverse}
-  />
-);

package/src/kayenta/report/detail/sourceLinks.tsx

@@ -1,69 +0,0 @@
-import { CanarySettings } from 'kayenta/canary.settings';
-import { ICanaryExecutionStatusResult } from 'kayenta/domain';
-import { ICanaryState } from 'kayenta/reducers';
-import { runSelector, serializedCanaryConfigSelector } from 'kayenta/selectors';
-import * as React from 'react';
-import { connect } from 'react-redux';
-
-import { SETTINGS } from '@spinnaker/core';
-
-interface ISourceJsonStateProps {
-  reportUrl: string;
-  metricListUrl: string;
-}
-
-const SourceLinks = ({ reportUrl, metricListUrl }: ISourceJsonStateProps) => {
-  return (
-    <ul className="list-unstyled small">
-      <li>
-        <a target="_blank" href={reportUrl}>
-          Report
-        </a>
-      </li>
-      {metricListUrl && (
-        <li>
-          <p>
-            <a target="_blank" href={metricListUrl}>
-              Metrics
-            </a>
-          </p>
-        </li>
-      )}
-    </ul>
-  );
-};
-
-const resolveReportUrl = (state: ICanaryState): string => {
-  const canaryConfigId = serializedCanaryConfigSelector(state).id;
-  const result: ICanaryExecutionStatusResult = runSelector(state);
-  const canaryRunId = result.id;
-  let url = `${SETTINGS.gateUrl}/v2/canaries/canary/${canaryConfigId}/${canaryRunId}`;
-  const storageAccountName = result.storageAccountName || CanarySettings.storageAccountName;
-  if (storageAccountName) {
-    url += `?storageAccountName=${storageAccountName}`;
-  }
-  return url;
-};
-
-const resolveMetricListUrl = (state: ICanaryState): string => {
-  const status = runSelector(state);
-  const { metricSetPairListId } = status;
-  if (!metricSetPairListId) {
-    return null;
-  }
-  let url = `${SETTINGS.gateUrl}/v2/canaries/metricSetPairList/${metricSetPairListId}`;
-  const storageAccountName = status.storageAccountName || CanarySettings.storageAccountName;
-  if (storageAccountName) {
-    url += `?storageAccountName=${storageAccountName}`;
-  }
-  return url;
-};
-
-const mapStateToProps = (state: ICanaryState): ISourceJsonStateProps => {
-  return {
-    reportUrl: resolveReportUrl(state),
-    metricListUrl: resolveMetricListUrl(state),
-  };
-};
-
-export default connect(mapStateToProps)(SourceLinks);

package/src/kayenta/report/list/configLink.tsx

@@ -1,32 +0,0 @@
-import { useSref } from '@uirouter/react';
-import { ICanaryState } from 'kayenta/reducers';
-import { resolveConfigIdFromExecutionId } from 'kayenta/selectors';
-import * as React from 'react';
-import { connect } from 'react-redux';
-
-interface IConfigLinkOwnProps {
-  configName: string;
-  executionId: string;
-  application: string;
-}
-
-interface IConfigLinkStateProps {
-  configId: string;
-}
-
-export const ConfigLink = ({ configId, configName }: IConfigLinkOwnProps & IConfigLinkStateProps) => {
-  const sref = useSref('^.^.canaryConfig.configDetail', { id: configId });
-  return <a {...sref}>{configName}</a>;
-};
-
-const mapStateToProps = (
-  state: ICanaryState,
-  ownProps: IConfigLinkOwnProps,
-): IConfigLinkStateProps & IConfigLinkOwnProps => {
-  return {
-    configId: resolveConfigIdFromExecutionId(state, ownProps.executionId),
-    ...ownProps,
-  };
-};
-
-export default connect(mapStateToProps)(ConfigLink);

package/src/kayenta/report/list/executionList.less

@@ -1,7 +0,0 @@
-.execution-list-container {
-  overflow-y: auto;
-}
-
-.execution-list-table {
-  margin-bottom: 0;
-}

package/src/kayenta/report/list/loadStates.tsx

@@ -1,32 +0,0 @@
-import LoadStatesBuilder from 'kayenta/components/loadStates';
-import CenteredDetail from 'kayenta/layout/centeredDetail';
-import { ICanaryState } from 'kayenta/reducers';
-import { AsyncRequestState } from 'kayenta/reducers/asyncRequest';
-import * as React from 'react';
-import { connect } from 'react-redux';
-
-import ExecutionListTable from './table';
-
-interface IExecutionListLoadStatesStateProps {
-  loadState: AsyncRequestState;
-}
-
-const ExecutionListLoadStates = ({ loadState }: IExecutionListLoadStatesStateProps) => {
-  const LoadStates = new LoadStatesBuilder()
-    .onFulfilled(<ExecutionListTable />)
-    .onFailed(
-      <CenteredDetail>
-        <h3 className="heading-3">Could not load canary execution history.</h3>
-      </CenteredDetail>,
-    )
-    .build();
-  return <LoadStates state={loadState} />;
-};
-
-const mapStateToProps = (state: ICanaryState) => {
-  return {
-    loadState: state.data.executions.load,
-  };
-};
-
-export default connect(mapStateToProps)(ExecutionListLoadStates);

package/src/kayenta/report/list/pipelineLink.tsx

@@ -1,15 +0,0 @@
-import { useSref } from '@uirouter/react';
-import * as React from 'react';
-
-interface IParentPipelineLinkProps {
-  parentPipelineExecutionId: string;
-  application: string;
-}
-
-export const PipelineLink = ({ parentPipelineExecutionId, application }: IParentPipelineLinkProps) => {
-  const sref = useSref('home.applications.application.pipelines.executionDetails.execution', {
-    application,
-    executionId: parentPipelineExecutionId,
-  });
-  return <a {...sref}>Pipeline</a>;
-};

package/src/kayenta/report/list/reportLink.tsx

@@ -1,33 +0,0 @@
-import { useSref } from '@uirouter/react';
-import { ICanaryState } from 'kayenta/reducers';
-import { resolveConfigIdFromExecutionId } from 'kayenta/selectors';
-import * as React from 'react';
-import { connect } from 'react-redux';
-
-interface IReportLinkOwnProps {
-  configName: string;
-  executionId: string;
-  application: string;
-  children?: React.ReactNode;
-}
-
-interface IReportLinkStateProps {
-  configId: string;
-}
-
-export const ReportLink = ({ configId, executionId, children }: IReportLinkOwnProps & IReportLinkStateProps) => {
-  const sref = useSref('^.reportDetail', { configId, runId: executionId });
-  return <a {...sref}>{children}</a>;
-};
-
-const mapStateToProps = (
-  state: ICanaryState,
-  ownProps: IReportLinkOwnProps,
-): IReportLinkStateProps & IReportLinkOwnProps => {
-  return {
-    configId: resolveConfigIdFromExecutionId(state, ownProps.executionId),
-    ...ownProps,
-  };
-};
-
-export default connect(mapStateToProps)(ReportLink);

package/src/kayenta/report/list/table.tsx

@@ -1,309 +0,0 @@
-import { CanarySettings } from 'kayenta/canary.settings';
-import {
-  CANARY_EXECUTION_NO_PIPELINE_STATUS,
-  ICanaryExecutionStatusResult,
-  ICanaryMetricConfig,
-  ICanaryScopesByName,
-  IKayentaAccount,
-} from 'kayenta/domain';
-import CenteredDetail from 'kayenta/layout/centeredDetail';
-import FormattedDate from 'kayenta/layout/formattedDate';
-import { ITableColumn, NativeTable } from 'kayenta/layout/table';
-import { ManualAnalysisModal } from 'kayenta/manualAnalysis/ManualAnalysisModal';
-import { ICanaryState } from 'kayenta/reducers';
-import { get, isEqual } from 'lodash';
-import * as React from 'react';
-import { connect } from 'react-redux';
-
-import { Application, ReactInjector, relativeTime, Spinner, Tooltip } from '@spinnaker/core';
-
-import ConfigLink from './configLink';
-import Score from '../detail/score';
-import { PipelineLink } from './pipelineLink';
-import ReportLink from './reportLink';
-
-import './executionList.less';
-
-// Both this and the atlas-specific logic in `getScopeLocations` shouldn't really
-// be in this file, and probably shouldn't even be referenced directly.
-// Ideally this and any other metric store customizations should happen in a registry
-// of store-specific transformation functions or similar.
-const isAtlasScope = (scope: string, metrics: ICanaryMetricConfig[]) =>
-  metrics.some(({ query, scopeName }) => scopeName === scope && query.type === 'atlas');
-
-const getScopeLocations = (scopes: ICanaryScopesByName, metrics: ICanaryMetricConfig[]) =>
-  Object.keys(scopes).reduce((acc, scopeName) => {
-    const { controlScope, experimentScope } = scopes[scopeName];
-    const isAtlas = isAtlasScope(scopeName, metrics);
-
-    // When atlas metrics have the dataset param set to global,
-    // the location field is not accurate.
-    if (isAtlas && get(controlScope, 'extendedScopeParams.dataset') === 'global') {
-      acc.add('Global');
-    } else {
-      acc.add(controlScope.location);
-    }
-    if (isAtlas && get(experimentScope, 'extendedScopeParams.dataset') === 'global') {
-      acc.add('Global');
-    } else {
-      acc.add(experimentScope.location);
-    }
-
-    return acc;
-  }, new Set<string>());
-
-const baseColumns: Array<ITableColumn<ICanaryExecutionStatusResult>> = [
-  {
-    label: 'Summary',
-    getContent: (execution) => (
-      <div>
-        <ReportLink
-          configName={execution.config.name}
-          executionId={execution.pipelineId}
-          application={execution.application}
-        >
-          <Score score={execution.result.judgeResult.score} showClassification={false} inverse={true} />
-          {'  '}
-          <FormattedDate dateIso={execution.startTimeIso} />
-        </ReportLink>
-        {execution.startTimeIso && (
-          <div className="color-text-caption body-small">
-            {relativeTime(new Date(execution.startTimeIso).getTime())}
-          </div>
-        )}
-      </div>
-    ),
-  },
-  {
-    label: 'Locations',
-    getContent: ({ canaryExecutionRequest: { scopes }, config: { metrics } }) => {
-      const locations = [...getScopeLocations(scopes, metrics)];
-
-      return (
-        <div className="vertical">
-          {locations.map((location) => (
-            <span key={location}>{location}</span>
-          ))}
-        </div>
-      );
-    },
-  },
-  {
-    label: 'Config',
-    getContent: (execution) => (
-      <ConfigLink
-        configName={execution.config.name}
-        executionId={execution.pipelineId}
-        application={execution.application}
-      />
-    ),
-  },
-  {
-    label: 'Scopes',
-    getContent: ({ canaryExecutionRequest: { scopes } }) => {
-      const baselineScopeNames = Object.keys(scopes).reduce(
-        (acc, scope) => acc.add(scopes[scope].controlScope.scope),
-        new Set<string>(),
-      );
-      const canaryScopeNames = Object.keys(scopes).reduce(
-        (acc, scope) => acc.add(scopes[scope].experimentScope.scope),
-        new Set<string>(),
-      );
-
-      const areScopesIdentical = isEqual(baselineScopeNames, canaryScopeNames);
-
-      const styles: React.CSSProperties = { maxWidth: '350px', wordBreak: 'break-all' };
-      if (areScopesIdentical) {
-        return (
-          <div className="vertical" style={styles}>
-            {[...canaryScopeNames].map((scope) => (
-              <span key={scope}>{scope}</span>
-            ))}
-          </div>
-        );
-      } else {
-        return (
-          <div className="vertical" style={styles}>
-            <span className="heading-6 uppercase color-text-caption">Baseline</span>
-            {[...baselineScopeNames].map((scope) => (
-              <span key={scope}>{scope}</span>
-            ))}
-            <span className="heading-6 uppercase color-text-caption" style={{ marginTop: '5px' }}>
-              Canary
-            </span>
-            {[...canaryScopeNames].map((scope) => (
-              <span key={scope}>{scope}</span>
-            ))}
-          </div>
-        );
-      }
-    },
-  },
-  {
-    getContent: ({ parentPipelineExecutionId, application }) =>
-      parentPipelineExecutionId &&
-      parentPipelineExecutionId !== CANARY_EXECUTION_NO_PIPELINE_STATUS && (
-        <PipelineLink parentPipelineExecutionId={parentPipelineExecutionId} application={application} />
-      ),
-  },
-];
-
-const getTableColumns = (application: Application, accounts: IKayentaAccount[]) => {
-  if (!CanarySettings.manualAnalysisEnabled) {
-    return baseColumns;
-  }
-  return baseColumns.concat([
-    {
-      label: 'Actions',
-      getContent: (execution) => (
-        <Tooltip value="Re-run analysis">
-          <button className="link" onClick={() => rerunAnalysis(execution, application, accounts)}>
-            <i className="fas fa-redo-alt" />
-          </button>
-        </Tooltip>
-      ),
-    },
-  ]);
-};
-
-const rerunAnalysis = (
-  execution: ICanaryExecutionStatusResult,
-  application: Application,
-  accounts: IKayentaAccount[],
-) => {
-  const { controlScope, experimentScope } = Object.values(execution.canaryExecutionRequest.scopes)[0];
-  const step = `${controlScope.step ?? 60}`;
-  ManualAnalysisModal.show({
-    title: 'Start Manual Analysis',
-    application,
-    accounts,
-    initialValues: {
-      configId: execution.canaryConfigId,
-      startTime: controlScope.start,
-      endTime: controlScope.end,
-      step,
-      baselineScope: controlScope.scope,
-      canaryScope: experimentScope.scope,
-      baselineLocation: controlScope.location,
-      canaryLocation: experimentScope.location,
-      extendedScopeParams: controlScope.extendedScopeParams,
-      resourceType: controlScope.resourceType,
-      marginalThreshold: `${execution.canaryExecutionRequest.thresholds.marginal}`,
-      passThreshold: `${execution.canaryExecutionRequest.thresholds.pass}`,
-      metricsAccountName: execution.metricsAccountName,
-      storageAccountName: execution.storageAccountName,
-    },
-  });
-};
-
-const startManualAnalysis = (application: Application, accounts: IKayentaAccount[]) => {
-  ManualAnalysisModal.show({
-    title: 'Start Manual Analysis',
-    application,
-    accounts,
-  });
-};
-
-interface IExecutionListTableStateProps {
-  executions: ICanaryExecutionStatusResult[];
-  application: Application;
-  accounts: IKayentaAccount[];
-  executionsCount: number;
-}
-
-const TableRows = ({
-  executions,
-  application,
-  accounts,
-}: {
-  executions: ICanaryExecutionStatusResult[];
-  application: Application;
-  accounts: IKayentaAccount[];
-}) => {
-  if (!application.getDataSource('canaryExecutions').loaded) {
-    return (
-      <CenteredDetail>
-        <div className="horizontal center middle spinner-container">
-          <Spinner />
-        </div>
-      </CenteredDetail>
-    );
-  }
-  if (!executions || !executions.length) {
-    return (
-      <CenteredDetail>
-        <h3 className="heading-3">No canary execution history for this application.</h3>
-      </CenteredDetail>
-    );
-  }
-  return (
-    <NativeTable
-      rows={executions}
-      className="flex-1 execution-list-table"
-      columns={getTableColumns(application, accounts)}
-      rowKey={(execution) => execution.pipelineId}
-    />
-  );
-};
-
-const updateExecutionsCount = (event: React.ChangeEvent<HTMLSelectElement>) => {
-  ReactInjector.$state.go('.', { count: Number(event.target.value) });
-};
-
-const ExecutionListTable = ({ executions, application, accounts, executionsCount }: IExecutionListTableStateProps) => {
-  React.useEffect(() => {
-    const dataSource = application.getDataSource('canaryExecutions');
-    if (!dataSource.active) {
-      dataSource.activate();
-    }
-    dataSource.refresh();
-    return () => dataSource.deactivate();
-  }, [application, executionsCount]);
-
-  const countOptions: number[] = CanarySettings.executionsCountOptions ?? [20, 50, 100, 200];
-  if (!countOptions.includes(executionsCount)) {
-    countOptions.push(executionsCount);
-    countOptions.sort((a, b) => a - b);
-  }
-
-  return (
-    <div className="vertical execution-list-container">
-      <div className="horizontal space-between form-inline">
-        <div className="form-group">
-          {countOptions.length > 1 && (
-            <>
-              <span className="sp-margin-s-right">Showing</span>
-              <select className="form-control input-sm" onChange={updateExecutionsCount}>
-                {countOptions.map((o) => (
-                  <option selected={executionsCount === o} value={o}>
-                    {o}
-                  </option>
-                ))}
-              </select>
-              <span className="sp-margin-s-left">most recent reports</span>
-            </>
-          )}
-        </div>
-        {CanarySettings.manualAnalysisEnabled && (
-          <button
-            style={{ alignSelf: 'flex-end', flexShrink: 0 }}
-            className="primary"
-            onClick={() => startManualAnalysis(application, accounts)}
-          >
-            <i className="fa fa-play" /> Start Manual Analysis
-          </button>
-        )}
-      </div>
-      <TableRows executions={executions} application={application} accounts={accounts} />
-    </div>
-  );
-};
-
-const mapStateToProps = (state: ICanaryState) => ({
-  executions: Object.values(state.data.executions.data).filter((e) => e.result),
-  application: state.data.application,
-  accounts: state.data.kayentaAccounts.data,
-  executionsCount: state.app.executionsCount,
-});
-
-export default connect(mapStateToProps)(ExecutionListTable);

package/src/kayenta/report/report.tsx

@@ -1,11 +0,0 @@
-import { UIView } from '@uirouter/react';
-import * as React from 'react';
-
-export default () => {
-  const noWrap = { wrap: false };
-  return (
-    <div className="vertical flex-1">
-      <UIView {...noWrap} name="detail" />
-    </div>
-  );
-};