@spinnaker/amazon 0.0.0-2025.1-0

package/src/loadBalancer/details/loadBalancerDetails.controller.spec.ts

@@ -0,0 +1,76 @@
+import type { StateService } from '@uirouter/core';
+import type { IControllerService, IRootScopeService } from 'angular';
+import { mock } from 'angular';
+
+import type { ISubnet } from '@spinnaker/core';
+import { ApplicationModelBuilder } from '@spinnaker/core';
+
+import { AWS_LOAD_BALANCER_DETAILS_CTRL, AwsLoadBalancerDetailsController } from './loadBalancerDetails.controller';
+
+describe('Controller: LoadBalancerDetailsCtrl', function () {
+  let controller: AwsLoadBalancerDetailsController;
+  let $scope;
+  let $state;
+  const loadBalancer = {
+    name: 'foo',
+    region: 'us-west-1',
+    account: 'test',
+    accountId: 'test',
+    vpcId: '1',
+  };
+
+  beforeEach(mock.module(AWS_LOAD_BALANCER_DETAILS_CTRL));
+
+  beforeEach(
+    mock.inject(($controller: IControllerService, $rootScope: IRootScopeService, _$state_: StateService) => {
+      $scope = $rootScope.$new();
+      $state = _$state_;
+      const app = ApplicationModelBuilder.createApplicationForTests('app', {
+        key: 'loadBalancers',
+        lazy: true,
+        defaultData: [],
+      });
+      app.loadBalancers.data.push(loadBalancer);
+      controller = $controller(AwsLoadBalancerDetailsController, {
+        $scope,
+        loadBalancer,
+        app,
+        $state,
+      });
+    }),
+  );
+
+  it('should have an instantiated controller', function () {
+    expect(controller).toBeDefined();
+  });
+
+  describe('Get the first subnets purpose', function () {
+    it('should return empty string if there are no subnets ', function () {
+      const subnetDetails: ISubnet[] = [];
+      const result = controller.getFirstSubnetPurpose(subnetDetails);
+      expect(result).toEqual('');
+    });
+
+    it('should return empty string if no subnetDetail is submitted', function () {
+      const result = controller.getFirstSubnetPurpose();
+      expect(result).toEqual('');
+    });
+
+    it('should return empty string if undefined subnetDetail is submitted', function () {
+      const result = controller.getFirstSubnetPurpose(undefined);
+      expect(result).toEqual('');
+    });
+
+    it('should return the first purpose of subnetDetail if there is only one', function () {
+      const subnetDetails = [{ purpose: 'internal(vpc0)' }] as ISubnet[];
+      const result = controller.getFirstSubnetPurpose(subnetDetails);
+      expect(result).toEqual('internal(vpc0)');
+    });
+
+    it('should return the first purpose of subnetDetail if there are multiple', function () {
+      const subnetDetails = [{ purpose: 'internal(vpc0)' }, { purpose: 'internal(vpc1)' }] as ISubnet[];
+      const result = controller.getFirstSubnetPurpose(subnetDetails);
+      expect(result).toEqual('internal(vpc0)');
+    });
+  });
+});

package/src/loadBalancer/details/loadBalancerDetails.controller.ts

