@spinnaker/ecs 0.0.0-main-2

package/src/loadBalancer/details/loadBalancerDetails.tsx

@@ -0,0 +1,235 @@
+import { UISref, UISrefActive } from '@uirouter/react';
+import React from 'react';
+
+import type { Application } from '@spinnaker/core';
+import { AccountTag, CollapsibleSection, Spinner, timestamp } from '@spinnaker/core';
+
+import type { IEcsLoadBalancer } from '../../domain/IEcsLoadBalancer';
+import { EcsListener } from '../listener';
+
+interface IEcsLoadBalancerFromStateParams {
+  accountId: string;
+  region: string;
+  name: string;
+  vpcId: string;
+}
+
+interface IEcsLoadBalancerDetailsState {
+  loadBalancer: IEcsLoadBalancer;
+  loadBalancerNotFound?: string;
+  loading: boolean;
+  refreshListenerUnsubscribe: () => void;
+}
+
+export interface IEcsLoadBalancerDetailsProps {
+  app: Application;
+  accountId: string;
+  loadBalancer: IEcsLoadBalancerFromStateParams;
+}
+
+export class EcsLoadBalancerDetails extends React.Component<
+  IEcsLoadBalancerDetailsProps,
+  IEcsLoadBalancerDetailsState
+> {
+  constructor(props: IEcsLoadBalancerDetailsProps) {
+    super(props);
+    this.state = {
+      loading: true,
+      loadBalancer: undefined,
+      refreshListenerUnsubscribe: () => {},
+    };
+
+    props.app
+      .getDataSource('loadBalancers')
+      .ready()
+      .then(() => this.extractLoadBalancer());
+  }
+
+  public componentWillUnmount(): void {
+    this.state.refreshListenerUnsubscribe();
+  }
+
+  private extractLoadBalancer(): void {
+    const { name, region } = this.props.loadBalancer;
+    const loadBalancer: IEcsLoadBalancer = this.props.app
+      .getDataSource('loadBalancers')
+      .data.find((test: IEcsLoadBalancer) => {
+        return test.name === name && test.account === this.props.loadBalancer.accountId && test.region === region;
+      });
+
+    this.setState({
+      loading: false,
+      loadBalancer,
+    });
+    this.state.refreshListenerUnsubscribe();
+
+    if (loadBalancer) {
+      this.setState({
+        refreshListenerUnsubscribe: this.props.app
+          .getDataSource('loadBalancers')
+          .onRefresh(null, () => this.extractLoadBalancer()),
+      });
+    } else {
+      this.setState({
+        refreshListenerUnsubscribe: () => {},
+      });
+    }
+  }
+
+  public render(): React.ReactElement<EcsLoadBalancerDetails> {
+    const loadBalancerName = this.props.loadBalancer.name;
+    const { loadBalancer, loading } = this.state;
+    const { accountId } = this.props;
+
+    const CloseButton = (
+      <div className="close-button">
+        <UISref to="^">
+          <span className="glyphicon glyphicon-remove" />
+        </UISref>
+      </div>
+    );
+
+    const loadingHeader = () => (
+      <div className="header">
+        {CloseButton}
+        <div className="horizontal center middle">
+          <Spinner size="small" />
+        </div>
+      </div>
+    );
+
+    const notFoundContent = () => (
+      <div className="content">
+        <div className="content-section">
+          <div className="content-body text-center">
+            <h3>Load balancer not found.</h3>
+          </div>
+        </div>
+      </div>
+    );
+
+    const loadBalancerHeader = () => (
+      <div className="header">
+        {CloseButton}
+        <div className="header-text horizontal middle">
+          <i className="fa icon-sitemap" />
+          <h3 className="horizontal middle space-between flex-1">{loadBalancerName}</h3>
+        </div>
+      </div>
+    );
+
+    const loadBalancerContent = () => (
+      <div className="content">
+        <CollapsibleSection heading="Load Balancer Details" defaultExpanded={true}>
+          <dl className="dl-horizontal dl-narrow">
+            <dt>Created</dt>
+            <dd>{timestamp(loadBalancer.createdTime)}</dd>
+            <dt>In</dt>
+            <dd>
+              <AccountTag account={accountId} />
+              <br />
+              {loadBalancer.region}
+            </dd>
+            <dt>VPC</dt>
+            <dd>{loadBalancer.vpcId}</dd>
+            <dt>Type</dt>
+            <dd>{loadBalancer.loadBalancerType}</dd>
+            <dt>IP Type</dt>
+            <dd>{loadBalancer.ipAddressType}</dd>
+          </dl>
+          <dl className="horizontal-when-filters-collapsed">
+            <dt>Availability Zones</dt>
+            <dd>
+              <ul>
+                {loadBalancer.availabilityZones.map((az) => {
+                  return <li key={az}>{az}</li>;
+                })}
+              </ul>
+            </dd>
+          </dl>
+          <dl className="horizontal-when-filters-collapsed">
+            <dt>Target Groups</dt>
+            <dd>
+              <ul>
+                {loadBalancer.targetGroups.map((tg) => {
+                  return (
+                    <li key={tg.targetGroupName}>
+                      <UISrefActive class="active">
+                        <UISref
+                          to="^.ecsTargetGroupDetails"
+                          params={{
+                            loadBalancerName: loadBalancer.name,
+                            region: loadBalancer.region,
+                            accountId: loadBalancer.account,
+                            name: tg.targetGroupName,
+                            vpcId: tg.vpcId,
+                            provider: loadBalancer.cloudProvider,
+                          }}
+                        >
+                          <a>{tg.targetGroupName}</a>
+                        </UISref>
+                      </UISrefActive>
+                    </li>
+                  );
+                })}
+              </ul>
+            </dd>
+          </dl>
+          <dl className="horizontal-when-filters-collapsed">
+            <dt>DNS Name</dt>
+            <dd>
+              <a target="_blank" href={'http://' + loadBalancer.dnsname}>
+                {loadBalancer.dnsname}
+              </a>
+            </dd>
+          </dl>
+        </CollapsibleSection>
+        <CollapsibleSection heading="Status" defaultExpanded={false}>
+          <span>Select a target group to check the instance health status from the view of its server groups.</span>
+        </CollapsibleSection>
+        <CollapsibleSection heading="Listeners" defaultExpanded={false}>
+          {loadBalancer.listeners ? (
+            loadBalancer.listeners.map((listener, index) => {
+              return (
+                <div key={index}>
+                  <span>
+                    <EcsListener listener={listener}></EcsListener>
+                  </span>
+                </div>
+              );
+            })
+          ) : (
+            <li>No listeners provided.</li>
+          )}
+        </CollapsibleSection>
+        <CollapsibleSection heading="Firewalls" defaultExpanded={false}>
+          <ul>
+            {loadBalancer.securityGroups ? (
+              loadBalancer.securityGroups.map((sg) => {
+                return <li key={sg}>{sg}</li>;
+              })
+            ) : (
+              <li>No security groups provided.</li>
+            )}
+          </ul>
+        </CollapsibleSection>
+        <CollapsibleSection heading="Subnets" defaultExpanded={false}>
+          <ul>
+            {loadBalancer.subnets.map((subnet) => {
+              return <li key={subnet}>{subnet}</li>;
+            })}
+          </ul>
+        </CollapsibleSection>
+      </div>
+    );
+
+    return (
+      <div className="details-panel">
+        {loading && loadingHeader()}
+        {!loading && loadBalancerHeader()}
+        {!loading && !loadBalancer && notFoundContent()}
+        {!loading && loadBalancer && loadBalancerContent()}
+      </div>
+    );
+  }
+}

