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
c54ec5f5
Commit
c54ec5f5
authored
Jan 11, 2019
by
Hugo Häggmark
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Moved the rest of Threshold dependencies to ui/components
parent
c05b92c2
Hide whitespace changes
Inline
Side-by-side
Showing
16 changed files
with
76 additions
and
108 deletions
+76
-108
packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx
+3
-4
packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
+18
-42
packages/grafana-ui/src/types/gauge.ts
+2
-2
packages/grafana-ui/src/types/index.ts
+1
-0
packages/grafana-ui/src/types/panel.ts
+26
-0
public/app/plugins/panel/gauge/GaugeOptionsEditor.tsx
+3
-3
public/app/plugins/panel/gauge/GaugePanel.tsx
+3
-3
public/app/plugins/panel/gauge/GaugePanelOptions.tsx
+5
-6
public/app/plugins/panel/gauge/MappingRow.tsx
+2
-1
public/app/plugins/panel/gauge/ValueMappings.test.tsx
+3
-4
public/app/plugins/panel/gauge/ValueMappings.tsx
+3
-4
public/app/plugins/panel/gauge/ValueOptions.tsx
+3
-3
public/app/types/index.ts
+0
-7
public/app/types/panel.ts
+0
-25
public/app/viz/Gauge.test.tsx
+2
-2
public/app/viz/Gauge.tsx
+2
-2
No files found.
packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx
View file @
c54ec5f5
import
React
from
'react'
;
import
{
shallow
}
from
'enzyme'
;
import
{
PanelOptionsProps
}
from
'@grafana/ui'
;
import
{
BasicGaugeColor
,
GaugeOptions
,
PanelOptionsProps
}
from
'@grafana/ui'
;
import
{
defaultProps
}
from
'app/plugins/panel/gauge/GaugePanelOptions'
;
import
{
Options
}
from
'app/plugins/panel/gauge/types'
;
import
{
BasicGaugeColor
}
from
'app/types'
;
import
{
ThresholdsEditor
}
from
'./ThresholdsEditor'
;
const
setup
=
(
propOverrides
?:
object
)
=>
{
const
props
:
PanelOptionsProps
<
Options
>
=
{
const
props
:
PanelOptionsProps
<
Gauge
Options
>
=
{
onChange
:
jest
.
fn
(),
options
:
{
...
defaultProps
.
options
,
...
...
packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
View file @
c54ec5f5
import
React
,
{
PureComponent
}
from
'react'
;
import
tinycolor
from
'tinycolor2'
;
import
{
ColorPicker
}
from
'@grafana/ui'
;
import
{
BasicGaugeColor
}
from
'app/types'
;
import
{
PanelOptionsProps
,
Threshold
}
from
'@grafana/ui'
;
import
{
Options
}
from
'app/plugins/panel/gauge/types'
;
import
tinycolor
,
{
ColorInput
}
from
'tinycolor2'
;
import
{
BasicGaugeColor
,
ColorPicker
,
GaugeOptions
,
PanelOptionsProps
,
Threshold
}
from
'@grafana/ui'
;
interface
State
{
thresholds
:
Threshold
[];
baseColor
:
string
;
}
export
class
ThresholdsEditor
extends
PureComponent
<
PanelOptionsProps
<
Options
>
,
State
>
{
constructor
(
props
)
{
export
class
ThresholdsEditor
extends
PureComponent
<
PanelOptionsProps
<
Gauge
Options
>
,
State
>
{
constructor
(
props
:
PanelOptionsProps
<
GaugeOptions
>
)
{
super
(
props
);
this
.
state
=
{
thresholds
:
props
.
options
.
thresholds
,
baseColor
:
props
.
options
.
baseColor
,
};
this
.
state
=
{
thresholds
:
props
.
options
.
thresholds
,
baseColor
:
props
.
options
.
baseColor
};
}
onAddThreshold
=
index
=>
{
onAddThreshold
=
(
index
:
number
)
=>
{
const
{
maxValue
,
minValue
}
=
this
.
props
.
options
;
const
{
thresholds
}
=
this
.
state
;
...
...
@@ -48,27 +42,25 @@ export class ThresholdsEditor extends PureComponent<PanelOptionsProps<Options>,
if
(
index
===
0
&&
thresholds
.
length
===
0
)
{
color
=
tinycolor
.
mix
(
BasicGaugeColor
.
Green
,
BasicGaugeColor
.
Red
,
50
).
toRgbString
();
}
else
{
color
=
tinycolor
.
mix
(
thresholds
[
index
-
1
].
color
,
BasicGaugeColor
.
Red
,
50
).
toRgbString
();
color
=
tinycolor
.
mix
(
thresholds
[
index
-
1
].
color
as
ColorInput
,
BasicGaugeColor
.
Red
,
50
).
toRgbString
();
}
this
.
setState
(
{
thresholds
:
this
.
sortThresholds
([...
newThresholds
,
{
index
:
index
,
value
:
value
,
color
:
color
}]),
thresholds
:
this
.
sortThresholds
([...
newThresholds
,
{
index
,
value
:
value
as
number
,
color
}]),
},
()
=>
this
.
updateGauge
()
);
};
onRemoveThreshold
=
threshold
=>
{
onRemoveThreshold
=
(
threshold
:
Threshold
)
=>
{
this
.
setState
(
prevState
=>
({
thresholds
:
prevState
.
thresholds
.
filter
(
t
=>
t
!==
threshold
),
}),
prevState
=>
({
thresholds
:
prevState
.
thresholds
.
filter
(
t
=>
t
!==
threshold
)
}),
()
=>
this
.
updateGauge
()
);
};
onChangeThresholdValue
=
(
event
,
t
hreshold
)
=>
{
onChangeThresholdValue
=
(
event
:
any
,
threshold
:
T
hreshold
)
=>
{
const
{
thresholds
}
=
this
.
state
;
const
newThresholds
=
thresholds
.
map
(
t
=>
{
...
...
@@ -79,12 +71,10 @@ export class ThresholdsEditor extends PureComponent<PanelOptionsProps<Options>,
return
t
;
});
this
.
setState
({
thresholds
:
newThresholds
,
});
this
.
setState
({
thresholds
:
newThresholds
});
};
onChangeThresholdColor
=
(
threshold
,
color
)
=>
{
onChangeThresholdColor
=
(
threshold
:
Threshold
,
color
:
string
)
=>
{
const
{
thresholds
}
=
this
.
state
;
const
newThresholds
=
thresholds
.
map
(
t
=>
{
...
...
@@ -103,11 +93,9 @@ export class ThresholdsEditor extends PureComponent<PanelOptionsProps<Options>,
);
};
onChangeBaseColor
=
color
=>
this
.
props
.
onChange
({
...
this
.
props
.
options
,
baseColor
:
color
});
onChangeBaseColor
=
(
color
:
string
)
=>
this
.
props
.
onChange
({
...
this
.
props
.
options
,
baseColor
:
color
});
onBlur
=
()
=>
{
this
.
setState
(
prevState
=>
({
thresholds
:
this
.
sortThresholds
(
prevState
.
thresholds
),
}));
this
.
setState
(
prevState
=>
({
thresholds
:
this
.
sortThresholds
(
prevState
.
thresholds
)
}));
this
.
updateGauge
();
};
...
...
@@ -116,7 +104,7 @@ export class ThresholdsEditor extends PureComponent<PanelOptionsProps<Options>,
this
.
props
.
onChange
({
...
this
.
props
.
options
,
thresholds
:
this
.
state
.
thresholds
});
};
sortThresholds
=
thresholds
=>
{
sortThresholds
=
(
thresholds
:
Threshold
[])
=>
{
return
thresholds
.
sort
((
t1
,
t2
)
=>
{
return
t2
.
value
-
t1
.
value
;
});
...
...
@@ -161,20 +149,8 @@ export class ThresholdsEditor extends PureComponent<PanelOptionsProps<Options>,
return
thresholds
.
map
((
t
,
i
)
=>
{
return
(
<
div
key=
{
`${t.value}-${i}`
}
className=
"indicator-section"
>
<
div
onClick=
{
()
=>
this
.
onAddThreshold
(
t
.
index
+
1
)
}
style=
{
{
height
:
'50%'
,
backgroundColor
:
t
.
color
,
}
}
/>
<
div
onClick=
{
()
=>
this
.
onAddThreshold
(
t
.
index
)
}
style=
{
{
height
:
'50%'
,
backgroundColor
:
t
.
color
,
}
}
/>
<
div
onClick=
{
()
=>
this
.
onAddThreshold
(
t
.
index
+
1
)
}
style=
{
{
height
:
'50%'
,
backgroundColor
:
t
.
color
}
}
/>
<
div
onClick=
{
()
=>
this
.
onAddThreshold
(
t
.
index
)
}
style=
{
{
height
:
'50%'
,
backgroundColor
:
t
.
color
}
}
/>
</
div
>
);
});
...
...
p
ublic/app/plugins/panel/gauge/types
.ts
→
p
ackages/grafana-ui/src/types/gauge
.ts
View file @
c54ec5f5
import
{
RangeMap
,
ValueMap
,
Threshold
}
from
'app/types
'
;
import
{
RangeMap
,
Threshold
,
ValueMap
}
from
'@grafana/ui
'
;
export
interface
Options
{
export
interface
Gauge
Options
{
baseColor
:
string
;
decimals
:
number
;
mappings
:
Array
<
RangeMap
|
ValueMap
>
;
...
...
packages/grafana-ui/src/types/index.ts
View file @
c54ec5f5
export
*
from
'./series'
;
export
*
from
'./time'
;
export
*
from
'./panel'
;
export
*
from
'./gauge'
;
packages/grafana-ui/src/types/panel.ts
View file @
c54ec5f5
...
...
@@ -35,3 +35,29 @@ export interface Threshold {
value
:
number
;
color
?:
string
;
}
export
enum
BasicGaugeColor
{
Green
=
'#299c46'
,
Red
=
'#d44a3a'
,
}
export
enum
MappingType
{
ValueToText
=
1
,
RangeToText
=
2
,
}
interface
BaseMap
{
id
:
number
;
operator
:
string
;
text
:
string
;
type
:
MappingType
;
}
export
interface
ValueMap
extends
BaseMap
{
value
:
string
;
}
export
interface
RangeMap
extends
BaseMap
{
from
:
string
;
to
:
string
;
}
public/app/plugins/panel/gauge/GaugeOptions.tsx
→
public/app/plugins/panel/gauge/GaugeOptions
Editor
.tsx
View file @
c54ec5f5
import
React
,
{
PureComponent
}
from
'react'
;
import
{
GaugeOptions
,
PanelOptionsProps
}
from
'@grafana/ui'
;
import
{
Switch
}
from
'app/core/components/Switch/Switch'
;
import
{
Label
}
from
'../../../core/components/Label/Label'
;
import
{
PanelOptionsProps
}
from
'@grafana/ui'
;
import
{
Options
}
from
'./types'
;
export
default
class
GaugeOptions
extends
PureComponent
<
PanelOptionsProps
<
Options
>>
{
export
default
class
GaugeOptions
Editor
extends
PureComponent
<
PanelOptionsProps
<
Gauge
Options
>>
{
onToggleThresholdLabels
=
()
=>
this
.
props
.
onChange
({
...
this
.
props
.
options
,
showThresholdLabels
:
!
this
.
props
.
options
.
showThresholdLabels
});
...
...
public/app/plugins/panel/gauge/GaugePanel.tsx
View file @
c54ec5f5
import
React
,
{
PureComponent
}
from
'react'
;
import
{
PanelProps
,
NullValueMode
}
from
'@grafana/ui'
;
import
{
GaugeOptions
,
PanelProps
,
NullValueMode
}
from
'@grafana/ui'
;
import
{
getTimeSeriesVMs
}
from
'app/viz/state/timeSeries'
;
import
Gauge
from
'app/viz/Gauge'
;
import
{
Options
}
from
'./types'
;
interface
Props
extends
PanelProps
<
Options
>
{}
interface
Props
extends
PanelProps
<
Gauge
Options
>
{}
export
class
GaugePanel
extends
PureComponent
<
Props
>
{
render
()
{
...
...
public/app/plugins/panel/gauge/GaugePanelOptions.tsx
View file @
c54ec5f5
import
React
,
{
PureComponent
}
from
'react'
;
import
{
BasicGaugeColor
,
GaugeOptions
,
PanelOptionsProps
,
ThresholdsEditor
}
from
'@grafana/ui'
;
import
ValueOptions
from
'app/plugins/panel/gauge/ValueOptions'
;
import
{
BasicGaugeColor
}
from
'app/types'
;
import
{
PanelOptionsProps
,
ThresholdsEditor
}
from
'@grafana/ui'
;
import
ValueMappings
from
'app/plugins/panel/gauge/ValueMappings'
;
import
{
Options
}
from
'./types'
;
import
GaugeOptions
from
'./GaugeOptions'
;
import
GaugeOptionsEditor
from
'./GaugeOptionsEditor'
;
export
const
defaultProps
=
{
options
:
{
...
...
@@ -23,7 +22,7 @@ export const defaultProps = {
},
};
export
default
class
GaugePanelOptions
extends
PureComponent
<
PanelOptionsProps
<
Options
>>
{
export
default
class
GaugePanelOptions
extends
PureComponent
<
PanelOptionsProps
<
Gauge
Options
>>
{
static
defaultProps
=
defaultProps
;
render
()
{
...
...
@@ -32,7 +31,7 @@ export default class GaugePanelOptions extends PureComponent<PanelOptionsProps<O
<>
<
div
className=
"form-section"
>
<
ValueOptions
onChange=
{
onChange
}
options=
{
options
}
/>
<
GaugeOptions
onChange=
{
onChange
}
options=
{
options
}
/>
<
GaugeOptions
Editor
onChange=
{
onChange
}
options=
{
options
}
/>
<
ThresholdsEditor
onChange=
{
onChange
}
options=
{
options
}
/>
</
div
>
...
...
public/app/plugins/panel/gauge/MappingRow.tsx
View file @
c54ec5f5
import
React
,
{
PureComponent
}
from
'react'
;
import
{
MappingType
,
RangeMap
,
ValueMap
}
from
'@grafana/ui'
;
import
{
Label
}
from
'app/core/components/Label/Label'
;
import
{
Select
}
from
'app/core/components/Select/Select'
;
import
{
MappingType
,
RangeMap
,
ValueMap
}
from
'app/types'
;
interface
Props
{
mapping
:
ValueMap
|
RangeMap
;
...
...
public/app/plugins/panel/gauge/ValueMappings.test.tsx
View file @
c54ec5f5
import
React
from
'react'
;
import
{
shallow
}
from
'enzyme'
;
import
{
GaugeOptions
,
MappingType
,
PanelOptionsProps
}
from
'@grafana/ui'
;
import
ValueMappings
from
'./ValueMappings'
;
import
{
MappingType
}
from
'app/types'
;
import
{
PanelOptionsProps
}
from
'@grafana/ui'
;
import
{
Options
}
from
'./types'
;
import
{
defaultProps
}
from
'app/plugins/panel/gauge/GaugePanelOptions'
;
const
setup
=
(
propOverrides
?:
object
)
=>
{
const
props
:
PanelOptionsProps
<
Options
>
=
{
const
props
:
PanelOptionsProps
<
Gauge
Options
>
=
{
onChange
:
jest
.
fn
(),
options
:
{
...
defaultProps
.
options
,
...
...
public/app/plugins/panel/gauge/ValueMappings.tsx
View file @
c54ec5f5
import
React
,
{
PureComponent
}
from
'react'
;
import
{
GaugeOptions
,
PanelOptionsProps
,
MappingType
,
RangeMap
,
ValueMap
}
from
'@grafana/ui'
;
import
MappingRow
from
'./MappingRow'
;
import
{
MappingType
,
RangeMap
,
ValueMap
}
from
'app/types'
;
import
{
PanelOptionsProps
}
from
'@grafana/ui'
;
import
{
Options
}
from
'./types'
;
interface
State
{
mappings
:
Array
<
ValueMap
|
RangeMap
>
;
nextIdToAdd
:
number
;
}
export
default
class
ValueMappings
extends
PureComponent
<
PanelOptionsProps
<
Options
>
,
State
>
{
export
default
class
ValueMappings
extends
PureComponent
<
PanelOptionsProps
<
Gauge
Options
>
,
State
>
{
constructor
(
props
)
{
super
(
props
);
...
...
public/app/plugins/panel/gauge/ValueOptions.tsx
View file @
c54ec5f5
import
React
,
{
PureComponent
}
from
'react'
;
import
{
GaugeOptions
,
PanelOptionsProps
}
from
'@grafana/ui'
;
import
{
Label
}
from
'app/core/components/Label/Label'
;
import
Select
from
'app/core/components/Select/Select'
;
import
UnitPicker
from
'app/core/components/Select/UnitPicker'
;
import
{
PanelOptionsProps
}
from
'@grafana/ui'
;
import
{
Options
}
from
'./types'
;
const
statOptions
=
[
{
value
:
'min'
,
label
:
'Min'
},
...
...
@@ -21,7 +21,7 @@ const statOptions = [
const
labelWidth
=
6
;
export
default
class
ValueOptions
extends
PureComponent
<
PanelOptionsProps
<
Options
>>
{
export
default
class
ValueOptions
extends
PureComponent
<
PanelOptionsProps
<
Gauge
Options
>>
{
onUnitChange
=
unit
=>
this
.
props
.
onChange
({
...
this
.
props
.
options
,
unit
:
unit
.
value
});
onStatChange
=
stat
=>
this
.
props
.
onChange
({
...
this
.
props
.
options
,
stat
:
stat
.
value
});
...
...
public/app/types/index.ts
View file @
c54ec5f5
...
...
@@ -9,7 +9,6 @@ import { ApiKey, ApiKeysState, NewApiKey } from './apiKeys';
import
{
Invitee
,
OrgUser
,
User
,
UsersState
,
UserState
}
from
'./user'
;
import
{
DataSource
,
DataSourceSelectItem
,
DataSourcesState
}
from
'./datasources'
;
import
{
DataQuery
,
DataQueryResponse
,
DataQueryOptions
}
from
'./series'
;
import
{
BasicGaugeColor
,
MappingType
,
RangeMap
,
ValueMap
}
from
'./panel'
;
import
{
PluginDashboard
,
PluginMeta
,
Plugin
,
PanelPlugin
,
PluginsState
}
from
'./plugins'
;
import
{
Organization
,
OrganizationState
}
from
'./organization'
;
import
{
...
...
@@ -20,7 +19,6 @@ import {
}
from
'./appNotifications'
;
import
{
DashboardSearchHit
}
from
'./search'
;
import
{
ValidationEvents
,
ValidationRule
}
from
'./form'
;
import
{
Threshold
}
from
'@grafana/ui'
;
export
{
Team
,
TeamsState
,
...
...
@@ -70,13 +68,8 @@ export {
AppNotificationTimeout
,
DashboardSearchHit
,
UserState
,
Threshold
,
ValidationEvents
,
ValidationRule
,
ValueMap
,
RangeMap
,
MappingType
,
BasicGaugeColor
,
};
export
interface
StoreState
{
...
...
public/app/types/panel.ts
deleted
100644 → 0
View file @
c05b92c2
export
enum
MappingType
{
ValueToText
=
1
,
RangeToText
=
2
,
}
export
enum
BasicGaugeColor
{
Green
=
'#299c46'
,
Red
=
'#d44a3a'
,
}
interface
BaseMap
{
id
:
number
;
operator
:
string
;
text
:
string
;
type
:
MappingType
;
}
export
interface
ValueMap
extends
BaseMap
{
value
:
string
;
}
export
interface
RangeMap
extends
BaseMap
{
from
:
string
;
to
:
string
;
}
public/app/viz/Gauge.test.tsx
View file @
c54ec5f5
import
React
from
'react'
;
import
{
shallow
}
from
'enzyme'
;
import
{
BasicGaugeColor
,
TimeSeriesVMs
}
from
'@grafana/ui'
;
import
{
Gauge
,
Props
}
from
'./Gauge'
;
import
{
BasicGaugeColor
}
from
'../types'
;
import
{
TimeSeriesVMs
}
from
'@grafana/ui'
;
jest
.
mock
(
'jquery'
,
()
=>
({
plot
:
jest
.
fn
(),
...
...
public/app/viz/Gauge.tsx
View file @
c54ec5f5
import
React
,
{
PureComponent
}
from
'react'
;
import
$
from
'jquery'
;
import
{
BasicGaugeColor
,
MappingType
,
RangeMap
,
Threshold
,
ValueMap
}
from
'app/types
'
;
import
{
TimeSeriesVMs
}
from
'@grafana/ui'
;
import
{
BasicGaugeColor
,
Threshold
,
TimeSeriesVMs
,
RangeMap
,
ValueMap
,
MappingType
}
from
'@grafana/ui
'
;
import
config
from
'../core/config'
;
import
kbn
from
'../core/utils/kbn'
;
...
...
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