A web add schedule module

spug_web/package.json

@@ -11,6 +11,7 @@
     "lodash": "^4.17.15",
     "mobx": "^5.15.0",
     "mobx-react": "^6.1.4",
+    "moment": "^2.24.0",
     "react": "^16.11.0",
     "react-ace": "^8.0.0",
     "react-dom": "^16.11.0",

spug_web/src/menus.js

@@ -7,6 +7,7 @@ export default [
       {title: '模板管理', path: '/exec/template'},
     ]
   },
+  {icon: 'schedule', title: '任务计划', path: '/schedule'},
   {
     icon: 'setting', title: '系统管理', child: [
       {title: '账户管理', path: '/system/account'},

spug_web/src/pages/schedule/Form.js

@@ -0,0 +1,230 @@
+import React from 'react';
+import { observer } from 'mobx-react';
+import { Modal, Form, Input, Select, Col, Button, Steps, Tabs, InputNumber, DatePicker, Icon, message } from 'antd';
+import { SHEditor } from 'components';
+import http from 'libs/http';
+import store from './store';
+import hostStore from '../host/store';
+import styles from './index.module.css';
+import moment from 'moment';
+
+@observer
+class ComForm extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: false,
+      type: null,
+      page: 0,
+      args: {[store.record['trigger']]: store.record['trigger_args']},
+      command: store.record['command'],
+    }
+  }
+
+  componentDidMount() {
+    store.targets = store.record.id ? store.record['targets'] : [undefined];
+    if (hostStore.records.length === 0) {
+      hostStore.fetchRecords()
+    }
+  }
+
+  _parse_args = (trigger) => {
+    switch (trigger) {
+      case 'date':
+        return this.state.args['date'].format('YYYY-MM-DD HH:mm:ss');
+      default:
+        return this.state.args[trigger];
+    }
+  };
+
+  handleSubmit = () => {
+    const formData = this.props.form.getFieldsValue();
+    if (formData['trigger'] === 'date' && this.state.args['date'] <= moment()) {
+      return message.error('任务执行时间不能早于当前时间')
+    }
+    this.setState({loading: true});
+    formData['id'] = store.record.id;
+    formData['command'] = this.state.command;
+    formData['targets'] = store.targets.filter(x => x);
+    formData['trigger_args'] = this._parse_args(formData['trigger']);
+    http.post('/api/schedule/', formData)
+      .then(res => {
+        message.success('操作成功');
+        store.formVisible = false;
+        store.fetchRecords()
+      }, () => this.setState({loading: false}))
+  };
+
+  handleAddZone = () => {
+    Modal.confirm({
+      icon: 'exclamation-circle',
+      title: '添加任务类型',
+      content: this.addZoneForm,
+      onOk: () => {
+        if (this.state.type) {
+          store.types.push(this.state.type);
+          this.props.form.setFieldsValue({'type': this.state.type})
+        }
+      },
+    })
+  };
+
+  addZoneForm = (
+    <Form>
+      <Form.Item required label="任务类型">
+        <Input onChange={val => this.setState({type: val.target.value})}/>
+      </Form.Item>
+    </Form>
+  );
+
+  handleArgs = (type, value) => {
+    const args = Object.assign(this.state.args, {[type]: value});
+    this.setState({args})
+  };
+
+  verifyButtonStatus = () => {
+    const data = this.props.form.getFieldsValue();
+    const b1 = data['type'] && data['name'] && this.state.command;
+    const b2 = store.targets.filter(x => x).length > 0;
+    const b3 = this.state.args[data['trigger']];
+    return [b1, b2, b3];
+  };
+
+  render() {
+    const info = store.record;
+    const {getFieldDecorator} = this.props.form;
+    const {page, args, loading} = this.state;
+    const [b1, b2, b3] = this.verifyButtonStatus();
+    const itemLayout = {
+      labelCol: {span: 6},
+      wrapperCol: {span: 14}
+    };
+    const itemTailLayout = {
+      labelCol: {span: 6},
+      wrapperCol: {span: 14, offset: 6}
+    };
+    return (
+      <Modal
+        visible
+        width={800}
+        maskClosable={false}
+        title={store.record.id ? '编辑任务' : '新建任务'}
+        okText={page === 0 ? '下一步' : '确定'}
+        onCancel={() => store.formVisible = false}
+        footer={null}>
+        <Steps current={page} className={styles.steps}>
+          <Steps.Step key={0} title="创建任务"/>
+          <Steps.Step key={1} title="选择执行对象"/>
+          <Steps.Step key={2} title="设置触发器"/>
+        </Steps>
+        <Form>
+          <div style={{display: page === 0 ? 'block' : 'none'}}>
+            <Form.Item {...itemLayout} required label="任务类型">
+              <Col span={16}>
+                {getFieldDecorator('type', {initialValue: info['type']})(
+                  <Select placeholder="请选择任务类型">
+                    {store.types.map(item => (
+                      <Select.Option value={item} key={item}>{item}</Select.Option>
+                    ))}
+                  </Select>
+                )}
+              </Col>
+              <Col span={6} offset={2}>
+                <Button type="link" onClick={this.handleAddZone}>添加类型</Button>
+              </Col>
+            </Form.Item>
+            <Form.Item {...itemLayout} required label="任务名称">
+              {getFieldDecorator('name', {initialValue: info['name']})(
+                <Input placeholder="请输入任务名称"/>
+              )}
+            </Form.Item>
+            <Form.Item {...itemLayout} required label="任务内容">
+              <SHEditor
+                value={this.state.command}
+                onChange={val => this.setState({command: val})}
+                height="300px"/>
+            </Form.Item>
+            <Form.Item {...itemLayout} label="备注信息">
+              {getFieldDecorator('desc', {initialValue: info['desc']})(
+                <Input.TextArea placeholder="请输入模板备注信息"/>
+              )}
+            </Form.Item>
+          </div>
+          <div style={{minHeight: 224, display: page === 1 ? 'block' : 'none'}}>
+            <Form.Item {...itemLayout} required label="执行对象">
+              {store.targets.map((id, index) => (
+                <React.Fragment key={index}>
+                  <Select
+                    value={id}
+                    placeholder="请选择"
+                    style={{width: '60%', marginRight: 10}}
+                    onChange={v => store.editTarget(index, v)}>
+                    <Select.Option value="local" disabled={store.targets.includes('local')}>本机</Select.Option>
+                    {hostStore.records.map(item => (
+                      <Select.Option key={item.id} value={item.id} disabled={store.targets.includes(item.id)}>
+                        {item.name}({item['hostname']}:{item['port']})
+                      </Select.Option>
+                    ))}
+                  </Select>
+                  {store.targets.length > 1 && (
+                    <Icon className={styles.delIcon} type="minus-circle-o" onClick={() => store.delTarget(index)}/>
+                  )}
+                </React.Fragment>
+              ))}
+            </Form.Item>
+            <Form.Item {...itemTailLayout}>
+              <Button type="dashed" style={{width: '60%'}} onClick={store.addTarget}>
+                <Icon type="plus"/>添加执行对象
+              </Button>
+            </Form.Item>
+          </div>
+          <div style={{display: page === 2 ? 'block' : 'none'}}>
+            <Form.Item {...itemTailLayout}>
+              {getFieldDecorator('trigger', {valuePropName: 'activeKey', initialValue: info['trigger'] || 'interval'})(
+                <Tabs tabPosition="left" style={{minHeight: 200}}>
+                  <Tabs.TabPane tab="普通间隔" key="interval">
+                    <Form.Item required label="间隔时间(秒)" extra="每隔指定n秒执行一次。">
+                      <InputNumber
+                        style={{width: 150}}
+                        placeholder="请输入"
+                        value={args['interval']}
+                        onChange={v => this.handleArgs('interval', v)}/>
+                    </Form.Item>
+                  </Tabs.TabPane>
+                  <Tabs.TabPane tab="一次性" key="date">
+                    <Form.Item required label="执行时间" extra="仅在指定时间运行一次。">
+                      <DatePicker
+                        showTime
+                        disabledDate={v => v && v.format('YYYY-MM-DD') < moment().format('YYYY-MM-DD')}
+                        style={{width: 150}}
+                        placeholder="请选择执行时间"
+                        onOk={() => false}
+                        value={args['date'] ? moment(args['date']) : undefined}
+                        onChange={v => this.handleArgs('date', v)}/>
+                    </Form.Item>
+                  </Tabs.TabPane>
+                  <Tabs.TabPane tab="UNIX Cron" key="cron">
+                  </Tabs.TabPane>
+                  <Tabs.TabPane tab="日历间隔" key="calendarinterval">
+                  </Tabs.TabPane>
+                </Tabs>
+              )}
+            </Form.Item>
+          </div>
+          <Form.Item {...itemTailLayout}>
+            {page === 2 &&
+            <Button disabled={!b3} type="primary" onClick={this.handleSubmit} loading={loading}>提交</Button>}
+            {page === 0 &&
+            <Button disabled={!b1} type="primary" onClick={() => this.setState({page: page + 1})}>下一步</Button>}
+            {page === 1 &&
+            <Button disabled={!b2} type="primary" onClick={() => this.setState({page: page + 1})}>下一步</Button>}
+            {page !== 0 &&
+            <Button style={{marginLeft: 20}} onClick={() => this.setState({page: page - 1})}>上一步</Button>}
+          </Form.Item>
+        </Form>
+      </Modal>
+    )
+  }
+}
+
+export default Form.create()(ComForm)