package/src/loadBalancer/details/targetGroupDetails.tsx

@@ -0,0 +1,251 @@
+import { UISref, UISrefActive } from '@uirouter/react';
+import React from 'react';
+
+import type { Application } from '@spinnaker/core';
+import { AccountTag, CollapsibleSection, Spinner } from '@spinnaker/core';
+
+import type { IEcsLoadBalancer, IEcsTargetGroup } from '../../domain/IEcsLoadBalancer';
+
+interface IEcsTargetGroupFromStateParams {
+  loadBalancerName: string;
+  targetGroupName: string;
+  region: string;
+  vpcId: string;
+}
+
+interface IEcsTargetGroupDetailsState {
+  loadBalancer: IEcsLoadBalancer;
+  targetGroup: IEcsTargetGroup;
+  targetGroupNotFound?: string;
+  loading: boolean;
+  refreshListenerUnsubscribe: () => void;
+}
+
+export interface IEcsTargetGroupProps {
+  app: Application;
+  accountId: string;
+  name: string;
+  targetGroup: IEcsTargetGroupFromStateParams;
+  provider: string;
+}
+
+export class EcsTargetGroupDetails extends React.Component<IEcsTargetGroupProps, IEcsTargetGroupDetailsState> {
+  constructor(props: IEcsTargetGroupProps) {
+    super(props);
+    this.state = {
+      loading: true,
+      targetGroup: undefined,
+      loadBalancer: undefined,
+      refreshListenerUnsubscribe: () => {},
+    };
+
+    props.app
+      .getDataSource('loadBalancers')
+      .ready()
+      .then(() => this.extractTargetGroup());
+  }
+
+  public componentWillUnmount(): void {
+    this.state.refreshListenerUnsubscribe();
+  }
+
+  private extractTargetGroup(): void {
+    const { loadBalancerName, region, targetGroupName } = this.props.targetGroup;
+    const loadBalancer: IEcsLoadBalancer = this.props.app
+      .getDataSource('loadBalancers')
+      .data.find((test: IEcsLoadBalancer) => {
+        return test.name === loadBalancerName && test.account === this.props.accountId && test.region === region;
+      });
+
+    this.setState({
+      loadBalancer,
+    });
+    this.state.refreshListenerUnsubscribe();
+
+    if (!loadBalancer) {
+      this.setState({
+        loading: false,
+        targetGroup: null,
+      });
+    } else {
+      const targetGroup: IEcsTargetGroup = loadBalancer.targetGroups.find(
+        (tg) => tg.targetGroupName === targetGroupName,
+      );
+      if (!targetGroup) {
+        this.setState({
+          loading: false,
+          targetGroup: null,
+        });
+      }
+
+      if (targetGroup) {
+        this.setState({
+          loading: false,
+          targetGroup,
+        });
+
+        if (targetGroup) {
+          this.setState({
+            refreshListenerUnsubscribe: this.props.app
+              .getDataSource('loadBalancers')
+              .onRefresh(null, () => this.extractTargetGroup()),
+          });
+        } else {
+          this.setState({
+            refreshListenerUnsubscribe: () => {},
+          });
+        }
+      }
+    }
+  }
+
+  public render(): React.ReactElement<EcsTargetGroupDetails> {
+    const { name, accountId } = this.props;
+    const region = this.props.targetGroup.region;
+    const { targetGroup, loadBalancer, loading } = this.state;
+
+    const CloseButton = (
+      <div className="close-button">
+        <UISref to="^">
+          <span className="glyphicon glyphicon-remove" />
+        </UISref>
+      </div>
+    );
+
+    const loadingHeader = () => (
+      <div className="header">
+        {CloseButton}
+        <div className="horizontal center middle">
+          <Spinner size="small" />
+        </div>
+      </div>
+    );
+
+    const notFoundContent = () => (
+      <div className="content">
+        <div className="content-section">
+          <div className="content-body text-center">
+            <h3>Target group not found.</h3>
+          </div>
+        </div>
+      </div>
+    );
+
+    const targetGroupHeader = () => (
+      <div className="header">
+        <div className="header-text horizontal middle">
+          <i className="fa fa-crosshairs icon" aria-hidden="true"></i>
+          <h3 className="horizontal middle space-between flex-1">{name}</h3>
+        </div>
+      </div>
+    );
+
+    const targetGroupContent = () => (
+      <div className="content">
+        <CollapsibleSection heading="Target Group Details" defaultExpanded={true}>
+          <dl className="dl-horizontal dl-narrow">
+            <dt>In</dt>
+            <dd>
+              <AccountTag account={accountId}></AccountTag>
+              <br />
+              {targetGroup.region}
+            </dd>
+            <dt>VPC</dt>
+            <dd>{targetGroup.vpcId}</dd>
+            <dt>Protocol</dt>
+            <dd>{targetGroup.protocol}</dd>
+            <dt>Port</dt>
+            <dd>{targetGroup.port}</dd>
+            <dt>Target Type</dt>
+            <dd>{targetGroup.targetType.toUpperCase()}</dd>
+          </dl>
+          <dl className="horizontal-when-filters-collapsed">
+            <dt>Load Balancers</dt>
+            <dd>
+              {/* TODO: use UISref to display/highlight LBs in this app. See core/.../LoadBalancer.tsx */}
+              <ul className="collapse-margin-on-filter-collapse">
+                {targetGroup.loadBalancerNames ? (
+                  targetGroup.loadBalancerNames.map((lb, i) => {
+                    return <li key={i}>{lb}</li>;
+                  })
+                ) : (
+                  <li>No load balncers provided.</li>
+                )}
+              </ul>
+            </dd>
+          </dl>
+          <dl className="horizontal-when-filters-collapsed">
+            <dt>Load Balancer DNS Name</dt>
+            <dd>
+              <a target="_blank" href={'http://' + loadBalancer.dnsname}>
+                {loadBalancer.dnsname}
+              </a>
+            </dd>
+          </dl>
+          <dl className="horizontal-when-filters-collapsed">
+            <dt>Server Groups</dt>
+            <dd>
+              <ul className="collapse-margin-on-filter-collapse">
+                {targetGroup.serverGroups.map((sg, i) => {
+                  return (
+                    <li key={i}>
+                      <UISrefActive class="active">
+                        <UISref
+                          to="^.serverGroup"
+                          params={{
+                            region: region,
+                            accountId: accountId,
+                            serverGroup: sg,
+                            provider: 'ecs',
+                          }}
+                        >
+                          <a>{sg}</a>
+                        </UISref>
+                      </UISrefActive>
+                    </li>
+                  );
+                })}
+              </ul>
+            </dd>
+          </dl>
+        </CollapsibleSection>
+        <CollapsibleSection heading="Health Checks" defaultExpanded={false}>
+          <dl className="horizontal-when-filters-collapsed">
+            <dt>Target</dt>
+            <dd>
+              {targetGroup.healthCheckProtocol}:{targetGroup.healthCheckPort}
+              {targetGroup.healthCheckPath}
+            </dd>
+            <dt>Timeout</dt>
+            <dd>{targetGroup.healthCheckTimeoutSeconds} seconds</dd>
+            <dt>Interval</dt>
+            <dd>{targetGroup.healthCheckIntervalSeconds} seconds</dd>
+            <dt>Healthy Threshold</dt>
+            <dd>{targetGroup.healthyThresholdCount}</dd>
+            <dt>Unhealthy Threshold</dt>
+            <dd>{targetGroup.unhealthyThresholdCount}</dd>
+            <dt>Matcher</dt>
+            <dd>HTTP Code(s): {targetGroup && targetGroup.matcher ? targetGroup.matcher.httpCode : 'None'}</dd>
+          </dl>
+        </CollapsibleSection>
+        <CollapsibleSection heading="Attributes" defaultExpanded={false}>
+          <dl>
+            <dt>Deregistration Delay Timeout</dt>
+            <dd>{targetGroup.attributes['deregistration_delay.timeout_seconds'] || 0} seconds</dd>
+            <dt>Stickiness Enabled</dt>
+            <dd>{targetGroup.attributes['stickiness.enabled'] || 'N/A'}</dd>
+          </dl>
+        </CollapsibleSection>
+      </div>
+    );
+
+    return (
+      <div className="details-panel">
+        {loading && loadingHeader()}
+        {!loading && targetGroupHeader()}
+        {!loading && !targetGroup && notFoundContent()}
+        {!loading && targetGroup && targetGroupContent()}
+      </div>
+    );
+  }
+}

