@spinnaker/kayenta 0.0.0-2025.1-0

package/src/kayenta/selectors/filterTemplatesSelectors.ts

@@ -0,0 +1,87 @@
+import { validateTemplate } from 'kayenta/edit/filterTemplatesValidation';
+import { PrometheusQueryType } from 'kayenta/metricStore/prometheus/domain/IPrometheusCanaryMetricSetQueryConfig';
+import {
+  getPrometheusQueryType,
+  prometheusQueryTypeToTransformFunction,
+} from 'kayenta/metricStore/prometheus/queryTypeSelectors';
+import { ICanaryState } from 'kayenta/reducers';
+import {
+  configTemplatesSelector,
+  editingMetricSelector,
+  editingTemplateSelector,
+  metricListSelector,
+} from 'kayenta/selectors';
+import { get, identity, isEmpty } from 'lodash';
+import { createSelector } from 'reselect';
+
+// TODO(mneterval): More elegant separation of prometheus-specific logic
+
+export interface ITemplateTransformFunctions {
+  fromValue: (template: string) => string;
+  toValue: (template: string) => string;
+}
+
+// Map of provider-specific query type to methods that transform templates between how they are persisted and displayed in the UI
+export const queryTypeToTransformFunctions: { [queryType: string]: ITemplateTransformFunctions } = {
+  ...prometheusQueryTypeToTransformFunction,
+};
+
+export const queryTypeSelector = createSelector(
+  (state: ICanaryState) => state.selectedConfig.editingMetric,
+  (editingMetric) => {
+    return editingMetric && editingMetric.query.serviceType === 'prometheus'
+      ? getPrometheusQueryType(editingMetric)
+      : null;
+  },
+);
+
+export const transformInlineTemplateForDisplay = createSelector(queryTypeSelector, (queryType) =>
+  get(queryTypeToTransformFunctions, [queryType, 'fromValue'], identity),
+);
+
+export const transformInlineTemplateForSave = createSelector(queryTypeSelector, (queryType) =>
+  get(queryTypeToTransformFunctions, [queryType, 'toValue'], identity),
+);
+
+export const selectedTemplateNameSelector = (state: ICanaryState): string =>
+  get(state, 'selectedConfig.editingMetric.query.customFilterTemplate');
+
+export const inlineTemplateValueSelector = createSelector(
+  (state: ICanaryState) => get(state, 'selectedConfig.editingMetric.query.customInlineTemplate'),
+  transformInlineTemplateForDisplay,
+  (template: string, transformer: (template: string) => string): string => transformer(template),
+);
+
+export const editingTemplateValidationSelector = createSelector(
+  editingTemplateSelector,
+  configTemplatesSelector,
+  metricListSelector,
+  editingMetricSelector,
+  (editingTemplate, configTemplates, metricList, editingMetric) =>
+    validateTemplate({
+      editingTemplate,
+      configTemplates,
+      metricList,
+      editingMetric,
+    }),
+);
+
+export const isFilterTemplateValidSelector = createSelector(editingTemplateValidationSelector, (validation) =>
+  isEmpty(Object.keys(validation.errors)),
+);
+
+export const isInlineTemplateValidSelector = createSelector(inlineTemplateValueSelector, (value) => !isEmpty(value));
+
+const inlineTemplateQueryTypes = [PrometheusQueryType.PROMQL];
+
+export const useInlineTemplateEditorSelector = createSelector(queryTypeSelector, (queryType) =>
+  inlineTemplateQueryTypes.includes(queryType),
+);
+
+export const isTemplateValidSelector = createSelector(
+  useInlineTemplateEditorSelector,
+  isFilterTemplateValidSelector,
+  isInlineTemplateValidSelector,
+  (isInlineTemplate, isFilterTemplateValid, isInlineTemplateValid) =>
+    isInlineTemplate ? isInlineTemplateValid : isFilterTemplateValid,
+);

package/src/kayenta/selectors/index.ts

