From 03db8ac6448aeea8537ebbf111e7ccf9773694e4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=B7=E4=BA=8C=E7=8C=9B?= <live1989@foxmail.com>
Date: Fri, 29 Nov 2019 17:48:45 +0800
Subject: [PATCH] A web improve user experience

---
 spug_web/src/index.js                |  4 +++
 spug_web/src/pages/schedule/Info.js  | 39 +++++++++++++++-------------
 spug_web/src/pages/schedule/Table.js |  4 ++-
 3 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/spug_web/src/index.js b/spug_web/src/index.js
index 24ed562..d7ae3a1 100644
--- a/spug_web/src/index.js
+++ b/spug_web/src/index.js
@@ -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}>
diff --git a/spug_web/src/pages/schedule/Info.js b/spug_web/src/pages/schedule/Info.js
index 31a4ee3..1436a56 100644
--- a/spug_web/src/pages/schedule/Info.js
+++ b/spug_web/src/pages/schedule/Info.js
@@ -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>
     )
   }
diff --git a/spug_web/src/pages/schedule/Table.js b/spug_web/src/pages/schedule/Table.js
index 861d91e..73ad2c7 100644
--- a/spug_web/src/pages/schedule/Table.js
+++ b/spug_web/src/pages/schedule/Table.js
@@ -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"/>