spug_web/src/pages/schedule/Table.js

@@ -0,0 +1,102 @@
+import React from 'react';
+import { observer } from 'mobx-react';
+import { Table, Divider, Modal, Tag, message } from 'antd';
+import ComForm from './Form';
+import http from 'libs/http';
+import store from './store';
+import { LinkButton } from "components";
+
+@observer
+class ComTable extends React.Component {
+  componentDidMount() {
+    store.fetchRecords()
+  }
+
+  colors = ['green', 'orange', 'red'];
+
+  columns = [{
+    title: '序号',
+    key: 'series',
+    render: (_, __, index) => index + 1,
+    width: 80,
+  }, {
+    title: '任务名称',
+    dataIndex: 'name',
+  }, {
+    title: '任务类型',
+    dataIndex: 'type',
+  }, {
+    title: '最新状态',
+    render: info => {
+      if (info.is_active) {
+        return <Tag color={this.colors[info['latest_status']]}>{info['latest_status_alias']}</Tag>
+      } else {
+        return <Tag>未激活</Tag>
+      }
+    },
+  }, {
+    title: '最近时间',
+    dataIndex: 'latest_run_time',
+  }, {
+    title: '描述信息',
+    dataIndex: 'desc',
+    ellipsis: true
+  }, {
+    title: '操作',
+    render: info => (
+      <span>
+        <LinkButton onClick={() => this.handleActive(info)}>{info.is_active ? '禁用' : '激活'}</LinkButton>
+        <Divider type="vertical"/>
+        <LinkButton onClick={() => store.showForm(info)}>编辑</LinkButton>
+        <Divider type="vertical"/>
+        <LinkButton onClick={() => this.handleDelete(info)}>删除</LinkButton>
+      </span>
+    )
+  }];
+
+  handleActive = (text) => {
+    Modal.confirm({
+      title: '删除确认',
+      content: `确定要${text.is_active ? '禁用' : '激活'}任务【${text['name']}】?`,
+      onOk: () => {
+        return http.patch('/api/schedule/', {id: text.id, is_active: !text.is_active})
+          .then(() => {
+            message.success('操作成功');
+            store.fetchRecords()
+          })
+      }
+    })
+  };
+
+  handleDelete = (text) => {
+    Modal.confirm({
+      title: '删除确认',
+      content: `确定要删除【${text['name']}】?`,
+      onOk: () => {
+        return http.delete('/api/schedule/', {params: {id: text.id}})
+          .then(() => {
+            message.success('删除成功');
+            store.fetchRecords()
+          })
+      }
+    })
+  };
+
+  render() {
+    let data = store.records;
+    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'].toLowerCase().includes(store.f_type.toLowerCase()))
+    }
+    return (
+      <React.Fragment>
+        <Table rowKey="id" loading={store.isFetching} dataSource={data} columns={this.columns}/>
+        {store.formVisible && <ComForm/>}
+      </React.Fragment>
+    )
+  }
+}
+
+export default ComTable