package/src/loadBalancer/listener.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+
+import type { IEcsListener } from '../domain/IEcsLoadBalancer';
+
+export interface IEcsListenerProps {
+  listener: IEcsListener;
+}
+
+export class EcsListener extends React.Component<IEcsListenerProps> {
+  constructor(props: IEcsListenerProps) {
+    super(props);
+  }
+
+  private getTargetGroupNameFromArn(arn: string): string {
+    const parts = arn.split('/');
+    if (parts.length < 0) {
+      return arn;
+    }
+    return parts[1];
+  }
+
+  public render(): React.ReactElement<EcsListener> {
+    const { port, protocol, defaultActions } = this.props.listener;
+
+    // TODO: retrieve and display 'rules' in addition to default actions
+    return (
+      <div>
+        <h4>
+          {protocol}:{port}
+        </h4>
+        <div style={{ paddingLeft: 10 }}>
+          <i>default actions</i>
+          <ul>
+            {defaultActions.map((action, i) => {
+              if (action.type == 'forward') {
+                return (
+                  <li key={i}>
+                    &rarr;
+                    <i className="fa fa-fw fa-crosshairs icon" aria-hidden="true"></i>
+                    <span>
+                      {action.targetGroupArn ||
+                        action.forwardConfig.targetGroups.map((tg) => {
+                          return this.getTargetGroupNameFromArn(tg.targetGroupArn);
+                        })}
+                    </span>
+                  </li>
+                );
+              } else {
+                return (
+                  <li key={i}>
+                    {action.type}:{' '}
+                    {action.redirectConfig.statusCode ||
+                      action.fixedResponseConfig.statusCode ||
+                      action.authenticateOidcConfig.clientId ||
+                      action.authenticateCognitoActionConfig.userPoolDomain}
+                  </li>
+                );
+              }
+            })}
+          </ul>
+        </div>
+      </div>
+    );
+  }
+}

