@spinnaker/amazon 2026.2.2 → 2026.3.0

package/src/instance/details/InstanceSecurityGroups.tsx

@@ -1,5 +1,4 @@
 import { UISref } from '@uirouter/react';
-import { UIRouterContextComponent } from '@uirouter/react-hybrid';
 import { orderBy } from 'lodash';
 import React from 'react';
 
@@ -18,28 +17,26 @@ export const InstanceSecurityGroups = ({ instance }: IInstanceSecurityGroupsProp
 
   return (
     <CollapsibleSection heading={securityGroupLabel} defaultExpanded={true}>
-      <UIRouterContextComponent>
-        <ul>
-          {(sortedSecurityGroups || []).map((sg) => (
-            <li key={sg.groupId}>
-              <UISref
-                to="^.firewallDetails"
-                params={{
-                  name: sg.groupName,
-                  accountId: account,
-                  region,
-                  vpcId,
-                  provider,
-                }}
-              >
-                <a>
-                  {sg.groupName} ({sg.groupId})
-                </a>
-              </UISref>
-            </li>
-          ))}
-        </ul>
-      </UIRouterContextComponent>
+      <ul>
+        {(sortedSecurityGroups || []).map((sg) => (
+          <li key={sg.groupId}>
+            <UISref
+              to="^.firewallDetails"
+              params={{
+                name: sg.groupName,
+                accountId: account,
+                region,
+                vpcId,
+                provider,
+              }}
+            >
+              <a>
+                {sg.groupName} ({sg.groupId})
+              </a>
+            </UISref>
+          </li>
+        ))}
+      </ul>
     </CollapsibleSection>
   );
 };

package/src/instance/details/InstanceTags.tsx

@@ -11,11 +11,13 @@ export interface IInstanceTagsProps {
 }
 
 export const InstanceTags = ({ tags }: IInstanceTagsProps) => {
-  const sortedTags = orderBy(tags, ['key'], ['asc']);
+  const instanceTags = tags || [];
+  const sortedTags = orderBy(instanceTags, ['key'], ['asc']);
   return (
     <CollapsibleSection heading="Tags" defaultExpanded={true}>
-      {!tags.length && <div>No tags associated with this server</div>}
-      {tags.length && sortedTags.map((tag) => <LabeledValue key={tag.key} label={tag.key} value={tag.value} />)}
+      {!instanceTags.length && <div>No tags associated with this server</div>}
+      {Boolean(instanceTags.length) &&
+        sortedTags.map((tag) => <LabeledValue key={tag.key} label={tag.key} value={tag.value} />)}
     </CollapsibleSection>
   );
 };

package/src/instance/index.ts

@@ -1,4 +1,5 @@
 export * from './details/utils';
+export * from './details/AmazonInstanceDetails';
 export * from './details/InstanceDns';
 export * from './details/InstanceInformation';
 export * from './details/InstanceStatus';

package/src/keyPairs/KeyPairsReader.ts

