@spinnaker/kayenta 2025.4.0 → 2025.4.1

package/src/kayenta/selectors/filterTemplatesSelectors.ts

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

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

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

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

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

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

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

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

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

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

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

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

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

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