package/src/loadBalancer/loadBalancer.transformer.ts

@@ -0,0 +1,21 @@
+import type { IQService } from 'angular';
+
+import type { IEcsLoadBalancer, IEcsLoadBalancerSourceData, IEcsTargetGroup } from '../domain/IEcsLoadBalancer';
+
+export class EcsLoadBalancerTransformer {
+  public static $inject = ['$q'];
+  constructor(private $q: IQService) {}
+
+  public normalizeLoadBalancer(loadBalancer: IEcsLoadBalancerSourceData): PromiseLike<IEcsLoadBalancer> {
+    loadBalancer.targetGroups.forEach((tg: IEcsTargetGroup) => {
+      tg.region = loadBalancer.region;
+      tg.account = loadBalancer.account;
+      tg.cloudProvider = loadBalancer.cloudProvider;
+      if (loadBalancer.targetGroupServices) {
+        const tgServiceMap = loadBalancer.targetGroupServices;
+        tg.serverGroups = tgServiceMap[tg.targetGroupArn];
+      }
+    });
+    return this.$q.resolve(loadBalancer);
+  }
+}

package/src/loadBalancer/targetGroup.states.ts

@@ -0,0 +1,59 @@
+import type { StateParams } from '@uirouter/angularjs';
+import { module } from 'angular';
+
+import type { ApplicationStateProvider, INestedState } from '@spinnaker/core';
+import { APPLICATION_STATE_PROVIDER } from '@spinnaker/core';
+
+import { EcsTargetGroupDetails } from '../loadBalancer/details/targetGroupDetails';
+//import { IEcsTargetGroup } from '../domain/IEcsLoadBalancer';
+
+export const ECS_TARGET_GROUP_STATES = 'spinnaker.ecs.loadBalancer.targetGroup.states';
+module(ECS_TARGET_GROUP_STATES, [APPLICATION_STATE_PROVIDER]).config([
+  'applicationStateProvider',
+  (applicationStateProvider: ApplicationStateProvider) => {
+    const ecsTargetGroupDetails: INestedState = {
+      name: 'ecsTargetGroupDetails',
+      url: '/ecsTargetGroupDetails/:provider/:accountId/:region/:vpcId/:loadBalancerName/:name',
+      params: {
+        vpcId: {
+          value: null,
+          squash: true,
+        },
+      },
+      views: {
+        'detail@../insight': {
+          component: EcsTargetGroupDetails,
+          $type: 'react',
+        },
+      },
+      resolve: {
+        accountId: ['$stateParams', ($stateParams: StateParams) => $stateParams.accountId],
+        name: ['$stateParams', ($stateParams: StateParams) => $stateParams.name],
+        provider: ['$stateParams', ($stateParams: StateParams) => $stateParams.provider],
+        // resolve flat params into an IEcsTargetGroup
+        targetGroup: [
+          '$stateParams',
+          ($stateParams: StateParams) => {
+            return {
+              loadBalancerName: $stateParams.loadBalancerName,
+              targetGroupName: $stateParams.name,
+              accountId: $stateParams.accountId,
+              region: $stateParams.region,
+              vpcId: $stateParams.vpcId,
+            };
+          },
+        ],
+      },
+      data: {
+        pageTitleDetails: {
+          title: 'Target Group Details',
+          nameParam: 'name',
+          accountParam: 'accountId',
+          regionParam: 'region',
+        },
+      },
+    };
+
+    applicationStateProvider.addInsightDetailState(ecsTargetGroupDetails);
+  },
+]);

