@spinnaker/kayenta 1.0.5 → 2.1.0-rc1

package/build/dist/stub.d.ts

@@ -0,0 +1,15 @@
+import 'kayenta/canary.help';
+/**
+ * This is the stub for Kayenta in deck
+ *
+ * - Registers all AngularJS components and controllers
+ * - Registers the full Kayenta Stage with Deck
+ * - Registers STUB routes for canary configs and canary reports (see: registerKayentaStateStubs)
+ *    - These stub routes are names and URLs only
+ *    - A lazyLoad router hook runs when the user navigates to a stub route and loads the remainder of Kayenta
+ * - Registers a DataSource that fetches kayenta canary/report data (and provides the nav items)
+ *
+ * See: lazy.ts for what happens next
+ */
+export declare const KAYENTA_MODULE = "spinnaker.kayenta";
+//# sourceMappingURL=stub.d.ts.map

package/build/dist/stub.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stub.d.ts","sourceRoot":"","sources":["../../src/stub.ts"],"names":[],"mappings":"AAGA,OAAO,qBAAqB,CAAC;AAgB7B;;;;;;;;;;;GAWG;AAEH,eAAO,MAAM,cAAc,sBAAsB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spinnaker/kayenta",
-  "version": "1.0.5",
+  "version": "2.1.0-rc1",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -25,20 +25,21 @@
     "postinstall": "check-plugin && check-peer-dependencies || true",
     "prettier": "prettier --write 'src/**/*.{js,jsx,ts,tsx,html,css,less,json}'",
     "proxy": "dev-proxy",
