Skip to content

Commit

Permalink
add line graph
Browse files Browse the repository at this point in the history
  • Loading branch information
@mylxsw
mylxsw committed Dec 4, 2020
1 parent 8d089dd commit a418e96
Show file tree
Hide file tree
Showing 8 changed files with 53,137 additions and 52,316 deletions.
23 changes: 13 additions & 10 deletions api/controller/group.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,16 +48,8 @@ type GroupsGroupResp struct {
CollectTimeRemain int64 `json:"collect_time_remain"`
}

// Groups list all event groups
// Arguments:
// - offset/limit
// - status
// - rule_id
// - user_id
func (g GroupController) Groups(ctx web.Context, groupRepo repository.EventGroupRepo, userRepo repository.UserRepo) (*GroupsResp, error) {
offset, limit := offsetAndLimit(ctx)
func groupFilter(ctx web.Context) bson.M {
filter := bson.M{}

status := ctx.Input("status")
if status != "" {
filter["status"] = status
Expand All @@ -78,7 +70,18 @@ func (g GroupController) Groups(ctx web.Context, groupRepo repository.EventGroup
filter["actions.meta"] = bson.M{"$regex": fmt.Sprintf(`"robot_id":"%s"`, dingID)}
}

grps, next, err := groupRepo.Paginate(filter, offset, limit)
return filter
}

// Groups list all event groups
// Arguments:
// - offset/limit
// - status
// - rule_id
// - user_id
func (g GroupController) Groups(ctx web.Context, groupRepo repository.EventGroupRepo, userRepo repository.UserRepo) (*GroupsResp, error) {
offset, limit := offsetAndLimit(ctx)
grps, next, err := groupRepo.Paginate(groupFilter(ctx), offset, limit)
if err != nil {
return nil, web.WrapJSONError(err, http.StatusInternalServerError)
}
Expand Down
24 changes: 5 additions & 19 deletions api/controller/statistics.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,10 +42,10 @@ type MessageGroupByDatetimeCount struct {

// DailyGroupCounts 每日报警次数汇总
func (s *StatisticsController) DailyGroupCounts(ctx web.Context, groupRepo repository.EventGroupRepo) ([]MessageGroupByDatetimeCount, error) {
timeoutCtx, cancel := context.WithTimeout(ctx.Context(), 5*time.Second)
timeoutCtx, cancel := context.WithTimeout(ctx.Context(), 15*time.Second)
defer cancel()

dailyCounts, err := groupRepo.StatByDatetimeCount(timeoutCtx, time.Now().Add(-30*24*time.Hour), time.Now(), 24)
dailyCounts, err := groupRepo.StatByDatetimeCount(timeoutCtx, groupFilter(ctx), time.Now().Add(-30*24*time.Hour), time.Now(), 24)
if err != nil {
return nil, err
}
Expand Down Expand Up @@ -112,12 +112,12 @@ type EventByDatetimeCount struct {
// EventCountInPeriod 统计周期内的事件数量
// 支持的参数: days/step/format/meta/tags/origin/status/relation_id/group_id/event_id
func (s *StatisticsController) EventCountInPeriod(webCtx web.Context, evtRepo repository.EventRepo) ([]EventByDatetimeCount, error) {
ctx, cancel := context.WithTimeout(webCtx.Context(), 5*time.Second)
ctx, cancel := context.WithTimeout(webCtx.Context(), 15*time.Second)
defer cancel()

dayRange := webCtx.IntInput("days", 3)
dateTimeFormat := webCtx.InputWithDefault("format", "01-02 15:00")
step := webCtx.Int64Input("step", 1)
var step int64 = 1

startDate := time.Now().Add(-time.Duration(dayRange*24) * time.Hour)
endDate := time.Now()
Expand All @@ -142,22 +142,8 @@ func (s *StatisticsController) EventCountInPeriod(webCtx web.Context, evtRepo re
dailyCountsByDate[datetime] = d
}

// 找到查询数据集中与第一个元素事件最接近的时间
// 该时间与第一个元素事件的差值就是时间段间隔的偏移，步长减去
// 偏移来实现时间范围和从 DB 中查询出的时间范围一致
diffHour := 0.0
startDateTmp := startDate
for startDateTmp.Before(endDate) || startDateTmp.Equal(endDate) {
diffHour = dailyCounts[0].Datetime.Sub(startDateTmp).Hours()
if diffHour <= float64(step) {
break
}

startDateTmp = startDateTmp.Add(time.Duration(step) * time.Hour)
}

results := make([]EventByDatetimeCount, 0)
startDateTmp = startDate.Add(time.Duration(step-int64(diffHour)) * time.Hour)
startDateTmp := startDate.Add(time.Duration(step) * time.Hour)
for startDateTmp.Before(endDate) || startDateTmp.Equal(endDate) {
startDateF := startDateTmp.Format(dateTimeFormat)
if d, ok := dailyCountsByDate[startDateF]; ok {
Expand Down
105,078 changes: 52,835 additions & 52,243 deletions api/static.go
View file

Large diffs are not rendered by default.

87 changes: 86 additions & 1 deletion dashboard/src/views/Events.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,10 @@
</b-media>
</div>

<b-row>
<v-charts :options="eventsByDatetime" style="width: 100%;"></v-charts>
</b-row>

</b-card-body>
</b-card>

Expand Down Expand Up @@ -106,9 +110,24 @@

<script>
import axios from 'axios';
import Echarts from 'vue-echarts';
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/axis';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/toolbox';
import 'echarts/lib/component/title';
import 'echarts/lib/chart/line';
import 'echarts/lib/component/polar';
import 'echarts/lib/component/dataZoom';
import { graphic } from 'echarts/lib/export';
export default {
name: 'Events',
components: {
'v-charts': Echarts,
},
data() {
return {
search: {
Expand Down Expand Up @@ -139,7 +158,65 @@
event_note_form: {
note: '',
event_id: null,
}
},
eventsByDatetime: {
title: {left: 'left', text: '事件数量时间分布'},
tooltip: {
trigger: 'axis',
},
xAxis: {
type: 'category',
data: []
},
yAxis: {
type: 'value'
},
grid: {left: 50},
dataZoom: [{
type: 'inside',
start: 50,
end: 100
},{
start: 50,
end: 100,
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
handleSize: '80%',
handleStyle: {
color: '#fff',
shadowBlur: 3,
shadowColor: 'rgba(0, 0, 0, 0.6)',
shadowOffsetX: 2,
shadowOffsetY: 2
}
}],
toolbox: {
　　　　show:true,
　　　　 feature:{
　　　　　 dataZoom: {
　　　　　　 yAxisIndex:"none"
　　　　　 },
　　　　 }
　　　 },
series: {
smooth: true,
name: '事件数量',
data: [],
type: 'line',
sampling: 'average',
itemStyle: {
color: 'rgb(255, 70, 131)'
},
areaStyle: {
color: new graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgb(255, 158, 68)'
}, {
offset: 1,
color: 'rgb(255, 70, 131)'
}])
}
}
},
};
},
watch: {
Expand Down Expand Up @@ -215,6 +292,12 @@
this.ErrorBox(error)
});
},
loadCharts(relation_id) {
axios.get('/api/statistics/events/period-counts/', {params: {relation_id: relation_id, days: 7}}).then(resp => {
this.eventsByDatetime.xAxis.data = resp.data.map(s => s.datetime);
this.eventsByDatetime.series.data = resp.data.map(s => s.total);
}).catch(error => {this.ToastError(error)});
},
loadMore() {
let params = this.$route.query;
params.offset = this.cur;
Expand Down Expand Up @@ -249,6 +332,8 @@
axios.get('/api/event-relations/' + this.$route.query.relation_id + '/notes/').then(response => {
this.relationNotes = response.data;
}).catch(error => {this.ToastError(error)})
this.loadCharts(this.$route.query.relation_id);
}
}
},
Expand Down
88 changes: 87 additions & 1 deletion dashboard/src/views/Groups.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
<b-badge :variant="$route.query.status === undefined ? 'primary':''" class="mr-1" :to="'/'">全部</b-badge>
<b-badge :variant="$route.query.status === status.value ? 'primary': ''" v-for="(status, index) in statuses" :key="index" class="mr-1" :to="'/?status=' + status.value">{{ status.name }}</b-badge>
</b-card-text>
<v-charts :options="alertByDatetime" style="width: 100%;" ref="alertByDatetimeChart"></v-charts>
</b-card>
<b-table :items="groups" :fields="fields" :busy="isBusy" show-empty hover>
<template v-slot:cell(id)="row">
Expand Down Expand Up @@ -75,9 +76,25 @@
<script>
import moment from 'moment';
import axios from 'axios';
import Echarts from 'vue-echarts';
import 'echarts/lib/chart/line';
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/axis';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/toolbox';
import 'echarts/lib/component/polar';
import 'echarts/lib/component/title';
import 'echarts/lib/component/dataZoom';
import { graphic } from 'echarts/lib/export'
export default {
name: 'Groups',
components: {
'v-charts': Echarts,
},
data() {
return {
groups: [],
Expand All @@ -99,7 +116,67 @@
{value: 'ok', name:'完成'},
{value: 'failed', name:'失败'},
{value: 'canceled', name:'取消'},
]
],
alertByDatetime: {
title: {left: 'left', text: '事件组时间分布'},
tooltip: {
trigger: 'axis',
},
xAxis: {
type: 'category',
data: []
},
yAxis: {
type: 'value',
},
grid: {
left: 50,
},
dataZoom: [{
type: 'inside',
start: 0,
end: 100
},{
start: 0,
end: 100,
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
handleSize: '80%',
handleStyle: {
color: '#fff',
shadowBlur: 3,
shadowColor: 'rgba(0, 0, 0, 0.6)',
shadowOffsetX: 2,
shadowOffsetY: 2
}
}],
toolbox: {
　　　　show:true,
　　　　 feature:{
　　　　　 dataZoom: {
　　　　　　 yAxisIndex:"none"
　　　　　 },
　　　　 }
　　　 },
series: {
smooth: true,
name: '事件组数量',
data: [],
type: 'line',
sampling: 'average',
itemStyle: {
color: 'rgb(255, 70, 131)'
},
areaStyle: {
color: new graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgb(255, 158, 68)'
}, {
offset: 1,
color: 'rgb(255, 70, 131)'
}])
}
}
}
};
},
watch: {
Expand Down Expand Up @@ -153,10 +230,19 @@
}).catch(error => {
this.ToastError(error)
});
axios.get('/api/statistics/daily-group-counts/', {
params: params,
}).then(response => {
this.alertByDatetime.xAxis.data = response.data.map(s => s.datetime);
this.alertByDatetime.series.data = response.data.map(s => s.total)
}).catch(error => {this.ToastError(error)});
}
},
mounted() {
this.reload();
// this.$refs.alertByDatetimeChart.chart.on('axisareaselected', () => {alert("hello")});
}
}
</script>
Expand Down
Loading

0 comments on commit a418e96

Please sign in to comment.