package/src/logo/ecs.icon.svg

@@ -0,0 +1,27 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
+  <title>Compute</title>
+  <g>
+    <polygon points="19.64 22.51 16 24.32 16 75.68 19.64 77.49 33.98 51.07 19.64 22.51" fill="#9d5025"/>
+    <polygon points="30.72 31.78 36.08 24.19 60.1 34.87 54.5 35.76 30.72 31.78" fill="#9d5025"/>
+    <polygon points="26.56 68.77 32.46 76.88 60.1 64.95 54.76 64.12 26.56 68.77" fill="#9d5025"/>
+    <polygon points="28.12 75.5 19.64 77.49 19.64 22.51 28.12 24.44 28.12 75.5" fill="#f58536"/>
+    <polygon points="23.66 20.5 28.12 18.27 36.52 53.56 28.12 81.73 23.66 79.5 23.66 20.5" fill="#9d5025"/>
+    <polygon points="54.46 64.08 60.1 64.95 65.26 50.58 60.1 34.87 54.46 35.76 54.46 64.08" fill="#9d5025"/>
+    <polygon points="36.8 79.28 28.12 81.73 28.12 18.27 36.8 20.73 36.8 79.28" fill="#f58536"/>
+    <polygon points="66.01 63.84 28.12 70.88 28.12 81.73 66.01 71.03 66.01 63.84" fill="#f58536"/>
+    <polygon points="66.08 36 28.12 28.79 28.12 18.27 66.08 29.04 66.08 36" fill="#f58536"/>
+    <polygon points="60.1 27.34 66.19 29.02 66.19 71.03 60.1 72.7 60.1 27.34" fill="#f58536"/>
+    <polygon points="84 44.45 67.7 45.22 61.94 44.83 78.42 31.55 84 44.45" fill="#6b3a19"/>
+    <polygon points="61.94 44.83 78.42 43.9 78.42 31.55 61.94 34.22 61.94 44.83" fill="#9d5025"/>
+    <polygon points="46.43 43.79 63.13 26.96 71.62 43.22 54.31 44.32 46.43 43.79" fill="#6b3a19"/>
+    <polygon points="46.43 43.79 63.13 42.37 63.13 26.96 46.43 30.87 46.43 43.79" fill="#9d5025"/>
+    <polygon points="61.94 55.39 84 55.77 78.42 68.67 61.94 66 61.94 55.39" fill="#9d5025"/>
+    <polygon points="46.43 56.43 71.62 57.01 63.13 73.26 46.43 69.36 46.43 56.43" fill="#9d5025"/>
+    <polygon points="46.43 56.43 63.13 57.86 71.62 57.01 54.31 55.9 46.43 56.43" fill="#fbbf93"/>
+    <polygon points="84 55.77 67.7 55.01 61.94 55.39 78.42 56.33 84 55.77" fill="#fbbf93"/>
+    <polygon points="78.42 43.9 84 44.45 84 33.22 78.42 31.55 78.42 43.9" fill="#f58536"/>
+    <polygon points="71.62 43.22 63.13 42.37 63.13 26.96 71.62 29.51 71.62 43.22" fill="#f58536"/>
+    <polygon points="78.42 56.33 84 55.77 84 67 78.42 68.67 78.42 56.33" fill="#f58536"/>
+    <polygon points="71.62 57.01 63.13 57.86 63.13 73.26 71.62 70.72 71.62 57.01" fill="#f58536"/>
+  </g>
+</svg>

package/src/logo/ecs.logo.less

@@ -0,0 +1,5 @@
+.cloud-provider-logo {
+  .icon-ecs {
+    mask-image: url('ecs.icon.svg');
+  }
+}