mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 09:48:58 -04:00
[Infra UI] Fix tests cases that verify the node details page title and square color (#167624)
fixes https://github.com/elastic/kibana/issues/167071 ## Summary This PR fixes the infra home_page tests. There were two things failing: - Node details page title assert: replaced `retryForTime` with `retry` - The waffle node color asserts: After this change https://github.com/elastic/kibana/issues/161754, the `sort nodes by descending value` and `sort nodes by ascending value` weren't able to capture the color attribute, due to it being missing in the html element. After adding it back, I did a small refactor on the `NodeSquare` component, for readability reasons. https://buildkite.com/elastic/kibana-flaky-test-suite-runner/builds/3260
This commit is contained in:
Carlos Crespo
GitHub
parent
2047a5556a
commit
67895dbb6b
2 changed files with 154 additions and 129 deletions
|
|
@ -14,77 +14,143 @@ import { css } from '@emotion/react';
|
|||
import { euiThemeVars } from '@kbn/ui-theme';
|
||||
import { DispatchWithOptionalAction } from '../../../../../hooks/use_boolean';
|
||||
|
||||
const SquareTextContentStyles = (color: string) => `
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
flex: 1 0 auto;
|
||||
color: ${readableColor(color)};
|
||||
`;
|
||||
const styles = {
|
||||
nodeContainerSmall: (color: string) => `
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
background-color: ${darken(0.1, color)};
|
||||
border-radius: 3px;
|
||||
margin: 2px;
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
|
||||
`,
|
||||
valueInner: `
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
line-height: 1.2em;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
padding: 1em;
|
||||
overflow: hidden;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
border: none;
|
||||
&:focus {
|
||||
outline: none !important;
|
||||
border: ${euiThemeVars.euiFocusRingSize} solid ${euiThemeVars.euiFocusRingColor};
|
||||
box-shadow: none;
|
||||
}
|
||||
`,
|
||||
squareOuter: (color: string) => `
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
bottom: 4px;
|
||||
right: 4px;
|
||||
background-color: ${darken(0.1, color)};
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
|
||||
`,
|
||||
squareInner: (color: string) => `
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 2px;
|
||||
left: 0;
|
||||
border-radius: 3px;
|
||||
background-color: ${color};
|
||||
`,
|
||||
label: (color: string) => `
|
||||
font-size: 0.7em;
|
||||
margin-bottom: 0.7em;
|
||||
${SquareTextContentStyles(color)}
|
||||
`,
|
||||
value: (color: string) => `
|
||||
font-weight: bold;
|
||||
font-size: 0.9em;
|
||||
line-height: 1.2em;
|
||||
${SquareTextContentStyles(color)}
|
||||
`,
|
||||
type NodeProps<T = HTMLDivElement> = React.DetailedHTMLProps<React.HTMLAttributes<T>, T> & {
|
||||
'data-test-subj'?: string;
|
||||
};
|
||||
|
||||
const SquareContent = ({
|
||||
children,
|
||||
css: contentStyle,
|
||||
...props
|
||||
}: NodeProps & { color: string }) => (
|
||||
<div
|
||||
css={css`
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
flex: 1 0 auto;
|
||||
color: ${readableColor(props.color)};
|
||||
`}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
||||
const NodeContainer = ({ children, ...props }: NodeProps) => (
|
||||
<div
|
||||
css={css`
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
`}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
||||
const NodeContainerSmall = ({ children, ...props }: NodeProps & { color: string }) => (
|
||||
<div
|
||||
css={css`
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
background-color: ${darken(0.1, props.color)};
|
||||
border-radius: 3px;
|
||||
margin: 2px;
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
|
||||
`}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
const ValueInner = ({ children, ...props }: NodeProps<HTMLButtonElement>) => (
|
||||
<button
|
||||
css={css`
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
line-height: 1.2em;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
padding: 1em;
|
||||
overflow: hidden;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
border: none;
|
||||
&:focus {
|
||||
outline: none !important;
|
||||
border: ${euiThemeVars.euiFocusRingSize} solid ${euiThemeVars.euiFocusRingColor};
|
||||
box-shadow: none;
|
||||
}
|
||||
`}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
const SquareOuter = ({ children, ...props }: NodeProps & { color: string }) => (
|
||||
<div
|
||||
css={css`
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
bottom: 4px;
|
||||
right: 4px;
|
||||
background-color: ${darken(0.1, props.color)};
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
|
||||
`}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
const SquareInner = ({ children, ...props }: NodeProps & { color: string }) => (
|
||||
<div
|
||||
css={css`
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 2px;
|
||||
left: 0;
|
||||
border-radius: 3px;
|
||||
background-color: ${props.color};
|
||||
`}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
const Label = ({ children, ...props }: NodeProps & { color: string }) => (
|
||||
<SquareContent
|
||||
css={css`
|
||||
font-size: 0.7em;
|
||||
margin-bottom: 0.7em;
|
||||
`}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</SquareContent>
|
||||
);
|
||||
const Value = ({ children, ...props }: NodeProps & { color: string }) => (
|
||||
<SquareContent
|
||||
css={css`
|
||||
font-weight: bold;
|
||||
font-size: 0.9em;
|
||||
line-height: 1.2em;
|
||||
`}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</SquareContent>
|
||||
);
|
||||
|
||||
export const NodeSquare = ({
|
||||
squareSize,
|
||||
togglePopover,
|
||||
|
|
@ -113,11 +179,7 @@ export const NodeSquare = ({
|
|||
const style: CSSProperties | undefined = showBorder ? { border: 'solid 4px #000' } : undefined;
|
||||
|
||||
return valueMode || ellipsisMode ? (
|
||||
<div
|
||||
css={css`
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
`}
|
||||
<NodeContainer
|
||||
data-test-subj="nodeContainer"
|
||||
style={{ width: squareSize || 0, height: squareSize || 0 }}
|
||||
onClick={togglePopover}
|
||||
|
|
@ -127,65 +189,29 @@ export const NodeSquare = ({
|
|||
onMouseLeave={hideToolTip}
|
||||
className="buttonContainer"
|
||||
>
|
||||
<div
|
||||
css={css`
|
||||
${styles.squareOuter(color)}
|
||||
`}
|
||||
style={style}
|
||||
>
|
||||
<div
|
||||
css={css`
|
||||
${styles.squareInner(color)}
|
||||
`}
|
||||
>
|
||||
<SquareOuter color={color} style={style}>
|
||||
<SquareInner color={color}>
|
||||
{valueMode ? (
|
||||
<button
|
||||
css={css`
|
||||
${styles.valueInner}
|
||||
`}
|
||||
aria-label={nodeAriaLabel}
|
||||
>
|
||||
<div
|
||||
css={css`
|
||||
${styles.label(color)}
|
||||
`}
|
||||
data-test-subj="nodeName"
|
||||
>
|
||||
<ValueInner aria-label={nodeAriaLabel}>
|
||||
<Label data-test-subj="nodeName" color={color}>
|
||||
{nodeName}
|
||||
</div>
|
||||
<div
|
||||
css={css`
|
||||
${styles.value(color)}
|
||||
`}
|
||||
data-test-subj="nodeValue"
|
||||
>
|
||||
</Label>
|
||||
<Value data-test-subj="nodeValue" color={color}>
|
||||
{value}
|
||||
</div>
|
||||
</button>
|
||||
</Value>
|
||||
</ValueInner>
|
||||
) : (
|
||||
ellipsisMode && (
|
||||
<button
|
||||
css={css`
|
||||
${styles.valueInner}
|
||||
`}
|
||||
aria-label={nodeAriaLabel}
|
||||
>
|
||||
<div
|
||||
css={css`
|
||||
${styles.label(color)}
|
||||
`}
|
||||
>
|
||||
...
|
||||
</div>
|
||||
</button>
|
||||
<ValueInner aria-label={nodeAriaLabel}>
|
||||
<Label color={color}>...</Label>
|
||||
</ValueInner>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SquareInner>
|
||||
</SquareOuter>
|
||||
</NodeContainer>
|
||||
) : (
|
||||
<div
|
||||
css={styles.nodeContainerSmall(color)}
|
||||
<NodeContainerSmall
|
||||
data-test-subj="nodeContainer"
|
||||
style={{ width: squareSize || 0, height: squareSize || 0, ...style }}
|
||||
onClick={togglePopover}
|
||||
|
|
|
|||
|
|
@ -38,8 +38,7 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
|
|||
return !!currentUrl.match(path);
|
||||
});
|
||||
|
||||
// Failing: See https://github.com/elastic/kibana/issues/167071
|
||||
describe.skip('Home page', function () {
|
||||
describe('Home page', function () {
|
||||
this.tags('includeFirefox');
|
||||
before(async () => {
|
||||
await kibanaServer.savedObjects.cleanStandardList();
|
||||
|
|
@ -318,7 +317,7 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
|
|||
await pageObjects.infraHome.clickOnFirstNode();
|
||||
await pageObjects.infraHome.clickOnNodeDetailsFlyoutOpenAsPage();
|
||||
|
||||
await retry.tryForTime(3 * 1000, async () => {
|
||||
await retry.try(async () => {
|
||||
const documentTitle = await browser.getTitle();
|
||||
expect(documentTitle).to.contain(
|
||||
'demo-stack-redis-01 - Infrastructure - Observability - Elastic'
|
||||
|
|
@ -334,7 +333,7 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
|
|||
await pageObjects.infraHome.clickOnFirstNode();
|
||||
await pageObjects.infraHome.clickOnGoToNodeDetails();
|
||||
|
||||
await retry.tryForTime(3 * 1000, async () => {
|
||||
await retry.try(async () => {
|
||||
const documentTitle = await browser.getTitle();
|
||||
expect(documentTitle).to.contain('pod-0 - Infrastructure - Observability - Elastic');
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue