@spinnaker/kayenta 0.0.0-main-2

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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