armory-io · bpowell · Aug 28, 2019 · Aug 29, 2019 · Aug 29, 2019 · Sep 9, 2019
diff --git a/README.adoc b/README.adoc
@@ -1,3 +1,4 @@
+# Hello world!
 = Spinnaker UI
 
 image::https://api.travis-ci.org/spinnaker/deck.svg?branch=master["Build Status", link="https://travis-ci.org/spinnaker/deck"]

diff --git a/app/index.deck b/app/index.deck
@@ -1,5 +1,5 @@
 <!doctype html>
-<html class="no-js" ng-app="netflix.spinnaker">
+<html class="no-js" >
 <head>
   <title>Spinnaker</title>
   <meta charset="utf-8">

diff --git a/app/scripts/app.ts b/app/scripts/app.ts
@@ -1,5 +1,6 @@
 import 'jquery'; // ensures jQuery is loaded before Angular so Angular does not use jqlite
 import { module } from 'angular';
+import { initPlugins } from './plugin-loader';
 
 import { CORE_MODULE } from '@spinnaker/core';
 import { DOCKER_MODULE } from '@spinnaker/docker';
@@ -15,19 +16,25 @@ import { ECS_MODULE } from '@spinnaker/ecs';
 import '@spinnaker/cloudfoundry';
 import { AZURE_MODULE } from '@spinnaker/azure';
 
