Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
N
nexpie-grafana-theme
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Registry
Registry
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Kornkitt Poolsup
nexpie-grafana-theme
Commits
cf1cd4d6
Unverified
Commit
cf1cd4d6
authored
Dec 14, 2018
by
Torkel Ödegaard
Committed by
GitHub
Dec 14, 2018
Browse files
Options
Browse Files
Download
Plain Diff
Merge pull request #14500 from grafana/select-refactor
Select refactor
parents
b9a05a85
6e2f6701
Hide whitespace changes
Inline
Side-by-side
Showing
42 changed files
with
391 additions
and
470 deletions
+391
-470
public/app/core/components/CustomScrollbar/CustomScrollbar.tsx
+2
-2
public/app/core/components/CustomScrollbar/__snapshots__/CustomScrollbar.test.tsx.snap
+4
-4
public/app/core/components/PermissionList/AddPermission.tsx
+9
-9
public/app/core/components/PermissionList/DisabledPermissionListItem.tsx
+8
-7
public/app/core/components/PermissionList/PermissionListItem.tsx
+9
-7
public/app/core/components/Picker/DescriptionOption.tsx
+0
-26
public/app/core/components/Picker/DescriptionPicker.tsx
+0
-52
public/app/core/components/Picker/Select.tsx
+0
-60
public/app/core/components/Picker/SimplePicker.tsx
+0
-52
public/app/core/components/Picker/Unit/UnitOption.tsx
+0
-22
public/app/core/components/Select/DataSourcePicker.tsx
+6
-17
public/app/core/components/Select/IndicatorsContainer.tsx
+0
-0
public/app/core/components/Select/NoOptionsMessage.tsx
+7
-5
public/app/core/components/Select/OptionGroup.tsx
+5
-5
public/app/core/components/Select/PickerOption.test.tsx
+0
-0
public/app/core/components/Select/PickerOption.tsx
+0
-0
public/app/core/components/Select/ResetStyles.tsx
+0
-0
public/app/core/components/Select/Select.tsx
+232
-0
public/app/core/components/Select/TeamPicker.test.tsx
+0
-0
public/app/core/components/Select/TeamPicker.tsx
+3
-17
public/app/core/components/Select/UnitPicker.tsx
+6
-36
public/app/core/components/Select/UserPicker.test.tsx
+0
-0
public/app/core/components/Select/UserPicker.tsx
+10
-17
public/app/core/components/Select/__snapshots__/PickerOption.test.tsx.snap
+0
-0
public/app/core/components/Select/__snapshots__/TeamPicker.test.tsx.snap
+0
-0
public/app/core/components/Select/__snapshots__/UserPicker.test.tsx.snap
+0
-0
public/app/core/components/SharedPreferences/SharedPreferences.tsx
+13
-15
public/app/core/components/TagFilter/TagFilter.tsx
+3
-3
public/app/core/components/code_editor/code_editor.ts
+1
-1
public/app/features/dashboard/dashgrid/QueriesTab.tsx
+3
-9
public/app/features/explore/Explore.tsx
+8
-26
public/app/features/panel/panel_header.ts
+2
-2
public/app/features/teams/TeamMembers.tsx
+1
-1
public/app/plugins/datasource/cloudwatch/query_parameter_ctrl.ts
+14
-17
public/app/plugins/panel/gauge/MappingRow.tsx
+4
-5
public/app/plugins/panel/gauge/ValueOptions.tsx
+16
-18
public/app/types/explore.ts
+2
-6
public/sass/_grafana.scss
+0
-1
public/sass/components/_form_select_box.scss
+19
-2
public/sass/components/_query_editor.scss
+2
-0
public/sass/components/_switch.scss
+2
-2
public/sass/components/_unit-picker.scss
+0
-24
No files found.
public/app/core/components/CustomScrollbar/CustomScrollbar.tsx
View file @
cf1cd4d6
...
@@ -28,8 +28,8 @@ class CustomScrollbar extends PureComponent<Props> {
...
@@ -28,8 +28,8 @@ class CustomScrollbar extends PureComponent<Props> {
<
Scrollbars
<
Scrollbars
className=
{
customClassName
}
className=
{
customClassName
}
autoHeight=
{
true
}
autoHeight=
{
true
}
autoHeightMin=
{
'
100%
'
}
autoHeightMin=
{
'
inherit
'
}
autoHeightMax=
{
'
100%
'
}
autoHeightMax=
{
'
inherit
'
}
renderTrackHorizontal=
{
props
=>
<
div
{
...
props
}
className=
"track-horizontal"
/>
}
renderTrackHorizontal=
{
props
=>
<
div
{
...
props
}
className=
"track-horizontal"
/>
}
renderTrackVertical=
{
props
=>
<
div
{
...
props
}
className=
"track-vertical"
/>
}
renderTrackVertical=
{
props
=>
<
div
{
...
props
}
className=
"track-vertical"
/>
}
renderThumbHorizontal=
{
props
=>
<
div
{
...
props
}
className=
"thumb-horizontal"
/>
}
renderThumbHorizontal=
{
props
=>
<
div
{
...
props
}
className=
"thumb-horizontal"
/>
}
...
...
public/app/core/components/CustomScrollbar/__snapshots__/CustomScrollbar.test.tsx.snap
View file @
cf1cd4d6
...
@@ -6,8 +6,8 @@ exports[`CustomScrollbar renders correctly 1`] = `
...
@@ -6,8 +6,8 @@ exports[`CustomScrollbar renders correctly 1`] = `
style={
style={
Object {
Object {
"height": "auto",
"height": "auto",
"maxHeight": "
100%
",
"maxHeight": "
inherit
",
"minHeight": "
100%
",
"minHeight": "
inherit
",
"overflow": "hidden",
"overflow": "hidden",
"position": "relative",
"position": "relative",
"width": "100%",
"width": "100%",
...
@@ -23,8 +23,8 @@ exports[`CustomScrollbar renders correctly 1`] = `
...
@@ -23,8 +23,8 @@ exports[`CustomScrollbar renders correctly 1`] = `
"left": undefined,
"left": undefined,
"marginBottom": 0,
"marginBottom": 0,
"marginRight": 0,
"marginRight": 0,
"maxHeight": "calc(
100%
+ 0px)",
"maxHeight": "calc(
inherit
+ 0px)",
"minHeight": "calc(
100%
+ 0px)",
"minHeight": "calc(
inherit
+ 0px)",
"overflow": "scroll",
"overflow": "scroll",
"position": "relative",
"position": "relative",
"right": undefined,
"right": undefined,
...
...
public/app/core/components/PermissionList/AddPermission.tsx
View file @
cf1cd4d6
import
React
,
{
Component
}
from
'react'
;
import
React
,
{
Component
}
from
'react'
;
import
{
UserPicker
}
from
'app/core/components/
Picker
/UserPicker'
;
import
{
UserPicker
}
from
'app/core/components/
Select
/UserPicker'
;
import
{
TeamPicker
,
Team
}
from
'app/core/components/
Picker
/TeamPicker'
;
import
{
TeamPicker
,
Team
}
from
'app/core/components/
Select
/TeamPicker'
;
import
DescriptionPicker
,
{
OptionWithDescription
}
from
'app/core/components/Picker/DescriptionPicker
'
;
import
{
Select
,
SelectOptionItem
}
from
'app/core/components/Select/Select
'
;
import
{
User
}
from
'app/types'
;
import
{
User
}
from
'app/types'
;
import
{
import
{
dashboardPermissionLevels
,
dashboardPermissionLevels
,
...
@@ -61,7 +61,7 @@ class AddPermissions extends Component<Props, NewDashboardAclItem> {
...
@@ -61,7 +61,7 @@ class AddPermissions extends Component<Props, NewDashboardAclItem> {
this
.
setState
({
teamId
:
team
&&
!
Array
.
isArray
(
team
)
?
team
.
id
:
0
});
this
.
setState
({
teamId
:
team
&&
!
Array
.
isArray
(
team
)
?
team
.
id
:
0
});
};
};
onPermissionChanged
=
(
permission
:
OptionWithDescription
)
=>
{
onPermissionChanged
=
(
permission
:
SelectOptionItem
)
=>
{
this
.
setState
({
permission
:
permission
.
value
});
this
.
setState
({
permission
:
permission
.
value
});
};
};
...
@@ -121,11 +121,11 @@ class AddPermissions extends Component<Props, NewDashboardAclItem> {
...
@@ -121,11 +121,11 @@ class AddPermissions extends Component<Props, NewDashboardAclItem> {
)
:
null
}
)
:
null
}
<
div
className=
"gf-form"
>
<
div
className=
"gf-form"
>
<
DescriptionPicker
<
Select
optionsWithDesc=
{
dashboardPermissionLevels
}
isSearchable=
{
false
}
o
nSelected=
{
this
.
onPermissionChanged
}
o
ptions=
{
dashboardPermissionLevels
}
disabled=
{
false
}
onChange=
{
this
.
onPermissionChanged
}
className=
{
'gf-form-select-box__control--menu-right'
}
className=
"gf-form-select-box__control--menu-right"
/>
/>
</
div
>
</
div
>
...
...
public/app/core/components/PermissionList/DisabledPermissionListItem.tsx
View file @
cf1cd4d6
import
React
,
{
Component
}
from
'react'
;
import
React
,
{
Component
}
from
'react'
;
import
DescriptionPicker
from
'app/core/components/Picker/DescriptionPicker
'
;
import
Select
from
'app/core/components/Select/Select
'
;
import
{
dashboardPermissionLevels
}
from
'app/types/acl'
;
import
{
dashboardPermissionLevels
}
from
'app/types/acl'
;
export
interface
Props
{
export
interface
Props
{
...
@@ -9,6 +9,7 @@ export interface Props {
...
@@ -9,6 +9,7 @@ export interface Props {
export
default
class
DisabledPermissionListItem
extends
Component
<
Props
,
any
>
{
export
default
class
DisabledPermissionListItem
extends
Component
<
Props
,
any
>
{
render
()
{
render
()
{
const
{
item
}
=
this
.
props
;
const
{
item
}
=
this
.
props
;
const
currentPermissionLevel
=
dashboardPermissionLevels
.
find
(
dp
=>
dp
.
value
===
item
.
permission
);
return
(
return
(
<
tr
className=
"gf-form-disabled"
>
<
tr
className=
"gf-form-disabled"
>
...
@@ -23,12 +24,12 @@ export default class DisabledPermissionListItem extends Component<Props, any> {
...
@@ -23,12 +24,12 @@ export default class DisabledPermissionListItem extends Component<Props, any> {
<
td
className=
"query-keyword"
>
Can
</
td
>
<
td
className=
"query-keyword"
>
Can
</
td
>
<
td
>
<
td
>
<
div
className=
"gf-form"
>
<
div
className=
"gf-form"
>
<
DescriptionPicker
<
Select
options
WithDesc
=
{
dashboardPermissionLevels
}
options=
{
dashboardPermissionLevels
}
on
Selected
=
{
()
=>
{}
}
on
Change
=
{
()
=>
{}
}
d
isabled=
{
true
}
isD
isabled=
{
true
}
className=
{
'gf-form-select-box__control--menu-right'
}
className=
"gf-form-select-box__control--menu-right"
value=
{
item
.
permission
}
value=
{
currentPermissionLevel
}
/>
/>
</
div
>
</
div
>
</
td
>
</
td
>
...
...
public/app/core/components/PermissionList/PermissionListItem.tsx
View file @
cf1cd4d6
import
React
,
{
PureComponent
}
from
'react'
;
import
React
,
{
PureComponent
}
from
'react'
;
import
DescriptionPicker
from
'app/core/components/Picker/DescriptionPicker
'
;
import
{
Select
}
from
'app/core/components/Select/Select
'
;
import
{
dashboardPermissionLevels
,
DashboardAcl
,
PermissionLevel
}
from
'app/types/acl'
;
import
{
dashboardPermissionLevels
,
DashboardAcl
,
PermissionLevel
}
from
'app/types/acl'
;
import
{
FolderInfo
}
from
'app/types'
;
import
{
FolderInfo
}
from
'app/types'
;
...
@@ -50,6 +50,7 @@ export default class PermissionsListItem extends PureComponent<Props> {
...
@@ -50,6 +50,7 @@ export default class PermissionsListItem extends PureComponent<Props> {
render
()
{
render
()
{
const
{
item
,
folderInfo
}
=
this
.
props
;
const
{
item
,
folderInfo
}
=
this
.
props
;
const
inheritedFromRoot
=
item
.
dashboardId
===
-
1
&&
!
item
.
inherited
;
const
inheritedFromRoot
=
item
.
dashboardId
===
-
1
&&
!
item
.
inherited
;
const
currentPermissionLevel
=
dashboardPermissionLevels
.
find
(
dp
=>
dp
.
value
===
item
.
permission
);
return
(
return
(
<
tr
className=
{
setClassNameHelper
(
item
.
inherited
)
}
>
<
tr
className=
{
setClassNameHelper
(
item
.
inherited
)
}
>
...
@@ -74,12 +75,13 @@ export default class PermissionsListItem extends PureComponent<Props> {
...
@@ -74,12 +75,13 @@ export default class PermissionsListItem extends PureComponent<Props> {
<
td
className=
"query-keyword"
>
Can
</
td
>
<
td
className=
"query-keyword"
>
Can
</
td
>
<
td
>
<
td
>
<
div
className=
"gf-form"
>
<
div
className=
"gf-form"
>
<
DescriptionPicker
<
Select
optionsWithDesc=
{
dashboardPermissionLevels
}
isSearchable=
{
false
}
onSelected=
{
this
.
onPermissionChanged
}
options=
{
dashboardPermissionLevels
}
disabled=
{
item
.
inherited
}
onChange=
{
this
.
onPermissionChanged
}
className=
{
'gf-form-select-box__control--menu-right'
}
isDisabled=
{
item
.
inherited
}
value=
{
item
.
permission
}
className=
"gf-form-select-box__control--menu-right"
value=
{
currentPermissionLevel
}
/>
/>
</
div
>
</
div
>
</
td
>
</
td
>
...
...
public/app/core/components/Picker/DescriptionOption.tsx
deleted
100644 → 0
View file @
b9a05a85
import
React
from
'react'
;
import
{
components
}
from
'react-select'
;
import
{
OptionProps
}
from
'react-select/lib/components/Option'
;
// https://github.com/JedWatson/react-select/issues/3038
interface
ExtendedOptionProps
extends
OptionProps
<
any
>
{
data
:
any
;
}
export
const
Option
=
(
props
:
ExtendedOptionProps
)
=>
{
const
{
children
,
isSelected
,
data
}
=
props
;
return
(
<
components
.
Option
{
...
props
}
>
<
div
className=
"gf-form-select-box__desc-option"
>
<
div
className=
"gf-form-select-box__desc-option__body"
>
<
div
>
{
children
}
</
div
>
{
data
.
description
&&
<
div
className=
"gf-form-select-box__desc-option__desc"
>
{
data
.
description
}
</
div
>
}
</
div
>
{
isSelected
&&
<
i
className=
"fa fa-check"
aria
-
hidden=
"true"
/>
}
</
div
>
</
components
.
Option
>
);
};
export
default
Option
;
public/app/core/components/Picker/DescriptionPicker.tsx
deleted
100644 → 0
View file @
b9a05a85
import
React
,
{
Component
}
from
'react'
;
import
Select
from
'react-select'
;
import
DescriptionOption
from
'./DescriptionOption'
;
import
IndicatorsContainer
from
'./IndicatorsContainer'
;
import
ResetStyles
from
'./ResetStyles'
;
import
NoOptionsMessage
from
'./NoOptionsMessage'
;
export
interface
OptionWithDescription
{
value
:
any
;
label
:
string
;
description
:
string
;
}
export
interface
Props
{
optionsWithDesc
:
OptionWithDescription
[];
onSelected
:
(
permission
)
=>
void
;
disabled
:
boolean
;
className
?:
string
;
value
?:
any
;
}
const
getSelectedOption
=
(
optionsWithDesc
,
value
)
=>
optionsWithDesc
.
find
(
option
=>
option
.
value
===
value
);
class
DescriptionPicker
extends
Component
<
Props
,
any
>
{
render
()
{
const
{
optionsWithDesc
,
onSelected
,
disabled
,
className
,
value
}
=
this
.
props
;
const
selectedOption
=
getSelectedOption
(
optionsWithDesc
,
value
);
return
(
<
div
className=
"permissions-picker"
>
<
Select
placeholder=
"Choose"
classNamePrefix=
{
`gf-form-select-box`
}
className=
{
`width-7 gf-form-input gf-form-input--form-dropdown ${className || ''}`
}
options=
{
optionsWithDesc
}
components=
{
{
Option
:
DescriptionOption
,
IndicatorsContainer
,
NoOptionsMessage
,
}
}
styles=
{
ResetStyles
}
isDisabled=
{
disabled
}
onChange=
{
onSelected
}
getOptionValue=
{
i
=>
i
.
value
}
getOptionLabel=
{
i
=>
i
.
label
}
value=
{
selectedOption
}
/>
</
div
>
);
}
}
export
default
DescriptionPicker
;
public/app/core/components/Picker/Select.tsx
deleted
100644 → 0
View file @
b9a05a85
// import React, { PureComponent } from 'react';
// import Select as ReactSelect from 'react-select';
// import DescriptionOption from './DescriptionOption';
// import IndicatorsContainer from './IndicatorsContainer';
// import ResetStyles from './ResetStyles';
//
// export interface OptionType {
// label: string;
// value: string;
// }
//
// interface Props {
// defaultValue?: any;
// getOptionLabel: (item: T) => string;
// getOptionValue: (item: T) => string;
// onChange: (item: T) => {} | void;
// options: T[];
// placeholder?: string;
// width?: number;
// value: T;
// className?: string;
// }
//
// export class Select<T> extends PureComponent<Props<T>> {
// static defaultProps = {
// width: null,
// className: '',
// }
//
// render() {
// const { defaultValue, getOptionLabel, getOptionValue, onSelected, options, placeholder, width, value, className } = this.props;
// let widthClass = '';
// if (width) {
// widthClass = 'width-'+width;
// }
//
// return (
// <ReactSelect
// classNamePrefix="gf-form-select-box"
// className={`gf-form-input gf-form-input--form-dropdown ${widthClass} ${className}`}
// components={{
// Option: DescriptionOption,
// IndicatorsContainer,
// }}
// defaultValue={defaultValue}
// value={value}
// getOptionLabel={getOptionLabel}
// getOptionValue={getOptionValue}
// menuShouldScrollIntoView={false}
// isSearchable={false}
// onChange={onSelected}
// options={options}
// placeholder={placeholder || 'Choose'}
// styles={ResetStyles}
// />
// );
// }
// }
//
// export default Select;
public/app/core/components/Picker/SimplePicker.tsx
deleted
100644 → 0
View file @
b9a05a85
import
React
,
{
SFC
}
from
'react'
;
import
Select
from
'react-select'
;
import
DescriptionOption
from
'./DescriptionOption'
;
import
IndicatorsContainer
from
'./IndicatorsContainer'
;
import
ResetStyles
from
'./ResetStyles'
;
interface
Props
{
className
?:
string
;
defaultValue
?:
any
;
getOptionLabel
:
(
item
:
any
)
=>
string
;
getOptionValue
:
(
item
:
any
)
=>
string
;
onSelected
:
(
item
:
any
)
=>
{}
|
void
;
options
:
any
[];
placeholder
?:
string
;
width
?:
number
;
value
:
any
;
}
const
SimplePicker
:
SFC
<
Props
>
=
({
className
,
defaultValue
,
getOptionLabel
,
getOptionValue
,
onSelected
,
options
,
placeholder
,
width
,
value
,
})
=>
{
return
(
<
Select
classNamePrefix=
"gf-form-select-box"
className=
{
`${width ? 'width-' + width : ''} gf-form-input gf-form-input--form-dropdown ${className || ''}`
}
components=
{
{
Option
:
DescriptionOption
,
IndicatorsContainer
,
}
}
defaultValue=
{
defaultValue
}
value=
{
value
}
getOptionLabel=
{
getOptionLabel
}
getOptionValue=
{
getOptionValue
}
menuShouldScrollIntoView=
{
false
}
isSearchable=
{
false
}
onChange=
{
onSelected
}
options=
{
options
}
placeholder=
{
placeholder
||
'Choose'
}
styles=
{
ResetStyles
}
/>
);
};
export
default
SimplePicker
;
public/app/core/components/Picker/Unit/UnitOption.tsx
deleted
100644 → 0
View file @
b9a05a85
import
React
,
{
SFC
}
from
'react'
;
import
{
components
}
from
'react-select'
;
import
{
OptionProps
}
from
'react-select/lib/components/Option'
;
interface
ExtendedOptionProps
extends
OptionProps
<
any
>
{
data
:
any
;
}
const
UnitOption
:
SFC
<
ExtendedOptionProps
>
=
props
=>
{
const
{
children
,
isSelected
,
className
}
=
props
;
return
(
<
components
.
Option
{
...
props
}
>
<
div
className=
{
`unit-picker-option__button btn btn-link ${className}`
}
>
{
isSelected
&&
<
i
className=
"fa fa-check pull-right"
aria
-
hidden=
"true"
/>
}
<
div
className=
"gf-form"
>
{
children
}
</
div
>
</
div
>
</
components
.
Option
>
);
};
export
default
UnitOption
;
public/app/
features/dashboard/dashgrid
/DataSourcePicker.tsx
→
public/app/
core/components/Select
/DataSourcePicker.tsx
View file @
cf1cd4d6
...
@@ -3,16 +3,13 @@ import React, { PureComponent } from 'react';
...
@@ -3,16 +3,13 @@ import React, { PureComponent } from 'react';
import
_
from
'lodash'
;
import
_
from
'lodash'
;
// Components
// Components
import
ResetStyles
from
'app/core/components/Picker/ResetStyles'
;
import
Select
from
'./Select'
;
import
{
Option
,
SingleValue
}
from
'app/core/components/Picker/PickerOption'
;
import
IndicatorsContainer
from
'app/core/components/Picker/IndicatorsContainer'
;
import
Select
from
'react-select'
;
// Types
// Types
import
{
DataSourceSelectItem
}
from
'app/types'
;
import
{
DataSourceSelectItem
}
from
'app/types'
;
export
interface
Props
{
export
interface
Props
{
onChange
DataSource
:
(
ds
:
DataSourceSelectItem
)
=>
void
;
onChange
:
(
ds
:
DataSourceSelectItem
)
=>
void
;
datasources
:
DataSourceSelectItem
[];
datasources
:
DataSourceSelectItem
[];
current
:
DataSourceSelectItem
;
current
:
DataSourceSelectItem
;
onBlur
?:
()
=>
void
;
onBlur
?:
()
=>
void
;
...
@@ -32,7 +29,7 @@ export class DataSourcePicker extends PureComponent<Props> {
...
@@ -32,7 +29,7 @@ export class DataSourcePicker extends PureComponent<Props> {
onChange
=
item
=>
{
onChange
=
item
=>
{
const
ds
=
this
.
props
.
datasources
.
find
(
ds
=>
ds
.
name
===
item
.
value
);
const
ds
=
this
.
props
.
datasources
.
find
(
ds
=>
ds
.
name
===
item
.
value
);
this
.
props
.
onChange
DataSource
(
ds
);
this
.
props
.
onChange
(
ds
);
};
};
render
()
{
render
()
{
...
@@ -53,27 +50,19 @@ export class DataSourcePicker extends PureComponent<Props> {
...
@@ -53,27 +50,19 @@ export class DataSourcePicker extends PureComponent<Props> {
return
(
return
(
<
div
className=
"gf-form-inline"
>
<
div
className=
"gf-form-inline"
>
<
Select
<
Select
className
Prefix=
{
`gf-form-select-box`
}
className
=
"ds-picker"
isMulti=
{
false
}
isMulti=
{
false
}
menuShouldScrollIntoView=
{
false
}
isClearable=
{
false
}
isClearable=
{
false
}
className=
"gf-form-input gf-form-input--form-dropdown ds-picker"
backspaceRemovesValue=
{
false
}
onChange=
{
item
=>
this
.
onChange
(
item
)
}
onChange=
{
this
.
onChange
}
options=
{
options
}
options=
{
options
}
styles=
{
ResetStyles
}
autoFocus=
{
autoFocus
}
autoFocus=
{
autoFocus
}
onBlur=
{
onBlur
}
onBlur=
{
onBlur
}
openMenuOnFocus=
{
true
}
openMenuOnFocus=
{
true
}
maxMenuHeight=
{
500
}
maxMenuHeight=
{
500
}
placeholder=
"Select datasource"
placeholder=
"Select datasource"
loadingMessage=
{
()
=>
'Loading datasources...'
}
noOptionsMessage=
{
()
=>
'No datasources found'
}
noOptionsMessage=
{
()
=>
'No datasources found'
}
value=
{
value
}
value=
{
value
}
components=
{
{
Option
,
SingleValue
,
IndicatorsContainer
,
}
}
/>
/>
</
div
>
</
div
>
);
);
...
...
public/app/core/components/
Picker
/IndicatorsContainer.tsx
→
public/app/core/components/
Select
/IndicatorsContainer.tsx
View file @
cf1cd4d6
File moved
public/app/core/components/
Picker
/NoOptionsMessage.tsx
→
public/app/core/components/
Select
/NoOptionsMessage.tsx
View file @
cf1cd4d6
import
React
from
'react'
;
import
React
from
'react'
;
import
{
components
}
from
'react-select'
;
import
{
components
}
from
'react-select'
;
import
{
OptionProps
}
from
'react-select/lib/components/Option'
;
import
{
OptionProps
}
from
'react-select/lib/components/Option'
;
...
@@ -6,13 +6,15 @@ export interface Props {
...
@@ -6,13 +6,15 @@ export interface Props {
children
:
Element
;
children
:
Element
;
}
}
export
const
PickerOption
=
(
props
:
OptionProps
<
any
>
)
=>
{
export
const
NoOptionsMessage
=
(
props
:
OptionProps
<
any
>
)
=>
{
const
{
children
,
className
}
=
props
;
const
{
children
}
=
props
;
return
(
return
(
<
components
.
Option
{
...
props
}
>
<
components
.
Option
{
...
props
}
>
<
div
className=
{
`description-picker-option__button btn btn-link ${className}`
}
>
{
children
}
</
div
>
<
div
className=
"gf-form-select-box__desc-option"
>
<
div
className=
"gf-form-select-box__desc-option__body"
>
{
children
}
</
div
>
</
div
>
</
components
.
Option
>
</
components
.
Option
>
);
);
};
};
export
default
PickerOption
;
export
default
NoOptionsMessage
;
public/app/core/components/
Picker/Unit/Unit
Group.tsx
→
public/app/core/components/
Select/Option
Group.tsx
View file @
cf1cd4d6
...
@@ -9,7 +9,7 @@ interface State {
...
@@ -9,7 +9,7 @@ interface State {
expanded
:
boolean
;
expanded
:
boolean
;
}
}
export
default
class
Unit
Group
extends
PureComponent
<
ExtendedGroupProps
,
State
>
{
export
default
class
Option
Group
extends
PureComponent
<
ExtendedGroupProps
,
State
>
{
state
=
{
state
=
{
expanded
:
false
,
expanded
:
false
,
};
};
...
@@ -41,10 +41,10 @@ export default class UnitGroup extends PureComponent<ExtendedGroupProps, State>
...
@@ -41,10 +41,10 @@ export default class UnitGroup extends PureComponent<ExtendedGroupProps, State>
const
{
expanded
}
=
this
.
state
;
const
{
expanded
}
=
this
.
state
;
return
(
return
(
<
div
className=
"
width-21 unit-picker-group"
style=
{
{
marginBottom
:
'5px'
}
}
>
<
div
className=
"
gf-form-select-box__option-group"
>
<
div
className=
"
unit-picker-group-item
"
onClick=
{
this
.
onToggleChildren
}
>
<
div
className=
"
gf-form-select-box__option-group__header
"
onClick=
{
this
.
onToggleChildren
}
>
<
span
style=
{
{
textTransform
:
'capitalize'
}
}
>
{
label
}
</
span
>
<
span
className=
"flex-grow"
>
{
label
}
</
span
>
<
i
className=
{
`fa ${expanded ? 'fa-
minus' : 'fa-plus
'}`
}
/>
{
' '
}
<
i
className=
{
`fa ${expanded ? 'fa-
caret-left' : 'fa-caret-down
'}`
}
/>
{
' '
}
</
div
>
</
div
>
{
expanded
&&
children
}
{
expanded
&&
children
}
</
div
>
</
div
>
...
...
public/app/core/components/
Picker
/PickerOption.test.tsx
→
public/app/core/components/
Select
/PickerOption.test.tsx
View file @
cf1cd4d6
File moved
public/app/core/components/
Picker
/PickerOption.tsx
→
public/app/core/components/
Select
/PickerOption.tsx
View file @
cf1cd4d6
File moved
public/app/core/components/
Picker
/ResetStyles.tsx
→
public/app/core/components/
Select
/ResetStyles.tsx
View file @
cf1cd4d6
File moved
public/app/core/components/Select/Select.tsx
0 → 100644
View file @
cf1cd4d6
// Libraries
import
classNames
from
'classnames'
;
import
React
,
{
PureComponent
}
from
'react'
;
import
{
default
as
ReactSelect
}
from
'react-select'
;
import
{
default
as
ReactAsyncSelect
}
from
'react-select/lib/Async'
;
import
{
components
}
from
'react-select'
;
// Components
import
{
Option
,
SingleValue
}
from
'./PickerOption'
;
import
OptionGroup
from
'./OptionGroup'
;
import
IndicatorsContainer
from
'./IndicatorsContainer'
;
import
NoOptionsMessage
from
'./NoOptionsMessage'
;
import
ResetStyles
from
'./ResetStyles'
;
import
CustomScrollbar
from
'../CustomScrollbar/CustomScrollbar'
;
export
interface
SelectOptionItem
{
label
?:
string
;
value
?:
any
;
imgUrl
?:
string
;
description
?:
string
;
[
key
:
string
]:
any
;
}
interface
CommonProps
{
defaultValue
?:
any
;
getOptionLabel
?:
(
item
:
SelectOptionItem
)
=>
string
;
getOptionValue
?:
(
item
:
SelectOptionItem
)
=>
string
;
onChange
:
(
item
:
SelectOptionItem
)
=>
{}
|
void
;
placeholder
?:
string
;
width
?:
number
;
value
?:
SelectOptionItem
;
className
?:
string
;
isDisabled
?:
boolean
;
isSearchable
?:
boolean
;
isClearable
?:
boolean
;
autoFocus
?:
boolean
;
openMenuOnFocus
?:
boolean
;
onBlur
?:
()
=>
void
;
maxMenuHeight
?:
number
;
isLoading
:
boolean
;
noOptionsMessage
?:
()
=>
string
;
isMulti
?:
boolean
;
backspaceRemovesValue
:
boolean
;
}
interface
SelectProps
{
options
:
SelectOptionItem
[];
}
interface
AsyncProps
{
defaultOptions
:
boolean
;
loadOptions
:
(
query
:
string
)
=>
Promise
<
SelectOptionItem
[]
>
;
loadingMessage
?:
()
=>
string
;
}
export
const
MenuList
=
props
=>
{
return
(
<
components
.
MenuList
{
...
props
}
>
<
CustomScrollbar
autoHide=
{
false
}
>
{
props
.
children
}
</
CustomScrollbar
>
</
components
.
MenuList
>
);
};
export
class
Select
extends
PureComponent
<
CommonProps
&
SelectProps
>
{
static
defaultProps
=
{
width
:
null
,
className
:
''
,
isDisabled
:
false
,
isSearchable
:
true
,
isClearable
:
false
,
isMulti
:
false
,
openMenuOnFocus
:
false
,
autoFocus
:
false
,
isLoading
:
false
,
backspaceRemovesValue
:
true
,
maxMenuHeight
:
300
,
};
render
()
{
const
{
defaultValue
,
getOptionLabel
,
getOptionValue
,
onChange
,
options
,
placeholder
,
width
,
value
,
className
,
isDisabled
,
isLoading
,
isSearchable
,
isClearable
,
backspaceRemovesValue
,
isMulti
,
autoFocus
,
openMenuOnFocus
,
onBlur
,
maxMenuHeight
,
noOptionsMessage
,
}
=
this
.
props
;
let
widthClass
=
''
;
if
(
width
)
{
widthClass
=
'width-'
+
width
;
}
const
selectClassNames
=
classNames
(
'gf-form-input'
,
'gf-form-input--form-dropdown'
,
widthClass
,
className
);
return
(
<
ReactSelect
classNamePrefix=
"gf-form-select-box"
className=
{
selectClassNames
}
components=
{
{
Option
,
SingleValue
,
IndicatorsContainer
,
MenuList
,
Group
:
OptionGroup
,
}
}
defaultValue=
{
defaultValue
}
value=
{
value
}
getOptionLabel=
{
getOptionLabel
}
getOptionValue=
{
getOptionValue
}
menuShouldScrollIntoView=
{
false
}
isSearchable=
{
isSearchable
}
onChange=
{
onChange
}
options=
{
options
}
placeholder=
{
placeholder
||
'Choose'
}
styles=
{
ResetStyles
}
isDisabled=
{
isDisabled
}
isLoading=
{
isLoading
}
isClearable=
{
isClearable
}
autoFocus=
{
autoFocus
}
onBlur=
{
onBlur
}
openMenuOnFocus=
{
openMenuOnFocus
}
maxMenuHeight=
{
maxMenuHeight
}
noOptionsMessage=
{
noOptionsMessage
}
isMulti=
{
isMulti
}
backspaceRemovesValue=
{
backspaceRemovesValue
}
/>
);
}
}
export
class
AsyncSelect
extends
PureComponent
<
CommonProps
&
AsyncProps
>
{
static
defaultProps
=
{
width
:
null
,
className
:
''
,
components
:
{},
loadingMessage
:
()
=>
'Loading...'
,
isDisabled
:
false
,
isClearable
:
false
,
isMulti
:
false
,
isSearchable
:
true
,
backspaceRemovesValue
:
true
,
autoFocus
:
false
,
openMenuOnFocus
:
false
,
maxMenuHeight
:
300
,
};
render
()
{
const
{
defaultValue
,
getOptionLabel
,
getOptionValue
,
onChange
,
placeholder
,
width
,
value
,
className
,
loadOptions
,
defaultOptions
,
isLoading
,
loadingMessage
,
noOptionsMessage
,
isDisabled
,
isSearchable
,
isClearable
,
backspaceRemovesValue
,
autoFocus
,
onBlur
,
openMenuOnFocus
,
maxMenuHeight
,
isMulti
,
}
=
this
.
props
;
let
widthClass
=
''
;
if
(
width
)
{
widthClass
=
'width-'
+
width
;
}
const
selectClassNames
=
classNames
(
'gf-form-input'
,
'gf-form-input--form-dropdown'
,
widthClass
,
className
);
return
(
<
ReactAsyncSelect
classNamePrefix=
"gf-form-select-box"
className=
{
selectClassNames
}
components=
{
{
Option
,
SingleValue
,
IndicatorsContainer
,
NoOptionsMessage
,
}
}
defaultValue=
{
defaultValue
}
value=
{
value
}
getOptionLabel=
{
getOptionLabel
}
getOptionValue=
{
getOptionValue
}
menuShouldScrollIntoView=
{
false
}
onChange=
{
onChange
}
loadOptions=
{
loadOptions
}
isLoading=
{
isLoading
}
defaultOptions=
{
defaultOptions
}
placeholder=
{
placeholder
||
'Choose'
}
styles=
{
ResetStyles
}
loadingMessage=
{
loadingMessage
}
noOptionsMessage=
{
noOptionsMessage
}
isDisabled=
{
isDisabled
}
isSearchable=
{
isSearchable
}
isClearable=
{
isClearable
}
autoFocus=
{
autoFocus
}
onBlur=
{
onBlur
}
openMenuOnFocus=
{
openMenuOnFocus
}
maxMenuHeight=
{
maxMenuHeight
}
isMulti=
{
isMulti
}
backspaceRemovesValue=
{
backspaceRemovesValue
}
/>
);
}
}
export
default
Select
;
public/app/core/components/
Picker
/TeamPicker.test.tsx
→
public/app/core/components/
Select
/TeamPicker.test.tsx
View file @
cf1cd4d6
File moved
public/app/core/components/
Picker
/TeamPicker.tsx
→
public/app/core/components/
Select
/TeamPicker.tsx
View file @
cf1cd4d6
import
React
,
{
Component
}
from
'react'
;
import
React
,
{
Component
}
from
'react'
;
import
AsyncSelect
from
'react-select/lib/Async'
;
import
{
AsyncSelect
}
from
'./Select'
;
import
PickerOption
from
'./PickerOption'
;
import
{
debounce
}
from
'lodash'
;
import
{
debounce
}
from
'lodash'
;
import
{
getBackendSrv
}
from
'app/core/services/backend_srv'
;
import
{
getBackendSrv
}
from
'app/core/services/backend_srv'
;
import
ResetStyles
from
'./ResetStyles'
;
import
IndicatorsContainer
from
'./IndicatorsContainer'
;
import
NoOptionsMessage
from
'./NoOptionsMessage'
;
export
interface
Team
{
export
interface
Team
{
id
:
number
;
id
:
number
;
...
@@ -45,6 +41,7 @@ export class TeamPicker extends Component<Props, State> {
...
@@ -45,6 +41,7 @@ export class TeamPicker extends Component<Props, State> {
const
teams
=
result
.
teams
.
map
(
team
=>
{
const
teams
=
result
.
teams
.
map
(
team
=>
{
return
{
return
{
id
:
team
.
id
,
id
:
team
.
id
,
value
:
team
.
id
,
label
:
team
.
name
,
label
:
team
.
name
,
name
:
team
.
name
,
name
:
team
.
name
,
imgUrl
:
team
.
avatarUrl
,
imgUrl
:
team
.
avatarUrl
,
...
@@ -62,24 +59,13 @@ export class TeamPicker extends Component<Props, State> {
...
@@ -62,24 +59,13 @@ export class TeamPicker extends Component<Props, State> {
return
(
return
(
<
div
className=
"user-picker"
>
<
div
className=
"user-picker"
>
<
AsyncSelect
<
AsyncSelect
classNamePrefix=
{
`gf-form-select-box`
}
isMulti=
{
false
}
isLoading=
{
isLoading
}
isLoading=
{
isLoading
}
defaultOptions=
{
true
}
defaultOptions=
{
true
}
loadOptions=
{
this
.
debouncedSearch
}
loadOptions=
{
this
.
debouncedSearch
}
onChange=
{
onSelected
}
onChange=
{
onSelected
}
className=
{
`gf-form-input gf-form-input--form-dropdown ${className || ''}`
}
className=
{
className
}
styles=
{
ResetStyles
}
components=
{
{
Option
:
PickerOption
,
IndicatorsContainer
,
NoOptionsMessage
,
}
}
placeholder=
"Select a team"
placeholder=
"Select a team"
loadingMessage=
{
()
=>
'Loading...'
}
noOptionsMessage=
{
()
=>
'No teams found'
}
noOptionsMessage=
{
()
=>
'No teams found'
}
getOptionValue=
{
i
=>
i
.
id
}
getOptionLabel=
{
i
=>
i
.
label
}
/>
/>
</
div
>
</
div
>
);
);
...
...
public/app/core/components/
Picker/Uni
t/UnitPicker.tsx
→
public/app/core/components/
Selec
t/UnitPicker.tsx
View file @
cf1cd4d6
import
React
,
{
PureComponent
}
from
'react'
;
import
React
,
{
PureComponent
}
from
'react'
;
import
Select
from
'react-select'
;
import
Select
from
'./Select'
;
import
UnitGroup
from
'./UnitGroup'
;
import
kbn
from
'app/core/utils/kbn'
;
import
UnitOption
from
'./UnitOption'
;
import
ResetStyles
from
'../ResetStyles'
;
import
kbn
from
'../../../utils/kbn'
;
interface
Props
{
interface
Props
{
on
Selected
:
(
item
:
any
)
=>
{}
|
void
;
on
Change
:
(
item
:
any
)
=>
{}
|
void
;
defaultValue
?:
string
;
defaultValue
?:
string
;
width
?:
number
;
width
?:
number
;
}
}
...
@@ -17,7 +14,7 @@ export default class UnitPicker extends PureComponent<Props> {
...
@@ -17,7 +14,7 @@ export default class UnitPicker extends PureComponent<Props> {
};
};
render
()
{
render
()
{
const
{
defaultValue
,
on
Selected
,
width
}
=
this
.
props
;
const
{
defaultValue
,
on
Change
,
width
}
=
this
.
props
;
const
unitGroups
=
kbn
.
getUnitFormats
();
const
unitGroups
=
kbn
.
getUnitFormats
();
...
@@ -36,45 +33,18 @@ export default class UnitPicker extends PureComponent<Props> {
...
@@ -36,45 +33,18 @@ export default class UnitPicker extends PureComponent<Props> {
};
};
});
});
// const styles = {
// ...ResetStyles,
// menu: () => ({
// maxHeight: '75%',
// overflow: 'scroll',
// }),
// menuList: () =>
// ({
// overflowY: 'auto',
// position: 'relative',
// } as React.CSSProperties),
// valueContainer: () =>
// ({
// overflow: 'hidden',
// textOverflow: 'ellipsis',
// maxWidth: '90px',
// whiteSpace: 'nowrap',
// } as React.CSSProperties),
// };
const
value
=
groupOptions
.
map
(
group
=>
{
const
value
=
groupOptions
.
map
(
group
=>
{
return
group
.
options
.
find
(
option
=>
option
.
value
===
defaultValue
);
return
group
.
options
.
find
(
option
=>
option
.
value
===
defaultValue
);
});
});
return
(
return
(
<
Select
<
Select
classNamePrefix=
"gf-form-select-box"
width=
{
width
}
className=
{
`width-${width} gf-form-input gf-form-input--form-dropdown`
}
defaultValue=
{
value
}
defaultValue=
{
value
}
isSearchable=
{
true
}
isSearchable=
{
true
}
menuShouldScrollIntoView=
{
false
}
options=
{
groupOptions
}
options=
{
groupOptions
}
placeholder=
"Choose"
placeholder=
"Choose"
onChange=
{
onSelected
}
onChange=
{
onChange
}
components=
{
{
Group
:
UnitGroup
,
Option
:
UnitOption
,
}
}
styles=
{
ResetStyles
}
/>
/>
);
);
}
}
...
...
public/app/core/components/
Picker
/UserPicker.test.tsx
→
public/app/core/components/
Select
/UserPicker.test.tsx
View file @
cf1cd4d6
File moved
public/app/core/components/
Picker
/UserPicker.tsx
→
public/app/core/components/
Select
/UserPicker.tsx
View file @
cf1cd4d6
// Libraries
import
React
,
{
Component
}
from
'react'
;
import
React
,
{
Component
}
from
'react'
;
import
AsyncSelect
from
'react-select/lib/Async'
;
import
PickerOption
from
'./PickerOption'
;
// Components
import
{
AsyncSelect
}
from
'./Select'
;
// Utils & Services
import
{
debounce
}
from
'lodash'
;
import
{
debounce
}
from
'lodash'
;
import
{
getBackendSrv
}
from
'app/core/services/backend_srv'
;
import
{
getBackendSrv
}
from
'app/core/services/backend_srv'
;
// Types
import
{
User
}
from
'app/types'
;
import
{
User
}
from
'app/types'
;
import
ResetStyles
from
'./ResetStyles'
;
import
IndicatorsContainer
from
'./IndicatorsContainer'
;
import
NoOptionsMessage
from
'./NoOptionsMessage'
;
export
interface
Props
{
export
interface
Props
{
onSelected
:
(
user
:
User
)
=>
void
;
onSelected
:
(
user
:
User
)
=>
void
;
...
@@ -40,6 +43,7 @@ export class UserPicker extends Component<Props, State> {
...
@@ -40,6 +43,7 @@ export class UserPicker extends Component<Props, State> {
.
then
(
result
=>
{
.
then
(
result
=>
{
return
result
.
map
(
user
=>
({
return
result
.
map
(
user
=>
({
id
:
user
.
userId
,
id
:
user
.
userId
,
value
:
user
.
userId
,
label
:
user
.
login
===
user
.
email
?
user
.
login
:
`
${
user
.
login
}
-
${
user
.
email
}
`
,
label
:
user
.
login
===
user
.
email
?
user
.
login
:
`
${
user
.
login
}
-
${
user
.
email
}
`
,
imgUrl
:
user
.
avatarUrl
,
imgUrl
:
user
.
avatarUrl
,
login
:
user
.
login
,
login
:
user
.
login
,
...
@@ -57,24 +61,13 @@ export class UserPicker extends Component<Props, State> {
...
@@ -57,24 +61,13 @@ export class UserPicker extends Component<Props, State> {
return
(
return
(
<
div
className=
"user-picker"
>
<
div
className=
"user-picker"
>
<
AsyncSelect
<
AsyncSelect
classNamePrefix=
{
`gf-form-select-box`
}
className=
{
className
}
isMulti=
{
false
}
isLoading=
{
isLoading
}
isLoading=
{
isLoading
}
defaultOptions=
{
true
}
defaultOptions=
{
true
}
loadOptions=
{
this
.
debouncedSearch
}
loadOptions=
{
this
.
debouncedSearch
}
onChange=
{
onSelected
}
onChange=
{
onSelected
}
className=
{
`gf-form-input gf-form-input--form-dropdown ${className || ''}`
}
styles=
{
ResetStyles
}
components=
{
{
Option
:
PickerOption
,
IndicatorsContainer
,
NoOptionsMessage
,
}
}
placeholder=
"Select user"
placeholder=
"Select user"
loadingMessage=
{
()
=>
'Loading...'
}
noOptionsMessage=
{
()
=>
'No users found'
}
noOptionsMessage=
{
()
=>
'No users found'
}
getOptionValue=
{
i
=>
i
.
id
}
getOptionLabel=
{
i
=>
i
.
label
}
/>
/>
</
div
>
</
div
>
);
);
...
...
public/app/core/components/
Picker
/__snapshots__/PickerOption.test.tsx.snap
→
public/app/core/components/
Select
/__snapshots__/PickerOption.test.tsx.snap
View file @
cf1cd4d6
File moved
public/app/core/components/
Picker
/__snapshots__/TeamPicker.test.tsx.snap
→
public/app/core/components/
Select
/__snapshots__/TeamPicker.test.tsx.snap
View file @
cf1cd4d6
File moved
public/app/core/components/
Picker
/__snapshots__/UserPicker.test.tsx.snap
→
public/app/core/components/
Select
/__snapshots__/UserPicker.test.tsx.snap
View file @
cf1cd4d6
File moved
public/app/core/components/SharedPreferences/SharedPreferences.tsx
View file @
cf1cd4d6
import
React
,
{
PureComponent
}
from
'react'
;
import
React
,
{
PureComponent
}
from
'react'
;
import
{
Label
}
from
'app/core/components/Label/Label'
;
import
{
Label
}
from
'app/core/components/Label/Label'
;
import
S
implePicker
from
'app/core/components/Picker/SimplePicker
'
;
import
S
elect
from
'app/core/components/Select/Select
'
;
import
{
getBackendSrv
,
BackendSrv
}
from
'app/core/services/backend_srv'
;
import
{
getBackendSrv
,
BackendSrv
}
from
'app/core/services/backend_srv'
;
import
{
DashboardSearchHit
}
from
'app/types'
;
import
{
DashboardSearchHit
}
from
'app/types'
;
...
@@ -17,12 +17,12 @@ export interface State {
...
@@ -17,12 +17,12 @@ export interface State {
dashboards
:
DashboardSearchHit
[];
dashboards
:
DashboardSearchHit
[];
}
}
const
themes
=
[{
value
:
''
,
text
:
'Default'
},
{
value
:
'dark'
,
text
:
'Dark'
},
{
value
:
'light'
,
text
:
'Light'
}];
const
themes
=
[{
value
:
''
,
label
:
'Default'
},
{
value
:
'dark'
,
label
:
'Dark'
},
{
value
:
'light'
,
label
:
'Light'
}];
const
timezones
=
[
const
timezones
=
[
{
value
:
''
,
text
:
'Default'
},
{
value
:
''
,
label
:
'Default'
},
{
value
:
'browser'
,
text
:
'Local browser time'
},
{
value
:
'browser'
,
label
:
'Local browser time'
},
{
value
:
'utc'
,
text
:
'UTC'
},
{
value
:
'utc'
,
label
:
'UTC'
},
];
];
export
class
SharedPreferences
extends
PureComponent
<
Props
,
State
>
{
export
class
SharedPreferences
extends
PureComponent
<
Props
,
State
>
{
...
@@ -91,12 +91,11 @@ export class SharedPreferences extends PureComponent<Props, State> {
...
@@ -91,12 +91,11 @@ export class SharedPreferences extends PureComponent<Props, State> {
<
h3
className=
"page-heading"
>
Preferences
</
h3
>
<
h3
className=
"page-heading"
>
Preferences
</
h3
>
<
div
className=
"gf-form"
>
<
div
className=
"gf-form"
>
<
span
className=
"gf-form-label width-11"
>
UI Theme
</
span
>
<
span
className=
"gf-form-label width-11"
>
UI Theme
</
span
>
<
SimplePicker
<
Select
isSearchable=
{
false
}
value=
{
themes
.
find
(
item
=>
item
.
value
===
theme
)
}
value=
{
themes
.
find
(
item
=>
item
.
value
===
theme
)
}
options=
{
themes
}
options=
{
themes
}
getOptionValue=
{
i
=>
i
.
value
}
onChange=
{
theme
=>
this
.
onThemeChanged
(
theme
.
value
)
}
getOptionLabel=
{
i
=>
i
.
text
}
onSelected=
{
theme
=>
this
.
onThemeChanged
(
theme
.
value
)
}
width=
{
20
}
width=
{
20
}
/>
/>
</
div
>
</
div
>
...
@@ -107,11 +106,11 @@ export class SharedPreferences extends PureComponent<Props, State> {
...
@@ -107,11 +106,11 @@ export class SharedPreferences extends PureComponent<Props, State> {
>
>
Home Dashboard
Home Dashboard
</
Label
>
</
Label
>
<
S
implePicker
<
S
elect
value=
{
dashboards
.
find
(
dashboard
=>
dashboard
.
id
===
homeDashboardId
)
}
value=
{
dashboards
.
find
(
dashboard
=>
dashboard
.
id
===
homeDashboardId
)
}
getOptionValue=
{
i
=>
i
.
id
}
getOptionValue=
{
i
=>
i
.
id
}
getOptionLabel=
{
i
=>
i
.
title
}
getOptionLabel=
{
i
=>
i
.
title
}
on
Selected
=
{
(
dashboard
:
DashboardSearchHit
)
=>
this
.
onHomeDashboardChanged
(
dashboard
.
id
)
}
on
Change
=
{
(
dashboard
:
DashboardSearchHit
)
=>
this
.
onHomeDashboardChanged
(
dashboard
.
id
)
}
options=
{
dashboards
}
options=
{
dashboards
}
placeholder=
"Chose default dashboard"
placeholder=
"Chose default dashboard"
width=
{
20
}
width=
{
20
}
...
@@ -119,11 +118,10 @@ export class SharedPreferences extends PureComponent<Props, State> {
...
@@ -119,11 +118,10 @@ export class SharedPreferences extends PureComponent<Props, State> {
</
div
>
</
div
>
<
div
className=
"gf-form"
>
<
div
className=
"gf-form"
>
<
label
className=
"gf-form-label width-11"
>
Timezone
</
label
>
<
label
className=
"gf-form-label width-11"
>
Timezone
</
label
>
<
SimplePicker
<
Select
isSearchable=
{
false
}
value=
{
timezones
.
find
(
item
=>
item
.
value
===
timezone
)
}
value=
{
timezones
.
find
(
item
=>
item
.
value
===
timezone
)
}
getOptionValue=
{
i
=>
i
.
value
}
onChange=
{
timezone
=>
this
.
onTimeZoneChanged
(
timezone
.
value
)
}
getOptionLabel=
{
i
=>
i
.
text
}
onSelected=
{
timezone
=>
this
.
onTimeZoneChanged
(
timezone
.
value
)
}
options=
{
timezones
}
options=
{
timezones
}
width=
{
20
}
width=
{
20
}
/>
/>
...
...
public/app/core/components/TagFilter/TagFilter.tsx
View file @
cf1cd4d6
...
@@ -2,10 +2,10 @@ import React from 'react';
...
@@ -2,10 +2,10 @@ import React from 'react';
import
AsyncSelect
from
'react-select/lib/Async'
;
import
AsyncSelect
from
'react-select/lib/Async'
;
import
{
TagOption
}
from
'./TagOption'
;
import
{
TagOption
}
from
'./TagOption'
;
import
{
TagBadge
}
from
'./TagBadge'
;
import
{
TagBadge
}
from
'./TagBadge'
;
import
IndicatorsContainer
from
'app/core/components/
Picker
/IndicatorsContainer'
;
import
IndicatorsContainer
from
'app/core/components/
Select
/IndicatorsContainer'
;
import
NoOptionsMessage
from
'app/core/components/
Picker
/NoOptionsMessage'
;
import
NoOptionsMessage
from
'app/core/components/
Select
/NoOptionsMessage'
;
import
{
components
}
from
'react-select'
;
import
{
components
}
from
'react-select'
;
import
ResetStyles
from
'app/core/components/
Picker
/ResetStyles'
;
import
ResetStyles
from
'app/core/components/
Select
/ResetStyles'
;
export
interface
Props
{
export
interface
Props
{
tags
:
string
[];
tags
:
string
[];
...
...
public/app/core/components/code_editor/code_editor.ts
View file @
cf1cd4d6
...
@@ -84,7 +84,7 @@ function link(scope, elem, attrs) {
...
@@ -84,7 +84,7 @@ function link(scope, elem, attrs) {
// disable depreacation warning
// disable depreacation warning
codeEditor
.
$blockScrolling
=
Infinity
;
codeEditor
.
$blockScrolling
=
Infinity
;
// Padding hacks
// Padding hacks
(
codeEditor
.
renderer
as
any
).
setScrollMargin
(
1
5
,
15
);
(
codeEditor
.
renderer
as
any
).
setScrollMargin
(
1
0
,
10
);
codeEditor
.
renderer
.
setPadding
(
10
);
codeEditor
.
renderer
.
setPadding
(
10
);
setThemeMode
();
setThemeMode
();
...
...
public/app/features/dashboard/dashgrid/QueriesTab.tsx
View file @
cf1cd4d6
...
@@ -6,7 +6,7 @@ import _ from 'lodash';
...
@@ -6,7 +6,7 @@ import _ from 'lodash';
// Components
// Components
import
'./../../panel/metrics_tab'
;
import
'./../../panel/metrics_tab'
;
import
{
EditorTabBody
}
from
'./EditorTabBody'
;
import
{
EditorTabBody
}
from
'./EditorTabBody'
;
import
{
DataSourcePicker
}
from
'
.
/DataSourcePicker'
;
import
{
DataSourcePicker
}
from
'
app/core/components/Select
/DataSourcePicker'
;
import
{
QueryInspector
}
from
'./QueryInspector'
;
import
{
QueryInspector
}
from
'./QueryInspector'
;
import
{
QueryOptions
}
from
'./QueryOptions'
;
import
{
QueryOptions
}
from
'./QueryOptions'
;
import
{
AngularQueryComponentScope
}
from
'app/features/panel/metrics_tab'
;
import
{
AngularQueryComponentScope
}
from
'app/features/panel/metrics_tab'
;
...
@@ -205,20 +205,14 @@ export class QueriesTab extends PureComponent<Props, State> {
...
@@ -205,20 +205,14 @@ export class QueriesTab extends PureComponent<Props, State> {
renderToolbar
=
()
=>
{
renderToolbar
=
()
=>
{
const
{
currentDS
}
=
this
.
state
;
const
{
currentDS
}
=
this
.
state
;
return
(
return
<
DataSourcePicker
datasources=
{
this
.
datasources
}
onChange=
{
this
.
onChangeDataSource
}
current=
{
currentDS
}
/>;
<
DataSourcePicker
datasources=
{
this
.
datasources
}
onChangeDataSource=
{
this
.
onChangeDataSource
}
current=
{
currentDS
}
/>
);
};
};
renderMixedPicker
=
()
=>
{
renderMixedPicker
=
()
=>
{
return
(
return
(
<
DataSourcePicker
<
DataSourcePicker
datasources=
{
this
.
datasources
}
datasources=
{
this
.
datasources
}
onChange
DataSource
=
{
this
.
onAddMixedQuery
}
onChange=
{
this
.
onAddMixedQuery
}
current=
{
null
}
current=
{
null
}
autoFocus=
{
true
}
autoFocus=
{
true
}
onBlur=
{
this
.
onMixedPickerBlur
}
onBlur=
{
this
.
onMixedPickerBlur
}
...
...
public/app/features/explore/Explore.tsx
View file @
cf1cd4d6
import
React
from
'react'
;
import
React
from
'react'
;
import
{
hot
}
from
'react-hot-loader'
;
import
{
hot
}
from
'react-hot-loader'
;
import
Select
from
'react-select'
;
import
_
from
'lodash'
;
import
_
from
'lodash'
;
import
{
DataSource
}
from
'app/types/datasources'
;
import
{
DataSource
}
from
'app/types/datasources'
;
...
@@ -25,10 +24,7 @@ import {
...
@@ -25,10 +24,7 @@ import {
makeTimeSeriesList
,
makeTimeSeriesList
,
updateHistory
,
updateHistory
,
}
from
'app/core/utils/explore'
;
}
from
'app/core/utils/explore'
;
import
ResetStyles
from
'app/core/components/Picker/ResetStyles'
;
import
{
DataSourcePicker
}
from
'app/core/components/Select/DataSourcePicker'
;
import
PickerOption
from
'app/core/components/Picker/PickerOption'
;
import
IndicatorsContainer
from
'app/core/components/Picker/IndicatorsContainer'
;
import
NoOptionsMessage
from
'app/core/components/Picker/NoOptionsMessage'
;
import
TableModel
from
'app/core/table_model'
;
import
TableModel
from
'app/core/table_model'
;
import
{
DatasourceSrv
}
from
'app/features/plugins/datasource_srv'
;
import
{
DatasourceSrv
}
from
'app/features/plugins/datasource_srv'
;
import
{
Emitter
}
from
'app/core/utils/emitter'
;
import
{
Emitter
}
from
'app/core/utils/emitter'
;
...
@@ -158,10 +154,12 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
...
@@ -158,10 +154,12 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
if
(
!
datasourceSrv
)
{
if
(
!
datasourceSrv
)
{
throw
new
Error
(
'No datasource service passed as props.'
);
throw
new
Error
(
'No datasource service passed as props.'
);
}
}
const
datasources
=
datasourceSrv
.
getExternal
();
const
datasources
=
datasourceSrv
.
getExternal
();
const
exploreDatasources
=
datasources
.
map
(
ds
=>
({
const
exploreDatasources
=
datasources
.
map
(
ds
=>
({
value
:
ds
.
name
,
value
:
ds
.
name
,
label
:
ds
.
name
,
name
:
ds
.
name
,
meta
:
ds
.
meta
,
}));
}));
if
(
datasources
.
length
>
0
)
{
if
(
datasources
.
length
>
0
)
{
...
@@ -885,7 +883,7 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
...
@@ -885,7 +883,7 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
}
=
this
.
state
;
}
=
this
.
state
;
const
graphHeight
=
showingGraph
&&
showingTable
?
'200px'
:
'400px'
;
const
graphHeight
=
showingGraph
&&
showingTable
?
'200px'
:
'400px'
;
const
exploreClass
=
split
?
'explore explore-split'
:
'explore'
;
const
exploreClass
=
split
?
'explore explore-split'
:
'explore'
;
const
selectedDatasource
=
datasource
?
exploreDatasources
.
find
(
d
=>
d
.
label
===
datasource
.
name
)
:
undefined
;
const
selectedDatasource
=
datasource
?
exploreDatasources
.
find
(
d
=>
d
.
name
===
datasource
.
name
)
:
undefined
;
const
graphLoading
=
queryTransactions
.
some
(
qt
=>
qt
.
resultType
===
'Graph'
&&
!
qt
.
done
);
const
graphLoading
=
queryTransactions
.
some
(
qt
=>
qt
.
resultType
===
'Graph'
&&
!
qt
.
done
);
const
tableLoading
=
queryTransactions
.
some
(
qt
=>
qt
.
resultType
===
'Table'
&&
!
qt
.
done
);
const
tableLoading
=
queryTransactions
.
some
(
qt
=>
qt
.
resultType
===
'Table'
&&
!
qt
.
done
);
const
logsLoading
=
queryTransactions
.
some
(
qt
=>
qt
.
resultType
===
'Logs'
&&
!
qt
.
done
);
const
logsLoading
=
queryTransactions
.
some
(
qt
=>
qt
.
resultType
===
'Logs'
&&
!
qt
.
done
);
...
@@ -910,26 +908,10 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
...
@@ -910,26 +908,10 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
)
}
)
}
{
!
datasourceMissing
?
(
{
!
datasourceMissing
?
(
<
div
className=
"navbar-buttons"
>
<
div
className=
"navbar-buttons"
>
<
Select
<
DataSourcePicker
classNamePrefix=
{
`gf-form-select-box`
}
isMulti=
{
false
}
menuShouldScrollIntoView=
{
false
}
isLoading=
{
datasourceLoading
}
isClearable=
{
false
}
className=
"gf-form-input gf-form-input--form-dropdown datasource-picker"
onChange=
{
this
.
onChangeDatasource
}
onChange=
{
this
.
onChangeDatasource
}
options=
{
exploreDatasources
}
datasources=
{
exploreDatasources
}
styles=
{
ResetStyles
}
current=
{
selectedDatasource
}
maxMenuHeight=
{
500
}
placeholder=
"Select datasource"
loadingMessage=
{
()
=>
'Loading datasources...'
}
noOptionsMessage=
{
()
=>
'No datasources found'
}
value=
{
selectedDatasource
}
components=
{
{
Option
:
PickerOption
,
IndicatorsContainer
,
NoOptionsMessage
,
}
}
/>
/>
</
div
>
</
div
>
)
:
null
}
)
:
null
}
...
...
public/app/features/panel/panel_header.ts
View file @
cf1cd4d6
...
@@ -111,11 +111,11 @@ function panelHeader($compile) {
...
@@ -111,11 +111,11 @@ function panelHeader($compile) {
*/
*/
function
togglePanelStackPosition
()
{
function
togglePanelStackPosition
()
{
const
menuOpenClass
=
'dropdown-menu-open'
;
const
menuOpenClass
=
'dropdown-menu-open'
;
const
panelGridClass
=
'.react-grid-item
.panel
'
;
const
panelGridClass
=
'.react-grid-item'
;
let
panelElem
=
elem
let
panelElem
=
elem
.
find
(
'[data-toggle=dropdown]'
)
.
find
(
'[data-toggle=dropdown]'
)
.
parentsUntil
(
'.panel'
)
.
parentsUntil
(
panelGridClass
)
.
parent
();
.
parent
();
const
menuElem
=
elem
.
find
(
'[data-toggle=dropdown]'
).
parent
();
const
menuElem
=
elem
.
find
(
'[data-toggle=dropdown]'
).
parent
();
panelElem
=
panelElem
&&
panelElem
.
length
?
panelElem
[
0
]
:
undefined
;
panelElem
=
panelElem
&&
panelElem
.
length
?
panelElem
[
0
]
:
undefined
;
...
...
public/app/features/teams/TeamMembers.tsx
View file @
cf1cd4d6
import
React
,
{
PureComponent
}
from
'react'
;
import
React
,
{
PureComponent
}
from
'react'
;
import
{
connect
}
from
'react-redux'
;
import
{
connect
}
from
'react-redux'
;
import
SlideDown
from
'app/core/components/Animations/SlideDown'
;
import
SlideDown
from
'app/core/components/Animations/SlideDown'
;
import
{
UserPicker
}
from
'app/core/components/
Picker
/UserPicker'
;
import
{
UserPicker
}
from
'app/core/components/
Select
/UserPicker'
;
import
DeleteButton
from
'app/core/components/DeleteButton/DeleteButton'
;
import
DeleteButton
from
'app/core/components/DeleteButton/DeleteButton'
;
import
{
TagBadge
}
from
'app/core/components/TagFilter/TagBadge'
;
import
{
TagBadge
}
from
'app/core/components/TagFilter/TagBadge'
;
import
{
TeamMember
,
User
}
from
'app/types'
;
import
{
TeamMember
,
User
}
from
'app/types'
;
...
...
public/app/plugins/datasource/cloudwatch/query_parameter_ctrl.ts
View file @
cf1cd4d6
...
@@ -2,21 +2,6 @@ import angular from 'angular';
...
@@ -2,21 +2,6 @@ import angular from 'angular';
import
coreModule
from
'app/core/core_module'
;
import
coreModule
from
'app/core/core_module'
;
import
_
from
'lodash'
;
import
_
from
'lodash'
;
export
class
CloudWatchQueryParameter
{
constructor
()
{
return
{
templateUrl
:
'public/app/plugins/datasource/cloudwatch/partials/query.parameter.html'
,
controller
:
'CloudWatchQueryParameterCtrl'
,
restrict
:
'E'
,
scope
:
{
target
:
'='
,
datasource
:
'='
,
onChange
:
'&'
,
},
};
}
}
export
class
CloudWatchQueryParameterCtrl
{
export
class
CloudWatchQueryParameterCtrl
{
/** @ngInject */
/** @ngInject */
constructor
(
$scope
,
templateSrv
,
uiSegmentSrv
,
datasourceSrv
,
$q
)
{
constructor
(
$scope
,
templateSrv
,
uiSegmentSrv
,
datasourceSrv
,
$q
)
{
...
@@ -240,5 +225,17 @@ export class CloudWatchQueryParameterCtrl {
...
@@ -240,5 +225,17 @@ export class CloudWatchQueryParameterCtrl {
}
}
}
}
coreModule
.
directive
(
'cloudwatchQueryParameter'
,
CloudWatchQueryParameter
);
export
function
cloudWatchQueryParameter
()
{
coreModule
.
controller
(
'CloudWatchQueryParameterCtrl'
,
CloudWatchQueryParameterCtrl
);
return
{
templateUrl
:
'public/app/plugins/datasource/cloudwatch/partials/query.parameter.html'
,
controller
:
CloudWatchQueryParameterCtrl
,
restrict
:
'E'
,
scope
:
{
target
:
'='
,
datasource
:
'='
,
onChange
:
'&'
,
},
};
}
coreModule
.
directive
(
'cloudwatchQueryParameter'
,
cloudWatchQueryParameter
);
public/app/plugins/panel/gauge/MappingRow.tsx
View file @
cf1cd4d6
import
React
,
{
PureComponent
}
from
'react'
;
import
React
,
{
PureComponent
}
from
'react'
;
import
{
Label
}
from
'app/core/components/Label/Label'
;
import
{
Label
}
from
'app/core/components/Label/Label'
;
import
SimplePicker
from
'app/core/components/Picker/SimplePicker
'
;
import
{
Select
}
from
'app/core/components/Select/Select
'
;
import
{
MappingType
,
RangeMap
,
ValueMap
}
from
'app/types'
;
import
{
MappingType
,
RangeMap
,
ValueMap
}
from
'app/types'
;
interface
Props
{
interface
Props
{
...
@@ -135,13 +135,12 @@ export default class MappingRow extends PureComponent<Props, State> {
...
@@ -135,13 +135,12 @@ export default class MappingRow extends PureComponent<Props, State> {
<
div
className=
"mapping-row"
>
<
div
className=
"mapping-row"
>
<
div
className=
"gf-form-inline mapping-row-type"
>
<
div
className=
"gf-form-inline mapping-row-type"
>
<
Label
width=
{
5
}
>
Type
</
Label
>
<
Label
width=
{
5
}
>
Type
</
Label
>
<
S
implePicker
<
S
elect
placeholder=
"Choose type"
placeholder=
"Choose type"
isSearchable=
{
false
}
options=
{
mappingOptions
}
options=
{
mappingOptions
}
value=
{
mappingOptions
.
find
(
o
=>
o
.
value
===
type
)
}
value=
{
mappingOptions
.
find
(
o
=>
o
.
value
===
type
)
}
getOptionLabel=
{
i
=>
i
.
label
}
onChange=
{
type
=>
this
.
onMappingTypeChange
(
type
.
value
)
}
getOptionValue=
{
i
=>
i
.
value
}
onSelected=
{
type
=>
this
.
onMappingTypeChange
(
type
.
value
)
}
width=
{
7
}
width=
{
7
}
/>
/>
</
div
>
</
div
>
...
...
public/app/plugins/panel/gauge/ValueOptions.tsx
View file @
cf1cd4d6
import
React
,
{
PureComponent
}
from
'react'
;
import
React
,
{
PureComponent
}
from
'react'
;
import
{
Label
}
from
'app/core/components/Label/Label'
;
import
{
Label
}
from
'app/core/components/Label/Label'
;
import
S
implePicker
from
'app/core/components/Picker/SimplePicker
'
;
import
S
elect
from
'app/core/components/Select/Select
'
;
import
UnitPicker
from
'app/core/components/
Picker/Uni
t/UnitPicker'
;
import
UnitPicker
from
'app/core/components/
Selec
t/UnitPicker'
;
import
{
OptionModuleProps
}
from
'./module'
;
import
{
OptionModuleProps
}
from
'./module'
;
const
statOptions
=
[
const
statOptions
=
[
{
value
:
'min'
,
text
:
'Min'
},
{
value
:
'min'
,
label
:
'Min'
},
{
value
:
'max'
,
text
:
'Max'
},
{
value
:
'max'
,
label
:
'Max'
},
{
value
:
'avg'
,
text
:
'Average'
},
{
value
:
'avg'
,
label
:
'Average'
},
{
value
:
'current'
,
text
:
'Current'
},
{
value
:
'current'
,
label
:
'Current'
},
{
value
:
'total'
,
text
:
'Total'
},
{
value
:
'total'
,
label
:
'Total'
},
{
value
:
'name'
,
text
:
'Name'
},
{
value
:
'name'
,
label
:
'Name'
},
{
value
:
'first'
,
text
:
'First'
},
{
value
:
'first'
,
label
:
'First'
},
{
value
:
'delta'
,
text
:
'Delta'
},
{
value
:
'delta'
,
label
:
'Delta'
},
{
value
:
'diff'
,
text
:
'Difference'
},
{
value
:
'diff'
,
label
:
'Difference'
},
{
value
:
'range'
,
text
:
'Range'
},
{
value
:
'range'
,
label
:
'Range'
},
{
value
:
'last_time'
,
text
:
'Time of last point'
},
{
value
:
'last_time'
,
label
:
'Time of last point'
},
];
];
const
labelWidth
=
6
;
const
labelWidth
=
6
;
...
@@ -43,18 +43,16 @@ export default class ValueOptions extends PureComponent<OptionModuleProps> {
...
@@ -43,18 +43,16 @@ export default class ValueOptions extends PureComponent<OptionModuleProps> {
<
h5
className=
"page-heading"
>
Value
</
h5
>
<
h5
className=
"page-heading"
>
Value
</
h5
>
<
div
className=
"gf-form-inline"
>
<
div
className=
"gf-form-inline"
>
<
Label
width=
{
labelWidth
}
>
Stat
</
Label
>
<
Label
width=
{
labelWidth
}
>
Stat
</
Label
>
<
S
implePicker
<
S
elect
width=
{
12
}
width=
{
12
}
options=
{
statOptions
}
options=
{
statOptions
}
getOptionLabel=
{
i
=>
i
.
text
}
onChange=
{
this
.
onStatChange
}
getOptionValue=
{
i
=>
i
.
value
}
onSelected=
{
this
.
onStatChange
}
value=
{
statOptions
.
find
(
option
=>
option
.
value
===
stat
)
}
value=
{
statOptions
.
find
(
option
=>
option
.
value
===
stat
)
}
/>
/>
</
div
>
</
div
>
<
div
className=
"gf-form-inline"
>
<
div
className=
"gf-form-inline"
>
<
Label
width=
{
labelWidth
}
>
Unit
</
Label
>
<
Label
width=
{
labelWidth
}
>
Unit
</
Label
>
<
UnitPicker
defaultValue=
{
unit
}
on
Selected=
{
value
=>
this
.
onUnitChange
(
value
)
}
/>
<
UnitPicker
defaultValue=
{
unit
}
on
Change=
{
this
.
onUnitChange
}
/>
</
div
>
</
div
>
<
div
className=
"gf-form-inline"
>
<
div
className=
"gf-form-inline"
>
<
Label
width=
{
labelWidth
}
>
Decimals
</
Label
>
<
Label
width=
{
labelWidth
}
>
Decimals
</
Label
>
...
...
public/app/types/explore.ts
View file @
cf1cd4d6
...
@@ -3,6 +3,7 @@ import { Value } from 'slate';
...
@@ -3,6 +3,7 @@ import { Value } from 'slate';
import
{
DataQuery
,
RawTimeRange
}
from
'./series'
;
import
{
DataQuery
,
RawTimeRange
}
from
'./series'
;
import
TableModel
from
'app/core/table_model'
;
import
TableModel
from
'app/core/table_model'
;
import
{
LogsModel
}
from
'app/core/logs_model'
;
import
{
LogsModel
}
from
'app/core/logs_model'
;
import
{
DataSourceSelectItem
}
from
'app/types/datasources'
;
export
interface
CompletionItem
{
export
interface
CompletionItem
{
/**
/**
...
@@ -74,11 +75,6 @@ export interface CompletionItemGroup {
...
@@ -74,11 +75,6 @@ export interface CompletionItemGroup {
skipSort
?:
boolean
;
skipSort
?:
boolean
;
}
}
interface
ExploreDatasource
{
value
:
string
;
label
:
string
;
}
export
interface
HistoryItem
{
export
interface
HistoryItem
{
ts
:
number
;
ts
:
number
;
query
:
DataQuery
;
query
:
DataQuery
;
...
@@ -159,7 +155,7 @@ export interface ExploreState {
...
@@ -159,7 +155,7 @@ export interface ExploreState {
datasourceLoading
:
boolean
|
null
;
datasourceLoading
:
boolean
|
null
;
datasourceMissing
:
boolean
;
datasourceMissing
:
boolean
;
datasourceName
?:
string
;
datasourceName
?:
string
;
exploreDatasources
:
ExploreDatasource
[];
exploreDatasources
:
DataSourceSelectItem
[];
graphInterval
:
number
;
// in ms
graphInterval
:
number
;
// in ms
graphResult
?:
any
[];
graphResult
?:
any
[];
history
:
HistoryItem
[];
history
:
HistoryItem
[];
...
...
public/sass/_grafana.scss
View file @
cf1cd4d6
...
@@ -101,7 +101,6 @@
...
@@ -101,7 +101,6 @@
@import
'components/delete_button'
;
@import
'components/delete_button'
;
@import
'components/add_data_source.scss'
;
@import
'components/add_data_source.scss'
;
@import
'components/page_loader'
;
@import
'components/page_loader'
;
@import
'components/unit-picker'
;
@import
'components/thresholds'
;
@import
'components/thresholds'
;
@import
'components/toggle_button_group'
;
@import
'components/toggle_button_group'
;
@import
'components/value-mappings'
;
@import
'components/value-mappings'
;
...
...
public/sass/components/_form_select_box.scss
View file @
cf1cd4d6
...
@@ -79,6 +79,7 @@ $select-input-bg-disabled: $input-bg-disabled;
...
@@ -79,6 +79,7 @@ $select-input-bg-disabled: $input-bg-disabled;
.gf-form-select-box__option
{
.gf-form-select-box__option
{
border-left
:
2px
solid
transparent
;
border-left
:
2px
solid
transparent
;
white-space
:
nowrap
;
white-space
:
nowrap
;
background-color
:
$input-bg
;
&
.gf-form-select-box__option--is-focused
{
&
.gf-form-select-box__option--is-focused
{
color
:
$dropdownLinkColorHover
;
color
:
$dropdownLinkColorHover
;
...
@@ -116,7 +117,7 @@ $select-input-bg-disabled: $input-bg-disabled;
...
@@ -116,7 +117,7 @@ $select-input-bg-disabled: $input-bg-disabled;
.gf-form-select-box__select-arrow
{
.gf-form-select-box__select-arrow
{
border-color
:
$input-color-select-arrow
transparent
transparent
;
border-color
:
$input-color-select-arrow
transparent
transparent
;
border-style
:
solid
;
border-style
:
solid
;
border-width
:
5px
5
px
2
.5px
;
border-width
:
4px
4
px
2
.5px
;
display
:
inline-block
;
display
:
inline-block
;
height
:
0
;
height
:
0
;
width
:
0
;
width
:
0
;
...
@@ -125,7 +126,7 @@ $select-input-bg-disabled: $input-bg-disabled;
...
@@ -125,7 +126,7 @@ $select-input-bg-disabled: $input-bg-disabled;
&
.gf-form-select-box__select-arrow--reversed
{
&
.gf-form-select-box__select-arrow--reversed
{
border-color
:
transparent
transparent
$input-color-select-arrow
;
border-color
:
transparent
transparent
$input-color-select-arrow
;
top
:
-2px
;
top
:
-2px
;
border-width
:
0
5px
5
px
;
border-width
:
0
4px
4
px
;
}
}
}
}
...
@@ -170,3 +171,19 @@ $select-input-bg-disabled: $input-bg-disabled;
...
@@ -170,3 +171,19 @@ $select-input-bg-disabled: $input-bg-disabled;
width
:
16px
;
width
:
16px
;
margin-right
:
10px
;
margin-right
:
10px
;
}
}
.gf-form-select-box__option-group__header
{
display
:
flex
;
align-items
:
center
;
justify-content
:
flex-start
;
justify-items
:
center
;
cursor
:
pointer
;
padding
:
7px
10px
;
width
:
100%
;
border-bottom
:
1px
solid
$hr-border-color
;
text-transform
:
capitalize
;
.fa
{
padding-right
:
2px
;
}
}
public/sass/components/_query_editor.scss
View file @
cf1cd4d6
...
@@ -59,6 +59,8 @@
...
@@ -59,6 +59,8 @@
}
}
.gf-form-query-letter-cell
{
.gf-form-query-letter-cell
{
flex-shrink
:
0
;
.gf-form-query-letter-cell-carret
{
.gf-form-query-letter-cell-carret
{
display
:
inline-block
;
display
:
inline-block
;
width
:
0
.7rem
;
width
:
0
.7rem
;
...
...
public/sass/components/_switch.scss
View file @
cf1cd4d6
...
@@ -97,10 +97,10 @@ input:checked + .gf-form-switch__slider::before {
...
@@ -97,10 +97,10 @@ input:checked + .gf-form-switch__slider::before {
&
--transparent
{
&
--transparent
{
background
:
transparent
;
background
:
transparent
;
border
:
none
;
border
:
none
;
width
:
2
0
px
;
width
:
2
3
px
;
height
:
auto
;
height
:
auto
;
position
:
relative
;
position
:
relative
;
padding-left
:
7
px
;
padding-left
:
8
px
;
}
}
&
--table-cell
{
&
--table-cell
{
...
...
public/sass/components/_unit-picker.scss
deleted
100644 → 0
View file @
b9a05a85
.unit-picker-option
{
position
:
relative
;
width
:
100%
;
display
:
block
;
border-radius
:
0
;
white-space
:
normal
;
i
.fa-check
{
padding-left
:
2px
;
}
}
.unit-picker-group
{
margin-bottom
:
5px
;
}
.unit-picker-group-item
{
display
:
flex
;
align-items
:
center
;
justify-content
:
space-between
;
padding
:
10px
;
font-size
:
14px
;
border-bottom
:
1px
solid
#555
;
}
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment