@spinnaker/kayenta 0.0.0-2025.1-0

package/src/kayenta/actions/index.ts

@@ -0,0 +1,98 @@
+export const LOAD_CONFIG_REQUEST = 'load_config_request';
+export const LOAD_CONFIG_SUCCESS = 'load_config_success';
+export const LOAD_CONFIG_FAILURE = 'load_config_failure';
+export const DELETE_CONFIG_REQUEST = 'delete_config_request';
+export const DELETE_CONFIG_SUCCESS = 'delete_config_success';
+export const DELETE_CONFIG_FAILURE = 'delete_config_failure';
+export const SAVE_CONFIG_REQUEST = 'save_config_request';
+export const SAVE_CONFIG_SUCCESS = 'save_config_success';
+export const SAVE_CONFIG_FAILURE = 'save_config_failure';
+export const DELETE_CONFIG_MODAL_OPEN = 'delete_config_modal_open';
+export const DELETE_CONFIG_MODAL_CLOSE = 'delete_config_modal_close';
+export const DISMISS_SAVE_CONFIG_ERROR = 'dismiss_save_config_error';
+export const SET_EXECUTIONS_COUNT = 'set_executions_count';
+export const INITIALIZE = 'initialize';
+export const ADD_METRIC = 'add_metric';
+export const RENAME_METRIC = 'rename_metric';
+export const EDIT_METRIC_BEGIN = 'edit_metric_begin';
+export const EDIT_METRIC_CONFIRM = 'edit_metric_modal_confirm';
+export const EDIT_METRIC_CANCEL = 'edit_metric_modal_cancel';
+export const UPDATE_METRIC_DIRECTION = 'update_metric_direction';
+export const UPDATE_METRIC_NAN_STRATEGY = 'update_metric_nan_strategy';
+export const UPDATE_METRIC_OUTLIER_STRATEGY = 'update_metric_outlier_strategy';
+export const UPDATE_METRIC_CRITICALITY = 'update_metric_criticality';
+export const UPDATE_METRIC_DATA_REQUIRED = 'update_metric_data_required';
+export const UPDATE_EFFECT_SIZE = 'update_effect_size';
+export const UPDATE_METRIC_GROUP = 'update_metric_group';
+export const UPDATE_METRIC_SCOPE_NAME = 'update_metric_scope_name';
+export const REMOVE_METRIC = 'remove_metric';
+export const SELECT_CONFIG = 'select_config';
+export const CLEAR_SELECTED_CONFIG = 'clear_selected_config';
+export const UPDATE_CONFIG_SUMMARIES = 'update_config_summaries';
+export const ADD_GROUP = 'add_group';
+export const SELECT_GROUP = 'select_group';
+export const UPDATE_CONFIG_NAME = 'update_config_name';
+export const UPDATE_CONFIG_DESCRIPTION = 'update_config_description';
+export const CONFIG_JSON_MODAL_OPEN = 'config_json_modal_open';
+export const CONFIG_JSON_MODAL_CLOSE = 'config_json_modal_close';
+export const SET_CONFIG_JSON = 'set_config_json';
+export const UPDATE_PROMETHEUS_METRIC_TYPE = 'update_prometheus_metric_type';
+export const UPDATE_PROMETHEUS_METRIC_QUERY_FIELD = 'update_prometheus_metric_query_field';
+export const UPDATE_PROMETHEUS_LABEL_BINDINGS = 'update_prometheus_label_bindings';
+export const UPDATE_PROMETHEUS_GROUP_BY_FIELDS = 'update_prometheus_group_by_fields';
+export const UPDATE_STACKDRIVER_METRIC_TYPE = 'update_stackdriver_metric_type';
+export const UPDATE_STACKDRIVER_METRIC_QUERY_FIELD = 'update_stackdriver_metric_query_field';
+export const UPDATE_STACKDRIVER_GROUP_BY_FIELDS = 'update_stackdriver_group_by_fields';
+export const UPDATE_JUDGES = 'update_judges';
+export const SELECT_JUDGE_NAME = 'select_judge_name';
+export const UPDATE_GROUP_WEIGHT = 'update_group_weight';
+export const SET_CONFIG_JSON_MODAL_TAB_STATE = 'set_config_json_modal_tab_state';
+export const UPDATE_ATLAS_QUERY = 'update_atlas_query';
+export const UPDATE_DATADOG_METRIC_TYPE = 'update_datadog_metric_type';
+export const UPDATE_DATADOG_METRIC_NAME = 'update_datadog_metric_name';
+export const UPDATE_NEWRELIC_SELECT = 'update_newrelic_select';
+export const COPY_SELECTED_CONFIG = 'copy_selected_config';
+export const CREATE_NEW_CONFIG = 'create_new_config';
+export const EDIT_GROUP_BEGIN = 'edit_group_name_begin';
+export const EDIT_GROUP_CONFIRM = 'edit_group_name_confirm';
+export const EDIT_GROUP_UPDATE = 'edit_group_name_update';
+export const CHANGE_METRIC_GROUP = 'change_metric_group';
+export const CHANGE_METRIC_GROUP_SELECT = 'change_metric_group_select';
+export const CHANGE_METRIC_GROUP_CONFIRM = 'change_metric_group_confirm';
+export const LOAD_RUN_REQUEST = 'load_run_request';
+export const LOAD_RUN_SUCCESS = 'load_run_success';
+export const LOAD_RUN_FAILURE = 'load_run_failure';
+export const TOGGLE_METRIC_CLASSIFICATION_FILTER = 'toggle_metric_classification_filter';
+export const SELECT_REPORT_METRIC_GROUP = 'select_result_metric_group';
+export const SELECT_REPORT_METRIC = 'select_result_metric';
+export const LOAD_METRIC_SET_PAIR_REQUEST = 'load_metric_set_pair_request';
+export const LOAD_METRIC_SET_PAIR_SUCCESS = 'load_metric_set_pair_success';
+export const LOAD_METRIC_SET_PAIR_FAILURE = 'load_metric_set_pair_failure';
+export const ADD_TEMPLATE = 'add_template';
+export const EDIT_TEMPLATE_BEGIN = 'edit_template_begin';
+export const EDIT_TEMPLATE_CANCEL = 'edit_template_cancel';
+export const EDIT_TEMPLATE_CONFIRM = 'edit_template_confirm';
+export const EDIT_TEMPLATE_NAME = 'edit_template_name';
+export const EDIT_TEMPLATE_VALUE = 'edit_template_value';
+export const DELETE_TEMPLATE = 'delete_template';
+export const SELECT_TEMPLATE = 'select_template';
+export const EDIT_INLINE_TEMPLATE = 'edit_inline_template';
+export const LOAD_METRICS_SERVICE_METADATA_REQUEST = 'load_metrics_service_metadata_request';
+export const LOAD_METRICS_SERVICE_METADATA_SUCCESS = 'load_metrics_service_metadata_success';
+export const LOAD_METRICS_SERVICE_METADATA_FAILURE = 'load_metrics_service_metadata_failure';
+export const UPDATE_PROMETHEUS_METRIC_DESCRIPTOR_FILTER = 'update_prometheus_metric_descriptor_filter';
+export const UPDATE_GRAPHITE_METRIC_DESCRIPTOR_FILTER = 'update_graphite_metric_descriptor_filter';
+export const UPDATE_STACKDRIVER_METRIC_DESCRIPTOR_FILTER = 'update_stackdriver_metric_descriptor_filter';
+export const UPDATE_DATADOG_METRIC_DESCRIPTOR_FILTER = 'update_datadog_metric_descriptor_filter';
+export const LOAD_EXECUTIONS_REQUEST = 'load_executions_request';
+export const LOAD_EXECUTIONS_SUCCESS = 'load_executions_success';
+export const LOAD_EXECUTIONS_FAILURE = 'load_executions_failure';
+export const SELECT_GRAPH_TYPE = 'select_graph_type';
+export const LOAD_KAYENTA_ACCOUNTS_REQUEST = 'load_kayenta_accounts_request';
+export const LOAD_KAYENTA_ACCOUNTS_SUCCESS = 'load_kayenta_accounts_success';
+export const LOAD_KAYENTA_ACCOUNTS_FAILURE = 'load_kayenta_accounts_failure';
+export const SELECT_METRIC_STORE = 'select_metric_store';
+export const UPDATE_SIGNAL_FX_METRIC_NAME = 'update_signalfx_metric_name';
+export const UPDATE_SIGNAL_FX_AGGREGATION_METHOD = 'update_signalfx_aggregation_method';
+export const UPDATE_SIGNAL_FX_QUERY_PAIRS = 'update_signalfx_query_pairs';
+export const UPDATE_GRAPHITE_METRIC_NAME = 'update_graphite_metric_name';

