mirror of https://github.com/openspug/spug
A web add schedule detail page
parent
cdc887c20b
commit
a0658906ab
|
@ -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)
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -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)
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue