@spinnaker/kayenta 0.0.0-main-2

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

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

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

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

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

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

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

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

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

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

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

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