@ -1,3 +1,4 @@
import { Trans , t } from '@lingui/macro' ;
import React , { PureComponent } from 'react' ;
import { SelectableValue } from '@grafana/data' ;
@ -12,13 +13,6 @@ import { ShareModalTabProps } from './types';
const snapshotApiUrl = '/api/snapshots' ;
const expireOptions : Array < SelectableValue < number > > = [
{ label : 'Never' , value : 0 } ,
{ label : '1 Hour' , value : 60 * 60 } ,
{ label : '1 Day' , value : 60 * 60 * 24 } ,
{ label : '7 Days' , value : 60 * 60 * 24 * 7 } ,
] ;
interface Props extends ShareModalTabProps { }
interface State {
@ -36,15 +30,46 @@ interface State {
export class ShareSnapshot extends PureComponent < Props , State > {
private dashboard : DashboardModel ;
private expireOptions : Array < SelectableValue < number > > ;
constructor ( props : Props ) {
super ( props ) ;
this . dashboard = props . dashboard ;
this . expireOptions = [
{
label : t ( {
id : 'share-modal.snapshot.expire-never' ,
message : ` Never ` ,
} ) ,
value : 0 ,
} ,
{
label : t ( {
id : 'share-modal.snapshot.expire-hour' ,
message : ` 1 Hour ` ,
} ) ,
value : 60 * 60 ,
} ,
{
label : t ( {
id : 'share-modal.snapshot.expire-day' ,
message : ` 1 Day ` ,
} ) ,
value : 60 * 60 * 24 ,
} ,
{
label : t ( {
id : 'share-modal.snapshot.expire-week' ,
message : ` 7 Days ` ,
} ) ,
value : 60 * 60 * 24 * 7 ,
} ,
] ;
this . state = {
isLoading : false ,
step : 1 ,
selectedExpireOption : expireOptions [ 0 ] ,
snapshotExpires : expireOptions [ 0 ] . value ,
selectedExpireOption : this. expireOptions[ 0 ] ,
snapshotExpires : this. expireOptions[ 0 ] . value ,
snapshotName : props.dashboard.title ,
timeoutSeconds : 4 ,
snapshotUrl : '' ,
@ -202,42 +227,63 @@ export class ShareSnapshot extends PureComponent<Props, State> {
const { snapshotName , selectedExpireOption , timeoutSeconds , isLoading , sharingButtonText , externalEnabled } =
this . state ;
const snapshotNameTranslation = t ( {
id : 'share-modal.snapshot.name' ,
message : ` Snapshot name ` ,
} ) ;
const expireTranslation = t ( {
id : 'share-modal.snapshot.expire' ,
message : ` Expire ` ,
} ) ;
const timeoutTranslation = t ( {
id : 'share-modal.snapshot.timeout' ,
message : ` Timeout (seconds) ` ,
} ) ;
const timeoutDescriptionTranslation = t ( {
id : 'share-modal.snapshot.timeout-description' ,
message : ` You might need to configure the timeout value if it takes a long time to collect your dashboard
metrics . ` ,
} ) ;
return (
< >
< div >
< p className = "share-modal-info-text" >
A snapshot is an instant way to share an interactive dashboard publicly . When created , we strip sensitive
data like queries ( metric , template , and annotation ) and panel links , leaving only the visible metric data
and series names embedded in your dashboard .
< Trans id = "share-modal.snapshot.info-text-1" >
A snapshot is an instant way to share an interactive dashboard publicly . When created , we strip sensitive
data like queries ( metric , template , and annotation ) and panel links , leaving only the visible metric data
and series names embedded in your dashboard .
< / Trans >
< / p >
< p className = "share-modal-info-text" >
Keep in mind , your snapshot < em > can be viewed by anyone < / em > that has the link and can access the URL . Share
wisely .
< Trans id = "share-modal.snapshot.info-text-2" >
Keep in mind , your snapshot < em > can be viewed by anyone < / em > that has the link and can access the URL .
Share wisely .
< / Trans >
< / p >
< / div >
< Field label = "Snapshot name" >
< Field label = { snapshotNameTranslation } >
< Input id = "snapshot-name-input" width = { 30 } value = { snapshotName } onChange = { this . onSnapshotNameChange } / >
< / Field >
< Field label = "Expire" >
< Field label = { expireTranslation } >
< Select
inputId = "expire-select-input"
width = { 30 }
options = { expireOptions }
options = { this . expireOptions }
value = { selectedExpireOption }
onChange = { this . onExpireChange }
/ >
< / Field >
< Field
label = "Timeout (seconds)"
description = " You might need to configure the timeout value if it takes a long time to collect your dashboard
metrics . "
>
< Field label = { timeoutTranslation } description = { timeoutDescriptionTranslation } >
< Input id = "timeout-input" type = "number" width = { 21 } value = { timeoutSeconds } onChange = { this . onTimeoutChange } / >
< / Field >
< Modal.ButtonRow >
< Button variant = "secondary" onClick = { onDismiss } fill = "outline" >
Cancel
< Trans id = "share-modal.snapshot.cancel-button" > Cancel < / Trans >
< / Button >
{ externalEnabled && (
< Button variant = "secondary" disabled = { isLoading } onClick = { this . createSnapshot ( true ) } >
@ -245,7 +291,7 @@ export class ShareSnapshot extends PureComponent<Props, State> {
< / Button >
) }
< Button variant = "primary" disabled = { isLoading } onClick = { this . createSnapshot ( ) } >
Local Snapshot
< Trans id = "share-modal.snapshot.local-button" > Local Snapshot < / Trans >
< / Button >
< / Modal.ButtonRow >
< / >
@ -264,16 +310,16 @@ export class ShareSnapshot extends PureComponent<Props, State> {
readOnly
addonAfter = {
< ClipboardButton icon = "copy" variant = "primary" getText = { this . getSnapshotUrl } >
Copy
< Trans id = "share-modal.snapshot.copy-link-button" > Copy < / Trans >
< / ClipboardButton >
}
/ >
< / Field >
< div className = "pull-right" style = { { padding : '5px' } } >
Did you make a mistake ? { ' ' }
< Trans id = "share-modal.snapshot.mistake-message" > Did you make a mistake ? < / Trans > & nbsp ;
< LinkButton fill = "text" target = "_blank" onClick = { this . deleteSnapshot } >
Delete snapshot .
< Trans id = "share-modal.snapshot.delete-button" > Delete snapshot . < / Trans >
< / LinkButton >
< / div >
< / >
@ -284,8 +330,10 @@ export class ShareSnapshot extends PureComponent<Props, State> {
return (
< div className = "share-modal-header" >
< p className = "share-modal-info-text" >
The snapshot has been deleted . If you have already accessed it once , then it might take up to an hour before
before it is removed from browser caches or CDN caches .
< Trans id = "share-modal.snapshot.deleted-message" >
The snapshot has been deleted . If you have already accessed it once , then it might take up to an hour before
before it is removed from browser caches or CDN caches .
< / Trans >
< / p >
< / div >
) ;
eledobleefe
3 years ago
committed by