@@ -0,0 +1,62 @@
+import { ICanaryConfig, ICanaryMetricConfig } from 'kayenta/domain/index';
+import { get } from 'lodash';
+import { createSelector } from 'reselect';
+
+import { ICanaryExecutionStatusResult } from '../domain/ICanaryExecutionStatusResult';
+import { validateMetric } from '../edit/editMetricValidation';
+import { ICanaryState } from '../reducers/index';
+
+export const runSelector = (state: ICanaryState): ICanaryExecutionStatusResult => state.selectedRun.run;
+
+export const judgeResultSelector = createSelector(runSelector, (run) => run.result?.judgeResult);
+
+export const configIdSelector = createSelector(runSelector, (run) => run.config.id);
+
+export const metricResultsSelector = createSelector(runSelector, (run) => run.result?.judgeResult.results ?? []);
+
+export const canaryExecutionRequestSelector = createSelector(runSelector, (run) => run.canaryExecutionRequest);
+
+export const serializedCanaryConfigSelector = createSelector(runSelector, (run) => run.config);
+
+export const serializedGroupWeightsSelector = createSelector(
+  serializedCanaryConfigSelector,
+  (config: ICanaryConfig) => config.classifier.groupWeights,
+);
+
+export const selectedMetricResultIdSelector = (state: ICanaryState): string => state.selectedRun.selectedMetric;
+
+export const selectedMetricResultSelector = createSelector(
+  selectedMetricResultIdSelector,
+  metricResultsSelector,
+  (id, results) => results.find((result) => result.id === id),
+);
+
+export const selectedMetricConfigSelector = createSelector(
+  selectedMetricResultSelector,
+  serializedCanaryConfigSelector,
+  (metric, config) => config.metrics.find((m) => m.name === metric.name),
+);
+
+export const selectedConfigSelector = (state: ICanaryState) => state.selectedConfig.config;
+
+export const configTemplatesSelector = createSelector(selectedConfigSelector, (config) =>
+  config ? config.templates : null,
+);
+
+export const editingTemplateSelector = (state: ICanaryState) => state.selectedConfig.editingTemplate;
+
+export const resolveConfigIdFromExecutionId = (state: ICanaryState, executionId: string): string => {
+  const executions = get(state, ['data', 'executions', 'data'], []);
+  const execution = executions.find((ex) => ex.pipelineId === executionId);
+  return execution.canaryConfigId;
+};
+
+export const editingMetricSelector = (state: ICanaryState): ICanaryMetricConfig => state.selectedConfig.editingMetric;
+
+export const metricListSelector = (state: ICanaryState): ICanaryMetricConfig[] => state.selectedConfig.metricList;
+
+export const editingMetricValidationErrorsSelector = createSelector(
+  editingMetricSelector,
+  metricListSelector,
+  validateMetric,
+);

package/src/kayenta/service/canaryConfig.service.ts

