A 添加监控中心任务类型过滤

spug_web/src/pages/monitor/Table.js

@@ -131,6 +131,9 @@ class ComTable extends React.Component {
     if (store.f_name) {
       data = data.filter(item => item['name'].toLowerCase().includes(store.f_name.toLowerCase()))
     }
+    if (store.f_type) {
+      data = data.filter(item => item['type_alias'] === store.f_type)
+    }
     if (store.f_status !== undefined) {
       if (store.f_status === -3) {
         data = data.filter(item => !item['is_active'])

spug_web/src/pages/monitor/index.js

@@ -4,19 +4,25 @@
  * Released under the MIT License.
  */
 import React from 'react';
+import { observer } from 'mobx-react';
 import { Input, Select, Button } from 'antd';
 import { SearchForm, AuthDiv, AuthCard } from 'components';
 import ComTable from './Table';
 import store from './store';
 
-export default function () {
+export default observer(function () {
   return (
     <AuthCard auth="monitor.monitor.view">
       <SearchForm>
-        <SearchForm.Item span={8} title="任务名称">
+        <SearchForm.Item span={6} title="任务名称">
           <Input allowClear onChange={e => store.f_name = e.target.value} placeholder="请输入"/>
         </SearchForm.Item>
-        <SearchForm.Item span={8} title="任务状态">
+        <SearchForm.Item span={6} title="任务类型">
+          <Select allowClear onChange={v => store.f_type = v} placeholder="请选择">
+            {store.types.map(item => <Select.Option key={item} value={item}>{item}</Select.Option>)}
+          </Select>
+        </SearchForm.Item>
+        <SearchForm.Item span={6} title="任务状态">
           <Select allowClear onChange={v => store.f_status = v} placeholder="请选择">
             <Select.Option value={-3}>未激活</Select.Option>
             <Select.Option value={-2}>已激活</Select.Option>
@@ -25,7 +31,7 @@ export default function () {
             <Select.Option value={1}>异常</Select.Option>
           </Select>
         </SearchForm.Item>
-        <SearchForm.Item span={8}>
+        <SearchForm.Item span={6}>
           <Button type="primary" icon="sync" onClick={store.fetchRecords}>刷新</Button>
         </SearchForm.Item>
       </SearchForm>
@@ -35,4 +41,4 @@ export default function () {
       <ComTable/>
     </AuthCard>
   )
-}
+})

spug_web/src/pages/monitor/store.js

@@ -10,21 +10,26 @@ import moment from "moment";
 class Store {
   @observable records = [];
   @observable record = {};
+  @observable types = [];
   @observable isFetching = false;
   @observable formVisible = false;
 
   @observable f_name;
+  @observable f_type;
   @observable f_status;
 
   fetchRecords = () => {
     this.isFetching = true;
     http.get('/api/monitor/')
       .then(res => {
+        const tmp = new Set();
         res.map(item => {
+          tmp.add(item['type_alias']);
           const value = item['latest_run_time'];
           item['latest_run_time'] = value ? moment(value).fromNow() : null;
           return null
         });
+        this.types = Array.from(tmp);
         this.records = res
       })
       .finally(() => this.isFetching = false)