-    "watch": "rollup -c -w --no-watch.clearScreen"
+    "watch": "rollup -c -w --no-watch.clearScreen",
+    "prepare": "husky-install"
   },
   "dependencies": {
     "@uirouter/core": "6.0.4",
     "@uirouter/react": "1.0.2",
     "@uirouter/react-hybrid": "1.0.2",
     "angular-ui-bootstrap": "^2.5.0",
-    "ansi_up": "^4.0.4",
+    "ansi_up": "^5.0.0",
     "bootstrap": "3.4.1",
     "class-autobind-decorator": "^2.2.1",
     "human-readable-ids": "^1.0.4",
     "lodash": "4.17.21",
     "lodash-decorators": "4.5.0",
-    "lodash-es": "4.17.15",
+    "lodash-es": "4.17.21",
     "memoize-one": "^4.0.2",
     "ngimport": "^0.6.0",
     "react": "~16.14.0",
@@ -68,19 +69,20 @@
     "ui-select": "^0.19.6"
   },
   "devDependencies": {
+    "@apollo/client": "^3.3.15",
     "@babel/preset-env": "^7.13.12",
     "@babel/preset-react": "^7.13.13",
     "@babel/preset-typescript": "^7.13.0",
-    "@rollup/plugin-commonjs": "16.0.0",
+    "@rollup/plugin-commonjs": "18.0.0",
     "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "10.0.0",
+    "@rollup/plugin-node-resolve": "11.2.1",
     "@rollup/plugin-replace": "^2.4.2",
-    "@rollup/plugin-typescript": "6.1.0",
+    "@rollup/plugin-typescript": "8.2.1",
     "@rollup/plugin-url": "6.0.0",
-    "@spinnaker/core": "0.0.563",
+    "@spinnaker/core": "0.0.571",
     "@spinnaker/eslint-plugin": "1.0.13",
-    "@spinnaker/pluginsdk": "0.0.25",
-    "@spinnaker/pluginsdk-peerdeps": "0.0.11",
+    "@spinnaker/pluginsdk": "0.0.30",
+    "@spinnaker/pluginsdk-peerdeps": "0.0.14",
     "@spinnaker/presentation": "0.0.4",
     "@types/angular": "1.6.26",
     "@types/angular-mocks": "1.5.10",
@@ -130,26 +132,27 @@
     "eslint": "7.10.0",
     "eslint-config-prettier": "6.12.0",
     "eslint-plugin-react-hooks": "4.1.2",
-    "husky": "^1.3.1",
+    "graphql": "^15.5.0",
     "jest": "^26.6.3",
     "jquery": "3.5.1",
     "jquery-textcomplete": "1.6.1",
-    "jquery-ui": "1.12.0",
+    "jquery-ui": "1.13.2",
     "js-worker-search": "^1.2.1",
     "license-checker": "^15.0.0",
-    "luxon": "1.23.0",
+    "luxon": "1.28.1",
     "npm-run-all": "4.1.5",
     "prettier": "2.1.2",
     "pretty-quick": "3.1.0",
     "prop-types": "15.6.1",
+    "react-toastify": "^7.0.4",
     "react2angular": "^3.2.1",
     "redux-test-utils": "^0.3.0",
-    "rollup": "2.33.1",
+    "rollup": "2.45.2",
     "rollup-plugin-external-globals": "0.6.1",
-    "rollup-plugin-less": "1.1.2",
+    "rollup-plugin-less": "1.1.3",
     "rollup-plugin-postcss": "3.1.8",
     "rollup-plugin-terser": "7.0.2",
-    "rollup-plugin-visualizer": "^4.2.2",
+    "rollup-plugin-visualizer": "5.4.1",
     "shx": "0.3.3",
     "typescript": "^4.0.0",
     "utf-8-validate": "5.0.3"

package/rollup.config.js

@@ -16,6 +16,8 @@ const externals = [
   'luxon',
   'prop-types',
   'react',
+  'react-bootstrap',
+  'react-select',
   'react-dom',
   'semiotic',
 ];

package/src/index.ts

@@ -1 +1,2 @@
+export * from './stub';
 export * from './kayenta';

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/index.ts

@@ -1,4 +1,3 @@
-export { KAYENTA_MODULE } from './canary.module';
 export * from './actions';
 export * from './domain';
 export * from './metricStore';

package/src/kayenta/navigation/canary.states.stub.ts

@@ -0,0 +1,28 @@
+import { StateDeclaration, UIRouter } from '@uirouter/core';
+
+import { ApplicationStateProvider } from '@spinnaker/core';
+
+export function registerKayentaStateStubs(applicationState: ApplicationStateProvider, uiRouter: UIRouter) {
+  const states: StateDeclaration[] = [
+    {
+      name: 'canary',
+      url: '/canary',
+      lazyLoad: () =>
+        import(/* webpackChunkName: "Lazy-Kayenta-Tabs" */ '../../lazy').then((m) =>
+          m.lazyInitializeKayenta(applicationState, uiRouter),
+        ),
+    },
+    { name: 'canary.canaryConfig', url: '/config' },
+    { name: 'canary.canaryConfig.configDetail', url: '/:id?copy&new' },
+    { name: 'canary.canaryConfig.configDefault', url: '' },
+    { name: 'canary.report', url: '/report?count' },
+    { name: 'canary.report.reportDetail', url: '/:configId/:runId' },
+    { name: 'canary.report.reportDefault', url: '' },
+  ];
+
+  ['home.project', 'home.applications'].forEach((prefix) => {
+    states
+      .map((state) => ({ ...state, name: `${prefix}.application.${state.name}` } as StateDeclaration))
+      .forEach((state) => uiRouter.stateRegistry.register(state as StateDeclaration));
+  });
+}

package/src/kayenta/navigation/canary.states.ts

@@ -1,5 +1,4 @@
-import { UIRouter, Transition } from '@uirouter/core';
-import { IWindowService, module } from 'angular';
+import { Transition, UIRouter } from '@uirouter/core';
 import * as Creators from 'kayenta/actions/creators';
 import Canary, { canaryStore } from 'kayenta/canary';
 import ConfigDetailLoader from 'kayenta/edit/configDetailLoader';
@@ -9,182 +8,175 @@ import SelectConfig from 'kayenta/edit/selectConfig';
 import ResultDetailLoader from 'kayenta/report/detail/detailLoader';
 import ExecutionListLoadStates from 'kayenta/report/list/loadStates';
 import Report from 'kayenta/report/report';
+import { $rootScope } from 'ngimport';
 
-import { APPLICATION_STATE_PROVIDER, ApplicationStateProvider, IDeckRootScope, INestedState } from '@spinnaker/core';
+import { ApplicationStateProvider, INestedState } from '@spinnaker/core';
 
+import '../canary.dataSource.bridge';
 import { CanarySettings } from '../canary.settings';
 
-export const CANARY_STATES = 'spinnaker.kayenta.canary.states';
-module(CANARY_STATES, [APPLICATION_STATE_PROVIDER])
-  .config([
-    'applicationStateProvider',
-    (applicationStateProvider: ApplicationStateProvider) => {
-      'ngInject';
-      const configDetail: INestedState = {
-        name: 'configDetail',
-        url: '/:id?copy&new',
-        views: {
-          detail: {
-            component: ConfigDetailLoader,
-            $type: 'react',
-          },
-          footer: {
-            component: CanaryConfigSave,
-            $type: 'react',
-          },
-        },
-        params: {
-          copy: { type: 'boolean', value: false, squash: true },
-          new: { type: 'boolean', value: false, squash: true },
-        },
-        resolve: [
-          {
-            token: 'configNameStream',
-            deps: [UIRouter],
-            resolveFn: (uiRouter: any) => uiRouter.globals.params$,
-          },
-        ],
-      };
+export function registerStates($uiRouter: UIRouter, applicationStateProvider: ApplicationStateProvider) {
+  const configDetail: INestedState = {
+    name: 'configDetail',
+    url: '/:id?copy&new',
+    views: {
+      detail: {
+        component: ConfigDetailLoader,
+        $type: 'react',
+      },
+      footer: {
+        component: CanaryConfigSave,
+        $type: 'react',
+      },
+    },
+    params: {
+      copy: { type: 'boolean', value: false, squash: true },
+      new: { type: 'boolean', value: false, squash: true },
+    },
+    resolve: [
+      {
+        token: 'configNameStream',
+        deps: [UIRouter],
+        resolveFn: (uiRouter: any) => uiRouter.globals.params$,
+      },
+    ],
+  };
 
-      const configDefault: INestedState = {
-        name: 'configDefault',
-        url: '',
-        views: {
-          detail: {
-            component: SelectConfig,
-            $type: 'react',
-          },
-        },
-      };
+  const configDefault: INestedState = {
+    name: 'configDefault',
+    url: '',
+    views: {
+      detail: {
+        component: SelectConfig,
+        $type: 'react',
+      },
+    },
+  };
 
-      const config: INestedState = {
-        name: 'canaryConfig',
-        url: '/config',
-        views: {
-          canary: {
-            component: CanaryConfigEdit,
-            $type: 'react',
-          },
-        },
-        children: [configDefault, configDetail],
-        redirectTo: (transition) => transition.to().name + '.configDefault',
-      };
+  const config: INestedState = {
+    name: 'canaryConfig',
+    url: '/config',
+    views: {
+      canary: {
+        component: CanaryConfigEdit,
+        $type: 'react',
+      },
+    },
+    children: [configDefault, configDetail],
+    redirectTo: (transition) => transition.to().name + '.configDefault',
+  };
 
-      const reportDetail: INestedState = {
-        name: 'reportDetail',
-        url: '/:configId/:runId',
-        views: {
-          detail: {
-            component: ResultDetailLoader,
-            $type: 'react',
-          },
-        },
-        resolve: [
-          {
-            token: 'resultIdStream',
-            deps: [UIRouter],
-            resolveFn: (uiRouter: any) => uiRouter.globals.params$,
-          },
-        ],
-      };
+  const reportDetail: INestedState = {
+    name: 'reportDetail',
+    url: '/:configId/:runId',
+    views: {
+      detail: {
+        component: ResultDetailLoader,
+        $type: 'react',
+      },
+    },
+    resolve: [
+      {
+        token: 'resultIdStream',
+        deps: [UIRouter],
+        resolveFn: (uiRouter: any) => uiRouter.globals.params$,
+      },
+    ],
+  };
+
+  const reportDefault: INestedState = {
+    name: 'reportDefault',
+    url: '',
+    views: {
+      detail: {
+        component: ExecutionListLoadStates,
+        $type: 'react',
+      },
+    },
+  };
 
-      const reportDefault: INestedState = {
-        name: 'reportDefault',
-        url: '',
-        views: {
-          detail: {
-            component: ExecutionListLoadStates,
-            $type: 'react',
-          },
-        },
-      };
+  const report: INestedState = {
+    name: 'report',
+    url: '/report?count',
+    views: {
+      canary: {
+        component: Report,
+        $type: 'react',
+      },
+    },
+    params: {
+      count: {
+        type: 'int',
+        value: CanarySettings.defaultExecutionCount ?? CanarySettings.executionsCountOptions?.[0] ?? 20,
+        squash: true,
+      },
+    },
+    children: [reportDetail, reportDefault],
+    redirectTo: (transition) => transition.to().name + '.reportDefault',
+  };
 
-      const report: INestedState = {
-        name: 'report',
-        url: '/report?count',
-        views: {
-          canary: {
-            component: Report,
-            $type: 'react',
-          },
-        },
-        params: {
-          count: {
-            type: 'int',
-            value: CanarySettings.defaultExecutionCount ?? CanarySettings.executionsCountOptions?.[0] ?? 20,
-            squash: true,
-          },
-        },
-        children: [reportDetail, reportDefault],
-        redirectTo: (transition) => transition.to().name + '.reportDefault',
-      };
+  const canaryRoot: INestedState = {
+    abstract: true,
+    name: 'canary',
+    url: '/canary',
+    views: {
+      insight: {
+        component: Canary,
+        $type: 'react',
+      },
+    },
+    data: {
+      pageTitleSection: {
+        title: 'Canary',
+      },
+    },
+    children: [config, report],
+  };
 
-      const canaryRoot: INestedState = {
-        abstract: true,
-        name: 'canary',
-        url: '/canary',
-        views: {
-          insight: {
-            component: Canary,
-            $type: 'react',
-          },
-        },
-        data: {
-          pageTitleSection: {
-            title: 'Canary',
-          },
-        },
-        children: [config, report],
-      };
+  applicationStateProvider.addChildState(canaryRoot);
+}
 
-      applicationStateProvider.addChildState(canaryRoot);
+export function registerTransitionHooks($uiRouter: UIRouter) {
+  // When leaving a config detail state, clear that config.
+  $uiRouter.transitionService.onBefore(
+    {
+      from: '**.configDetail.**',
+      to: (state) => !state.name.includes('configDetail'),
     },
-  ])
-  .run([
-    '$uiRouter',
-    '$window',
-    '$rootScope',
-    ($uiRouter: UIRouter, $window: IWindowService, $rootScope: IDeckRootScope) => {
-      // When leaving a config detail state, clear that config.
-      $uiRouter.transitionService.onBefore(
-        {
-          from: '**.configDetail.**',
-          to: (state) => !state.name.includes('configDetail'),
-        },
-        () => {
-          canaryStore.dispatch(Creators.clearSelectedConfig());
-        },
-      );
+    () => {
+      canaryStore.dispatch(Creators.clearSelectedConfig());
+    },
+  );
 
-      // Prompts confirmation for page navigation if config hasn't been saved.
-      // Should be possible with a $uiRouter transition hook, but it's not.
-      $rootScope.$on('$stateChangeStart', (event) => {
-        const state = canaryStore.getState();
-        const warningMessage = 'You have unsaved changes.\nAre you sure you want to navigate away from this page?';
-        if (state.selectedConfig && !state.selectedConfig.isInSyncWithServer) {
-          if (!$window.confirm(warningMessage)) {
-            event.preventDefault();
-          }
-        }
-      });
+  // Prompts confirmation for page navigation if config hasn't been saved.
+  // Should be possible with a $uiRouter transition hook, but it's not.
+  $rootScope.$on('$stateChangeStart', (event) => {
+    const state = canaryStore.getState();
+    const warningMessage = 'You have unsaved changes.\nAre you sure you want to navigate away from this page?';
+    if (state.selectedConfig && !state.selectedConfig.isInSyncWithServer) {
+      if (!window.confirm(warningMessage)) {
+        event.preventDefault();
+      }
+    }
+  });
 
-      // Prompts confirmation for page reload if config hasn't been saved.
-      $uiRouter.transitionService.onEnter({ to: '**.configDetail.**' }, () => {
-        $window.onbeforeunload = () => {
-          const state = canaryStore.getState();
-          // Must return `null` if reload should be allowed.
-          return (state.selectedConfig && !state.selectedConfig.isInSyncWithServer) || null;
-        };
-      });
+  // Prompts confirmation for page reload if config hasn't been saved.
+  $uiRouter.transitionService.onEnter({ to: '**.configDetail.**' }, () => {
+    window.onbeforeunload = () => {
+      const state = canaryStore.getState();
+      // Must return `null` if reload should be allowed.
+      return (state.selectedConfig && !state.selectedConfig.isInSyncWithServer) || null;
+    };
+  });
 
-      // Clears reload hook when leaving canary config view.
-      $uiRouter.transitionService.onExit({ from: '**.configDetail.**' }, () => {
-        $window.onbeforeunload = undefined;
-      });
-      $uiRouter.transitionService.onSuccess({ to: '**.report.**' }, (transition: Transition) => {
-        if (transition.params('from').count !== transition.params('to').count) {
-          canaryStore.dispatch(Creators.setExecutionsCount({ count: transition.params('to').count }));
-        }
-      });
-    },
-  ]);
+  // Clears reload hook when leaving canary config view.
+  $uiRouter.transitionService.onExit({ from: '**.configDetail.**' }, () => {
+    window.onbeforeunload = undefined;
+  });
+
+  $uiRouter.transitionService.onSuccess({ to: '**.report.**' }, (transition: Transition) => {
+    if (transition.params('from').count !== transition.params('to').count) {
+      canaryStore.dispatch(Creators.setExecutionsCount({ count: transition.params('to').count }));
+    }
+  });
+}

package/src/kayenta/report/detail/graph/metricSetPairGraph.service.ts

@@ -24,7 +24,7 @@ export interface IMetricSetPairGraph {
   /*
    * Returns top-level graph component class.
    * */
-  getGraph: () => React.ComponentClass<IMetricSetPairGraphProps>;
+  getGraph: () => React.ComponentType<IMetricSetPairGraphProps>;
 
   /*
    * Returns true if the graph implementation supports a given graph type.

package/src/kayenta/report/detail/graph/semiotic/index.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { Suspense } from 'react';
+
+import { Spinner } from '@spinnaker/core';
+
+import { GraphType, IMetricSetPairGraphProps, metricSetPairGraphService } from '../metricSetPairGraph.service';
+const SemioticGraphLazy = React.lazy(() => import(/* webpackChunkName: "Lazy-KayentaGraphs" */ './semioticGraph'));
+
+const supportedGraphTypes: GraphType[] = [GraphType.TimeSeries, GraphType.Histogram, GraphType.BoxPlot];
+// Semiotic component registration
+metricSetPairGraphService.register({
+  name: 'semiotic',
+  handlesGraphType: (type) => supportedGraphTypes.includes(type),
+  getGraph: () => (props: IMetricSetPairGraphProps) => (
+    <Suspense fallback={<Spinner />}>
+      <SemioticGraphLazy {...props} />
+    </Suspense>
+  ),
+});