@@ -0,0 +1,122 @@
+import { CanarySettings } from 'kayenta/canary.settings';
+import {
+  ICanaryConfig,
+  ICanaryConfigSummary,
+  ICanaryConfigUpdateResponse,
+  ICanaryMetricConfig,
+  IJudge,
+  IKayentaAccount,
+} from 'kayenta/domain';
+import { ICanaryState } from 'kayenta/reducers';
+import { omit } from 'lodash';
+
+import { REST } from '@spinnaker/core';
+
+export function getCanaryConfigById(id: string): PromiseLike<ICanaryConfig> {
+  return REST('/v2/canaryConfig')
+    .path(id)
+    .get()
+    .then((config: ICanaryConfig) => ({
+      ...config,
+      id,
+    }));
+}
+
+export function getCanaryConfigSummaries(...application: string[]): PromiseLike<ICanaryConfigSummary[]> {
+  return REST('/v2/canaryConfig').query({ application }).get();
+}
+
+export function updateCanaryConfig(config: ICanaryConfig): PromiseLike<ICanaryConfigUpdateResponse> {
+  return REST('/v2/canaryConfig').path(config.id).put(config);
+}
+
+export function createCanaryConfig(config: ICanaryConfig): PromiseLike<ICanaryConfigUpdateResponse> {
+  return REST('/v2/canaryConfig').post(config);
+}
+
+export function deleteCanaryConfig(id: string): PromiseLike<void> {
+  return REST('/v2/canaryConfig').path(id).delete();
+}
+
+export function listJudges(): PromiseLike<IJudge[]> {
+  return REST('/v2/canaries/judges')
+    .get()
+    .then((judges: IJudge[]) => judges.filter((judge) => judge.visible));
+}
+
+export function listKayentaAccounts(): PromiseLike<IKayentaAccount[]> {
+  return REST('/v2/canaries/credentials').useCache().get();
+}
+
+// Not sure if this is the right way to go about this. We have pieces of the config
+// living on different parts of the store. Before, e.g., updating the config, we should
+// reconstitute it into a single object that reflects the user's changes.
+export function mapStateToConfig(state: ICanaryState): ICanaryConfig {
+  const { selectedConfig } = state;
+  if (selectedConfig.config) {
+    return {
+      ...selectedConfig.config,
+      judge: selectedConfig.judge.judgeConfig,
+      metrics: selectedConfig.metricList.map((metric) => omit(metric, 'id')),
+      classifier: {
+        ...selectedConfig.config.classifier,
+        groupWeights: selectedConfig.group.groupWeights,
+      },
+    };
+  } else {
+    return null;
+  }
+}
+
+export function buildNewConfig(state: ICanaryState): ICanaryConfig {
+  let configName = 'new-config';
+  let i = 1;
+  while ((state.data.configSummaries || []).some((summary) => summary.name === configName)) {
+    configName = `new-config-${i}`;
+    i++;
+  }
+
+  return {
+    name: configName,
+    applications: [state.data.application.name],
+    description: '',
+    isNew: true,
+    metrics: [] as ICanaryMetricConfig[],
+    configVersion: '1',
+    templates: {},
+    classifier: {
+      groupWeights: {} as { [key: string]: number },
+    },
+    judge: {
+      name: CanarySettings.defaultJudge || 'NetflixACAJudge-v1.0',
+      judgeConfigurations: {},
+    },
+  };
+}
+
+export function buildConfigCopy(state: ICanaryState): ICanaryConfig {
+  const config: ICanaryConfig = {
+    ...mapStateToConfig(state),
+    applications: [state.data.application.name], // Copy into current application.
+  };
+  if (!config) {
+    return null;
+  }
+
+  // Probably a rare case, but someone could be lazy about naming their configs.
+  let configName = `${config.name}-copy`;
+  let i = 1;
+  while ((state.data.configSummaries || []).some((summary) => summary.name === configName)) {
+    configName = `${config.name}-copy-${i}`;
+    i++;
+  }
+
+  return omit(
+    {
+      ...config,
+      name: configName,
+      isNew: true,
+    },
+    'id',
+  );
+}

package/src/kayenta/service/canaryRun.service.ts

@@ -0,0 +1,60 @@
+import { CanarySettings } from 'kayenta/canary.settings';
+import {
+  ICanaryExecutionRequest,
+  ICanaryExecutionRequestParams,
+  ICanaryExecutionResponse,
+  ICanaryExecutionStatusResult,
+  IMetricSetPair,
+} from 'kayenta/domain';
+
+import { ReactInjector, REST } from '@spinnaker/core';
+
+export const getCanaryRun = (configId: string, canaryExecutionId: string): PromiseLike<ICanaryExecutionStatusResult> =>
+  REST('/v2/canaries/canary')
+    .path(configId, canaryExecutionId)
+    .query({ storageAccountName: CanarySettings.storageAccountName })
+    .useCache()
+    .get()
+    .then((run: ICanaryExecutionStatusResult) => {
+      const { config } = run;
+      config.id = configId;
+      run.id = canaryExecutionId;
+      run.result?.judgeResult.results.sort((a, b) => a.name.localeCompare(b.name));
+      return run;
+    });
+
+export const startCanaryRun = (
+  configId: string,
+  executionRequest: ICanaryExecutionRequest,
+  params: ICanaryExecutionRequestParams = {},
+): PromiseLike<ICanaryExecutionResponse> => {
+  return REST('/v2/canaries/canary')
+    .path(configId)
+    .query(params as any)
+    .post(executionRequest);
+};
+
+export const getMetricSetPair = (metricSetPairListId: string, metricSetPairId: string): PromiseLike<IMetricSetPair> =>
+  REST('/v2/canaries/metricSetPairList')
+    .path(metricSetPairListId)
+    .query({ storageAccountName: CanarySettings.storageAccountName })
+    .useCache()
+    .get()
+    .then((list: IMetricSetPair[]) => list.find((pair) => pair.id === metricSetPairId));
+
+export const listCanaryExecutions = (application: string): PromiseLike<ICanaryExecutionStatusResult[]> => {
+  const limit = ReactInjector.$stateParams.count || 20;
+  return REST('/v2/canaries').path(application, 'executions').query({ limit }).get();
+};
+
+export const getHealthLabel = (health: string, result: string): string => {
+  const healthLC = (health || '').toLowerCase();
+  const resultLC = (result || '').toLowerCase();
+  return healthLC === 'unhealthy'
+    ? 'unhealthy'
+    : resultLC === 'success'
+    ? 'healthy'
+    : resultLC === 'failure'
+    ? 'failing'
+    : 'unknown';
+};

package/src/kayenta/service/delegateFactory.ts

@@ -0,0 +1,24 @@
+export interface IDelegate {
+  name: string;
+}
+
+export interface IDelegateService<T extends IDelegate> {
+  register(delegate: T): void;
+  getDelegate(name: string): T;
+}
+
+export const buildDelegateService = <T extends IDelegate>() => {
+  class DelegateService {
+    private delegates: T[] = [];
+
+    public register(delegate: T): void {
+      this.delegates.push(delegate);
+    }
+
+    public getDelegate(name: string): T {
+      return this.delegates.find((d) => d.name === name);
+    }
+  }
+
+  return new DelegateService() as IDelegateService<T>;
+};

package/src/kayenta/service/metricsServiceMetadata.service.ts

@@ -0,0 +1,9 @@
+import { IMetricsServiceMetadata } from 'kayenta/domain/IMetricsServiceMetadata';
+
+import { REST } from '@spinnaker/core';
+
+export const listMetricsServiceMetadata = (
+  filter?: string,
+  metricsAccountName?: string,
+): PromiseLike<IMetricsServiceMetadata[]> =>
+  REST('/v2/canaries/metadata/metricsService').query({ filter, metricsAccountName }).get();

package/src/kayenta/stages/kayentaStage/AnalysisType.spec.tsx

@@ -0,0 +1,47 @@
+import { mount, ReactWrapper } from 'enzyme';
+import { KayentaAnalysisType } from 'kayenta/domain';
+import * as React from 'react';
+
+import { AnalysisType, AnalysisTypeWarning, IAnalysisTypeProps } from './AnalysisType';
+
+describe('<AnalysisType />', () => {
+  const component = (props: IAnalysisTypeProps) => mount((<AnalysisType {...props} />) as any);
+
+  const tests = [
+    {
+      it: 'only includes one radio button if only one analysis type is provided',
+      props: {
+        analysisTypes: [KayentaAnalysisType.Retrospective],
+        selectedType: KayentaAnalysisType.Retrospective,
+      },
+      assertion: (wrapper: ReactWrapper) => {
+        expect(wrapper.find('input[type="radio"]').length).toEqual(1);
+      },
+    },
+    {
+      it: 'only includes two radio buttons if only two analysis types are provided',
+      props: {
+        analysisTypes: [KayentaAnalysisType.Retrospective, KayentaAnalysisType.RealTime],
+        selectedType: KayentaAnalysisType.Retrospective,
+      },
+      assertion: (wrapper: ReactWrapper) => {
+        expect(wrapper.find('input[type="radio"]').length).toEqual(2);
+      },
+    },
+    {
+      it: 'renders a warning if selected analysis type is not one of the provided analysis types',
+      props: {
+        analysisTypes: [KayentaAnalysisType.Retrospective, KayentaAnalysisType.RealTime],
+        selectedType: KayentaAnalysisType.RealTimeAutomatic,
+      },
+      assertion: (wrapper: ReactWrapper) => {
+        expect(wrapper.find('input[type="radio"]').length).toEqual(2);
+        expect(wrapper.find(AnalysisTypeWarning).exists()).toBeTruthy();
+      },
+    },
+  ];
+
+  tests.forEach((test) => {
+    it(test.it, () => test.assertion(component(test.props)));
+  });
+});

package/src/kayenta/stages/kayentaStage/AnalysisType.tsx

