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()
-    data = {human_date(now - timedelta(days=x + 1)): 0 for x in range(14)}
-    for alarm in Alarm.objects.filter(status='1', created_at__gt=human_date(now - timedelta(days=14))):
-        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)
+    form, error = JsonParser(
+        Argument('type', required=False),
+        Argument('name', required=False)
+    ).parse(request.GET, True)
+    if error is None:
+        now = datetime.now()
+        data = {human_date(now - timedelta(days=x + 1)): 0 for x in range(14)}
+        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 { Card } from 'antd';
+import React, { useState, useEffect } from 'react';
+import { Card, Cascader } from 'antd';
 import { Chart, Geom, Axis, Tooltip } from 'bizcharts';
 import { http } from 'libs';
 
-export default class AlarmTrend extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      loading: true,
-      res: []
-    };
+export default function () {
+  const [loading, setLoading] = useState(true);
+  const [options, setOptions] = useState([]);
+  const [params, setParams] = useState({});
+  const [res, setRes] = useState([]);
+
+  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() {
-    http.get('/api/home/alarm/')
-      .then(res => this.setState({res}))
-      .finally(() => this.setState({loading: false}))
-  }
-
-  render() {
-    const {res, loading} = this.state;
-    return (
-      <Card loading={loading} title="报警趋势">
-        <Chart height={300} data={res} padding={[10, 10, 30, 35]} scale={{value: {alias: '报警次数'}}} forceFit>
-          <Axis name="date"/>
-          <Axis name="value"/>
-          <Tooltip
-            crosshairs={{
-              type: "y"
-            }}
-          />
-          <Geom type="line" position="date*value" size={2} shape={"smooth"}/>
-          <Geom
-            type="point"
-            position="date*value"
-            size={4}
-            shape={"circle"}
-            style={{
-              stroke: "#fff",
-              lineWidth: 1
-            }}
-          />
-        </Chart>
-      </Card>
-    )
-  }
+  return (
+    <Card loading={loading} title="报警趋势" bodyStyle={{height: 353}} extra={(
+      <Cascader changeOnSelect style={{width: 260}} options={options} onChange={handleChange} placeholder="过滤监控项，默认所有"/>
+    )}>
+      <Chart height={300} data={res} padding={[10, 10, 30, 35]} scale={{value: {alias: '报警次数'}}} forceFit>
+        <Axis name="date"/>
+        <Axis name="value"/>
+        <Tooltip
+          crosshairs={{
+            type: "y"
+          }}
+        />
+        <Geom type="line" position="date*value" size={2} shape={"smooth"}/>
+        <Geom
+          type="point"
+          position="date*value"
+          size={4}
+          shape={"circle"}
+          style={{
+            stroke: "#fff",
+            lineWidth: 1
+          }}
+        />
+      </Chart>
+    </Card>
+  )
 }