A web add schedule detail page

pull/22/head
雷二猛 2019-11-29 17:35:33 +08:00
parent cdc887c20b
commit a0658906ab
3 changed files with 70 additions and 1 deletions

View File

@ -0,0 +1,61 @@
import React from 'react';
import { Modal, Form, Tabs } from 'antd';
import { StatisticsCard } from 'components';
import http from 'libs/http';
import store from './store';
class ComForm extends React.Component {
constructor(props) {
super(props);
this.state = {
loading: true,
info: {}
}
}
componentDidMount() {
http.get(`/api/schedule/${store.record.id}/`)
.then(info => this.setState({info}))
.finally(() => this.setState({loading: false}))
}
render() {
const {run_time, success, failure, duration, outputs} = this.state.info;
const preStyle = {
marginTop: 5,
backgroundColor: '#eee',
borderRadius: 5,
padding: 10,
maxHeight: 215,
};
return (
<Modal
visible
width={800}
maskClosable={false}
title="任务执行详情"
onCancel={() => store.infoVisible = false}
footer={null}>
<StatisticsCard loading={this.state.loading}>
<StatisticsCard.Item title="执行成功" value={<span style={{color: '#3f8600'}}>{success}</span>}/>
<StatisticsCard.Item title="执行失败" value={<span style={{color: '#cf1322'}}>{failure}</span>}/>
<StatisticsCard.Item bordered={false} title="平均耗时(秒)" value={<span style={{color: ''}}>{duration}</span>}/>
</StatisticsCard>
{outputs && (
<Tabs tabPosition="left" defaultActiveKey="0" style={{width: 700, height: 350, margin: 'auto'}}>
{outputs.map((item, index) => (
<Tabs.TabPane key={`${index}`} tab={item.name}>
<div>执行时间 {run_time}</div>
<div style={{marginTop: 5}}>运行耗时 {item.duration} s</div>
<div style={{marginTop: 5}}>返回状态 {item.code}</div>
<div style={{marginTop: 5}}>执行输出 <pre style={preStyle}>{item.output}</pre></div>
</Tabs.TabPane>
))}
</Tabs>
)}
</Modal>
)
}
}
export default Form.create()(ComForm)

View File

@ -5,6 +5,7 @@ import ComForm from './Form';
import http from 'libs/http';
import store from './store';
import { LinkButton } from "components";
import Info from './Info';
@observer
class ComTable extends React.Component {
@ -62,7 +63,7 @@ class ComTable extends React.Component {
width: 180,
render: info => (
<span>
<LinkButton onClick={() => store.showForm(info)}>详情</LinkButton>
<LinkButton onClick={() => store.showInfo(info)}>详情</LinkButton>
<Divider type="vertical"/>
<LinkButton onClick={() => store.showForm(info)}>编辑</LinkButton>
<Divider type="vertical"/>
@ -127,6 +128,7 @@ class ComTable extends React.Component {
<React.Fragment>
<Table rowKey="id" loading={store.isFetching} dataSource={data} columns={this.columns}/>
{store.formVisible && <ComForm/>}
{store.infoVisible && <Info/>}
</React.Fragment>
)
}

View File

@ -8,6 +8,7 @@ class Store {
@observable targets = [undefined];
@observable isFetching = false;
@observable formVisible = false;
@observable infoVisible = false;
@observable f_status;
@observable f_name;
@ -28,6 +29,11 @@ class Store {
this.record = info
};
showInfo = (info = {}) => {
this.infoVisible = true;
this.record = info
};
addTarget = () => {
this.targets.push(undefined)
};