@@ -0,0 +1,49 @@
+import { KayentaAnalysisType } from 'kayenta/domain';
+import * as React from 'react';
+
+import { noop } from '@spinnaker/core';
+
+export interface IAnalysisTypeProps {
+  analysisTypes: KayentaAnalysisType[];
+  selectedType: KayentaAnalysisType;
+  onChange?: (type: KayentaAnalysisType) => void;
+}
+
+export const AnalysisTypeWarning = () => (
+  <div className="alert alert-warning">
+    The analysis type you've selected isn't supported by any of this application's cloud providers. Please select a
+    different type.
+  </div>
+);
+
+export const AnalysisTypeRadioButton = ({
+  selectedType,
+  analysisTypes,
+  onChange = noop,
+  label,
+  type,
+}: IAnalysisTypeProps & { label: string; type: KayentaAnalysisType }) => {
+  if (!analysisTypes.includes(type)) {
+    return null;
+  }
+  return (
+    <div className="radio">
+      <label>
+        <input type="radio" name="analysisType" checked={selectedType === type} onChange={() => onChange(type)} />
+        {label}
+      </label>
+    </div>
+  );
+};
+
+export const AnalysisType = (props: IAnalysisTypeProps) => {
+  const { analysisTypes = [], selectedType } = props;
+  return (
+    <>
+      {!analysisTypes.includes(selectedType) && <AnalysisTypeWarning />}
+      <AnalysisTypeRadioButton {...props} label="Real Time (Automatic)" type={KayentaAnalysisType.RealTimeAutomatic} />
+      <AnalysisTypeRadioButton {...props} label="Real Time (Manual)" type={KayentaAnalysisType.RealTime} />
+      <AnalysisTypeRadioButton {...props} label="Retrospective" type={KayentaAnalysisType.Retrospective} />
+    </>
+  );
+};

package/src/kayenta/stages/kayentaStage/CanaryExecutionLabel.tsx

@@ -0,0 +1,26 @@
+import { CanaryScore } from 'kayenta/components/canaryScore';
+import { get } from 'lodash';
+import * as React from 'react';
+
+import { IExecutionStage, IExecutionStageSummary } from '@spinnaker/core';
+
+export interface ICanaryExecutionLabelProps {
+  stage: IExecutionStageSummary;
+}
+
+export const CanaryExecutionLabel = ({ stage }: ICanaryExecutionLabelProps) => {
+  const { overallScore, overallResult } = get<IExecutionStage['context']>(stage, 'masterStage.context', {});
+  const score = (
+    <CanaryScore
+      inverse={true}
+      score={overallScore}
+      result={overallResult === 'success' ? overallResult : null}
+      health={overallResult === 'success' ? null : 'unhealthy'}
+    />
+  );
+  return (
+    <span className="stage-label">
+      <span>{stage.name}</span> ({score})
+    </span>
+  );
+};

package/src/kayenta/stages/kayentaStage/analysisType.component.ts

@@ -0,0 +1,12 @@
+import { module } from 'angular';
+import { react2angular } from 'react2angular';
+
+import { withErrorBoundary } from '@spinnaker/core';
+
+import { AnalysisType } from './AnalysisType';
+
+export const KAYENTA_ANALYSIS_TYPE_COMPONENT = 'spinnaker.kayenta.analysisType.component';
+module(KAYENTA_ANALYSIS_TYPE_COMPONENT, []).component(
+  'kayentaAnalysisType',
+  react2angular(withErrorBoundary(AnalysisType, 'kayentaAnalysisType'), ['analysisTypes', 'selectedType', 'onChange']),
+);

package/src/kayenta/stages/kayentaStage/canaryRunSummaries.component.ts

@@ -0,0 +1,12 @@
+import { module } from 'angular';
+import { react2angular } from 'react2angular';
+
+import { withErrorBoundary } from '@spinnaker/core';
+
+import CanaryRunSummaries from './canaryRunSummaries';
+
+export const CANARY_RUN_SUMMARIES_COMPONENT = 'spinnaker.kayenta.canaryRunSummaries.component';
+module(CANARY_RUN_SUMMARIES_COMPONENT, []).component(
+  'canaryRunSummaries',
+  react2angular(withErrorBoundary(CanaryRunSummaries, 'canaryRunSummaries'), ['canaryRuns', 'firstScopeName']),
+);

package/src/kayenta/stages/kayentaStage/canaryRunSummaries.less

@@ -0,0 +1,5 @@
+.canary-run-summaries {
+  .native-table-header {
+    background-color: transparent;
+  }
+}

package/src/kayenta/stages/kayentaStage/canaryRunSummaries.tsx

