@spinnaker/ecs 0.0.0-main-2

package/src/instance/details/instance.details.controller.js

@@ -0,0 +1,356 @@
+'use strict';
+
+import UIROUTER_ANGULARJS from '@uirouter/angularjs';
+import { module } from 'angular';
+import ANGULAR_UI_BOOTSTRAP from 'angular-ui-bootstrap';
+import _ from 'lodash';
+
+import { applyHealthCheckInfoToTargetGroups, getAllTargetGroups } from '@spinnaker/amazon';
+import {
+  CloudProviderRegistry,
+  ConfirmationModalService,
+  InstanceReader,
+  InstanceWriter,
+  RecentHistoryService,
+  SETTINGS,
+} from '@spinnaker/core';
+
+export const ECS_INSTANCE_DETAILS_INSTANCE_DETAILS_CONTROLLER = 'spinnaker.ecs.instance.details.controller';
+export const name = ECS_INSTANCE_DETAILS_INSTANCE_DETAILS_CONTROLLER; // for backwards compatibility
+module(ECS_INSTANCE_DETAILS_INSTANCE_DETAILS_CONTROLLER, [UIROUTER_ANGULARJS, ANGULAR_UI_BOOTSTRAP]).controller(
+  'ecsInstanceDetailsCtrl',
+  [
+    '$scope',
+    '$state',
+    '$uibModal',
+    'instance',
+    'app',
+    'moniker',
+    'environment',
+    '$q',
+    'overrides',
+    function ($scope, $state, $uibModal, instance, app, moniker, environment, $q, overrides) {
+      // needed for standalone instances
+      $scope.detailsTemplateUrl = CloudProviderRegistry.getValue('ecs', 'instance.detailsTemplateUrl');
+
+      $scope.state = {
+        loading: true,
+        standalone: app.isStandalone,
+        instancePort: _.get(app, 'attributes.instancePort') || SETTINGS.defaultInstancePort || 80,
+      };
+
+      $scope.application = app;
+      $scope.moniker = moniker;
+      $scope.environment = environment;
+
+      const cloudProvider = 'ecs';
+      const defaultRequestParams = { cloudProvider: cloudProvider };
+
+      function extractHealthMetrics(instance, latest) {
+        // do not backfill on standalone instances
+        if (app.isStandalone) {
+          instance.health = latest.health;
+        }
+
+        instance.health = instance.health || [];
+        const displayableMetrics = instance.health.filter(function (metric) {
+          return metric.type !== 'Ecs' || metric.state !== 'Unknown';
+        });
+
+        // augment with target group healthcheck data
+        const targetGroups = getAllTargetGroups(app.loadBalancers.data);
+        applyHealthCheckInfoToTargetGroups(displayableMetrics, targetGroups, instance.account);
+
+        // backfill details where applicable
+        if (latest.health) {
+          displayableMetrics.forEach(function (metric) {
+            const detailsMatch = latest.health.filter(function (latestHealth) {
+              return latestHealth.type === metric.type;
+            });
+            if (detailsMatch.length) {
+              _.defaults(metric, detailsMatch[0]);
+            }
+          });
+        }
+        $scope.healthMetrics = displayableMetrics;
+      }
+
+      function retrieveInstance() {
+        const extraData = {};
+        let instanceSummary, loadBalancers, targetGroup, account, region, vpcId;
+        if (!app.serverGroups) {
+          // standalone instance
+          instanceSummary = {};
+          loadBalancers = [];
+          targetGroup = [];
+          account = instance.account;
+          region = instance.region;
+        } else {
+          app.serverGroups.data.some(function (serverGroup) {
+            return serverGroup.instances.some(function (possibleInstance) {
+              if (possibleInstance.id === instance.instanceId) {
+                instanceSummary = possibleInstance;
+                loadBalancers = serverGroup.loadBalancers;
+                targetGroup = serverGroup.targetGroup;
+                account = serverGroup.account;
+                region = serverGroup.region;
+                vpcId = serverGroup.vpcId;
+                extraData.serverGroup = serverGroup.name;
+                extraData.vpcId = serverGroup.vpcId;
+                return true;
+              }
+            });
+          });
+          if (!instanceSummary) {
+            // perhaps it is in a server group that is part of another app
+            app.loadBalancers.data.some(function (loadBalancer) {
+              return (
+                loadBalancer.instances.some(function (possibleInstance) {
+                  if (possibleInstance.id === instance.instanceId) {
+                    instanceSummary = possibleInstance;
+                    loadBalancers = [loadBalancer.name];
+                    account = loadBalancer.account;
+                    region = loadBalancer.region;
+                    vpcId = loadBalancer.vpcId;
+                    return true;
+                  }
+                }) ||
+                loadBalancer.targetGroup.some(function (targetGroup) {
+                  return targetGroup.instances.some(function (possibleInstance) {
+                    if (possibleInstance.id === instance.instanceId) {
+                      instanceSummary = possibleInstance;
+                      targetGroup = targetGroup.name;
+                      account = loadBalancer.account;
+                      region = loadBalancer.region;
+                      vpcId = loadBalancer.vpcId;
+                      return true;
+                    }
+                  });
+                })
+              );
+            });
+            if (!instanceSummary) {
+              // perhaps it is in a disabled server group via a load balancer
+              app.loadBalancers.data.some(function (loadBalancer) {
+                return (
+                  loadBalancer.serverGroups.some(function (serverGroup) {
+                    if (!serverGroup.isDisabled) {
+                      return false;
+                    }
+                    return serverGroup.instances.some(function (possibleInstance) {
+                      if (possibleInstance.id === instance.instanceId) {
+                        instanceSummary = possibleInstance;
+                        loadBalancers = [loadBalancer.name];
+                        account = loadBalancer.account;
+                        region = loadBalancer.region;
+                        vpcId = loadBalancer.vpcId;
+                        return true;
+                      }
+                    });
+                  }) ||
+                  loadBalancer.targetGroup.some(function (targetGroup) {
+                    targetGroup.serverGroups.some(function (serverGroup) {
+                      if (!serverGroup.isDisabled) {
+                        return false;
+                      }
+                      return serverGroup.instances.some(function (possibleInstance) {
+                        if (possibleInstance.id === instance.instanceId) {
+                          instanceSummary = possibleInstance;
+                          loadBalancers = [loadBalancer.name];
+                          account = loadBalancer.account;
+                          region = loadBalancer.region;
+                          vpcId = loadBalancer.vpcId;
+                          return true;
+                        }
+                      });
+                    });
+                  })
+                );
+              });
+            }
+          }
+        }
+
+        if (instanceSummary && account && region) {
+          instanceSummary.account = account;
+          extraData.account = account;
+          extraData.region = region;
+          RecentHistoryService.addExtraDataToLatest('instances', extraData);
+          return InstanceReader.getInstanceDetails(account, region, instance.instanceId).then((details) => {
+            if ($scope.$$destroyed) {
+              return;
+            }
+            $scope.state.loading = false;
+            extractHealthMetrics(instanceSummary, details);
+            $scope.instance = _.defaults(details, instanceSummary);
+            $scope.instance.account = account;
+            $scope.instance.region = region;
+            $scope.instance.vpcId = vpcId;
+            $scope.instance.loadBalancers = loadBalancers;
+            $scope.instance.targetGroup = targetGroup;
+            if ($scope.instance.networkInterfaces) {
+              const permanentNetworkInterfaces = $scope.instance.networkInterfaces.filter(
+                (f) => f.attachment.deleteOnTermination === false,
+              );
+              if (permanentNetworkInterfaces.length) {
+                $scope.instance.permanentIps = permanentNetworkInterfaces.map((f) => f.privateIpAddress);
+              }
+            }
+            $scope.baseIpAddress = details.publicDnsName || details.privateIpAddress;
+            if (overrides.instanceDetailsLoaded) {
+              overrides.instanceDetailsLoaded();
+            }
+          }, autoClose);
+        }
+
+        if (!instanceSummary) {
+          $scope.instanceIdNotFound = instance.instanceId;
+          $scope.state.loading = false;
+        }
+
+        return $q.when(null);
+      }
+
+      function autoClose() {
+        if ($scope.$$destroyed) {
+          return;
+        }
+        if (app.isStandalone) {
+          $scope.state.loading = false;
+          $scope.instanceIdNotFound = instance.instanceId;
+          $scope.state.notFoundStandalone = true;
+          RecentHistoryService.removeLastItem('instances');
+        } else {
+          $state.go('^', { allowModalToStayOpen: true }, { location: 'replace' });
+        }
+      }
+
+      this.canRegisterWithDiscovery = function () {
+        const instance = $scope.instance;
+        const healthMetrics = instance.health || [];
+        const discoveryHealth = healthMetrics.filter(function (health) {
+          return health.type === 'Discovery';
+        });
+        return discoveryHealth.length ? discoveryHealth[0].state === 'OutOfService' : false;
+      };
+
+      this.terminateInstance = function terminateInstance() {
+        const instance = $scope.instance;
+
+        const taskMonitor = {
+          application: app,
+          title: 'Terminating ' + instance.instanceId,
+          onTaskComplete: function () {
+            if ($state.includes('**.instanceDetails', { instanceId: instance.instanceId })) {
+              $state.go('^');
+            }
+          },
+        };
+
+        const submitMethod = function () {
+          return InstanceWriter.terminateInstance(instance, app, defaultRequestParams);
+        };
+
+        ConfirmationModalService.confirm({
+          header: 'Really terminate ' + instance.instanceId + '?',
+          buttonText: 'Terminate ' + instance.instanceId,
+          account: instance.account,
+          taskMonitorConfig: taskMonitor,
+          submitMethod: submitMethod,
+        });
+      };
+
+      this.terminateInstanceAndShrinkServerGroup = function terminateInstanceAndShrinkServerGroup() {
+        const instance = $scope.instance;
+
+        const taskMonitor = {
+          application: app,
+          title: 'Terminating ' + instance.instanceId + ' and shrinking server group',
+          onTaskComplete: function () {
+            if ($state.includes('**.instanceDetails', { instanceId: instance.instanceId })) {
+              $state.go('^');
+            }
+          },
+        };
+
+        const submitMethod = function () {
+          return InstanceWriter.terminateInstanceAndShrinkServerGroup(instance, app, defaultRequestParams);
+        };
+
+        ConfirmationModalService.confirm({
+          header: 'Really terminate ' + instance.instanceId + ' and shrink ' + instance.serverGroup + '?',
+          buttonText: 'Terminate ' + instance.instanceId + ' and shrink ' + instance.serverGroup,
+          account: instance.account,
+          taskMonitorConfig: taskMonitor,
+          submitMethod: submitMethod,
+        });
+      };
+
+      this.enableInstanceInDiscovery = function enableInstanceInDiscovery() {
+        const instance = $scope.instance;
+
+        const taskMonitor = {
+          application: app,
+          title: 'Enabling ' + instance.instanceId + ' in discovery',
+        };
+
+        const submitMethod = function () {
+          return InstanceWriter.enableInstanceInDiscovery(instance, app, defaultRequestParams);
+        };
+
+        ConfirmationModalService.confirm({
+          header: 'Really enable ' + instance.instanceId + ' in discovery?',
+          buttonText: 'Enable ' + instance.instanceId,
+          account: instance.account,
+          taskMonitorConfig: taskMonitor,
+          submitMethod: submitMethod,
+        });
+      };
+
+      this.disableInstanceInDiscovery = function disableInstanceInDiscovery() {
+        const instance = $scope.instance;
+
+        const taskMonitor = {
+          application: app,
+          title: 'Disabling ' + instance.instanceId + ' in discovery',
+        };
+
+        const submitMethod = function () {
+          return InstanceWriter.disableInstanceInDiscovery(instance, app, defaultRequestParams);
+        };
+
+        ConfirmationModalService.confirm({
+          header: 'Really disable ' + instance.instanceId + ' in discovery?',
+          buttonText: 'Disable ' + instance.instanceId,
+          account: instance.account,
+          taskMonitorConfig: taskMonitor,
+          submitMethod: submitMethod,
+        });
+      };
+
+      this.hasHealthState = function hasHealthState(healthProviderType, state) {
+        const instance = $scope.instance;
+        const healthMetrics = instance.health || [];
+        return healthMetrics.some(function (health) {
+          return health.type === healthProviderType && health.state === state;
+        });
+      };
+
+      const initialize = app.isStandalone
+        ? retrieveInstance()
+        : $q.all([app.serverGroups.ready(), app.loadBalancers.ready()]).then(retrieveInstance);
+
+      initialize.then(() => {
+        // Two things to look out for here:
+        //  1. If the retrieveInstance call completes *after* the user has navigated away from the view, there
+        //     is no point in subscribing to the refresh
+        //  2. If this is a standalone instance, there is no application that will refresh
+        if (!$scope.$$destroyed && !app.isStandalone) {
+          app.serverGroups.onRefresh($scope, retrieveInstance);
+        }
+      });
+
+      $scope.account = instance.account;
+    },
+  ],
+);

