U improve alarm trend

spug_api/apps/home/views.py

@@ -32,14 +32,20 @@ def get_statistic(request):
 
 
 def get_alarm(request):
-    now = datetime.now()
+    form, error = JsonParser(
-    data = {human_date(now - timedelta(days=x + 1)): 0 for x in range(14)}
+        Argument('type', required=False),
-    for alarm in Alarm.objects.filter(status='1', created_at__gt=human_date(now - timedelta(days=14))):
+        Argument('name', required=False)
-        date = alarm.created_at[:10]
+    ).parse(request.GET, True)
-        if date in data:
+    if error is None:
-            data[date] += 1
+        now = datetime.now()
-    data = [{'date': k, 'value': v} for k, v in data.items()]
+        data = {human_date(now - timedelta(days=x + 1)): 0 for x in range(14)}
-    return json_response(data)
+        for alarm in Alarm.objects.filter(status='1', created_at__gt=human_date(now - timedelta(days=14)), **form):
+            date = alarm.created_at[:10]
+            if date in data:
+                data[date] += 1
+        data = [{'date': k, 'value': v} for k, v in data.items()]
+        return json_response(data)
+    return json_response(error=error)
 
 
 def get_request(request):

spug_web/src/pages/home/AlarmTrend.js

@@ -3,51 +3,75 @@
  * Copyright (c) <spug.dev@gmail.com>
  * Released under the AGPL-3.0 License.
  */
-import React from 'react';
+import React, { useState, useEffect } from 'react';
-import { Card } from 'antd';
+import { Card, Cascader } from 'antd';
 import { Chart, Geom, Axis, Tooltip } from 'bizcharts';
 import { http } from 'libs';
 
-export default class AlarmTrend extends React.Component {
+export default function () {
-  constructor(props) {
+  const [loading, setLoading] = useState(true);
-    super(props);
+  const [options, setOptions] = useState([]);
-    this.state = {
+  const [params, setParams] = useState({});
-      loading: true,
+  const [res, setRes] = useState([]);
-      res: []
+
-    };
+  useEffect(() => {
+    setLoading(true);
+    http.get('/api/home/alarm/', {params})
+      .then(res => setRes(res))
+      .finally(() => setLoading(false))
+  }, [params])
+
+  useEffect(() => {
+    const data = {};
+    http.get('/api/monitor/')
+      .then(res => {
+        for (let item of res) {
+          if (!data[item.type]) {
+            data[item.type] = {value: item.type_alias, label: item.type_alias, children: []}
+          }
+          data[item.type].children.push({value: item.name, label: item.name})
+        }
+        setOptions(Object.values(data))
+      })
+  })
+
+  function handleChange(v) {
+    switch (v.length) {
+      case 2:
+        setParams({name: v[1]});
+        break;
+      case 1:
+        setParams({type: v[0]});
+        break;
+      default:
+        setParams({})
+    }
   }
 
-  componentDidMount() {
+  return (
-    http.get('/api/home/alarm/')
+    <Card loading={loading} title="报警趋势" bodyStyle={{height: 353}} extra={(
-      .then(res => this.setState({res}))
+      <Cascader changeOnSelect style={{width: 260}} options={options} onChange={handleChange} placeholder="过滤监控项，默认所有"/>
-      .finally(() => this.setState({loading: false}))
+    )}>
-  }
+      <Chart height={300} data={res} padding={[10, 10, 30, 35]} scale={{value: {alias: '报警次数'}}} forceFit>
-
+        <Axis name="date"/>
-  render() {
+        <Axis name="value"/>
-    const {res, loading} = this.state;
+        <Tooltip
-    return (
+          crosshairs={{
-      <Card loading={loading} title="报警趋势">
+            type: "y"
-        <Chart height={300} data={res} padding={[10, 10, 30, 35]} scale={{value: {alias: '报警次数'}}} forceFit>
+          }}
-          <Axis name="date"/>
+        />
-          <Axis name="value"/>
+        <Geom type="line" position="date*value" size={2} shape={"smooth"}/>
-          <Tooltip
+        <Geom
-            crosshairs={{
+          type="point"
-              type: "y"
+          position="date*value"
-            }}
+          size={4}
-          />
+          shape={"circle"}
-          <Geom type="line" position="date*value" size={2} shape={"smooth"}/>
+          style={{
-          <Geom
+            stroke: "#fff",
-            type="point"
+            lineWidth: 1
-            position="date*value"
+          }}
-            size={4}
+        />
-            shape={"circle"}
+      </Chart>
-            style={{
+    </Card>
-              stroke: "#fff",
+  )
-              lineWidth: 1
-            }}
-          />
-        </Chart>
-      </Card>
-    )
-  }
 }