@@ -0,0 +1,240 @@
+import type { StateService } from '@uirouter/angularjs';
+import UIROUTER_ANGULARJS from '@uirouter/angularjs';
+import type { IController, IQService, IScope } from 'angular';
+import { module } from 'angular';
+import { head, sortBy } from 'lodash';
+
+import type {
+  Application,
+  IApplicationSecurityGroup,
+  ILoadBalancer,
+  ISecurityGroup,
+  ISubnet,
+  LoadBalancerReader,
+  SecurityGroupReader,
+} from '@spinnaker/core';
+import {
+  FirewallLabels,
+  LOAD_BALANCER_READ_SERVICE,
+  MANAGED_RESOURCE_DETAILS_INDICATOR,
+  SECURITY_GROUP_READER,
+  SETTINGS,
+  SubnetReader,
+} from '@spinnaker/core';
+import type {
+  IAmazonApplicationLoadBalancer,
+  IAmazonLoadBalancer,
+  IAmazonLoadBalancerSourceData,
+  IApplicationLoadBalancerSourceData,
+  IClassicLoadBalancerSourceData,
+  IListenerAction,
+  ITargetGroup,
+} from '../../domain';
+
+import { LOAD_BALANCER_ACTIONS } from './loadBalancerActions.component';
+
+export interface ILoadBalancerFromStateParams {
+  accountId: string;
+  region: string;
+  name: string;
+}
+
+export interface IActionDetails extends IListenerAction {
+  targetGroup: ITargetGroup;
+}
+
+export class AwsLoadBalancerDetailsController implements IController {
+  public application: Application;
+  public elbProtocol: string;
+  public listeners: Array<{ in: string; actions: IActionDetails[] }>;
+  public loadBalancerFromParams: ILoadBalancerFromStateParams;
+  public loadBalancer: IAmazonLoadBalancer;
+  public securityGroups: ISecurityGroup[];
+  public ipAddressTypeDescription: string;
+  public state = { loading: true };
+  public firewallsLabel = FirewallLabels.get('Firewalls');
+  public oidcConfigPath = SETTINGS.oidcConfigPath;
+
+  public static $inject = [
+    '$scope',
+    '$state',
+    '$q',
+    'loadBalancer',
+    'app',
+    'securityGroupReader',
+    'loadBalancerReader',
+  ];
+  constructor(
+    private $scope: IScope,
+    private $state: StateService,
+    private $q: IQService,
+    loadBalancer: ILoadBalancerFromStateParams,
+    private app: Application,
+    private securityGroupReader: SecurityGroupReader,
+    private loadBalancerReader: LoadBalancerReader,
+  ) {
+    this.application = app;
+    this.loadBalancerFromParams = loadBalancer;
+
+    this.app
+      .ready()
+      .then(() => this.extractLoadBalancer())
+      .then(() => {
+        // If the user navigates away from the view before the initial extractLoadBalancer call completes,
+        // do not bother subscribing to the refresh
+        if (!$scope.$$destroyed) {
+          app.getDataSource('loadBalancers').onRefresh($scope, () => this.extractLoadBalancer());
+        }
+      });
+  }
+
+  public autoClose(): void {
+    if (this.$scope.$$destroyed) {
+      return;
+    }
+    this.$state.params.allowModalToStayOpen = true;
+    this.$state.go('^', null, { location: 'replace' });
+  }
+
+  public extractLoadBalancer(): PromiseLike<void> {
+    const appLoadBalancer = this.app.loadBalancers.data.find((test: ILoadBalancer) => {
+      return (
+        test.name === this.loadBalancerFromParams.name &&
+        test.region === this.loadBalancerFromParams.region &&
+        test.account === this.loadBalancerFromParams.accountId
+      );
+    });
+
+    if (appLoadBalancer) {
+      const detailsLoader = this.loadBalancerReader.getLoadBalancerDetails(
+        'aws',
+        this.loadBalancerFromParams.accountId,
+        this.loadBalancerFromParams.region,
+        this.loadBalancerFromParams.name,
+      );
+      return detailsLoader.then(
+        (details: IAmazonLoadBalancerSourceData[]) => {
+          this.loadBalancer = appLoadBalancer;
+          this.state.loading = false;
+          const securityGroups: IApplicationSecurityGroup[] = [];
+          if (details.length) {
+            this.loadBalancer.elb = details[0];
+            this.loadBalancer.elb.vpcId = this.loadBalancer.elb.vpcId || this.loadBalancer.elb.vpcid;
+            this.loadBalancer.account = this.loadBalancerFromParams.accountId;
+
+            const sourceData = details[0] as IApplicationLoadBalancerSourceData;
+            if (sourceData.loadBalancerType === 'application' || sourceData.loadBalancerType === 'network') {
+              // Transform listener data
+              const elb = details[0] as IApplicationLoadBalancerSourceData;
+              if (elb.listeners && elb.listeners.length) {
+                this.elbProtocol = 'http:';
+                if (elb.listeners.some((l: any) => l.protocol === 'HTTPS')) {
+                  this.elbProtocol = 'https:';
+                }
+
+                this.listeners = [];
+
+                // Sort the actions by the order specified since amazon does not return them in order of order
+                elb.listeners.forEach((l) => {
+                  l.defaultActions.sort((a, b) => a.order - b.order);
+                  l.rules.forEach((r) => r.actions.sort((a, b) => a.order - b.order));
+                });
+
+                elb.listeners.forEach((listener) => {
+                  listener.rules.map((rule) => {
+                    let inMatch = [
+                      listener.protocol,
+                      (rule.conditions.find((c) => c.field === 'host-header') || { values: [''] }).values[0],
+                      listener.port,
+                    ]
+                      .filter((f) => f)
+                      .join(':');
+                    const path = (rule.conditions.find((c) => c.field === 'path-pattern') || { values: [] }).values[0];
+                    if (path) {
+                      inMatch = `${inMatch}${path}`;
+                    }
+                    const actions = rule.actions.map((a) => {
+                      const action = { ...a } as IActionDetails;
+                      if (action.type === 'forward') {
+                        action.targetGroup = (this.loadBalancer as IAmazonApplicationLoadBalancer).targetGroups.find(
+                          (tg) => tg.name === action.targetGroupName,
+                        );
+                      }
+                      return action;
+                    });
+                    this.listeners.push({ in: inMatch, actions });
+                  });
+                });
+              }
+
+              if (elb.ipAddressType === 'dualstack') {
+                this.ipAddressTypeDescription = 'IPv4 and IPv6';
+              }
+              if (elb.ipAddressType === 'ipv4') {
+                this.ipAddressTypeDescription = 'IPv4';
+              }
+            } else {
+              // Classic
+              const elb = details[0] as IClassicLoadBalancerSourceData;
+              if (elb.listenerDescriptions) {
+                this.elbProtocol = 'http:';
+                if (elb.listenerDescriptions.some((l: any) => l.listener.protocol === 'HTTPS')) {
+                  this.elbProtocol = 'https:';
+                }
+              }
+            }
+
+            (this.loadBalancer.elb.securityGroups || []).forEach((securityGroupId: string) => {
+              const match = this.securityGroupReader.getApplicationSecurityGroup(
+                this.app,
+                this.loadBalancerFromParams.accountId,
+                this.loadBalancerFromParams.region,
+                securityGroupId,
+              );
+              if (match) {
+                securityGroups.push(match);
+              }
+            });
+            this.securityGroups = sortBy(securityGroups, 'name');
+
+            if (this.loadBalancer.subnets) {
+              this.loadBalancer.subnetDetails = this.loadBalancer.subnets.reduce(
+                (subnetDetails: ISubnet[], subnetId: string) => {
+                  SubnetReader.getSubnetByIdAndProvider(subnetId, this.loadBalancer.provider).then(
+                    (subnetDetail: ISubnet) => {
+                      subnetDetails.push(subnetDetail);
+                    },
+                  );
+
+                  return subnetDetails;
+                },
+                [],
+              );
+            }
+          }
+        },
+        () => this.autoClose(),
+      );
+    } else {
+      this.autoClose();
+    }
+    if (!this.loadBalancer) {
+      this.autoClose();
+    }
+
+    return this.$q.when(null);
+  }
+
+  public getFirstSubnetPurpose(subnetDetailsList: ISubnet[] = []) {
+    return head(subnetDetailsList.map((subnet) => subnet.purpose)) || '';
+  }
+}
+
+export const AWS_LOAD_BALANCER_DETAILS_CTRL = 'spinnaker.amazon.loadBalancer.details.controller';
+module(AWS_LOAD_BALANCER_DETAILS_CTRL, [
+  UIROUTER_ANGULARJS,
+  SECURITY_GROUP_READER,
+  LOAD_BALANCER_ACTIONS,
+  LOAD_BALANCER_READ_SERVICE,
+  MANAGED_RESOURCE_DETAILS_INDICATOR,
+]).controller('awsLoadBalancerDetailsCtrl', AwsLoadBalancerDetailsController);

