refactor(aws/instance): Reactify instance tags and security groups (#…

…8686) * refactor(aws/instance): Instance tags and security groups
spinnaker · Oct 27, 2020 · d15ca2d · d15ca2d
1 parent 9b8795d
commit d15ca2d
Show file tree

Hide file tree

Showing 10 changed files with 101 additions and 20 deletions.
diff --git a/app/scripts/modules/amazon/src/aws.module.ts b/app/scripts/modules/amazon/src/aws.module.ts
@@ -70,6 +70,8 @@ import { AMAZON_INSTANCE_DETAILS_INSTANCE_DETAILS_CONTROLLER } from './instance/
 import { AMAZON_SEARCH_SEARCHRESULTFORMATTER } from './search/searchResultFormatter';
 import { AWS_EVALUATE_CLOUD_FORMATION_CHANGE_SET_EXECUTION_SERVICE } from './pipeline/stages/deployCloudFormation/evaluateCloudFormationChangeSetExecution.service';
 import { INSTANCE_STATUS_COMPONENT } from './instance/details/instanceStatus.component';
+import { INSTANCE_TAGS_COMPONENT } from './instance/details/instanceTags.component';
+import { INSTANCE_SECURITY_GROUPS_COMPONENT } from './instance/details/instanceSecurityGroups.component';
 import { AMAZON_INSTANCE_INFORMATION_COMPONENT } from './instance/details/amazonInstanceInformation.component';
 
 // load all templates into the $templateCache
