@spinnaker/kayenta 2025.3.0 → 2025.4.1

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

@@ -1,50 +0,0 @@
-import * as Creators from 'kayenta/actions/creators';
-import { ICanaryState } from 'kayenta/reducers';
-import * as React from 'react';
-import { connect, Dispatch } from 'react-redux';
-
-import { GraphType } from './graph/metricSetPairGraph.service';
-
-import './graphTypeSelector.less';
-
-interface IGraphTypeSelectorStateProps {
-  selected: GraphType;
-}
-
-interface IGraphTypeSelectorDispatchProps {
-  selectGraphType: (type: GraphType) => void;
-}
-
-const GraphTypeSelector = ({
-  selected,
-  selectGraphType,
-}: IGraphTypeSelectorStateProps & IGraphTypeSelectorDispatchProps) => {
-  return (
-    <ul className="list-inline graph-type-selector">
-      <li>
-        <label className="label uppercase color-text-primary" style={{ paddingLeft: 0 }}>
-          Graph:
-        </label>
-      </li>
-      {Object.values(GraphType).map((type) => (
-        <li
-          style={selected === type ? { textDecoration: 'underline' } : null}
-          key={type}
-          onClick={() => selectGraphType(type)}
-        >
-          <a className="small clickable">{type}</a>
-        </li>
-      ))}
-    </ul>
-  );
-};
-
-const mapStateToProps = (state: ICanaryState): IGraphTypeSelectorStateProps => ({
-  selected: state.selectedRun.graphType,
-});
-
-const mapDispatchToProps = (dispatch: Dispatch<ICanaryState>): IGraphTypeSelectorDispatchProps => ({
-  selectGraphType: (type: GraphType) => dispatch(Creators.selectGraphType({ type })),
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(GraphTypeSelector);

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

@@ -1,68 +0,0 @@
-import classNames from 'classnames';
-import * as Creators from 'kayenta/actions/creators';
-import { ICanaryJudgeGroupScore, ICanaryScoreThresholds, IGroupWeights } from 'kayenta/domain';
-import { ICanaryState } from 'kayenta/reducers';
-import { canaryExecutionRequestSelector, serializedGroupWeightsSelector } from 'kayenta/selectors';
-import * as React from 'react';
-import { connect, Dispatch } from 'react-redux';
-
-import ClickableHeader from './clickableHeader';
-import { mapGroupToColor } from './colors';
-
-export interface IGroupScoresOwnProps {
-  groups: ICanaryJudgeGroupScore[];
-  className?: string;
-}
-
-interface IGroupScoresStateProps {
-  groupWeights: IGroupWeights;
-  scoreThresholds: ICanaryScoreThresholds;
-  selectedGroup: string;
-}
-
-interface IGroupScoresDispatchProps {
-  select: (event: any) => void;
-}
-
-/*
- * Renders list of group scores.
- * */
-const GroupScores = ({
-  groups,
-  groupWeights,
-  scoreThresholds,
-  className,
-  select,
-  selectedGroup,
-}: IGroupScoresOwnProps & IGroupScoresDispatchProps & IGroupScoresStateProps) => (
-  <section className={classNames('horizontal', className)}>
-    {groups.map((g) => (
-      <ClickableHeader
-        key={g.name}
-        style={{
-          width: `${groupWeights[g.name]}%`, // TODO: at some point (around 4%), the group name doesn't fit.
-          backgroundColor: mapGroupToColor(g, scoreThresholds),
-        }}
-        onClick={() => select(g.name)}
-        label={g.name}
-        className={classNames('report-score', { active: g.name === selectedGroup })}
-      />
-    ))}
-  </section>
-);
-
-const mapStateToProps = (state: ICanaryState): IGroupScoresStateProps => ({
-  selectedGroup: state.selectedRun.selectedGroup,
-  groupWeights: serializedGroupWeightsSelector(state),
-  scoreThresholds: canaryExecutionRequestSelector(state).thresholds,
-});
-
-const mapDispatchToProps = (
-  dispatch: Dispatch<ICanaryState>,
-  ownProps: IGroupScoresOwnProps,
-): IGroupScoresOwnProps & IGroupScoresDispatchProps => ({
-  select: (group: string) => dispatch(Creators.selectReportMetricGroup({ group })),
-  ...ownProps,
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(GroupScores);

package/src/kayenta/report/detail/header.less

@@ -1,70 +0,0 @@
-.report-header {
-  margin-bottom: 10px;
-  align-items: center;
-
-  h1 {
-    flex: 1 0 200px;
-    align-items: center;
-    margin: 0;
-    padding: 0;
-    word-break: break-all;
-  }
-
-  .report-score-wrapper {
-    padding: 5px 20px 0 0;
-    margin-left: 15px;
-    border-right: 1px solid var(--color-titanium);
-    text-align: center;
-    flex: 0 0 200px;
-  }
-
-  .report-metadata {
-    flex: 0 1 auto;
-    display: flex;
-    overflow: hidden;
-    padding-left: 20px;
-    padding-top: 10px;
-    width: 100%;
-
-    .group {
-      flex: 1 1 200px;
-      margin-right: 20px;
-      overflow: hidden;
-
-      &.group-time {
-        flex: 0 0 150px;
-      }
-      &.group-threshold {
-        flex: 0 0 80px;
-      }
-      &.group-source {
-        flex: 0 0 64px;
-        margin-right: 0;
-      }
-    }
-
-    ul {
-      margin-bottom: 0;
-    }
-
-    .label {
-      padding-left: 0;
-      &.label-lg {
-        font-size: 85%;
-      }
-    }
-  }
-
-  .kayenta-scope {
-    width: 100%;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-}
-
-.popover {
-  .kayenta-scope {
-    word-break: break-all;
-  }
-}

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

@@ -1,39 +0,0 @@
-import { UISref } from '@uirouter/react';
-import { ICanaryJudgeScore } from 'kayenta/domain/ICanaryJudgeResult';
-import { ICanaryState } from 'kayenta/reducers';
-import { judgeResultSelector, serializedCanaryConfigSelector } from 'kayenta/selectors';
-import * as React from 'react';
-import { connect } from 'react-redux';
-
-import ReportMetadata from './reportMetadata';
-import ReportScore from './score';
-
-import './header.less';
-
-export interface IReportHeaderStateProps {
-  id: string;
-  name: string;
-  score: ICanaryJudgeScore;
-}
-
-const ReportHeader = ({ id, name, score }: IReportHeaderStateProps) => (
-  <section className="horizontal report-header">
-    <div className="report-score-wrapper">
-      <ReportScore score={score} showClassification={true} />
-      <h1 className="heading-2 color-text-primary">
-        <UISref to="^.^.canaryConfig.configDetail" params={{ id }}>
-          <a className="clickable color-text-primary"> {name}</a>
-        </UISref>
-      </h1>
-    </div>
-    <ReportMetadata />
-  </section>
-);
-
-const mapStateToProps = (state: ICanaryState): IReportHeaderStateProps => ({
-  id: serializedCanaryConfigSelector(state).id,
-  name: serializedCanaryConfigSelector(state).name,
-  score: judgeResultSelector(state).score,
-});
-
-export default connect(mapStateToProps)(ReportHeader);

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

@@ -1,13 +0,0 @@
-import classNames from 'classnames';
-import * as React from 'react';
-
-const ARROW_CLASS = 'arrow-down';
-
-export interface IHeaderArrowProps {
-  arrowColor: string;
-  className?: string;
-}
-
-export default ({ arrowColor, className }: IHeaderArrowProps) => (
-  <div className={classNames(ARROW_CLASS, className)} style={{ borderTopColor: arrowColor }} />
-);

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

@@ -1,31 +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 ReportDetail from './detail';
-
-interface IReportLoadStatesStateProps {
-  loadState: AsyncRequestState;
-}
-
-const ReportLoadStates = ({ loadState }: IReportLoadStatesStateProps) => {
-  const LoadStates = new LoadStatesBuilder()
-    .onFulfilled(<ReportDetail />)
-    .onFailed(
-      <CenteredDetail>
-        <h3 className="heading-3">Could not load canary report.</h3>
-      </CenteredDetail>,
-    )
-    .build();
-
-  return <LoadStates state={loadState} />;
-};
-
-const mapStateToProps = (state: ICanaryState) => ({
-  loadState: state.selectedRun.load,
-});
-
-export default connect(mapStateToProps)(ReportLoadStates);

package/src/kayenta/report/detail/metricResultActions.less

@@ -1,29 +0,0 @@
-.metric-result-actions {
-  .actions-layout {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-    margin: 12px 4px;
-  }
-  .action {
-    padding-left: 8px;
-  }
-  .copy-button-container {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    position: relative;
-    .clipboard-btn {
-      width: 100%;
-      height: 100%;
-      opacity: 0;
-      z-index: 2;
-      position: absolute;
-    }
-    .copy-button {
-      .copy-icon {
-        top: -1px;
-      }
-    }
-  }
-}

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

@@ -1,87 +0,0 @@
-import { CanarySettings } from 'kayenta/canary.settings';
-import { ICanaryMetricConfig } from 'kayenta/domain/ICanaryConfig';
-import { IMetricSetPair } from 'kayenta/domain/IMetricSetPair';
-import metricStoreConfigStore from 'kayenta/metricStore/metricStoreConfig.service';
-import { ICanaryState } from 'kayenta/reducers';
-import { selectedMetricConfigSelector } from 'kayenta/selectors';
-import * as React from 'react';
-import { connect } from 'react-redux';
-
-import { CopyToClipboard } from '@spinnaker/core';
-
-import './metricResultActions.less';
-
-export interface IMetricResultStatsStateProps {
-  metricConfig: ICanaryMetricConfig;
-  metricSetPair: IMetricSetPair;
-}
-
-const buildAtlasGraphUrl = (metricSetPair: IMetricSetPair) => {
-  const { attributes, scopes, values, tags } = metricSetPair;
-  const { atlasGraphBaseUrl } = CanarySettings;
-  let legendTags = '';
-  if (Object.keys(tags).length) {
-    legendTags = ` (${Object.keys(tags)
-      .map((tag) => `$${tag}`)
-      .join('|')})`;
-  }
-
-  // TODO: If the control and experiment have different baseURLs, generate two links instead of a combined one.
-  const backend = encodeURIComponent(attributes.control.baseURL);
-  const experimentQuery = encodeURIComponent(attributes.experiment.query);
-  const controlQuery = encodeURIComponent(attributes.control.query);
-  const query = `${experimentQuery},Canary${legendTags},:legend,:freeze,${controlQuery},Baseline${legendTags},:legend`;
-
-  const startTime = Math.min(scopes.control.startTimeMillis, scopes.experiment.startTimeMillis);
-  const controlEndTime = scopes.control.startTimeMillis + values.control.length * scopes.control.stepMillis;
-  const experimentEndTime = scopes.experiment.startTimeMillis + values.experiment.length * scopes.experiment.stepMillis;
-  const endTime = Math.max(controlEndTime, experimentEndTime);
-
-  return `${atlasGraphBaseUrl}?backend=${backend}&g.q=${query}&g.s=${startTime}&g.e=${endTime}&g.w=651&mode=png&axis=0`;
-};
-
-const MetricResultActions = ({ metricSetPair, metricConfig }: IMetricResultStatsStateProps) => {
-  const atlasURL = buildAtlasGraphUrl(metricSetPair);
-  const atlasQuery = metricStoreConfigStore.getDelegate(metricConfig.query.type).queryFinder(metricConfig);
-
-  // Mask CopyToClipboard component as a larger button, fire event when clicked
-  const copyToClipboard = (
-    <div className="copy-button-container">
-      <CopyToClipboard displayText={false} text={atlasQuery} toolTip={null} />
-      <button className="primary copy-button" key="copy-link">
-        <i className="glyphicon glyphicon-copy  copy-icon" />
-        Copy metric query
-      </button>
-    </div>
-  );
-
-  const openAtlas = (
-    <a href={atlasURL} target="_blank">
-      <button className="primary">
-        <i className="fas fa-chart-line" />
-        Explore more data in Atlas
-      </button>
-    </a>
-  );
-
-  const actions = [copyToClipboard, openAtlas].map((action, i) => {
-    return (
-      <li className="action" key={i}>
-        {action}
-      </li>
-    );
-  });
-
-  return (
-    <div className="metric-result-actions">
-      <ul className="actions-layout list-inline">{actions}</ul>
-    </div>
-  );
-};
-
-const mapStateToProps = (state: ICanaryState): IMetricResultStatsStateProps => ({
-  metricConfig: selectedMetricConfigSelector(state),
-  metricSetPair: state.selectedRun.metricSetPair.pair,
-});
-
-export default connect(mapStateToProps)(MetricResultActions);

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

@@ -1,22 +0,0 @@
-import classNames from 'classnames';
-import { MetricClassificationLabel } from 'kayenta/domain/MetricClassificationLabel';
-import * as React from 'react';
-
-import { mapMetricClassificationToColor } from './colors';
-
-interface IMetricResultClassificationProps {
-  classification: MetricClassificationLabel;
-  className?: string;
-}
-
-const buildStyle = (classification: MetricClassificationLabel) => ({
-  backgroundColor: mapMetricClassificationToColor(classification),
-});
-
-const TEXT_COLOR = 'var(--color-text-on-dark)';
-
-export default ({ classification, className }: IMetricResultClassificationProps) => (
-  <div className={classNames('pill', 'metric-result-classification', className)} style={buildStyle(classification)}>
-    <span style={{ color: TEXT_COLOR }}>{classification}</span>
-  </div>
-);

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

@@ -1,20 +0,0 @@
-import { ICanaryAnalysisResult } from 'kayenta/domain/ICanaryJudgeResult';
-import * as React from 'react';
-
-import MetricSetPairLoadStates from './metricSetPairLoadStates';
-
-export interface IMetricResultDetailProps {
-  result: ICanaryAnalysisResult;
-}
-
-/*
- * Top-level component for the metric result detail - i.e., the right side of the
- * screen that opens when you click on a metric result.
- * */
-export default ({ result }: IMetricResultDetailProps) => {
-  if (result) {
-    return <MetricSetPairLoadStates />;
-  } else {
-    return <h3 className="heading-3 text-center">Select a metric result.</h3>;
-  }
-};

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

@@ -1,19 +0,0 @@
-import * as React from 'react';
-
-import Graph from './graph/graph';
-import GraphTypeSelector from './graphTypeSelector';
-import MetricResultActions from './metricResultActions';
-import MetricResultStats from './metricResultStats';
-
-/*
- * Responsible for layout of the metric result detail view after the metric set
- * pair for the result has loaded successfully.
- * */
-export default () => (
-  <section className="vertical flex-1 sp-padding-xl-bottom" style={{ overflowY: 'auto' }}>
-    <GraphTypeSelector />
-    <Graph />
-    <MetricResultActions />
-    <MetricResultStats />
-  </section>
-);

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

@@ -1,25 +0,0 @@
-import * as React from 'react';
-
-interface IMetricResultDeviationProps {
-  className?: string;
-  ratio: number;
-}
-
-const formatDeviationAsPercentage = (ratio: number) => {
-  if (typeof ratio !== 'number') {
-    return 'N/A';
-  } else if (ratio === 1) {
-    return '0%';
-  } else if (ratio < 1) {
-    return ((ratio - 1) * 100).toFixed(1) + '%';
-  } else {
-    return '+' + ((ratio - 1) * 100).toFixed(1) + '%';
-  }
-};
-
-export default ({ ratio, className }: IMetricResultDeviationProps) =>
-  ratio && (
-    <span className={className} style={{ color: 'var(--color-text-caption' }}>
-      {formatDeviationAsPercentage(ratio)}
-    </span>
-  );

package/src/kayenta/report/detail/metricResultStats.less

@@ -1,9 +0,0 @@
-.metric-stats {
-  .label {
-    padding-left: 0;
-  }
-
-  p {
-    margin: 0;
-  }
-}

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

@@ -1,120 +0,0 @@
-import { ICanaryAnalysisResultsStats } from 'kayenta/domain';
-import { ICanaryMetricConfig } from 'kayenta/domain/ICanaryConfig';
-import { ICanaryExecutionStatusResult } from 'kayenta/domain/ICanaryExecutionStatusResult';
-import { IMetricSetPair } from 'kayenta/domain/IMetricSetPair';
-import FormattedDate from 'kayenta/layout/formattedDate';
-import { ITableColumn, NativeTable } from 'kayenta/layout/table';
-import { ICanaryState } from 'kayenta/reducers';
-import { runSelector, selectedMetricConfigSelector } from 'kayenta/selectors';
-import { round } from 'lodash';
-import * as React from 'react';
-import { connect } from 'react-redux';
-
-import './metricResultStats.less';
-
-export interface IMetricResultStatsStateProps {
-  metricConfig: ICanaryMetricConfig;
-  metricSetPair: IMetricSetPair;
-  run: ICanaryExecutionStatusResult;
-  service: string;
-}
-
-const getStats = (run: ICanaryExecutionStatusResult, id: string, target: string): ICanaryAnalysisResultsStats => {
-  const result = run.result.judgeResult.results.find((r) => r.id === id);
-  if (target === 'experiment') {
-    return result.experimentMetadata.stats;
-  } else if (target === 'control') {
-    return result.controlMetadata.stats;
-  } else {
-    return null;
-  }
-};
-
-interface IResultMetadataRow {
-  label: string;
-  getContent: () => JSX.Element;
-}
-
-const ResultMetadataRow = ({ row }: { row: IResultMetadataRow }) => {
-  if (!row.getContent()) {
-    return null;
-  }
-
-  return (
-    <div>
-      <label className="label uppercase color-text-primary">{row.label}</label>
-      {row.getContent()}
-    </div>
-  );
-};
-
-const MetricResultStats = ({ metricConfig, metricSetPair, run }: IMetricResultStatsStateProps) => {
-  const tableColumns: Array<ITableColumn<string>> = [
-    {
-      getContent: (target) => <span>{target === 'control' ? 'Baseline' : 'Canary'}</span>,
-    },
-    {
-      label: 'start',
-      getContent: (target) => <FormattedDate dateIso={metricSetPair.scopes[target].startTimeIso} />,
-      hide: () => {
-        const request = run.canaryExecutionRequest;
-        const configuredControlStart = request.scopes[metricConfig.scopeName].controlScope.start;
-        const actualControlStart = metricSetPair.scopes.control.startTimeIso;
-
-        const configuredExperimentStart = request.scopes[metricConfig.scopeName].experimentScope.start;
-        const actualExperimentStart = metricSetPair.scopes.experiment.startTimeIso;
-
-        return configuredControlStart === actualControlStart && configuredExperimentStart === actualExperimentStart;
-      },
-    },
-    {
-      label: 'count',
-      getContent: (target) => <span>{getStats(run, metricSetPair.id, target).count}</span>,
-    },
-    {
-      label: 'avg',
-      getContent: (target) => <span>{round(getStats(run, metricSetPair.id, target).mean, 3)}</span>,
-    },
-    {
-      label: 'max',
-      getContent: (target) => <span>{round(getStats(run, metricSetPair.id, target).max, 3)}</span>,
-    },
-    {
-      label: 'min',
-      getContent: (target) => <span>{round(getStats(run, metricSetPair.id, target).min, 3)}</span>,
-    },
-  ];
-
-  const metadataRows: IResultMetadataRow[] = [
-    {
-      label: 'classification reason',
-      getContent: () => {
-        const result = run.result.judgeResult.results.find((r) => r.id === metricSetPair.id);
-
-        if (!result.classificationReason) {
-          return null;
-        }
-
-        return <p>{result.classificationReason}</p>;
-      },
-    },
-  ];
-
-  return (
-    <div className="metric-stats vertical">
-      {metadataRows.map((row) => (
-        <ResultMetadataRow row={row} key={row.label} />
-      ))}
-      <NativeTable columns={tableColumns} rows={['control', 'experiment']} rowKey={(row) => row} />
-    </div>
-  );
-};
-
-const mapStateToProps = (state: ICanaryState): IMetricResultStatsStateProps => ({
-  metricConfig: selectedMetricConfigSelector(state),
-  metricSetPair: state.selectedRun.metricSetPair.pair,
-  run: runSelector(state),
-  service: selectedMetricConfigSelector(state).query.type,
-});
-
-export default connect(mapStateToProps)(MetricResultStats);

package/src/kayenta/report/detail/metricResults.less

@@ -1,12 +0,0 @@
-.metric-results {
-  &:after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: 8px;
-    box-shadow: inset 0px -8px 4px -4px #fff;
-    z-index: 2;
-  }
-}

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

@@ -1,52 +0,0 @@
-import { ICanaryAnalysisResult } from 'kayenta/domain/ICanaryJudgeResult';
-import { ICanaryState } from 'kayenta/reducers';
-import { judgeResultSelector } from 'kayenta/selectors';
-import * as React from 'react';
-import { connect } from 'react-redux';
-
-import ListDetail from '../../layout/listDetail';
-import MetricResultDetail from './metricResultDetail';
-import MetricResultsList from './metricResultsList';
-
-import './metricResults.less';
-
-interface IMetricResultsStateProps {
-  metricResults: ICanaryAnalysisResult[];
-  selectedMetricResult: ICanaryAnalysisResult;
-}
-
-const MetricResults = ({ metricResults, selectedMetricResult }: IMetricResultsStateProps) => {
-  const list = <MetricResultsList results={metricResults} />;
-  const detail = <MetricResultDetail result={selectedMetricResult} />;
-
-  return (
-    <ListDetail
-      list={list}
-      listClass="vertical"
-      listWidth={5}
-      detail={detail}
-      detailClass="vertical"
-      detailWidth={9}
-      className="metric-results flex-1"
-    />
-  );
-};
-
-const mapStateToProps = (state: ICanaryState): IMetricResultsStateProps => {
-  const {
-    selectedRun: { selectedGroup, selectedMetric },
-  } = state;
-  const result = judgeResultSelector(state);
-
-  // Build list of metric results to render.
-  const filter: (r: ICanaryAnalysisResult) => boolean = selectedGroup
-    ? (r) => r.groups.includes(selectedGroup)
-    : () => true;
-
-  return {
-    metricResults: Object.values(result.results).filter(filter),
-    selectedMetricResult: Object.values(result.results).find((r) => r.id === selectedMetric),
-  };
-};
-
-export default connect(mapStateToProps)(MetricResults);