Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix style bug in temp credentials #59

Merged
merged 2 commits into from
Sep 5, 2023
+70 −54
Merged

Fix style bug in temp credentials #59

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d623852
Fix style bug in temp credentials
sarahzinger Sep 1, 2023
a17fbe2
Prepare for 0.1.3 release
sarahzinger Sep 5, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@

All notable changes to this project will be documented in this file.

## v0.1.3

- Fix style bug in temp credentials #59

## v0.1.2

- Only show grafana assume role on enabled datasources #58
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@grafana/aws-sdk",
"version": "0.1.2",
"version": "0.1.3",
"description": "Common AWS features for grafana",
"main": "dist/index.js",
"module": "dist/esm/index.js",
Expand Down
118 changes: 65 additions & 53 deletions src/ConnectionConfig.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { FC, useEffect, useMemo, useState } from 'react';
import { Input, Select, InlineField, ButtonGroup, ToolbarButton, FieldSet, Collapse } from '@grafana/ui';
import { Input, Select, InlineField, ButtonGroup, ToolbarButton, FieldSet, Collapse, useStyles2 } from '@grafana/ui';
import {
DataSourcePluginOptionsEditorProps,
onUpdateDatasourceJsonDataOptionSelect,
Expand All @@ -11,6 +11,7 @@ import { config } from '@grafana/runtime';
import { standardRegions } from './regions';
import { AwsAuthDataSourceJsonData, AwsAuthDataSourceSecureJsonData, AwsAuthType } from './types';
import { awsAuthProviderOptions } from './providers';
import { css } from '@emotion/css';

export const DEFAULT_LABEL_WIDTH = 28;
const DS_TYPES_THAT_SUPPORT_TEMP_CREDS = ['cloudwatch'];
Expand Down Expand Up @@ -77,6 +78,7 @@ export const ConnectionConfig: FC<ConnectionConfigProps> = (props: ConnectionCon
}, [loadRegions]);

const inputWidth = inExperimentalAuthComponent ? 'width-20' : 'width-30';
const styles = useStyles2(getStyles);

return (
<FieldSet label={skipHeader ? '' : 'Connection Details'} data-testid="connection-config">
Expand Down Expand Up @@ -160,58 +162,60 @@ export const ConnectionConfig: FC<ConnectionConfigProps> = (props: ConnectionCon
)}

{options.jsonData.authType === AwsAuthType.GrafanaAssumeRole && (
<Collapse
label={'How to create an IAM role for grafana to assume:'}
collapsible={true}
isOpen={isARNInstructionsOpen}
onToggle={() => setIsARNInstructionsOpen(!isARNInstructionsOpen)}
>
<ol>
<li>
<p>
1. Create a new IAM role in the AWS console, and select <code>Another AWS account</code> as the{' '}
<code>Trusted entity</code>.
</p>
</li>
<li>
<p>
2. Enter the account ID of the Grafana account that has permission to assume this role:
<code> 008923505280 </code> and check the <code>Require external ID</code> box.
</p>
</li>
<li>
<p>
3. Enter the following external ID:{' '}
<code>{props.externalId || 'External Id is currently unavailable'}</code> and click <code>Next</code>.
</p>
</li>
<li>
<p>
4. Add any required permissions you would like Grafana to be able to access on your behalf. For more
details on our permissions please{' '}
<a
href="https://grafana.com/docs/grafana/latest/datasources/aws-cloudwatch/"
target="_blank"
rel="noreferrer"
>
read through our documentation
</a>
.
</p>
</li>
<li>
<p>
5. Give the role a name and description, and click <code>Create role</code>.
</p>
</li>
<li>
<p>
6. Copy the ARN of the role you just created and paste it into the <code>Assume Role ARN</code> field
below.
</p>
</li>
</ol>
</Collapse>
<div className={styles.assumeRoleInstructions}>
<Collapse
label={'How to create an IAM role for grafana to assume:'}
collapsible={true}
isOpen={isARNInstructionsOpen}
onToggle={() => setIsARNInstructionsOpen(!isARNInstructionsOpen)}
>
<ol>
<li>
<p>
1. Create a new IAM role in the AWS console, and select <code>Another AWS account</code> as the{' '}
<code>Trusted entity</code>.
</p>
</li>
<li>
<p>
2. Enter the account ID of the Grafana account that has permission to assume this role:
<code> 008923505280 </code> and check the <code>Require external ID</code> box.
</p>
</li>
<li>
<p>
3. Enter the following external ID:{' '}
<code>{props.externalId || 'External Id is currently unavailable'}</code> and click <code>Next</code>.
</p>
</li>
<li>
<p>
4. Add any required permissions you would like Grafana to be able to access on your behalf. For more
details on our permissions please{' '}
<a
href="https://grafana.com/docs/grafana/latest/datasources/aws-cloudwatch/"
target="_blank"
rel="noreferrer"
>
read through our documentation
</a>
.
</p>
</li>
<li>
<p>
5. Give the role a name and description, and click <code>Create role</code>.
</p>
</li>
<li>
<p>
6. Copy the ARN of the role you just created and paste it into the <code>Assume Role ARN</code> field
below.
</p>
</li>
</ol>
</Collapse>
</div>
)}

{awsAssumeRoleEnabled && (
Expand Down Expand Up @@ -282,3 +286,11 @@ export const ConnectionConfig: FC<ConnectionConfigProps> = (props: ConnectionCon
</FieldSet>
);
};

function getStyles() {
return {
assumeRoleInstructions: css({
maxWidth: '715px',
}),
};
}