Add hosts table view

Add hosts api;
Add hosts table view for react theme;

Change-Id: I07efe8a5ac052ddc750249224efdd5c00c72e436
Signed-off-by: Haitao Yue <hightall@me.com>

Author: hightall

src/resources/host_api.py

@@ -22,6 +22,16 @@
                         url_prefix='/{}'.format("api"))
 
 
+@bp_host_api.route('/hosts', methods=['GET'])
+def hosts_list():
+    logger.info("/hosts_list method=" + r.method)
+    request_debug(r, logger)
+    col_filter = dict((key, r.args.get(key)) for key in r.args)
+    items = list(host_handler.list(filter_data=col_filter))
+
+    return make_ok_response(data=items)
+
+
 @bp_host_api.route('/host/<host_id>', methods=['GET'])
 def host_query(host_id):
     request_debug(r, logger)

src/themes/react/static/js/components/hosts/list.jsx

@@ -0,0 +1,84 @@
+/**
+ * Created by yuehaitao on 2017/2/7.
+ */
+import React, { PropTypes } from 'react'
+import { Badge, Tag, Button, Table, Popconfirm, Pagination } from 'antd'
+import styles from './list.less'
+
+function list({loadingList, dataSource, onDeleteItem, onSelectItem, onSelectTagItem}) {
+    const columns = [
+        {
+            title: 'Name',
+            dataIndex: 'name',
+            key: 'name',
+            render: (text, record) => (
+                <a onClick={() => onSelectItem(record.id)}>{text}</a>
+            )
+        },
+        {
+            title: 'Status',
+            dataIndex: 'status',
+            key: 'status',
+            render: (text) => (
+                <span>{text == "active" ? <Badge status="success" text={text}/> : <Badge status="warning" text={text} />}</span>
+            )
+        },
+        {
+            title: 'Create Time',
+            dataIndex: 'create_ts',
+            key: 'create_ts'
+        },
+        {
+            title: 'Log Level',
+            dataIndex: 'log_level',
+            key: 'log_level'
+        },
+        {
+            title: 'Type',
+            dataIndex: 'type',
+            key: 'type'
+        },
+        {
+            title: 'Log Type',
+            dataIndex: 'log_type',
+            key: 'log_type'
+        },
+        {
+            title: 'Operation',
+            key: 'operation',
+            width: 100,
+            render: (text, record) => (
+                <p>
+                    <Popconfirm title="Confirm to Delete？" onConfirm={() => onDeleteItem(record.id, record.name)}>
+                        <a style={{color: "red"}}>Delete</a>
+                    </Popconfirm>
+                </p>
+            )
+        }
+    ]
+
+    return (
+        <div>
+            <Table
+                className={styles.table}
+                columns={columns}
+                dataSource={dataSource}
+                loading={loadingList}
+                size="small"
+                rowKey={record => record.id}
+            />
+        </div>
+    )
+}
+
+list.propTypes = {
+    loadingList: PropTypes.any,
+    dataSource: PropTypes.array,
+    pagination: PropTypes.any,
+    onPageChange: PropTypes.func,
+    onDeleteItem: PropTypes.func,
+    onSelectItem: PropTypes.func,
+    onSelectTagItem: PropTypes.func
+}
+
+export default list

src/themes/react/static/js/components/hosts/list.less

@@ -0,0 +1,11 @@
+.avatar{
+  line-height: 1;
+  img{
+    border-radius: 50%;
+  }
+}
+.table{
+  td{
+    height: 38px;
+  }
+}

src/themes/react/static/js/models/host.js

@@ -1,27 +1,52 @@
 /**
  * Created by yuehaitao on 2017/1/18.
  */
+import {getHosts} from '../services/hosts'
+import {message} from 'antd'
+
 export default {
     namespace: 'host',
     state: {
+        loadingHosts: false,
         hosts: []
     },
     subscriptions: {
         setup({dispatch, history}) {
             history.listen(location => {
                 if (location.pathname == '/hosts') {
-                    dispatch({type: 'queryHostList'})
+                    dispatch({type: 'getHosts'})
                 }
             })
         }
     },
     effects: {
-        *queryHostList({
-           payload
-        }, {call, put}) {
-            console.log("query host list")
+        *getHosts({payload}, {call, put}) {
+            yield put({type: 'showLoadingHosts'})
+            try {
+                const data = yield call(getHosts)
+                if (data && data.status == "OK") {
+                    yield put({type: 'getHostsSuccess', payload: {
+                        hosts: data.data
+                    }})
+                } else {
+                    message.error("get hosts list failed")
+                    yield put({type: 'hideLoadingHosts'})
+                }
+            } catch (e) {
+                message.error("get hosts list failed")
+                yield put({type: 'hideLoadingHosts'})
+            }
         }
     },
     reducers: {
+        showLoadingHosts(state) {
+            return {...state, loadingHosts: true}
+        },
+        hideLoadingHosts(state) {
+            return {...state, loadingHosts: false}
+        },
+        getHostsSuccess(state, action) {
+            return {...state, ...action.payload, loadingHosts: false}
+        }
     }
 }

src/themes/react/static/js/routes/hosts.js

@@ -1,9 +1,23 @@
 import React from 'react'
+import HostsList from '../components/hosts/list'
+import { connect } from 'dva'
 
-const Hosts = () => <div className='content-inner'>
-  <div>
-    <h1>Hosts</h1>
-  </div>
-</div>
+class Hosts extends React.Component {
+  constructor(props) {
+    super(props)
+  }
+  render() {
+      const {host: {loadingHosts, hosts}} = this.props;
+      const hostsListProps = {
+          dataSource: hosts,
+          loadingList: loadingHosts
+      }
+    return (
+        <div className="content-inner">
+          <HostsList {...hostsListProps} />
+        </div>
+    )
+  }
+}
 
-export default Hosts
+export default connect(({host}) => ({host}))(Hosts)

src/themes/react/static/js/services/hosts.js

@@ -0,0 +1,12 @@
+/**
+ * Created by yuehaitao on 2017/1/18.
+ */
+import { request } from '../utils'
+import { config } from '../utils'
+
+export async function getHosts(params) {
+    return request(config.urls.hosts, {
+        method: 'get',
+        data: params
+    })
+}

src/themes/react/static/js/utils/config.js

@@ -1,9 +1,11 @@
+const apiBase = '/api'
 module.exports = {
   name: 'Cello Dashboard',
   prefix: 'cello',
   footerText: 'Cello Dashboard',
   logoText: 'Cello',
   urls: {
-    queryStat: '/api/stat'
+    queryStat: apiBase + '/stat',
+    hosts: apiBase + '/hosts'
   }
 }

src/themes/react/static/webpack.config.js

@@ -44,6 +44,11 @@ module.exports = function (webpackConfig, env) {
       loader.test = /\.css$/
     }
   })
+  webpackConfig.externals = {
+    'react': 'React',
+    'react-dom': 'ReactDOM',
+    'echarts': true
+  }
 
   return webpackConfig
 }

src/themes/react/templates/index.html

@@ -20,6 +20,9 @@
 <body>
 
 <div id="root"></div>
+<script src="//cdn.bootcss.com/react/15.4.2/react.min.js"></script>
+<script src="//cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
+<script src="//cdn.bootcss.com/echarts/3.4.0/echarts.min.js"></script>
 <script src="{{ url_for('static', filename='js/dist/index.js') }}"> </script>
 
 </body>