Improve UI tree JSON, style UI tree
This commit is contained in:
Fabian Reinartz
parent
524d08d567
commit
a4333564a0
12
dispatch.go
12
dispatch.go
|
|
@ -55,15 +55,15 @@ func (d *Dispatcher) Run() {
|
|||
}
|
||||
|
||||
type UIRoute struct {
|
||||
RouteOpts *RouteOpts
|
||||
Matchers types.Matchers
|
||||
Groups []*UIGroup
|
||||
Routes []*UIRoute
|
||||
RouteOpts *RouteOpts `json:"routeOpts"`
|
||||
Matchers types.Matchers `json:"matchers"`
|
||||
Groups []*UIGroup `json:"groups"`
|
||||
Routes []*UIRoute `json:"routes"`
|
||||
}
|
||||
|
||||
type UIGroup struct {
|
||||
Labels model.LabelSet
|
||||
Alerts model.Alerts
|
||||
Labels model.LabelSet `json:"labels"`
|
||||
Alerts model.Alerts `json:"alerts"`
|
||||
}
|
||||
|
||||
func (d *Dispatcher) Populate(r *UIRoute) {
|
||||
|
|
|
|||
23
route.go
23
route.go
|
|
@ -14,6 +14,7 @@
|
|||
package main
|
||||
|
||||
import (
|
||||
"encoding/json"
|
||||
"fmt"
|
||||
"time"
|
||||
|
||||
|
|
@ -203,3 +204,25 @@ func (ro *RouteOpts) String() string {
|
|||
}
|
||||
return fmt.Sprintf("<RouteOpts send_to:%q group_by:%q timers:%q|%q>", ro.SendTo, labels, ro.GroupWait, ro.GroupInterval)
|
||||
}
|
||||
|
||||
func (ro *RouteOpts) MarshalJSON() ([]byte, error) {
|
||||
v := struct {
|
||||
SendTo string `json:"sendTo"`
|
||||
SendResolved bool `json:"sendResolved"`
|
||||
GroupBy model.LabelNames `json:"groupBy"`
|
||||
GroupWait time.Duration `json:"groupWait"`
|
||||
GroupInterval time.Duration `json:"groupInterval"`
|
||||
RepeatInterval time.Duration `json:"repeatInterval"`
|
||||
}{
|
||||
SendTo: ro.SendTo,
|
||||
SendResolved: ro.SendResolved,
|
||||
GroupWait: ro.GroupWait,
|
||||
GroupInterval: ro.GroupInterval,
|
||||
RepeatInterval: ro.RepeatInterval,
|
||||
}
|
||||
for ln := range ro.GroupBy {
|
||||
v.GroupBy = append(v.GroupBy, ln)
|
||||
}
|
||||
|
||||
return json.Marshal(&v)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@
|
|||
package types
|
||||
|
||||
import (
|
||||
"encoding/json"
|
||||
"fmt"
|
||||
"regexp"
|
||||
|
||||
|
|
@ -36,6 +37,19 @@ func (m *Matcher) String() string {
|
|||
return fmt.Sprintf("<Matcher %s:%q>", m.Name, m.Value)
|
||||
}
|
||||
|
||||
func (m *Matcher) MarshalJSON() ([]byte, error) {
|
||||
v := struct {
|
||||
Name model.LabelName `json:"name"`
|
||||
Value string `json:"value"`
|
||||
IsRegex bool `json:"isRegex"`
|
||||
}{
|
||||
Name: m.Name,
|
||||
Value: m.Value,
|
||||
IsRegex: m.isRegex,
|
||||
}
|
||||
return json.Marshal(&v)
|
||||
}
|
||||
|
||||
// IsRegex returns true of the matcher compares against a regular expression.
|
||||
func (m *Matcher) IsRegex() bool {
|
||||
return m.isRegex
|
||||
|
|
|
|||
|
|
@ -57,8 +57,7 @@ header #logo {
|
|||
.list-item {
|
||||
background: #fff;
|
||||
min-height: 50px;
|
||||
margin-bottom: 4px;
|
||||
border: 1px dotted #eee;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
|
||||
.list-item .container-left {
|
||||
|
|
@ -69,10 +68,25 @@ header #logo {
|
|||
color: #eee;
|
||||
}
|
||||
|
||||
.label-matcher {
|
||||
text-transform: none;
|
||||
margin-right: 10px;
|
||||
font-size: .8em;
|
||||
.lbl {
|
||||
text-transform: none !important;
|
||||
font-size: 0.7em;
|
||||
padding: 6px !important;
|
||||
border-radius: 3px !important;
|
||||
margin: 2px 0 2px 0 !important;
|
||||
font-family: Menlo, Monaco, Consolas, Courier, monospace;
|
||||
}
|
||||
.lbl.left {
|
||||
display: block;
|
||||
margin-right: 5px !important;
|
||||
}
|
||||
.lbl.right {
|
||||
display: block;
|
||||
margin-left: 5px !important;
|
||||
}
|
||||
.lbl.small {
|
||||
font-size: 0.65em;
|
||||
padding: 3px !important;
|
||||
}
|
||||
|
||||
.list-item .container-right {
|
||||
|
|
@ -85,8 +99,7 @@ header #logo {
|
|||
font-size: .75em;
|
||||
color: #fff;
|
||||
padding-bottom: 3px;
|
||||
margin-bottom: 4px;
|
||||
border-bottom: 1px dotted #888;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.active-interval .time {
|
||||
|
|
@ -107,9 +120,24 @@ header #logo {
|
|||
}
|
||||
|
||||
.route {
|
||||
border: 1px dotted #c0c0c0;
|
||||
border-left: 1px dotted #c0c0c0;
|
||||
background: #fff;
|
||||
}
|
||||
.route .route {
|
||||
margin: 0 0 0 1.5em;
|
||||
}
|
||||
|
||||
.route-header {
|
||||
border-bottom: 1px solid #fff;
|
||||
padding: .5em .6em;
|
||||
background: #f0f0f0;
|
||||
}
|
||||
|
||||
.alert-group-header {
|
||||
border-bottom: 1px solid #fff;
|
||||
background: rgba(47, 119, 209, .4);
|
||||
padding: .5em .6em;
|
||||
}
|
||||
|
||||
|
||||
/**/
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="alert">
|
||||
<div class="alert-item list-item">
|
||||
<div class="container-left">
|
||||
<div class="active-interval">
|
||||
<span class="date">{{ a.startsAt | date:'yyyy-MM-dd' }},</span> <span class="time">{{ a.startsAt | date:'HH:mm' }}</span>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
<span class="time">now</span>
|
||||
</span>
|
||||
</div>
|
||||
<span class="label-matcher label label-white" outline ng-repeat="(name, value) in a.labels | orderBy:name">
|
||||
<span class="lbl small left label label-white" outline ng-repeat="(name, value) in a.labels | orderBy:name">
|
||||
{{ name }} = '{{ value }}'
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
<tbody>
|
||||
<tr ng-repeat="(name, val) in a.annotations | orderBy:name">
|
||||
<td style="padding-right: 3em"><em>{{ name }}</em></td>
|
||||
<td style="whitespace: pre-wrap;">{{ val }}</td>
|
||||
<td style="white-space: pre-wrap;">{{ val }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
|
|||
|
|
@ -1,22 +1,28 @@
|
|||
<div class="route">
|
||||
<div class="route-opts">
|
||||
{{ route.RouteOpts.GroupBy }}
|
||||
<div class="route-header group">
|
||||
<div class="grouping-labels right">
|
||||
<span ng-repeat="l in route.routeOpts.groupBy" class="lbl right badge badge-primary" outline>{{ l }}</span>
|
||||
</div>
|
||||
<div class="route-matchers left">
|
||||
<span ng-repeat="m in route.matchers" class="lbl left badge badge-primary">
|
||||
{{ m.name }} =<span ng-show="m.isRegex">~</span> '{{ m.value }}'
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="route-matchers">
|
||||
{{ route.Matchers }}
|
||||
</div>
|
||||
<div ng-show="route.Groups" class="alert-groups">
|
||||
<div class="alert-group" ng-repeat="group in route.Groups">
|
||||
<div class="group-instance">
|
||||
{{ group.Labels }}
|
||||
<div class="alert-groups">
|
||||
<div class="alert-group" ng-repeat="group in route.groups">
|
||||
<div class="alert-group-header group">
|
||||
<span ng-repeat="(ln, lv) in group.labels" class="lbl left badge badge-white">
|
||||
{{ ln }} = '{{ lv }}'
|
||||
</span>
|
||||
</div>
|
||||
<div ng-repeat="a in group.Alerts">
|
||||
<div ng-repeat="a in group.alerts">
|
||||
<alert class="list-item" a="a"></alert>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="route" ng-repeat="r in route.Routes">
|
||||
<div ng-repeat="r in route.routes">
|
||||
<route route="r"></route>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -79,7 +79,7 @@
|
|||
–
|
||||
<span class="date">{{ sil.endsAt | date:'yyyy-MM-dd' }},</span> <span class="time">{{ sil.endsAt | date:'HH:mm' }}</span>
|
||||
</div>
|
||||
<span class="label-matcher label label-white" outline ng-repeat="m in sil.matchers | orderBy:name">
|
||||
<span class="lbl label label-white" outline ng-repeat="m in sil.matchers | orderBy:name">
|
||||
{{ m.name }} =<span ng-show="m.isRegex">~</span> '{{ m.value }}'
|
||||
</span>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue