add deployment list

Author: lisong

src/actions/actionTypes.js

@@ -81,6 +81,8 @@ export const CLOSE_POP_ADD_APP = 'CLOSE_POP_ADD_APP';
 export const POP_ADD_APP_INPUT = 'POP_ADD_APP_INPUT';
 export const REQUEST_ADD_PRODUCTS = 'REQUEST_ADD_PRODUCTS';
 export const RECEIVE_ADD_PRODUCTS = 'RECEIVE_ADD_PRODUCTS';
+export const REQUEST_PRODUCTS_DEPLOYMENTS = 'REQUEST_PRODUCTS_DEPLOYMENTS';
+export const RECEIVE_PRODUCTS_DEPLOYMENTS = 'RECEIVE_PRODUCTS_DEPLOYMENTS';
 /*========= end productsActions   ===========*/
 
 /*========= begin msgStackActions ===========*/

src/actions/productsActions.js

@@ -73,3 +73,28 @@ export function addProducts(appName) {
     });
   };
 }
+
+export function requestDeployments(appName) {
+  return {
+    type: types.REQUEST_PRODUCTS_DEPLOYMENTS,
+    payload: appName
+  }
+}
+
+export function receiveDeployments(appName, data) {
+  return {
+    type: types.RECEIVE_PRODUCTS_DEPLOYMENTS,
+    payload: {appName, ...data}
+  }
+}
+
+export function fetchDeployments(appName) {
+  return (dispatch) => {
+    dispatch(requestDeployments(appName));
+    return restApi.getDeployments(appName)
+    .then(data => {
+      checkResponseAuth(dispatch, data);
+      dispatch(receiveDeployments(appName, data));
+    });
+  };
+}

src/components/Product/Product.css

@@ -11,3 +11,18 @@
   min-height: 480px;
   max-width: var(--max-content-width);
 }
+
+table{
+  font-size: 1.2em;
+  width: 100%;
+  text-align: center;
+}
+
+li {
+  list-style: none;
+}
+
+li a {
+  text-decoration: none;
+  color: inherit;
+}

src/components/Product/Product.js

@@ -10,14 +10,17 @@ import Link from '../Link';
 class Product extends Component {
   static propTypes = {
     appName: PropTypes.string,
+    items: PropTypes.array
   };
 
   static defaultProps = {
     appName: '',
+    items: [],
   };
 
   constructor() {
     super();
+    this.renderRow = this.renderRow.bind(this);
   }
 
   render() {
@@ -46,11 +49,37 @@ class Product extends Component {
             </tr>
           </thead>
           <tbody>
+            {
+             this.props.items.length > 0 ?
+             _.map(this.props.items, (item, index) => self.renderRow(item, index))
+             :
+             <tr>
+               <td colSpan="6" >{tipText}</td>
+             </tr>
+            }
           </tbody>
         </Table>
         </div>
       </div>
     );
   }
+
+  renderRow(rowData, index) {
+    const deployName = _.get(rowData, 'name');
+    return (
+      <tr key={index}>
+        <td>
+          <Link to={`/apps/${this.props.appName}/${deployName}`}>{deployName}</Link>
+        </td>
+        <td style={{ textAlign: 'left' }}>
+          {_.get(rowData, 'key')}
+        </td>
+        <td></td>
+        <td></td>
+        <td></td>
+        <td />
+      </tr>
+    );
+  }
 }
 export default withStyles(s)(Product);

src/containers/ProductContainer.js

@@ -28,17 +28,20 @@ class ProductContainer extends Component {
     }
   }
   render() {
-    const {products, appName, actions } = this.props;
+    const {deployments, appName, actions } = this.props;
     return (
-      <Product appName={appName} />
+      <Product
+      appName={appName}
+      items={_.get(deployments, `rs.${appName}`)}
+      />
     );
   }
 }
 
 function mapStateToProps(state, ownProps) {
   return {
     'auth': _.get(state, 'auth', {}),
-    'products': _.get(state, 'products', {})
+    'deployments': _.get(state, 'deployments', {})
   };
 }
 

src/network/RestApi.js

@@ -41,6 +41,22 @@ class RestApi {
     .then(this.jsonDecode);
   }
 
+  getDeployments(appName) {
+    return this.get(`/apps/${appName}/deployments`)
+    .then(data=>{
+      if (data.httpCode == 200) {
+        var rs = this.jsonDecode(data);
+        if (_.get(rs, 'status') != "ERROR") {
+          return {status:"OK", httpCode: data.httpCode, results: rs};
+        } else {
+          return rs;
+        }
+      } else {
+        return {status:"ERROR", httpCode: data.httpCode, errorCode: 0, errorMessage: data.text};
+      }
+    });
+  }
+
   addProducts(appName) {
     return this.post('/apps', {name:appName})
     .then(data=>{

src/reducers/index.js

@@ -5,7 +5,7 @@ import {users, login, password} from './users';
 import {register} from './registers';
 import {auth, accessKeys} from './auth';
 import {routes} from './routes';
-import {products, addProducts} from './products';
+import {products, addProducts, deployments} from './products';
 import {msgStack} from './msgStack';
 
 const appReducer = combineReducers({
@@ -18,6 +18,7 @@ const appReducer = combineReducers({
   routes,
   products,
   addProducts,
+  deployments,
   msgStack,
 });
 

src/reducers/products.js

@@ -8,6 +8,8 @@ import {
   POP_ADD_APP_INPUT,
   REQUEST_ADD_PRODUCTS,
   RECEIVE_ADD_PRODUCTS,
+  REQUEST_PRODUCTS_DEPLOYMENTS,
+  RECEIVE_PRODUCTS_DEPLOYMENTS,
 } from '../actions/actionTypes';
 
 export function products(state = {}, action) {
@@ -16,7 +18,6 @@ export function products(state = {}, action) {
       return Object.assign({}, state, {isFetching: true});
 
     case RECEIVE_PRODUCTS:
-
       return Object.assign({}, state, {
         isFetching: false,
         rs: _.get(action, 'payload.apps')
@@ -27,6 +28,23 @@ export function products(state = {}, action) {
   }
 }
 
+export function deployments(state = {rs:{}}, action) {
+    let payload = _.get(action, 'payload');
+    switch (action.type) {
+      case REQUEST_PRODUCTS_DEPLOYMENTS:
+        return Object.assign({}, state, {isFetching: true});
+
+      case RECEIVE_PRODUCTS_DEPLOYMENTS:
+        var data = Object.assign({}, state, {isFetching: false});
+        var appName = _.get(payload, 'appName');
+        _.set(data, `rs.${appName}`, _.get(payload, 'results.deployments'));
+        return data;
+
+      default :
+        return state;
+    }
+}
+
 export function addProducts(state = {}, action) {
   let payload = action.payload;
   switch (action.type) {

src/routes/apps/index.js

@@ -1,7 +1,7 @@
 
 import React from 'react';
 import LayoutContainer from '../../containers/LayoutContainer';
-import { getProducts } from '../../actions/productsActions';
+import { getProducts, fetchDeployments} from '../../actions/productsActions';
 import _ from 'lodash';
 
 const apps = {
@@ -48,10 +48,12 @@ const appDetails = {
   path: '/apps/:appName',
 
   async action({store, params}) {
+    var appName = _.get(params, 'appName');
     if (process.env.BROWSER) {
-
+      setTimeout(() => {
+        store.dispatch(fetchDeployments(appName));
+      }, 100);
     }
-    var appName = _.get(params, 'appName');
     const ProductContainer = await require.ensure([], require => require('../../containers/ProductContainer').default, 'product');
     return {
       title: `${appName} 详情`,