package/src/loadBalancer/details/loadBalancerDetails.html

@@ -0,0 +1,266 @@
+<div class="details-panel">
+  <div ng-if="ctrl.state.loading" class="header">
+    <div class="close-button">
+      <a class="btn btn-link" ui-sref="^">
+        <span class="glyphicon glyphicon-remove"></span>
+      </a>
+    </div>
+    <div class="horizontal center middle spinner-container">
+      <loading-spinner size="'small'"></loading-spinner>
+    </div>
+  </div>
+
+  <div ng-if="!ctrl.state.loading" class="header">
+    <div class="close-button">
+      <a class="btn btn-link" ui-sref="^">
+        <span class="glyphicon glyphicon-remove"></span>
+      </a>
+    </div>
+    <div class="header-text horizontal middle">
+      <i class="fa icon-sitemap"></i>
+      <h3 class="horizontal middle space-between flex-1" select-on-dbl-click>
+        {{ctrl.loadBalancer.name}}
+        <render-if-feature feature="entityTags">
+          <entity-notifications
+            entity="ctrl.loadBalancer"
+            application="ctrl.application"
+            placement="bottom"
+            h-offset-percent="90%"
+            entity-type="loadBalancer"
+            page-location="details"
+            on-update="ctrl.application.loadBalancers.refresh()"
+          ></entity-notifications>
+        </render-if-feature>
+      </h3>
+    </div>
+    <div>
+      <div class="actions">
+        <load-balancer-actions
+          app="ctrl.application"
+          load-balancer="ctrl.loadBalancer"
+          load-balancer-from-params="ctrl.loadBalancerFromParams"
+        ></load-balancer-actions>
+        <div
+          class="dropdown"
+          ng-if="ctrl.loadBalancer.elb.insightActions.length > 0"
+          uib-dropdown
+          dropdown-append-to-body
+        >
+          <button type="button" class="btn btn-sm btn-default dropdown-toggle" uib-dropdown-toggle>
+            Insight <span class="caret"></span>
+          </button>
+          <ul class="dropdown-menu" uib-dropdown-menu role="menu">
+            <li ng-repeat="action in ctrl.loadBalancer.elb.insightActions">
+              <a target="_blank" href="{{action.url}}">{{action.label}}</a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+  <managed-resource-details-indicator
+    ng-if="!ctrl.state.loading && ctrl.loadBalancer.isManaged"
+    resource-summary="ctrl.loadBalancer.managedResourceSummary"
+    application="ctrl.application"
+  >
+  </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-narrow">
+        <dt>Created</dt>
+        <dd>{{ctrl.loadBalancer.elb.createdTime | timestamp}}</dd>
+        <dt>In</dt>
+        <dd>
+          <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>
+        <dt>Subnet</dt>
+        <dd>{{ctrl.getFirstSubnetPurpose(ctrl.loadBalancer.subnetDetails)}}</dd>
+        <dt>Scheme</dt>
+        <dd>{{ ctrl.loadBalancer.scheme }}</dd>
+        <dt ng-if="ctrl.loadBalancer.loadBalancerType">Type</dt>
+        <dd ng-if="ctrl.loadBalancer.loadBalancerType">{{ctrl.loadBalancer.loadBalancerType}}</dd>
+        <dt ng-if="ctrl.ipAddressTypeDescription">IP Type</dt>
+        <dd ng-if="ctrl.ipAddressTypeDescription">{{ctrl.ipAddressTypeDescription}}</dd>
+      </dl>
+      <dl class="horizontal-when-filters-collapsed">
+        <dt>Availability Zones</dt>
+        <dd>
+          <ul class="collapse-margin-on-filter-collapse">
+            <li ng-repeat="availabilityZone in ctrl.loadBalancer.elb.availabilityZones">{{availabilityZone}}</li>
+          </ul>
+        </dd>
+      </dl>
+      <dl
+        ng-if="ctrl.loadBalancer.serverGroups && ctrl.loadBalancer.serverGroups.length"
+        class="horizontal-when-filters-collapsed"
+      >
+        <dt>Server Groups</dt>
+        <dd>
+          <ul class="collapse-margin-on-filter-collapse">
+            <li ng-repeat="serverGroup in ctrl.loadBalancer.serverGroups | orderBy: ['isDisabled', '-name']">
+              <a
+                ui-sref="^.serverGroup({region: serverGroup.region,
+                                          accountId: serverGroup.account,
+                                          serverGroup: serverGroup.name,
+                                          provider: 'aws'})"
+              >
+                {{serverGroup.name}}
+              </a>
+            </li>
+          </ul>
+        </dd>
+      </dl>
+      <dl
+        ng-if="ctrl.loadBalancer.targetGroups && ctrl.loadBalancer.targetGroups.length"
+        class="horizontal-when-filters-collapsed"
+      >
+        <dt>Target Groups</dt>
+        <dd>
+          <ul class="collapse-margin-on-filter-collapse">
+            <li ng-repeat="targetGroup in ctrl.loadBalancer.targetGroups | orderBy: ['isDisabled', '-name']">
+              <a
+                ui-sref="^.targetGroupDetails({region: targetGroup.region,
+                                          loadBalancerName: ctrl.loadBalancer.name,
+                                          accountId: targetGroup.account,
+                                          name: targetGroup.name,
+                                          vpcId: targetGroup.vpcId,
+                                          provider: 'aws'})"
+              >
+                {{targetGroup.name}}
+              </a>
+            </li>
+          </ul>
+        </dd>
+      </dl>
+      <dl class="horizontal-when-filters-collapsed">
+        <dt ng-if="ctrl.loadBalancer.elb.dnsname">DNS Name</dt>
+        <dd>
+          <a target="_blank" href="{{ctrl.elbProtocol}}//{{ctrl.loadBalancer.elb.dnsname}}"
+            >{{ctrl.loadBalancer.elb.dnsname}}</a
+          >
+          <copy-to-clipboard
+            class="copy-to-clipboard copy-to-clipboard-sm"
+            text="ctrl.loadBalancer.elb.dnsname"
+            tool-tip="'Copy DNS Name to clipboard'"
+          >
+          </copy-to-clipboard>
+        </dd>
+      </dl>
+    </collapsible-section>
+    <collapsible-section heading="Status" expanded="true" ng-if="ctrl.loadBalancer.loadBalancerType === 'classic'">
+      <health-counts class="pull-left" container="ctrl.loadBalancer.instanceCounts"></health-counts>
+    </collapsible-section>
+    <collapsible-section heading="Status" expanded="false" ng-if="ctrl.loadBalancer.loadBalancerType !== 'classic'">
+      Select a target group to check the instance health status from the view of the target group.
+    </collapsible-section>
+    <collapsible-section ng-if="ctrl.loadBalancer.loadBalancerType === 'classic'" heading="Listeners">
+      <dl>
+        <dt>Load Balancer &rarr; Instance</dt>
+        <dd ng-repeat="listener in ctrl.loadBalancer.elb.listenerDescriptions">
+          {{listener.listener.protocol}}:{{listener.listener.loadBalancerPort}} &rarr;
+          {{listener.listener.instanceProtocol}}:{{listener.listener.instancePort}}
+        </dd>
+      </dl>
+    </collapsible-section>
+    <collapsible-section ng-if="ctrl.loadBalancer.loadBalancerType !== 'classic'" heading="Listeners">
+      <div ng-repeat="listener in ctrl.listeners">
+        <div class="listener-targets">{{listener.in}} &rarr;</div>
+        <div class="listener-targets">
+          <div ng-repeat="action in listener.actions">
+            <!-- redirect -->
+            <span ng-if="action.type === 'redirect'">
+              <span ng-if="action.redirectConfig.protocol !== listener.protocol">
+                {{action.redirectConfig.protocol}}:
+              </span>
+              <span ng-if="action.redirectConfig.host !== '#{host}'"> {{action.redirectConfig.host}} </span>
+              <span ng-if="action.redirectConfig.port !== '#{port}'"> {{action.redirectConfig.port}} </span>
+              <span ng-if="action.redirectConfig.path !== '/#{path}'"> {{action.redirectConfig.path}} </span>
+              <span ng-if="action.redirectConfig.query !== '#{query}'"> ?{{action.redirectConfig.query}} </span>
+              ({{action.redirectConfig.statusCode}})
+            </span>
+            <!-- authenticate-oidc -->
+            <span ng-if="action.type === 'authenticate-oidc'">
+              <i class="fas fa-fw fa-user-lock"></i>
+              <a
+                ng-if="ctrl.oidcConfigPath"
+                href="{{ctrl.oidcConfigPath}}{{action.authenticateOidcConfig.clientId}}"
+                target="_blank"
+              >
+                {{action.authenticateOidcConfig.clientId}}
+              </a>
+              <span ng-if="!ctrl.oidcConfigPath"> {{action.authenticateOidcConfig.clientId}} </span>
+            </span>
+            <!-- forward -->
+            <span ng-if="action.targetGroupName && action.targetGroup">
+              <i class="fa fa-fw fa-crosshairs icon" aria-hidden="true"></i>
+              <a
+                ui-sref="^.targetGroupDetails({region: action.targetGroup.region,
+                              loadBalancerName: ctrl.loadBalancer.name,
+                              accountId: action.targetGroup.account,
+                              name: action.targetGroup.name,
+                              vpcId: action.targetGroup.vpcId,
+                              provider: 'aws'})"
+              >
+                {{action.targetGroupName}}
+              </a>
+            </span>
+            <span ng-if="action.targetGroupName && !action.targetGroup">
+              <i class="fa fa-fw fa-crosshairs icon" aria-hidden="true"></i>
+              {{action.targetGroupName}}
+            </span>
+          </div>
+        </div>
+      </div>
+    </collapsible-section>
+    <collapsible-section
+      heading="{{ctrl.firewallsLabel}}"
+      ng-if="ctrl.loadBalancer.loadBalancerType !== 'network' || (ctrl.loadBalancer.loadBalancerType === 'network' && ctrl.securityGroups && ctrl.securityGroups.length > 0)"
+    >
+      <ul>
+        <li ng-repeat="securityGroup in ctrl.securityGroups | orderBy:'name'">
+          <a
+            ui-sref="^.firewallDetails({name:securityGroup.name, accountId: ctrl.loadBalancer.account, region: ctrl.loadBalancer.region, vpcId: ctrl.loadBalancer.vpcId, provider: ctrl.loadBalancer.provider})"
+          >
+            {{securityGroup.name}} ({{securityGroup.id}})
+          </a>
+        </li>
+      </ul>
+    </collapsible-section>
+    <collapsible-section heading="Subnets">
+      <div ng-if="ctrl.loadBalancer.subnetDetails.length === 0">
+        <h5>No subnets</h5>
+      </div>
+      <div ng-repeat="subnet in ctrl.loadBalancer.subnetDetails" ng-class="{'bottom-border': !$last}">
+        <h5><strong>{{subnet.id}}</strong></h5>
+        <dl class="dl-horizontal dl-narrow">
+          <dt>Purpose</dt>
+          <dd>{{subnet.purpose}}</dd>
+
+          <dt>State</dt>
+          <dd>{{subnet.state}}</dd>
+
+          <dt>Cidr Block</dt>
+          <dd>{{subnet.cidrBlock}}</dd>
+        </dl>
+      </div>
+    </collapsible-section>
+    <collapsible-section ng-if="ctrl.loadBalancer.loadBalancerType === 'classic'" heading="Health Checks">
+      <dl class="horizontal-when-filters-collapsed">
+        <dt>Target</dt>
+        <dd>{{ctrl.loadBalancer.elb.healthCheck.target}}</dd>
+        <dt>Timeout</dt>
+        <dd>{{ctrl.loadBalancer.elb.healthCheck.timeout}} seconds</dd>
+        <dt>Interval</dt>
+        <dd>{{ctrl.loadBalancer.elb.healthCheck.interval}} seconds</dd>
+        <dt>Healthy Threshold</dt>
+        <dd>{{ctrl.loadBalancer.elb.healthCheck.healthyThreshold}}</dd>
+        <dt>Unhealthy Threshold</dt>
+        <dd>{{ctrl.loadBalancer.elb.healthCheck.unhealthyThreshold}}</dd>
+      </dl>
+    </collapsible-section>
+  </div>
+</div>