@@ -111,6 +113,8 @@ module(AMAZON_MODULE, [
   CLOUD_FORMATION_CHANGE_SET_INFO,
   AWS_EVALUATE_CLOUD_FORMATION_CHANGE_SET_EXECUTION_SERVICE,
   INSTANCE_STATUS_COMPONENT,
+  INSTANCE_TAGS_COMPONENT,
+  INSTANCE_SECURITY_GROUPS_COMPONENT,
   AMAZON_INSTANCE_INFORMATION_COMPONENT,
 ]).config(() => {
   CloudProviderRegistry.registerProvider('aws', {

diff --git a/app/scripts/modules/amazon/src/domain/IAmazonInstance.ts b/app/scripts/modules/amazon/src/domain/IAmazonInstance.ts
@@ -1,8 +1,10 @@
 import { IInstance } from '@spinnaker/core';
+import { IAmazonSecurityGroup } from './IAmazonSecurityGroup';
 
 export interface IAmazonInstance extends IInstance {
   imageId?: string;
   instanceType?: string;
+  securityGroups?: IAmazonSecurityGroup[];
   subnetId?: string;
   targetGroups?: string[];
 }
diff --git a/app/scripts/modules/amazon/src/domain/IAmazonSecurityGroup.ts b/app/scripts/modules/amazon/src/domain/IAmazonSecurityGroup.ts
@@ -0,0 +1,4 @@
+export interface IAmazonSecurityGroup {
+  groupId: string;
+  groupName: string;
+}
diff --git a/app/scripts/modules/amazon/src/instance/details/InstanceSecurityGroups.tsx b/app/scripts/modules/amazon/src/instance/details/InstanceSecurityGroups.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { UISref } from '@uirouter/react';
+import { UIRouterContextComponent } from '@uirouter/react-hybrid';
+import { orderBy } from 'lodash';
+import { CollapsibleSection, FirewallLabels } from '@spinnaker/core';
+import { IAmazonInstance } from '../../domain';
+
+export interface IInstanceSecurityGroupsProps {
+  instance: IAmazonInstance;
+}
+
+export const InstanceSecurityGroups = ({ instance }: IInstanceSecurityGroupsProps) => {
+  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>
+  );
+};
diff --git a/app/scripts/modules/amazon/src/instance/details/InstanceTags.tsx b/app/scripts/modules/amazon/src/instance/details/InstanceTags.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { orderBy } from 'lodash';
+
+import { CollapsibleSection, LabeledValue } from '@spinnaker/core';
+
+export interface IInstanceTagsProps {
+  tags: Array<{
+    key: string;
+    value: string;
+  }>;
+}
+
+export const InstanceTags = ({ tags }: IInstanceTagsProps) => {
+  const sortedTags = orderBy(tags, ['key'], ['asc']);
+  return (
+    <CollapsibleSection heading="Tags" defaultExpanded={true}>
+      {!tags.length && <div>No tags associated with this server</div>}
+      {tags.length && sortedTags.map((tag) => <LabeledValue label={tag.key} value={tag.value} />)}
+    </CollapsibleSection>
+  );
+};
diff --git a/app/scripts/modules/amazon/src/instance/details/instanceDetails.html b/app/scripts/modules/amazon/src/instance/details/instanceDetails.html
@@ -103,24 +103,8 @@ <h3 class="horizontal middle space-between flex-1" select-on-dbl-click>
         </dd>
       </dl>
     </collapsible-section>
-    <collapsible-section heading="{{securityGroupsLabel}}">
-      <ul>
-        <li ng-repeat="securityGroup in instance.securityGroups | orderBy:'groupName'">
-          <a
-            ui-sref="^.firewallDetails({name:securityGroup.groupName, accountId: instance.account, region: instance.region, vpcId: instance.vpcId, provider: instance.provider})"
-          >
-            {{securityGroup.groupName}} ({{securityGroup.groupId}})
-          </a>
-        </li>
-      </ul>
-    </collapsible-section>
-    <collapsible-section heading="Tags">
-      <div ng-if=" !instance.tags.length">No tags associated with this server</div>
-      <dl ng-if="instance.tags.length">
-        <dt ng-repeat-start="tag in instance.tags | orderBy: 'key.toLowerCase()'">{{tag.key}}</dt>
-        <dd ng-repeat-end>{{tag.value}}</dd>
-      </dl>
-    </collapsible-section>
+    <instance-security-groups instance="instance"></instance-security-groups>
+    <instance-tags tags="instance.tags"></instance-tags>
     <collapsible-section heading="Console Output" ng-if="baseIpAddress">
       <ul>
         <li>

diff --git a/app/scripts/modules/amazon/src/instance/details/instanceSecurityGroups.component.ts b/app/scripts/modules/amazon/src/instance/details/instanceSecurityGroups.component.ts
@@ -0,0 +1,12 @@
+import { withErrorBoundary } from '@spinnaker/core';
+import { module } from 'angular';
+import { react2angular } from 'react2angular';
+
+import { InstanceSecurityGroups } from './InstanceSecurityGroups';
+
+export const INSTANCE_SECURITY_GROUPS_COMPONENT = 'spinnaker.application.instanceSecurityGroups.component';
+
+module(INSTANCE_SECURITY_GROUPS_COMPONENT, []).component(
+  'instanceSecurityGroups',
+  react2angular(withErrorBoundary(InstanceSecurityGroups, 'instanceSecurityGroups'), ['instance']),
+);
diff --git a/app/scripts/modules/amazon/src/instance/details/instanceTags.component.ts b/app/scripts/modules/amazon/src/instance/details/instanceTags.component.ts
@@ -0,0 +1,12 @@
+import { withErrorBoundary } from '@spinnaker/core';
+import { module } from 'angular';
+import { react2angular } from 'react2angular';
+
+import { InstanceTags } from './InstanceTags';
+
+export const INSTANCE_TAGS_COMPONENT = 'spinnaker.application.instanceTags.component';
+
+module(INSTANCE_TAGS_COMPONENT, []).component(
+  'instanceTags',
+  react2angular(withErrorBoundary(InstanceTags, 'instanceTags'), ['tags']),
+);
diff --git a/app/scripts/modules/core/src/presentation/details.less b/app/scripts/modules/core/src/presentation/details.less
@@ -179,7 +179,6 @@
       }
     }
     padding: 0;
-    border-bottom: 1px solid var(--color-silver);
 
     &:last-child {
       border-bottom-width: 0;

diff --git a/app/scripts/modules/core/src/presentation/main.less b/app/scripts/modules/core/src/presentation/main.less
@@ -972,7 +972,7 @@ select:invalid {
     }
   }
   padding: 0;
-  border-bottom: 1px solid var(--color-silver);
+  border-top: 1px solid var(--color-silver);
 
   &:last-child {
     border-bottom-width: 0;