github
/
spug
mirror of https://github.com/openspug/spug
1
0
Fork 0
Code Issues Releases Wiki Activity

A web improve user experience

pull/22/head
雷二猛 2019-11-29 17:48:45 +08:00
parent a0658906ab
commit 03db8ac644
3 changed files with 28 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
spug_web/src/index.js
View File

@ -6,8 +6,12 @@ import zhCN from 'antd/es/locale/zh_CN';
import history from 'libs/history';
import './index.css';
import App from './App';
import moment from 'moment';
import 'moment/locale/zh-cn';
import * as serviceWorker from './serviceWorker';
moment.locale('zh-cn');
ReactDOM.render(
<Router history={history}>
<ConfigProvider locale={zhCN}>

39
spug_web/src/pages/schedule/Info.js
View File

@ -1,8 +1,9 @@
import React from 'react';
import { Modal, Form, Tabs } from 'antd';
import { Modal, Form, Tabs, Spin } from 'antd';
import { StatisticsCard } from 'components';
import http from 'libs/http';
import store from './store';
import moment from 'moment';
class ComForm extends React.Component {
constructor(props) {
@ -36,23 +37,25 @@ class ComForm extends React.Component {
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>
)}
<Spin spinning={this.state.loading}>
<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}（{moment(run_time).fromNow()}）</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>
)}
</Spin>
</Modal>
)
}

4
spug_web/src/pages/schedule/Table.js
View File

@ -6,6 +6,7 @@ import http from 'libs/http';
import store from './store';
import { LinkButton } from "components";
import Info from './Info';
import moment from "moment";
@observer
class ComTable extends React.Component {
@ -54,6 +55,7 @@ class ComTable extends React.Component {
}, {
title: '最近时间',
dataIndex: 'latest_run_time',
render: value => value ? moment(value).fromNow() : 'N/A'
}, {
title: '描述信息',
dataIndex: 'desc',
@ -63,7 +65,7 @@ class ComTable extends React.Component {
width: 180,
render: info => (
<span>
<LinkButton onClick={() => store.showInfo(info)}>详情</LinkButton>
<LinkButton disabled={!info['latest_run_time']} onClick={() => store.showInfo(info)}>详情</LinkButton>
<Divider type="vertical"/>
<LinkButton onClick={() => store.showForm(info)}>编辑</LinkButton>
<Divider type="vertical"/>