spug_web/src/pages/schedule/index.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { observer } from 'mobx-react';
+import { Card, Input, Select, Button } from 'antd';
+import { SearchForm } from 'components';
+import ComTable from './Table';
+import store from './store';
+
+export default observer(function () {
+  return (
+    <Card>
+      <SearchForm>
+        <SearchForm.Item span={8} title="任务类型">
+          <Select allowClear onChange={v => store.f_type = v} placeholder="请选择">
+            {store.types.map(item => (
+              <Select.Option value={item} key={item}>{item}</Select.Option>
+            ))}
+          </Select>
+        </SearchForm.Item>
+        <SearchForm.Item span={8} title="任务名称">
+          <Input allowClear onChange={e => store.f_name = e.target.value} placeholder="请输入"/>
+        </SearchForm.Item>
+        <SearchForm.Item span={8}>
+          <Button type="primary" icon="sync" onClick={store.fetchRecords}>刷新</Button>
+        </SearchForm.Item>
+      </SearchForm>
+      <div style={{marginBottom: 16}}>
+        <Button type="primary" icon="plus" onClick={() => store.showForm()}>新建</Button>
+      </div>
+      <ComTable/>
+    </Card>
+  )
+})

spug_web/src/pages/schedule/index.module.css

@@ -0,0 +1,10 @@
+.steps {
+    width: 520px;
+    margin: 0 auto 30px;
+}
+
+.delIcon {
+    font-size: 24px;
+    position: relative;
+    top: 4px
+}