package/src/kayenta/canary.dataSource.bridge.ts

@@ -0,0 +1,53 @@
+import { Application } from '@spinnaker/core';
+
+import * as Creators from './actions/creators';
+import { canaryStore } from './canary';
+import { stub } from './canary.dataSource.stub';
+import { ICanaryExecutionStatusResult } from './domain/ICanaryExecutionStatusResult';
+import { ICanaryConfigSummary, IJudge } from './domain/index';
+import { listCanaryExecutions } from './service/canaryRun.service';
+
+export function bridgeKayentaDataSourceToReduxStore() {
+  stub.afterConfigsLoaded = (application: Application) => {
+    if (application !== canaryStore.getState().data.application) {
+      return;
+    }
+    canaryStore.dispatch(
+      Creators.updateConfigSummaries({
+        configSummaries: application.getDataSource('canaryConfigs').data as ICanaryConfigSummary[],
+      }),
+    );
+  };
+
+  stub.afterJudgesLoaded = (application: Application) => {
+    if (application !== canaryStore.getState().data.application) {
+      return;
+    }
+    canaryStore.dispatch(
+      Creators.updateJudges({
+        judges: application.getDataSource('canaryJudges').data as IJudge[],
+      }),
+    );
+  };
+
+  stub.loadCanaryExecutions = (application: Application) => {
+    const listExecutionsRequest = listCanaryExecutions(application.name);
+
+    listExecutionsRequest.catch((error) => {
+      canaryStore.dispatch(Creators.loadExecutionsFailure({ error }));
+    });
+
+    return listExecutionsRequest;
+  };
+
+  stub.afterCanaryExecutionsLoaded = (application: Application) => {
+    if (application !== canaryStore.getState().data.application) {
+      return;
+    }
+    canaryStore.dispatch(
+      Creators.loadExecutionsSuccess({
+        executions: application.getDataSource('canaryExecutions').data as ICanaryExecutionStatusResult[],
+      }),
+    );
+  };
+}

package/src/kayenta/canary.dataSource.stub.ts

@@ -0,0 +1,64 @@
+import { CanarySettings } from 'kayenta/canary.settings';
+
+import { Application, ApplicationDataSourceRegistry } from '@spinnaker/core';
+
+import { getCanaryConfigSummaries, listJudges } from './service/canaryConfig.service';
+import { listCanaryExecutions } from './service/canaryRun.service';
+
+// When the lazy portion loads, it overwrites these stub with implementation that bridges data to the redux store
+export const stub = {
+  loadCanaryExecutions: (application: Application) => listCanaryExecutions(application.name),
+  afterConfigsLoaded: (_application: Application): void => void 0,
+  afterJudgesLoaded: (_application: Application): void => void 0,
+  afterCanaryExecutionsLoaded: (_application: Application): void => void 0,
+};
+
+export function registerKayentaDataSourceStubs() {
+  const onLoad = (app: Application, data: any) => Promise.resolve(data);
+  const loadCanaryConfigs = (application: Application) => {
+    return CanarySettings.showAllConfigs ? getCanaryConfigSummaries() : getCanaryConfigSummaries(application.name);
+  };
+
+  ApplicationDataSourceRegistry.registerDataSource({
+    optIn: !CanarySettings.optInAll,
+    optional: true,
+    loader: loadCanaryConfigs,
+    onLoad,
+    afterLoad: (application) => stub.afterConfigsLoaded(application),
+    description: 'Canary analysis configuration and reporting',
+    key: 'canaryConfigs',
+    label: 'Canary',
+    defaultData: [],
+  });
+
+  ApplicationDataSourceRegistry.registerDataSource({
+    key: 'canaryJudges',
+    label: 'Canary Configs',
+    sref: '.canary.canaryConfig',
+    activeState: '**.canaryConfig.**',
+    category: 'delivery',
+    requiresDataSource: 'canaryConfigs',
+    loader: listJudges,
+    onLoad,
+    afterLoad: (application) => stub.afterJudgesLoaded(application),
+    lazy: true,
+    autoActivate: true,
+    defaultData: [],
+    iconName: 'spMenuCanaryConfig',
+  });
+
+  ApplicationDataSourceRegistry.registerDataSource({
+    key: 'canaryExecutions',
+    label: 'Canary Reports',
+    sref: '.canary.report',
+    activeState: '**.report.**',
+    category: 'delivery',
+    requiresDataSource: 'canaryConfigs',
+    loader: (application) => stub.loadCanaryExecutions(application),
+    onLoad,
+    afterLoad: (application) => stub.afterCanaryExecutionsLoaded(application),
+    lazy: true,
+    defaultData: [],
+    iconName: 'spMenuCanaryReport',
+  });
+}