@@ -0,0 +1,136 @@
+import { CanaryScore } from 'kayenta/components/canaryScore';
+import Styleguide from 'kayenta/layout/styleguide';
+import { ITableColumn, NativeTable } from 'kayenta/layout/table';
+import { get, has } from 'lodash';
+import * as React from 'react';
+
+import { CopyToClipboard, HoverablePopover, IStage, ReactInjector, timestamp } from '@spinnaker/core';
+
+import './canaryRunSummaries.less';
+
+export interface ICanarySummariesProps {
+  canaryRuns: IStage[];
+  firstScopeName: string;
+}
+
+export interface ICanaryRunColumn {
+  label?: string;
+  width: number;
+  getContent: (run: IStage, firstScopeName?: string) => JSX.Element;
+}
+
+export default function CanaryRunSummaries({ canaryRuns, firstScopeName }: ICanarySummariesProps) {
+  const canaryRunColumns: Array<ITableColumn<IStage>> = [
+    {
+      label: 'Canary Result',
+      getContent: (run) => {
+        return (
+          <>
+            <CanaryScore
+              score={run.context.canaryScore}
+              health={run.health}
+              result={run.result}
+              inverse={false}
+              className="label"
+            />
+            {get(run, ['context', 'warnings'], []).length > 0 && (
+              <HoverablePopover template={<CanaryRunWarningMessages messages={run.context.warnings} />}>
+                <i className="fa fa-exclamation-triangle" style={{ paddingLeft: '8px' }} />
+              </HoverablePopover>
+            )}
+          </>
+        );
+      },
+    },
+    {
+      label: 'Duration',
+      getContent: (run) => <span>{run.context.durationString || ' - '}</span>,
+    },
+    {
+      label: 'Last Updated',
+      getContent: (run) => <span>{timestamp(run.context.lastUpdated)}</span>,
+    },
+    {
+      getContent: (run) => {
+        const popoverTemplate = <CanaryRunTimestamps canaryRun={run} firstScopeName={firstScopeName} />;
+        return (
+          <section className="horizontal text-center">
+            <div className="flex-1">
+              <ReportLink canaryRun={run} />
+            </div>
+            <div className="flex-1">
+              <HoverablePopover template={popoverTemplate}>
+                <i className="far fa-clock" />
+              </HoverablePopover>
+            </div>
+          </section>
+        );
+      },
+    },
+  ];
+
+  return (
+    <Styleguide className="horizontal flex-1">
+      <NativeTable
+        rows={canaryRuns}
+        className="header-transparent flex-1"
+        columns={canaryRunColumns}
+        rowKey={(run) => run.id}
+      />
+    </Styleguide>
+  );
+}
+
+function CanaryRunTimestamps({ canaryRun, firstScopeName }: { canaryRun: IStage; firstScopeName: string }) {
+  const toolTipText = 'Copy timestamp to clipboard as UTC instant in ISO-8601 format';
+  return (
+    <section className="small">
+      <ul className="list-unstyled">
+        <li>
+          <b>Start:</b> {timestamp(Date.parse(canaryRun.context.scopes[firstScopeName].experimentScope.start))}
+          <CopyToClipboard
+            displayText={false}
+            text={canaryRun.context.scopes[firstScopeName].experimentScope.start}
+            toolTip={toolTipText}
+          />
+        </li>
+        <li>
+          <b>End:</b> {timestamp(Date.parse(canaryRun.context.scopes[firstScopeName].experimentScope.end))}
+          <CopyToClipboard
+            displayText={false}
+            text={canaryRun.context.scopes[firstScopeName].experimentScope.end}
+            toolTip={toolTipText}
+          />
+        </li>
+      </ul>
+    </section>
+  );
+}
+
+function ReportLink({ canaryRun }: { canaryRun: IStage }) {
+  if (
+    !has(canaryRun, 'context.canaryConfigId') ||
+    !has(canaryRun, 'context.canaryPipelineExecutionId') ||
+    canaryRun.status === 'RUNNING'
+  ) {
+    return null;
+  }
+
+  const onClick = () =>
+    ReactInjector.$state.go('home.applications.application.canary.report.reportDetail', {
+      configId: canaryRun.context.canaryConfigId,
+      runId: canaryRun.context.canaryPipelineExecutionId,
+    });
+
+  return <i className="fa fa-chart-bar clickable" onClick={onClick} />;
+}
+
+function CanaryRunWarningMessages({ messages }: { messages: string[] }) {
+  return (
+    <div>
+      {messages.map((message, i) => (
+        <p key={`${i}-${message}`}>{message}</p>
+      ))}
+    </div>
+  );
+}