package/src/instance/details/instanceDetails.html

@@ -0,0 +1,204 @@
+<div class="text-center" ng-if="state.notFoundStandalone">
+  <h3>Could not find instance {{instanceIdNotFound}}.</h3>
+  <a ui-sref="home.infrastructure">Back to search results</a>
+</div>
+<div class="details-panel" ng-if="!state.notFoundStandalone">
+  <div class="header">
+    <instance-details-header
+      health-state="instance.healthState"
+      instance-id="instance ? instance.name : instanceIdNotFound"
+      loading="state.loading"
+      standalone="state.standalone"
+    ></instance-details-header>
+    <div ng-if="!state.loading">
+      <div class="actions" ng-class="{ insights: instance.insightActions.length > 0 }">
+        <!-- TODO - find out what I should do with ng-if="instance.placement" -->
+        <div class="dropdown" uib-dropdown dropdown-append-to-body>
+          <button
+            type="button"
+            class="btn btn-sm btn-primary dropdown-toggle"
+            ng-disabled="disabled"
+            uib-dropdown-toggle
+          >
+            Instance Actions <span class="caret"></span>
+          </button>
+          <ul class="dropdown-menu" uib-dropdown-menu role="menu">
+            <li>
+              <a href ng-click="ctrl.enableInstanceInDiscovery()" ng-if="ctrl.canRegisterWithDiscovery()"
+                >Enable in Discovery</a
+              >
+            </li>
+            <li>
+              <a
+                href
+                ng-click="ctrl.disableInstanceInDiscovery()"
+                ng-if="ctrl.hasHealthState('Discovery', 'Up') || ctrl.hasHealthState('Discovery', 'Down')"
+                >Disable in Discovery</a
+              >
+            </li>
+            <li>
+              <a href ng-click="ctrl.registerInstanceWithLoadBalancer()" ng-if="ctrl.canRegisterWithLoadBalancer()"
+                >Register with Load Balancer</a
+              >
+            </li>
+            <li>
+              <a href ng-click="ctrl.deregisterInstanceFromLoadBalancer()" ng-if="ctrl.canDeregisterFromLoadBalancer()"
+                >Deregister from Load Balancer</a
+              >
+            </li>
+            <li>
+              <a href ng-click="ctrl.registerInstanceWithTargetGroup()" ng-if="ctrl.canRegisterWithTargetGroup()"
+                >Register with Target Group</a
+              >
+            </li>
+            <li>
+              <a href ng-click="ctrl.deregisterInstanceFromTargetGroup()" ng-if="ctrl.canDeregisterFromTargetGroup()"
+                >Deregister from Target Group</a
+              >
+            </li>
+            <!--<li role="presentation" class="divider" ng-if="instance.health.length > 0"></li>-->
+          </ul>
+        </div>
+        <div class="dropdown" ng-if="instance.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 instance.insightActions">
+              <a target="_blank" href="{{action.url}}">{{action.label}}</a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="content" data-test-id="instanceDetails.content" ng-if="!state.loading && instance">
+    <collapsible-section heading="Instance Information" expanded="true">
+      <dl class="dl-horizontal dl-narrow">
+        <dt>Launched</dt>
+        <dd ng-if="instance.launchTime">{{instance.launchTime | timestamp}}</dd>
+        <dd ng-if="!instance.launchTime">(Unknown)</dd>
+        <dt ng-if="instance.serverGroup">Server Group</dt>
+        <dd ng-if="instance.serverGroup">
+          <a
+            ui-sref="^.serverGroup({region: instance.region,
+              accountId: instance.account,
+              serverGroup: instance.serverGroup,
+              provider: instance.provider})"
+            >{{instance.serverGroup}}</a
+          >
+        </dd>
+        <dt ng-if="instance.imageId">Image ID</dt>
+        <dd ng-if="instance.imageId">{{instance.imageId}}</dd>
+      </dl>
+    </collapsible-section>
+    <collapsible-section heading="Status" expanded="true">
+      <p ng-if="instance.healthState !== 'Starting' && !healthMetrics.length">
+        No health metrics found for this instance
+      </p>
+      <p ng-if="instance.healthState === 'Starting' && !healthMetrics.length">
+        <span class="glyphicon glyphicon-Starting-triangle"></span> <strong>Starting</strong>
+      </p>
+
+      <dl class="horizontal-when-filters-collapsed">
+        <dt ng-repeat-start="metric in healthMetrics | orderBy: 'type'">{{metric.type | robotToHuman}}</dt>
+        <dd ng-repeat-end>
+          <div ng-if="metric.type !== 'LoadBalancer' && metric.type !== 'TargetGroup'">
+            <span
+              uib-tooltip="{{metric.state.toLowerCase() === 'down' ? metric.description : ''}}"
+              tooltip-placement="left"
+            >
+              <span class="glyphicon glyphicon-{{metric.state}}-triangle"></span>
+              {{metric.state | robotToHuman}}
+            </span>
+            <span class="pad-left small">
+              <a ng-if="metric.healthCheckUrl" target="_blank" href="{{metric.healthCheckUrl}}">Health Check</a>
+              <span ng-if="metric.healthCheckUrl && metric.statusPageUrl"> | </span>
+              <a ng-if="metric.statusPageUrl" target="_blank" href="{{metric.statusPageUrl}}">Status</a>
+            </span>
+          </div>
+          <div
+            ng-if="metric.type === 'LoadBalancer' && metric.loadBalancers.length"
+            ng-repeat="loadBalancer in metric.loadBalancers"
+          >
+            <instance-load-balancer-health load-balancer="loadBalancer"></instance-load-balancer-health>
+          </div>
+          <div
+            ng-if="metric.type === 'TargetGroup' && metric.targetGroups.length"
+            ng-repeat="targetGroup in metric.targetGroups"
+          >
+            <instance-load-balancer-health
+              load-balancer="targetGroup"
+              ip-address="baseIpAddress"
+            ></instance-load-balancer-health>
+          </div>
+        </dd>
+      </dl>
+    </collapsible-section>
+    <collapsible-section heading="Networking">
+      <dl class="horizontal-when-filters-collapsed">
+        <dt ng-if="instance.vpcId">VPC</dt>
+        <dd ng-if="instance.vpcId"><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>
+
+        <dt ng-if="instance.privateAddress || instance.networkInterface">IP</dt>
+        <dd ng-if="instance.networkInterface.privateIpv4Address">
+          Private address (ENI):
+          <a href="http://{{instance.networkInterface.privateIpv4Address}}" target="_blank"
+            >{{instance.networkInterface.privateIpv4Address}}</a
+          >
+          <copy-to-clipboard
+            class="copy-to-clipboard copy-to-clipboard-sm"
+            text="instance.networkInterface.privateIpv4Address"
+            tool-tip="'Copy to clipboard'"
+          >
+          </copy-to-clipboard>
+        </dd>
+        <dd ng-if="instance.networkInterface.ipv6Address">
+          Private address (ENI):
+          <a href="http://{{instance.networkInterface.ipv6Address}}" target="_blank"
+            >{{instance.networkInterface.ipv6Address}}</a
+          >
+          <copy-to-clipboard
+            class="copy-to-clipboard copy-to-clipboard-sm"
+            text="instance.networkInterface.ipv6Address"
+            tool-tip="'Copy to clipboard'"
+          >
+          </copy-to-clipboard>
+        </dd>
+        <dd ng-if="instance.privateAddress">
+          Private address (Bridge):
+          <a href="http://{{instance.privateAddress}}" target="_blank">{{instance.privateAddress}}</a>
+          <copy-to-clipboard
+            class="copy-to-clipboard copy-to-clipboard-sm"
+            text="instance.privateAddress"
+            tool-tip="'Copy to clipboard'"
+          >
+          </copy-to-clipboard>
+        </dd>
+      </dl>
+    </collapsible-section>
+    <collapsible-section heading="Console Output" ng-if="baseIpAddress">
+      <ul>
+        <li>
+          <console-output-link instance="instance"></console-output-link>
+        </li>
+      </ul>
+    </collapsible-section>
+    <instance-links
+      address="baseIpAddress"
+      application="application"
+      instance="instance"
+      moniker="moniker"
+      environment="environment"
+    ></instance-links>
+  </div>
+  <div class="content" ng-if="!state.loading && !instance">
+    <div class="content-section">
+      <div class="content-body text-center">
+        <h3>Instance not found.</h3>
+      </div>
+    </div>
+  </div>
+</div>

