From ed7c44589cfbf482047a0f47d30df97165053aa4 Mon Sep 17 00:00:00 2001 From: caseyhebebrand Date: Tue, 15 Oct 2019 15:24:55 -0700 Subject: [PATCH] feat(ui): Show health check url beside target group (#7520) --- .../amazon/src/domain/IAmazonHealth.ts | 1 + app/scripts/modules/amazon/src/index.ts | 1 + .../details/instance.details.controller.js | 6 +++++ .../src/instance/details/instanceDetails.html | 5 +++- .../amazon/src/instance/details/utils.ts | 25 ++++++++++++++++++ .../modules/amazon/src/instance/index.ts | 1 + .../InstanceLoadBalancerHealth.tsx | 26 +++++++++++++++++-- .../instanceLoadBalancerHealth.directive.js | 2 +- .../details/instance.details.controller.js | 6 +++++ .../src/instance/details/instanceDetails.html | 5 +++- .../details/instance.details.controller.js | 5 ++++ .../src/instance/details/instanceDetails.html | 5 +++- 12 files changed, 82 insertions(+), 6 deletions(-) create mode 100644 app/scripts/modules/amazon/src/instance/details/utils.ts create mode 100644 app/scripts/modules/amazon/src/instance/index.ts diff --git a/app/scripts/modules/amazon/src/domain/IAmazonHealth.ts b/app/scripts/modules/amazon/src/domain/IAmazonHealth.ts index 54c7060867f..4a53275d61e 100644 --- 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 index 8acf26d9ee0..69b06d73dd2 100644 --- 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 index 880948d708f..cefcb3a0b68 100644 --- 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 index 87ad8ef6d4f..950ada34b43 100644 --- a/app/scripts/modules/amazon/src/instance/details/instanceDetails.html +++ b/app/scripts/modules/amazon/src/instance/details/instanceDetails.html @@ -171,7 +171,10 @@

ng-if="metric.type === 'TargetGroup' && metric.targetGroups.length" ng-repeat="targetGroup in metric.targetGroups" > - + diff --git a/app/scripts/modules/amazon/src/instance/details/utils.ts b/app/scripts/modules/amazon/src/instance/details/utils.ts new file mode 100644 index 00000000000..591c6923a22 --- /dev/null +++ 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 new file mode 100644 index 00000000000..e9aac892b37 --- /dev/null +++ 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 index f7e92de5eee..ffabb4de9f1 100644 --- 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 { 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,6 +47,18 @@ export class InstanceLoadBalancerHealth extends React.Component ); + const healthCheckLinkSpan = ( + + + Health Check + + + ); + // Only wrap with tooltip if we have text for a tooltip const tooltipText = healthState !== 'Up' ? description : ''; if (tooltipText) { @@ -50,10 +66,16 @@ export class InstanceLoadBalancerHealth extends React.Component {healthDiv} + {ipAddress && healthCheckPath && healthCheckLinkSpan} ); } - 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 index bdecb6eb0c8..b276a4a6fa6 100644 --- 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 index eadabb78b42..40dc6ea8ee7 100644 --- 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 index ba4e22ab448..b7c37eda8f1 100644 --- a/app/scripts/modules/ecs/src/instance/details/instanceDetails.html +++ b/app/scripts/modules/ecs/src/instance/details/instanceDetails.html @@ -146,7 +146,10 @@

ng-if="metric.type === 'TargetGroup' && metric.targetGroups.length" ng-repeat="targetGroup in metric.targetGroups" > - + 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 index 1405b75dd76..79ebf971475 100644 --- 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 index 614ed336f8e..c8494208fd2 100644 --- a/app/scripts/modules/titus/src/instance/details/instanceDetails.html +++ b/app/scripts/modules/titus/src/instance/details/instanceDetails.html @@ -144,7 +144,10 @@

ng-if="metric.type === 'TargetGroup' && metric.targetGroups.length" ng-repeat="targetGroup in metric.targetGroups" > - +