@spinnaker/kayenta 0.0.0-main-2

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

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

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

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

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

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

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

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

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

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

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

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