Influxdata
/
influxdb
mirror of https://github.com/influxdata/influxdb.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Display token on my account token overlay

pull/10616/head
Palak Bhojani 2019-01-07 16:00:19 -08:00
parent 01a836a995
commit 071a109eae
11 changed files with 152 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/src/clockface/components/overlays/OverlayContainer.tsx
View File

@ -7,7 +7,7 @@ interface Props {
class OverlayContainer extends Component<Props> {
public static defaultProps: Partial<Props> = {
maxWidth: 600,
maxWidth: 800,
}
public render() {

3
ui/src/me/components/account/Tokens.tsx
View File

@ -13,6 +13,7 @@ import {getAuthorizations} from 'src/authorizations/apis'
// Actions
import {notify} from 'src/shared/actions/notifications'
import {NotificationAction} from 'src/types'
// Types
import {Authorization} from 'src/api'
@ -27,7 +28,7 @@ enum AuthSearchKeys {
}
interface Props {
onNotify: typeof notify
onNotify: NotificationAction
}
export class Tokens extends PureComponent<Props, State> {

11
ui/src/me/components/account/TokensList.tsx
View File

@ -10,16 +10,16 @@ import {
} from 'src/clockface'
import TokenRow from 'src/me/components/account/TokenRow'
// Actions
import {notify} from 'src/shared/actions/notifications'
// Types
import {Authorization} from 'src/api'
import ViewTokenOverlay from './ViewTokenOverlay'
// Actions
import {NotificationAction} from 'src/types'
interface Props {
auths: Authorization[]
onNotify: typeof notify
onNotify: NotificationAction
searchTerm: string
}
@ -38,7 +38,7 @@ export default class TokenList extends PureComponent<Props, State> {
}
public render() {
const {auths} = this.props
const {auths, onNotify} = this.props
const {isTokenOverlayVisible, authInView} = this.state
return (
@ -62,6 +62,7 @@ export default class TokenList extends PureComponent<Props, State> {
</IndexList>
<OverlayTechnology visible={isTokenOverlayVisible}>
<ViewTokenOverlay
onNotify={onNotify}
auth={authInView}
onDismissOverlay={this.handleDismissOverlay}
/>

8
ui/src/me/components/account/ViewTokenOverlay.tsx
View File

@ -7,10 +7,14 @@ import PermissionsWidget, {
PermissionsWidgetMode,
PermissionsWidgetSelection,
} from 'src/shared/components/permissionsWidget/PermissionsWidget'
import CopyText from 'src/shared/components/CopyText'
// Types
import {Authorization, Permission} from 'src/api'
// Actions
import {NotificationAction} from 'src/types'
const {Orgs, Users, Buckets, Tasks} = Permission.ResourceEnum
const {Write, Read} = Permission.ActionEnum
@ -54,6 +58,7 @@ const testPerms: TestPermission[] = [
]
interface Props {
onNotify: NotificationAction
auth: Authorization
onDismissOverlay: () => void
}
@ -63,10 +68,13 @@ const actions = [Read, Write]
export default class ViewTokenOverlay extends PureComponent<Props> {
public render() {
const {description} = this.props.auth
const {onNotify} = this.props
return (
<OverlayContainer>
<OverlayHeading title={description} onDismiss={this.handleDismiss} />
<OverlayBody>
<CopyText copyText={this.props.auth.token} notify={onNotify} />
<PermissionsWidget
mode={PermissionsWidgetMode.Read}
heightPixels={500}

41
ui/src/me/components/account/__snapshots__/ViewTokenOverlay.test.tsx.snap
View File

@ -29,13 +29,13 @@ exports[`Account rendering renders! 1`] = `
}
>
<OverlayContainer
maxWidth={600}
maxWidth={800}
>
<div
className="overlay--container"
style={
Object {
"maxWidth": "600px",
"maxWidth": "800px",
}
}
>
@ -61,6 +61,43 @@ exports[`Account rendering renders! 1`] = `
<div
className="overlay--body"
>
<CopyText
copyText="ohEmfY80A9UsW_cicNXgOMIPIsUvU6K9YcpTfCPQE3NV8Y6nTsCwVghczATBPyQh96CoZkOW5DIKldya6Y84KA=="
>
<p
className="script-snippet"
>
ohEmfY80A9UsW_cicNXgOMIPIsUvU6K9YcpTfCPQE3NV8Y6nTsCwVghczATBPyQh96CoZkOW5DIKldya6Y84KA==
<CopyToClipboard
onCopy={[Function]}
text="ohEmfY80A9UsW_cicNXgOMIPIsUvU6K9YcpTfCPQE3NV8Y6nTsCwVghczATBPyQh96CoZkOW5DIKldya6Y84KA=="
>
<Button
active={false}
color="default"
customClass="copy-button"
onClick={[Function]}
shape="none"
size="sm"
status="default"
text="Copy"
titleText="copy to clipboard"
type="button"
>
<button
className="button button-sm button-default copy-button"
disabled={false}
onClick={[Function]}
tabIndex={0}
title="copy to clipboard"
type="button"
>
Copy
</button>
</Button>
</CopyToClipboard>
</p>
</CopyText>
<PermissionsWidget
heightPixels={500}
mode="read"

14
ui/src/onboarding/OnboardingWizard.scss
View File

@ -138,20 +138,6 @@
}
}
.wizard-step--body-snippet {
background-color: $g3-castle;
border-radius: $radius;
margin: $ix-marg-a 0;
padding: $ix-marg-b;
overflow-x: auto;
font-family: 'RobotoMono', monospace;
}
.wizard-step--body-copybutton{
float: right;
margin-left:10px auto;
}
.wizard-step--lp-body {
height: 280px;
width: 750px;

68
ui/src/onboarding/components/verifyStep/TelegrafInstructions.tsx
View File

@ -1,20 +1,15 @@
// Libraries
import React, {PureComponent, MouseEvent} from 'react'
import React, {PureComponent} from 'react'
import _ from 'lodash'
import CopyToClipboard from 'react-copy-to-clipboard'
// Decorator
import {ErrorHandling} from 'src/shared/decorators/errors'
// Components
import {Button, ComponentSize, ComponentColor} from 'src/clockface'
import CopyText from 'src/shared/components/CopyText'
// Types
import {NotificationAction} from 'src/types'
import {
copyToClipboardSuccess,
copyToClipboardFailed,
} from 'src/shared/copy/notifications'
export interface Props {
notify: NotificationAction
@ -25,10 +20,9 @@ export interface Props {
@ErrorHandling
class TelegrafInstructions extends PureComponent<Props> {
public render() {
const exportToken = `export INFLUX_TOKEN=${this.props.authToken}`
const configScript = `telegraf -config http://localhost:9999/api/v2/telegrafs/${
this.props.configID
}`
const {notify, authToken, configID} = this.props
const exportToken = `export INFLUX_TOKEN=${authToken}`
const configScript = `telegraf -config http://localhost:9999/api/v2/telegrafs/${configID}`
return (
<>
<h3 className="wizard-step--title">Listen for Streaming Data</h3>
@ -47,61 +41,13 @@ class TelegrafInstructions extends PureComponent<Props> {
After installing the telegraf client, save this environment
variable. run the following command.
</p>
<p className="wizard-step--body-snippet">
{exportToken}
<CopyToClipboard text={exportToken} onCopy={this.handleCopyAttempt}>
<Button
customClass="wizard-step--body-copybutton"
size={ComponentSize.Small}
color={ComponentColor.Default}
titleText="copy to clipboard"
text="Copy"
onClick={this.handleClickCopy}
/>
</CopyToClipboard>
</p>
<CopyText copyText={exportToken} notify={notify} />
<p>Run the following command.</p>
<p className="wizard-step--body-snippet">
{configScript}
<CopyToClipboard
text={configScript}
onCopy={this.handleCopyAttempt}
>
<Button
customClass="wizard-step--body-copybutton"
size={ComponentSize.Small}
color={ComponentColor.Default}
titleText="copy to clipboard"
text="Copy"
onClick={this.handleClickCopy}
/>
</CopyToClipboard>
</p>
<CopyText copyText={configScript} notify={notify} />
</div>
</>
)
}
private handleClickCopy = (e: MouseEvent<HTMLButtonElement>) => {
e.stopPropagation()
e.preventDefault()
}
private handleCopyAttempt = (
copiedText: string,
isSuccessful: boolean
): void => {
const {notify} = this.props
const text = copiedText.slice(0, 30).trimRight()
const truncatedText = `${text}...`
const title = 'Script '
if (isSuccessful) {
notify(copyToClipboardSuccess(truncatedText, title))
} else {
notify(copyToClipboardFailed(truncatedText, title))
}
}
}
export default TelegrafInstructions

52
ui/src/onboarding/components/verifyStep/__snapshots__/TelegrafInstructions.test.tsx.snap
View File

@ -28,53 +28,17 @@ exports[`TelegrafInstructions matches snapshot 1`] = `
<p>
After installing the telegraf client, save this environment variable. run the following command.
</p>
<p
className="wizard-step--body-snippet"
>
export INFLUX_TOKEN=
<CopyToClipboard
onCopy={[Function]}
text="export INFLUX_TOKEN="
>
<Button
active={false}
color="default"
customClass="wizard-step--body-copybutton"
onClick={[Function]}
shape="none"
size="sm"
status="default"
text="Copy"
titleText="copy to clipboard"
type="button"
/>
</CopyToClipboard>
</p>
<CopyText
copyText="export INFLUX_TOKEN="
notify={[MockFunction]}
/>
<p>
Run the following command.
</p>
<p
className="wizard-step--body-snippet"
>
telegraf -config http://localhost:9999/api/v2/telegrafs/
<CopyToClipboard
onCopy={[Function]}
text="telegraf -config http://localhost:9999/api/v2/telegrafs/"
>
<Button
active={false}
color="default"
customClass="wizard-step--body-copybutton"
onClick={[Function]}
shape="none"
size="sm"
status="default"
text="Copy"
titleText="copy to clipboard"
type="button"
/>
</CopyToClipboard>
</p>
<CopyText
copyText="telegraf -config http://localhost:9999/api/v2/telegrafs/"
notify={[MockFunction]}
/>
</div>
</Fragment>
`;

13
ui/src/shared/components/CopyText.scss Normal file
View File

@ -0,0 +1,13 @@
.script-snippet {
background-color: $g4-onyx;
border-radius: $radius;
margin: $ix-marg-a 0;
padding: $ix-marg-b;
overflow-x: auto;
font-family: 'RobotoMono', monospace;
}
.copy-button{
float: right;
margin-left:10px auto;
}

67
ui/src/shared/components/CopyText.tsx Normal file
View File

@ -0,0 +1,67 @@
// Libraries
import React, {PureComponent, MouseEvent} from 'react'
import _ from 'lodash'
import CopyToClipboard from 'react-copy-to-clipboard'
// Decorator
import {ErrorHandling} from 'src/shared/decorators/errors'
// Components
import {Button, ComponentSize, ComponentColor} from 'src/clockface'
// Actions
import {NotificationAction} from 'src/types'
import {
copyToClipboardSuccess,
copyToClipboardFailed,
} from 'src/shared/copy/notifications'
export interface Props {
copyText: string
notify: NotificationAction
}
@ErrorHandling
class CopyText extends PureComponent<Props> {
public render() {
const {copyText} = this.props
return (
<p className="script-snippet">
{copyText}
<CopyToClipboard text={copyText} onCopy={this.handleCopyAttempt}>
<Button
customClass="copy-button"
size={ComponentSize.Small}
color={ComponentColor.Default}
titleText="copy to clipboard"
text="Copy"
onClick={this.handleClickCopy}
/>
</CopyToClipboard>
</p>
)
}
private handleClickCopy = (e: MouseEvent<HTMLButtonElement>) => {
e.stopPropagation()
e.preventDefault()
}
private handleCopyAttempt = (
copiedText: string,
isSuccessful: boolean
): void => {
const {notify} = this.props
const text = copiedText.slice(0, 30).trimRight()
const truncatedText = `${text}...`
const title = 'Script '
if (isSuccessful) {
notify(copyToClipboardSuccess(truncatedText, title))
} else {
notify(copyToClipboardFailed(truncatedText, title))
}
}
}
export default CopyText

1
ui/src/style/chronograf.scss
View File

@ -39,6 +39,7 @@
@import 'src/shared/components/flux_functions_toolbar/FluxFunctionsToolbar.scss';
@import 'src/shared/components/view_options/options/ThresholdList';
@import 'src/shared/components/columns_options/ColumnsOptions';
@import 'src/shared/components/CopyText';
@import 'src/logs/containers/logs_page/LogsPage';
@import 'src/logs/components/loading_status/LoadingStatus';