package/src/kayenta/canary.help.ts

@@ -0,0 +1,136 @@
+import { HelpContentsRegistry } from '@spinnaker/core';
+
+const helpContents: { [key: string]: string } = {
+  'pipeline.config.canary.analysisType': `
+    <p>
+      <strong>Real Time</strong> analysis will be performed
+      over a time interval beginning at the moment of execution.
+      <ul>
+        <li>
+          <strong>Automatic:</strong> Spinnaker will provision and clean up the baseline and canary server groups. Not all cloud providers support this mode.
+        </li>
+        <li>
+          <strong>Manual:</strong> You are responsible for provisioning and cleaning up the baseline and canary server groups.
+        </li>
+      </ul>
+    </p>
+    <p>
+      <strong>Retrospective</strong> analysis will be performed over an explicitly-specified time
+      interval (likely in the past). You are responsible for provisioning and cleaning up
+      the baseline and canary server groups.
+    </p>
+  `,
+  'pipeline.config.canary.delayBeforeAnalysis':
+    '<p>The number of minutes until the first canary analysis measurement interval begins.</p>',
+  'pipeline.config.canary.baselineAnalysisOffset':
+    '<p>The offset in minutes of baseline data collection from the beginning of canary analysis. Useful for comparing metrics pre-canary for relative comparison. This field accepts SpEL</p>',
+  'pipeline.config.canary.canaryInterval': `
+        <p>The frequency at which a canary score is generated. The recommended interval is at least 30 minutes.</p>
+        <p>If an interval is not specified, or the specified interval is larger than the overall time range, there will be one canary run over the full time range.</p>`,
+  'pipeline.config.canary.successfulScore':
+    '<p>The minimum score the canary must achieve to be considered successful.</p>',
+  'pipeline.config.canary.unhealthyScore':
+    '<p>The lowest score the canary can attain before it is aborted and disabled as a failure.</p>',
+  'pipeline.config.canary.baselineGroup':
+    '<p>The server group to treat as the <em>control</em> in the canary analysis.</p>',
+  'pipeline.config.canary.baselineLocation':
+    '<p>The location (could be a region, a namespace, or something else) of the server group to treat as the <em>control</em> in the canary analysis.</p>',
+  'pipeline.config.canary.canaryGroup':
+    '<p>The server group to treat as the <em>experiment</em> in the canary analysis.</p>',
+  'pipeline.config.canary.canaryLocation':
+    '<p>The location (could be a region, a namespace, or something else) of the server group to treat as the <em>experiment</em> in the canary analysis.</p>',
+  'pipeline.config.canary.startTimeIso':
+    '<p>The overall start time of the data points to be retrieved, specified as a UTC instant using <a target="_" href="https://docs.oracle.com/javase/8/docs/api/java/time/format/DateTimeFormatter.html#ISO_INSTANT">ISO-8601 instant format.</a> For example, `2018-07-12T20:28:29Z`.</p>',
+  'pipeline.config.canary.endTimeIso':
+    '<p>The overall end time of the data points to be retrieved, specified as a UTC instant using <a target="_" href="https://docs.oracle.com/javase/8/docs/api/java/time/format/DateTimeFormatter.html#ISO_INSTANT">ISO-8601 instant format.</a> For example, `2018-07-12T22:28:29Z`.</p>',
+  'pipeline.config.canary.extendedScopeParams': `
+        <p>Metric source specific parameters which may be used to further alter the canary scope.</p>
+        <p>Also used to provide variable bindings for use in the expansion of custom filter templates within the canary config.</p>`,
+  'pipeline.config.canary.lookback':
+    '<p>With an analysis type of <strong>Growing</strong>, the entire duration of the canary will be considered during the analysis.</p><p>When choosing <strong>Sliding</strong>, the canary will use the most recent number of specified minutes for its analysis report (<b>useful for long running canaries that span multiple days</b>).</p>',
+  'pipeline.config.canary.delayBeforeCleanup':
+    '<p>The total time after canary analysis ends before canary cluster cleanup begins. Allows for manual inspection of instances.</p>',
+  'pipeline.config.canary.marginalScore': `
+    <p>A canary stage can include multiple canary runs.</p>
+    <p>If a given canary run score is less than or equal to the marginal threshold, the canary stage will fail immediately.</p>
+    <p>If the canary run score is greater than the marginal threshold, the canary stage will not fail and will execute the remaining downstream canary runs.</p>`,
+  'pipeline.config.canary.passingScore':
+    '<p>When all canary runs in a stage have executed, a canary stage is considered a success if the final (that is, the latest) canary run score is greater than or equal to the pass threshold. Otherwise, it is a failure.</p>',
+  'pipeline.config.canary.lifetime': `
+    <p>The total time for which data will be collected and analyzed during this stage.</p>
+  `,
+  'pipeline.config.canary.legacySiteLocalRecipients':
+    '<p>Email addresses to be notified when a canary report completes, separated by commas.</p>',
+  'pipeline.config.metricsAccount':
+    "<p>The account to be used to access the metric store defined in this stage's canary config.</p>",
+  'pipeline.config.storageAccount':
+    '<p>The account to be used to access a storage service, which will be used to store artifacts generated by this stage.</p>',
+  'canary.config.metricGroupWeights': `
+    <p>A canary score is the weighted sum of metric group scores.</p>
+    <p>Group weights must sum to 100.</p>
+  `,
+  'canary.config.nanStrategy': `
+    <p>When there is no value for a metric at a given point in time, it can either be ignored or assumed to be zero. The right choice depends on what is being measured. For example, when measuring successful attempts (like health checks) replacing missing values with zero may be appropriate.</p>
+    <p>The default strategy for a given metric will be used if no strategy is selected.</p>
+  `,
+  'canary.config.outlierStrategy': `
+    <p>When outliers are present in metric data, you can choose to either remove them or include them in the evaluation. The appropriate strategy depends on the metrics being assessed. For example, when measuring CPU or memory utilization, it might be appropriate to remove outliers that occur during startup times.</p> 
+    <p>If no strategy is chosen, the default strategy for the metric will be implemented.</p>
+  `,
+  'canary.config.filterTemplate': `
+    <p>Templates allow you to compose and parameterize advanced queries against your telemetry provider.</p>
+    <p>Parameterized queries are hydrated by values provided in the canary stage. The <strong>project</strong>, <strong>resourceType</strong>, </string><strong>scope</strong>, and <strong>location</strong> variable bindings are implicitly available.</p>
+    <p>For example, you can interpolate <strong>project</strong> using the following syntax: <strong>\${project}</strong>.</p>
+  `,
+  'canary.config.signalFx.queryPairs': `
+    <p><strong>Query pairs are optional</strong></p>
+    <p>Can be dimensions, properties, or tags (Use tag as key for tags).</p>
+    <p>
+        Example: Given a metric with name <pre>'request.count'</pre> that gets reported with dimensions uri, and stats_code. </br>
+        If I added the following query pairs</br>
+        <pre>{
+  "uri": "v1/some-endpoint",
+  "status_code": "5*"
+}</pre>
+        I could make a metric that tracks the number of server errors for endpoint <pre>/v1/some-endpoint</pre>
+    </p>
+    <p>These k,v pairs are used to construct filters for the compiled SignalFlow program. EX:<pre>data('request.count', filters=filter('uri', 'v1/some-endpoint') and filter('status_code', '5*') and filter('version', '1.0.0') and filter('environment', 'production')).sum(by=['version', 'environment']).publish()</pre>
+        Note that the version and environment would come from the canary scope and the sum method comes from the aggregation method.
+    </p>
+  `,
+  'canary.config.signalFx.aggregationMethod': `
+    <p>This must be a method defined in the <a target="_blank" href="https://developers.signalfx.com/reference#signalflow-stream-methods-1">SignalFlow Stream Methods</a> that supports aggregation</p>
+    <p>These are methods such as min, max, sum, mean and are documented with supporting the <strong>'by'</strong> keyword, ex: <pre>sum(by=['version', 'environment'])</pre></p>
+    <p>Simply put the name of the method that should be used in this field such as sum, Kayenta will populate the by clauses using the canary scope filter keys</p>
+    <p>This method is used to construct the compiled SignalFlow program. EX:<pre>data('request.count', filters=filter('uri', 'v1/some-endpoint') and filter('status_code', '5*') and filter('version', '1.0.0') and filter('environment', 'production')).sum(by=['version', 'environment']).publish()</pre>
+        Note that the version and environment k,v pairs are sourced from the canary scope. The other k,v pairs come from the metric specific k,v pair list.
+    </p>
+  `,
+  'canary.config.prometheus.queryType': `
+    <p>Select <strong>default</strong> to use options from the UI to configure your query.</p>
+    <p>Select <strong>PromQL</strong> to compose a custom PromQL query (see <a target="blank" href="https://prometheus.io/docs/prometheus/latest/querying/basics/">documentation</a>).</p>
+  `,
+  'canary.config.effectSize.cles': `
+    <p>
+      The Common Language Effect Size (CLES) reports the probability that a value from one group will be greater than a
+      value from the other group.
+    </p>
+    <p>A value of 0.50 indicates that the two groups are stochastically equal.</p>
+    <p>A value of 1 indicates that the first group shows complete stochastic domination over the other group, and a
+      value of 0 indicates the complete stochastic domination by the second group.
+    </p>
+    <p>
+      <a href="https://en.wikipedia.org/wiki/Mann%E2%80%93Whitney_U_test#Common_language_effect_size" target="_blank">Read more about CLES</a>.
+    </p>
+  `,
+  // These come (almost) verbatim from Stackdriver's Metric Explorer.
+  'stackdriver.resourceType':
+    'For Stackdriver, a set of time series is identified by a <strong>resource type</strong> and a metric type that has data from that resource type.',
+  'stackdriver.metricType':
+    'For Stackdriver, a set of time series is identified by a resource type and a <strong>metric type</strong> that has data from that resource type.',
+  'stackdriver.groupBy': 'Group by resource or metric labels to reduce the number of time series.',
+  'stackdriver.crossSeriesReducer': 'Use an algorithm to group multiple time series together.',
+  'stackdriver.perSeriesAligner': 'Use an algorithm to align individual time series.',
+};
+
+Object.keys(helpContents).forEach((key) => HelpContentsRegistry.register(key, helpContents[key]));

