From 2fd1aa97195cc1bf8c26447a3d144e6d6192021f Mon Sep 17 00:00:00 2001
From: Erik Munson <emunson@netflix.com>
Date: Fri, 28 Jun 2019 08:12:22 -0700
Subject: [PATCH]  feat(core/amazon): add a visual indicator to infra managed
 by Keel (#7161)

---
 .../details/instance.details.controller.js    |  2 -
 .../src/instance/details/instanceDetails.html |  8 +++-
 .../details/loadBalancerDetails.controller.ts |  2 +
 .../details/loadBalancerDetails.html          |  9 +++-
 .../details/targetGroupDetails.controller.ts  | 10 ++---
 .../details/targetGroupDetails.html           | 37 ++++-------------
 .../details/securityGroupDetail.controller.js |  2 +
 .../details/securityGroupDetail.html          | 17 ++++++--
 app/scripts/modules/core/src/index.ts         |  2 +
 .../ManagedResourceDetailsIndicator.less      |  4 ++
 .../ManagedResourceDetailsIndicator.tsx       | 41 +++++++++++++++++++
 app/scripts/modules/core/src/managed/index.ts |  2 +
 ...nagedResourceDetailsIndicator.component.ts | 10 +++++
 .../details/ServerGroupDetails.tsx            |  2 +
 14 files changed, 106 insertions(+), 42 deletions(-)
 create mode 100644 app/scripts/modules/core/src/managed/ManagedResourceDetailsIndicator.less
 create mode 100644 app/scripts/modules/core/src/managed/ManagedResourceDetailsIndicator.tsx
 create mode 100644 app/scripts/modules/core/src/managed/index.ts
 create mode 100644 app/scripts/modules/core/src/managed/managedResourceDetailsIndicator.component.ts

diff --git a/app/scripts/modules/amazon/src/instance/details/instance.details.controller.js b/app/scripts/modules/amazon/src/instance/details/instance.details.controller.js
index 31eee69854b..7b81b6d1877 100644
--- a/app/scripts/modules/amazon/src/instance/details/instance.details.controller.js
+++ b/app/scripts/modules/amazon/src/instance/details/instance.details.controller.js
@@ -25,7 +25,6 @@ module.exports = angular
   .controller('awsInstanceDetailsCtrl', [
     '$scope',
     '$state',
-    '$uibModal',
     'amazonInstanceWriter',
     'confirmationModalService',
     'instance',
@@ -37,7 +36,6 @@ module.exports = angular
     function(
       $scope,
       $state,
-      $uibModal,
       amazonInstanceWriter,
       confirmationModalService,
       instance,
diff --git a/app/scripts/modules/amazon/src/instance/details/instanceDetails.html b/app/scripts/modules/amazon/src/instance/details/instanceDetails.html
index a470bfc71d2..572ce503d05 100644
--- a/app/scripts/modules/amazon/src/instance/details/instanceDetails.html
+++ b/app/scripts/modules/amazon/src/instance/details/instanceDetails.html
@@ -116,9 +116,13 @@ <h3 class="horizontal middle space-between flex-1" select-on-dbl-click>
           >
         </dd>
         <dt ng-if="instance.serverGroup">VPC</dt>
-        <dd ng-if="instance.serverGroup"><vpc-tag vpc-id="instance.vpcId"></vpc-tag></dd>
+        <dd ng-if="instance.serverGroup">
+          <vpc-tag vpc-id="instance.vpcId"></vpc-tag>
+        </dd>
         <dt ng-if="instance.subnetId">Subnet</dt>
-        <dd ng-if="instance.subnetId"><subnet-tag subnet-id="instance.subnetId"></subnet-tag></dd>
+        <dd ng-if="instance.subnetId">
+          <subnet-tag subnet-id="instance.subnetId"></subnet-tag>
+        </dd>
         <dt ng-if="instance.imageId">Image ID</dt>
         <dd ng-if="instance.imageId">{{instance.imageId}}</dd>
       </dl>
diff --git a/app/scripts/modules/amazon/src/loadBalancer/details/loadBalancerDetails.controller.ts b/app/scripts/modules/amazon/src/loadBalancer/details/loadBalancerDetails.controller.ts
index 84a0c41031c..eac9273336c 100644
--- a/app/scripts/modules/amazon/src/loadBalancer/details/loadBalancerDetails.controller.ts
+++ b/app/scripts/modules/amazon/src/loadBalancer/details/loadBalancerDetails.controller.ts
@@ -16,6 +16,7 @@ import {
   SecurityGroupReader,
   SubnetReader,
   FirewallLabels,
+  MANAGED_RESOURCE_DETAILS_INDICATOR,
 } from '@spinnaker/core';
 
 import {
@@ -234,4 +235,5 @@ module(AWS_LOAD_BALANCER_DETAILS_CTRL, [
   LOAD_BALANCER_ACTIONS,
   LOAD_BALANCER_READ_SERVICE,
   CONFIRMATION_MODAL_SERVICE,
+  MANAGED_RESOURCE_DETAILS_INDICATOR,
 ]).controller('awsLoadBalancerDetailsCtrl', AwsLoadBalancerDetailsController);
diff --git a/app/scripts/modules/amazon/src/loadBalancer/details/loadBalancerDetails.html b/app/scripts/modules/amazon/src/loadBalancer/details/loadBalancerDetails.html
index 88d718fa734..ae2d3fc7ad9 100644
--- a/app/scripts/modules/amazon/src/loadBalancer/details/loadBalancerDetails.html
+++ b/app/scripts/modules/amazon/src/loadBalancer/details/loadBalancerDetails.html
@@ -58,6 +58,11 @@ <h3 class="horizontal middle space-between flex-1" select-on-dbl-click>
       </div>
     </div>
   </div>
+  <managed-resource-details-indicator
+    ng-if="!ctrl.state.loading && ctrl.loadBalancer.entityTags"
+    entity-tags="[ctrl.loadBalancer.entityTags]"
+  >
+  </managed-resource-details-indicator>
   <div ng-if="!ctrl.state.loading" class="content">
     <collapsible-section heading="Load Balancer Details" expanded="true">
       <dl class="dl-horizontal dl-flex">
@@ -68,7 +73,9 @@ <h3 class="horizontal middle space-between flex-1" select-on-dbl-click>
           <account-tag account="ctrl.loadBalancer.account" pad="right"></account-tag> {{ctrl.loadBalancer.region}}
         </dd>
         <dt>VPC</dt>
-        <dd><vpc-tag vpc-id="ctrl.loadBalancer.elb.vpcId"></vpc-tag></dd>
+        <dd>
+          <vpc-tag vpc-id="ctrl.loadBalancer.elb.vpcId"></vpc-tag>
+        </dd>
         <dt>Subnet</dt>
         <dd>{{ctrl.getFirstSubnetPurpose(ctrl.loadBalancer.subnetDetails)}}</dd>
         <dt ng-if="ctrl.ipAddressTypeDescription">Type</dt>
diff --git a/app/scripts/modules/amazon/src/loadBalancer/details/targetGroupDetails.controller.ts b/app/scripts/modules/amazon/src/loadBalancer/details/targetGroupDetails.controller.ts
index 008cced1682..f119088b525 100644
--- a/app/scripts/modules/amazon/src/loadBalancer/details/targetGroupDetails.controller.ts
+++ b/app/scripts/modules/amazon/src/loadBalancer/details/targetGroupDetails.controller.ts
@@ -1,7 +1,7 @@
 import { IController, IPromise, IQService, IScope, module } from 'angular';
 import { StateService } from '@uirouter/angularjs';
 
-import { Application, ILoadBalancer } from '@spinnaker/core';
+import { Application, ILoadBalancer, MANAGED_RESOURCE_DETAILS_INDICATOR } from '@spinnaker/core';
 
 import { IAmazonApplicationLoadBalancer, ITargetGroup } from 'amazon/domain/IAmazonLoadBalancer';
 
@@ -87,7 +87,7 @@ export class AwsTargetGroupDetailsController implements IController {
 }
 
 export const AWS_TARGET_GROUP_DETAILS_CTRL = 'spinnaker.amazon.loadBalancer.details.targetGroupDetails.controller';
-module(AWS_TARGET_GROUP_DETAILS_CTRL, [require('@uirouter/angularjs').default]).controller(
-  'awsTargetGroupDetailsCtrl',
-  AwsTargetGroupDetailsController,
-);
+module(AWS_TARGET_GROUP_DETAILS_CTRL, [
+  require('@uirouter/angularjs').default,
+  MANAGED_RESOURCE_DETAILS_INDICATOR,
+]).controller('awsTargetGroupDetailsCtrl', AwsTargetGroupDetailsController);
diff --git a/app/scripts/modules/amazon/src/loadBalancer/details/targetGroupDetails.html b/app/scripts/modules/amazon/src/loadBalancer/details/targetGroupDetails.html
index e9844af7e31..22fcc809c88 100644
--- a/app/scripts/modules/amazon/src/loadBalancer/details/targetGroupDetails.html
+++ b/app/scripts/modules/amazon/src/loadBalancer/details/targetGroupDetails.html
@@ -22,42 +22,21 @@ <h3 class="horizontal middle space-between flex-1" select-on-dbl-click>
         {{ctrl.targetGroup.name}}
       </h3>
     </div>
-    <div>
-      <div class="actions">
-        <div class="dropdown" uib-dropdown dropdown-append-to-body>
-          <button
-            type="button"
-            class="btn btn-sm btn-primary dropdown-toggle"
-            style="visibility: hidden"
-            disabled
-            uib-dropdown-toggle
-          >
-            Target Group Actions <span class="caret"></span>
-          </button>
-          <ul class="dropdown-menu" uib-dropdown-menu role="menu">
-            <li><a href ng-click="ctrl.editLoadBalancer()">Edit Target Group</a></li>
-            <li ng-if="!ctrl.loadBalancer.instances.length">
-              <a href ng-click="ctrl.deleteLoadBalancer()">Delete Target Group</a>
-            </li>
-            <li
-              ng-if="ctrl.loadBalancer.instances.length"
-              class="disabled"
-              uib-tooltip="You must detach all instances before you can delete this load balancer."
-            >
-              <a href ng-click="ctrl.deleteLoadBalancer()">Delete Target Group</a>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
   </div>
+  <managed-resource-details-indicator
+    ng-if="!ctrl.state.loading && ctrl.loadBalancer.entityTags"
+    entity-tags="[ctrl.loadBalancer.entityTags]"
+  >
+  </managed-resource-details-indicator>
   <div ng-if="!ctrl.state.loading" class="content">
     <collapsible-section heading="Target Group Details" expanded="true">
       <dl class="dl-horizontal dl-flex">
         <dt>In</dt>
         <dd><account-tag account="ctrl.targetGroup.account" pad="right"></account-tag> {{ctrl.targetGroup.region}}</dd>
         <dt>VPC</dt>
-        <dd><vpc-tag vpc-id="ctrl.targetGroup.vpcId"></vpc-tag></dd>
+        <dd>
+          <vpc-tag vpc-id="ctrl.targetGroup.vpcId"></vpc-tag>
+        </dd>
         <dt>Protocol</dt>
         <dd>{{ctrl.targetGroup.protocol}}</dd>
         <dt>Port</dt>
diff --git a/app/scripts/modules/amazon/src/securityGroup/details/securityGroupDetail.controller.js b/app/scripts/modules/amazon/src/securityGroup/details/securityGroupDetail.controller.js
index 7c67a4746a3..efcac059715 100644
--- a/app/scripts/modules/amazon/src/securityGroup/details/securityGroupDetail.controller.js
+++ b/app/scripts/modules/amazon/src/securityGroup/details/securityGroupDetail.controller.js
@@ -10,6 +10,7 @@ import {
   SECURITY_GROUP_READER,
   SecurityGroupWriter,
   FirewallLabels,
+  MANAGED_RESOURCE_DETAILS_INDICATOR,
 } from '@spinnaker/core';
 
 import { VpcReader } from '../../vpc/VpcReader';
@@ -20,6 +21,7 @@ module.exports = angular
     SECURITY_GROUP_READER,
     CONFIRMATION_MODAL_SERVICE,
     require('../clone/cloneSecurityGroup.controller').name,
+    MANAGED_RESOURCE_DETAILS_INDICATOR,
   ])
   .controller('awsSecurityGroupDetailsCtrl', [
     '$scope',
diff --git a/app/scripts/modules/amazon/src/securityGroup/details/securityGroupDetail.html b/app/scripts/modules/amazon/src/securityGroup/details/securityGroupDetail.html
index 456db1c5f99..041722566da 100644
--- a/app/scripts/modules/amazon/src/securityGroup/details/securityGroupDetail.html
+++ b/app/scripts/modules/amazon/src/securityGroup/details/securityGroupDetail.html
@@ -54,17 +54,26 @@ <h3 class="horizontal middle space-between flex-1" select-on-dbl-click>
       </div>
     </div>
   </div>
+  <managed-resource-details-indicator
+    ng-if="!state.loading && securityGroup.entityTags"
+    entity-tags="[securityGroup.entityTags]"
+  >
+  </managed-resource-details-indicator>
   <div class="content" ng-if="!state.loading">
     <collapsible-section heading="{{ctrl.firewallLabel}} Details" expanded="true">
       <dl class="dl-horizontal dl-medium">
         <dt>ID</dt>
         <dd>{{securityGroup.id}}</dd>
         <dt>Account</dt>
-        <dd><account-tag account="securityGroup.accountName"></account-tag></dd>
+        <dd>
+          <account-tag account="securityGroup.accountName"></account-tag>
+        </dd>
         <dt>Region</dt>
         <dd>{{securityGroup.region}}</dd>
         <dt>VPC</dt>
-        <dd><vpc-tag vpc-id="securityGroup.vpcId"></vpc-tag></dd>
+        <dd>
+          <vpc-tag vpc-id="securityGroup.vpcId"></vpc-tag>
+        </dd>
         <dt>Description</dt>
         <dd>{{securityGroup.description}}</dd>
       </dl>
@@ -102,7 +111,9 @@ <h3 class="horizontal middle space-between flex-1" select-on-dbl-click>
         ng-class="insightCtrl.vm.filtersExpanded ? '' : 'dl-horizontal dl-medium'"
         ng-repeat="rule in securityGroupRules | orderBy: 'securityGroup.name' "
       >
-        <dt><firewall-label label="Firewall"></firewall-label></dt>
+        <dt>
+          <firewall-label label="Firewall"></firewall-label>
+        </dt>
         <dd ng-if="rule.securityGroup.name">
           <a
             ui-sref="^.firewallDetails({name: rule.securityGroup.name, accountId: rule.securityGroup.accountName, region: rule.securityGroup.region, vpcId: rule.securityGroup.vpcId, provider: 'aws'})"
diff --git a/app/scripts/modules/core/src/index.ts b/app/scripts/modules/core/src/index.ts
index d21670c046c..cef0b60dd35 100644
--- a/app/scripts/modules/core/src/index.ts
+++ b/app/scripts/modules/core/src/index.ts
@@ -44,6 +44,8 @@ export * from './loadBalancer';
 
 export * from './modal';
 
+export * from './managed';
+
 export * from './manifest';
 
 export * from './naming';
diff --git a/app/scripts/modules/core/src/managed/ManagedResourceDetailsIndicator.less b/app/scripts/modules/core/src/managed/ManagedResourceDetailsIndicator.less
new file mode 100644
index 00000000000..fc2c75ab45a
--- /dev/null
+++ b/app/scripts/modules/core/src/managed/ManagedResourceDetailsIndicator.less
@@ -0,0 +1,4 @@
+.ManagedResourceDetailsIndicator > .icon {
+  text-shadow: 0px 1px 4px rgba(0, 0, 0, 0.5);
+  padding-right: 5px;
+}
diff --git a/app/scripts/modules/core/src/managed/ManagedResourceDetailsIndicator.tsx b/app/scripts/modules/core/src/managed/ManagedResourceDetailsIndicator.tsx
new file mode 100644
index 00000000000..c92447e8441
--- /dev/null
+++ b/app/scripts/modules/core/src/managed/ManagedResourceDetailsIndicator.tsx
@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { get } from 'lodash';
+
+import { IEntityTags } from 'core/domain';
+import { HoverablePopover } from 'core/presentation';
+
+import './ManagedResourceDetailsIndicator.less';
+
+export const MANAGED_BY_SPINNAKER_TAG_NAME = 'spinnaker_ui_notice:managed_by_spinnaker';
+
+export interface IManagedResourceDetailsIndicatorProps {
+  entityTags: IEntityTags[];
+}
+
+export const ManagedResourceDetailsIndicator = ({ entityTags }: IManagedResourceDetailsIndicatorProps) => {
+  const isManaged =
+    get(entityTags, 'length') &&
+    entityTags.some(({ tags }) => tags.some(({ name }) => name === MANAGED_BY_SPINNAKER_TAG_NAME));
+
+  if (!isManaged) {
+    return null;
+  }
+
+  const helpText = (
+    <>
+      <p>
+        <b>Spinnaker is continuously managing this resource.</b>
+      </p>
+      <p>Changes made in the UI will be stomped in favor of the existing declarative configuration.</p>
+    </>
+  );
+
+  return (
+    <HoverablePopover template={helpText} placement="left">
+      <div className="band band-info ManagedResourceDetailsIndicator">
+        <span className="icon">🌈</span>
+        Managed by Spinnaker
+      </div>
+    </HoverablePopover>
+  );
+};
diff --git a/app/scripts/modules/core/src/managed/index.ts b/app/scripts/modules/core/src/managed/index.ts
new file mode 100644
index 00000000000..93dd424131f
--- /dev/null
+++ b/app/scripts/modules/core/src/managed/index.ts
@@ -0,0 +1,2 @@
+export * from './ManagedResourceDetailsIndicator';
+export * from './managedResourceDetailsIndicator.component';
diff --git a/app/scripts/modules/core/src/managed/managedResourceDetailsIndicator.component.ts b/app/scripts/modules/core/src/managed/managedResourceDetailsIndicator.component.ts
new file mode 100644
index 00000000000..007664f4dc1
--- /dev/null
+++ b/app/scripts/modules/core/src/managed/managedResourceDetailsIndicator.component.ts
@@ -0,0 +1,10 @@
+import { module } from 'angular';
+import { react2angular } from 'react2angular';
+
+import { ManagedResourceDetailsIndicator } from './ManagedResourceDetailsIndicator';
+
+export const MANAGED_RESOURCE_DETAILS_INDICATOR = 'spinnaker.core.managed.resourceDetailsIndicator.component';
+module(MANAGED_RESOURCE_DETAILS_INDICATOR, []).component(
+  'managedResourceDetailsIndicator',
+  react2angular(ManagedResourceDetailsIndicator, ['entityTags']),
+);
diff --git a/app/scripts/modules/core/src/serverGroup/details/ServerGroupDetails.tsx b/app/scripts/modules/core/src/serverGroup/details/ServerGroupDetails.tsx
index 4d1482be236..f1fd24810cc 100644
--- a/app/scripts/modules/core/src/serverGroup/details/ServerGroupDetails.tsx
+++ b/app/scripts/modules/core/src/serverGroup/details/ServerGroupDetails.tsx
@@ -4,6 +4,7 @@ import { Subject } from 'rxjs';
 
 import { CloudProviderLogo } from 'core/cloudProvider/CloudProviderLogo';
 import { EntityNotifications } from 'core/entityTag/notifications/EntityNotifications';
+import { ManagedResourceDetailsIndicator } from 'core/managed';
 import { IServerGroup } from 'core/domain';
 import { ReactInjector } from 'core/reactShims';
 import { SETTINGS } from 'core/config/settings';
@@ -121,6 +122,7 @@ export class ServerGroupDetails extends React.Component<IServerGroupDetailsProps
         {serverGroup && serverGroup.isDisabled && (
           <div className="band band-info">Disabled {timestamp(serverGroup.disabledDate)}</div>
         )}
+        {!loading && <ManagedResourceDetailsIndicator entityTags={serverGroup.clusterEntityTags} />}
         {!loading && (
           <div className="content">
             <RunningTasks serverGroup={serverGroup} application={app} />