feat(ui): Show health check url beside target group (#7520)

spinnaker · Oct 15, 2019 · ed7c445 · ed7c445
1 parent f928d70
commit ed7c445
Show file tree

Hide file tree

Showing 12 changed files with 82 additions and 6 deletions.
diff --git a/app/scripts/modules/amazon/src/domain/IAmazonHealth.ts b/app/scripts/modules/amazon/src/domain/IAmazonHealth.ts
@@ -4,4 +4,5 @@ import { ITargetGroup } from 'amazon/domain';
 
 export interface IAmazonHealth extends IHealth {
   targetGroups: ITargetGroup[];
+  type: string;
 }
diff --git a/app/scripts/modules/amazon/src/index.ts b/app/scripts/modules/amazon/src/index.ts
@@ -10,3 +10,4 @@ export * from './reactShims';
 export * from './serverGroup';
 export * from './templates';
 export * from './vpc';
+export * from './instance';
diff --git a/app/scripts/modules/amazon/src/instance/details/instance.details.controller.js b/app/scripts/modules/amazon/src/instance/details/instance.details.controller.js
@@ -2,6 +2,7 @@
 
 const angular = require('angular');
 import _ from 'lodash';
+import { getAllTargetGroups, applyHealthCheckInfoToTargetGroups } from './utils';
 
 import {
   CloudProviderRegistry,
@@ -70,6 +71,11 @@ module.exports = angular
         var displayableMetrics = instance.health.filter(function(metric) {
           return metric.type !== 'Amazon' || metric.state !== 'Unknown';
         });
+
+        // augment with target group healthcheck data
+        const targetGroups = getAllTargetGroups(app.loadBalancers.data);
+        applyHealthCheckInfoToTargetGroups(displayableMetrics, targetGroups);
+
         // backfill details where applicable
         if (latest.health) {
           displayableMetrics.forEach(function(metric) {

diff --git a/app/scripts/modules/amazon/src/instance/details/instanceDetails.html b/app/scripts/modules/amazon/src/instance/details/instanceDetails.html
@@ -171,7 +171,10 @@ <h3 class="horizontal middle space-between flex-1" select-on-dbl-click>
             ng-if="metric.type === 'TargetGroup' && metric.targetGroups.length"
             ng-repeat="targetGroup in metric.targetGroups"
           >
-            <instance-load-balancer-health load-balancer="targetGroup"></instance-load-balancer-health>
+            <instance-load-balancer-health
+              load-balancer="targetGroup"
+              ip-address="instance.privateIpAddress"
+            ></instance-load-balancer-health>
           </div>
         </dd>
       </dl>

diff --git a/app/scripts/modules/amazon/src/instance/details/utils.ts b/app/scripts/modules/amazon/src/instance/details/utils.ts
@@ -0,0 +1,25 @@
+import { flatten, keyBy } from 'lodash';
+import { IAmazonApplicationLoadBalancer, IAmazonNetworkLoadBalancer, ITargetGroup, IAmazonHealth } from 'amazon/domain';
+
+export const getAllTargetGroups = (
+  loadBalancers: IAmazonApplicationLoadBalancer[] | IAmazonNetworkLoadBalancer[],
+): { [name: string]: ITargetGroup } => {
+  const allTargetGroups = loadBalancers.map(d => d.targetGroups);
+  const targetGroups = keyBy(flatten(allTargetGroups), 'name');
+  return targetGroups;
+};
+
+export const applyHealthCheckInfoToTargetGroups = (
+  healthMetrics: IAmazonHealth[],
+  targetGroups: { [name: string]: ITargetGroup },
+) => {
+  healthMetrics.forEach(metric => {
+    if (metric.type === 'TargetGroup') {
+      metric.targetGroups.forEach((tg: ITargetGroup) => {
+        const group = targetGroups[tg.name];
+        tg.healthCheckProtocol = group.healthCheckProtocol.toLowerCase();
+        tg.healthCheckPath = `:${group.healthCheckPort}${group.healthCheckPath}`;
+      });
+    }
+  });
+};
diff --git a/app/scripts/modules/amazon/src/instance/index.ts b/app/scripts/modules/amazon/src/instance/index.ts
@@ -0,0 +1 @@
+export * from './details/utils';
diff --git a/app/scripts/modules/core/src/instance/loadBalancer/InstanceLoadBalancerHealth.tsx b/app/scripts/modules/core/src/instance/loadBalancer/InstanceLoadBalancerHealth.tsx
@@ -7,16 +7,20 @@ export interface InstanceLoadBalancer {
   name?: string; // optional because there's a fallback (depends on source of data)
   loadBalancerName?: string; // optional because it is the fallback (depends on source of data)
   description?: string; // optional because there usually isn't a useful description when things are healthy
+  healthCheckPath?: string;
+  healthCheckProtocol?: string;
 }
 
 export interface IInstanceLoadBalancerHealthProps {
   loadBalancer: InstanceLoadBalancer;
+  ipAddress?: string;
 }
 
 export class InstanceLoadBalancerHealth extends React.Component<IInstanceLoadBalancerHealthProps> {
   public render() {
     const {
-      loadBalancer: { healthState, state, name, description, loadBalancerName },
+      loadBalancer: { healthState, state, name, description, loadBalancerName, healthCheckProtocol, healthCheckPath },
+      ipAddress,
     } = this.props;
 
     const health = healthState || (state === 'InService' ? 'Up' : 'OutOfService');
@@ -43,17 +47,35 @@ export class InstanceLoadBalancerHealth extends React.Component<IInstanceLoadBal
       </div>
     );
 
+    const healthCheckLinkSpan = (
+      <span className="pad-left small">
+        <a
+          ng-if="targetGroup.healthCheckPath"
+          target="_blank"
+          href={`${healthCheckProtocol}://${ipAddress}${healthCheckPath}`}
+        >
+          Health Check
+        </a>
+      </span>
+    );
+
     // Only wrap with tooltip if we have text for a tooltip
     const tooltipText = healthState !== 'Up' ? description : '';
     if (tooltipText) {
       const tooltip = <Tooltip id={name}>{tooltipText}</Tooltip>;
       return (
         <OverlayTrigger placement="left" overlay={tooltip}>
           {healthDiv}
+          {ipAddress && healthCheckPath && healthCheckLinkSpan}
         </OverlayTrigger>
       );
     }
 
-    return healthDiv;
+    return (
+      <>
+        {healthDiv}
+        {ipAddress && healthCheckPath && healthCheckLinkSpan}
+      </>
+    );
   }
 }
diff --git a/app/scripts/modules/core/src/instance/loadBalancer/instanceLoadBalancerHealth.directive.js b/app/scripts/modules/core/src/instance/loadBalancer/instanceLoadBalancerHealth.directive.js
@@ -7,4 +7,4 @@ const angular = require('angular');
 
 module.exports = angular
   .module('spinnaker.core.instance.loadBalancer.health.directive', [])
-  .component('instanceLoadBalancerHealth', react2angular(InstanceLoadBalancerHealth, ['loadBalancer']));
+  .component('instanceLoadBalancerHealth', react2angular(InstanceLoadBalancerHealth, ['loadBalancer', 'ipAddress']));
diff --git a/app/scripts/modules/ecs/src/instance/details/instance.details.controller.js b/app/scripts/modules/ecs/src/instance/details/instance.details.controller.js
@@ -2,6 +2,7 @@
 
 const angular = require('angular');
 import _ from 'lodash';
+import { getAllTargetGroups, applyHealthCheckInfoToTargetGroups } from '@spinnaker/amazon';
 
 import {
   CloudProviderRegistry,
@@ -68,6 +69,11 @@ module.exports = angular
         var displayableMetrics = instance.health.filter(function(metric) {
           return metric.type !== 'Ecs' || metric.state !== 'Unknown';
         });
+
+        // augment with target group healthcheck data
+        const targetGroups = getAllTargetGroups(app.loadBalancers.data);
+        applyHealthCheckInfoToTargetGroups(displayableMetrics, targetGroups);
+
         // backfill details where applicable
         if (latest.health) {
           displayableMetrics.forEach(function(metric) {

diff --git a/app/scripts/modules/ecs/src/instance/details/instanceDetails.html b/app/scripts/modules/ecs/src/instance/details/instanceDetails.html
@@ -146,7 +146,10 @@ <h3 class="horizontal middle space-between flex-1" select-on-dbl-click>
             ng-if="metric.type === 'TargetGroup' && metric.targetGroups.length"
             ng-repeat="targetGroup in metric.targetGroups"
           >
-            <instance-load-balancer-health load-balancer="targetGroup"></instance-load-balancer-health>
+            <instance-load-balancer-health
+              load-balancer="targetGroup"
+              ip-address="baseIpAddress"
+            ></instance-load-balancer-health>
           </div>
         </dd>
       </dl>

diff --git a/app/scripts/modules/titus/src/instance/details/instance.details.controller.js b/app/scripts/modules/titus/src/instance/details/instance.details.controller.js
@@ -2,6 +2,7 @@
 
 const angular = require('angular');
 import { defaults, filter } from 'lodash';
+import { getAllTargetGroups, applyHealthCheckInfoToTargetGroups } from '@spinnaker/amazon';
 
 import {
   AccountService,
@@ -72,6 +73,10 @@ module.exports = angular
           return metric.state !== 'Unknown';
         });
 
+        // augment with target group healthcheck data
+        const targetGroups = getAllTargetGroups(app.loadBalancers.data);
+        applyHealthCheckInfoToTargetGroups(displayableMetrics, targetGroups);
+
         // backfill details where applicable
         if (latest.health) {
           displayableMetrics.forEach(function(metric) {

diff --git a/app/scripts/modules/titus/src/instance/details/instanceDetails.html b/app/scripts/modules/titus/src/instance/details/instanceDetails.html
@@ -144,7 +144,10 @@ <h3 class="horizontal middle space-between flex-1" select-on-dbl-click>
             ng-if="metric.type === 'TargetGroup' && metric.targetGroups.length"
             ng-repeat="targetGroup in metric.targetGroups"
           >
-            <instance-load-balancer-health load-balancer="targetGroup"></instance-load-balancer-health>
+            <instance-load-balancer-health
+              load-balancer="targetGroup"
+              ip-address="metric.instanceId"
+            ></instance-load-balancer-health>
           </div>
         </dd>
       </dl>