package/src/loadBalancer/EcsLoadBalancerClusterContainer.tsx

@@ -0,0 +1,48 @@
+import { isEqual } from 'lodash';
+import React from 'react';
+
+import type { ILoadBalancerClusterContainerProps } from '@spinnaker/core';
+
+import { EcsTargetGroup } from './TargetGroup';
+import type { IEcsLoadBalancer } from '../domain/IEcsLoadBalancer';
+
+export class EcsLoadBalancerClusterContainer extends React.Component<ILoadBalancerClusterContainerProps> {
+  public shouldComponentUpdate(nextProps: ILoadBalancerClusterContainerProps) {
+    const serverGroupsDiffer = () =>
+      !isEqual(
+        (nextProps.serverGroups || []).map((g) => g.name),
+        (this.props.serverGroups || []).map((g) => g.name),
+      );
+    const targetGroupsDiffer = () =>
+      !isEqual(
+        ((nextProps.loadBalancer as IEcsLoadBalancer).targetGroups || []).map((t) => t.targetGroupName),
+        ((this.props.loadBalancer as IEcsLoadBalancer).targetGroups || []).map((t) => t.targetGroupName),
+      );
+    return (
+      nextProps.showInstances !== this.props.showInstances ||
+      nextProps.showServerGroups !== this.props.showServerGroups ||
+      nextProps.loadBalancer !== this.props.loadBalancer ||
+      serverGroupsDiffer() ||
+      targetGroupsDiffer()
+    );
+  }
+
+  public render(): React.ReactElement<EcsLoadBalancerClusterContainer> {
+    const { loadBalancer, showInstances, showServerGroups } = this.props;
+    const lb = loadBalancer as IEcsLoadBalancer;
+
+    const TargetGroups = lb.targetGroups.map((targetGroup) => {
+      return (
+        <EcsTargetGroup
+          key={targetGroup.targetGroupName}
+          loadBalancer={loadBalancer as IEcsLoadBalancer}
+          targetGroup={targetGroup}
+          showInstances={showInstances}
+          showServerGroups={showServerGroups}
+        />
+      );
+    });
+
+    return <div className="cluster-container">{TargetGroups}</div>;
+  }
+}