@@ -2,7 +2,7 @@ import { REST } from '@spinnaker/core';
 import type { IKeyPair } from '../domain';
 
 export class KeyPairsReader {
-  public static listKeyPairs(): PromiseLike<IKeyPair[]> {
+  public static listKeyPairs(): Promise<IKeyPair[]> {
     return REST('/keyPairs')
       .useCache()
       .get()

package/src/loadBalancer/AmazonLoadBalancersTag.spec.tsx

@@ -0,0 +1,39 @@
+import { AmazonLoadBalancersTagComponent } from './AmazonLoadBalancersTag';
+
+describe('AmazonLoadBalancersTag', () => {
+  it('opens load balancer and target group details through the injected state service', () => {
+    const stateService = {
+      current: { name: 'home.applications.application.insight.clusters' },
+      go: jasmine.createSpy('go'),
+    };
+    const component = new AmazonLoadBalancersTagComponent({
+      application: {},
+      router: {},
+      serverGroup: { account: 'test', region: 'us-east-1', type: 'aws' },
+      stateParams: {},
+      stateService,
+    } as any);
+
+    (component as any).showLoadBalancerDetails({ name: 'app-lb' });
+    (component as any).showTargetGroupDetails({
+      account: 'test',
+      loadBalancerNames: ['app-lb'],
+      name: 'app-target',
+      region: 'us-east-1',
+    });
+
+    expect(stateService.go).toHaveBeenCalledWith('.loadBalancerDetails', {
+      accountId: 'test',
+      name: 'app-lb',
+      provider: 'aws',
+      region: 'us-east-1',
+    });
+    expect(stateService.go).toHaveBeenCalledWith('.targetGroupDetails', {
+      accountId: 'test',
+      loadBalancerName: 'app-lb',
+      name: 'app-target',
+      provider: 'aws',
+      region: 'us-east-1',
+    });
+  });
+});

package/src/loadBalancer/AmazonLoadBalancersTag.tsx

@@ -4,15 +4,15 @@
 import { sortBy } from 'lodash';
 import React from 'react';
 
-import type { ILoadBalancer, ILoadBalancersTagProps } from '@spinnaker/core';
+import type { ILoadBalancer, ILoadBalancersTagProps, IRouterInjectedProps } from '@spinnaker/core';
 import {
   HealthCounts,
   HoverablePopover,
   LoadBalancerDataUtils,
   logger,
-  ReactInjector,
   Spinner,
   Tooltip,
+  withRouter,
 } from '@spinnaker/core';
 
 import { AmazonLoadBalancerDataUtils } from './amazonLoadBalancerDataUtils';
@@ -30,7 +30,7 @@ interface ILoadBalancerSingleItemProps extends ILoadBalancerListItemProps {
 class LoadBalancerListItem extends React.Component<ILoadBalancerListItemProps> {
   private onClick = (e: React.MouseEvent<HTMLElement>): void => {
     this.props.onItemClick(this.props.loadBalancer);
-    e.nativeEvent.preventDefault(); // yay angular JQueryEvent still listening to the click event...
+    e.nativeEvent.preventDefault();
   };
 
   public render(): React.ReactElement<LoadBalancerListItem> {
@@ -46,7 +46,7 @@ class LoadBalancerListItem extends React.Component<ILoadBalancerListItemProps> {
 class LoadBalancerButton extends React.Component<ILoadBalancerSingleItemProps> {
   private onClick = (e: React.MouseEvent<HTMLElement>): void => {
     this.props.onItemClick(this.props.loadBalancer);
-    e.nativeEvent.preventDefault(); // yay angular JQueryEvent still listening to the click event...
+    e.nativeEvent.preventDefault();
   };
 
   public render(): React.ReactElement<LoadBalancerButton> {
@@ -70,11 +70,14 @@ export interface IAmazonLoadBalancersTagState {
   isLoading: boolean;
 }
 
-export class AmazonLoadBalancersTag extends React.Component<ILoadBalancersTagProps, IAmazonLoadBalancersTagState> {
+export class AmazonLoadBalancersTagComponent extends React.Component<
+  ILoadBalancersTagProps & IRouterInjectedProps,
+  IAmazonLoadBalancersTagState
+> {
   private loadBalancersRefreshUnsubscribe: () => void;
   private mounted = false;
 
-  constructor(props: ILoadBalancersTagProps) {
+  constructor(props: ILoadBalancersTagProps & IRouterInjectedProps) {
     super(props);
     this.state = {
       loadBalancers: [],
@@ -84,11 +87,13 @@ export class AmazonLoadBalancersTag extends React.Component<ILoadBalancersTagPro
   }
 
   private showLoadBalancerDetails = (loadBalancer: ILoadBalancer): void => {
-    const { $state } = ReactInjector;
+    const { stateService } = this.props;
     const serverGroup = this.props.serverGroup;
     logger.log({ category: 'Cluster Pod', action: `Load Load Balancer Details (multiple menu)` });
-    const nextState = $state.current.name.endsWith('.clusters') ? '.loadBalancerDetails' : '^.loadBalancerDetails';
-    $state.go(nextState, {
+    const nextState = stateService.current.name.endsWith('.clusters')
+      ? '.loadBalancerDetails'
+      : '^.loadBalancerDetails';
+    stateService.go(nextState, {
       region: serverGroup.region,
       accountId: serverGroup.account,
       name: loadBalancer.name,
@@ -97,10 +102,10 @@ export class AmazonLoadBalancersTag extends React.Component<ILoadBalancersTagPro
   };
 
   private showTargetGroupDetails = (targetGroup: ITargetGroup): void => {
-    const { $state } = ReactInjector;
+    const { stateService } = this.props;
     logger.log({ category: 'Cluster Pod', action: `Load Target Group Details (multiple menu)` });
-    const nextState = $state.current.name.endsWith('.clusters') ? '.targetGroupDetails' : '^.targetGroupDetails';
-    $state.go(nextState, {
+    const nextState = stateService.current.name.endsWith('.clusters') ? '.targetGroupDetails' : '^.targetGroupDetails';
+    stateService.go(nextState, {
       region: targetGroup.region,
       accountId: targetGroup.account,
       name: targetGroup.name,
@@ -120,7 +125,7 @@ export class AmazonLoadBalancersTag extends React.Component<ILoadBalancersTagPro
 
   public componentDidMount(): void {
     this.mounted = true;
-    this.loadBalancersRefreshUnsubscribe = this.props.application.getDataSource('loadBalancers').onRefresh(null, () => {
+    this.loadBalancersRefreshUnsubscribe = this.props.application.getDataSource('loadBalancers').onRefresh(() => {
       this.forceUpdate();
     });
 
@@ -146,7 +151,7 @@ export class AmazonLoadBalancersTag extends React.Component<ILoadBalancersTagPro
     this.loadBalancersRefreshUnsubscribe();
   }
 
-  public render(): React.ReactElement<AmazonLoadBalancersTag> {
+  public render(): React.ReactElement {
     const { loadBalancers, targetGroups, isLoading } = this.state;
 
     const targetGroupCount = (targetGroups && targetGroups.length) || 0;
@@ -229,3 +234,5 @@ export class AmazonLoadBalancersTag extends React.Component<ILoadBalancersTagPro
     );
   }
 }
+
+export const AmazonLoadBalancersTag = withRouter(AmazonLoadBalancersTagComponent);

package/src/loadBalancer/OidcConfigReader.ts

@@ -15,7 +15,7 @@ export interface IAuthenticateOidcActionConfig {
 }
 
 export class OidcConfigReader {
-  public static getOidcConfigsByApp(app: string): PromiseLike<IAuthenticateOidcActionConfig[]> {
+  public static getOidcConfigsByApp(app: string): Promise<IAuthenticateOidcActionConfig[]> {
     return REST('/oidcConfigs').query({ app }).get();
   }
 }

package/src/loadBalancer/TargetGroupDetails.spec.tsx

@@ -0,0 +1,113 @@
+import { TargetGroupDetailsComponent as TargetGroupDetails } from './TargetGroupDetails';
+
+describe('TargetGroupDetails', () => {
+  let stateService: any;
+
+  beforeEach(() => {
+    stateService = { params: {}, go: jasmine.createSpy('go') };
+  });
+
+  function buildComponent(loadBalancers: any[]): TargetGroupDetails {
+    const app = {
+      getDataSource: () => ({ data: loadBalancers }),
+    } as any;
+
+    return new TargetGroupDetails({
+      accountId: 'test-account',
+      app,
+      name: 'test-target-group',
+      provider: 'aws',
+      router: {},
+      stateParams: {},
+      stateService,
+      targetGroup: {
+        accountId: 'test-account',
+        loadBalancerName: 'test-load-balancer',
+        name: 'test-target-group',
+        provider: 'aws',
+        region: 'us-west-2',
+      },
+    });
+  }
+
+  it('auto-closes when the load balancer disappears', () => {
+    const component = buildComponent([]);
+
+    (component as any).extractTargetGroup();
+
+    expect(stateService.params.allowModalToStayOpen).toBe(true);
+    expect(stateService.go).toHaveBeenCalledWith('^', null, { location: 'replace' });
+  });
+
+  it('auto-closes when the target group disappears', () => {
+    const component = buildComponent([
+      {
+        account: 'test-account',
+        name: 'test-load-balancer',
+        region: 'us-west-2',
+        targetGroups: [],
+      },
+    ]);
+
+    (component as any).extractTargetGroup();
+
+    expect(stateService.params.allowModalToStayOpen).toBe(true);
+    expect(stateService.go).toHaveBeenCalledWith('^', null, { location: 'replace' });
+  });
+
+  it('does not update state after unmount when the target group still exists', () => {
+    const component = buildComponent([
+      {
+        account: 'test-account',
+        name: 'test-load-balancer',
+        region: 'us-west-2',
+        targetGroups: [{ name: 'test-target-group' }],
+      },
+    ]);
+    spyOn(component, 'setState');
+
+    component.componentWillUnmount();
+    (component as any).extractTargetGroup();
+
+    expect(component.setState).not.toHaveBeenCalled();
+  });
+
+  it('stops loading when load balancers fail to become ready', () => {
+    const readyFailure = new Error('load balancers failed');
+    const rejectedReadiness = {
+      then: () => rejectedReadiness,
+      catch: (onRejected: (error: Error) => void) => {
+        onRejected(readyFailure);
+        return rejectedReadiness;
+      },
+    };
+    const app = {
+      getDataSource: () => ({
+        data: [],
+        ready: jasmine.createSpy('ready').and.returnValue(rejectedReadiness),
+        onRefresh: jasmine.createSpy('onRefresh'),
+      }),
+    } as any;
+    const component = new TargetGroupDetails({
+      accountId: 'test-account',
+      app,
+      name: 'test-target-group',
+      provider: 'aws',
+      router: {},
+      stateParams: {},
+      stateService,
+      targetGroup: {
+        accountId: 'test-account',
+        loadBalancerName: 'test-load-balancer',
+        name: 'test-target-group',
+        provider: 'aws',
+        region: 'us-west-2',
+      },
+    });
+    spyOn(component, 'setState');
+
+    component.componentDidMount();
+
+    expect(component.setState).toHaveBeenCalledWith({ loading: false });
+  });
+});

package/src/loadBalancer/TargetGroupDetails.tsx

@@ -1,13 +1,293 @@
+import { UISref } from '@uirouter/react';
 import React from 'react';
 
-import type { IOverridableProps } from '@spinnaker/core';
-import { Overridable } from '@spinnaker/core';
+import type { Application, IRouterInjectedProps } from '@spinnaker/core';
+import {
+  AccountTag,
+  CollapsibleSection,
+  CopyToClipboard,
+  HealthCounts,
+  ManagedResourceDetailsIndicator,
+  Spinner,
+  withRouter,
+} from '@spinnaker/core';
 
-export interface ITargetGroupDetailsProps extends IOverridableProps {}
+import type { IAmazonApplicationLoadBalancer, ITargetGroup } from '../domain';
+import { VpcTag } from '../vpc/VpcTag';
 
-@Overridable('loadBalancer.targetGroupDetails')
-export class TargetGroupDetails extends React.Component<ITargetGroupDetailsProps> {
-  public render() {
-    return <h3>Target Group Details</h3>;
+interface IAmazonTargetGroupDetailsState {
+  loadBalancer?: IAmazonApplicationLoadBalancer;
+  loading: boolean;
+  targetGroup?: ITargetGroup;
+}
+
+interface ITargetGroupStateParams {
+  accountId: string;
+  loadBalancerName: string;
+  name: string;
+  provider: string;
+  region: string;
+  vpcId?: string;
+}
+
+interface ITargetGroupDetailsProps {
+  accountId: string;
+  app: Application;
+  name: string;
+  provider: string;
+  targetGroup: ITargetGroupStateParams;
+}
+
+function elbProtocol(loadBalancer: IAmazonApplicationLoadBalancer): string {
+  return loadBalancer.listeners?.some((listener) => listener.protocol === 'HTTPS') ? 'https:' : 'http:';
+}
+
+export class TargetGroupDetailsComponent extends React.Component<
+  ITargetGroupDetailsProps & IRouterInjectedProps,
+  IAmazonTargetGroupDetailsState
+> {
+  public state: IAmazonTargetGroupDetailsState = { loading: true };
+
+  private unsubscribeFromRefresh: () => void;
+  private isUnmounted = false;
+
+  public componentDidMount(): void {
+    this.props.app
+      .getDataSource('loadBalancers')
+      .ready()
+      .then(() => {
+        if (this.isUnmounted) {
+          return;
+        }
+        this.extractTargetGroup();
+        this.unsubscribeFromRefresh = this.props.app.getDataSource('loadBalancers').onRefresh(this.extractTargetGroup);
+      })
+      .catch(() => {
+        if (!this.isUnmounted) {
+          this.setState({ loading: false });
+        }
+      });
+  }
+
+  public componentWillUnmount(): void {
+    this.isUnmounted = true;
+    if (this.unsubscribeFromRefresh) {
+      this.unsubscribeFromRefresh();
+    }
+  }
+
+  private extractTargetGroup = (): void => {
+    const { accountId, loadBalancerName, name, region } = this.props.targetGroup;
+    const loadBalancer = this.props.app
+      .getDataSource('loadBalancers')
+      .data.find(
+        (candidate: IAmazonApplicationLoadBalancer) =>
+          candidate.name === loadBalancerName && candidate.region === region && candidate.account === accountId,
+      );
+
+    const targetGroup = loadBalancer?.targetGroups?.find((candidate: ITargetGroup) => candidate.name === name);
+
+    if (!loadBalancer || !targetGroup) {
+      this.autoClose();
+      return;
+    }
+
+    if (!this.isUnmounted) {
+      this.setState({ loadBalancer, targetGroup, loading: false });
+    }
+  };
+
+  private autoClose = (): void => {
+    if (this.isUnmounted) {
+      return;
+    }
+
+    this.props.stateService.params.allowModalToStayOpen = true;
+    this.props.stateService.go('^', null, { location: 'replace' });
+  };
+
+  private closeDetails = (): void => {
+    this.props.stateService.go('^');
+  };
+
+  private renderHeader(): JSX.Element {
+    const { name } = this.props;
+    const { loading } = this.state;
+    return (
+      <div className="header">
+        <div className="close-button">
+          <a className="btn btn-link" onClick={this.closeDetails}>
+            <span className="glyphicon glyphicon-remove" />
+          </a>
+        </div>
+        {loading && (
+          <div className="horizontal center middle">
+            <Spinner size="small" />
+          </div>
+        )}
+        {!loading && (
+          <div className="header-text horizontal middle">
+            <i className="fa fa-crosshairs icon" aria-hidden="true" />
+            <h3 className="horizontal middle space-between flex-1">{name}</h3>
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  private renderNotFound(): JSX.Element {
+    return (
+      <div className="content">
+        <div className="content-section">
+          <div className="content-body text-center">
+            <h3>Target group not found.</h3>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  private renderDetails(loadBalancer: IAmazonApplicationLoadBalancer, targetGroup: ITargetGroup) {
+    const dnsName = (loadBalancer as any).dnsname || loadBalancer.elb?.dnsname;
+    const attributes = (targetGroup.attributes || {}) as any;
+    return (
+      <div className="content">
+        <CollapsibleSection heading="Target Group Details" defaultExpanded={true}>
+          <dl className="dl-horizontal dl-narrow">
+            <dt>In</dt>
+            <dd>
+              <AccountTag account={targetGroup.account} /> {targetGroup.region}
+            </dd>
+            <dt>VPC</dt>
+            <dd>
+              <VpcTag vpcId={targetGroup.vpcId} />
+            </dd>
+            <dt>Protocol</dt>
+            <dd>{targetGroup.protocol}</dd>
+            <dt>Port</dt>
+            <dd>{targetGroup.port}</dd>
+            <dt>Target Type</dt>
+            <dd>{targetGroup.targetType}</dd>
+          </dl>
+          <dl className="horizontal-when-filters-collapsed">
+            <dt>Load Balancer</dt>
+            <dd>
+              <ul className="collapse-margin-on-filter-collapse">
+                <li>
+                  <UISref
+                    to="^.loadBalancerDetails"
+                    params={{
+                      name: loadBalancer.name,
+                      region: loadBalancer.region,
+                      accountId: loadBalancer.account,
+                      vpcId: loadBalancer.vpcId,
+                      provider: 'aws',
+                    }}
+                  >
+                    <a>{loadBalancer.name}</a>
+                  </UISref>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+          {dnsName && (
+            <dl className="horizontal-when-filters-collapsed">
+              <dt>Load Balancer DNS Name</dt>
+              <dd>
+                <a target="_blank" href={`${elbProtocol(loadBalancer)}//${dnsName}`}>
+                  {dnsName}
+                </a>{' '}
+                <CopyToClipboard text={dnsName} toolTip="Copy DNS Name to clipboard" />
+              </dd>
+            </dl>
+          )}
+          {!!targetGroup.serverGroups?.length && (
+            <dl className="horizontal-when-filters-collapsed">
+              <dt>Server Groups</dt>
+              <dd>
+                <ul className="collapse-margin-on-filter-collapse">
+                  {targetGroup.serverGroups.map((serverGroup: any) => (
+                    <li key={serverGroup.name}>
+                      <UISref
+                        to="^.serverGroup"
+                        params={{
+                          region: serverGroup.region,
+                          accountId: serverGroup.account,
+                          serverGroup: serverGroup.name,
+                          provider: serverGroup.cloudProvider,
+                        }}
+                      >
+                        <a>{serverGroup.name}</a>
+                      </UISref>
+                    </li>
+                  ))}
+                </ul>
+              </dd>
+            </dl>
+          )}
+        </CollapsibleSection>
+        <CollapsibleSection heading="Status" defaultExpanded={true}>
+          <HealthCounts className="pull-left" container={targetGroup.instanceCounts} />
+        </CollapsibleSection>
+        <CollapsibleSection heading="Health Checks">
+          <dl className="horizontal-when-filters-collapsed">
+            <dt>Target</dt>
+            <dd>
+              {targetGroup.healthCheckProtocol}:{targetGroup.healthCheckPort}
+              {targetGroup.healthCheckPath}
+            </dd>
+            <dt>Timeout</dt>
+            <dd>{(targetGroup as any).healthCheckTimeoutSeconds || targetGroup.healthTimeout} seconds</dd>
+            <dt>Interval</dt>
+            <dd>{(targetGroup as any).healthCheckIntervalSeconds || targetGroup.healthInterval} seconds</dd>
+            <dt>Healthy Threshold</dt>
+            <dd>{(targetGroup as any).healthyThresholdCount || targetGroup.healthyThreshold}</dd>
+            <dt>Unhealthy Threshold</dt>
+            <dd>{(targetGroup as any).unhealthyThresholdCount || targetGroup.unhealthyThreshold}</dd>
+            {(targetGroup as any).matcher && <dt>Matcher</dt>}
+            {(targetGroup as any).matcher && <dd>HTTP Code(s): {(targetGroup as any).matcher.httpCode}</dd>}
+          </dl>
+        </CollapsibleSection>
+        <CollapsibleSection heading="Attributes" defaultExpanded={true}>
+          <dl className="horizontal-when-filters-collapsed">
+            <dt>Deregistration Delay Timeout</dt>
+            <dd>{attributes['deregistration_delay.timeout_seconds'] || attributes.deregistrationDelay} seconds</dd>
+            <dt>Stickiness Enabled</dt>
+            <dd>{String(attributes['stickiness.enabled'] ?? attributes.stickinessEnabled ?? false)}</dd>
+            {(attributes['stickiness.enabled'] === 'true' || attributes.stickinessEnabled) && (
+              <>
+                <dt>Stickiness Load Balancer Cookie Duration</dt>
+                <dd>{attributes['stickiness.lb_cookie.duration_seconds'] || attributes.stickinessDuration} seconds</dd>
+                <dt>Stickiness Type</dt>
+                <dd>{attributes['stickiness.type'] || attributes.stickinessType}</dd>
+              </>
+            )}
+            {loadBalancer.loadBalancerType === 'network' && (
+              <>
+                <dt>Preserve Client IP</dt>
+                <dd>{String(attributes['preserve_client_ip.enabled'] ?? attributes.preserveClientIp ?? false)}</dd>
+              </>
+            )}
+          </dl>
+        </CollapsibleSection>
+      </div>
+    );
+  }
+
+  public render(): JSX.Element {
+    const { app } = this.props;
+    const { loadBalancer, loading, targetGroup } = this.state;
+    return (
+      <div className="details-panel">
+        {this.renderHeader()}
+        {!loading && loadBalancer?.isManaged && (
+          <ManagedResourceDetailsIndicator resourceSummary={loadBalancer.managedResourceSummary} application={app} />
+        )}
+        {!loading && !targetGroup && this.renderNotFound()}
+        {!loading && targetGroup && loadBalancer && this.renderDetails(loadBalancer, targetGroup)}
+      </div>
+    );
   }
 }
+
+export const TargetGroupDetails = withRouter(TargetGroupDetailsComponent);