-module('netflix.spinnaker', [
-  CORE_MODULE,
-  AMAZON_MODULE,
-  GOOGLE_MODULE,
-  ECS_MODULE,
-  AZURE_MODULE,
-  KUBERNETES_V1_MODULE,
-  DOCKER_MODULE,
-  ORACLE_MODULE,
-  require('./modules/dcos/dcos.module').name,
-  APPENGINE_MODULE,
-  CANARY_MODULE,
-  KUBERNETES_V2_MODULE,
-  KAYENTA_MODULE,
-  TITUS_MODULE,
-]);
+initPlugins()
+  .catch(() => {
+    //TODO use CustomBanner to tell the user that plugin(s) have not been loaded
+  })
+  .finally(() => {
+    module('netflix.spinnaker', [
+      CORE_MODULE,
+      AMAZON_MODULE,
+      GOOGLE_MODULE,
+      ECS_MODULE,
+      AZURE_MODULE,
+      KUBERNETES_V1_MODULE,
+      DOCKER_MODULE,
+      ORACLE_MODULE,
+      require('./modules/dcos/dcos.module').name,
+      APPENGINE_MODULE,
+      CANARY_MODULE,
+      KUBERNETES_V2_MODULE,
+      KAYENTA_MODULE,
+      TITUS_MODULE,
+    ]);
+  });
diff --git a/app/scripts/bootstrap.js b/app/scripts/bootstrap.js
@@ -0,0 +1,5 @@
+import { bootstrap, element } from 'angular';
+
+element(document.documentElement).ready(() => {
+  bootstrap(document.documentElement, ['netflix.spinnaker']);
+});
diff --git a/app/scripts/modules/core/src/config/settings.ts b/app/scripts/modules/core/src/config/settings.ts
@@ -132,6 +132,7 @@ export interface ISpinnakerSettings {
   providers?: {
     [key: string]: IProviderSettings; // allows custom providers not typed in here (good for testing too)
   };
+  plugins: Array<{ name: string; location: string }>;
   pubsubProviders: string[];
   quietPeriod: [string | number, string | number];
   resetProvider: (provider: string) => () => void;

diff --git a/app/scripts/modules/plugins/package-lock.json b/app/scripts/modules/plugins/package-lock.json
diff --git a/app/scripts/modules/plugins/package.json b/app/scripts/modules/plugins/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "@spinnaker/plugins",
+  "version": "0.0.1",
+  "main": "lib/lib.js",
+  "types": "lib/plugins.d.ts",
+  "scripts": {
+    "clean": "../../../../node_modules/rimraf/bin.js lib",
+    "lib": "npm run clean && ../../../../node_modules/typescript/bin/tsc && node ../../../../node_modules/webpack/bin/webpack.js",
+    "prepublishOnly": "npm run lib"
+  }
+}
diff --git a/app/scripts/modules/plugins/src/index.ts b/app/scripts/modules/plugins/src/index.ts
@@ -0,0 +1,2 @@
+// @ts-ignore
+export * from './plugins';
diff --git a/app/scripts/modules/plugins/src/plugins.d.ts b/app/scripts/modules/plugins/src/plugins.d.ts
@@ -0,0 +1 @@
+declare module '@spinnaker/plugins';
diff --git a/app/scripts/modules/plugins/src/plugins.ts b/app/scripts/modules/plugins/src/plugins.ts
@@ -0,0 +1,13 @@
+import { PipelineRegistry } from '@spinnaker/core';
+
+export type IPluginInitialize = (registry: IStageRegistry) => void;
+
+export interface IStageRegistry {
+  pipeline: PipelineRegistry;
+}
+
+declare global {
+  interface Window {
+    spinnakerSettings: any;
+  }
+}
diff --git a/app/scripts/modules/plugins/tsconfig.json b/app/scripts/modules/plugins/tsconfig.json
@@ -0,0 +1,38 @@
+{
+  "buildOnSave": false,
+  "compileOnSave": true,
+  "compilerOptions": {
+    "allowJs": false,
+    "baseUrl": "./src",
+    "declaration": true,
+    "declarationDir": "lib",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "jsx": "react",
+    "lib": ["es2016", "dom"],
+    "moduleResolution": "node",
+    "module": "esnext",
+    "noEmitHelpers": false,
+    "noImplicitAny": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": false, // should really get to a place where we can turn this on
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "outDir": "lib",
+    "pretty": true,
+    "removeComments": false,
+    "rootDir": "./src",
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "inlineSources": true,
+    "strictNullChecks": false, // should really get to a place where we can turn this on
+    "target": "es6",
+    "typeRoots": ["../../../../node_modules/@types"],
+    "paths": {
+      "@spinnaker/core": ["../../core/lib"],
+      "core/*": ["core/src/*"]
+    }
+  },
+  "files": ["src/index.ts"],
+  "exclude": ["./lib", "**/*.spec.*"]
+}
diff --git a/app/scripts/modules/plugins/webpack.config.js b/app/scripts/modules/plugins/webpack.config.js
@@ -0,0 +1,114 @@
+'use strict';
+
+const path = require('path');
+const basePath = path.join(__dirname, '..', '..', '..', '..');
+const NODE_MODULE_PATH = path.join(basePath, 'node_modules');
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+const nodeExternals = require('webpack-node-externals');
+const TerserPlugin = require('terser-webpack-plugin');
+const exclusionPattern = /(node_modules|\.\.\/deck)/;
+const WEBPACK_THREADS = Math.max(require('physical-cpu-count') - 1, 1);
+
+const WATCH = process.env.WATCH === 'true';
+const WEBPACK_MODE = WATCH ? 'development' : 'production';
+const IS_PRODUCTION = WEBPACK_MODE === 'production';
+
+module.exports = {
+  context: basePath,
+  mode: WEBPACK_MODE,
+  stats: 'minimal',
+  watch: WATCH,
+  entry: {
+    lib: path.join(__dirname, 'src', 'index.ts'),
+  },
+  output: {
+    path: path.join(__dirname, 'lib'),
+    filename: '[name].js',
+    library: '@spinnaker/plugins',
+    libraryTarget: 'umd',
+    umdNamedDefine: true,
+  },
+  devtool: 'source-map',
+  optimization: {
+    minimizer: IS_PRODUCTION
+      ? [
+          new TerserPlugin({
+            cache: true,
+            parallel: true,
+            sourceMap: true,
+            terserOptions: {
+              ecma: 6,
+              mangle: false,
+              output: {
+                comments: false,
+              },
+            },
+          }),
+        ]
+      : [], // disable minification in development mode
+  },
+  resolve: {
+    extensions: ['.json', '.js', '.jsx', '.ts', '.tsx', '.css', '.less', '.html'],
+    modules: [NODE_MODULE_PATH, path.resolve('.')],
+    alias: {
+      '@spinnaker/plugins': path.join(__dirname, 'src'),
+      plugins: path.join(__dirname, 'src'),
+    },
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        use: [
+          { loader: 'cache-loader' },
+          { loader: 'thread-loader', options: { workers: WEBPACK_THREADS } },
+          { loader: 'babel-loader' },
+          { loader: 'envify-loader' },
+          { loader: 'eslint-loader' },
+        ],
+        exclude: exclusionPattern,
+      },
+      {
+        test: /\.tsx?$/,
+        use: [
+          { loader: 'cache-loader' },
+          { loader: 'thread-loader', options: { workers: WEBPACK_THREADS } },
+          { loader: 'ts-loader', options: { happyPackMode: true } },
+          { loader: 'tslint-loader' },
+        ],
+        exclude: exclusionPattern,
+      },
+      {
+        test: /\.less$/,
+        use: [
+          { loader: 'style-loader' },
+          { loader: 'css-loader' },
+          { loader: 'postcss-loader' },
+          { loader: 'less-loader' },
+        ],
+      },
+      {
+        test: /\.css$/,
+        use: [{ loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'postcss-loader' }],
+      },
+      {
+        test: /\.html$/,
+        exclude: exclusionPattern,
+        use: [
+          { loader: 'ngtemplate-loader?relativeTo=' + path.resolve(__dirname) + '&prefix=plugins' },
+          { loader: 'html-loader' },
+        ],
+      },
+      {
+        test: /\.(woff|woff2|otf|ttf|eot|png|gif|ico|svg)$/,
+        use: [{ loader: 'file-loader', options: { name: '[name].[hash:5].[ext]' } }],
+      },
+      {
+        test: require.resolve('jquery'),
+        use: [{ loader: 'expose-loader?$' }, { loader: 'expose-loader?jQuery' }],
+      },
+    ],
+  },
+  plugins: [new ForkTsCheckerWebpackPlugin({ checkSyntacticErrors: true })],
+  externals: ['@spinnaker/core', nodeExternals({ modulesDir: '../../../../node_modules' })],
+};
diff --git a/app/scripts/modules/plugins/yarn.lock b/app/scripts/modules/plugins/yarn.lock
@@ -0,0 +1,8 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@spinnaker/core@^0.0.406":
+  version "0.0.406"
+  resolved "https://registry.yarnpkg.com/@spinnaker/core/-/core-0.0.406.tgz#898f555a43b401f44561e8a742a92e51f128a476"
+  integrity sha512-NTqryXCEpYL8feO4hMZyBH70gVBfVabyJ4nChgmIC8PlZ/TMCN8rpGOtr9Q9g/tqgMUXRYiGWnNqxRS/g2Zs4g==
diff --git a/app/scripts/plugin-loader.js b/app/scripts/plugin-loader.js
@@ -0,0 +1,25 @@
+import { Registry } from '@spinnaker/core';
+
+// This method appends the plugin script location to the bottom of
+// the page to load the plugin
+function loadPluginScript(plugin) {
+  return new Promise((resolve, reject) => {
+    var scriptTag = document.createElement('script');
+    scriptTag.src = plugin.location;
+    scriptTag.onload = () => resolve();
+    scriptTag.onreadystatechange = () => resolve();
+    scriptTag.onerror = () => reject();
+    document.body.appendChild(scriptTag);
+  });
+}
+
+// This method grabs all plugins that are defined in Spinnaker settings
+// and then loops through all of them. It then calls the function above to
+// appends a script tag to the page from where the plugin location and then
+// initializes the plugin by passing in the registry for plugins to register
+// themselves as stages
+export function initPlugins() {
+  const plugins = window.spinnakerSettings.plugins;
+  window.spinnakerSettings.onPluginLoaded = plugin => plugin.initialize(Registry);
+  return Promise.all(plugins.map(p => loadPluginScript(p)));
+}
diff --git a/halconfig/settings.js b/halconfig/settings.js
@@ -222,6 +222,7 @@ window.spinnakerSettings = {
     },
   },
   pubsubProviders: ['google'], // TODO(joonlim): Add amazon once it is confirmed that amazon pub/sub works.
+  plugins: '{{%plugins%}}',
   triggerTypes: [
     'artifactory',
     'nexus',

diff --git a/settings.js b/settings.js
@@ -213,6 +213,7 @@ window.spinnakerSettings = {
     required: false,
   },
   pubsubProviders: ['google'], // TODO(joonlim): Add amazon once it is confirmed that amazon pub/sub works.
+  plugins: [],
   searchVersion: 1,
   triggerTypes: [
     'artifactory',

diff --git a/tslint.json b/tslint.json
@@ -24,6 +24,7 @@
       "titus "
     ],
     "indent": [true, "spaces"],
+    "interface-name": [false],
     "jsx-no-lambda": false,
     "jsx-no-multiline-js": false,
     "label-position": true,

diff --git a/webpack.config.js b/webpack.config.js
@@ -27,6 +27,7 @@ function configure(env, webpackOpts) {
       settings: SETTINGS_PATH,
       'settings-local': './settings-local.js',
       app: './app/scripts/app.ts',
+      bootstrap: './app/scripts/bootstrap.js',
     },
     output: {
       path: path.join(__dirname, 'build', 'webpack', process.env.SPINNAKER_ENV || ''),