package/src/loadBalancer/TargetGroup.tsx

@@ -0,0 +1,74 @@
+import { UISref, UISrefActive } from '@uirouter/react';
+import React from 'react';
+
+import type { IInstanceCounts } from '@spinnaker/core';
+import { LoadBalancerServerGroup } from '@spinnaker/core';
+
+import type { IEcsLoadBalancer, IEcsTargetGroup } from '../domain/IEcsLoadBalancer';
+
+export interface IEcsTargetGroupProps {
+  loadBalancer: IEcsLoadBalancer;
+  targetGroup: IEcsTargetGroup;
+  showServerGroups: boolean;
+  showInstances: boolean;
+}
+
+export class EcsTargetGroup extends React.Component<IEcsTargetGroupProps> {
+  public render(): React.ReactElement<EcsTargetGroup> {
+    const { targetGroup, loadBalancer, showServerGroups } = this.props;
+
+    const params = {
+      loadBalancerName: loadBalancer.name,
+      region: targetGroup.region,
+      accountId: targetGroup.account,
+      name: targetGroup.targetGroupName,
+      vpcId: targetGroup.vpcId,
+      provider: targetGroup.cloudProvider,
+    };
+
+    // info not yet available; HealthCounts component requires it,
+    // but will not render if no values are defined.
+    const emptyInstanceCounts: IInstanceCounts = {
+      up: undefined,
+      down: undefined,
+      starting: undefined,
+      succeeded: undefined,
+      failed: undefined,
+      unknown: undefined,
+      outOfService: undefined,
+    };
+
+    return (
+      <div className="target-group-container container-fluid no-padding">
+        <UISrefActive class="active">
+          <UISref to=".ecsTargetGroupDetails" params={params}>
+            <div className={`clickable clickable-row row no-margin-y target-group-header`}>
+              <div className="col-md-8 target-group-title">{targetGroup.targetGroupName}</div>
+            </div>
+          </UISref>
+        </UISrefActive>
+        {showServerGroups &&
+          targetGroup.serverGroups.map((sgName) => {
+            return (
+              <LoadBalancerServerGroup
+                key={sgName}
+                account={targetGroup.account}
+                region={targetGroup.region}
+                serverGroup={{
+                  account: targetGroup.account,
+                  cloudProvider: targetGroup.cloudProvider,
+                  cluster: sgName,
+                  instanceCounts: emptyInstanceCounts,
+                  instances: targetGroup.instances,
+                  name: sgName,
+                  type: targetGroup.type,
+                  region: targetGroup.region,
+                }}
+                showInstances={false} // TODO: use prop when instanceCounts available
+              />
+            );
+          })}
+      </div>
+    );
+  }
+}