refactor(clusterMatch): tweak cluster match component args, export mo…

app/scripts/modules/core/src/application/config/trafficGuard/trafficGuardConfig.component.html

@@ -53,7 +53,7 @@ <h4 class="text-center"><span class="fa fa-2x fa-cog fa-spin"></span></h4>
                    ng-change="$ctrl.configChanged()"/>
           </td>
           <td>
-            <cluster-matches matches="$ctrl.clusterMatches" index="$index"></cluster-matches>
+            <cluster-matches matches="$ctrl.clusterMatches[$index]"></cluster-matches>
           </td>
           <td><a href ng-click="$ctrl.removeGuard($index)"><span class="glyphicon glyphicon-trash" uib-tooltip="Remove guard"></span></a></td>
         </tr>

app/scripts/modules/core/src/chaosMonkey/chaosMonkeyExceptions.component.html

@@ -45,7 +45,7 @@ <h5>Exceptions <help-field key="chaos.exceptions"></help-field></h5>
                  required/>
         </td>
         <td>
-          <cluster-matches matches="$ctrl.clusterMatches" index="$index"></cluster-matches>
+          <cluster-matches matches="$ctrl.clusterMatches[$index]"></cluster-matches>
         </td>
         <td><a href ng-click="$ctrl.removeException($index)"><span class="glyphicon glyphicon-trash" uib-tooltip="Remove exception"></span></a></td>
       </tr>

app/scripts/modules/core/src/cluster/AllClustersGroupings.tsx

