Finish UI portion of ServiceDetail page

BaragonUI/app/actions/api/services.es6

@@ -1,5 +1,7 @@
 import { buildApiAction, buildJsonApiAction } from './base';
 
+const buildRequestId = (serviceId) => `${serviceId}-${Date.now()}`;
+
 export const FetchBaragonServices = buildApiAction(
   'FETCH_BARAGON_SERVICES',
   {url: '/state'}
@@ -17,8 +19,8 @@ export const FetchService = buildApiAction(
 export const DeleteService = buildJsonApiAction(
   'DELETE_SERVICE',
   'DELETE',
-  (serviceId) => ({
-    url: `/state/${serviceId}`,
+  (serviceId, noValidate = false, noReload = false) => ({
+    url: `/state/${serviceId}?noValidate=${noValidate}&noReload=${noReload}`,
   })
 );
 
@@ -29,3 +31,20 @@ export const ReloadService = buildJsonApiAction(
     url: `/state/${serviceId}/reload`,
   })
 );
+
+export const RemoveUpstreams = buildJsonApiAction(
+  'REMOVE_UPSTREAMS',
+  'POST',
+  (loadBalancerService, upstreams, noValidate, noReload) => ({
+    url: '/request',
+    body: {
+      loadBalancerService,
+      noValidate,
+      noReload,
+      loadBalancerRequestId: buildRequestId(loadBalancerService.serviceId),
+      addUpstreams: [],
+      removeUpstreams: upstreams,
+    },
+  }),
+  (serviceId) => serviceId,
+);

BaragonUI/app/components/common/modalButtons/DeleteServiceModal.jsx

@@ -23,21 +23,40 @@ class DeleteServiceModal extends Component {
         action="Delete"
         onConfirm={this.props.deleteService}
         buttonStyle="danger"
-        formElements={[]}>
-        <p>Are you sure you want to reload configs this service?</p>
+        formElements={[
+          {
+            name: 'noValidate',
+            type: FormModal.INPUT_TYPES.BOOLEAN,
+            label: 'Validate new configuration after applying changes'
+          },
+          {
+            name: 'noReload',
+            type: FormModal.INPUT_TYPES.BOOLEAN,
+            label: 'Reload configuration after applying changes',
+          },
+        ]}>
+        <p>Are you sure you sure you want to delete this service?</p>
         <pre>{this.props.serviceId}</pre>
+        <p>
+          Deleting a service will remove the entry from Baragon's state node as
+          well as clearing the locks on any associated base paths. It will also
+          remove the configs from the load balancer (they will be backed up for
+          reference).
+        </p>
       </FormModal>
     );
   }
 }
 
 const mapDispatchToProps = (dispatch, ownProps) => ({
-  deleteService: () => dispatch(DeleteService.trigger(ownProps.serviceId)).then(response => (ownProps.then && ownProps.then(response)))
+  deleteService: (data) => dispatch(DeleteService
+    .trigger(ownProps.serviceId, data.noValidate, data.noReload))
+      .then(response => (ownProps.then && ownProps.then(response)))
 });
 
 export default connect(
   null,
   mapDispatchToProps,
   null,
   { withRef: true }
-)(DeleteServiceModal);
+)(DeleteServiceModal);

BaragonUI/app/components/common/modalButtons/RemoveUpstreamButton.jsx

@@ -0,0 +1,51 @@
+import React, { Component, PropTypes } from 'react';
+
+import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
+import ToolTip from 'react-bootstrap/lib/Tooltip';
+import { Glyphicon } from 'react-bootstrap';
+
+import { getClickComponent } from '../modal/ModalWrapper';
+
+import RemoveUpstreamModal from './RemoveUpstreamModal';
+
+const removeTooltip = (
+  <ToolTip id="removeAll">
+    Remove this upstream from the service
+  </ToolTip>
+);
+
+export default class RemoveUpstreamButton extends Component {
+  static propTypes = {
+    loadBalancerService: PropTypes.object,
+    upstream: PropTypes.shape({
+      group: PropTypes.string,
+      rackId: PropTypes.string,
+      requestId: PropTypes.string.isRequired,
+      upstream: PropTypes.string.isRequired,
+    }),
+    children: PropTypes.node,
+    afterRemoveUpstream: PropTypes.func,
+  };
+
+  static defaultProps = {
+    children: (
+      <OverlayTrigger placement="top" id="view-delete-overlay" overlay={removeTooltip}>
+        <Glyphicon glyph="remove" className="inactive" />
+      </OverlayTrigger>
+    )
+  };
+
+  render() {
+    return (
+      <span>
+        {getClickComponent(this)}
+        <RemoveUpstreamModal
+          ref="modal"
+          loadBalancerService={this.props.loadBalancerService}
+          upstream={this.props.upstream}
+          then={this.props.afterRemoveUpstream}
+        />
+      </span>
+    );
+  }
+}

BaragonUI/app/components/common/modalButtons/RemoveUpstreamModal.jsx