spug_web/src/pages/schedule/routes.js

@@ -0,0 +1,7 @@
+import { makeRoute } from "../../libs/router";
+import Index from './index';
+
+
+export default [
+  makeRoute('', Index),
+]

spug_web/src/pages/schedule/store.js

@@ -0,0 +1,43 @@
+import { observable } from "mobx";
+import http from 'libs/http';
+
+class Store {
+  @observable records = [];
+  @observable types = [];
+  @observable record = {};
+  @observable targets = [undefined];
+  @observable isFetching = false;
+  @observable formVisible = false;
+
+  @observable f_name;
+  @observable f_type;
+
+  fetchRecords = () => {
+    this.isFetching = true;
+    http.get('/api/schedule/')
+      .then(({types, tasks}) => {
+        this.records = tasks;
+        this.types = types
+      })
+      .finally(() => this.isFetching = false)
+  };
+
+  showForm = (info = {}) => {
+    this.formVisible = true;
+    this.record = info
+  };
+
+  addTarget = () => {
+    this.targets.push(undefined)
+  };
+
+  editTarget = (index, v) => {
+    this.targets[index] = v
+  };
+
+  delTarget = (index) => {
+    this.targets.splice(index, 1)
+  }
+}
+
+export default new Store()

spug_web/src/routes.js

@@ -4,6 +4,7 @@ import homeRoutes from './pages/home/routes';
 import hostRoutes from './pages/host/routes';
 import systemRoutes from './pages/system/routes';
 import execRoutes from './pages/exec/routes';
+import scheduleRoutes from './pages/schedule/routes';
 
 
 export default [
@@ -11,4 +12,5 @@ export default [
   makeModuleRoute('/host', hostRoutes),
   makeModuleRoute('/system', systemRoutes),
   makeModuleRoute('/exec', execRoutes),
+  makeModuleRoute('/schedule', scheduleRoutes),
 ]