@@ -52,7 +52,7 @@ export class AllClustersGroupings extends React.Component<IAllClustersGroupingsP
     const { groups = [], sortFilter } = this.state;
 
     if (!initialized) {
-      return <NgReact.Spinner radius={30} width={8} length={16} />;
+      return <NgReact.LegacySpinner radius={30} width={8} length={16} />;
     }
 
     return (

app/scripts/modules/core/src/delivery/create/CreatePipelineModal.tsx

@@ -292,7 +292,7 @@ export class CreatePipelineModal extends React.Component<ICreatePipelineModalPro
   }
 
   public render() {
-    const { Spinner } = NgReact;
+    const { LegacySpinner } = NgReact;
     const nameHasError: boolean = !this.validateNameCharacters();
     const nameIsNotUnique: boolean = !this.validateNameIsUnique();
     const formValid = !nameHasError &&
@@ -306,7 +306,7 @@ export class CreatePipelineModal extends React.Component<ICreatePipelineModalPro
           <Modal.Title>Create New {this.state.command.strategy ? 'Strategy' : 'Pipeline'}</Modal.Title>
         </Modal.Header>
         {this.state.loading && (
-          <Modal.Body style={{height: '200px'}}><Spinner radius={25} width={6} length={16} /></Modal.Body>
+          <Modal.Body style={{height: '200px'}}><LegacySpinner radius={25} width={6} length={16} /></Modal.Body>
         )}
         {!this.state.loading && (
           <Modal.Body>

app/scripts/modules/core/src/delivery/create/TemplateDescription.tsx

@@ -14,12 +14,12 @@ export interface ITemplateDescriptionProps {
 
 export class TemplateDescription extends React.Component<ITemplateDescriptionProps> {
   public render() {
-    const { Spinner } = NgReact;
+    const { LegacySpinner } = NgReact;
     return (
       <div className="col-md-12 template-description">
         {this.props.loading && (
           <div className="spinner">
-            <Spinner radius={5} width={3} length={8} />
+            <LegacySpinner radius={5} width={3} length={8} />
           </div>
         )}
         {this.props.template && (

app/scripts/modules/core/src/loadBalancer/LoadBalancers.tsx

@@ -129,7 +129,7 @@ export class LoadBalancers extends React.Component<ILoadBalancersProps, ILoadBal
   }
 
   public render(): React.ReactElement<LoadBalancers> {
-    const { Spinner, HelpField } = NgReact;
+    const { LegacySpinner, HelpField } = NgReact;
     const groupings = this.state.initialized ? (
       <div>
         { this.state.groups.map((group) => (
@@ -150,7 +150,7 @@ export class LoadBalancers extends React.Component<ILoadBalancersProps, ILoadBal
       </div>
     ) : (
       <div>
-        <h3><Spinner radius={30} width={8} length={16}/></h3>
+        <h3><LegacySpinner radius={30} width={8} length={16}/></h3>
       </div>
     );
 

app/scripts/modules/core/src/presentation/main.less

@@ -62,7 +62,7 @@ html {
     }
     color: var(--color-accent);
     &:active, &:hover, &:focus, &.active {
-      color: var(--color-alto);
+      color: var(--color-primary);
     }
   }
   .btn-primary {

app/scripts/modules/core/src/reactShims/ngReact.ts

@@ -23,7 +23,7 @@ import { IInsightLayoutProps } from 'core/insight/InsightLayout';
 import { IInstanceListProps, instanceListBindings } from '../instance/InstanceList';
 import { InsightLayoutComponent } from 'core/insight/insightLayout.component';
 import { IRunningTasksTagProps, runningTasksTagBindings } from '../serverGroup/pod/RunningTasksTag';
-import { ISpinnerProps, SpinnerWrapperComponent } from '../widgets/Spinner';
+import { ILegacySpinnerProps, SpinnerWrapperComponent } from '../widgets/Spinner';
 import { ITaskMonitorProps } from 'core/task/monitor/TaskMonitor';
 import { ReactInject } from './react.injector';
 import { TaskMonitorWrapperComponent } from 'core/task/monitor/taskMonitor.directive';
@@ -47,7 +47,7 @@ export class NgReactInjector extends ReactInject {
   public InsightLayout: React.ComponentClass<IInsightLayoutProps>                     = angular2react('insightLayout', new InsightLayoutComponent(), this.$injectorProxy) as any;
   public InstanceList: React.ComponentClass<IInstanceListProps>                       = angular2react('instanceList', { bindings: instanceListBindings }, this.$injectorProxy) as any;
   public RunningTasksTag: React.ComponentClass<IRunningTasksTagProps>                 = angular2react('runningTasksTag', { bindings: runningTasksTagBindings }, this.$injectorProxy) as any;
-  public Spinner: React.ComponentClass<ISpinnerProps>                                 = angular2react('spinnerWrapper', new SpinnerWrapperComponent(), this.$injectorProxy) as any;
+  public LegacySpinner: React.ComponentClass<ILegacySpinnerProps>                     = angular2react('spinnerWrapper', new SpinnerWrapperComponent(), this.$injectorProxy) as any;
   public TaskMonitorWrapper: React.ComponentClass<ITaskMonitorProps>                  = angular2react('taskMonitorWrapper', new TaskMonitorWrapperComponent(), this.$injectorProxy) as any;
   public UserMenu: React.ComponentClass<{}>                                           = angular2react('userMenu', {}, this.$injectorProxy) as any;
   public GlobalSearch: React.ComponentClass<{}>                                       = angular2react('globalSearch', {}, this.$injectorProxy) as any;

app/scripts/modules/core/src/reactShims/react.injector.ts

@@ -36,7 +36,9 @@ import { ProviderSelectionService } from '../cloudProvider/providerSelection/pro
 import { RecentHistoryService } from 'core/history/recentHistory.service'
 import { SchedulerFactory } from '../scheduler/scheduler.factory';
 import { StateEvents } from './state.events';
+import { TaskExecutor } from '../task/taskExecutor';
 import { TaskMonitorBuilder } from '../task/monitor/taskMonitor.builder';
+import { TaskReader } from '../task/task.read.service';
 import { VariableInputService } from '../pipeline/config/templates/inputs/variableInput.service';
 import { VariableValidatorService } from '../pipeline/config/templates/validators/variableValidator.service';
 import { ViewStateCacheService } from '../cache/viewStateCache.service';
@@ -98,6 +100,8 @@ export class CoreReactInject extends ReactInject {
   public get schedulerFactory() { return this.$injector.get('schedulerFactory') as SchedulerFactory; }
   public get recentHistoryService() { return this.$injector.get('recentHistoryService') as RecentHistoryService; }
   public get stateEvents() { return this.$injector.get('stateEvents') as StateEvents; }
+  public get taskExecutor() { return this.$injector.get('taskExecutor') as TaskExecutor; }
+  public get taskReader() { return this.$injector.get('taskReader') as TaskReader; }
   public get taskMonitorBuilder() { return this.$injector.get('taskMonitorBuilder') as TaskMonitorBuilder; }
   public get variableInputService() { return this.$injector.get('variableInputService') as VariableInputService; }
   public get variableValidatorService() { return this.$injector.get('variableValidatorService') as VariableValidatorService; }

app/scripts/modules/core/src/widgets/Spinner.tsx

@@ -1,6 +1,6 @@
 import { module, IComponentOptions } from 'angular';
 
-export interface ISpinnerProps {
+export interface ILegacySpinnerProps {
   radius: number;
   width: number;
   length: number;

app/scripts/modules/core/src/widgets/cluster/ClusterMatches.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { IClusterMatch } from './clusterMatches.component';
+import { NgReact } from 'core/reactShims/ngReact';
+
+export interface IClusterMatchesProps {
+  matches: IClusterMatch[]
+}
+
+export class ClusterMatches extends React.Component<IClusterMatchesProps> {
+
+  public render() {
+    const { matches } = this.props;
+    const { AccountTag } = NgReact;
+    if (!matches || !matches.length) {
+      return (<div>(no matches)</div>);
+    }
+    return (
+      <ul className="nostyle">
+        {matches.map((match: IClusterMatch, index: number) => (
+          <li key={index}>
+            <AccountTag account={match.account}/>
+            <span className="break-word">{match.name}</span>
+            {match.regions && match.regions.length && <i> in {match.regions.join(', ')}</i>}
+          </li>
+        ))}
+      </ul>
+    );
+  }
+}

app/scripts/modules/core/src/widgets/cluster/clusterMatches.component.ts

@@ -1,27 +1,14 @@
-import {module, IComponentOptions} from 'angular';
+import { module } from 'angular';
+import { react2angular } from 'react2angular';
+
+import { ClusterMatches } from './ClusterMatches';
 
 export interface IClusterMatch {
   name: string;
   account: string;
   regions: string[];
 }
 
-class ClusterMatchesComponent implements IComponentOptions {
-
-  public bindings: any = {
-    matches: '=',
-    index: '='
-  };
-  public template = `
-    <div ng-repeat="match in $ctrl.matches[$ctrl.index]">
-      <account-tag account="match.account"></account-tag>
-      <span class="break-word">{{match.name}}</span>
-      <i ng-if="match.regions">in {{match.regions.join(', ')}}</i>
-    </div>
-    <div ng-if="$ctrl.matches[$ctrl.index].length === 0">(no matches)</div>
-  `;
-}
-
 export const CLUSTER_MATCHES_COMPONENT = 'spinnaker.core.widget.cluster.clusterMatches.component';
 module(CLUSTER_MATCHES_COMPONENT, [])
-  .component('clusterMatches', new ClusterMatchesComponent());
+  .component('clusterMatches', react2angular(ClusterMatches, ['matches']));

app/scripts/modules/core/src/widgets/index.ts

@@ -1,6 +1,8 @@
 export * from './cluster/clusterMatches.component';
+export * from './cluster/ClusterMatches';
 export * from './CustomDropdown';
 export * from './Keys';
 export * from './notifier/notifier.service';
 export * from './Spinner';
+export * from './spinners/Spinner';
 export * from './tags';