feat(managed): add resource status indicator to security groups

pivotal · Nov 5, 2019 · 88b8e6c · 88b8e6c
1 parent f02b70d
commit 88b8e6c
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 3 deletions.
diff --git a/app/scripts/modules/core/src/managed/index.ts b/app/scripts/modules/core/src/managed/index.ts
@@ -2,6 +2,7 @@ export * from './ManagedReader';
 export * from './ManagedWriter';
 export * from './ManagedResourceDetailsIndicator';
 export * from './managedResourceDetailsIndicator.component';
+export * from './managedResourceStatusIndicator.component';
 export * from './ManagedResourceStatusIndicator';
 export * from './managed.dataSource';
 export * from './managedResourceDecorators';
diff --git a/app/scripts/modules/core/src/managed/managedResourceStatusIndicator.component.ts b/app/scripts/modules/core/src/managed/managedResourceStatusIndicator.component.ts
@@ -0,0 +1,10 @@
+import { module } from 'angular';
+import { react2angular } from 'react2angular';
+
+import { ManagedResourceStatusIndicator } from './ManagedResourceStatusIndicator';
+
+export const MANAGED_RESOURCE_STATUS_INDICATOR = 'spinnaker.core.managed.resourceStatusIndicator.component';
+module(MANAGED_RESOURCE_STATUS_INDICATOR, []).component(
+  'managedResourceStatusIndicator',
+  react2angular(ManagedResourceStatusIndicator, ['shape', 'resourceSummary']),
+);
diff --git a/app/scripts/modules/core/src/securityGroup/AllSecurityGroupsCtrl.js b/app/scripts/modules/core/src/securityGroup/AllSecurityGroupsCtrl.js
@@ -9,11 +9,16 @@ import { SETTINGS } from 'core/config/settings';
 import { FirewallLabels } from './label/FirewallLabels';
 import { SecurityGroupState } from 'core/state';
 import { noop } from 'core/utils';
+import { MANAGED_RESOURCE_STATUS_INDICATOR } from 'core/managed';
 
 const angular = require('angular');
 
 module.exports = angular
-  .module('spinnaker.core.securityGroup.all.controller', [SKIN_SELECTION_SERVICE, require('angular-ui-bootstrap')])
+  .module('spinnaker.core.securityGroup.all.controller', [
+    SKIN_SELECTION_SERVICE,
+    require('angular-ui-bootstrap'),
+    MANAGED_RESOURCE_STATUS_INDICATOR,
+  ])
   .controller('AllSecurityGroupsCtrl', [
     '$scope',
     'app',
@@ -69,7 +74,11 @@ module.exports = angular
 
       function createSecurityGroupProviderFilterFn(application, account, provider) {
         const sgConfig = provider.securityGroup;
-        return sgConfig && (sgConfig.CreateSecurityGroupModal || (sgConfig.createSecurityGroupTemplateUrl && sgConfig.createSecurityGroupController));
+        return (
+          sgConfig &&
+          (sgConfig.CreateSecurityGroupModal ||
+            (sgConfig.createSecurityGroupTemplateUrl && sgConfig.createSecurityGroupController))
+        );
       }
 
       this.createSecurityGroup = function createSecurityGroup() {

diff --git a/app/scripts/modules/core/src/securityGroup/securityGroup.directive.js b/app/scripts/modules/core/src/securityGroup/securityGroup.directive.js
@@ -14,12 +14,14 @@ module.exports = angular.module('spinnaker.core.securityGroup.directive', []).di
       scope: {
         application: '=',
         securityGroup: '=',
+        parentGrouping: '=',
         sortFilter: '=',
         heading: '=',
       },
       link: function(scope) {
         scope.sortFilter = SecurityGroupState.filterModel.asFilterModel.sortFilter;
         scope.$state = $rootScope.$state;
+        scope.showManagedIndicator = !scope.parentGrouping.isManaged && scope.securityGroup.isManaged;
 
         const securityGroup = scope.securityGroup;
         scope.srefParams = {

diff --git a/app/scripts/modules/core/src/securityGroup/securityGroup.html b/app/scripts/modules/core/src/securityGroup/securityGroup.html
@@ -7,6 +7,12 @@ <h6 class="sticky-header-2 horizontal middle">
     <span class="glyphicon glyphicon-transfer"></span>&nbsp;
     <div className="flex-1">{{heading | uppercase}}</div>
 
+    <managed-resource-status-indicator
+      class="sp-margin-s-left"
+      ng-if="showManagedIndicator"
+      shape="'circle'"
+      resource-summary="securityGroup.managedResourceSummary"
+    ></managed-resource-status-indicator>
     <entity-notifications
       entity="securityGroup"
       application="application"

diff --git a/app/scripts/modules/core/src/securityGroup/securityGroupPod.html b/app/scripts/modules/core/src/securityGroup/securityGroupPod.html
@@ -4,11 +4,17 @@
       <div class="heading-tag">
         <account-tag account="parentHeading"></account-tag>
       </div>
-      <div class="pod-center horizontal space-between center flex-1">
+      <div class="pod-center horizontal space-between flex-1 no-right-padding">
         <div>
           <span class="glyphicon glyphicon-transfer"></span>
           {{grouping.heading}}
         </div>
+        <managed-resource-status-indicator
+          class="flex-container-h"
+          ng-if="grouping.isManaged"
+          shape="'square'"
+          resource-summary="grouping.managedResourceSummary"
+        ></managed-resource-status-indicator>
       </div>
     </div>
   </div>
@@ -17,6 +23,7 @@
       <security-group
         application="application"
         security-group="subgroup.securityGroup"
+        parent-grouping="grouping"
         heading="subgroup.heading"
         sort-filter="sortFilter"
       ></security-group>