React-ify Request Detail page

BaragonUI/app/actions/api/requests.es6

@@ -31,4 +31,4 @@ export const FetchRequestResponse = buildApiAction(
     renderNotFoundIf404
   }),
   (requestId) => requestId
-);
+);

BaragonUI/app/actions/ui/groups.es6

@@ -1,4 +1,4 @@
 import { FetchBaragonGroups } from '../../actions/api/groups';
 
 export const refresh = () => (dispatch) =>
-  dispatch(FetchBaragonGroups.trigger())
+  dispatch(FetchBaragonGroups.trigger());

BaragonUI/app/actions/ui/requestDetail.es6

@@ -0,0 +1,7 @@
+import { FetchRequestResponse } from '../api/requests';
+
+export const refresh = (requestId) => dispatch => {
+  Promise.all([
+    dispatch(FetchRequestResponse.trigger(requestId)),
+  ]);
+};

BaragonUI/app/actions/ui/serviceDetail.es6

@@ -1,5 +1,5 @@
-import { FetchService } from '../../actions/api/services'
-import { FetchRequestHistory } from '../../actions/api/requests'
+import { FetchService } from '../../actions/api/services';
+import { FetchRequestHistory } from '../../actions/api/requests';
 
 export const refresh = (serviceId) => (dispatch) =>
   Promise.all([

BaragonUI/app/components/requestDetail/AgentResponsesPanel.jsx

@@ -0,0 +1,100 @@
+import React from 'react';
+
+const AgentDetailContent = ({content}) => {
+  if (content) {
+    return (
+      <div className="row">
+        <div className="col-md-12">
+          <strong>Message:</strong> {content}
+        </div>
+      </div>
+    );
+  } else {
+    return null;
+  }
+};
+
+AgentDetailContent.propTypes = {
+  content: React.PropTypes.string,
+};
+
+const AgentDetailException = ({exception}) => {
+  if (exception) {
+    return (
+      <div className="row">
+        <div className="col-md-12">
+          <strong>Exception:</strong> {exception}
+        </div>
+      </div>
+    );
+  } else {
+    return null;
+  }
+};
+
+AgentDetailException.propTypes = {
+  exception: React.PropTypes.string,
+};
+
+const agentDetail = ({url, attempt, statusCode, content, exception}) => {
+  return (
+    <li className="list-group-item" key={url}>
+      <div className="row">
+        <div className="col-md-4">
+          <strong>Agent: </strong>
+          <a href={url}>{url}</a>
+        </div>
+        <div className="col-md-4">
+          <strong>Attempt:</strong> {attempt}
+        </div>
+        <div className="col-md-4">
+          <strong>Status Code:</strong> {statusCode}
+        </div>
+      </div>
+      <AgentDetailContent content={content} />
+      <AgentDetailException exception={exception} />
+    </li>
+  );
+};
+
+agentDetail.propTypes = {
+  url: React.PropTypes.string.isRequired,
+  attempt: React.PropTypes.number.isRequired,
+  statusCode: React.PropTypes.string.isRequred,
+  content: React.PropTypes.string,
+  exception: React.PropTypes.string,
+};
+
+const agent = (value, key) => {
+  return (
+    <li className="list-group-item" key={key}>
+      <h4>{key}</h4>
+      <ul className="list-group">
+        { value.map(agentDetail) }
+      </ul>
+    </li>
+  );
+};
+
+const AgentResponsesPanel = ({agentResponses}) => {
+  return (
+    <div className="col-md-12">
+      <div className="panel panel-default">
+        <div className="panel-heading">
+          <h4>Agent Responses</h4>
+        </div>
+        <div className="panel-body">
+          <ul className="list-group">
+            { _.values(_.mapObject(agentResponses, agent)) }
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+AgentResponsesPanel.propTypes = {
+  agentResponses: React.PropTypes.object,
+};
+
+export default AgentResponsesPanel;

BaragonUI/app/components/requestDetail/OriginalRequestPanel.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+const OriginalRequestPanel = ({request}) => {
+  return (
+    <div className="col-md-12">
+      <div className="panel panel-default">
+        <div className="panel-heading">
+          <h4>Original Request</h4>
+        </div>
+        <div className="panel-body">
+          <pre>
+            { JSON.stringify(request, undefined, 4) }
+          </pre>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+OriginalRequestPanel.propTypes = {
+  request: React.PropTypes.object,
+};
+
+export default OriginalRequestPanel;

BaragonUI/app/components/requestDetail/RequestDetail.jsx

@@ -1,23 +1,67 @@
-import React, { Component, PropTypes } from 'react';
+import React, { PropTypes } from 'react';
 import { connect } from 'react-redux';
-import classNames from 'classnames';
-import { Link } from 'react-router';
 import rootComponent from '../../rootComponent';
-import { refresh } from '../../actions/ui/serviceDetail';
+import { refresh } from '../../actions/ui/requestDetail';
 import Utils from '../../utils';
 
-class RequestDetail extends Component {
-  render() {
-    // TODO - render out info nicely + link to service page/group page
-    return <h1>Request {this.props.params.requestId}</h1>
+import JSONButton from '../common/JSONButton';
+
+import SummaryPanel from './SummaryPanel';
+import AgentResponsesPanel from './AgentResponsesPanel';
+import OriginalRequestPanel from './OriginalRequestPanel';
+
+const RequestDetail = ({response}) => {
+  if (response === undefined || ! response.loadBalancerRequestId) {
+    return <div className="centered cushy page-loader"></div>;
   }
 
-  static propTypes = {
-    params: PropTypes.object.isRequired,
-    response: React.PropTypes.object
-  };
-}
+  const {
+    agentResponses,
+    message,
+    request,
+    loadBalancerRequestId: requestId,
+  } = response;
+  const {loadBalancerService: {serviceId}} = request;
+
+  return (
+    <div>
+      <div className="row detail-header">
+        <div className="col-md-10">
+          <h3>Request: {requestId}</h3>
+        </div>
+        <div className="col-md-2 button-container">
+          <JSONButton object={response} showOverlay={true}>
+            <span className="btn btn-default">JSON</span>
+          </JSONButton>
+        </div>
+      </div>
+      <div className="row">
+        <SummaryPanel
+          serviceId={serviceId}
+          message={message}
+        />
+      </div>
+      <div className="row">
+        <AgentResponsesPanel agentResponses={agentResponses} />
+      </div>
+      <div className="row">
+        <OriginalRequestPanel request={request} />
+      </div>
+    </div>
+  );
+};
 
-export default connect((state, ownProps) => ({
+RequestDetail.propTypes = {
+  response: PropTypes.shape({
+    agentResponses: PropTypes.object,
+    message: PropTypes.string,
+    request: PropTypes.object,
+    loadBalancerRequestId: PropTypes.string,
+  }),
+};
+
+const mapStateToProps = (state, ownProps) => ({
   response: Utils.maybe(state, ['api', 'requestResponse', ownProps.params.requestId, 'data']),
-}))(rootComponent(RequestDetail, (props) => refresh(props.params.requestId)));
+});
+
+export default connect(mapStateToProps)(rootComponent(RequestDetail, (props) => refresh(props.params.requestId)));

BaragonUI/app/components/requestDetail/SummaryPanel.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Link } from 'react-router';
+
+const SummaryPanel = ({serviceId, message}) => {
+  return (
+    <div className="col-md-12">
+      <div className="panel panel-default">
+        <div className="panel-heading">
+          <h4>Summary</h4>
+        </div>
+        <div className="panel-body">
+          <div className="col-md-3">
+            <h4>Service ID: </h4>
+            <h4><Link to={`/services/${serviceId}`}>{serviceId}</Link></h4>
+          </div>
+          <div className="col-md-9 list-group-item">
+            <h4>Message: </h4><p>{message}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+SummaryPanel.propTypes = {
+  serviceId: React.PropTypes.string,
+  message: React.PropTypes.string,
+};
+
+export default SummaryPanel;

BaragonUI/app/reducers/api/index.es6

@@ -1,4 +1,3 @@
-import _ from 'underscore';
 import { combineReducers } from 'redux';
 import buildApiActionReducer from './base';
 import buildKeyedApiActionReducer from './keyed';
@@ -25,7 +24,7 @@ import {
   FetchGroupTargetCount,
   FetchGroupAgents,
   FetchGroupKnownAgents
-} from '../../actions/api/groups'
+} from '../../actions/api/groups';
 
 import {
   FetchBaragonServices,
@@ -34,8 +33,6 @@ import {
   ReloadService
 } from '../../actions/api/services';
 
-
-
 const status = buildApiActionReducer(FetchBaragonStatus);
 const workers = buildApiActionReducer(FetchBaragonServiceWorkers, []);
 const queuedRequests = buildApiActionReducer(FetchQueuedRequests, []);
@@ -50,14 +47,15 @@ const service = buildKeyedApiActionReducer(FetchService, []);
 const deleteService = buildKeyedApiActionReducer(DeleteService, []);
 const reloadService = buildKeyedApiActionReducer(ReloadService, []);
 const requestHistory = buildKeyedApiActionReducer(FetchRequestHistory, []);
-const requestResponse = buildKeyedApiActionReducer(FetchRequestResponse, []);
+const requestResponse = buildKeyedApiActionReducer(FetchRequestResponse, {});
 const submitRequest = buildKeyedApiActionReducer(SubmitRequest, []);
 
 export default combineReducers({
   status,
   workers,
   queuedRequests,
   groups,
+  group,
   basePaths,
   targetCount,
   agents,

BaragonUI/app/router.jsx

@@ -19,10 +19,10 @@ const routes = (
   <Route path="/" component={Application}>
     <IndexRoute component={StatusPage} title="Status" />
     <Route path="services" component={Services} title="Services" />
-    <Route path="service/:serviceId" component={ServiceDetail} title={(params) => `${params.serviceId}`} />
+    <Route path="services/:serviceId" component={ServiceDetail} title={(params) => `${params.serviceId}`} />
     <Route path="groups" component={Groups} title="Groups" />
     <Route path="group/:groupId" component={GroupDetail} title={(params) => `${params.groupId}`} />
-    <Route path="request/:requestId" component={RequestDetail} title={(params) => `${params.requestId}`} />
+    <Route path="requests/:requestId" component={RequestDetail} title={(params) => `${params.requestId}`} />
     <Route path="*" component={NotFound} title="Not Found" />
   </Route>);