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
029317ed
Commit
029317ed
authored
Dec 31, 2017
by
Torkel Ödegaard
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
tech: alert list react migration progress
parent
5a571f47
Show whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
118 additions
and
35 deletions
+118
-35
pkg/api/alerting.go
+2
-2
pkg/services/sqlstore/alert.go
+1
-1
public/app/containers/AlertRuleList/AlertRuleList.tsx
+67
-18
public/app/stores/AlertListStore.ts
+46
-12
public/app/stores/RootStore.ts
+2
-2
No files found.
pkg/api/alerting.go
View file @
029317ed
...
...
@@ -278,7 +278,7 @@ func PauseAlert(c *middleware.Context, dto dtos.PauseAlertCommand) Response {
}
var
response
models
.
AlertStateType
=
models
.
AlertStatePending
pausedState
:=
"un
paused"
pausedState
:=
"un
-
paused"
if
cmd
.
Paused
{
response
=
models
.
AlertStatePaused
pausedState
=
"paused"
...
...
@@ -287,7 +287,7 @@ func PauseAlert(c *middleware.Context, dto dtos.PauseAlertCommand) Response {
result
:=
map
[
string
]
interface
{}{
"alertId"
:
alertId
,
"state"
:
response
,
"message"
:
"
a
lert "
+
pausedState
,
"message"
:
"
A
lert "
+
pausedState
,
}
return
Json
(
200
,
result
)
...
...
pkg/services/sqlstore/alert.go
View file @
029317ed
...
...
@@ -88,7 +88,7 @@ func HandleAlertsQuery(query *m.GetAlertsQuery) error {
params
=
append
(
params
,
query
.
PanelId
)
}
if
len
(
query
.
State
)
>
0
&&
query
.
State
[
0
]
!=
"
ALL
"
{
if
len
(
query
.
State
)
>
0
&&
query
.
State
[
0
]
!=
"
all
"
{
sql
.
WriteString
(
` AND (`
)
for
i
,
v
:=
range
query
.
State
{
if
i
>
0
{
...
...
public/app/containers/AlertRuleList/AlertRuleList.tsx
View file @
029317ed
...
...
@@ -2,49 +2,73 @@ import React from 'react';
import
classNames
from
'classnames'
;
import
{
inject
,
observer
}
from
'mobx-react'
;
import
PageHeader
from
'app/core/components/PageHeader/PageHeader'
;
import
{
IRootStore
}
from
'app/stores/RootStore'
;
import
{
IAlertRule
}
from
'app/stores/AlertListStore'
;
import
appEvents
from
'app/core/app_events'
;
export
interface
I
Props
{
store
:
any
;
export
interface
AlertRuleList
Props
{
store
:
IRootStore
;
}
@
inject
(
'store'
)
@
observer
export
class
AlertRuleList
extends
React
.
Component
<
IProps
,
any
>
{
export
class
AlertRuleList
extends
React
.
Component
<
AlertRuleListProps
,
any
>
{
stateFilters
=
[
{
text
:
'All'
,
value
:
'all'
},
{
text
:
'OK'
,
value
:
'ok'
},
{
text
:
'Not OK'
,
value
:
'not_ok'
},
{
text
:
'Alerting'
,
value
:
'alerting'
},
{
text
:
'No Data'
,
value
:
'no_data'
},
{
text
:
'Paused'
,
value
:
'paused'
},
];
constructor
(
props
)
{
super
(
props
);
this
.
props
.
store
.
nav
.
load
(
'alerting'
,
'alert-list'
);
this
.
props
.
store
.
alert
ing
.
loadRules
();
this
.
props
.
store
.
alert
List
.
loadRules
();
}
onStateFilterChanged
=
evt
=>
{
this
.
props
.
store
.
alertList
.
setStateFilter
(
evt
.
target
.
value
);
this
.
props
.
store
.
alertList
.
loadRules
();
};
onOpenHowTo
=
()
=>
{
appEvents
.
emit
(
'show-modal'
,
{
src
:
'public/app/features/alerting/partials/alert_howto.html'
,
modalClass
:
'confirm-modal'
,
model
:
{},
});
};
render
()
{
const
{
nav
,
alertList
}
=
this
.
props
.
store
;
return
(
<
div
>
<
PageHeader
model=
{
this
.
props
.
store
.
nav
}
/>
<
PageHeader
model=
{
nav
as
any
}
/>
<
div
className=
"page-container page-body"
>
<
div
className=
"page-action-bar"
>
<
div
className=
"gf-form"
>
<
label
className=
"gf-form-label"
>
Filter by state
</
label
>
<
div
className=
"gf-form-select-wrapper width-13"
>
<
select
className=
"gf-form-input"
ng
-
model=
"ctrl.filters.state"
ng
-
options=
"f.value as f.text for f in ctrl.stateFilters"
ng
-
change=
"ctrl.filtersChanged()"
/>
<
select
className=
"gf-form-input"
onChange=
{
this
.
onStateFilterChanged
}
>
{
this
.
stateFilters
.
map
(
AlertStateFilterOption
)
}
</
select
>
</
div
>
</
div
>
<
div
className=
"page-action-bar__spacer"
/>
<
a
className=
"btn btn-secondary"
ng
-
click=
"ctrl.openHowTo()"
>
<
a
className=
"btn btn-secondary"
onClick=
{
this
.
onOpenHowTo
}
>
<
i
className=
"fa fa-info-circle"
/>
How to add an alert
</
a
>
</
div
>
<
section
className=
"card-section card-list-layout-list"
>
<
ol
className=
"card-list"
>
{
this
.
props
.
store
.
alerting
.
rules
.
map
(
AlertRuleItem
)
}
</
ol
>
<
ol
className=
"card-list"
>
{
alertList
.
rules
.
map
(
rule
=>
<
AlertRuleItem
rule=
{
rule
}
key=
{
rule
.
id
}
/>
)
}
</
ol
>
</
section
>
</
div
>
</
div
>
...
...
@@ -52,21 +76,45 @@ export class AlertRuleList extends React.Component<IProps, any> {
}
}
function
AlertRuleItem
(
rule
)
{
function
AlertStateFilterOption
({
text
,
value
})
{
return
(
<
option
key=
{
value
}
value=
{
value
}
>
{
text
}
</
option
>
);
}
export
interface
AlertRuleItemProps
{
rule
:
IAlertRule
;
}
@
observer
export
class
AlertRuleItem
extends
React
.
Component
<
AlertRuleItemProps
,
any
>
{
toggleState
=
()
=>
{
this
.
props
.
rule
.
togglePaused
();
};
render
()
{
const
{
rule
}
=
this
.
props
;
let
stateClass
=
classNames
({
fa
:
true
,
'fa-play'
:
rule
.
state
===
'paused'
,
'fa-pause'
:
rule
.
state
!==
'paused'
,
'fa-play'
:
rule
.
isPaused
,
'fa-pause'
:
!
rule
.
isPaused
,
});
let
ruleUrl
=
`dashboard/
${
rule
.
dashboardUri
}
?panelId=
${
rule
.
panelId
}
&fullscreen&edit&tab=alert`
;
return
(
<
li
className=
"card-item-wrapper"
key=
{
rule
.
id
}
>
<
li
className=
"card-item-wrapper"
>
<
div
className=
"card-item card-item--alert"
>
<
div
className=
"card-item-header"
>
<
div
className=
"card-item-type"
>
<
a
className=
"card-item-cog"
title=
"Pausing an alert rule prevents it from executing"
>
<
a
className=
"card-item-cog"
title=
"Pausing an alert rule prevents it from executing"
onClick=
{
this
.
toggleState
}
>
<
i
className=
{
stateClass
}
/>
</
a
>
<
a
className=
"card-item-cog"
href=
{
ruleUrl
}
title=
"Edit alert rule"
>
...
...
@@ -91,4 +139,5 @@ function AlertRuleItem(rule) {
</
div
>
</
li
>
);
}
}
public/app/stores/Alert
ing
Store.ts
→
public/app/stores/Alert
List
Store.ts
View file @
029317ed
...
...
@@ -2,7 +2,19 @@ import { types, getEnv, flow } from 'mobx-state-tree';
import
moment
from
'moment'
;
import
alertDef
from
'app/features/alerting/alert_def'
;
export
const
AlertRule
=
types
.
model
(
'AlertRule'
,
{
function
setStateFields
(
rule
,
state
)
{
let
stateModel
=
alertDef
.
getStateDisplayModel
(
state
);
rule
.
state
=
state
;
rule
.
stateText
=
stateModel
.
text
;
rule
.
stateIcon
=
stateModel
.
iconClass
;
rule
.
stateClass
=
stateModel
.
stateClass
;
rule
.
stateAge
=
moment
(
rule
.
newStateDate
)
.
fromNow
()
.
replace
(
' ago'
,
''
);
}
export
const
AlertRule
=
types
.
model
(
'AlertRule'
,
{
id
:
types
.
identifier
(
types
.
number
),
dashboardId
:
types
.
number
,
panelId
:
types
.
number
,
...
...
@@ -14,28 +26,50 @@ export const AlertRule = types.model('AlertRule', {
stateAge
:
types
.
string
,
info
:
types
.
optional
(
types
.
string
,
''
),
dashboardUri
:
types
.
string
,
});
})
.
views
(
self
=>
({
get
isPaused
()
{
return
self
.
state
===
'paused'
;
},
}))
.
actions
(
self
=>
({
/**
* will toggle alert rule paused state
*/
togglePaused
:
flow
(
function
*
togglePaused
()
{
let
backendSrv
=
getEnv
(
self
).
backendSrv
;
var
payload
=
{
paused
:
self
.
isPaused
};
let
res
=
yield
backendSrv
.
post
(
`/api/alerts/
${
self
.
id
}
/pause`
,
payload
);
setStateFields
(
self
,
res
.
state
);
self
.
info
=
''
;
}),
}));
type
IAlertRuleType
=
typeof
AlertRule
.
Type
;
export
interface
IAlertRule
extends
IAlertRuleType
{}
export
const
Alert
ing
Store
=
types
.
model
(
'Alert
ing
Store'
,
{
export
const
Alert
List
Store
=
types
.
model
(
'Alert
List
Store'
,
{
rules
:
types
.
array
(
AlertRule
),
stateFilter
:
types
.
optional
(
types
.
string
,
'all'
),
})
.
actions
(
self
=>
({
setStateFilter
:
function
(
state
)
{
self
.
stateFilter
=
state
;
},
loadRules
:
flow
(
function
*
load
()
{
let
backendSrv
=
getEnv
(
self
).
backendSrv
;
let
rules
=
yield
backendSrv
.
get
(
'/api/alerts'
);
let
filters
=
{
state
:
self
.
stateFilter
};
let
rules
=
yield
backendSrv
.
get
(
'/api/alerts'
,
filters
);
self
.
rules
.
clear
();
for
(
let
rule
of
rules
)
{
let
stateModel
=
alertDef
.
getStateDisplayModel
(
rule
.
state
);
rule
.
stateText
=
stateModel
.
text
;
rule
.
stateIcon
=
stateModel
.
iconClass
;
rule
.
stateClass
=
stateModel
.
stateClass
;
rule
.
stateAge
=
moment
(
rule
.
newStateDate
)
.
fromNow
()
.
replace
(
' ago'
,
''
);
setStateFields
(
rule
,
rule
.
state
);
if
(
rule
.
executionError
)
{
rule
.
info
=
'Execution Error: '
+
rule
.
executionError
;
...
...
public/app/stores/RootStore.ts
View file @
029317ed
...
...
@@ -2,7 +2,7 @@ import { types } from 'mobx-state-tree';
import
{
SearchStore
}
from
'./SearchStore'
;
import
{
ServerStatsStore
}
from
'./ServerStatsStore'
;
import
{
NavStore
}
from
'./NavStore'
;
import
{
Alert
ingStore
}
from
'./Alerting
Store'
;
import
{
Alert
ListStore
}
from
'./AlertList
Store'
;
export
const
RootStore
=
types
.
model
({
search
:
types
.
optional
(
SearchStore
,
{
...
...
@@ -12,7 +12,7 @@ export const RootStore = types.model({
stats
:
[],
}),
nav
:
types
.
optional
(
NavStore
,
{}),
alert
ing
:
types
.
optional
(
Alerting
Store
,
{
alert
List
:
types
.
optional
(
AlertList
Store
,
{
rules
:
[],
}),
});
...
...
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