refactor(cluster): allow cluster pod header to be customized

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

@@ -2,14 +2,14 @@ import * as React from 'react';
 import autoBindMethods from 'class-autobind-decorator';
 import { orderBy } from 'lodash';
 
-import { NgReact, ReactInjector } from 'core/reactShims';
+import { ReactInjector } from 'core/reactShims';
 import { ServerGroup } from 'core/serverGroup/ServerGroup';
 import { Application } from 'core/application';
 import { EntityNotifications } from 'core/entityTag/notifications/EntityNotifications';
-import { HealthCounts } from 'core/healthCounts';
 import { IServerGroup } from 'core/domain';
 import { Tooltip } from 'core/presentation';
 import { IClusterSubgroup, IServerGroupSubgroup } from './filter/clusterFilter.service';
+import { ClusterPodTitleWrapper } from 'core/cluster/ClusterPodTitleWrapper';
 
 export interface IClusterPodProps {
   grouping: IClusterSubgroup;
@@ -43,12 +43,22 @@ export class ClusterPod extends React.Component<IClusterPodProps, IClusterPodSta
 
   public render() {
     const { grouping } = this.props;
+    const { showCloseButton } = this.state;
 
     return (
       <div className="row rollup-entry sub-group">
         <div className="sticky-header">
           <div className="rollup-summary">
-            {this.renderPodTitle()}
+            <ClusterPodTitleWrapper {...this.props} />
+            {showCloseButton && (
+              <div className="remove-button">
+                <Tooltip value="Remove cluster from view">
+                  <button className="btn btn-link" onClick={this.close}>
+                    <span className="glyphicon glyphicon-remove"/>
+                  </button>
+                </Tooltip>
+              </div>
+            )}
           </div>
         </div>
 
@@ -59,50 +69,6 @@ export class ClusterPod extends React.Component<IClusterPodProps, IClusterPodSta
     );
   }
 
-  private renderPodTitle() {
-    const { AccountTag } = NgReact;
-    const { grouping, application, parentHeading } = this.props;
-    const { showCloseButton } = this.state;
-
-    return (
-      <div className="rollup-title-cell">
-        <div className="heading-tag">
-          <AccountTag account={parentHeading} />
-        </div>
-
-        <div className="pod-center">
-          <div>
-            <span className="glyphicon glyphicon-th"/>
-            {' ' + grouping.heading}
-          </div>
-
-          <EntityNotifications
-            entity={grouping}
-            application={application}
-            placement="top"
-            hOffsetPercent="90%"
-            entityType="cluster"
-            pageLocation="pod"
-            className="inverse"
-            onUpdate={application.serverGroups.refresh}
-          />
-        </div>
-
-        <HealthCounts container={grouping.cluster.instanceCounts}/>
-
-        {showCloseButton && (
-          <div className="remove-button">
-            <Tooltip value="Remove cluster from view">
-              <button className="btn btn-link" onClick={this.close}>
-                <span className="glyphicon glyphicon-remove"/>
-              </button>
-            </Tooltip>
-          </div>
-        )}
-      </div>
-    )
-  }
-
   private renderSubGroup(subgroup: IServerGroupSubgroup) {
     const { grouping, application, sortFilter } = this.props;
     const sortedServerGroups = orderBy(subgroup.serverGroups, ['name'], ['desc']);

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

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import autoBindMethods from 'class-autobind-decorator';
+
+import { Application } from 'core/application/application.model';
+import { ReactInjector } from 'core/reactShims';
+import { DefaultClusterPodTitle } from './DefaultClusterPodTitle';
+import { IClusterSubgroup } from './filter/clusterFilter.service';
+
+export interface IClusterPodTitleProps {
+  grouping: IClusterSubgroup;
+  application: Application;
+  parentHeading: string;
+}
+
+@autoBindMethods
+export class ClusterPodTitleWrapper extends React.Component<IClusterPodTitleProps> {
+  public render(): React.ReactElement<ClusterPodTitleWrapper> {
+    const { overrideRegistry } = ReactInjector;
+    const config = overrideRegistry.getComponent('clusterPodTitle');
+    const Title = config || DefaultClusterPodTitle;
+
+    return <Title {...this.props} />;
+  }
+}

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

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import autoBindMethods from 'class-autobind-decorator';
+
+import { NgReact } from 'core/reactShims';
+import { EntityNotifications } from 'core/entityTag/notifications/EntityNotifications';
+import { HealthCounts } from 'core/healthCounts';
+import { IClusterPodTitleProps } from './ClusterPodTitleWrapper';
+
+@autoBindMethods
+export class DefaultClusterPodTitle extends React.Component<IClusterPodTitleProps> {
+
+  public render(): React.ReactElement<DefaultClusterPodTitle> {
+    const { AccountTag } = NgReact;
+    const { grouping, application, parentHeading } = this.props;
+
+    return (
+      <div className="rollup-title-cell">
+        <div className="heading-tag">
+          <AccountTag account={parentHeading} />
+        </div>
+
+        <div className="pod-center">
+          <div>
+            <span className="glyphicon glyphicon-th"/>
+            {' ' + grouping.heading}
+          </div>
+
+          <EntityNotifications
+            entity={grouping}
+            application={application}
+            placement="top"
+            hOffsetPercent="90%"
+            entityType="cluster"
+            pageLocation="pod"
+            className="inverse"
+            onUpdate={application.serverGroups.refresh}
+          />
+        </div>
+
+        <HealthCounts container={grouping.cluster.instanceCounts}/>
+
+      </div>
+    )
+  }
+}

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

@@ -1,3 +1,5 @@
+export * from './ClusterPodTitleWrapper';
+export * from './ClusterRuleMatcher';
 export * from './cluster.service';
 export * from './task.matcher';
 export * from './filter/clusterFilter.service';

app/scripts/modules/core/src/cluster/rollups.less

@@ -138,6 +138,19 @@ table.instances {
   font-size: 110%;
   margin: 0;
   width: 100%;
+  display: flex;
+
+  .remove-button {
+    display: flex;
+    flex: 0 0 auto;
+    padding: 0 5px;
+    margin-left: 2px;
+    text-align: center;
+    button {
+      margin-right: 0;
+    }
+    background-color: var(--color-accent-g2);
+  }
 
   .tooltip {
     text-transform: none;
@@ -163,17 +176,7 @@ table.instances {
 }
 
 .rollup-title-cell {
-  .remove-button {
-    display: flex;
-    flex: 0 0 auto;
-    padding: 0 5px;
-    margin-left: 2px;
-    text-align: center;
-    button {
-      margin-right: 0;
-    }
-    background-color: var(--color-accent-g2);
-  }
+  flex: 1;
   display: flex;
   height: 36px;
   line-height: 36px;

app/scripts/modules/core/src/entityTag/entityTags.module.ts

@@ -2,7 +2,7 @@ import { module } from 'angular';
 
 import { ADD_ENTITY_TAG_LINKS_COMPONENT } from './addEntityTagLinks.component';
 import { DATA_SOURCE_NOTIFICATIONS } from './notifications/DataSourceNotifications';
-import { ENTITY_NOTIFICATIONS } from './notifications/EntityNotifications';
+import { ENTITY_NOTIFICATIONS } from './notifications/entityNotifications.component';
 import { ENTITY_SOURCE_COMPONENT } from './entitySource.component';
 import { ENTITY_TAG_WRITER } from './entityTags.write.service';
 

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

@@ -3,4 +3,3 @@ export * from './clusterTargetBuilder.service';
 export * from './entityTags.read.service';
 export * from './entityTags.write.service';
 export * from './notifications';
-

app/scripts/modules/core/src/entityTag/notifications/EntityNotifications.tsx

@@ -1,6 +1,3 @@
-import { module } from 'angular';
-
-import { react2angular } from 'react2angular';
 import * as React from 'react';
 import autoBindMethods from 'class-autobind-decorator';
 
@@ -98,37 +95,3 @@ export class EntityNotifications extends React.Component<IEntityNotificationsPro
     );
   }
 }
-
-
-export const ENTITY_NOTIFICATIONS = 'spinnaker.core.entityTag.alerts.entitynotifications';
-const ngmodule = module(ENTITY_NOTIFICATIONS, []);
-
-ngmodule.component('entityNotificationsWrapper', react2angular(EntityNotifications, [
-  'entity', 'application', 'placement', 'hOffsetPercent', 'className', 'pageLocation', 'entityType', 'onUpdate'
-]));
-
-
-ngmodule.component('entityNotifications', {
-  template: `
-    <entity-notifications-wrapper
-      entity="$ctrl.entity"
-      application="$ctrl.application"
-      placement="$ctrl.placement"
-      h-offset-percent="$ctrl.hOffsetPercent"
-      class-name="$ctrl.className"
-      entity-type="$ctrl.entityType"
-      page-location="$ctrl.pageLocation"
-      on-update="$ctrl.onUpdate"
-    ></entity-notifications-wrapper>
-  `,
-  bindings: {
-    entity: '<',
-    application: '<',
-    placement: '@',
-    hOffsetPercent: '@',
-    className: '@',
-    entityType: '@',
-    pageLocation: '@',
-    onUpdate: '&',
-  }
-});

app/scripts/modules/core/src/entityTag/notifications/entityNotifications.component.ts

@@ -0,0 +1,38 @@
+import { module } from 'angular';
+
+import { react2angular } from 'react2angular';
+
+import { EntityNotifications } from './EntityNotifications';
+
+export const ENTITY_NOTIFICATIONS = 'spinnaker.core.entityTag.alerts.entitynotifications';
+const ngmodule = module(ENTITY_NOTIFICATIONS, []);
+
+ngmodule.component('entityNotificationsWrapper', react2angular(EntityNotifications, [
+  'entity', 'application', 'placement', 'hOffsetPercent', 'className', 'pageLocation', 'entityType', 'onUpdate'
+]));
+
+
+ngmodule.component('entityNotifications', {
+  template: `
+    <entity-notifications-wrapper
+      entity="$ctrl.entity"
+      application="$ctrl.application"
+      placement="$ctrl.placement"
+      h-offset-percent="$ctrl.hOffsetPercent"
+      class-name="$ctrl.className"
+      entity-type="$ctrl.entityType"
+      page-location="$ctrl.pageLocation"
+      on-update="$ctrl.onUpdate"
+    ></entity-notifications-wrapper>
+  `,
+  bindings: {
+    entity: '<',
+    application: '<',
+    placement: '@',
+    hOffsetPercent: '@',
+    className: '@',
+    entityType: '@',
+    pageLocation: '@',
+    onUpdate: '&',
+  }
+});

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

@@ -17,6 +17,9 @@ export * from './deploymentStrategy';
 export * from './domain';
 
 export * from './entityTag';
+// TODO: try pushing this export back down; for some unknown reason, it causes grief with the library (the export
+// is found by the TS compiler, but not at runtime)
+export * from './entityTag/notifications/EntityNotifications';
 
 export * from './filterModel';
 

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

@@ -1,3 +1,4 @@
+export * from './cluster/clusterMatches.component';
 export * from './CustomDropdown';
 export * from './Keys';
 export * from './notifier/notifier.service';