Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor(aws/titus): Refactor instance status section to react (#8497)
* refactor(aws/titus): Refactor instance status section to react * refactor(aws/titus): Integrate new component and abstract custom url
- Loading branch information
1 parent
7bea174
commit f358e5e
Showing
7 changed files
with
124 additions
and
85 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
90 changes: 90 additions & 0 deletions
90
app/scripts/modules/amazon/src/instance/details/InstanceStatus.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,90 @@ | ||
| import React from 'react'; | ||
|
|
||
| import { CollapsibleSection, InstanceLoadBalancerHealth, robotToHuman, Tooltip } from '@spinnaker/core'; | ||
| import { IAmazonHealth } from '../../domain'; | ||
|
|
||
| export type MetricTypes = 'LoadBalancer' | 'TargetGroup'; | ||
|
|
||
| export interface CustomHealthLink { | ||
| type: string; | ||
| href: string; | ||
| text: string; | ||
| } | ||
|
|
||
| export interface IInstanceStatusProps { | ||
| healthMetrics: IAmazonHealth[]; | ||
| healthState: string; | ||
| metricTypes: MetricTypes[]; | ||
| customHealthUrl?: CustomHealthLink; | ||
| privateIpAddress?: string; | ||
| } | ||
|
|
||
| export const InstanceStatus = ({ | ||
| healthMetrics, | ||
| healthState, | ||
| metricTypes, | ||
| customHealthUrl, | ||
| privateIpAddress, | ||
| }: IInstanceStatusProps) => { | ||
| const hasLoadBalancer = metricTypes.includes('LoadBalancer'); | ||
| const hasTargetGroup = metricTypes.includes('TargetGroup'); | ||
|
|
||
| return ( | ||
| <CollapsibleSection heading="Status" defaultExpanded={true}> | ||
| {!healthMetrics.length && ( | ||
| <p>{healthState === 'Starting' ? 'Starting' : 'No health metrics found for this instance'}</p> | ||
| )} | ||
| <dl className="horizontal-when-filters-collapsed"> | ||
| {healthMetrics | ||
| .sort((a: IAmazonHealth, b: IAmazonHealth) => (a.type < b.type ? -1 : a.type > b.type ? 1 : 0)) | ||
| .map((metric: IAmazonHealth) => ( | ||
| <> | ||
| <dt>{robotToHuman(metric.type)}</dt> | ||
| <dd> | ||
| {!metricTypes.includes(metric.type as MetricTypes) && ( | ||
| <div> | ||
| <Tooltip value={metric.state.toLowerCase() === 'down' ? metric.description : ''} placement="left"> | ||
| <span> | ||
| <span className={`glyphicon glyphicon-${metric.state}-triangle`} /> | ||
| <span>{robotToHuman(metric.state)}</span> | ||
| </span> | ||
| </Tooltip> | ||
| <span className="pad-left small"> | ||
| {metric.healthCheckUrl && ( | ||
| <a target="_blank" href={metric.healthCheckUrl}> | ||
| Health Check | ||
| </a> | ||
| )} | ||
| {metric.healthCheckUrl && metric.statusPageUrl && <span> | </span>} | ||
| {metric.statusPageUrl && ( | ||
| <a target="_blank" href={metric.statusPageUrl}> | ||
| Status | ||
| </a> | ||
| )} | ||
| {customHealthUrl && metric.type === customHealthUrl.type && ( | ||
| <span> | ||
| {' '} | ||
| |{' '} | ||
| <a target="_blank" href={customHealthUrl.href}> | ||
| {customHealthUrl.text} | ||
| </a> | ||
| </span> | ||
| )} | ||
| </span> | ||
| </div> | ||
| )} | ||
| {hasLoadBalancer && | ||
| metric.type === 'LoadBalancer' && | ||
| (metric.loadBalancers || []).map(lb => <InstanceLoadBalancerHealth loadBalancer={lb} />)} | ||
| {hasTargetGroup && | ||
| metric.type === 'TargetGroup' && | ||
| (metric.targetGroups || []).map(tg => ( | ||
| <InstanceLoadBalancerHealth loadBalancer={tg} ipAddress={privateIpAddress} /> | ||
| ))} | ||
| </dd> | ||
| </> | ||
| ))} | ||
| </dl> | ||
| </CollapsibleSection> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
11 changes: 11 additions & 0 deletions
11
app/scripts/modules/amazon/src/instance/details/instanceStatus.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| import { module } from 'angular'; | ||
| import { react2angular } from 'react2angular'; | ||
|
|
||
| import { InstanceStatus } from './InstanceStatus'; | ||
|
|
||
| export const INSTANCE_STATUS_COMPONENT = 'spinnaker.application.instanceStatus.component'; | ||
|
|
||
| module(INSTANCE_STATUS_COMPONENT, []).component( | ||
| 'instanceStatus', | ||
| react2angular(InstanceStatus, ['healthMetrics', 'healthState', 'metricTypes', 'customHealthUrl', 'privateIpAddress']), | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters