import { UISref } from '@uirouter/react' ; import { UIRouterContextComponent } from '@uirouter/react-hybrid' ; import { orderBy } from 'lodash' ; import React from 'react' ; import { CollapsibleSection , FirewallLabels } from '@spinnaker/core' ; import type { IAmazonInstance } from '../../domain' ; export interface IInstanceSecurityGroupsProps { instance : IAmazonInstance ; } export const InstanceSecurityGroups = ( { instance } ) => { const { account , region , provider , securityGroups , vpcId } = instance ; const sortedSecurityGroups = orderBy ( securityGroups , [ 'groupName' ] , [ 'asc' ] ) ; const securityGroupLabel = FirewallLabels . get ( 'Firewalls' ) ; 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> < /CollapsibleSection>); } ;