@spinnaker/kayenta 2025.3.0 → 2025.4.1

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

@@ -1,65 +0,0 @@
-import * as React from 'react';
-import { connect, Dispatch } from 'react-redux';
-
-import * as Creators from '../../actions/creators';
-import { ICanaryAnalysisResult, MetricClassificationLabel } from '../../domain';
-import { ICanaryState } from '../../reducers';
-
-export interface IMetricFiltersOwnProps {
-  results: ICanaryAnalysisResult[];
-}
-
-interface IMetricFiltersStateProps {
-  metricFilters: MetricClassificationLabel[];
-}
-
-interface IMetricFiltersDispatchProps {
-  toggle: (classification: MetricClassificationLabel) => void;
-}
-
-const MetricFilters = ({
-  results,
-  metricFilters,
-  toggle,
-}: IMetricFiltersOwnProps & IMetricFiltersStateProps & IMetricFiltersDispatchProps) => {
-  const options = [
-    MetricClassificationLabel.Error,
-    MetricClassificationLabel.High,
-    MetricClassificationLabel.Low,
-    MetricClassificationLabel.Nodata,
-    MetricClassificationLabel.Pass,
-  ]
-    .map((classification) => ({
-      classification,
-      count: results.filter((r) => r.classification === classification).length,
-    }))
-    .filter((option) => option.count);
-
-  const checkboxes = options.map((o) => (
-    <label key={o.classification}>
-      <input
-        type="checkbox"
-        checked={metricFilters.includes(o.classification)}
-        onChange={() => toggle(o.classification)}
-      />{' '}
-      {o.classification} ({o.count}){' '}
-    </label>
-  ));
-
-  return <div className="metric-filter-options horizontal center">{checkboxes}</div>;
-};
-
-const mapStateToProps = (state: ICanaryState): IMetricFiltersStateProps => ({
-  metricFilters: state.selectedRun.metricFilters,
-});
-
-const mapDispatchToProps = (
-  dispatch: Dispatch<ICanaryState>,
-  ownProps: IMetricFiltersOwnProps,
-): IMetricFiltersOwnProps & IMetricFiltersDispatchProps => ({
-  toggle: (classification: MetricClassificationLabel) =>
-    dispatch(Creators.toggleMetricClassificationFilter({ classification })),
-  ...ownProps,
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(MetricFilters);

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

@@ -1,27 +0,0 @@
-import { ITableColumn } from 'kayenta/layout/table';
-import * as React from 'react';
-
-import { BreakString } from '@spinnaker/core';
-
-import MetricResultClassification from './metricResultClassification';
-import MetricResultDeviation from './metricResultDeviation';
-import { IMetricResultsTableRow } from './metricResultsList';
-
-export const metricResultsColumns: Array<ITableColumn<IMetricResultsTableRow>> = [
-  {
-    label: 'metric name',
-    getContent: ({ metricName }) => <BreakString>{metricName}</BreakString>,
-    width: 5,
-  },
-  {
-    label: 'deviation',
-    getContent: ({ results }) =>
-      results[0].resultMetadata && <MetricResultDeviation ratio={results[0].resultMetadata.ratio} />,
-    width: 1,
-  },
-  {
-    label: 'result',
-    getContent: ({ results }) => <MetricResultClassification classification={results[0].classification} />,
-    width: 1,
-  },
-];

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

@@ -1,44 +0,0 @@
-.metric-results-list {
-  .table-header {
-    h6 {
-      padding-left: 5px;
-    }
-  }
-
-  .tabs-vertical {
-    overflow-y: auto;
-    display: block;
-    li {
-      padding: 8px 0 8px 5px;
-    }
-  }
-
-  .metric-result-classification {
-    margin-right: 3px;
-  }
-
-  .table-row {
-    cursor: pointer;
-  }
-
-  .list-group {
-    margin-bottom: 0;
-  }
-
-  li.multiple-results {
-    padding-bottom: 0;
-    border: none;
-
-    &:hover {
-      border: none;
-    }
-  }
-
-  .multiple-results-table {
-    padding-left: 8px;
-
-    h6 {
-      margin-top: 7px;
-    }
-  }
-}

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

@@ -1,120 +0,0 @@
-import classNames from 'classnames';
-import * as Creators from 'kayenta/actions/creators';
-import { ICanaryAnalysisResult } from 'kayenta/domain/ICanaryJudgeResult';
-import { Table } from 'kayenta/layout/table';
-import { ICanaryState } from 'kayenta/reducers';
-import * as React from 'react';
-import { connect, Dispatch } from 'react-redux';
-
-import { MetricClassificationLabel } from '../../domain';
-import MetricFilters from './metricResultsClassificationFilters';
-import { metricResultsColumns } from './metricResultsColumns';
-import MultipleResultsTable from './multipleResultsTable';
-
-import './metricResultsList.less';
-
-export interface IResultsListOwnProps {
-  results: ICanaryAnalysisResult[];
-}
-
-interface IResultsListDispatchProps {
-  select: (metric: string) => void;
-}
-
-interface IResultsListStateProps {
-  selectedMetric: string;
-  metricFilters: MetricClassificationLabel[];
-}
-
-export interface IMetricResultsTableRow {
-  metricName: string;
-  results: ICanaryAnalysisResult[];
-  hasMultipleRows: boolean;
-}
-
-const buildTableRows = (
-  results: ICanaryAnalysisResult[],
-  metricFilters: MetricClassificationLabel[],
-): IMetricResultsTableRow[] => {
-  const unfilteredCounts = results.reduce((map, result) => {
-    if (!map.has(result.name)) {
-      map.set(result.name, 0);
-    }
-    map.set(result.name, map.get(result.name) + 1);
-    return map;
-  }, new Map<string, number>());
-
-  const tableRowsByMetricName = results
-    .filter((result) => !metricFilters.length || metricFilters.includes(result.classification))
-    .reduce(
-      (map, result) =>
-        map.has(result.name)
-          ? map.set(result.name, {
-              metricName: result.name,
-              results: map.get(result.name).results.concat(result),
-              hasMultipleRows: unfilteredCounts.get(result.name) > 1,
-            })
-          : map.set(result.name, {
-              metricName: result.name,
-              results: [result],
-              hasMultipleRows: unfilteredCounts.get(result.name) > 1,
-            }),
-      new Map<string, IMetricResultsTableRow>(),
-    );
-
-  return Array.from(tableRowsByMetricName.values());
-};
-
-const buildRowForMetricWithMultipleResults = (row: IMetricResultsTableRow) => {
-  if (!row.hasMultipleRows) {
-    return null;
-  }
-
-  return (
-    <li className="horizontal multiple-results">
-      <section className="vertical flex-fill">
-        <div>{row.metricName}</div>
-        <MultipleResultsTable results={row.results} />
-      </section>
-    </li>
-  );
-};
-
-const ResultsList = ({
-  results,
-  select,
-  selectedMetric,
-  metricFilters,
-}: IResultsListOwnProps & IResultsListDispatchProps & IResultsListStateProps) => {
-  const rows = buildTableRows(results, metricFilters);
-  return (
-    <section className="vertical metric-results-list flex-1">
-      <MetricFilters results={results} />
-      <Table
-        rowKey={(r) => r.metricName}
-        tableBodyClassName="list-unstyled tabs-vertical flex-1 sp-padding-xl-bottom"
-        rowClassName={(r) => classNames('horizontal', { selected: r.results[0].id === selectedMetric })}
-        rows={rows}
-        columns={metricResultsColumns}
-        onRowClick={(r) => select(r.results[0].id)}
-        className="flex-1 vertical"
-        customRow={buildRowForMetricWithMultipleResults}
-      />
-    </section>
-  );
-};
-
-const mapStateToProps = (state: ICanaryState): IResultsListStateProps => ({
-  selectedMetric: state.selectedRun.selectedMetric,
-  metricFilters: state.selectedRun.metricFilters,
-});
-
-const mapDispatchToProps = (
-  dispatch: Dispatch<ICanaryState>,
-  ownProps: IResultsListOwnProps,
-): IResultsListOwnProps & IResultsListDispatchProps => ({
-  select: (metricId: string) => dispatch(Creators.selectReportMetric({ metricId })),
-  ...ownProps,
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(ResultsList);

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

@@ -1,22 +0,0 @@
-import LoadStatesBuilder from 'kayenta/components/loadStates';
-import { AsyncRequestState } from 'kayenta/reducers/asyncRequest';
-import { ICanaryState } from 'kayenta/reducers/index';
-import * as React from 'react';
-import { connect } from 'react-redux';
-
-import MetricResultDetailLayout from './metricResultDetailLayout';
-
-const MetricSetPairLoadStates = ({ state }: { state: AsyncRequestState }) => {
-  const LoadStates = new LoadStatesBuilder()
-    .onFulfilled(<MetricResultDetailLayout />)
-    .onFailed(<h3 className="heading-3 text-center">Could not load metrics.</h3>)
-    .build();
-
-  return <LoadStates state={state} />;
-};
-
-const mapStateToProps = (state: ICanaryState) => ({
-  state: state.selectedRun.metricSetPair.load,
-});
-
-export default connect(mapStateToProps)(MetricSetPairLoadStates);

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

@@ -1,81 +0,0 @@
-import classNames from 'classnames';
-import * as Creators from 'kayenta/actions/creators';
-import { ICanaryAnalysisResult } from 'kayenta/domain/ICanaryJudgeResult';
-import { ITableColumn, Table } from 'kayenta/layout/table';
-import { ICanaryState } from 'kayenta/reducers';
-import { selectedMetricResultIdSelector } from 'kayenta/selectors';
-import { chain } from 'lodash';
-import * as React from 'react';
-import { connect, Dispatch } from 'react-redux';
-
-import { BreakString } from '@spinnaker/core';
-
-import MetricResultClassification from './metricResultClassification';
-import MetricResultDeviation from './metricResultDeviation';
-
-interface IMultipleResultsTableOwnProps {
-  results: ICanaryAnalysisResult[];
-}
-
-interface IMultipleResultsTableStateProps {
-  selectedResult: string;
-}
-
-interface IMultipleResultsTableDispatchProps {
-  select: (metricId: string) => void;
-}
-
-const MultipleResultsTable = ({
-  results,
-  select,
-  selectedResult,
-}: IMultipleResultsTableOwnProps & IMultipleResultsTableStateProps & IMultipleResultsTableDispatchProps) => {
-  const tagKeys = chain(results)
-    .flatMap((r) => Object.keys(r.tags || {}))
-    .uniq()
-    .value();
-
-  let columns: Array<ITableColumn<ICanaryAnalysisResult>> = tagKeys.map((key) => ({
-    label: key,
-    width: 5,
-    getContent: (result: ICanaryAnalysisResult) => <BreakString>{result.tags[key]}</BreakString>,
-  }));
-
-  columns = columns.concat([
-    {
-      width: 1,
-      getContent: ({ resultMetadata }) => resultMetadata && <MetricResultDeviation ratio={resultMetadata.ratio} />,
-    },
-    {
-      width: 1,
-      getContent: ({ classification }) => <MetricResultClassification classification={classification} />,
-    },
-  ]);
-
-  return (
-    <Table
-      rows={results}
-      columns={columns}
-      className="multiple-results-table"
-      headerClassName="sticky-header-2"
-      rowClassName={(r) => classNames('horizontal', { selected: r.id === selectedResult })}
-      rowKey={(r) =>
-        Object.entries(r.tags || {})
-          .map(([key, value]) => `${key}:${value}`)
-          .join(':')
-      }
-      onRowClick={(r) => select(r.id)}
-    />
-  );
-};
-
-const mapStateToProps = (state: ICanaryState) => ({
-  selectedResult: selectedMetricResultIdSelector(state),
-});
-
-const mapDispatchToProps = (dispatch: Dispatch<ICanaryState>, ownProps: IMultipleResultsTableOwnProps) => ({
-  ...ownProps,
-  select: (metricId: string) => dispatch(Creators.selectReportMetric({ metricId })),
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(MultipleResultsTable);

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

@@ -1,57 +0,0 @@
-import { ICanaryExecutionException } from 'kayenta/domain';
-import { ICanaryState } from 'kayenta/reducers';
-import * as React from 'react';
-import { connect } from 'react-redux';
-
-import SourceLinks from './sourceLinks';
-
-import './reportExplanation.less';
-
-interface IReportExceptionProps {
-  exception: ICanaryExecutionException;
-}
-
-const ReportException = ({ exception }: IReportExceptionProps) => {
-  const errorMessages = [];
-  if (exception.details) {
-    // error messages can be in an array on the details, or a single field, or possibly both?
-    // it's unclear based on Orca where the error message might be
-    const { error, errors } = exception.details;
-    if (error) {
-      errorMessages.push(error);
-    }
-    if (errors?.length) {
-      errors.forEach((m: string) => errorMessages.push(m));
-    }
-  }
-  // if there were no errors, set a default message
-  if (!errorMessages.length) {
-    errorMessages.push('No error message provided. Click the "Report" link to see more details.');
-  }
-
-  return (
-    <>
-      <h3 className="text-center">Canary report failed</h3>
-      <dl>
-        <dt>Details</dt>
-        <dd>
-          {errorMessages.map((message, i) => (
-            <div key={i}>
-              <code>{message}</code>
-            </div>
-          ))}
-        </dd>
-        <dt>Source</dt>
-        <dd>
-          <SourceLinks />
-        </dd>
-      </dl>
-    </>
-  );
-};
-
-const mapStateToProps = (state: ICanaryState) => ({
-  exception: state.selectedRun.run.exception,
-});
-
-export default connect(mapStateToProps)(ReportException);

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

@@ -1,12 +0,0 @@
-.report-explanation {
-  background-color: var(--color-warning);
-
-  height: 30px;
-  margin-bottom: 5px;
-  margin-left: 15px;
-  padding-top: 4px;
-
-  font-weight: bold;
-  font-size: 14px;
-  text-align: center;
-}

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

@@ -1,32 +0,0 @@
-import { ICanaryExecutionStatusResult } from 'kayenta/domain/ICanaryExecutionStatusResult';
-import { ICanaryState } from 'kayenta/reducers';
-import * as React from 'react';
-import { connect } from 'react-redux';
-
-import './reportExplanation.less';
-
-interface IReportMetadata {
-  run: ICanaryExecutionStatusResult;
-}
-
-const getReason = (run: ICanaryExecutionStatusResult): string =>
-  run?.result?.judgeResult?.score?.classificationReason ?? null;
-
-const ReportExplanation = ({ run }: IReportMetadata) => {
-  const classificationReason = getReason(run);
-
-  if (classificationReason) {
-    return (
-      <section>
-        <div className="report-explanation">{classificationReason}</div>
-      </section>
-    );
-  }
-  return null;
-};
-
-const mapStateToProps = (state: ICanaryState) => ({
-  run: state.selectedRun.run,
-});
-
-export default connect(mapStateToProps)(ReportExplanation);

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

@@ -1,167 +0,0 @@
-import { ICanaryExecutionStatusResult } from 'kayenta/domain/ICanaryExecutionStatusResult';
-import FormattedDate from 'kayenta/layout/formattedDate';
-import { ICanaryState } from 'kayenta/reducers';
-import * as React from 'react';
-import { connect } from 'react-redux';
-
-import { HoverablePopover } from '@spinnaker/core';
-
-import SourceLinks from './sourceLinks';
-
-interface IReportMetadata {
-  run: ICanaryExecutionStatusResult;
-}
-
-interface IMetadataGroup {
-  label?: string;
-  entries: IMetadataEntry[];
-}
-
-interface IMetadataEntry {
-  label: string;
-  getContent: () => JSX.Element;
-  popover?: boolean;
-}
-
-const Label = ({ label, extraClass }: { label: string; extraClass?: string }) => (
-  <label className={`label uppercase color-text-primary ${extraClass}`}>{label}</label>
-);
-
-// TODO(dpeach): this only supports canary runs with a single scope.
-const buildScopeMetadataEntries = (run: ICanaryExecutionStatusResult): IMetadataGroup[] => {
-  const request = run.canaryExecutionRequest;
-  const scopes = Object.values(request.scopes);
-  if (scopes.length > 1) {
-    return null;
-  }
-
-  const {
-    controlScope: { step, location: controlLocation, scope: controlScope },
-    experimentScope: {
-      // Since baseline starttime may be offset in canaries from Orca,
-      // Choose the experiment start and end to represent
-      // the canary start and end times
-      start: experimentStart,
-      end: experimentEnd,
-      location: experimentLocation,
-      scope: experimentScope,
-    },
-  } = scopes[0];
-
-  return [
-    {
-      label: 'baseline',
-      entries: [
-        {
-          label: 'scope',
-          popover: true,
-          getContent: () => <p className="kayenta-scope">{controlScope}</p>,
-        },
-        {
-          label: 'location',
-          getContent: () => <p>{controlLocation}</p>,
-        },
-      ],
-    },
-    {
-      label: 'canary',
-      entries: [
-        {
-          label: 'scope',
-          popover: true,
-          getContent: () => <p className="kayenta-scope">{experimentScope}</p>,
-        },
-        {
-          label: 'location',
-          getContent: () => <p>{experimentLocation}</p>,
-        },
-      ],
-    },
-    {
-      label: 'time',
-      entries: [
-        {
-          label: 'start',
-          getContent: () => (
-            <p>
-              <FormattedDate dateIso={experimentStart} />
-            </p>
-          ),
-        },
-        {
-          label: 'end',
-          getContent: () => (
-            <p>
-              <FormattedDate dateIso={experimentEnd} />
-            </p>
-          ),
-        },
-        {
-          label: 'step',
-          getContent: () => {
-            const mins = step / 60;
-            return (
-              <p>
-                {mins} min
-                {mins === 1 ? '' : 's'}
-              </p>
-            );
-          },
-        },
-      ],
-    },
-  ];
-};
-
-const ReportMetadata = ({ run }: IReportMetadata) => {
-  const {
-    thresholds: { marginal, pass },
-  } = run.canaryExecutionRequest;
-
-  const metadataGroups = buildScopeMetadataEntries(run) || [];
-  metadataGroups.push({
-    label: 'threshold',
-    entries: [
-      {
-        label: 'marginal',
-        getContent: () => <p>{marginal}</p>,
-      },
-      {
-        label: 'pass',
-        getContent: () => <p>{pass}</p>,
-      },
-    ],
-  });
-
-  return (
-    <section className="report-metadata">
-      {metadataGroups.map((group, index) => (
-        <div className={`group group-${group.label}`} key={group.label || index}>
-          <Label label={group.label || ''} extraClass="label-lg" />
-          <ul className="list-unstyled">
-            {group.entries.map((e) => (
-              <li key={e.label || index}>
-                <Label label={e.label} />
-                {e.popover ? (
-                  <HoverablePopover template={e.getContent()}>{e.getContent()}</HoverablePopover>
-                ) : (
-                  <>{e.getContent()}</>
-                )}
-              </li>
-            ))}
-          </ul>
-        </div>
-      ))}
-      <div className="group group-source" key="source">
-        <Label label="Source" extraClass="label-lgf" />
-        <SourceLinks />
-      </div>
-    </section>
-  );
-};
-
-const mapStateToProps = (state: ICanaryState) => ({
-  run: state.selectedRun.run,
-});
-
-export default connect(mapStateToProps)(ReportMetadata);

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

@@ -1,47 +0,0 @@
-.report-scores {
-  height: 40px;
-  margin-bottom: 20px;
-  .group-score,
-  .all-metric-results-header {
-    height: 30px;
-    color: white;
-    border-right: 1px solid white;
-    padding-top: 4px;
-
-    h3 {
-      font-weight: 600;
-    }
-  }
-
-  .group-score:last-of-type {
-    border-right: none;
-  }
-
-  .report-score {
-    &.active {
-      .arrow-down {
-        width: 0;
-        height: 0;
-        margin: 5px auto 0 auto;
-        border-left: 8px solid transparent;
-        border-right: 8px solid transparent;
-        border-top: 8px solid transparent;
-      }
-    }
-  }
-
-  .all-metric-results-header {
-    border: 1px solid var(--color-titanium);
-    width: 70%;
-    margin: 0 auto;
-
-    .arrow-down {
-      &.inner {
-        margin-top: -9px;
-      }
-      &.outer {
-        margin-top: 4px;
-      }
-    }
-  }
-}