From d11ee1258d4079897e4bacdbe4dc3abbb38e504a Mon Sep 17 00:00:00 2001 From: zyupo Date: Wed, 2 Dec 2020 18:59:35 +0800 Subject: [PATCH] =?UTF-8?q?A=20=E7=9B=91=E6=8E=A7=E4=B8=AD=E5=BF=83=20?= =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=88=86=E7=BB=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- spug_api/apps/monitor/models.py | 1 + spug_api/apps/monitor/views.py | 4 +- spug_web/.gitignore | 1 + spug_web/src/pages/monitor/Step1.js | 81 ++++++++++++++++++++--------- spug_web/src/pages/monitor/Step2.js | 2 +- spug_web/src/pages/monitor/Table.js | 3 +- spug_web/src/pages/monitor/index.js | 9 +++- spug_web/src/pages/monitor/store.js | 10 ++-- 8 files changed, 80 insertions(+), 31 deletions(-) diff --git a/spug_api/apps/monitor/models.py b/spug_api/apps/monitor/models.py index 97f8824..177375a 100644 --- a/spug_api/apps/monitor/models.py +++ b/spug_api/apps/monitor/models.py @@ -21,6 +21,7 @@ class Detection(models.Model, ModelMixin): ) name = models.CharField(max_length=50) type = models.CharField(max_length=2, choices=TYPES) + group = models.CharField(max_length=255, null=True) addr = models.CharField(max_length=255) extra = models.TextField(null=True) desc = models.CharField(max_length=255, null=True) diff --git a/spug_api/apps/monitor/views.py b/spug_api/apps/monitor/views.py index c072b2e..e9ba109 100644 --- a/spug_api/apps/monitor/views.py +++ b/spug_api/apps/monitor/views.py @@ -13,12 +13,14 @@ import json class DetectionView(View): def get(self, request): detections = Detection.objects.all() - return json_response(detections) + groups = [x['group'] for x in detections.order_by('group').values('group').distinct()] + return json_response({'groups': groups, 'detections': [x.to_dict() for x in detections]}) def post(self, request): form, error = JsonParser( Argument('id', type=int, required=False), Argument('name', help='请输入任务名称'), + Argument('group', help='请选择任务分组'), Argument('addr', help='请输入监控地址'), Argument('type', filter=lambda x: x in dict(Detection.TYPES), help='请选择监控类型'), Argument('extra', required=False), diff --git a/spug_web/.gitignore b/spug_web/.gitignore index 4d29575..e080423 100644 --- a/spug_web/.gitignore +++ b/spug_web/.gitignore @@ -4,6 +4,7 @@ /node_modules /.pnp .pnp.js +/.idea/ # testing /coverage diff --git a/spug_web/src/pages/monitor/Step1.js b/spug_web/src/pages/monitor/Step1.js index 0453ea5..1aea148 100644 --- a/spug_web/src/pages/monitor/Step1.js +++ b/spug_web/src/pages/monitor/Step1.js @@ -5,6 +5,7 @@ */ import React, { useState, useEffect } from 'react'; import { observer } from 'mobx-react'; +import { ExclamationCircleOutlined } from '@ant-design/icons'; import { Modal, Form, Input, Select, Button } from 'antd'; import TemplateSelector from '../exec/task/TemplateSelector'; import { LinkButton, ACEditor } from 'components'; @@ -22,7 +23,7 @@ export default observer(function () { const [showTmp, setShowTmp] = useState(false); useEffect(() => { - const {type, addr} = store.record; + const { type, addr } = store.record; if (type === '1' && addr) { store.record.sitePrefix = addr.startsWith('http://') ? 'http://' : 'https://'; store.record.domain = store.record.addr.replace(store.record.sitePrefix, '') @@ -31,14 +32,14 @@ export default observer(function () { function handleTest() { setLoading(true) - const {type, sitePrefix, domain} = store.record; + const { type, sitePrefix, domain } = store.record; if (type === '1') store.record.addr = sitePrefix + domain; - http.post('/api/monitor/test/', store.record, {timeout: 120000}) + http.post('/api/monitor/test/', store.record, { timeout: 120000 }) .then(res => { if (res.is_success) { - Modal.success({content: res.message}) + Modal.success({ content: res.message }) } else { - Modal.warning({content: res.message}) + Modal.warning({ content: res.message }) } }) .finally(() => setLoading(false)) @@ -48,39 +49,59 @@ export default observer(function () { store.record.type = v; store.record.addr = undefined; store.record.extra = undefined; + }; + + function handleAddGroup() { + Modal.confirm({ + icon: , + title: '添加监控分组', + content: ( +
+ + store.record.group = e.target.value} /> + + +
+ ), + onOk: () => { + if (store.record.group) { + store.groups.push(store.record.group); + } + }, + }) } const SiteBefore = ( - store.record.sitePrefix = v}> http:// https:// ) function canNext() { - const {type, addr, extra, domain} = store.record; + const { type, addr, extra, domain, group } = store.record; if (type === '1') { - return name && domain + return name && domain && group } else if (type === '5') { - return name && addr + return name && addr && group } else { - return name && addr && extra + return name && addr && extra && group } } function toNext() { store.page += 1; - const {type, sitePrefix, domain} = store.record; + const { type, sitePrefix, domain } = store.record; if (type === '1') store.record.addr = sitePrefix + domain; } function getStyle(t) { - return t.includes(store.record.type) ? {display: 'flex'} : {display: 'none'} + return t.includes(store.record.type) ? { display: 'flex' } : { display: 'none' } } - const {name, desc, type, addr, extra, domain} = store.record; + const { name, desc, type, addr, extra, domain, group } = store.record; return ( -
+ - - store.record.name = e.target.value} placeholder="请输入任务名称"/> + + + + + + + + + + store.record.name = e.target.value} placeholder="请输入监控名称" /> store.record.domain = e.target.value}/> + onChange={e => store.record.domain = e.target.value} /> - store.record.addr = e.target.value}/> + store.record.addr = e.target.value} /> store.record.extra = e.target.value}/> + store.record.extra = e.target.value} /> - store.record.extra = e.target.value}/> + store.record.extra = e.target.value} /> store.record.extra = cleanCommand(e)}/> + onChange={e => store.record.extra = cleanCommand(e)} /> - store.record.desc = e.target.value} placeholder="请输入备注信息"/> + store.record.desc = e.target.value} placeholder="请输入备注信息" /> - + - {showTmp && store.record.extra += v} onCancel={() => setShowTmp(false)}/>} + {showTmp && store.record.extra += v} onCancel={() => setShowTmp(false)} />} ) }) \ No newline at end of file diff --git a/spug_web/src/pages/monitor/Step2.js b/spug_web/src/pages/monitor/Step2.js index a65815d..b0bb04b 100644 --- a/spug_web/src/pages/monitor/Step2.js +++ b/spug_web/src/pages/monitor/Step2.js @@ -34,7 +34,7 @@ export default observer(function () { function handleSubmit() { setLoading(true) const formData = form.getFieldsValue(); - Object.assign(formData, lds.pick(store.record, ['id', 'name', 'desc', 'addr', 'extra', 'type'])) + Object.assign(formData, lds.pick(store.record, ['id', 'name', 'desc', 'addr', 'extra', 'type', 'group'])) formData['id'] = store.record.id; http.post('/api/monitor/', formData) .then(() => { diff --git a/spug_web/src/pages/monitor/Table.js b/spug_web/src/pages/monitor/Table.js index 1a38136..e68f91f 100644 --- a/spug_web/src/pages/monitor/Table.js +++ b/spug_web/src/pages/monitor/Table.js @@ -96,7 +96,8 @@ class ComTable extends React.Component { showTotal: total => `共 ${total} 条`, pageSizeOptions: ['10', '20', '50', '100'] }}> - + + { if ('34'.includes(info.type)) { diff --git a/spug_web/src/pages/monitor/index.js b/spug_web/src/pages/monitor/index.js index e658dce..ae124a6 100644 --- a/spug_web/src/pages/monitor/index.js +++ b/spug_web/src/pages/monitor/index.js @@ -19,7 +19,14 @@ export default observer(function () { 监控中心 - + + + + store.f_name = e.target.value} placeholder="请输入"/> diff --git a/spug_web/src/pages/monitor/store.js b/spug_web/src/pages/monitor/store.js index a985c25..15746ce 100644 --- a/spug_web/src/pages/monitor/store.js +++ b/spug_web/src/pages/monitor/store.js @@ -12,6 +12,7 @@ class Store { @observable records = []; @observable record = {}; @observable types = []; + @observable groups = []; @observable page = 0; @observable isFetching = false; @observable formVisible = false; @@ -20,12 +21,14 @@ class Store { @observable f_type; @observable f_status; @observable f_active = ''; + @observable f_group; @computed get dataSource() { let records = this.records; if (this.f_active) records = records.filter(x => x.is_active === (this.f_active === '1')); if (this.f_name) records = records.filter(x => x.name.toLowerCase().includes(this.f_name.toLowerCase())); if (this.f_type) records = records.filter(x => x.type_alias === this.f_type); + if (this.f_group) records = records.filter(x => x.group === this.f_group); if (this.f_status !== undefined) { if (this.f_status === -1) { records = records.filter(x => x.is_active && !x.latest_status_alias); @@ -39,16 +42,17 @@ class Store { fetchRecords = () => { this.isFetching = true; http.get('/api/monitor/') - .then(res => { + .then(({groups, detections}) => { const tmp = new Set(); - res.map(item => { + detections.map(item => { tmp.add(item['type_alias']); const value = item['latest_run_time']; item['latest_run_time_alias'] = value ? moment(value).fromNow() : null; return null }); this.types = Array.from(tmp); - this.records = res + this.records = detections; + this.groups = groups; }) .finally(() => this.isFetching = false) };