package/src/loadBalancer/details/targetGroupDetails.controller.ts

@@ -0,0 +1,95 @@
+import type { StateService } from '@uirouter/angularjs';
+import UIROUTER_ANGULARJS from '@uirouter/angularjs';
+import type { IController, IQService, IScope } from 'angular';
+import { module } from 'angular';
+
+import type { Application, ILoadBalancer } from '@spinnaker/core';
+import { MANAGED_RESOURCE_DETAILS_INDICATOR } from '@spinnaker/core';
+import type { IAmazonApplicationLoadBalancer, ITargetGroup } from '../../domain/IAmazonLoadBalancer';
+
+export interface ITargetGroupFromStateParams {
+  accountId: string;
+  region: string;
+  name: string;
+  loadBalancerName: string;
+  vpcId: string;
+}
+
+export class AwsTargetGroupDetailsController implements IController {
+  private targetGroupFromParams: ITargetGroupFromStateParams;
+  public application: Application;
+  public state = { loading: true };
+  public elbProtocol: string;
+  public targetGroup: ITargetGroup;
+  public loadBalancer: IAmazonApplicationLoadBalancer;
+
+  public static $inject = ['$scope', '$q', '$state', 'targetGroup', 'app'];
+  constructor(
+    private $scope: IScope,
+    private $q: IQService,
+    private $state: StateService,
+    targetGroup: ITargetGroupFromStateParams,
+    private app: Application,
+  ) {
+    this.application = app;
+    this.targetGroupFromParams = targetGroup;
+
+    this.app
+      .ready()
+      .then(() => this.extractTargetGroup())
+      .then(() => {
+        // If the user navigates away from the view before the initial extractTargetGroup call completes,
+        // do not bother subscribing to the refresh
+        if (!$scope.$$destroyed) {
+          app.getDataSource('loadBalancers').onRefresh($scope, () => this.extractTargetGroup());
+        }
+      });
+  }
+
+  public autoClose(): void {
+    if (this.$scope.$$destroyed) {
+      return;
+    }
+    this.$state.params.allowModalToStayOpen = true;
+    this.$state.go('^', null, { location: 'replace' });
+  }
+
+  public extractTargetGroup(): PromiseLike<void> {
+    const { loadBalancerName, region, accountId, name } = this.targetGroupFromParams;
+
+    const appLoadBalancer: IAmazonApplicationLoadBalancer = this.app.loadBalancers.data.find((test: ILoadBalancer) => {
+      return test.name === loadBalancerName && test.region === region && test.account === accountId;
+    });
+    if (!appLoadBalancer) {
+      this.autoClose();
+      return this.$q.when(null);
+    }
+
+    const targetGroup = appLoadBalancer.targetGroups.find((tg) => tg.name === name);
+    if (!targetGroup) {
+      this.autoClose();
+      return this.$q.when(null);
+    }
+
+    // All the other details controllers get the latest from the server again, since target groups are currently only returned
+    // as a part of a load balancer, we don't have a good way of getting the latest from the server. If this small delay does
+    // end up causing problems, we can add a /targetGroups controller to clouddriver and expose it in gate like the
+    // loadBalancer controller.
+    this.targetGroup = targetGroup;
+    this.loadBalancer = appLoadBalancer;
+    this.state.loading = false;
+
+    this.elbProtocol = 'http:';
+    if (this.loadBalancer.listeners && this.loadBalancer.listeners.some((l) => l.protocol === 'HTTPS')) {
+      this.elbProtocol = 'https:';
+    }
+
+    return this.$q.when(null);
+  }
+}
+
+export const AWS_TARGET_GROUP_DETAILS_CTRL = 'spinnaker.amazon.loadBalancer.details.targetGroupDetails.controller';
+module(AWS_TARGET_GROUP_DETAILS_CTRL, [UIROUTER_ANGULARJS, MANAGED_RESOURCE_DETAILS_INDICATOR]).controller(
+  'awsTargetGroupDetailsCtrl',
+  AwsTargetGroupDetailsController,
+);