Skip to content

Commit

Permalink
diplay service provider error message (#2761)
Browse files Browse the repository at this point in the history 
Signed-off-by: aporss <[email protected]>
  • Loading branch information
@ArtjomsPorss
ArtjomsPorss authored Oct 9, 2024
1 parent 06ccf23 commit 3f5dea1
Show file tree
Hide file tree
Showing 8 changed files with 123 additions and 67 deletions.
21 changes: 17 additions & 4 deletions ui/src/__tests__/components/service/__snapshots__/ProviderTable.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,10 +71,16 @@ exports[`ProviderTable should render 1`] = `
vertical-align: text-bottom;
}
.emotion-17 {
text-align: left;
padding: 5px 0 5px 15px;
vertical-align: middle;
}
<td
class="emotion-0 emotion-1"
color=""
colspan="7"
colspan="8"
data-testid="provider-table"
>
<table
Expand Down Expand Up @@ -130,6 +136,15 @@ exports[`ProviderTable should render 1`] = `
</svg>
</div>
</td>
<td
class="emotion-17 emotion-18"
>
<div
data-testid="error-message"
name="red600"
style="color: rgb(208, 17, 17); display: inline-block;"
/>
</td>
</tr>
</tbody>
</table>
Expand All @@ -147,7 +162,5 @@ exports[`ProviderTable should render error if allow api throws error 1`] = `
data-testid="error-message"
name="red600"
style="color: rgb(208, 17, 17); display: inline-block;"
>
Failed to fetch template details.
</div>
/>
`;
17 changes: 12 additions & 5 deletions ui/src/__tests__/components/service/__snapshots__/ServiceList.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,6 +136,7 @@ exports[`ServiceList should render add service modal after click 1`] = `
</div>
<table
class="emotion-5 emotion-6"
id="services-table"
>
<thead>
<tr>
Expand Down Expand Up @@ -264,7 +265,7 @@ exports[`ServiceList should render add service modal after click 1`] = `
class="emotion-29"
data-testid="icon"
height="1.25em"
id=""
id="openhouse-providers"
viewBox="0 0 1024 1024"
width="1.25em"
>
Expand Down Expand Up @@ -451,6 +452,7 @@ exports[`ServiceList should render delete service modal error(other) after click
</div>
<table
class="emotion-5 emotion-6"
id="services-table"
>
<thead>
<tr>
Expand Down Expand Up @@ -579,7 +581,7 @@ exports[`ServiceList should render delete service modal error(other) after click
class="emotion-29"
data-testid="icon"
height="1.25em"
id=""
id="openhouse-providers"
viewBox="0 0 1024 1024"
width="1.25em"
>
Expand Down Expand Up @@ -756,6 +758,7 @@ exports[`ServiceList should render delete service modal error(refresh) after cli
</div>
<table
class="emotion-5 emotion-6"
id="services-table"
>
<thead>
<tr>
Expand Down Expand Up @@ -884,7 +887,7 @@ exports[`ServiceList should render delete service modal error(refresh) after cli
class="emotion-29"
data-testid="icon"
height="1.25em"
id=""
id="openhouse-providers"
viewBox="0 0 1024 1024"
width="1.25em"
>
Expand Down Expand Up @@ -1061,6 +1064,7 @@ exports[`ServiceList should render serviceList again after cancel delete 1`] = `
</div>
<table
class="emotion-5 emotion-6"
id="services-table"
>
<thead>
<tr>
Expand Down Expand Up @@ -1189,7 +1193,7 @@ exports[`ServiceList should render serviceList again after cancel delete 1`] = `
class="emotion-29"
data-testid="icon"
height="1.25em"
id=""
id="openhouse-providers"
viewBox="0 0 1024 1024"
width="1.25em"
>
Expand Down Expand Up @@ -1344,6 +1348,7 @@ exports[`ServiceList should render serviceList again after confirm delete 1`] =
</div>
<table
class="emotion-5 emotion-6"
id="services-table"
>
<thead>
<tr>
Expand Down Expand Up @@ -1525,6 +1530,7 @@ exports[`ServiceList should render with services 1`] = `
</div>
<table
class="emotion-5 emotion-6"
id="services-table"
>
<thead>
<tr>
Expand Down Expand Up @@ -1653,7 +1659,7 @@ exports[`ServiceList should render with services 1`] = `
class="emotion-29"
data-testid="icon"
height="1.25em"
id=""
id="openhouse-providers"
viewBox="0 0 1024 1024"
width="1.25em"
>
Expand Down Expand Up @@ -1808,6 +1814,7 @@ exports[`ServiceList should render without services 1`] = `
</div>
<table
class="emotion-5 emotion-6"
id="services-table"
>
<thead>
<tr>
Expand Down
2 changes: 1 addition & 1 deletion ui/src/__tests__/components/service/__snapshots__/ServiceRow.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -178,7 +178,7 @@ exports[`ServiceRow should render row 1`] = `
class="emotion-8"
data-testid="icon"
height="1.25em"
id=""
id="serviceName-providers"
viewBox="0 0 1024 1024"
width="1.25em"
>
Expand Down
5 changes: 3 additions & 2 deletions ui/src/__tests__/pages/domain/[domain]/__snapshots__/service.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1361,6 +1361,7 @@ exports[`ServicePage should render 1`] = `
</div>
<table
class="emotion-103 emotion-104"
id="services-table"
>
<thead>
<tr>
Expand Down Expand Up @@ -1489,7 +1490,7 @@ exports[`ServicePage should render 1`] = `
class="emotion-84"
data-testid="icon"
height="1.25em"
id=""
id="bastion-providers"
viewBox="0 0 1024 1024"
width="1.25em"
>
Expand Down Expand Up @@ -1612,7 +1613,7 @@ exports[`ServicePage should render 1`] = `
class="emotion-84"
data-testid="icon"
height="1.25em"
id=""
id="openhouse-providers"
viewBox="0 0 1024 1024"
width="1.25em"
>
Expand Down
32 changes: 32 additions & 0 deletions ui/src/__tests__/spec/tests/services.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,4 +81,36 @@ describe('services screen tests', () => {
let modalDeleteButton = await $('button*=Delete');
await modalDeleteButton.click();
});

describe('services screen tests', () => {
it('when clicking "Allow" button on a provider without having appropriate authorisation, the error should be displayed to the right of the button', async () => {
// open browser
await browser.newUser();
await browser.url(`/`);

// select domain
let domain = 'athenz.dev.test-non-admin';
let testDomain = await $(`a*=${domain}`);
await browser.waitUntil(async () => await testDomain.isClickable());
await testDomain.click();

// open Services
let servicesDiv = await $('div*=Services');
await servicesDiv.click();

// click Providers
let providersButton = await $(`.//*[local-name()="svg" and @id="provider-test-service-providers"]`);
await providersButton.click();

// click Azure provider
let awsProviderAllowButton = await $(`td[data-testid="provider-table"]`)
.$(`//td[text()="AWS EC2/EKS/Fargate launches instances for the service"]/following-sibling::td//button`);
await awsProviderAllowButton.click();

// warning should appear
let warning = await $(`td[data-testid="provider-table"]`)
.$(`//td[text()="AWS EC2/EKS/Fargate launches instances for the service"]/following-sibling::td//div[text()="Status: 403. Message: Forbidden"]`);
await expect(warning).toHaveText('Status: 403. Message: Forbidden');
});
});
})
108 changes: 54 additions & 54 deletions ui/src/components/service/ProviderTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,12 @@ const TableHeadStyledRight = styled.th`
border-right: none;
`;

const TableHeadStyledError = styled.th`
padding-bottom: 5px;
padding: 5px 0 5px 15px;
border-right: none;
`;

const TdStyled = styled.td`
padding: 20px;
text-align: left;
Expand All @@ -80,6 +86,12 @@ const ProviderTd = styled.td`
word-break: break-all;
`;

const ErrorTd = styled.td`
text-align: left;
padding: 5px 0 5px 15px;
vertical-align: middle;
`;

const AllowTd = styled.td`
text-align: left;
padding: 5px 0 5px 15px;
Expand All @@ -96,6 +108,7 @@ class ProviderTable extends React.Component {
constructor(props) {
super(props);
this.state = {
providerWithError: null,
errorMessage: null,
};
}
Expand All @@ -107,82 +120,69 @@ class ProviderTable extends React.Component {
this.props.service,
provider,
this.props._csrf
)
).then((data) => {
this.setState({ providerWithError: '' });
})
.catch((err) => {
this.setState({
providerWithError: provider,
errorMessage: RequestUtils.xhrErrorCheckHelper(err),
});
});
}

render() {
let providerContent = [];
if (this.state.errorMessage) {
providerContent = this.props.allProviders.map((provider) => {
return (
<TdStyled colSpan={7} color={this.props.color}>
<Color name={'red600'}>
Failed to fetch template details.
</Color>
</TdStyled>
<tr key={provider.id}>
<ProviderTd>{provider.name}</ProviderTd>
<AllowTd colSpan={5}>
{this.props.provider[provider.id] === 'allow' ? (
<AllowDiv>
<Icon
icon={'checkmark'}
color={colors.black}
size={'1.25em'}
verticalAlign={'text-bottom'}
/>
</AllowDiv>
) : (
<Button
onClick={this.onAllow.bind(
this,
provider.id
)}
>
Allow
</Button>
)}
</AllowTd>
<ErrorTd>
<Color name={'red600'}>
{
provider.id === this.state.providerWithError ? this.state.errorMessage : ''
}
</Color>
</ErrorTd>
</tr>
);
} else {
providerContent = this.props.allProviders.map((provider) => {
// if (this.props.provider[provider.id] === 'allow') {
return (
<tr key={provider.id}>
<ProviderTd>{provider.name}</ProviderTd>
<AllowTd colSpan={5}>
{this.props.provider[provider.id] === 'allow' ? (
<AllowDiv>
<Icon
icon={'checkmark'}
color={colors.black}
size={'1.25em'}
verticalAlign={'text-bottom'}
/>
</AllowDiv>
) : (
<Button
onClick={this.onAllow.bind(
this,
provider.id
)}
>
Allow
</Button>
)}
</AllowTd>
</tr>
);
// } else if (this.props.provider[provider.id] === 'not') {
// let onAllow = this.onAllow.bind(this, provider.id);
// return (
// <tr key={provider.id}>
// <ProviderTd>{provider.name}</ProviderTd>
// <AllowTd colSpan={5}></AllowTd>
// </tr>
// );
// }
// });
});
}
});

return (
<TdStyled
colSpan={7}
colSpan={8}
color={this.props.color}
data-testid='provider-table'
>
{this.state.errorMessage && (
<div>
<Color name={'red600'}>{this.state.errorMessage}</Color>
</div>
)}
<ProvideTable>
<TheadStyled>
<tr>
<TableHeadStyled>Provider</TableHeadStyled>
<TableHeadStyledRight>Status</TableHeadStyledRight>
{ this.state.errorMessage ?
<TableHeadStyledError></TableHeadStyledError> : ''
}
</tr>
</TheadStyled>
<tbody>{providerContent}</tbody>
Expand Down
4 changes: 3 additions & 1 deletion ui/src/components/service/ServiceList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -223,7 +223,9 @@ class ServiceList extends React.Component {
{addService}
</div>
</AddContainerDiv>
<ServiceTable>
<ServiceTable
id="services-table"
>
<thead>
<tr>
<TableHeadStyled align={left}>
Expand Down
1 change: 1 addition & 0 deletions ui/src/components/service/ServiceRow.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -174,6 +174,7 @@ class ServiceRow extends React.Component {
</TdStyled>
<TdStyled color={color} align={center}>
<Icon
id={this.props.serviceName + '-providers'}
icon={'cloud'}
onClick={this.toggleProviders}
color={colors.icons}
Expand Down

0 comments on commit 3f5dea1

Please sign in to comment.