github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 17:59:23 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Remote Clusters] Added a11y tests and fixed violations (#96989)

Browse source 
* Added a11y tests for Remote Clusters plugin and fixed discovered violations

* Added an a11y test for a delete modal

* Updated payload type casting

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Yulia Čech 2021-04-20 08:51:28 +02:00 • committed by GitHub
parent 69edee5b75
commit bd5e9ba10a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 271 additions and 115 deletions
Download patch file Download diff file Expand all files Collapse all files

2
x-pack/plugins/remote_clusters/common/lib/cluster_serialization.ts
View file

@ -45,7 +45,7 @@ export interface Cluster {
hasDeprecatedProxySetting?: boolean;
}
interface ClusterPayloadEs {
export interface ClusterPayloadEs {
skip_unavailable?: boolean | null;
mode?: 'sniff' | 'proxy' | null;
proxy_address?: string | null;

1
x-pack/plugins/remote_clusters/common/lib/index.ts
View file

@ -10,4 +10,5 @@ export {
serializeCluster,
Cluster,
ClusterInfoEs,
ClusterPayloadEs,
} from './cluster_serialization';

4
x-pack/plugins/remote_clusters/public/application/sections/components/remote_cluster_form/remote_cluster_form.tsx
View file

@ -47,8 +47,8 @@ import {
convertCloudUrlToProxyConnection,
convertProxyConnectionToCloudUrl,
validateCluster,
isCloudUrlEnabled,
} from './validators';
import { isCloudUrlEnabled } from './validators/validate_cloud_url';
const defaultClusterValues: Cluster = {
name: '',
@ -369,7 +369,7 @@ export class RemoteClusterForm extends Component<Props, State> {
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButtonEmpty onClick={this.toggleRequest}>
<EuiButtonEmpty onClick={this.toggleRequest} data-test-subj="remoteClustersRequestButton">
{isRequestVisible ? (
<FormattedMessage
id="xpack.remoteClusters.remoteClusterForm.hideRequestButtonLabel"

2
x-pack/plugins/remote_clusters/public/application/sections/components/remote_cluster_form/request_flyout.tsx
View file

@ -38,7 +38,7 @@ export class RequestFlyout extends PureComponent<Props> {
return (
<EuiFlyout maxWidth={480} onClose={close}>
<EuiFlyoutHeader>
<EuiTitle>
<EuiTitle data-test-subj="remoteClusterRequestFlyoutTitle">
<h2>
{name ? (
<FormattedMessage

10
x-pack/plugins/remote_clusters/public/application/sections/remote_cluster_list/components/connection_status/connection_status.js
View file

@ -41,13 +41,11 @@ export function ConnectionStatus({ isConnected, mode }) {
return (
<EuiFlexGroup gutterSize="s" alignItems="center">
<EuiFlexItem grow={false}>
<EuiFlexGroup gutterSize="s" alignItems="center">
<EuiFlexItem grow={false}>{icon}</EuiFlexItem>
<span className="eui-displayBlock">{icon}</span>
</EuiFlexItem>
<EuiFlexItem className="remoteClustersConnectionStatus__message">
<EuiText size="s">{message}</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
<EuiFlexItem grow={false} className="remoteClustersConnectionStatus__message">
<EuiText size="s">{message}</EuiText>
</EuiFlexItem>
{!isConnected && mode === SNIFF_MODE && (

162
x-pack/plugins/remote_clusters/public/application/sections/remote_cluster_list/detail_panel/detail_panel.js
View file

@ -183,9 +183,9 @@ export class DetailPanel extends Component {
mode,
}) {
return (
<EuiDescriptionList data-test-subj="remoteClusterDetailPanelStatusValues">
<EuiFlexGroup>
<EuiFlexItem>
<EuiFlexGroup data-test-subj="remoteClusterDetailPanelStatusValues">
<EuiFlexItem>
<EuiDescriptionList>
<EuiDescriptionListTitle>
<EuiTitle size="xs">
<FormattedMessage
@ -194,13 +194,10 @@ export class DetailPanel extends Component {
/>
</EuiTitle>
</EuiDescriptionListTitle>
<EuiDescriptionListDescription data-test-subj="remoteClusterDetailIsConnected">
<ConnectionStatus isConnected={isConnected} mode={mode} />
</EuiDescriptionListDescription>
</EuiFlexItem>
<EuiFlexItem>
<EuiDescriptionListTitle>
<EuiTitle size="xs">
<FormattedMessage
@ -209,17 +206,10 @@ export class DetailPanel extends Component {
/>
</EuiTitle>
</EuiDescriptionListTitle>
<EuiDescriptionListDescription data-test-subj="remoteClusterDetailConnectedNodesCount">
{connectedNodesCount}
</EuiDescriptionListDescription>
</EuiFlexItem>
</EuiFlexGroup>
<EuiSpacer size="s" />
<EuiFlexGroup>
<EuiFlexItem>
<EuiDescriptionListTitle>
<EuiTitle size="xs">
<FormattedMessage
@ -228,7 +218,6 @@ export class DetailPanel extends Component {
/>
</EuiTitle>
</EuiDescriptionListTitle>
<EuiDescriptionListDescription data-test-subj="remoteClusterDetailSeeds">
{seeds.map((seed) => (
<EuiText size="s" key={seed}>
@ -236,9 +225,11 @@ export class DetailPanel extends Component {
</EuiText>
))}
</EuiDescriptionListDescription>
</EuiFlexItem>
</EuiDescriptionList>
</EuiFlexItem>
<EuiFlexItem>
<EuiFlexItem>
<EuiDescriptionList>
<EuiDescriptionListTitle>
<EuiTitle size="xs">
<FormattedMessage
@ -247,17 +238,10 @@ export class DetailPanel extends Component {
/>
</EuiTitle>
</EuiDescriptionListTitle>
<EuiDescriptionListDescription data-test-subj="remoteClusterDetailSkipUnavailable">
{this.renderSkipUnavailableValue(skipUnavailable)}
</EuiDescriptionListDescription>
</EuiFlexItem>
</EuiFlexGroup>
<EuiSpacer size="s" />
<EuiFlexGroup>
<EuiFlexItem>
<EuiDescriptionListTitle>
<EuiTitle size="xs">
<FormattedMessage
@ -266,13 +250,10 @@ export class DetailPanel extends Component {
/>
</EuiTitle>
</EuiDescriptionListTitle>
<EuiDescriptionListDescription data-test-subj="remoteClusterDetailMaxConnections">
{maxConnectionsPerCluster}
</EuiDescriptionListDescription>
</EuiFlexItem>
<EuiFlexItem>
<EuiDescriptionListTitle>
<EuiTitle size="xs">
<FormattedMessage
@ -281,13 +262,12 @@ export class DetailPanel extends Component {
/>
</EuiTitle>
</EuiDescriptionListTitle>
<EuiDescriptionListDescription data-test-subj="remoteClusterDetailInitialConnectTimeout">
{initialConnectTimeout}
</EuiDescriptionListDescription>
</EuiFlexItem>
</EuiFlexGroup>
</EuiDescriptionList>
</EuiDescriptionList>
</EuiFlexItem>
</EuiFlexGroup>
);
}
@ -302,9 +282,9 @@ export class DetailPanel extends Component {
serverName,
}) {
return (
<EuiDescriptionList data-test-subj="remoteClusterDetailPanelStatusValues">
<EuiFlexGroup>
<EuiFlexItem>
<EuiFlexGroup>
<EuiFlexItem>
<EuiDescriptionList>
<EuiDescriptionListTitle>
<EuiTitle size="xs">
<FormattedMessage
@ -313,13 +293,10 @@ export class DetailPanel extends Component {
/>
</EuiTitle>
</EuiDescriptionListTitle>
<EuiDescriptionListDescription data-test-subj="remoteClusterDetailIsConnected">
<ConnectionStatus isConnected={isConnected} mode={mode} />
</EuiDescriptionListDescription>
</EuiFlexItem>
<EuiFlexItem>
<EuiDescriptionListTitle>
<EuiTitle size="xs">
<FormattedMessage
@ -328,17 +305,10 @@ export class DetailPanel extends Component {
/>
</EuiTitle>
</EuiDescriptionListTitle>
<EuiDescriptionListDescription data-test-subj="remoteClusterDetailConnectedSocketsCount">
{connectedSocketsCount ? connectedSocketsCount : '-'}
</EuiDescriptionListDescription>
</EuiFlexItem>
</EuiFlexGroup>
<EuiSpacer size="s" />
<EuiFlexGroup>
<EuiFlexItem>
<EuiDescriptionListTitle>
<EuiTitle size="xs">
<FormattedMessage
@ -347,66 +317,10 @@ export class DetailPanel extends Component {
/>
</EuiTitle>
</EuiDescriptionListTitle>
<EuiDescriptionListDescription data-test-subj="remoteClusterDetailProxyAddress">
{proxyAddress}
</EuiDescriptionListDescription>
</EuiFlexItem>
<EuiFlexItem>
<EuiDescriptionListTitle>
<EuiTitle size="xs">
<FormattedMessage
id="xpack.remoteClusters.detailPanel.skipUnavailableLabel"
defaultMessage="Skip unavailable"
/>
</EuiTitle>
</EuiDescriptionListTitle>
<EuiDescriptionListDescription data-test-subj="remoteClusterDetailSkipUnavailable">
{this.renderSkipUnavailableValue(skipUnavailable)}
</EuiDescriptionListDescription>
</EuiFlexItem>
</EuiFlexGroup>
<EuiSpacer size="s" />
<EuiFlexGroup>
<EuiFlexItem>
<EuiDescriptionListTitle>
<EuiTitle size="xs">
<FormattedMessage
id="xpack.remoteClusters.detailPanel.maxSocketConnectionsLabel"
defaultMessage="Maximum socket connections"
/>
</EuiTitle>
</EuiDescriptionListTitle>
<EuiDescriptionListDescription data-test-subj="remoteClusterDetailMaxSocketConnections">
{proxySocketConnections ? proxySocketConnections : '-'}
</EuiDescriptionListDescription>
</EuiFlexItem>
<EuiFlexItem>
<EuiDescriptionListTitle>
<EuiTitle size="xs">
<FormattedMessage
id="xpack.remoteClusters.detailPanel.initialConnectTimeoutLabel"
defaultMessage="Initial connect timeout"
/>
</EuiTitle>
</EuiDescriptionListTitle>
<EuiDescriptionListDescription data-test-subj="remoteClusterDetailInitialConnectTimeout">
{initialConnectTimeout}
</EuiDescriptionListDescription>
</EuiFlexItem>
</EuiFlexGroup>
<EuiSpacer size="s" />
<EuiFlexGroup>
<EuiFlexItem>
<EuiDescriptionListTitle>
<EuiTitle size="xs">
<FormattedMessage
@ -415,23 +329,61 @@ export class DetailPanel extends Component {
/>
</EuiTitle>
</EuiDescriptionListTitle>
<EuiDescriptionListDescription data-test-subj="remoteClusterDetailServerName">
{serverName ? serverName : '-'}
</EuiDescriptionListDescription>
</EuiFlexItem>
</EuiFlexGroup>
</EuiDescriptionList>
</EuiDescriptionList>
</EuiFlexItem>
<EuiFlexItem>
<EuiDescriptionList>
<EuiDescriptionListTitle>
<EuiTitle size="xs">
<FormattedMessage
id="xpack.remoteClusters.detailPanel.skipUnavailableLabel"
defaultMessage="Skip unavailable"
/>
</EuiTitle>
</EuiDescriptionListTitle>
<EuiDescriptionListDescription data-test-subj="remoteClusterDetailSkipUnavailable">
{this.renderSkipUnavailableValue(skipUnavailable)}
</EuiDescriptionListDescription>
<EuiDescriptionListTitle>
<EuiTitle size="xs">
<FormattedMessage
id="xpack.remoteClusters.detailPanel.maxSocketConnectionsLabel"
defaultMessage="Maximum socket connections"
/>
</EuiTitle>
</EuiDescriptionListTitle>
<EuiDescriptionListDescription data-test-subj="remoteClusterDetailMaxSocketConnections">
{proxySocketConnections ? proxySocketConnections : '-'}
</EuiDescriptionListDescription>
<EuiDescriptionListTitle>
<EuiTitle size="xs">
<FormattedMessage
id="xpack.remoteClusters.detailPanel.initialConnectTimeoutLabel"
defaultMessage="Initial connect timeout"
/>
</EuiTitle>
</EuiDescriptionListTitle>
<EuiDescriptionListDescription data-test-subj="remoteClusterDetailInitialConnectTimeout">
{initialConnectTimeout}
</EuiDescriptionListDescription>
</EuiDescriptionList>
</EuiFlexItem>
</EuiFlexGroup>
);
}
renderCluster(cluster) {
return (
<section
aria-labelledby="xpack.remoteClusters.detailPanel.statusTitle"
aria-labelledby="clusterStatus"
data-test-subj="remoteClusterDetailPanelStatusSection"
>
<EuiTitle size="s">
<EuiTitle size="s" id="clusterStatus">
<h3>
<FormattedMessage
id="xpack.remoteClusters.detailPanel.statusTitle"