package/src/kayenta/canary.less

@@ -0,0 +1,168 @@
+.kayenta {
+  width: 100%;
+
+  button {
+    &[disabled] {
+      cursor: not-allowed;
+      opacity: 0.4;
+    }
+  }
+
+  &.kayenta-root {
+    overflow: hidden;
+  }
+
+  .spinner {
+    position: inherit;
+  }
+
+  .list-detail {
+    > .col-md-2,
+    .col-md-10 {
+      padding-left: 0;
+      padding-right: 0;
+    }
+  }
+
+  .config-list {
+    ul {
+      max-height: calc(~'70vh - 44px'); // i.e., minus the footer.
+      overflow: auto;
+      @media screen and (max-height: 1000px) {
+        max-height: 55vh;
+      }
+
+      @media screen and (max-height: 700px) {
+        max-height: 45vh;
+      }
+    }
+  }
+
+  .config-detail {
+    padding: 0 1rem 1rem;
+    margin-bottom: 40px;
+    overflow-y: auto;
+    .config-detail-header {
+      padding: 5px 15px 7px 0;
+      .heading-1 {
+        margin: 3px 0 0 0;
+      }
+    }
+
+    .config-detail-edit-warning {
+      padding: 12px;
+      margin-bottom: 12px;
+      i.fa {
+        color: var(--color-notice);
+        font-size: 32px;
+      }
+    }
+
+    .contents .native-table-header {
+      padding-top: 10px;
+    }
+  }
+
+  .group-tabs {
+    .fas.fa-pencil-alt {
+      padding-left: 1rem;
+      font-size: smaller;
+      &.disabled {
+        color: var(--color-accessory);
+      }
+    }
+
+    .tabs-basic {
+      input {
+        text-transform: none;
+        font-weight: normal;
+      }
+    }
+  }
+
+  .table-header {
+    &.sticky-header {
+      background-color: var(--color-alabaster);
+    }
+    h6 {
+      font-weight: 600;
+    }
+  }
+
+  .table-row {
+    > div,
+    > td {
+      padding: 0.8rem 0;
+    }
+
+    i {
+      &.fa,
+      &.far {
+        padding: 0 0.5rem;
+        cursor: pointer;
+        &.fa-edit,
+        &.fa-folder {
+          font-weight: 100;
+        }
+        &.fa-folder {
+          margin-top: 0.2rem;
+        }
+        &.fa-trash {
+          font-size: small;
+          margin-top: 0.1rem;
+        }
+      }
+    }
+
+    // This is the wrapper around the change metric group folder icon.
+    g {
+      margin-top: -0.25rem;
+      margin-right: 0.1rem;
+    }
+  }
+
+  .table-header,
+  .table-row {
+    border-bottom: 1px solid var(--color-divider);
+    h6 {
+      margin-bottom: 5px;
+    }
+    &.background-white {
+      background-color: var(--color-white);
+    }
+    &.selected {
+      background-color: var(--color-accent-g2);
+    }
+  }
+
+  // As of 9/31/2018 this must be applied to a <th> for sticky table headers to work (not a <tr>/<thead>)
+  // https://bugs.chromium.org/p/chromium/issues/detail?id=702927
+  .native-table-header {
+    position: sticky;
+    top: 0;
+    background-color: var(--color-alabaster);
+    // Borders don't work w/ position: sticky in this case
+    box-shadow: 0 1px 0 var(--color-divider);
+  }
+
+  .metric-list {
+    top: -10px;
+  }
+
+  .header-transparent {
+    .native-table-header {
+      background-color: transparent;
+    }
+  }
+
+  .header-white {
+    .native-table-header {
+      background-color: white;
+    }
+  }
+
+  // Allow children of flex-1 with overflow of scroll or auto to scroll correctly in firefox
+  .flex-1 {
+    min-height: 0;
+  }
+}

package/src/kayenta/canary.settings.ts

@@ -0,0 +1,26 @@
+import { SETTINGS } from '@spinnaker/core';
+
+export interface ICanarySettings {
+  showAllConfigs: boolean;
+  reduxLogger: boolean;
+  metricsAccountName: string;
+  storageAccountName: string;
+  defaultJudge: string;
+  metricStore: string;
+  stagesEnabled: boolean;
+  stageName: string;
+  executionsCountOptions: number[];
+  defaultExecutionCount: number;
+  stageDescription: string;
+  featureDisabled: boolean;
+  optInAll: boolean;
+  atlasWebComponentsUrl: string;
+  atlasWebComponentsPolyfillUrl: string;
+  atlasGraphBaseUrl: string;
+  templatesEnabled: boolean;
+  manualAnalysisEnabled: boolean;
+  disableConfigEdit: boolean;
+  legacySiteLocalFieldsEnabled: boolean; // legacy fields for backwards-compat with old systems, no long term support planned
+}
+
+export const CanarySettings: ICanarySettings = SETTINGS.canary || { featureDisabled: true };

package/src/kayenta/canary.tsx

@@ -0,0 +1,67 @@
+import { UIView } from '@uirouter/react';
+import * as React from 'react';
+import { Provider, Store } from 'react-redux';
+import { applyMiddleware, createStore } from 'redux';
+import { logger } from 'redux-logger';
+
+import { Application } from '@spinnaker/core';
+
+import { INITIALIZE } from './actions';
+import { CanarySettings } from './canary.settings';
+import { ICanaryConfigSummary, IJudge } from './domain';
+import Styleguide from './layout/styleguide';
+import { actionInterceptingMiddleware, asyncDispatchMiddleware, epicMiddleware } from './middleware';
+import { ICanaryState, rootReducer } from './reducers';
+
+export interface ICanaryProps {
+  app: Application;
+}
+
+const middleware = [epicMiddleware, actionInterceptingMiddleware, asyncDispatchMiddleware];
+
+export const canaryStore: Store<ICanaryState> = createStore<ICanaryState>(
+  rootReducer,
+  applyMiddleware(...(CanarySettings.reduxLogger ? [...middleware, logger] : middleware)),
+);
+
+export default class Canary extends React.Component<ICanaryProps> {
+  private readonly store: Store<ICanaryState>;
+
+  constructor(props: ICanaryProps) {
+    super(props);
+    this.store = canaryStore;
+    this.initializeAppState(props.app);
+  }
+
+  public componentWillReceiveProps(nextProps: ICanaryProps) {
+    if (this.props.app.name !== nextProps.app.name) {
+      this.initializeAppState(nextProps.app);
+    }
+  }
+
+  private initializeAppState(app: Application): void {
+    this.store.dispatch({
+      type: INITIALIZE,
+      state: {
+        data: {
+          application: app,
+          configSummaries: app.getDataSource('canaryConfigs').data as ICanaryConfigSummary[],
+          judges: app.getDataSource('canaryJudges').data as IJudge[],
+        },
+      },
+    });
+  }
+
+  public render() {
+    const noWrap = { wrap: false };
+    return (
+      <Styleguide className="kayenta-root vertical">
+        <Provider store={this.store}>
+          <div className="vertical flex-1">
+            <UIView {...noWrap} name="canary" />
+          </div>
+        </Provider>
+      </Styleguide>
+    );
+  }
+}