@@ -0,0 +1,62 @@
+import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
+
+import { RemoveUpstreams } from '../../../actions/api/services';
+
+import FormModal from '../modal/FormModal';
+
+class RemoveUpstreamModal extends Component {
+  static propTypes = {
+    loadBalancerService: PropTypes.object.isRequired,
+    upstream: PropTypes.object.isRequired,
+    removeUpstream: PropTypes.func.isRequired,
+    then: PropTypes.func,
+  };
+
+  show() {
+    this.refs.removeUpstreamModal.show();
+  }
+
+  render() {
+    return (
+      <FormModal
+        name="Remove all Upstreams"
+        ref="removeUpstreamModal"
+        action="Remove"
+        onConfirm={this.props.removeUpstream}
+        buttonStyle="warning"
+        formElements={[
+          {
+            name: 'noValidate',
+            type: FormModal.INPUT_TYPES.BOOLEAN,
+            label: 'Validate new configuration after applying changes',
+          },
+          {
+            name: 'noReload',
+            type: FormModal.INPUT_TYPES.BOOLEAN,
+            label: 'Reload configuration after applying changes',
+          },
+        ]}>
+        <p>Are you sure you want to remove this upstream?</p>
+        <pre>{this.props.upstream.upstream}</pre>
+        <p>
+          This will post a new request to remove this upstream from the nginx
+          config. It will not alter any other upstreams or options.
+        </p>
+      </FormModal>
+    );
+  }
+}
+
+const mapDispatchToProps = (dispatch, ownProps) => ({
+  removeUpstream: (data) => dispatch(RemoveUpstreams
+    .trigger(ownProps.loadBalancerService, [ownProps.upstream], data.noValidate, data.noReload))
+      .then(response => (ownProps.then && ownProps.then(response)))
+});
+
+export default connect(
+  null,
+  mapDispatchToProps,
+  null,
+  { withRef: true }
+)(RemoveUpstreamModal);

BaragonUI/app/components/common/modalButtons/RemoveUpstreamsButton.jsx

@@ -0,0 +1,52 @@
+import React, { PropTypes } from 'react';
+
+import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
+import ToolTip from 'react-bootstrap/lib/Tooltip';
+
+import { getClickComponent } from '../modal/ModalWrapper';
+
+import RemoveUpstreamsModal from './RemoveUpstreamsModal';
+
+const removeTooltip = (
+  <ToolTip id="removeAll">
+    Remove all upstreams from this service
+  </ToolTip>
+);
+
+export default class RemoveUpstreamsButton extends React.Component {
+  static propTypes = {
+    loadBalancerService: PropTypes.object,
+    upstreams: PropTypes.arrayOf(PropTypes.shape({
+      group: PropTypes.string,
+      rackId: PropTypes.string,
+      requestId: PropTypes.string.isRequired,
+      upstream: PropTypes.string.isRequired,
+    })),
+    children: PropTypes.node,
+    afterRemoveUpstreams: PropTypes.func,
+  };
+
+  static defaultProps = {
+    children: (
+      <OverlayTrigger placement="top" id="view-delete-overlay" overlay={removeTooltip}>
+        <span>
+          <a className="btn btn-warning">Remove Upstreams</a>
+        </span>
+      </OverlayTrigger>
+    )
+  };
+
+  render() {
+    return (
+      <span>
+        {getClickComponent(this)}
+        <RemoveUpstreamsModal
+          ref="modal"
+          loadBalancerService={this.props.loadBalancerService}
+          upstreams={this.props.upstreams}
+          then={this.props.afterRemoveUpstreams}
+        />
+      </span>
+    );
+  }
+}

BaragonUI/app/components/common/modalButtons/RemoveUpstreamsModal.jsx

@@ -0,0 +1,63 @@
+import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
+
+import { RemoveUpstreams } from '../../../actions/api/services';
+
+import FormModal from '../modal/FormModal';
+
+class RemoveUpstreamsModal extends Component {
+  static propTypes = {
+    loadBalancerService: PropTypes.object.isRequired,
+    upstreams: PropTypes.array.isRequired,
+    removeUpstreams: PropTypes.func.isRequired,
+    then: PropTypes.func,
+  };
+
+  show() {
+    this.refs.removeUpstreamsModal.show();
+  }
+
+  render() {
+    return (
+      <FormModal
+        name="Remove all Upstreams"
+        ref="removeUpstreamsModal"
+        action="Remove"
+        onConfirm={this.props.removeUpstreams}
+        buttonStyle="warning"
+        formElements={[
+          {
+            name: 'noValidate',
+            type: FormModal.INPUT_TYPES.BOOLEAN,
+            label: 'Validate new configuration after applying changes',
+          },
+          {
+            name: 'noReload',
+            type: FormModal.INPUT_TYPES.BOOLEAN,
+            label: 'Reload configuration after applying changes',
+          },
+        ]}>
+        <p>Are you sure you want to remove all upstreams for this service?</p>
+        <pre>{this.props.loadBalancerService.serviceId}</pre>
+        <p>
+          This will post a new request to remove all the current upstreams
+          for a service. This will effectively 'undo' the request by creating
+          empty config files.
+        </p>
+      </FormModal>
+    );
+  }
+}
+
+const mapDispatchToProps = (dispatch, ownProps) => ({
+  removeUpstreams: (data) => dispatch(RemoveUpstreams
+    .trigger(ownProps.loadBalancerService, ownProps.upstreams, data.noValidate, data.noReload))
+      .then(response => (ownProps.then && ownProps.then(response)))
+});
+
+export default connect(
+  null,
+  mapDispatchToProps,
+  null,
+  { withRef: true }
+)(RemoveUpstreamsModal);